config: explicit details list for each view

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/src/components/widgets/ListView.vue

@@ -18,7 +18,7 @@
 
     <a slot="name" slot-scope="text, record" href="javascript:;">
       <router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ text }}</router-link>
-      <span v-else>{{ text }}</span>
+      <router-link :to="{ path: $route.path + '/?name=' + record.name }" v-else>{{ text }}</router-link>
     </a>
     <a slot="displayname" slot-scope="text, record" href="javascript:;">
       <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
@@ -38,7 +38,7 @@
 
     <a slot="account" slot-scope="text, record" href="javascript:;">
       <router-link :to="{ path: '/account/' + record.accountid }" v-if="record.accountid">{{ text }}</router-link>
-      <router-link :to="{ path: '/account', query: { name: record.account } }" v-else>{{ text }}</router-link>
+      <router-link :to="{ path: '/account', query: { name: record.account, domainid: record.domainid } }" v-else>{{ text }}</router-link>
     </a>
     <a slot="domain" slot-scope="text, record" href="javascript:;">
       <router-link :to="{ path: '/domain/' + record.domainid }">{{ text }}</router-link>

ui/src/config/router.js

@@ -39,6 +39,7 @@ export function generateRouterMap (section) {
           resourceType: child.resourceType,
           params: child.params ? child.params : {},
           columns: child.columns,
+          details: child.details,
           actions: child.actions
         },
         component: component,
@@ -53,6 +54,7 @@ export function generateRouterMap (section) {
               permission: child.permission,
               resourceType: child.resourceType,
               params: child.params ? child.params : {},
+              details: child.details,
               actions: child.actions ? child.actions : [],
               viewComponent: child.viewComponent
             },
@@ -94,6 +96,7 @@ export function generateRouterMap (section) {
         permission: section.permission,
         resourceType: section.resourceType,
         params: section.params ? section.params : {},
+        details: section.details,
         actions: section.actions ? section.actions : [],
         viewComponent: section.viewComponent
       },

ui/src/config/section/compute.js

