refactor: framework changes to allow custom action component

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
2019-09-24 17:49:01 +05:30 · 2019-09-24 17:49:01 +05:30 · 882861250e
parent 83f7eeb547
commit 882861250e
17 changed files with 81 additions and 85 deletions
--- a/ui/src/components/widgets/Status.vue
+++ b/ui/src/components/widgets/Status.vue
@ -69,7 +69,7 @@ export default {
 </script>

 <style scoped>
-.ant-badge-status-dot {
+/deep/ .ant-badge-status-dot {
  width: 14px;
  height: 14px;
 }
--- a/ui/src/config/router.js
+++ b/ui/src/config/router.js
@ -1,5 +1,6 @@
 // eslint-disable-next-line
 import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/layouts'
+import AutogenView from '@/views/AutogenView.vue'

 import compute from '@/config/section/compute'
 import storage from '@/config/section/storage'
@ -26,6 +27,7 @@ export function generateRouterMap (section) {
    map.meta.permission = section.children[0].permission
    map.children = []
    for (const child of section.children) {
+      var component = child.component ? child.component : AutogenView
      var route = {
        name: child.name,
        path: '/' + child.name,
@ -38,7 +40,7 @@ export function generateRouterMap (section) {
          columns: child.columns,
          actions: child.actions
        },
-        component: child.component,
+        component: component,
        hideChildrenInMenu: true,
        children: [
          {
@ -49,12 +51,32 @@ export function generateRouterMap (section) {
              icon: child.icon,
              permission: child.permission,
              params: child.params ? child.params : {},
-              actions: child.actions ? child.actions : []
+              actions: child.actions ? child.actions : [],
+              viewComponent: child.viewComponent
            },
-            component: child.viewComponent ? child.viewComponent : child.component
+            component: component
          }
        ]
      }
+      if (child.actions) {
+        child.actions.forEach(function (action) {
+          if (!action.component || !action.api) {
+            return
+          }
+          map.children.push({
+            name: action.api,
+            icon: child.icon,
+            path: '/action/' + action.api,
+            meta: {
+              title: child.title,
+              keepAlive: true,
+              permission: [ action.api ]
+            },
+            component: action.component,
+            hidden: true
+          })
+        })
+      }
      map.children.push(route)
    }
  } else {
--- a/ui/src/config/section/compute.js
+++ b/ui/src/config/section/compute.js
@ -8,7 +8,7 @@ export default {
      title: 'Instances',
      icon: 'desktop',
      permission: [ 'listVirtualMachinesMetrics', 'listVirtualMachines' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
+      viewComponent: () => import('@/views/compute/InstanceView.vue'),
      columns: [
        { 'name': (record) => { return record.displayname } }, 'state', 'instancename',
        { 'ipaddress': (record) => { return record.nic[0].ipaddress } }, 'account', 'zonename',
@ -21,8 +21,8 @@ export default {
          api: 'deployVirtualMachine',
          icon: 'plus',
          label: 'Deploy VM',
-          args: ['name', 'zoneid', 'templateid', 'serviceofferingid', 'rootdisksize'],
-          listView: true
+          listView: true,
+          component: () => import('@/views/compute/DeployVM.vue')
        },
        {
          api: 'updateVirtualMachine',
@ -140,7 +140,6 @@ export default {
      title: 'SSH Key Pairs',
      icon: 'key',
      permission: [ 'listSSHKeyPairs' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: ['name', 'fingerprint', 'account', 'domain'],
      actions: [
        {
@ -162,7 +161,6 @@ export default {
      title: 'Affinity Groups',
      icon: 'swap',
      permission: [ 'listAffinityGroups' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: ['name', 'type', 'description', 'account', 'domain'],
      actions: [
        {
--- a/ui/src/config/section/config.js
+++ b/ui/src/config/section/config.js
@ -9,7 +9,6 @@ export default {
      title: 'Global Settings',
      icon: 'global',
      permission: [ 'listConfigurations' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: [ 'name', 'description', 'category', 'value' ]
    },
    {
@ -17,7 +16,6 @@ export default {
      title: 'LDAP Configuration',
      icon: 'team',
      permission: [ 'listLdapConfigurations' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: [ 'hostname', 'port' ]
    },
    {
@ -25,7 +23,6 @@ export default {
      title: 'Hypervisor Capabilities',
      icon: 'database',
      permission: [ 'listHypervisorCapabilities' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: [ 'hypervisor', 'hypervisorversion', 'maxguestlimit', 'maxdatavolumeslimit', 'maxhostspercluster' ]
    }
  ]
--- a/ui/src/config/section/iam.js
+++ b/ui/src/config/section/iam.js
@ -9,7 +9,6 @@ export default {
      title: 'Users',
      icon: 'user',
      permission: [ 'listUsers' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: ['username', 'state', 'firstname', 'lastname', 'email', 'account', 'domain']
    },
    {
@ -17,7 +16,6 @@ export default {
      title: 'Accounts',
      icon: 'team',
      permission: [ 'listAccounts' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: ['name', 'state', 'firstname', 'lastname', 'rolename', 'roletype', 'domain']
    },
    {
@ -25,7 +23,6 @@ export default {
      title: 'Domains',
      icon: 'block',
      permission: [ 'listDomains' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: ['name', 'state', 'path', 'parentdomainname', 'level']
    },
    {
@ -33,7 +30,6 @@ export default {
      title: 'Roles',
      icon: 'idcard',
      permission: [ 'listRoles' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: ['name', 'type', 'description']
    }
  ]
--- a/ui/src/config/section/image.js
+++ b/ui/src/config/section/image.js
@ -9,7 +9,6 @@ export default {
      icon: 'save',
      permission: [ 'listTemplates' ],
      params: { 'templatefilter': 'executable' },
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: ['name', 'ostypename', 'status', 'hypervisor', 'account', 'domain'],
      actions: [
        {
@ -26,7 +25,6 @@ export default {
      title: 'ISOs',
      icon: 'usb',
      permission: [ 'listIsos' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: ['name', 'ostypename', 'account', 'domain']
    }
  ]
--- a/ui/src/config/section/infra.js
+++ b/ui/src/config/section/infra.js
@ -9,7 +9,6 @@ export default {
      title: 'Zones',
      icon: 'global',
      permission: [ 'listZones', 'listZonesMetrics' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: [ 'name', 'allocationstate', 'networktype', 'guestcidraddress' ],
      actions: [
        {
@ -26,7 +25,6 @@ export default {
      title: 'Pods',
      icon: 'appstore',
      permission: [ 'listPods' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: [ 'name', 'allocationstate', 'gateway', 'netmask', 'zonename' ]
    },
    {
@ -34,7 +32,6 @@ export default {
      title: 'Clusters',
      icon: 'cluster',
      permission: [ 'listClusters', 'listClustersMetrics' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: [ 'name', 'allocationstate', 'clustertype', 'hypervisortype', 'podname', 'zonename' ]
    },
    {
@ -43,7 +40,6 @@ export default {
      icon: 'desktop',
      permission: [ 'listHosts', 'listHostsMetrics' ],
      params: { 'type': 'routing' },
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: [ 'name', 'state', 'resourcestate', 'ipaddress', 'hypervisor', 'hypervisorversion', 'clustername', 'zonename' ]
    },
    {
@ -51,7 +47,6 @@ export default {
      title: 'Primary Storage',
      icon: 'database',
      permission: [ 'listStoragePools', 'listStoragePoolsMetrics' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: [ 'name', 'state', 'ipaddress', 'type', 'path', 'scope', 'clustername', 'zonename' ]
    },
    {
@ -59,7 +54,6 @@ export default {
      title: 'Secondary Storages',
      icon: 'picture',
      permission: [ 'listImageStores' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: [ 'name', 'url', 'protocol', 'scope', 'zonename' ]
    },
    {
@ -67,7 +61,6 @@ export default {
      title: 'System VMs',
      icon: 'thunderbolt',
      permission: [ 'listSystemVms' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: [ 'name', 'state', 'agentstate', 'systemvmtype', 'publicip', 'privateip', 'hostname', 'zonename' ]
    },
    {
@ -75,7 +68,6 @@ export default {
      title: 'Virtual Routers',
      icon: 'fork',
      permission: [ 'listRouters' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: [ 'name', 'state', 'publicip', 'guestnetworkname', 'vpcname', 'redundantstate', 'version', 'hostname', 'account', 'zonename', 'requiresupgrade' ]
    },
    {
@ -84,7 +76,6 @@ export default {
      icon: 'api',
      permission: [ 'listHosts' ],
      params: { 'type': 'routing' },
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: [ 'hypervisor', 'hosts', 'cpusockets' ]
    },
    {
@ -92,7 +83,6 @@ export default {
      title: 'Management Servers',
      icon: 'rocket',
      permission: [ 'listManagementServers' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: [ 'name', 'state', 'version' ]
    }
  ]
--- a/ui/src/config/section/monitor.js
+++ b/ui/src/config/section/monitor.js
@ -9,7 +9,6 @@ export default {
      title: 'Events',
      icon: 'schedule',
      permission: [ 'listEvents' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: ['description', 'state', 'level', 'type', 'account', 'domain', 'created']
    },
    {
@ -17,7 +16,6 @@ export default {
      title: 'Alerts',
      icon: 'flag',
      permission: [ 'listAlerts' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: ['description', 'type', 'sent']
    }
  ]
--- a/ui/src/config/section/network.js
+++ b/ui/src/config/section/network.js
@ -8,7 +8,6 @@ export default {
      title: 'Guest Networks',
      icon: 'gateway',
      permission: [ 'listNetworks' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: ['name', 'state', 'type', 'cidr', 'ip6cidr', 'broadcasturi', 'account', 'zonename'],
      actions: [
        {
@ -26,7 +25,6 @@ export default {
      title: 'VPC',
      icon: 'deployment-unit',
      permission: [ 'listVPCs' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: ['name', 'state', 'displaytext', 'cidr', 'account', 'zonename']
    },
    {
@ -34,7 +32,6 @@ export default {
      title: 'Security Groups',
      icon: 'fire',
      permission: [ 'listSecurityGroups' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: ['name', 'description', 'account', 'domain']
    },
    {
@ -42,7 +39,6 @@ export default {
      title: 'Public IP Addresses',
      icon: 'environment',
      permission: [ 'listPublicIpAddresses' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: ['ipaddress', 'state', 'associatednetworkname', 'virtualmachinename', 'allocated', 'account', 'zonename']
    },
    {
@ -50,7 +46,6 @@ export default {
      title: 'VPN Gateway',
      icon: 'lock',
      permission: [ 'listVpnCustomerGateways' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: ['name', 'ipaddress', 'gateway', 'cidrlist', 'ipsecpsk', 'account', 'domain']
    }
  ]
--- a/ui/src/config/section/offering.js
+++ b/ui/src/config/section/offering.js
@ -9,7 +9,6 @@ export default {
      title: 'Compute Offerings',
      icon: 'cloud',
      permission: [ 'listServiceOfferings' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: [ 'name', 'displaytext', 'cpunumber', 'cpuspeed', 'memory', 'tags', 'domain', 'zone' ]
    },
    {
@ -17,7 +16,6 @@ export default {
      title: 'Disk Offerings',
      icon: 'hdd',
      permission: [ 'listDiskOfferings' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: [ 'name', 'displaytext', 'disksize', 'tags', 'domain', 'zone' ]
    },
    {
@ -25,7 +23,6 @@ export default {
      title: 'Network Offerings',
      icon: 'wifi',
      permission: [ 'listNetworkOfferings' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: [ 'name', 'state', 'guestiptype', 'traffictype', 'networkrate', 'tags', 'domain', 'zone' ]
    },
    {
@ -33,7 +30,6 @@ export default {
      title: 'VPC Offerings',
      icon: 'deployment-unit',
      permission: [ 'listVPCOfferings' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: [ 'name', 'state', 'displaytext', 'domain', 'zone' ]
    },
    {
@ -42,7 +38,6 @@ export default {
      icon: 'setting',
      permission: [ 'listServiceOfferings' ],
      params: { 'issystem': 'true' },
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: [ 'name', 'systemvmtype', 'cpunumber', 'cpuspeed', 'memory', 'storagetype', 'tags' ]
    }
  ]
--- a/ui/src/config/section/plugin.js
+++ b/ui/src/config/section/plugin.js
@ -8,15 +8,13 @@ export default {
      name: 'quota',
      title: 'Quota',
      icon: 'pie-chart',
-      permission: [ 'quotaSummary', 'quotaIsEnabled' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue')
+      permission: [ 'quotaSummary', 'quotaIsEnabled' ]
    },
    {
      name: 'cloudian',
      title: 'Cloudian Storage',
      icon: 'cloud-download',
-      permission: [ 'cloudianSsoLogin', 'cloudianIsEnabled' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue')
+      permission: [ 'cloudianSsoLogin', 'cloudianIsEnabled' ]
    }
  ]
 }
--- a/ui/src/config/section/project.js
+++ b/ui/src/config/section/project.js
@ -3,6 +3,5 @@ export default {
  title: 'Projects',
  icon: 'project',
  permission: [ 'listProjects' ],
-  component: () => import('@/components/CloudMonkey/Resource.vue'),
  columns: ['name', 'state', 'displaytext', 'account', 'domain']
 }
--- a/ui/src/config/section/storage.js
+++ b/ui/src/config/section/storage.js
@ -8,7 +8,6 @@ export default {
      title: 'Volumes',
      icon: 'hdd',
      permission: [ 'listVolumesMetrics', 'listVolumes' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: ['name', 'state', 'type', 'vmname', 'size', 'physicalsize', 'utilization', 'diskkbsread', 'diskkbswrite', 'diskiopstotal', 'storage', 'account', 'zonename'],
      hidden: ['storage', 'utilization'],
      actions: [
@ -91,7 +90,6 @@ export default {
      title: 'Snapshots',
      icon: 'build',
      permission: [ 'listSnapshots' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: ['name', 'state', 'volumename', 'intervaltype', 'created', 'account']
    },
    {
@ -99,7 +97,6 @@ export default {
      title: 'VM Snapshots',
      icon: 'camera',
      permission: [ 'listVMSnapshot' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
      columns: ['name', 'state', 'type', 'current', 'parent', 'created', 'account']
    }
  ]
--- a/ui/src/components/CloudMonkey/Resource.vue
+++ b/ui/src/components/CloudMonkey/Resource.vue
@ -167,7 +167,7 @@
    </div>

    <div v-if="dataView">
-      <instance-view :vm="resource" v-if="routeName == 'vm'" />
+      <component :is="$route.meta.viewComponent" :resource="resource" v-if="$route.meta.viewComponent"/></component>
      <data-view :resource="resource" v-else />
    </div>
    <div style="margin-top: 12px" v-else>
@ -193,7 +193,6 @@ import Breadcrumb from '@/components/widgets/Breadcrumb'
 import CardView from '@/components/widgets/CardView'
 import ChartCard from '@/components/chart/ChartCard'
 import DataView from '@/components/widgets/DataView'
-import InstanceView from '@/components/widgets/InstanceView'
 import ListView from '@/components/widgets/ListView'
 import Status from '@/components/widgets/Status'

@ -204,7 +203,6 @@ export default {
    CardView,
    ChartCard,
    DataView,
-    InstanceView,
    ListView,
    Status
  },
@ -235,7 +233,7 @@ export default {
  },
  watch: {
    '$route' (to, from) {
-      if (to.fullPath !== from.fullPath) {
+      if (to.fullPath !== from.fullPath && !to.fullPath.includes('action/')) {
        this.fetchData()
      }
    },
@ -264,14 +262,17 @@ export default {
      } else if (this.$route.meta.params) {
        Object.assign(params, this.$route.meta.params)
      }
+
      if (search !== '') {
        params['keyword'] = search
      }
+
      if (this.$route && this.$route.params && this.$route.params.id) {
        this.dataView = true
      } else {
        this.dataView = false
      }
+
      if (this.$route && this.$route.meta && this.$route.meta.permission) {
        this.apiName = this.$route.meta.permission[0]
        if (this.$route.meta.columns) {
@ -281,9 +282,11 @@ export default {
          this.actions = this.$route.meta.actions
        }
      }
+
      if (this.apiName === '' || this.apiName === undefined) {
        return
      }
+
      if (!this.columnKeys || this.columnKeys.length === 0) {
        for (const field of store.getters.apis[this.apiName]['response']) {
          this.columnKeys.push(field.name)
@ -297,7 +300,6 @@ export default {
        })
      }

-      var counter = 0
      for (var key of this.columnKeys) {
        if (typeof key === 'object') {
          key = Object.keys(key)[0]
@ -305,7 +307,6 @@ export default {
        this.columns.push({
          title: this.$t(key),
          dataIndex: key,
-          key: counter++,
          scopedSlots: { customRender: key },
          sorter: (a, b) => String(a[key]).length - String(b[key]).length
        })
@ -368,6 +369,10 @@ export default {
      this.currentAction = {}
    },
    execAction (action) {
+      if (action.component && action.api) {
+        this.$router.push({ name: action.api })
+        return
+      }
      this.currentAction = action
      var params = store.getters.apis[this.currentAction.api]['params']
      params.sort(function (a, b) {
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@ -0,0 +1,28 @@
+<template>
+  <div>
+    Finish this component
+    <a-steps direction="vertical" :current="1">
+      <a-step title="Finished" description="This is a description." />
+      <a-step title="In Progress" description="This is a description." />
+      <a-step title="Waiting" description="This is a description." />
+    </a-steps>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'DeployVM',
+  components: {
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+</style>
--- a/ui/src/views/compute/Instance.vue
+++ b/ui/src/views/compute/Instance.vue
@ -1,23 +0,0 @@
-<template>
-  <div>
-
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: '',
-  components: {
-  },
-  data () {
-    return {
-    }
-  },
-  methods: {
-  }
-}
-</script>
-
-<style scoped>
-</style>
--- a/ui/src/components/widgets/InstanceView.vue
+++ b/ui/src/components/widgets/InstanceView.vue
@ -23,7 +23,7 @@
          </div>
          <div class="account-center-detail">
            <p>
-              <status :text="vm.state" style="padding-left: 8px; padding-right: 5px"/>{{ vm.state }}
+              <status :text="vm.state ? vm.state : ''" style="padding-left: 8px; padding-right: 5px"/>{{ vm.state }}
            </p>
            <p>
              <font-awesome-icon :icon="['fab', osLogo]" size="lg"/> {{ guestOsName }} <br/>
@ -44,7 +44,7 @@
            </p>
            <p>
              <font-awesome-icon :icon="['fas', 'ethernet']" />
-              {{ vm.nic.length }} NIC(s): <br/>
+              {{ vm && vm.nic ? vm.nic.length : 0 }} NIC(s): <br/>
              <span style="padding-left: 34px" v-for="eth in vm.nic" :key="eth.id">
                {{ eth.ipaddress }} <router-link :to="{ path: '/guestnetwork/' + eth.networkid }">({{ eth.networkname }})</router-link> <br/>
              </span>
@ -119,13 +119,11 @@
              />
              <div slot="content">
                <a-form-item>
-                  <a-textarea :rows="4" @change="handleChange" :value="value" ></a-textarea>
+                  <a-textarea :rows="4" ></a-textarea>
                </a-form-item>
                <a-form-item>
                  <a-button
                    htmlType="submit"
-                    :loading="submitting"
-                    @click="handleSubmit"
                    type="primary"
                  >
                    Add Note
@ -191,7 +189,7 @@
              </a-list>

            </a-collapse-panel>
-            <a-collapse-panel :header="'Network Adapter(s): ' + vm.nic.length" key="3" >
+            <a-collapse-panel :header="'Network Adapter(s): ' + (vm && vm.nic ? vm.nic.length : 0)" key="3" >
              <a-list
                itemLayout="horizontal"
                :dataSource="vm.nic"
@ -240,13 +238,14 @@ export default {
    Status
  },
  props: {
-    vm: {
+    resource: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
+      vm: {},
      volumes: [],
      totalStorage: 0,
      guestOsName: '',
@ -277,8 +276,12 @@ export default {

    }
  },
+  created () {
+    this.vm = this.resource
+  },
  watch: {
-    vm: function (newVm, oldVm) {
+    resource: function (newItem, oldItem) {
+      this.vm = newItem
      this.fetchData()
    }
  },