From f72704e04b9a4e3775b2d5730ade685873ed7b02 Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Fri, 11 Oct 2019 02:00:56 +0530
Subject: [PATCH] component: new info card component with tags and annotations
 support

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/components/widgets/ListView.vue |   5 -
 ui/src/components/widgets/Status.vue   |   5 +-
 ui/src/config/section/storage.js       |   1 +
 ui/src/views/common/DetailView.vue     |  85 ++++++
 ui/src/views/common/InfoCard.vue       | 397 +++++++++++++++++++++++++
 ui/src/views/compute/InstanceView.vue  | 273 +++--------------
 6 files changed, 525 insertions(+), 241 deletions(-)
 create mode 100644 ui/src/views/common/DetailView.vue
 create mode 100644 ui/src/views/common/InfoCard.vue

diff --git a/ui/src/components/widgets/ListView.vue b/ui/src/components/widgets/ListView.vue
index 3b13303c708..954d1abbd5f 100644
--- a/ui/src/components/widgets/ListView.vue
+++ b/ui/src/components/widgets/ListView.vue
@@ -101,11 +101,6 @@ export default {
 </script>
 
 <style scoped>
-/deep/ .ant-badge-status-dot {
-  width: 14px;
-  height: 14px;
-}
-
 /deep/ .light-row {
   background-color: #fff;
 }
diff --git a/ui/src/components/widgets/Status.vue b/ui/src/components/widgets/Status.vue
index 22c95336076..68369b38c57 100644
--- a/ui/src/components/widgets/Status.vue
+++ b/ui/src/components/widgets/Status.vue
@@ -72,7 +72,8 @@ export default {
 
 <style scoped>
 /deep/ .ant-badge-status-dot {
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
+  margin-top: -3px;
 }
 </style>
diff --git a/ui/src/config/section/storage.js b/ui/src/config/section/storage.js
index 1683621b668..693f02dfd46 100644
--- a/ui/src/config/section/storage.js
+++ b/ui/src/config/section/storage.js
@@ -8,6 +8,7 @@ export default {
       title: 'Volumes',
       icon: 'hdd',
       permission: [ 'listVolumesMetrics', 'listVolumes' ],
+      viewComponent: () => import('@/views/common/DetailView.vue'),
       columns: ['name', 'state', 'type', 'vmname', 'size', 'physicalsize', 'utilization', 'diskkbsread', 'diskkbswrite', 'diskiopstotal', 'storage', 'account', 'zonename'],
       hidden: ['storage', 'utilization'],
       actions: [
diff --git a/ui/src/views/common/DetailView.vue b/ui/src/views/common/DetailView.vue
new file mode 100644
index 00000000000..afd2aa0d70b
--- /dev/null
+++ b/ui/src/views/common/DetailView.vue
@@ -0,0 +1,85 @@
+<template>
+  <div style="padding-top: 12px" class="page-header-index-wide page-header-wrapper-grid-content-main">
+    <a-row :gutter="12">
+      <a-col :md="24" :lg="8" style="margin-bottom: 12px">
+        <slot name="info-card">
+          <info-card :resource="resource" resourceType="Volume" />
+        </slot>
+      </a-col>
+      <a-col :md="24" :lg="16">
+        <a-card
+          style="width:100%"
+          title="Details"
+          :bordered="true"
+        >
+        </a-card>
+        <a-card
+          style="width:100%; margin-top: 12px"
+          title="Settings"
+          :bordered="true"
+        >
+          <list-view
+            :columns="settingsColumns"
+            :items="settings " />
+        </a-card>
+      </a-col>
+    </a-row>
+
+  </div>
+</template>
+
+<script>
+
+import InfoCard from '@/views/common/InfoCard'
+import ListView from '@/components/widgets/ListView'
+import Status from '@/components/widgets/Status'
+
+export default {
+  name: 'DetailView',
+  components: {
+    InfoCard,
+    ListView,
+    Status
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      settingsColumns: [
+        {
+          title: this.$t('name'),
+          dataIndex: 'name',
+          sorter: true
+        }, {
+          title: this.$t('value'),
+          dataIndex: 'value'
+        }, {
+          title: this.$t('action'),
+          dataIndex: 'actions'
+        }
+      ],
+      settings: []
+    }
+  },
+  watch: {
+    resource: function (newItem, oldItem) {
+      this.resource = newItem
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.page-header-wrapper-grid-content-main {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  transition: 0.3s;
+}
+</style>
diff --git a/ui/src/views/common/InfoCard.vue b/ui/src/views/common/InfoCard.vue
new file mode 100644
index 00000000000..f9b5648ecc4
--- /dev/null
+++ b/ui/src/views/common/InfoCard.vue
@@ -0,0 +1,397 @@
+<template>
+  <a-card :bordered="true">
+    <div class="resource-details">
+      <div class="avatar">
+        <slot name="avatar">
+          <a-icon style="font-size: 36px" :type="$route.meta.icon" />
+        </slot>
+      </div>
+      <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>
+          <a-tag v-if="resource.hypervisor">
+            {{ resource.hypervisor }}
+          </a-tag>
+        </slot>
+      </div>
+    </div>
+    <div class="resource-center-detail">
+      <div class="resource-detail-item" v-if="resource.state || resource.status">
+        <status :text="resource.state || resource.status" class="resource-detail-item" />
+        <span style="margin-left: -5px">{{ resource.state || resource.status }}</span>
+      </div>
+      <div class="resource-detail-item" v-if="resource.id">
+        <a-icon type="barcode" class="resource-detail-item"/>{{ resource.id }}
+        <a-tooltip placement="right" >
+          <template slot="title">
+            <span>Copy</span>
+          </template>
+          <a-button shape="circle" type="dashed" size="small" v-clipboard:copy="resource.id">
+            <a-icon type="copy"/>
+          </a-button>
+        </a-tooltip>
+      </div>
+      <div class="resource-detail-item">
+        <slot name="details">
+        </slot>
+      </div>
+      <div class="resource-detail-item" v-if="resource.vmname && resource.virtualmachineid">
+        <a-icon type="desktop" class="resource-detail-item"/>
+        <router-link :to="{ path: '/vm/' + resource.virtualmachineid }">{{ resource.vmname }} </router-link>
+        <status :text="resource.vmstate" v-if="resource.vmstate"/>
+      </div>
+      <div class="resource-detail-item" v-if="resource.serviceofferingname && resource.serviceofferingid">
+        <a-icon type="cloud" class="resource-detail-item"/>
+        <router-link :to="{ path: '/computeoffering/' + resource.serviceofferingid }">{{ resource.serviceofferingname }} </router-link>
+      </div>
+      <div class="resource-detail-item" v-if="resource.templatename && resource.templateid">
+        <a-icon type="picture" class="resource-detail-item"/>
+        <router-link :to="{ path: '/template/' + resource.templateid }">{{ resource.templatename }} </router-link>
+      </div>
+      <div class="resource-detail-item" v-if="resource.storage && resource.storageid">
+        <a-icon type="database" class="resource-detail-item"/>
+        <router-link :to="{ path: '/storagepool/' + resource.storageid }">{{ resource.storage }} </router-link>
+        <a-tag v-if="resource.storagetype">
+          {{ resource.storagetype }}
+        </a-tag>
+      </div>
+      <div class="resource-detail-item" v-if="resource.hostname && resource.hostid">
+        <a-icon type="desktop" class="resource-detail-item"/>
+        <router-link :to="{ path: '/host/' + resource.hostid }">{{ resource.hostname }} </router-link>
+        <a-tag v-if="resource.hypervisor">
+          {{ resource.hypervisor }}
+        </a-tag>
+      </div>
+      <div class="resource-detail-item" v-if="resource.zonename && resource.zoneid">
+        <a-icon type="global" class="resource-detail-item"/>
+        <router-link :to="{ path: '/zone/' + resource.zoneid }">{{ resource.zonename }}</router-link>
+      </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>
+      </div>
+      <div class="resource-detail-item" v-if="resource.domain && resource.domainid">
+        <a-icon type="block" class="resource-detail-item"/>
+        <router-link :to="{ path: '/domain/' + resource.domainid }">{{ resource.domain }}</router-link>
+      </div>
+      <div class="resource-detail-item" v-if="resource.created">
+        <a-icon type="calendar" class="resource-detail-item"/>{{ resource.created }}
+      </div>
+    </div>
+
+    <a-divider/>
+
+    <div class="account-center-tags" v-if="showTags">
+      <div class="tagsTitle">Tags</div>
+      <div>
+        <template v-for="(tag, index) in tags">
+          <a-tag :key="index" :closable="true" :afterClose="() => handleDeleteTag(tag)">
+            {{ tag.key }} = {{ tag.value }}
+          </a-tag>
+        </template>
+
+        <div v-if="inputVisible">
+          <a-input-group
+            type="text"
+            size="small"
+            @blur="handleInputConfirm"
+            @keyup.enter="handleInputConfirm"
+            compact>
+            <a-input ref="input" :value="inputKey" @change="handleKeyChange" style="width: 100px; text-align: center" placeholder="Key" />
+            <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
+            <a-input :value="inputValue" @change="handleValueChange" style="width: 100px; text-align: center; border-left: 0" placeholder="Value" />
+            <a-button shape="circle" size="small" @click="handleInputConfirm">
+              <a-icon type="check"/>
+            </a-button>
+            <a-button shape="circle" size="small" @click="inputVisible=false">
+              <a-icon type="close"/>
+            </a-button>
+          </a-input-group>
+        </div>
+        <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
+          <a-icon type="plus" /> New Tag
+        </a-tag>
+      </div>
+    </div>
+
+    <a-divider :dashed="true"/>
+
+    <div class="account-center-team" v-if="showNotes">
+      <div class="teamTitle">
+        Comments ({{ notes.length }})
+      </div>
+
+      <a-list
+        v-if="notes.length"
+        :dataSource="notes"
+        itemLayout="horizontal"
+        size="small"
+      >
+        <a-list-item slot="renderItem" slot-scope="item">
+          <a-comment
+            :content="item.annotation"
+            :datetime="item.created"
+          >
+            <a-button slot="avatar" shape="circle" size="small" @click="deleteNote(item)">
+              <a-icon type="close"/>
+            </a-button>
+          </a-comment>
+        </a-list-item>
+      </a-list>
+
+      <a-comment>
+        <a-avatar
+          slot="avatar"
+          icon="edit"
+          @click="showNotesInput = true"
+        />
+        <div slot="content">
+          <a-textarea
+            rows="4"
+            @change="handleNoteChange"
+            :value="annotation"
+            placeholder="Add Note" />
+          <a-button
+            @click="saveNote"
+            type="primary"
+          >
+            Save
+          </a-button>
+        </div>
+      </a-comment>
+    </div>
+  </a-card>
+</template>
+
+<script>
+
+import { api } from '@/api'
+import Status from '@/components/widgets/Status'
+
+export default {
+  name: 'InfoCard',
+  components: {
+    Status
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    },
+    resourceType: {
+      type: String,
+      required: true
+    },
+    showTags: {
+      type: Boolean,
+      default: true
+    },
+    showNotes: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      inputVisible: false,
+      inputKey: '',
+      inputValue: '',
+      tags: [],
+      notes: [],
+      annotation: '',
+      showNotesInput: false
+    }
+  },
+  watch: {
+    resource: function (newItem, oldItem) {
+      this.resource = newItem
+      this.getTags()
+      this.getNotes()
+    }
+  },
+  methods: {
+    getTags () {
+      this.tags = []
+      api('listTags', { 'listall': true, 'resourceid': this.resource.id, 'resourcetype': this.resourceType }).then(json => {
+        if (json.listtagsresponse && json.listtagsresponse.tag) {
+          this.tags = json.listtagsresponse.tag
+        }
+      })
+    },
+    getNotes () {
+      // TODO: support for HOST, DOMAIN and VM entities
+      this.notes = []
+      api('listAnnotations', { 'entityid': this.resource.id, 'entitytype': 'VM' }).then(json => {
+        if (json.listannotationsresponse && json.listannotationsresponse.annotation) {
+          this.notes = json.listannotationsresponse.annotation
+        }
+      })
+    },
+    showInput () {
+      this.inputVisible = true
+      this.$nextTick(function () {
+        this.$refs.input.focus()
+      })
+    },
+    handleKeyChange (e) {
+      this.inputKey = e.target.value
+    },
+    handleValueChange (e) {
+      this.inputValue = e.target.value
+    },
+    handleInputConfirm () {
+      const args = {}
+      args['resourceids'] = this.resource.id
+      args['resourcetype'] = this.resourceType
+      args['tags[0].key'] = this.inputKey
+      args['tags[0].value'] = this.inputValue
+      api('createTags', args).then(json => {
+      }).finally(e => {
+        this.getTags()
+      })
+
+      this.inputVisible = false
+      this.inputKey = ''
+      this.inputValue = ''
+    },
+    handleDeleteTag (tag) {
+      const args = {}
+      args['resourceids'] = tag.resourceid
+      args['resourcetype'] = tag.resourcetype
+      args['tags[0].key'] = tag.key
+      args['tags[0].value'] = tag.value
+      api('deleteTags', args).then(json => {
+      }).finally(e => {
+        this.getTags()
+      })
+    },
+    handleNoteChange (e) {
+      this.annotation = e.target.value
+    },
+    saveNote () {
+      if (this.annotation.length < 1) {
+        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
+      api('addAnnotation', args).then(json => {
+      }).finally(e => {
+        this.getNotes()
+      })
+      this.annotation = ''
+    },
+    deleteNote (annotation) {
+      const args = {}
+      args['id'] = annotation.id
+      api('removeAnnotation', args).then(json => {
+      }).finally(e => {
+        this.getNotes()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+.resource-details {
+  text-align: center;
+  margin-bottom: 24px;
+  & > .avatar {
+    margin: 0 auto;
+    padding-top: 20px;
+    width: 104px;
+    //height: 104px;
+    margin-bottom: 20px;
+    border-radius: 50%;
+    overflow: hidden;
+    img {
+      height: 100%;
+      width: 100%;
+    }
+  }
+  .name {
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 20px;
+    line-height: 28px;
+    font-weight: 500;
+    margin-bottom: 4px;
+  }
+}
+.resource-center-detail {
+  p {
+    margin-bottom: 8px;
+    padding-left: 12px;
+    padding-right: 12px;
+    position: relative;
+
+    font-awesome-icon, .svg-inline--fa {
+      width: 30px;
+    }
+  }
+  .title {
+    background-position: 0 0;
+  }
+  .group {
+    background-position: 0 -22px;
+  }
+  .address {
+    background-position: 0 -44px;
+  }
+}
+.resource-detail-item {
+  margin-bottom: 8px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.account-center-tags {
+  .ant-tag {
+    margin-bottom: 8px;
+  }
+}
+.account-center-team {
+  .members {
+    a {
+      display: block;
+      margin: 12px 0;
+      line-height: 24px;
+      height: 24px;
+      .member {
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.65);
+        line-height: 24px;
+        max-width: 100px;
+        vertical-align: top;
+        margin-left: 12px;
+        transition: all 0.3s;
+        display: inline-block;
+      }
+      &:hover {
+        span {
+          color: #1890ff;
+        }
+      }
+    }
+  }
+}
+.tagsTitle,
+.teamTitle {
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+  margin-bottom: 12px;
+}
+</style>
diff --git a/ui/src/views/compute/InstanceView.vue b/ui/src/views/compute/InstanceView.vue
index 5822846583f..ef7819714fb 100644
--- a/ui/src/views/compute/InstanceView.vue
+++ b/ui/src/views/compute/InstanceView.vue
@@ -1,158 +1,68 @@
 <template>
   <div style="padding-top: 12px" class="page-header-index-wide page-header-wrapper-grid-content-main">
     <a-row :gutter="12">
-      <a-col :md="24" :lg="7" style="margin-bottom: 12px">
-        <a-card :bordered="true">
-          <div class="resource-details">
-            <div class="avatar">
-              <font-awesome-icon :icon="['fab', osLogo]" size="4x" style="color: #666;" />
-            </div>
-            <div class="username">{{ vm.name }}
+      <a-col :md="24" :lg="8" style="margin-bottom: 12px">
+        <info-card :resource="resource" resourceType="UserVm" showNotes>
+          <div slot="avatar">
+            <font-awesome-icon :icon="['fab', osLogo]" size="4x" style="color: #666;" />
+          </div>
+          <div slot="name">
+            <h4>{{ vm.name }}
               <a :href="'/client/console?cmd=access&vm=' + vm.id" target="_blank">
                 <a-button shape="circle" >
                   <a-icon type="right-square" />
                 </a-button>
               </a>
-
-            </div>
-            <div class="bio">
+            </h4>
+            <div>
               <a-tag>{{ vm.instancename }}</a-tag>
               <a-tag :color="vm.haenable ? 'green': 'red'">HA</a-tag>
               <a-tag :color="vm.isdynamicallyscalable ? 'green': 'red'">Dynamic Scalable</a-tag>
             </div>
           </div>
-          <div class="resource-center-detail">
-            <div class="resource-center-detail__item">
-              <status :text="vm.state ? vm.state : ''" style="padding-left: 8px; padding-right: 5px"/>{{ vm.state }}
+          <div slot="details">
+            <div class="vm-detail">
+              <font-awesome-icon :icon="['fab', osLogo]" size="lg"/>
+              <span style="margin-left: 8px">{{ guestOsName }}</span>
             </div>
-            <div class="resource-center-detail__item">
-              <font-awesome-icon :icon="['fab', osLogo]" size="lg"/> {{ guestOsName }} <br/>
-            </div>
-            <div class="resource-center-detail__item">
+            <div class="vm-detail">
               <font-awesome-icon :icon="['fas', 'microchip']" />
-              {{ vm.cpunumber }} CPU x {{ vm.cpuspeed }} Mhz
-              (<router-link :to="{ path: '/computeoffering/' + vm.serviceofferingid }">{{ vm.serviceofferingname }}</router-link>)
-              <a-progress style="padding-left: 32px" size="small" :percent="parseFloat(vm.cpuused)" />
+              <span class="vm-detail">{{ vm.cpunumber }} CPU x {{ vm.cpuspeed }} Mhz
+              </span>
+              <a-progress style="padding-left: 25px" size="small" :percent="parseFloat(vm.cpuused)" />
             </div>
-            <div class="resource-center-detail__item">
-              <font-awesome-icon :icon="['fas', 'memory']" />
-              {{ vm.memory }} MB Memory
-              <a-progress style="padding-left: 32px" size="small" :percent="parseFloat(100.0 * (vm.memorykbs - vm.memoryintfreekbs) / vm.memorykbs).toFixed(2)" />
+            <div class="vm-detail">
+              <font-awesome-icon :icon="['fas', 'memory']" style="margin-left: -2px"/>
+              <span class="vm-detail">{{ vm.memory }} MB Memory
+              </span>
+              <a-progress style="padding-left: 25px" size="small" :percent="parseFloat(100.0 * (vm.memorykbs - vm.memoryintfreekbs) / vm.memorykbs).toFixed(2)" />
             </div>
-            <div class="resource-center-detail__item">
+            <div class="vm-detail">
               <font-awesome-icon :icon="['fas', 'database']" />
-              {{ (totalStorage / (1024 * 1024 * 1024.0)).toFixed(2) }} GB Storage
-              (<router-link :to="{ path: '/template/' + vm.templateid }">{{ vm.templatename }}</router-link>)<br/>
-              <div style="margin: 5px 0 0 35px;">
+              <span class="vm-detail" style="margin-left: 12px">{{ (totalStorage / (1024 * 1024 * 1024.0)).toFixed(2) }} GB Storage
+              </span>
+              <div style="margin-left: 25px">
                 <a-tag><a-icon type="download" /> Read {{ vm.diskkbsread }} KB</a-tag>
                 <a-tag><a-icon type="upload" /> Write {{ vm.diskkbswrite }} KB</a-tag><br/>
                 <a-tag><a-icon type="download" /> Read (IO) {{ vm.diskioread }}</a-tag>
                 <a-tag><a-icon type="upload" /> Write (IO) {{ vm.diskiowrite }}</a-tag>
               </div>
             </div>
-            <div class="resource-center-detail__item">
+            <div class="vm-detail">
               <font-awesome-icon :icon="['fas', 'ethernet']" />
-              <span style="margin-left: 5px">
+              <span class="vm-detail">{{ vm.nic.length }} NIC(s)
                 <a-tag><a-icon type="arrow-down" /> RX {{ vm.networkkbsread }} KB</a-tag>
                 <a-tag><a-icon type="arrow-up" /> TX {{ vm.networkkbswrite }} KB</a-tag>
               </span>
-              <br/>
-              <div style="margin: 5px 0 0 35px;">
-                <div v-for="(eth, index) in vm.nic" :key="eth.id">
-                  <a-icon type="api"/> eth{{ index }} {{ eth.ipaddress }} (<router-link :to="{ path: '/guestnetwork/' + eth.networkid }">{{ eth.networkname }}</router-link>)
-                </div>
+              <div style="margin-left: 25px" v-for="(eth, index) in vm.nic" :key="eth.id">
+                <a-icon type="api"/> eth{{ index }} {{ eth.ipaddress }}
+                (<router-link :to="{ path: '/guestnetwork/' + eth.networkid }">{{ eth.networkname }}</router-link>)
               </div>
             </div>
-            <div v-if="vm.group" class="resource-center-detail__item">
-              <a-icon type="team" style="margin-left: 6px; margin-right: 10px" />
-              {{ vm.group }}
-            </div>
-
-            <div v-if="vm.hostid" class="resource-center-detail__item">
-              <a-icon type="desktop" style="margin-left: 6px; margin-right: 12px" />
-              <router-link :to="{ path: '/host/' + vm.hostid }">{{ vm.hostname }}</router-link> ({{ vm.hypervisor }})
-            </div>
-            <div class="resource-center-detail__item">
-              <a-icon type="global" style="margin-left: 6px; margin-right: 12px" />
-              <router-link :to="{ path: '/zone/' + vm.zoneid }">{{ vm.zonename }}</router-link>
-            </div>
-            <div class="resource-center-detail__item">
-              <a-icon type="user" style="margin-left: 6px; margin-right: 12px" />
-              <router-link :to="{ path: '/account?name=' + vm.account }">{{ vm.account }}</router-link>
-            </div>
-            <div class="resource-center-detail__item">
-              <a-icon type="block" style="margin-left: 6px; margin-right: 12px" />
-              <router-link :to="{ path: '/domain/' + vm.domainid }">{{ vm.domain }}</router-link>
-            </div>
-            <div class="resource-center-detail__item">
-              <a-icon type="calendar" style="margin-left: 6px; margin-right: 8px" /> {{ vm.created }}
-            </div>
-            <div class="resource-center-detail__item">
-              <a-icon type="barcode" style="margin-left: 6px; margin-right: 8px" /> {{ vm.id }}
-            </div>
           </div>
-          <a-divider/>
-
-          <div class="account-center-tags">
-            <div class="tagsTitle">Tags</div>
-            <div>
-              <a-tag closable>key=value</a-tag>
-
-              <template v-for="(tag, index) in tags">
-                <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
-                  <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
-                    {{ `${tag.slice(0, 20)}...` }}
-                  </a-tag>
-                </a-tooltip>
-                <a-tag v-else :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
-                  {{ tag }}
-                </a-tag>
-              </template>
-
-              <a-input
-                v-if="inputVisible"
-                ref="input"
-                type="text"
-                size="small"
-                :style="{ width: '78px' }"
-                :value="inputValue"
-                @change="handleInputChange"
-                @blur="handleInputConfirm"
-                @keyup.enter="handleInputConfirm"
-              />
-              <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
-                <a-icon type="plus" /> New Tag
-              </a-tag>
-            </div>
-          </div>
-          <a-divider :dashed="true"/>
-
-          <div class="account-center-team">
-            <div class="teamTitle">Notes</div>
-            <a-comment>
-              <a-avatar
-                slot="avatar"
-                icon="edit"
-              />
-              <div slot="content">
-                <a-form-item>
-                  <a-textarea :rows="4" ></a-textarea>
-                </a-form-item>
-                <a-form-item>
-                  <a-button
-                    htmlType="submit"
-                    type="primary"
-                  >
-                    Add Note
-                  </a-button>
-                </a-form-item>
-              </div>
-            </a-comment>
-
-          </div>
-        </a-card>
+        </info-card>
       </a-col>
-      <a-col :md="24" :lg="17">
+      <a-col :md="24" :lg="16">
         <a-card
           style="width:100%"
           title="Hardware"
@@ -255,12 +165,14 @@
 <script>
 
 import { api } from '@/api'
+import InfoCard from '@/views/common/InfoCard'
 import ListView from '@/components/widgets/ListView'
 import Status from '@/components/widgets/Status'
 
 export default {
   name: 'InstanceView',
   components: {
+    InfoCard,
     ListView,
     Status
   },
@@ -277,14 +189,7 @@ export default {
       totalStorage: 0,
       guestOsName: '',
       osLogo: 'linux',
-      inputVisible: false,
-      inputValue: '',
       activeKey: ['1', '2', '3'],
-      tags: ['os=centos', 'tag=value', 'demo=true'],
-      tagInputVisible: false,
-      tagInputValue: '',
-      teams: [],
-      teamSpinning: true,
       settingsColumns: [
         {
           title: this.$t('name'),
@@ -311,30 +216,6 @@ export default {
     }
   },
   methods: {
-    showInput () {
-      this.inputVisible = true
-      this.$nextTick(function () {
-        this.$refs.input.focus()
-      })
-    },
-
-    handleInputChange (e) {
-      this.inputValue = e.target.value
-    },
-    handleInputConfirm () {
-      const inputValue = this.inputValue
-      let tags = this.tags
-      if (inputValue && tags.indexOf(inputValue) === -1) {
-        tags = [...tags, inputValue]
-      }
-      console.log(tags)
-      Object.assign(this, {
-        tags,
-        inputVisible: false,
-        inputValue: ''
-      })
-    },
-
     fetchData () {
       api('listVolumes', { 'listall': true, 'virtualmachineid': this.vm.id }).then(json => {
         this.volumes = json.listvolumesresponse.volume
@@ -381,86 +262,10 @@ export default {
   height: 100%;
   min-height: 100%;
   transition: 0.3s;
-  .resource-details {
-    text-align: center;
-    margin-bottom: 24px;
-    & > .avatar {
-      margin: 0 auto;
-      padding-top: 20px;
-      width: 104px;
-      //height: 104px;
-      margin-bottom: 20px;
-      border-radius: 50%;
-      overflow: hidden;
-      img {
-        height: 100%;
-        width: 100%;
-      }
-    }
-    .username {
-      color: rgba(0, 0, 0, 0.85);
-      font-size: 20px;
-      line-height: 28px;
-      font-weight: 500;
-      margin-bottom: 4px;
-    }
-  }
-  .resource-center-detail {
-    &__item {
-      margin-bottom: 8px;
-      padding-left: 12px;
-      padding-right: 12px;
-      position: relative;
-
-      font-awesome-icon, .svg-inline--fa {
-        width: 30px;
-      }
-    }
-    .title {
-      background-position: 0 0;
-    }
-    .group {
-      background-position: 0 -22px;
-    }
-    .address {
-      background-position: 0 -44px;
-    }
-  }
-  .account-center-tags {
-    .ant-tag {
-      margin-bottom: 8px;
-    }
-  }
-  .account-center-team {
-    .members {
-      a {
-        display: block;
-        margin: 12px 0;
-        line-height: 24px;
-        height: 24px;
-        .member {
-          font-size: 14px;
-          color: rgba(0, 0, 0, 0.65);
-          line-height: 24px;
-          max-width: 100px;
-          vertical-align: top;
-          margin-left: 12px;
-          transition: all 0.3s;
-          display: inline-block;
-        }
-        &:hover {
-          span {
-            color: #1890ff;
-          }
-        }
-      }
-    }
-  }
-  .tagsTitle,
-  .teamTitle {
-    font-weight: 500;
-    color: rgba(0, 0, 0, 0.85);
-    margin-bottom: 12px;
+  .vm-detail {
+    margin-bottom: 8px;
+    margin-left: 10px;
+    margin-right: 10px;
   }
 }
 </style>