[WIP] UI: Integrate Tungsten Fabric

ui/src/components/view/ListView.vue

@@ -32,7 +32,7 @@
         <a-menu>
           <a-menu-item v-for="(column, idx) in columnKeys" :key="idx" @click="updateSelectedColumns(column)">
             <a-checkbox :id="idx.toString()" :checked="selectedColumns.includes(getColumnKey(column))"/>
-            {{ $t('label.' + String(getColumnKey(column)).toLowerCase()) }}
+            {{ $t('label.' + String(getColumTitle(column)).toLowerCase()) }}
           </a-menu-item>
         </a-menu>
       </div>
@@ -109,6 +109,15 @@
           <router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ $t(text.toLowerCase()) }}</router-link>
           <router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ $t(text.toLowerCase()) }}</router-link>
         </span>
+        <span v-else-if="$route.path.startsWith('/tungstenfabric')">
+          <router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ $t(text.toLowerCase()) }}</router-link>
+          <router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ $t(text.toLowerCase()) }}</router-link>
+        </span>
+        <span v-else-if="isTungstenPath()">
+          <router-link :to="{ path: $route.path + '/' + record.uuid, query: { zoneid: record.zoneid } }" v-if="record.uuid && record.zoneid">{{ $t(text.toLowerCase()) }}</router-link>
+          <router-link :to="{ path: $route.path + '/' + record.uuid, query: { zoneid: $route.query.zoneid } }" v-else-if="record.uuid && $route.query.zoneid">{{ $t(text.toLowerCase()) }}</router-link>
+          <router-link :to="{ path: $route.path }" v-else>{{ $t(text.toLowerCase()) }}</router-link>
+        </span>
         <span v-else>
           <router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ text }}</router-link>
           <router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ text }}</router-link>
@@ -510,14 +519,19 @@ export default {
     }
   },
   methods: {
+    isTungstenPath () {
+      return ['/tungstennetworkroutertable', '/tungstenpolicy', '/tungsteninterfaceroutertable',
+        '/tungstenpolicyset', '/tungstenroutingpolicy', '/firewallrule', '/tungstenfirewallpolicy'].includes(this.$route.path)
+    },
     quickViewEnabled () {
       return new RegExp(['/vm', '/kubernetes', '/ssh', '/userdata', '/vmgroup', '/affinitygroup',
         '/volume', '/snapshot', '/vmsnapshot', '/backup',
         '/guestnetwork', '/vpc', '/vpncustomergateway',
         '/template', '/iso',
         '/project', '/account',
         '/zone', '/pod', '/cluster', '/host', '/storagepool', '/imagestore', '/systemvm', '/router', '/ilbvm', '/annotation',
-        '/computeoffering', '/systemoffering', '/diskoffering', '/backupoffering', '/networkoffering', '/vpcoffering'].join('|'))
+        '/computeoffering', '/systemoffering', '/diskoffering', '/backupoffering', '/networkoffering', '/vpcoffering',
+        '/tungstenfabric'].join('|'))
         .test(this.$route.path)
     },
     enableGroupAction () {
@@ -782,6 +796,12 @@ export default {
       return host.state
     },
     getColumnKey (name) {
+      if (typeof name === 'object') {
+        name = Object.keys(name).includes('field') ? name.field : name.customTitle
+      }
+      return name
+    },
+    getColumTitle (name) {
       if (typeof name === 'object') {
         name = Object.keys(name).includes('customTitle') ? name.customTitle : name.field
       }

ui/src/components/view/NicNetworkSelectForm.vue

@@ -24,7 +24,7 @@
         v-model:value="searchQuery"
         style="margin-bottom: 10px;"
         @search="fetchNetworks"
-        autoFocus />
+        v-focus="true" />
       <a-table
         size="small"
         style="overflow-y: auto"

ui/src/components/view/ResourceView.vue

@@ -36,8 +36,8 @@
             :tab="tabs[0].name" />
         </keep-alive>
         <a-tabs
-          v-else
           style="width: 100%"
+          :class="[{ 'custom-tab': tabs.length > 9 }]"
           :animated="false"
           :activeKey="activeTab || tabs[0].name"
           @change="onTabChange" >
@@ -187,5 +187,10 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
+.custom-tab {
+  .ant-tabs-bar {
+    display: grid;
+  }
+}
 </style>

ui/src/components/view/StoragePoolSelectView.vue

@@ -23,7 +23,7 @@
       v-model:value="searchQuery"
       style="margin-bottom: 10px;"
       @search="fetchStoragePools"
-      autoFocus />
+      v-focus="true" />
     <a-table
       size="small"
       style="overflow-y: auto"

ui/src/components/widgets/Breadcrumb.vue

@@ -19,12 +19,18 @@
   <a-breadcrumb class="breadcrumb">
     <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
       <router-link
-        v-if="item && item.name"
+        v-if="item && item.name && !tungstenPaths.includes(item.path)"
         :to="{ path: item.path === '' ? '/' : item.path }"
       >
         <render-icon v-if="index == 0" :icon="item.meta.icon" style="font-size: 16px" @click="resetToMainView" />
         <span v-if="item.meta.title">{{ $t(item.meta.title) }}</span>
       </router-link>
+      <router-link
+        v-else-if="tungstenPaths.includes(item.path)"
+        :to="{ path: item.path === '' ? '/' : item.path, query: { zoneid: $route.query.zoneid } }">
+        <render-icon v-if="index == 0" :icon="item.meta.icon" style="font-size: 16px" @click="resetToMainView" />
+        {{ $t(item.meta.title) }}
+      </router-link>
       <span v-else-if="$route.params.id">
         <label
           v-if="'name' in resource &&
@@ -75,7 +81,9 @@ export default {
   data () {
     return {
       name: '',
-      breadList: []
+      breadList: [],
+      tungstenPaths: ['/tungstennetworkroutertable', '/tungstenpolicy', '/tungsteninterfaceroutertable',
+        '/tungstenpolicyset', '/tungstenroutingpolicy', '/firewallrule', '/tungstenfirewallpolicy']
     }
   },
   created () {