infocard: support for tags and config across UI

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

ui/src/config/router.js

@@ -36,6 +36,7 @@ export function generateRouterMap (section) {
           keepAlive: true,
           icon: child.icon,
           permission: child.permission,
+          resourceType: child.resourceType,
           params: child.params ? child.params : {},
           columns: child.columns,
           actions: child.actions
@@ -50,6 +51,7 @@ export function generateRouterMap (section) {
               keepAlive: true,
               icon: child.icon,
               permission: child.permission,
+              resourceType: child.resourceType,
               params: child.params ? child.params : {},
               actions: child.actions ? child.actions : [],
               viewComponent: child.viewComponent
@@ -90,6 +92,7 @@ export function generateRouterMap (section) {
         keepAlive: true,
         icon: section.icon,
         permission: section.permission,
+        resourceType: section.resourceType,
         params: section.params ? section.params : {},
         actions: section.actions ? section.actions : [],
         viewComponent: section.viewComponent

ui/src/config/section/compute.js

@@ -8,6 +8,7 @@ export default {
       title: 'Instances',
       icon: 'desktop',
       permission: [ 'listVirtualMachinesMetrics', 'listVirtualMachines' ],
+      resourceType: 'UserVm',
       viewComponent: () => import('@/views/compute/InstanceView.vue'),
       columns: [
         { 'name': (record) => { return record.displayname } }, 'state', 'instancename',

ui/src/config/section/iam.js

@@ -23,6 +23,7 @@ export default {
       title: 'Domains',
       icon: 'block',
       permission: [ 'listDomains' ],
+      resourceType: 'Domain',
       columns: ['name', 'state', 'path', 'parentdomainname', 'level']
     },
     {

ui/src/config/section/image.js

@@ -8,6 +8,7 @@ export default {
       title: 'Templates',
       icon: 'save',
       permission: [ 'listTemplates' ],
+      resourceType: 'Template',
       params: { 'templatefilter': 'executable' },
       columns: ['name', 'ostypename', 'status', 'hypervisor', 'account', 'domain'],
       actions: [
@@ -25,6 +26,7 @@ export default {
       title: 'ISOs',
       icon: 'usb',
       permission: [ 'listIsos' ],
+      resourceType: 'ISO',
       columns: ['name', 'ostypename', 'account', 'domain']
     }
   ]

ui/src/config/section/infra.js

@@ -40,6 +40,7 @@ export default {
       title: 'Hosts',
       icon: 'desktop',
       permission: [ 'listHosts', 'listHostsMetrics' ],
+      resourceType: 'Host',
       params: { 'type': 'routing' },
       columns: [ 'name', 'state', 'resourcestate', 'ipaddress', 'hypervisor', 'hypervisorversion', 'clustername', 'zonename' ]
     },

ui/src/config/section/network.js

@@ -8,6 +8,7 @@ export default {
       title: 'Guest Networks',
       icon: 'gateway',
       permission: [ 'listNetworks' ],
+      resourceType: 'Network',
       columns: ['name', 'state', 'type', 'cidr', 'ip6cidr', 'broadcasturi', 'account', 'zonename'],
       actions: [
         {
@@ -25,6 +26,7 @@ export default {
       title: 'VPC',
       icon: 'deployment-unit',
       permission: [ 'listVPCs' ],
+      resourceType: 'Vpc',
       columns: ['name', 'state', 'displaytext', 'cidr', 'account', 'zonename']
     },
     {
@@ -32,6 +34,7 @@ export default {
       title: 'Security Groups',
       icon: 'fire',
       permission: [ 'listSecurityGroups' ],
+      resourceType: 'SecurityGroup',
       columns: ['name', 'description', 'account', 'domain']
     },
     {
@@ -39,6 +42,7 @@ export default {
       title: 'Public IP Addresses',
       icon: 'environment',
       permission: [ 'listPublicIpAddresses' ],
+      resourceType: 'PublicIpAddress',
       columns: ['ipaddress', 'state', 'associatednetworkname', 'virtualmachinename', 'allocated', 'account', 'zonename']
     },
     {
@@ -46,6 +50,7 @@ export default {
       title: 'VPN Gateway',
       icon: 'lock',
       permission: [ 'listVpnCustomerGateways' ],
+      resourceType: 'VpnGateway',
       columns: ['name', 'ipaddress', 'gateway', 'cidrlist', 'ipsecpsk', 'account', 'domain']
     }
   ]

ui/src/config/section/project.js

@@ -3,5 +3,6 @@ export default {
   title: 'Projects',
   icon: 'project',
   permission: [ 'listProjects' ],
+  resourceType: 'Project',
   columns: ['name', 'state', 'displaytext', 'account', 'domain']
 }

ui/src/config/section/storage.js

@@ -8,6 +8,7 @@ export default {
       title: 'Volumes',
       icon: 'hdd',
       permission: [ 'listVolumesMetrics', 'listVolumes' ],
+      resourceType: 'Volume',
       columns: ['name', 'state', 'type', 'vmname', 'size', 'physicalsize', 'utilization', 'diskkbsread', 'diskkbswrite', 'diskiopstotal', 'storage', 'account', 'zonename'],
       hidden: ['storage', 'utilization'],
       actions: [
@@ -90,6 +91,7 @@ export default {
       title: 'Snapshots',
       icon: 'build',
       permission: [ 'listSnapshots' ],
+      resourceType: 'Snapshot',
       columns: ['name', 'state', 'volumename', 'intervaltype', 'created', 'account']
     },
     {
@@ -97,6 +99,7 @@ export default {
       title: 'VM Snapshots',
       icon: 'camera',
       permission: [ 'listVMSnapshot' ],
+      resourceType: 'VMSnapshot',
       columns: ['name', 'state', 'type', 'current', 'parent', 'created', 'account']
     }
   ]

ui/src/views/common/InfoCard.vue

@@ -9,12 +9,8 @@
       <div class="name">
         <slot name="name">
           <h4>
-            <status :text="resource.state" v-if="resource.state"/>
             {{ resource.name }}
           </h4>
-          <a-tag v-if="resource.state || resource.status">
-            {{ resource.state || resource.status }}
-          </a-tag>
           <a-tag v-if="resource.type">
             {{ resource.type }}
           </a-tag>
@@ -88,7 +84,7 @@
       </div>
     </div>
 
-    <div class="account-center-tags">
+    <div class="account-center-tags" v-if="resourceType && 'listTags' in $store.getters.apis">
       <a-divider/>
       <div class="tagsTitle">Tags</div>
       <div>
@@ -122,12 +118,11 @@
       </div>
     </div>
 
-    <div class="account-center-team" v-if="showNotes">
+    <div class="account-center-team" v-if="annotationType && 'listAnnotations' in $store.getters.apis">
       <a-divider :dashed="true"/>
       <div class="teamTitle">
         Comments ({{ notes.length }})
       </div>
-
       <a-list
         v-if="notes.length"
         :dataSource="notes"
@@ -139,14 +134,20 @@
             :content="item.annotation"
             :datetime="item.created"
           >
-            <a-button slot="avatar" shape="circle" size="small" @click="deleteNote(item)">
+            <a-button
-              <a-icon type="close"/>
+              v-if="'removeAnnotation' in $store.getters.apis"
+              slot="avatar"
+              type="danger"
+              shape="circle"
+              size="small"
+              @click="deleteNote(item)">
+              <a-icon type="delete"/>
             </a-button>
           </a-comment>
         </a-list-item>
       </a-list>
 
-      <a-comment>
+      <a-comment v-if="'addAnnotation' in $store.getters.apis">
         <a-avatar
           slot="avatar"
           icon="edit"
@@ -184,18 +185,12 @@ export default {
     resource: {
       type: Object,
       required: true
-    },
-    resourceType: {
-      type: String,
-      required: true
-    },
-    showNotes: {
-      type: Boolean,
-      default: false
     }
   },
   data () {
     return {
+      resourceType: '',
+      annotationType: '',
       inputVisible: false,
       inputKey: '',
       inputValue: '',
@@ -208,6 +203,24 @@ export default {
   watch: {
     resource: function (newItem, oldItem) {
       this.resource = newItem
+      this.resourceType = this.$route.meta.resourceType
+
+      switch (this.resourceType) {
+        case 'UserVm':
+          this.annotationType = 'VM'
+          break
+        case 'Domain':
+          this.annotationType = 'DOMAIN'
+          // Domain resource type is not supported for tags
+          this.resourceType = ''
+          break
+        case 'Host':
+          this.annotationType = 'HOST'
+          // Host resource type is not supported for tags
+          this.resourceType = ''
+          break
+      }
+
       this.getTags()
       this.getNotes()
       if ('tags' in this.resource) {
@@ -225,9 +238,8 @@ export default {
       })
     },
     getNotes () {
-      // TODO: support for HOST, DOMAIN and VM entities
       this.notes = []
-      api('listAnnotations', { 'entityid': this.resource.id, 'entitytype': 'VM' }).then(json => {
+      api('listAnnotations', { 'entityid': this.resource.id, 'entitytype': this.annotationType }).then(json => {
         if (json.listannotationsresponse && json.listannotationsresponse.annotation) {
           this.notes = json.listannotationsresponse.annotation
         }
@@ -279,12 +291,10 @@ export default {
         return
       }
       this.showNotesInput = false
-      const entityType = 'VM' // TODO: support HOST and DOMAIN
-
       const args = {}
-      args['annotation'] = this.annotation
       args['entityid'] = this.resource.id
-      args['entitytype'] = entityType
+      args['entitytype'] = this.annotationType
+      args['annotation'] = this.annotation
       api('addAnnotation', args).then(json => {
       }).finally(e => {
         this.getNotes()
@@ -327,6 +337,7 @@ export default {
     line-height: 28px;
     font-weight: 500;
     margin-bottom: 4px;
+    word-wrap: break-word;
   }
 }
 .resource-center-detail {