Making harvester-manager load as an external extension

2025-12-13 13:11:43 +00:00 · 2024-09-12 10:25:06 -07:00 · 2024-09-12 10:25:06 -07:00 · 40432c8261
commit 40432c8261
parent aba9c167e0
18 changed files with 1163 additions and 5126 deletions
--- a/package.json
+++ b/package.json
@ -6,24 +6,14 @@
    "node": ">=20.0.0"
  },
  "dependencies": {
-    "@rancher/components": "0.3.0-alpha.1",
-    "@rancher/shell": "2.0.0",
-    "@vue/cli-plugin-babel": "5.0.8",
-    "@vue/cli-plugin-typescript": "5.0.8",
-    "@vue/cli-service": "5.0.8",
+    "@rancher/shell": "^3.0.0-rc.1",
    "cache-loader": "^4.1.0",
-    "codemirror": ">=5.64.0 <6",
-    "codemirror-editor-vue3": "^2.7.0",
-    "core-js": "3.25.3",
-    "css-loader": "4.3.0",
-    "diff_match_patch": "^0.1.1",
-    "node-polyfill-webpack-plugin": "^3.0.0",
-    "yaml": "2.0.0"
+    "color": "4.2.3",
+    "ip": "2.0.1",
+    "node-polyfill-webpack-plugin": "^3.0.0"
  },
  "resolutions": {
-    "@vue/cli-plugin-babel": "5.0.8",
-    "@vue/cli-service": "5.0.8",
-    "@vue/cli-plugin-typescript": "5.0.8",
+    "@types/node": "~20.10.0",
    "d3-color": "3.1.0",
    "ejs": "3.1.9",
    "follow-redirects": "1.15.2",
@ -45,17 +35,7 @@
    "clean": "./node_modules/@rancher/shell/scripts/clean",
    "build-pkg": "./node_modules/@rancher/shell/scripts/build-pkg.sh",
    "serve-pkgs": "./node_modules/@rancher/shell/scripts/serve-pkgs",
-    "vue-migrate": "scripts/vue-migrate.js",
    "publish-pkgs": "./node_modules/@rancher/shell/scripts/extension/publish",
-    "parse-tag-name": "./node_modules/@rancher/shell/scripts/extension/parse-tag-name",
-    "lint": "./node_modules/.bin/eslint --max-warnings 0 --ext .js,.ts,.vue .",
-    "test": "jest --watch",
-    "migrate": "node ./vue-migrate.js"
-  },
-  "devDependencies": {
-    "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.17.5",
-    "@vue/vue3-jest": "^27.0.0-alpha.1",
-    "babel-plugin-transform-require-context": "^0.1.1"
+    "parse-tag-name": "./node_modules/@rancher/shell/scripts/extension/parse-tag-name"
  }
