apache · utchoang · Apr 2, 2021 · Jul 1, 2021 · Jul 1, 2021 · Aug 23, 2021
diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
diff --git a/ui/src/assets/icons/tungsten.svg b/ui/src/assets/icons/tungsten.svg
diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
@@ -99,6 +99,10 @@
           <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>
           <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>
@@ -464,7 +468,8 @@ export default {
         '/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 () {

diff --git a/ui/src/config/section/network.js b/ui/src/config/section/network.js
@@ -16,6 +16,7 @@
 // under the License.
 
 import store from '@/store'
+import tungsten from '@/assets/icons/tungsten.svg?inline'
 
 export default {
   name: 'network',
@@ -57,6 +58,9 @@ export default {
         name: 'guest.ip.range',
         component: () => import('@/views/network/GuestIpRanges.vue'),
         show: (record) => { return 'listVlanIpRanges' in store.getters.apis && (record.type === 'Shared' || (record.service && record.service.filter(x => x.name === 'SourceNat').count === 0)) }
+      }, {
+        name: 'tungsten.router.table',
+        component: () => import('@/views/network/tungsten/TungstenNetworkRouterTable.vue')
       },
       {
         name: 'comments',
@@ -672,6 +676,147 @@ export default {
           groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
         }
       ]
+    },
+    {
+      name: 'tungstenfabric',
+      title: 'label.tungsten.fabric',
+      icon: tungsten,
+      permission: ['listTungstenFabricProviders'],
+      columns: [
+        {
+          field: 'name',
+          customTitle: 'tungsten.fabric.provider'
+        },
+        'zonename'
+      ],
+      tabs: [
+        {
+          name: 'tungsten.fabric',
+          component: () => import('@/views/network/tungsten/TungstenFabric.vue')
+        },
+        {
+          name: 'tungsten.fabric.routing',
+          component: () => import('@/views/network/tungsten/TungstenFabricRouting.vue')
+        }
+      ]
+    },
+    {
+      name: 'tungstennetworkroutertable',
+      title: 'label.tungsten.network.router.table',
+      icon: tungsten,
+      hidden: true,
+      permission: ['listTungstenFabricNetworkRouteTable'],
+      details: ['uuid', 'name'],
+      tabs: [
+        {
+          name: 'details',
+          component: () => import('@/components/view/DetailsTab.vue')
+        },
+        {
+          name: 'tungsten.static.routes',
+          component: () => import('@/views/network/tungsten/TungstenNetworkStaticRoute.vue')
+        }
+      ],
+      actions: [
+        {
+          api: 'addTungstenFabricNetworkStaticRoute',
+          icon: 'plus',
+          label: 'label.add.tungsten.network.static.route',
+          dataView: true,
+          popup: true,
+          component: () => import('@/views/network/tungsten/AddTungstenNetworkStaticRoute.vue')
+        },
+        {
+          api: 'removeTungstenFabricNetworkRouteTable',
+          icon: 'delete',
+          label: 'label.remove.network.route.table',
+          message: 'label.confirm.remove.network.route.table',
+          dataView: true
+        }
+      ]
+    },
+    {
+      name: 'tungsteninterfaceroutertable',
+      title: 'label.tungsten.interface.router.table',
+      icon: tungsten,
+      hidden: true,
+      permission: ['listTungstenFabricInterfaceRouteTable'],
+      details: ['uuid', 'name'],
+      tabs: [
+        {
+          name: 'details',
+          component: () => import('@/components/view/DetailsTab.vue')
+        },
+        {
+          name: 'tungsten.static.routes',
+          component: () => import('@/views/network/tungsten/TungstenInterfaceStaticRoute.vue')
+        }
+      ],
+      actions: [
+        {
+          api: 'addTungstenFabricInterfaceStaticRoute',
+          icon: 'plus',
+          label: 'label.add.tungsten.interface.static.route',
+          dataView: true,
+          popup: true,
+          component: () => import('@/views/network/tungsten/AddTungstenInterfaceStaticRoute.vue')
+        },
+        {
+          api: 'removeTungstenFabricInterfaceRouteTable',
+          icon: 'delete',
+          label: 'label.remove.interface.route.table',
+          message: 'label.confirm.remove.interface.route.table',
+          dataView: true
+        }
+      ]
+    },
+    {
+      name: 'tungstenpolicy',
+      title: 'label.network.policy',
+      icon: tungsten,
+      hidden: true,
+      permission: ['listTungstenFabricPolicy'],
+      details: ['name'],
+      tabs: [
+        {
+          name: 'details',
+          component: () => import('@/components/view/DetailsTab.vue')
+        },
+        {
+          name: 'rule',
+          component: () => import('@/views/network/tungsten/TungstenFabricPolicyRule.vue')
+        },
+        {
+          name: 'tag',
+          component: () => import('@/views/network/tungsten/TungstenFabricPolicyTag.vue')
+        }
+      ],
+      actions: [
+        {
+          api: 'applyTungstenFabricPolicy',
+          icon: 'form',
+          label: 'label.apply.tungsten.network.policy',
+          dataView: true,
+          args: ['networkuuid', 'majorsequence', 'minorsequence']
+        },
+        {
+          api: 'removeTungstenFabricPolicy',
+          icon: 'close',
+          label: 'label.remove.tungsten.network.policy',
+          dataView: true,
+          args: ['networkuuid']
+        },
+        {
+          api: 'deleteTungstenFabricPolicy',
+          icon: 'delete',
+          label: 'label.delete.tungsten.policy',
+          message: 'label.confirm.delete.tungsten.policy',
+          dataView: true,
+          mapping: {
+            policyuuid: (record) => record.uuid
+          }
+        }
+      ]
     }
   ]
 }
diff --git a/ui/src/style/vars.less b/ui/src/style/vars.less
@@ -120,6 +120,22 @@ a {
   color: @primary-color;
 }
 
+.custom-icon path {
+  fill: @navigation-text-color;
+}
+
+.ant-menu-light {
+  .ant-menu-item:hover > a,
+  .ant-menu-submenu-title:hover > a,
+  .ant-menu-submenu-title:hover,
+  .ant-menu-item:hover,
+  .ant-menu-submenu-title:hover {
+    .custom-icon path {
+      fill: @primary-color;
+    }
+  }
+}
+
 .ant-menu-vertical .ant-menu-item,
 .ant-menu-vertical-left .ant-menu-item,
 .ant-menu-vertical-right .ant-menu-item,
@@ -206,6 +222,7 @@ a {
 
     .custom-icon path {
       color: @primary-color;
+      fill: @primary-color;
     }
   }
 
@@ -238,6 +255,7 @@ a {
 
   .custom-icon path {
     color: @primary-color;
+    fill: @primary-color;
   }
 }
 

diff --git a/ui/src/views/infra/zone/ZoneWizard.vue b/ui/src/views/infra/zone/ZoneWizard.vue
@@ -119,7 +119,7 @@ export default {
         },
         {
           title: 'label.network',
-          step: ['physicalNetwork', 'netscaler', 'pod', 'guestTraffic', 'storageTraffic', 'publicTraffic'],
+          step: ['physicalNetwork', 'tungsten', 'netscaler', 'pod', 'guestTraffic', 'storageTraffic', 'publicTraffic'],
           description: this.$t('message.network.description'),
           hint: this.$t('message.network.hint')
         },