compute: Changing VM Snapshots and Backups to their own tabs if allowed (#501)

Fixes #487

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

ui/src/components/view/ListResourceTable.vue

@@ -0,0 +1,118 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <a-table
+    size="small"
+    :columns="fetchColumns()"
+    :dataSource="items"
+    :rowKey="item => item.id"
+    :loading="loading"
+    :pagination="false" >
+
+    <template v-if="routerlink" :slot="routerlink.name" slot-scope="text, item">
+      <router-link :to="{ path: routerlink.prefix + item.id }" v-if="routerlink.prefix">{{ text }}</router-link>
+      <span v-else>{{ text }}</span>
+    </template>
+    <template slot="state" slot-scope="text">
+      <status :text="text ? text : ''" />{{ text }}
+    </template>
+
+  </a-table>
+</template>
+
+<script>
+import { api } from '@/api'
+import Status from '@/components/widgets/Status'
+
+export default {
+  name: 'ListResourceTable',
+  components: {
+    Status
+  },
+  props: {
+    apiName: {
+      type: String,
+      required: true
+    },
+    routerlink: {
+      type: Object,
+      default: () => {}
+    },
+    params: {
+      type: Object,
+      required: true
+    },
+    columns: {
+      type: Array,
+      required: true
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      items: []
+    }
+  },
+  mounted () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      this.loading = true
+      var params = this.params
+      params.listall = true
+      params.response = 'json'
+      params.details = 'min'
+      api(this.apiName, this.params).then(json => {
+        var responseName
+        var objectName
+        for (const key in json) {
+          if (key.includes('response')) {
+            responseName = key
+            break
+          }
+        }
+        for (const key in json[responseName]) {
+          if (key === 'count') {
+            continue
+          }
+          objectName = key
+          break
+        }
+        this.items = json[responseName][objectName]
+        if (!this.items || this.items.length === 0) {
+          this.items = []
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    fetchColumns () {
+      var columns = []
+      for (const col of this.columns) {
+        columns.push({
+          dataIndex: col,
+          title: this.$t('label.' + col),
+          scopedSlots: { customRender: col }
+        })
+      }
+      return columns
+    }
+  }
+}
+</script>

ui/src/config/section/compute.js

@@ -63,15 +63,6 @@ export default {
       },
       searchFilters: ['name', 'zoneid', 'domainid', 'account', 'tags'],
       details: ['displayname', 'name', 'id', 'state', 'ipaddress', 'templatename', 'ostypename', 'serviceofferingname', 'isdynamicallyscalable', 'haenable', 'hypervisor', 'boottype', 'bootmode', 'account', 'domain', 'zonename'],
-      related: [{
-        name: 'vmsnapshot',
-        title: 'label.vm.snapshots',
-        param: 'virtualmachineid'
-      }, {
-        name: 'backup',
-        title: 'label.backup',
-        param: 'virtualmachineid'
-      }],
       tabs: [{
         component: () => import('@/views/compute/InstanceTab.vue')
       }],

ui/src/views/compute/InstanceTab.vue

@@ -49,7 +49,7 @@
             </a-tag>
           </template>
           <template slot="state" slot-scope="text">
-            <status :text="text ? text : ''" displayText />
+            <status :text="text ? text : ''" />{{ text }}
           </template>
           <template slot="size" slot-scope="text, item">
             {{ parseFloat(item.size / (1024.0 * 1024.0 * 1024.0)).toFixed(2) }} GB
@@ -115,6 +115,20 @@
           </span>
         </NicsTable>
       </a-tab-pane>
+      <a-tab-pane :tab="$t('label.vm.snapshots')" key="vmsnapshots" v-if="'listVMSnapshot' in $store.getters.apis">
+        <ListResourceTable
+          apiName="listVMSnapshot"
+          :params="{virtualmachineid: this.resource.id}"
+          :columns="['name', 'state', 'type', 'created']"
+          :routerlink="{name: 'name', prefix: '/vmsnapshot/'}"/>
+      </a-tab-pane>
+      <a-tab-pane :tab="$t('label.backup')" key="backups" v-if="'listBackups' in $store.getters.apis">
+        <ListResourceTable
+          apiName="listBackups"
+          :params="{virtualmachineid: this.resource.id}"
+          :columns="['id', 'state', 'type', 'created']"
+          :routerlink="{name: 'id', prefix: '/backup/'}"/>
+      </a-tab-pane>
       <a-tab-pane :tab="$t('label.settings')" key="settings">
         <DetailSettings :resource="resource" :loading="loading" />
       </a-tab-pane>
@@ -203,6 +217,7 @@ import Status from '@/components/widgets/Status'
 import DetailsTab from '@/components/view/DetailsTab'
 import DetailSettings from '@/components/view/DetailSettings'
 import NicsTable from '@/views/network/NicsTable'
+import ListResourceTable from '@/components/view/ListResourceTable'
 
 export default {
   name: 'InstanceTab',
@@ -211,7 +226,8 @@ export default {
     DetailsTab,
     DetailSettings,
     NicsTable,
-    Status
+    Status,
+    ListResourceTable
   },
   mixins: [mixinDevice],
   props: {