@@ -149,6 +149,7 @@ export default {
       icon: 'key',
       permission: [ 'listSSHKeyPairs' ],
       columns: ['name', 'fingerprint', 'account', 'domain'],
+      details: ['name', 'fingerprint', 'account', 'domain'],
       actions: [
         {
           api: 'createSSHKeyPair',
@@ -172,6 +173,7 @@ export default {
       icon: 'swap',
       permission: [ 'listAffinityGroups' ],
       columns: ['name', 'type', 'description', 'account', 'domain'],
+      details: ['name', 'id', 'description', 'type', 'account', 'domain'],
       actions: [
         {
           api: 'createAffinityGroup',

ui/src/config/section/image.js

@@ -11,6 +11,7 @@ export default {
       resourceType: 'Template',
       params: { 'templatefilter': 'executable' },
       columns: ['name', 'ostypename', 'status', 'hypervisor', 'account', 'domain'],
+      details: ['name', 'id', 'displaytext', 'checksum', 'hypervisor', 'format', 'ostypename', 'size', 'isready', 'passwordenabled', 'directdownload', 'isextractable', 'isdynamicallyscalable', 'ispublic', 'isfeatured', 'crosszones', 'type', 'account', 'domain', 'created'],
       actions: [
         {
           api: 'registerTemplate',
@@ -55,6 +56,7 @@ export default {
       permission: [ 'listIsos' ],
       resourceType: 'ISO',
       columns: ['name', 'ostypename', 'account', 'domain'],
+      details: ['name', 'id', 'displaytext', 'ostypename', 'bootable', 'directdownload', 'size', 'account', 'domain', 'created'],
       actions: [
         {
           api: 'registerIso',

ui/src/config/section/network.js

@@ -10,6 +10,7 @@ export default {
       permission: [ 'listNetworks' ],
       resourceType: 'Network',
       columns: ['name', 'state', 'type', 'cidr', 'ip6cidr', 'broadcasturi', 'account', 'zonename'],
+      details: ['name', 'id', 'description', 'type', 'traffictype', 'vpcid', 'vlan', 'broadcasturi', 'cidr', 'ip6cidr', 'netmask', 'gateway', 'ispersistent', 'restartrequired', 'reservediprange', 'redundantrouter', 'networkdomain', 'zonename', 'account', 'domain'],
       actions: [
         {
           api: 'deleteNetwork',
@@ -27,7 +28,8 @@ export default {
       icon: 'deployment-unit',
       permission: [ 'listVPCs' ],
       resourceType: 'Vpc',
-      columns: ['name', 'state', 'displaytext', 'cidr', 'account', 'zonename']
+      columns: ['name', 'state', 'displaytext', 'cidr', 'account', 'zonename'],
+      details: ['name', 'id', 'displaytext', 'cidr', 'networkdomain', 'ispersistent', 'redundantvpcrouter', 'restartrequired', 'zonename', 'account', 'domain']
     },
     {
       name: 'securitygroups',
@@ -35,7 +37,8 @@ export default {
       icon: 'fire',
       permission: [ 'listSecurityGroups' ],
       resourceType: 'SecurityGroup',
-      columns: ['name', 'description', 'account', 'domain']
+      columns: ['name', 'description', 'account', 'domain'],
+      details: ['name', 'id', 'description', 'account', 'domain']
     },
     {
       name: 'publicip',
@@ -43,7 +46,8 @@ export default {
       icon: 'environment',
       permission: [ 'listPublicIpAddresses' ],
       resourceType: 'PublicIpAddress',
-      columns: ['ipaddress', 'state', 'associatednetworkname', 'virtualmachinename', 'allocated', 'account', 'zonename']
+      columns: ['ipaddress', 'state', 'associatednetworkname', 'virtualmachinename', 'allocated', 'account', 'zonename'],
+      details: ['ipaddress', 'id', 'associatednetworkname', 'virtualmachinename', 'networkid', 'issourcenat', 'isstaticnat', 'virtualmachinename', 'vmipaddress', 'vlan', 'allocated', 'account', 'zonename']
     },
     {
       name: 'vpngateway',
@@ -51,7 +55,8 @@ export default {
       icon: 'lock',
       permission: [ 'listVpnCustomerGateways' ],
       resourceType: 'VpnGateway',
-      columns: ['name', 'ipaddress', 'gateway', 'cidrlist', 'ipsecpsk', 'account', 'domain']
+      columns: ['name', 'ipaddress', 'gateway', 'cidrlist', 'ipsecpsk', 'account', 'domain'],
+      details: ['name', 'id', 'ipaddress', 'gateway', 'cidrlist', 'ipsecpsk', 'account', 'domain']
     }
   ]
 }

ui/src/config/section/storage.js

@@ -11,6 +11,7 @@ export default {
       resourceType: 'Volume',
       columns: ['name', 'state', 'type', 'vmname', 'size', 'physicalsize', 'utilization', 'diskkbsread', 'diskkbswrite', 'diskiopstotal', 'storage', 'account', 'zonename'],
       hidden: ['storage', 'utilization'],
+      details: ['name', 'id', 'type', 'deviceid', 'sizegb', 'physicalsize', 'provisioningtype', 'utilization', 'diskkbsread', 'diskkbswrite', 'diskioread', 'diskiowrite', 'diskiopstotal', 'path'],
       actions: [
         {
           api: 'createVolume',
@@ -93,6 +94,7 @@ export default {
       permission: [ 'listSnapshots' ],
       resourceType: 'Snapshot',
       columns: ['name', 'state', 'volumename', 'intervaltype', 'created', 'account'],
+      details: ['name', 'id', 'volumename', 'intervaltype', 'account', 'domain', 'created'],
       actions: [
         {
           api: 'createVolume',
@@ -130,6 +132,7 @@ export default {
       permission: [ 'listVMSnapshot' ],
       resourceType: 'VMSnapshot',
       columns: ['name', 'state', 'type', 'current', 'parent', 'created', 'account'],
+      details: ['name', 'id', 'displayname', 'description', 'type', 'current', 'parent', 'virtualmachineid', 'account', 'domain', 'created'],
       actions: [
         {
           api: 'revertToVMSnapshot',

ui/src/views/AutogenView.vue

@@ -361,6 +361,9 @@ export default {
         }
         if (this.items.length > 0) {
           this.resource = this.items[0]
+          if (this.items.length === 1 && Object.keys(this.$route.query).length > 0) {
+            this.dataView = true
+          }
         } else {
           this.resource = {}
         }

ui/src/views/common/DetailView.vue

@@ -8,27 +8,33 @@
       </a-col>
       <a-col :md="24" :lg="16">
         <a-card
-          style="width:100%"
-          title="Details"
           :bordered="true"
-        >
+          style="width:100%">
-          <a-skeleton active v-if="loading" />
+          <a-tabs defaultActiveKey="1" @change="onTabChange" style="width:100%">
-          <a-card-grid
+            <a-tab-pane
-            style="width:50%; textAlign:'center'"
+              v-for="(tab, index) in tabs"
-            :key="key"
+              :tab="$t(tab.name)"
-            v-for="(value, key) in resource"
+              :key="index">
-            v-if="!loading && key !== 'key' && key !== 'tags'">
+              <a-card
-            <strong>{{ $t(key) }}</strong><br/>{{ value }}
+                style="width:100%"
-          </a-card-grid>
+                v-if="tab.name === 'details'"
-        </a-card>
+              >
-        <a-card
+                <a-skeleton active v-if="loading" />
-          style="width:100%; margin-top: 12px"
+                <a-card-grid
-          title="Settings"
+                  style="width:50%; textAlign:'center'"
-          :bordered="true"
+                  :key="index"
-        >
+                  v-for="(key, index) in $route.meta.details"
-          <list-view
+                  v-if="!loading && key in resource">
-            :columns="settingsColumns"
+                  <strong>{{ $t(key) }}</strong><br/>{{ resource[key] }}
-            :items="settings " />
+                </a-card-grid>
+              </a-card>
+
+              <list-view
+                v-if="tab.name === 'settings'"
+                :columns="settingsColumns"
+                :items="settings " />
+            </a-tab-pane>
+          </a-tabs>
         </a-card>
       </a-col>
     </a-row>
@@ -61,6 +67,9 @@ export default {
   },
   data () {
     return {
+      tabs: [{
+        name: 'details'
+      }],
       settingsColumns: [
         {
           title: this.$t('name'),
@@ -78,11 +87,17 @@ export default {
     }
   },
   watch: {
+    '$route' (to, from) {
+      console.log(this.resource)
+    },
     resource: function (newItem, oldItem) {
       this.resource = newItem
     }
   },
   methods: {
+    onTabChange (key) {
+      this.activeTab = key
+    }
   }
 }
 </script>

ui/src/views/common/InfoCard.vue

@@ -46,7 +46,7 @@
       </div>
       <div class="resource-detail-item" v-if="resource.virtualmachineid">
         <a-icon type="desktop" class="resource-detail-item"/>
-        <router-link :to="{ path: '/vm/' + resource.virtualmachineid }">{{ resource.vmname || resource.vm || resource.virtualmachineid }} </router-link>
+        <router-link :to="{ path: '/vm/' + resource.virtualmachineid }">{{ resource.vmname || resource.vm || resource.virtualmachinename || resource.virtualmachineid }} </router-link>
         <status :text="resource.vmstate" v-if="resource.vmstate"/>
       </div>
       <div class="resource-detail-item" v-if="resource.volumeid">
@@ -66,6 +66,10 @@
         <a-icon type="wifi" class="resource-detail-item"/>
         <router-link :to="{ path: '/networkoffering/' + resource.networkofferingid }">{{ resource.networkofferingname || resource.networkofferingid }} </router-link>
       </div>
+      <div class="resource-detail-item" v-if="resource.associatednetworkid">
+        <a-icon type="wifi" class="resource-detail-item"/>
+        <router-link :to="{ path: '/guestnetwork/' + resource.associatednetworkid }">{{ resource.associatednetworkname || resource.associatednetworkid }} </router-link>
+      </div>
       <div class="resource-detail-item" v-if="resource.vpcofferingid">
         <a-icon type="deployment-unit" class="resource-detail-item"/>
         <router-link :to="{ path: '/vpcoffering/' + resource.vpcofferingid }">{{ resource.vpcofferingname || resource.vpcofferingid }} </router-link>
@@ -98,7 +102,7 @@
       </div>
       <div class="resource-detail-item" v-if="resource.account">
         <a-icon type="user" class="resource-detail-item"/>
-        <router-link :to="{ path: '/account?name=' + resource.account }">{{ resource.account }}</router-link>
+        <router-link :to="{ path: '/account', query: { name: resource.account, domainid: resource.domainid } }">{{ resource.account }}</router-link>
       </div>
       <div class="resource-detail-item" v-if="resource.roleid">
         <a-icon type="idcard" class="resource-detail-item"/>
@@ -263,8 +267,12 @@ export default {
       if ('tags' in this.resource) {
         this.tags = this.resource.tags
       }
-      this.getTags()
+      if (this.resourceType) {
-      this.getNotes()
+        this.getTags()
+      }
+      if (this.annotationType) {
+        this.getNotes()
+      }
     }
   },
   methods: {