UI: Show IPv6 address of Instance (#4948)

* vm: show IPv6 address

* show ipv6 address on listview

ui/src/components/view/DetailsTab.vue

@@ -50,6 +50,13 @@
         </div>
       </div>
     </a-list-item>
+    <a-list-item slot="renderItem" slot-scope="item" v-else-if="item === 'ip6address' && ipV6Address.length > 0">
+      <div>
+        <strong>{{ $t('label.' + String(item).toLowerCase()) }}</strong>
+        <br/>
+        <div>{{ ipV6Address }}</div>
+      </div>
+    </a-list-item>
     <HostInfo :resource="resource" v-if="$route.meta.name === 'host' && 'listHosts' in $store.getters.apis" />
     <DedicateData :resource="resource" v-if="dedicatedSectionActive" />
     <VmwareData :resource="resource" v-if="$route.meta.name === 'zone' && 'listVmwareDcs' in $store.getters.apis" />
@@ -88,6 +95,15 @@ export default {
   mounted () {
     this.dedicatedSectionActive = this.dedicatedRoutes.includes(this.$route.meta.name)
   },
+  computed: {
+    ipV6Address () {
+      if (this.resource.nic && this.resource.nic.length > 0) {
+        return this.resource.nic.filter(e => { return e.ip6address }).map(e => { return e.ip6address }).join(', ')
+      }
+
+      return null
+    }
+  },
   created () {
     this.dedicatedSectionActive = this.dedicatedRoutes.includes(this.$route.meta.name)
   },

ui/src/components/view/InfoCard.vue

@@ -313,6 +313,16 @@
             <span v-else>{{ ipaddress }}</span>
           </div>
         </div>
+        <div class="resource-detail-item" v-if="ipV6Address && ipV6Address !== null">
+          <div class="resource-detail-item__label">{{ $t('label.ip6address') }}</div>
+          <div class="resource-detail-item__details">
+            <a-icon
+              type="environment"
+              @click="$message.success(`${$t('label.copied.clipboard')} : ${ ipV6Address }`)"
+              v-clipboard:copy="ipV6Address" />
+            {{ ipV6Address }}
+          </div>
+        </div>
         <div class="resource-detail-item" v-if="resource.projectid || resource.projectname">
           <div class="resource-detail-item__label">{{ $t('label.project') }}</div>
           <div class="resource-detail-item__details">
@@ -778,6 +788,13 @@ export default {
     name () {
       return this.resource.displayname || this.resource.displaytext || this.resource.name || this.resource.username ||
         this.resource.ipaddress || this.resource.virtualmachinename || this.resource.templatetype
+    },
+    ipV6Address () {
+      if (this.resource.nic && this.resource.nic.length > 0) {
+        return this.resource.nic.filter(e => { return e.ip6address }).map(e => { return e.ip6address }).join(', ')
+      }
+
+      return null
     }
   },
   methods: {

ui/src/components/view/ListView.vue

@@ -114,6 +114,9 @@
         <a-tag>source-nat</a-tag>
       </span>
     </span>
+    <span slot="ip6address" slot-scope="text, record" href="javascript:;">
+      <span>{{ ipV6Address(text, record) }}</span>
+    </span>
     <a slot="publicip" slot-scope="text, record" href="javascript:;">
       <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
     </a>
@@ -564,6 +567,13 @@ export default {
     },
     editTariffValue (record) {
       this.parentEditTariffAction(true, record)
+    },
+    ipV6Address (text, record) {
+      if (!record || !record.nic || record.nic.length === 0) {
+        return ''
+      }
+
+      return record.nic.filter(e => { return e.ip6address }).map(e => { return e.ip6address }).join(', ') || text
     }
   }
 }

ui/src/config/section/compute.js

@@ -68,7 +68,7 @@ export default {
         return fields
       },
       searchFilters: ['name', 'zoneid', 'domainid', 'account', 'tags'],
-      details: ['displayname', 'name', 'id', 'state', 'ipaddress', 'templatename', 'ostypename', 'serviceofferingname', 'isdynamicallyscalable', 'haenable', 'hypervisor', 'boottype', 'bootmode', 'account', 'domain', 'zonename'],
+      details: ['displayname', 'name', 'id', 'state', 'ipaddress', 'ip6address', 'templatename', 'ostypename', 'serviceofferingname', 'isdynamicallyscalable', 'haenable', 'hypervisor', 'boottype', 'bootmode', 'account', 'domain', 'zonename'],
       tabs: [{
         component: () => import('@/views/compute/InstanceTab.vue')
       }],