-}
+}
--- a/pkg/harvester/components/DiskTags.vue
+++ b/pkg/harvester/components/DiskTags.vue
@ -122,7 +122,7 @@ export default {
    </div>
    <div class="mt-10">
      <Tag
-         v-for="((tag), i) in value" :key="i" class="tag"
+         v-for="(tag, i) in value" :key="i" class="tag"
      >
        <span>
          {{ tag }}
@ -155,7 +155,7 @@ export default {
      >
        <input
          ref="addTagInput"
-          v-model:value="inputValue"
+          v-model="inputValue"
          type="text"
          size="small"
          @blur="confirmAdd"
--- a/pkg/harvester/config/harvester-manager.js
+++ b/pkg/harvester/config/harvester-manager.js
@ -0,0 +1,114 @@
+import { HCI, MANAGEMENT, CAPI } from '@shell/config/types';
+import { HARVESTER, MULTI_CLUSTER } from '@shell/store/features';
+import { STATE, NAME as NAME_COL, AGE, VERSION } from '@shell/config/table-headers';
+import { allHash } from '@shell/utils/promise';
+import { BLANK_CLUSTER } from '@shell/store/store-types.js';
+
+export const PRODUCT_NAME = 'harvester-manager';
+
+export const NAME = 'harvesterManager';
+
+const MACHINE_POOLS = {
+  name:     'summary',
+  labelKey: 'tableHeaders.machines',
+  sort:     false,
+  search:   false,
+  value:    'nodes.length',
+  align:    'center',
+  width:    100,
+};
+
+const harvesterClustersLocation = {
+  name:   'c-cluster-product-resource',
+  params: {
+    cluster:  BLANK_CLUSTER,
+    product:  NAME,
+    resource: HCI.CLUSTER
+  }
+};
+
+export function init($plugin, store) {
+  const {
+    product,
+    basicType,
+    headers,
+    spoofedType,
+    configureType
+  } = $plugin.DSL(store, NAME);
+
+  product({
+    ifHaveType:          CAPI.RANCHER_CLUSTER,
+    ifFeature:           [MULTI_CLUSTER, HARVESTER],
+    inStore:             'management',
+    icon:                'harvester',
+    removable:           false,
+    showClusterSwitcher: false,
+    weight:              100,
+    to:                  harvesterClustersLocation,
+    category:            'hci',
+  });
+
+  configureType(HCI.CLUSTER, { showListMasthead: false });
+  headers(HCI.CLUSTER, [
+    STATE,
+    NAME_COL,
+    {
+      ...VERSION,
+      value:    'kubernetesVersion',
+      getValue: (row) => row.kubernetesVersion
+    },
+    MACHINE_POOLS,
+    AGE,
+    {
+      name:  'harvester',
+      label: ' ',
+      align: 'right',
+      width: 65,
+    },
+  ]);
+  basicType([HCI.CLUSTER]);
+  spoofedType({
+    labelKey:   'harvesterManager.cluster.label',
+    name:       HCI.CLUSTER,
+    type:       HCI.CLUSTER,
+    namespaced: false,
+    weight:     -1,
+    route:      {
+      name:   'c-cluster-product-resource',
+      params: {
+        product:  NAME,
+        resource: HCI.CLUSTER,
+      }
+    },
+    exact:   false,
+    schemas: [
+      {
+        id:                HCI.CLUSTER,
+        type:              'schema',
+        collectionMethods: [],
+        resourceFields:    {},
+        attributes:        { namespaced: true },
+      },
+    ],
+    group:        'Root',
+    getInstances: async() => {
+      const hash = {
+        rancherClusters: store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER }),
+        clusters:        store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER }),
+      };
+
+      if (store.getters['management/schemaFor'](MANAGEMENT.NODE)) {
+        hash.nodes = store.dispatch('management/findAll', { type: MANAGEMENT.NODE });
+      }
+
+      const res = await allHash(hash);
+
+      return res.rancherClusters.map((c) => {
+        return {
+          ...c,
+          type: HCI.CLUSTER,
+        };
+      });
+    },
+  });
+}
--- a/pkg/harvester/detail/harvesterhci.io.secret.vue
+++ b/pkg/harvester/detail/harvesterhci.io.secret.vue
@ -255,7 +255,7 @@ export default {

      <div v-else>
        <div
-          v-for="(row,idx) in parsedRows" :key="idx"class="entry"
+          v-for="(row,idx) in parsedRows" :key="idx" class="entry"
        >
          <DetailText
            :value="row.value"
--- a/pkg/harvester/dialog/RestartVMDialog.vue
+++ b/pkg/harvester/dialog/RestartVMDialog.vue
@ -75,7 +75,7 @@ export default {
        class="bottom"
      >
        <Banner
-          v-for="(err, i) in errors" :key="i"color="error"
+          v-for="(err, i) in errors" :key="i" color="error"
          :label="err"
        />
        <div class="buttons">
--- a/pkg/harvester/edit/loadbalancer.harvesterhci.io.loadbalancer/Listeners.vue
+++ b/pkg/harvester/edit/loadbalancer.harvesterhci.io.loadbalancer/Listeners.vue
@ -127,7 +127,7 @@ export default {
        />
      </div>
      <div
-        v-for="(row, idx) in rows" :key="idx"class="listener-row"
+        v-for="(row, idx) in rows" :key="idx" class="listener-row"
      >
        <div class="port-name">
          <span v-if="isView">
--- a/pkg/harvester/edit/network.harvesterhci.io.vlanconfig/index.vue
+++ b/pkg/harvester/edit/network.harvesterhci.io.vlanconfig/index.vue
@ -434,7 +434,7 @@ export default {
        <div class="row mt-20">
          <div class="col span-12">
            <Banner
-              v-for="(err, i) in nicErrors" :key="i"color="warning"
+              v-for="(err, i) in nicErrors" :key="i" color="warning"
              :label="err"
            />
            <ArrayListSelect
--- a/pkg/harvester/icon.svg
+++ b/pkg/harvester/icon.svg
@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<g id="icomoon-ignore">
+</g>
+<path d="M23,12.5c0,0,0-0.1,0-0.1c0,0,0,0,0,0c0-0.1,0-0.2,0-0.2c0,0,0,0,0,0c0,0,0-0.1,0-0.1c0,0,0,0,0,0c0,0,0,0,0-0.1l-2.6-4.5
+	c0,0,0,0,0-0.1c0,0,0,0,0,0c0,0,0-0.1-0.1-0.1c0,0,0,0,0,0c0,0-0.1,0-0.1-0.1l0,0l0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0
+	c0,0,0,0,0,0c0,0,0,0-0.1,0h-5.2c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0l0,0l0,0c0,0-0.1,0-0.1,0.1
+	c0,0,0,0,0,0c0,0-0.1,0.1-0.1,0.1c0,0,0,0,0,0c0,0,0,0,0,0.1l-2.4,4.2H9.7l1.8-3.2h0.9c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7
+	h-1.2c-0.2,0-0.5,0.1-0.6,0.3l-2.4,4.2H6.2l1.8-3.2h0.9c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7H7.7c-0.2,0-0.5,0.1-0.6,0.3
+	l-2.4,4.2H2.8l1.8-3.2h0.9c0.4,0,0.7-0.3,0.7-0.7S5.8,7.1,5.5,7.1H4.3C4,7.1,3.8,7.2,3.7,7.4l-2.6,4.5c0,0,0,0,0,0.1c0,0,0,0,0,0
+	c0,0,0,0.1,0,0.1c0,0,0,0,0,0c0,0,0,0.1,0,0.1l0,0l0,0c0,0,0,0.1,0,0.1c0,0,0,0,0,0c0,0,0,0.1,0,0.1c0,0,0,0,0,0c0,0,0,0,0,0.1
+	l2.6,4.5c0.1,0.2,0.3,0.3,0.6,0.3h1.2c0.4,0,0.7-0.3,0.7-0.7s-0.3-0.7-0.7-0.7H4.6l-1.8-3.2h1.9l2.4,4.2c0.1,0.2,0.3,0.3,0.6,0.3
+	h1.2c0.4,0,0.7-0.3,0.7-0.7s-0.3-0.7-0.7-0.7H8.1l-1.8-3.2h1.9l2.4,4.2c0.1,0.2,0.3,0.3,0.6,0.3h1.2c0.4,0,0.7-0.3,0.7-0.7
+	c0-0.4-0.3-0.7-0.7-0.7h-0.9l-1.8-3.2h1.9l2.4,4.2c0,0,0,0,0,0.1c0,0,0,0,0,0c0,0,0,0.1,0.1,0.1c0,0,0,0,0,0c0,0,0.1,0,0.1,0.1l0,0
+	c0,0,0,0,0,0c0,0,0,0,0.1,0c0,0,0,0,0.1,0c0,0,0,0,0,0c0.1,0,0.1,0,0.2,0l0,0l5.2,0c0.1,0,0.1,0,0.2,0c0,0,0,0,0,0c0,0,0,0,0.1,0
+	c0,0,0,0,0.1,0c0,0,0,0,0,0l0,0c0,0,0.1,0,0.1-0.1c0,0,0,0,0,0c0,0,0.1-0.1,0.1-0.1c0,0,0,0,0,0c0,0,0,0,0-0.1L23,12.5
+	C22.9,12.5,22.9,12.5,23,12.5C22.9,12.5,22.9,12.5,23,12.5L23,12.5z M19.7,15.4L19,14.1l0.7-1.2h1.5L19.7,15.4L19.7,15.4z
+	 M13.1,12.9h1.5l0.7,1.2l-0.8,1.3L13.1,12.9z M14.6,9l0.8,1.3l-0.7,1.2h-1.5L14.6,9L14.6,9z M16.5,13.4l-0.7-1.2l0.7-1.2h1.4
+	l0.7,1.2l-0.7,1.2H16.5z M17.9,9.7h-1.4l-0.8-1.3h2.9L17.9,9.7L17.9,9.7z M16.5,14.8h1.4l0.8,1.3h-2.9L16.5,14.8L16.5,14.8z
+	 M19.7,11.6L19,10.4L19.7,9l1.5,2.5L19.7,11.6L19.7,11.6z"/>
+</svg>
--- a/pkg/harvester/index.ts
+++ b/pkg/harvester/index.ts
@ -1,28 +1,18 @@
 import { importTypes } from '@rancher/auto-import';
 import { IPlugin } from '@shell/core/types';
-import extensionRouting from './routing/harvester-routing';
-import harvesterCommonStore from './store/harvester-common';
-import harvesterStore from './store/harvester-store';
-import customValidators from './validators';
+import extensionRoutes from './routing/harvester-routing';

 // Init the package
-export default function(plugin: IPlugin): void {
+export default function (plugin: IPlugin) {
  // Auto-import model, detail, edit from the folders
  importTypes(plugin);

  // Provide plugin metadata from package.json
  plugin.metadata = require('./package.json');

-  // Load a product
-  plugin.addProduct(require('./product'));
+  // Built-in icon
+  plugin.metadata.icon = require('./icon.svg');

-  // Add Vue Routes
-  plugin.addRoutes(extensionRouting);
-
-  plugin.addDashboardStore(harvesterCommonStore.config.namespace, harvesterCommonStore.specifics, harvesterCommonStore.config);
-  plugin.addDashboardStore(harvesterStore.config.namespace, harvesterStore.specifics, harvesterStore.config, harvesterStore.init);
-
-  plugin.validators = customValidators;
-
-  plugin.register('component', 'NavHeaderRight', () => import(/* webpackChunkName: "pkg/harvester/components" */ `./components/HarvesterUpgradeHeader.vue`));
+  plugin.addProduct(require('./config/harvester-manager'));
+  plugin.addRoutes(extensionRoutes);
 }
--- a/pkg/harvester/l10n/en-us.yaml
+++ b/pkg/harvester/l10n/en-us.yaml
@ -1514,3 +1514,30 @@ typeLabel:
      one { IP Pool }
      other { IP Pools }
    }
+
+harvesterManager:
+  manage: Manage
+  cluster:
+    label: Harvester Clusters
+    none: There are no Harvester Clusters
+    learnMore: Learn more about Harvester from the <a target="_blank" href="https://harvesterhci.io/" rel="noopener noreferrer nofollow">Harvester Web Site</a> or read the the <a target="_blank" href="https://docs.harvesterhci.io/" rel="noopener noreferrer nofollow">Harvester Docs</a>
+    description: Harvester is a modern Hyperconverged infrastructure (HCI) solution built for bare metal servers using enterprise-grade open source technologies including Kubernetes, Kubevirt and Longhorn.
+  plugins:
+    loadError: Error loading harvester plugin
+  rke:
+    templateError: Incorrect template format
+  affinity:
+    thisPodNamespace: This VM's namespace
+    matchExpressions:
+      inNamespaces: "Workloads in these namespaces"
+    vmAffinityTitle: VM Scheduling
+    namespaces:
+      placeholder: e.g. default,system,base
+      label: Namespaces
+    addLabel: Add Workload Selector
+    topologyKey:
+      placeholder: 'topology.kubernetes.io/zone'
+  vGpu:
+    title: VGPUs
+    label: VGPU type
+    placeholder: 'Please select a VGPU'
--- a/pkg/harvester/list/harvesterhci.io.management.cluster.vue
+++ b/pkg/harvester/list/harvesterhci.io.management.cluster.vue
@ -0,0 +1,243 @@
+<script>
+import BrandImage from '@shell/components/BrandImage';
+import TypeDescription from '@shell/components/TypeDescription';
+import ResourceTable from '@shell/components/ResourceTable';
+import Masthead from '@shell/components/ResourceList/Masthead';
+import Loading from '@shell/components/Loading';
+import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
+import { CAPI, HCI, MANAGEMENT } from '@shell/config/types';
+import { isHarvesterCluster } from '@shell/utils/cluster';
+import { allHash } from '@shell/utils/promise';
+
+export default {
+  components: {
+    BrandImage,
+    ResourceTable,
+    Masthead,
+    TypeDescription,
+    Loading
+  },
+
+  props: {
+    schema: {
+      type:     Object,
+      required: true,
+    },
+    useQueryParamsForSimpleFiltering: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  async fetch() {
+    console.log('dfetchttt');
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = await allHash({
+      hciClusters:  this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.CLUSTER }),
+      mgmtClusters: this.$store.dispatch(`${ inStore }/findAll`, { type: MANAGEMENT.CLUSTER })
+    });
+
+    this.hciClusters = hash.hciClusters;
+    this.mgmtClusters = hash.mgmtClusters;
+  },
+
+  data() {
+    console.log('ddataata');
+    const resource = CAPI.RANCHER_CLUSTER;
+
+    return {
+      navigating:   false,
+      VIRTUAL,
+      hciDashboard: HCI.DASHBOARD,
+      resource,
+      hResource:    HCI.CLUSTER,
+      realSchema:   this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER),
+      hciClusters:  [],
+      mgmtClusters: []
+    };
+  },
+
+  computed: {
+    importLocation() {
+      return {
+        name:   'c-cluster-product-resource-create',
+        params: {
+          product:  this.$store.getters['currentProduct'].name,
+          resource: this.schema.id,
+        },
+      };
+    },
+
+    canCreateCluster() {
+      const schema = this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
+
+      return !!schema?.collectionMethods.find((x) => x.toLowerCase() === 'post');
+    },
+
+    rows() {
+      return this.hciClusters.filter((c) => {
+        const cluster = this.mgmtClusters.find((cluster) => cluster?.metadata?.name === c?.status?.clusterName);
+
+        return isHarvesterCluster(cluster);
+      });
+    },
+
+    typeDisplay() {
+      return this.t(`typeLabel."${ HCI.CLUSTER }"`, { count: this.row?.length || 0 });
+    },
+  },
+
+  methods: {
+    async goToCluster(row) {
+      const timeout = setTimeout(() => {
+        // Don't show loading indicator for quickly fetched plugins
+        this.navigating = row.id;
+      }, 1000);
+
+      try {
+        await row.goToCluster();
+
+        clearTimeout(timeout);
+        this.navigating = false;
+      } catch {
+        // The error handling is carried out within goToCluster, but just in case something happens before the promise chain can catch it...
+        clearTimeout(timeout);
+        this.navigating = false;
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <Masthead
+      :schema="realSchema"
+      :resource="resource"
+      :is-creatable="false"
+      :type-display="typeDisplay"
+    >
+      <template #typeDescription>
+        <TypeDescription :resource="hResource" />
+      </template>
+
+      <template
+        v-if="canCreateCluster"
+        #extraActions
+      >
+        <router-link
+          :to="importLocation"
+          class="btn role-primary"
+        >
+          {{ t('cluster.importAction') }}
+        </router-link>
+      </template>
+    </Masthead>
+
+    <ResourceTable
+      v-if="rows && rows.length"
+      :schema="schema"
+      :rows="rows"
+      :is-creatable="true"
+      :namespaced="false"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+    >
+      <template #col:name="{row}">
+        <td>
+          <span class="cluster-link">
+            <a
+              v-if="row.isReady"
+              class="link"
+              :disabled="navigating ? true : null"
+              @click="goToCluster(row)"
+            >{{ row.nameDisplay }}</a>
+            <span v-else>
+              {{ row.nameDisplay }}
+            </span>
+            <i
+              class="icon icon-spinner icon-spin ml-5"
+              :class="{'navigating': navigating === row.id}"
+            />
+          </span>
+        </td>
+      </template>
+
+      <template #cell:harvester="{row}">
+        <router-link
+          class="btn btn-sm role-primary"
+          :to="row.detailLocation"
+        >
+          {{ t('harvesterManager.manage') }}
+        </router-link>
+      </template>
+    </ResourceTable>
+    <div v-else>
+      <div class="no-clusters">
+        {{ t('harvesterManager.cluster.none') }}
+      </div>
+      <hr class="info-section">
+      <div class="logo">
+        <BrandImage
+          file-name="harvester.png"
+          height="64"
+        />
+      </div>
+      <div class="tagline">
+        <div>{{ t('harvesterManager.cluster.description') }}</div>
+      </div>
+      <div class="tagline sub-tagline">
+        <div v-clean-html="t('harvesterManager.cluster.learnMore', {}, true)" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .cluster-link {
+    display: flex;
+    align-items: center;
+
+    .icon {
+      // Use visibility to avoid the columns re-adjusting when the icon is shown
+      visibility: hidden;
+
+      &.navigating {
+        visibility: visible;
+      }
+    }
+
+  }
+  .no-clusters {
+    text-align: center;
+  }
+
+  .info-section {
+    margin-top: 60px;
+  }
+
+  .logo {
+    display: flex;
+    justify-content: center;
+    margin: 60px 0 40px 0;
+  }
+
+  .tagline {
+    display: flex;
+    justify-content: center;
+    margin-top: 30px;
+
+    > div {
+      font-size: 16px;
+      line-height: 22px;
+      max-width: 80%;
+      text-align: center;
+    }
+  }
+
+ .link {
+    cursor: pointer;
+  }
+
+</style>
--- a/pkg/harvester/package.json
+++ b/pkg/harvester/package.json
@ -1,11 +1,12 @@
 {
  "name": "harvester",
-  "description": "harvester plugin",
+  "description": "Provides the Virtualization Management feature in Rancher Manager",
  "version": "0.1.0",
  "private": false,
  "rancher": {
    "annotations": {
-      "catalog.cattle.io/rancher-version": ">= v2.8.3"
+      "catalog.cattle.io/rancher-version": ">= v2.10.0",
+      "catalog.cattle.io/display-name": "Virtualization Manager"
    }
  },
  "scripts": {
--- a/pkg/harvester/product.ts
+++ b/pkg/harvester/product.ts
@ -43,14 +43,14 @@ export const IP_POOL_HEADERS = [
  STATE,
  NAME_COL,
  {
-    name:     'subnet',
+    name: 'subnet',
    labelKey: 'harvester.ipPool.subnet.label',
-    value:    'subnetDisplay',
+    value: 'subnetDisplay',
  },
  {
-    name:     'availableIP',
+    name: 'availableIP',
    labelKey: 'harvester.ipPool.availableIP.label',
-    value:    'status.available',
+    value: 'status.available',
  },
  AGE
 ];
@ -70,59 +70,61 @@ export function init($plugin: any, store: any) {

  if (isSingleVirtualCluster) {
    const home = {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: {
-        product:  PRODUCT_NAME,
+        product: PRODUCT_NAME,
        resource: HCI.DASHBOARD
      }
    };

    store.dispatch('setIsSingleProduct', {
-      logo:              require(`@shell/assets/images/providers/harvester.svg`),
-      productNameKey:    'harvester.productLabel',
-      getVersionInfo:    (store: any) => store.getters[`${ PRODUCT_NAME }/byId`]?.(HCI.SETTING, 'server-version')?.value || 'unknown',
-      afterLoginRoute:   home,
-      logoRoute:         home,
+      logo: require(`@shell/assets/images/providers/harvester.svg`),
+      productNameKey: 'harvester.productLabel',
+      getVersionInfo: (store: any) => store.getters[`${PRODUCT_NAME}/byId`]?.(HCI.SETTING, 'server-version')?.value || 'unknown',
+      afterLoginRoute: home,
+      logoRoute: home,
      supportCustomLogo: true
    });
  }

  product({
-    inStore:               PRODUCT_NAME,
-    removable:             false,
-    showNamespaceFilter:   true,
-    hideKubeShell:         true,
-    hideKubeConfig:        true,
-    showClusterSwitcher:   true,
-    hideCopyConfig:        true,
-    hideSystemResources:   true,
+    inStore: PRODUCT_NAME,
+    removable: false,
+    showNamespaceFilter: true,
+    hideKubeShell: true,
+    hideKubeConfig: true,
+    showClusterSwitcher: true,
+    hideCopyConfig: true,
+    hideSystemResources: true,
    customNamespaceFilter: true,
-    typeStoreMap:          {
-      [MANAGEMENT.PROJECT]:                       'management',
+    typeStoreMap: {
+      [MANAGEMENT.PROJECT]: 'management',
      [MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING]: 'management',
      [MANAGEMENT.PROJECT_ROLE_TEMPLATE_BINDING]: 'management'
    },
-    supportRoute: { name: `${ PRODUCT_NAME }-c-cluster-support` },
-    to:           {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    supportRoute: { name: `${PRODUCT_NAME}-c-cluster-support` },
+    to: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: {
-        product:  PRODUCT_NAME,
+        product: PRODUCT_NAME,
        resource: HCI.DASHBOARD
      }
    },
    hideNamespaceLocation: true,
+    category: 'global',
+    icon: 'globe',
  });

  basicType([HCI.DASHBOARD]);
  virtualType({
    labelKey: 'harvester.dashboard.label',
-    group:    'Root',
-    name:     HCI.DASHBOARD,
-    weight:   500,
-    route:    {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    group: 'Root',
+    name: HCI.DASHBOARD,
+    weight: 500,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: {
-        product:  PRODUCT_NAME,
+        product: PRODUCT_NAME,
        resource: HCI.DASHBOARD
      }
    }
@ -131,12 +133,12 @@ export function init($plugin: any, store: any) {

  configureType(HCI.HOST, {
    location: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.HOST }
    },
-    resource:       NODE,
+    resource: NODE,
    resourceDetail: HCI.HOST,
-    resourceEdit:   HCI.HOST
+    resourceEdit: HCI.HOST
  });

  configureType(HCI.HOST, { isCreatable: false, isEditable: true });
@ -144,13 +146,13 @@ export function init($plugin: any, store: any) {

  virtualType({
    ifHaveType: NODE,
-    labelKey:   'harvester.host.label',
-    group:      'Root',
-    name:       HCI.HOST,
+    labelKey: 'harvester.host.label',
+    group: 'Root',
+    name: HCI.HOST,
    namespaced: true,
-    weight:     399,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 399,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.HOST }
    },
    exact: false
@ -159,29 +161,29 @@ export function init($plugin: any, store: any) {
  // multiVirtualCluster
  basicType(['cluster-members'], 'rbac');
  virtualType({
-    ifHave:     IF_HAVE.MULTI_CLUSTER,
-    labelKey:   'members.clusterMembers',
-    group:      'root',
+    ifHave: IF_HAVE.MULTI_CLUSTER,
+    labelKey: 'members.clusterMembers',
+    group: 'root',
    namespaced: false,
-    name:       VIRTUAL_TYPES.CLUSTER_MEMBERS,
-    weight:     100,
-    route:      { name: `${ PRODUCT_NAME }-c-cluster-members` },
-    exact:      true,
+    name: VIRTUAL_TYPES.CLUSTER_MEMBERS,
+    weight: 100,
+    route: { name: `${PRODUCT_NAME}-c-cluster-members` },
+    exact: true,
    ifHaveType: {
-      type:  MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING,
+      type: MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING,
      store: 'management'
    }
  });

  basicType([HCI.VM]);
  virtualType({
-    labelKey:   'harvester.virtualMachine.label',
-    group:      'root',
-    name:       HCI.VM,
+    labelKey: 'harvester.virtualMachine.label',
+    group: 'root',
+    name: HCI.VM,
    namespaced: true,
-    weight:     299,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 299,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.VM }
    },
    exact: false
@ -190,22 +192,22 @@ export function init($plugin: any, store: any) {
  basicType([HCI.VOLUME]);
  configureType(HCI.VOLUME, {
    location: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.VOLUME }
    },
-    resource:       PVC,
+    resource: PVC,
    resourceDetail: HCI.VOLUME,
-    resourceEdit:   HCI.VOLUME
+    resourceEdit: HCI.VOLUME
  });
  virtualType({
-    labelKey:   'harvester.volume.label',
-    group:      'root',
+    labelKey: 'harvester.volume.label',
+    group: 'root',
    ifHaveType: PVC,
-    name:       HCI.VOLUME,
+    name: HCI.VOLUME,
    namespaced: true,
-    weight:     199,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 199,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.VOLUME }
    },
    exact: false
@ -221,13 +223,13 @@ export function init($plugin: any, store: any) {
    AGE
  ]);
  virtualType({
-    labelKey:   'harvester.image.label',
-    group:      'root',
-    name:       HCI.IMAGE,
+    labelKey: 'harvester.image.label',
+    group: 'root',
+    name: HCI.IMAGE,
    namespaced: true,
-    weight:     198,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 198,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.IMAGE }
    },
    exact: false
@ -235,14 +237,14 @@ export function init($plugin: any, store: any) {

  basicType(['projects-namespaces']);
  virtualType({
-    ifHave:     IF_HAVE.MULTI_CLUSTER,
-    labelKey:   'harvester.projectNamespace.label',
-    group:      'root',
+    ifHave: IF_HAVE.MULTI_CLUSTER,
+    labelKey: 'harvester.projectNamespace.label',
+    group: 'root',
    namespaced: true,
-    name:       'projects-namespaces',
-    weight:     98,
-    route:      { name: `${ PRODUCT_NAME }-c-cluster-projectsnamespaces` },
-    exact:      true,
+    name: 'projects-namespaces',
+    weight: 98,
+    route: { name: `${PRODUCT_NAME}-c-cluster-projectsnamespaces` },
+    exact: true,
  });

  // singleVirtualCluster
@ -250,12 +252,12 @@ export function init($plugin: any, store: any) {
    headers(NAMESPACE, [STATE, NAME_UNLINKED, AGE]);
    basicType([NAMESPACE]);
    virtualType({
-      labelKey:   'harvester.namespace.label',
-      name:       NAMESPACE,
+      labelKey: 'harvester.namespace.label',
+      name: NAMESPACE,
      namespaced: true,
-      weight:     89,
-      route:      {
-        name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      weight: 89,
+      route: {
+        name: `${PRODUCT_NAME}-c-cluster-resource`,
        params: { resource: NAMESPACE }
      },
      exact: false,
@ -281,31 +283,31 @@ export function init($plugin: any, store: any) {
    NAME_COL,
    NAMESPACE_COL,
    {
-      name:      'receivers',
-      labelKey:  'tableHeaders.receivers',
+      name: 'receivers',
+      labelKey: 'tableHeaders.receivers',
      formatter: 'ReceiverIcons',
-      value:     'name'
+      value: 'name'
    },
  ]);

  configureType(HCI.ALERTMANAGERCONFIG, {
    location: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.ALERTMANAGERCONFIG },
    },
-    resource:       MONITORING.ALERTMANAGERCONFIG,
+    resource: MONITORING.ALERTMANAGERCONFIG,
    resourceDetail: HCI.ALERTMANAGERCONFIG,
-    resourceEdit:   HCI.ALERTMANAGERCONFIG
+    resourceEdit: HCI.ALERTMANAGERCONFIG
  });

  virtualType({
    ifHaveType: MONITORING.ALERTMANAGERCONFIG,
-    labelKey:   'harvester.monitoring.alertmanagerConfig.label',
-    name:       HCI.ALERTMANAGERCONFIG,
+    labelKey: 'harvester.monitoring.alertmanagerConfig.label',
+    name: HCI.ALERTMANAGERCONFIG,
    namespaced: true,
-    weight:     87,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 87,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.ALERTMANAGERCONFIG }
    },
    exact: false,
@ -313,21 +315,21 @@ export function init($plugin: any, store: any) {

  configureType(HCI.CLUSTER_FLOW, {
    location: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.CLUSTER_FLOW },
    },
-    resource:       LOGGING.CLUSTER_FLOW,
+    resource: LOGGING.CLUSTER_FLOW,
    resourceDetail: HCI.CLUSTER_FLOW,
-    resourceEdit:   HCI.CLUSTER_FLOW
+    resourceEdit: HCI.CLUSTER_FLOW
  });

  virtualType({
-    labelKey:   'harvester.logging.clusterFlow.label',
-    name:       HCI.CLUSTER_FLOW,
+    labelKey: 'harvester.logging.clusterFlow.label',
+    name: HCI.CLUSTER_FLOW,
    namespaced: true,
-    weight:     79,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 79,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.CLUSTER_FLOW }
    },
    exact: false,
@ -335,21 +337,21 @@ export function init($plugin: any, store: any) {

  configureType(HCI.CLUSTER_OUTPUT, {
    location: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.CLUSTER_OUTPUT },
    },
-    resource:       LOGGING.CLUSTER_OUTPUT,
+    resource: LOGGING.CLUSTER_OUTPUT,
    resourceDetail: HCI.CLUSTER_OUTPUT,
-    resourceEdit:   HCI.CLUSTER_OUTPUT
+    resourceEdit: HCI.CLUSTER_OUTPUT
  });

  virtualType({
-    labelKey:   'harvester.logging.clusterOutput.label',
-    name:       HCI.CLUSTER_OUTPUT,
+    labelKey: 'harvester.logging.clusterOutput.label',
+    name: HCI.CLUSTER_OUTPUT,
    namespaced: true,
-    weight:     78,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 78,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.CLUSTER_OUTPUT }
    },
    exact: false,
@ -357,21 +359,21 @@ export function init($plugin: any, store: any) {

  configureType(HCI.FLOW, {
    location: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.FLOW },
    },
-    resource:       LOGGING.FLOW,
+    resource: LOGGING.FLOW,
    resourceDetail: HCI.FLOW,
-    resourceEdit:   HCI.FLOW
+    resourceEdit: HCI.FLOW
  });

  virtualType({
-    labelKey:   'harvester.logging.flow.label',
-    name:       HCI.FLOW,
+    labelKey: 'harvester.logging.flow.label',
+    name: HCI.FLOW,
    namespaced: true,
-    weight:     77,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 77,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.FLOW }
    },
    exact: false,
@ -379,21 +381,21 @@ export function init($plugin: any, store: any) {

  configureType(HCI.OUTPUT, {
    location: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.OUTPUT },
    },
-    resource:       LOGGING.OUTPUT,
+    resource: LOGGING.OUTPUT,
    resourceDetail: HCI.OUTPUT,
-    resourceEdit:   HCI.OUTPUT
+    resourceEdit: HCI.OUTPUT
  });

  virtualType({
-    labelKey:   'harvester.logging.output.label',
-    name:       HCI.OUTPUT,
+    labelKey: 'harvester.logging.output.label',
+    name: HCI.OUTPUT,
    namespaced: true,
-    weight:     76,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 76,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.OUTPUT }
    },
    exact: false,
@ -446,17 +448,17 @@ export function init($plugin: any, store: any) {

  configureType(HCI.CLUSTER_NETWORK, {
    realResource: HCI.SETTING,
-    showState:    false
+    showState: false
  });

  virtualType({
-    labelKey:   'harvester.vmTemplate.label',
-    group:      'root',
-    name:       TEMPLATE,
+    labelKey: 'harvester.vmTemplate.label',
+    group: 'root',
+    name: TEMPLATE,
    namespaced: true,
-    weight:     289,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 289,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: TEMPLATE }
    },
    exact: false
@ -464,12 +466,12 @@ export function init($plugin: any, store: any) {

  configureType(HCI.BACKUP, { showListMasthead: false, showConfigView: false });
  virtualType({
-    labelKey:   'harvester.backup.label',
-    name:       HCI.BACKUP,
+    labelKey: 'harvester.backup.label',
+    name: HCI.BACKUP,
    namespaced: true,
-    weight:     200,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 200,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.BACKUP }
    },
    exact: false
@ -479,13 +481,13 @@ export function init($plugin: any, store: any) {

  configureType(HCI.CLUSTER_NETWORK, { showListMasthead: false });
  virtualType({
-    labelKey:   'harvester.clusterNetwork.title',
-    name:       HCI.CLUSTER_NETWORK,
+    labelKey: 'harvester.clusterNetwork.title',
+    name: HCI.CLUSTER_NETWORK,
    ifHaveType: HCI.CLUSTER_NETWORK,
    namespaced: false,
-    weight:     189,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 189,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.CLUSTER_NETWORK }
    },
    exact: false,
@ -493,21 +495,21 @@ export function init($plugin: any, store: any) {

  configureType(HCI.NETWORK_ATTACHMENT, {
    location: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.NETWORK_ATTACHMENT }
    },
-    resource:       NETWORK_ATTACHMENT,
+    resource: NETWORK_ATTACHMENT,
    resourceDetail: HCI.NETWORK_ATTACHMENT,
-    resourceEdit:   HCI.NETWORK_ATTACHMENT
+    resourceEdit: HCI.NETWORK_ATTACHMENT
  });

  virtualType({
-    labelKey:   'harvester.network.label',
-    name:       HCI.NETWORK_ATTACHMENT,
+    labelKey: 'harvester.network.label',
+    name: HCI.NETWORK_ATTACHMENT,
    namespaced: true,
-    weight:     188,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 188,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.NETWORK_ATTACHMENT }
    },
    exact: false
@ -515,22 +517,22 @@ export function init($plugin: any, store: any) {

  configureType(HCI.SNAPSHOT, {
    isCreatable: false,
-    location:    {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    location: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.SNAPSHOT },
    },
-    resource:       VOLUME_SNAPSHOT,
+    resource: VOLUME_SNAPSHOT,
    resourceDetail: HCI.SNAPSHOT,
-    resourceEdit:   HCI.SNAPSHOT,
+    resourceEdit: HCI.SNAPSHOT,
  });
  headers(HCI.SNAPSHOT, [STATE, NAME_COL, NAMESPACE_COL, SNAPSHOT_TARGET_VOLUME, AGE]);
  virtualType({
-    labelKey:   'harvester.snapshot.label',
-    name:       HCI.SNAPSHOT,
+    labelKey: 'harvester.snapshot.label',
+    name: HCI.SNAPSHOT,
    namespaced: true,
-    weight:     190,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 190,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.SNAPSHOT }
    },
    exact: false,
@ -538,22 +540,22 @@ export function init($plugin: any, store: any) {

  configureType(HCI.VM_SNAPSHOT, {
    showListMasthead: false,
-    location:         {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    location: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.VM_SNAPSHOT }
    },
-    resource:       HCI.BACKUP,
+    resource: HCI.BACKUP,
    resourceDetail: HCI.VM_SNAPSHOT,
-    resourceEdit:   HCI.VM_SNAPSHOT
+    resourceEdit: HCI.VM_SNAPSHOT
  });

  virtualType({
-    labelKey:   'harvester.vmSnapshot.label',
-    name:       HCI.VM_SNAPSHOT,
+    labelKey: 'harvester.vmSnapshot.label',
+    name: HCI.VM_SNAPSHOT,
    namespaced: true,
-    weight:     191,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 191,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.VM_SNAPSHOT }
    },
    exact: false
@ -561,12 +563,12 @@ export function init($plugin: any, store: any) {

  headers(HCI.SSH, [STATE, NAME_COL, NAMESPACE_COL, FINGERPRINT, AGE]);
  virtualType({
-    labelKey:   'harvester.sshKey.label',
-    name:       HCI.SSH,
+    labelKey: 'harvester.sshKey.label',
+    name: HCI.SSH,
    namespaced: true,
-    weight:     170,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 170,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.SSH }
    },
    exact: false
@ -574,21 +576,21 @@ export function init($plugin: any, store: any) {

  configureType(HCI.CLOUD_TEMPLATE, {
    location: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.CLOUD_TEMPLATE }
    },
-    resource:       CONFIG_MAP,
+    resource: CONFIG_MAP,
    resourceDetail: HCI.CLOUD_TEMPLATE,
-    resourceEdit:   HCI.CLOUD_TEMPLATE
+    resourceEdit: HCI.CLOUD_TEMPLATE
  });

  virtualType({
-    labelKey:   'harvester.cloudTemplate.label',
-    name:       HCI.CLOUD_TEMPLATE,
+    labelKey: 'harvester.cloudTemplate.label',
+    name: HCI.CLOUD_TEMPLATE,
    namespaced: true,
-    weight:     87,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 87,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.CLOUD_TEMPLATE }
    },
    exact: false
@ -600,9 +602,9 @@ export function init($plugin: any, store: any) {
    NAMESPACE_COL,
    SUB_TYPE,
    {
-      name:      'data',
-      labelKey:  'tableHeaders.data',
-      value:     'dataPreview',
+      name: 'data',
+      labelKey: 'tableHeaders.data',
+      value: 'dataPreview',
      formatter: 'SecretData'
    },
    AGE
@ -610,22 +612,22 @@ export function init($plugin: any, store: any) {

  configureType(HCI.SECRET, {
    location: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.SECRET }
    },
-    resource:           SECRET,
-    resourceDetail:     HCI.SECRET,
-    resourceEdit:       HCI.SECRET,
+    resource: SECRET,
+    resourceDetail: HCI.SECRET,
+    resourceEdit: HCI.SECRET,
    notFilterNamespace: ['cattle-monitoring-system', 'cattle-logging-system']
  });

  virtualType({
-    labelKey:   'harvester.secret.label',
-    name:       HCI.SECRET,
+    labelKey: 'harvester.secret.label',
+    name: HCI.SECRET,
    namespaced: true,
-    weight:     -999,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: -999,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.SECRET }
    },
    exact: false
@ -636,12 +638,12 @@ export function init($plugin: any, store: any) {
  virtualType({
    ifHaveType: HCI.SETTING,
    ifHaveVerb: 'POST',
-    labelKey:   'harvester.setting.label',
-    name:       HCI.SETTING,
+    labelKey: 'harvester.setting.label',
+    name: HCI.SETTING,
    namespaced: true,
-    weight:     -1000,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: -1000,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.SETTING }
    },
    exact: false
@ -649,56 +651,56 @@ export function init($plugin: any, store: any) {

  configureType(HCI.STORAGE, {
    location: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.STORAGE }
    },
-    resource:       STORAGE_CLASS,
+    resource: STORAGE_CLASS,
    resourceDetail: HCI.STORAGE,
-    resourceEdit:   HCI.STORAGE,
-    isCreatable:    true,
+    resourceEdit: HCI.STORAGE,
+    isCreatable: true,
  });
  virtualType({
-    labelKey:   'harvester.storage.title',
-    group:      'root',
+    labelKey: 'harvester.storage.title',
+    group: 'root',
    ifHaveType: STORAGE_CLASS,
-    name:       HCI.STORAGE,
+    name: HCI.STORAGE,
    namespaced: false,
-    weight:     79,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 79,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.STORAGE }
    },
    exact: false,
  });

  virtualType({
-    label:      'PCI Devices',
-    group:      'advanced',
-    weight:     14,
-    name:       HCI.PCI_DEVICE,
+    label: 'PCI Devices',
+    group: 'advanced',
+    weight: 14,
+    name: HCI.PCI_DEVICE,
    namespaced: false,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.PCI_DEVICE }
    },
    exact: false,
  });

  configureType(HCI.PCI_DEVICE, {
-    isCreatable:                false,
+    isCreatable: false,
    hiddenNamespaceGroupButton: true,
-    listGroups:                 [
+    listGroups: [
      {
-        icon:       'icon-list-grouped',
-        value:      'description',
-        field:      'groupByDevice',
+        icon: 'icon-list-grouped',
+        value: 'description',
+        field: 'groupByDevice',
        hideColumn: 'description',
        tooltipKey: 'resourceTable.groupBy.device'
      },
      {
-        icon:       'icon-cluster',
-        value:      'node',
-        field:      'groupByNode',
+        icon: 'icon-cluster',
+        value: 'node',
+        field: 'groupByNode',
        hideColumn: 'node',
        tooltipKey: 'resourceTable.groupBy.node'
      }
@ -707,63 +709,63 @@ export function init($plugin: any, store: any) {

  virtualType({
    ifHaveType: HCI.SR_IOV,
-    labelKey:   'harvester.sriov.label',
-    group:      'advanced',
-    weight:     15,
-    name:       HCI.SR_IOV,
+    labelKey: 'harvester.sriov.label',
+    group: 'advanced',
+    weight: 15,
+    name: HCI.SR_IOV,
    namespaced: false,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.SR_IOV }
    },
    exact: false
  });

  configureType(HCI.SR_IOV, {
-    isCreatable:                false,
+    isCreatable: false,
    hiddenNamespaceGroupButton: true,
  });

  virtualType({
    ifHaveType: HCI.SR_IOVGPU_DEVICE,
-    labelKey:   'harvester.sriovgpu.label',
-    group:      'advanced',
-    weight:     13,
-    name:       HCI.SR_IOVGPU_DEVICE,
+    labelKey: 'harvester.sriovgpu.label',
+    group: 'advanced',
+    weight: 13,
+    name: HCI.SR_IOVGPU_DEVICE,
    namespaced: false,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.SR_IOVGPU_DEVICE }
    },
    exact: false,
  });

  configureType(HCI.SR_IOVGPU_DEVICE, {
-    isCreatable:                false,
+    isCreatable: false,
    hiddenNamespaceGroupButton: true,
  });

  virtualType({
-    labelKey:   'harvester.vgpu.label',
-    group:      'advanced',
-    weight:     12,
-    name:       HCI.VGPU_DEVICE,
+    labelKey: 'harvester.vgpu.label',
+    group: 'advanced',
+    weight: 12,
+    name: HCI.VGPU_DEVICE,
    namespaced: false,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.VGPU_DEVICE }
    },
    exact: false,
  });

  configureType(HCI.VGPU_DEVICE, {
-    isCreatable:                false,
+    isCreatable: false,
    hiddenNamespaceGroupButton: true,
-    listGroups:                 [
+    listGroups: [
      {
-        icon:       'icon-cluster',
-        value:      'node',
-        field:      'groupByNode',
+        icon: 'icon-cluster',
+        value: 'node',
+        field: 'groupByNode',
        hideColumn: 'node',
        tooltipKey: 'resourceTable.groupBy.node'
      }
@ -773,18 +775,18 @@ export function init($plugin: any, store: any) {
  configureType(HCI.ADD_ONS, {
    isCreatable: false,
    isRemovable: false,
-    showState:   false,
+    showState: false,
  });

  virtualType({
-    label:      'Addons',
-    group:      'advanced',
-    name:       HCI.ADD_ONS,
+    label: 'Addons',
+    group: 'advanced',
+    name: HCI.ADD_ONS,
    ifHaveType: HCI.ADD_ONS,
-    weight:     -900,
+    weight: -900,
    namespaced: false,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.ADD_ONS }
    },
    exact: false,
@ -792,20 +794,20 @@ export function init($plugin: any, store: any) {

  configureType(HCI.LB, {
    location: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.LB }
    },
  });
  virtualType({
-    labelKey:   'harvester.loadBalancer.label',
-    name:       HCI.LB,
+    labelKey: 'harvester.loadBalancer.label',
+    name: HCI.LB,
    namespaced: true,
-    weight:     185,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 185,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.LB }
    },
-    exact:      false,
+    exact: false,
    ifHaveType: HCI.LB,
  });
  headers(HCI.LB, [
@ -816,34 +818,34 @@ export function init($plugin: any, store: any) {
      formatter: 'HarvesterListener',
    },
    {
-      name:     'workloadType',
+      name: 'workloadType',
      labelKey: 'harvester.loadBalancer.workloadType.label',
-      value:    'workloadTypeDisplay',
+      value: 'workloadTypeDisplay',
    },
    {
-      name:     'ipam',
+      name: 'ipam',
      labelKey: 'harvester.loadBalancer.ipam.label',
-      value:    'ipamDisplay',
+      value: 'ipamDisplay',
    },
    AGE
  ]);

  configureType(HCI.IP_POOL, {
    location: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.IP_POOL }
    },
  });
  virtualType({
-    labelKey:   'harvester.ipPool.label',
-    name:       HCI.IP_POOL,
+    labelKey: 'harvester.ipPool.label',
+    name: HCI.IP_POOL,
    namespaced: false,
-    weight:     184,
-    route:      {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+    weight: 184,
+    route: {
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
      params: { resource: HCI.IP_POOL }
    },
-    exact:      false,
+    exact: false,
    ifHaveType: HCI.IP_POOL,
  });
  headers(HCI.IP_POOL, IP_POOL_HEADERS);
--- a/pkg/harvester/routing/harvester-routing.js
+++ b/pkg/harvester/routing/harvester-routing.js
@ -0,0 +1,18 @@
+import { RouteRecordRaw } from 'vue-router';
+import { PRODUCT_NAME } from '../config/harvester-manager';
+
+import Root from '../pages/c/_cluster/index.vue';
+import ListHarvesterMgrResource from '../pages/c/_cluster/_resource/index.vue';
+import CreateHarvesterMgrResource from '../pages/c/_cluster/_resource/create.vue';
+import ViewHarvesterMgrResource from '../pages/c/_cluster/_resource/_id.vue';
+import ClusterListPage from '../list/harvesterhci.io.management.cluster.vue';
+
+const routes = [
+  {
+    path:      '/harvesterManager/clusters',
+    name:      `${ PRODUCT_NAME }-c-cluster-list-page`,
+    component: ClusterListPage,
+  },
+];
+
+export default routes;
--- a/pkg/harvester/routing/harvester-routing.ts
+++ b/pkg/harvester/routing/harvester-routing.ts
@ -1,83 +0,0 @@
-// eslint-disable-next-line import/named
-// import { RouteRecordRaw } from 'vue-router';
-import { PRODUCT_NAME } from '../config/harvester';
-
-import Root from '../pages/c/_cluster/index.vue';
-import HarvesterSupport from '../pages/c/_cluster/support/index.vue';
-import HarvesterConsoleSerial from '../pages/c/_cluster/console/_uid/serial.vue';
-import HarvesterConsoleVnc from '../pages/c/_cluster/console/_uid/vnc.vue';
-import ListHarvesterResource from '../pages/c/_cluster/_resource/index.vue';
-import HarvesterBrand from '../pages/c/_cluster/brand/index.vue';
-import CreateHarvesterResource from '../pages/c/_cluster/_resource/create.vue';
-import ViewHarvesterResource from '../pages/c/_cluster/_resource/_id.vue';
-import ViewHarvesterNsResource from '../pages/c/_cluster/_resource/_namespace/_id.vue';
-import HarvesterAirgapUpdgrade from '../pages/c/_cluster/airgapupgrade/index.vue';
-import HarvesterMembers from '../pages/c/_cluster/members/index.vue';
-import ProjectNamespaces from '../pages/c/_cluster/projectsnamespaces.vue';
-import HarvesterAlertmanagerReceiver from '../pages/c/_cluster/alertmanagerconfig/_alertmanagerconfigid/receiver.vue';
-
-const routes: any[] = [
-  {
-    name:      `${ PRODUCT_NAME }-c-cluster-support`,
-    path:      `/:product/c/:cluster/support`,
-    component: HarvesterSupport,
-  },
-  {
-    name:      `${ PRODUCT_NAME }-c-cluster-console-uid-serial`,
-    path:      `/:product/c/:cluster/console/:uid/serial`,
-    component: HarvesterConsoleSerial,
-  },
-  {
-    name:      `${ PRODUCT_NAME }-c-cluster-console-uid-vnc`,
-    path:      `/:product/c/:cluster/console/:uid/vnc`,
-    component: HarvesterConsoleVnc,
-  },
-  {
-    name:      `${ PRODUCT_NAME }-c-cluster-airgapupgrade`,
-    path:      `/:product/c/:cluster/airgapupgrade`,
-    component: HarvesterAirgapUpdgrade,
-  },
-  {
-    name:      `${ PRODUCT_NAME }-c-cluster-brand`,
-    path:      `/:product/c/:cluster/brand`,
-    component: HarvesterBrand,
-  },
-  {
-    name:      `${ PRODUCT_NAME }-c-cluster-alertmanagerconfig-alertmanagerconfigid-receiver`,
-    path:      `/:product/c/:cluster/alertmanagerconfig/:alertmanagerconfigid/receiver`,
-    component: HarvesterAlertmanagerReceiver,
-  },
-  {
-    name:      `${ PRODUCT_NAME }-c-cluster-members`,
-    path:      `/:product/c/:cluster/members`,
-    component: HarvesterMembers,
-  },
-  {
-    name:      `${ PRODUCT_NAME }-c-cluster`,
-    path:      `/:product/c/:cluster`,
-    component: Root,
-  }, {
-    name:      `${ PRODUCT_NAME }-c-cluster-projectsnamespaces`,
-    path:      `/:product/c/:cluster/projectsnamespaces`,
-    component: ProjectNamespaces,
-  }, {
-    name:      `${ PRODUCT_NAME }-c-cluster-resource`,
-    path:      `/:product/c/:cluster/:resource`,
-    component: ListHarvesterResource,
-  }, {
-    name:      `${ PRODUCT_NAME }-c-cluster-resource-create`,
-    path:      `/:product/c/:cluster/:resource/create`,
-    component: CreateHarvesterResource,
-  }, {
-    name:      `${ PRODUCT_NAME }-c-cluster-resource-id`,
-    path:      `/:product/c/:cluster/:resource/:id`,
-    component: ViewHarvesterResource,
-  }, {
-    name:      `${ PRODUCT_NAME }-c-cluster-resource-namespace-id`,
-    path:      `/:product/c/:cluster/:resource/:namespace/:id`,
-    component: ViewHarvesterNsResource,
-  },
-
-];
-
-export default routes;
--- a/pkg/harvester/tsconfig.json
+++ b/pkg/harvester/tsconfig.json
@ -16,7 +16,7 @@
    "typeRoots": [
      "../../node_modules",
      "../../node_modules/@rancher/shell/types"
-    ],    
+    ],
    "types": [
      "node",
      "webpack-env",
@ -50,4 +50,4 @@
  "exclude": [
    "../../node_modules"
  ]
-}
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -28,9 +28,8 @@
    "typeRoots": [
      "./node_modules",
      "./node_modules/@rancher/shell/types"
-    ],    
+    ],
    "types": [
-      "@types/jest",
      "@types/node",
      "cypress",
      "rancher",
--- a/yarn.lock
+++ b/yarn.lock