feat: add VPC network topology in detail page (#721)

* feat: add topology

Signed-off-by: Yi-Ya Chen <yiya.chen@suse.com>

* feat: add provider info

Signed-off-by: Yi-Ya Chen <yiya.chen@suse.com>

* refactor: remove comments

Signed-off-by: Yi-Ya Chen <yiya.chen@suse.com>

* fix: exclude default network

Signed-off-by: Yi-Ya Chen <yiya.chen@suse.com>

* feat: add VPC peering

Signed-off-by: Yi-Ya Chen <yiya.chen@suse.com>

* refactor: remove regex

Signed-off-by: Yi-Ya Chen <yiya.chen@suse.com>

* refactor: adjust row height

Signed-off-by: Yi-Ya Chen <yiya.chen@suse.com>

* feat: introduce auto layout

Signed-off-by: Yi-Ya Chen <yiya.chen@suse.com>

---------

Signed-off-by: Yi-Ya Chen <yiya.chen@suse.com>

pkg/harvester/index.ts

@@ -7,6 +7,7 @@ import harvesterStore from './store/harvester-store';
 import customValidators from './validators';
 import { PRODUCT_NAME } from './config/harvester';
 import { defineAsyncComponent } from 'vue';
+import './styles/vue-flow.scss';
 
 // Init the package
 export default function (plugin: IPlugin) {

pkg/harvester/l10n/en-us.yaml

@@ -195,7 +195,6 @@ harvester:
       title: Restart Virtual Machine
       tip: Restart the virtual machine for configuration changes to take effect.
       cancel: Save
-
   notification:
     title:
       succeed: Succeed
@@ -1147,6 +1146,25 @@ harvester:
       banner: The supported field in ACL match can refer to <a href="https://kubeovn.github.io/docs/v1.14.x/en/guide/subnet/#subnet-acl" target="_blank">KubeOvn Subnet ACL document</a>
 
   vpc:
+    viewTopology: Topology
+    topology:
+      loading: Loading topology...
+      empty: No resources found
+      visibility:
+        vpc: VPC
+        subnets: Subnets
+        overlayNetworks: Overlay Networks
+        vms: VMs
+      labels:
+        cidr: CIDR
+        provider: Provider
+        type: Type
+        clusterNetwork: Cluster Network
+        network: Network
+        subnet: Subnet
+        ip: IP
+        mac: MAC
+        peering: Peering
     noAddonEnabled:
       prefix: The kubeovn-operator add-on is not enabled, click
       middle: here

pkg/harvester/list/kubeovn.io.vpc.vue

@@ -155,6 +155,15 @@ export default {
       return location;
     },
 
+    viewTopology(group) {
+      const vpc = group.key;
+      const resource = this.$store.getters[`harvester/byId`](HCI.VPC, vpc);
+
+      if (resource && resource.goToDetail) {
+        resource.goToDetail();
+      }
+    },
+
     showVpcAction(event, group) {
       const vpc = group.key;
 
@@ -218,6 +227,14 @@ export default {
             >
               {{ t('harvester.vpc.createSubnet') }}
             </router-link>
+            <button
+              type="button"
+              class="btn btn-sm role-secondary mr-5"
+              @click="viewTopology(group)"
+            >
+              <i class="icon icon-globe mr-5" />
+              {{ t('harvester.vpc.viewTopology') }}
+            </button>
             <button
               type="button"
               class="btn btn-sm role-multi-action actions mr-10"

pkg/harvester/styles/vue-flow.scss

@@ -0,0 +1,4 @@
+@import '@vue-flow/core/dist/style.css';
+@import '@vue-flow/core/dist/theme-default.css';
+@import '@vue-flow/controls/dist/style.css';
+@import '@vue-flow/minimap/dist/style.css';

pkg/harvester/types.ts

@@ -18,6 +18,7 @@ export const HCI = {
   CLUSTER_NETWORK:     'network.harvesterhci.io.clusternetwork',
   SUBNET:              'kubeovn.io.subnet',
   VPC:                 'kubeovn.io.vpc',
+  IP:                  'kubeovn.io.ip',
   VM_IMAGE_DOWNLOADER: 'harvesterhci.io.virtualmachineimagedownloader',
   SUPPORT_BUNDLE:      'harvesterhci.io.supportbundle',
   NETWORK_ATTACHMENT:  'harvesterhci.io.networkattachmentdefinition',