Making harvester-manager load as an external extension

package.json

@@ -6,24 +6,14 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "@rancher/components": "0.3.0-alpha.1",
+    "@rancher/shell": "^3.0.0-rc.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",
     "cache-loader": "^4.1.0",
-    "codemirror": ">=5.64.0 <6",
+    "color": "4.2.3",
-    "codemirror-editor-vue3": "^2.7.0",
+    "ip": "2.0.1",
-    "core-js": "3.25.3",
+    "node-polyfill-webpack-plugin": "^3.0.0"
-    "css-loader": "4.3.0",
-    "diff_match_patch": "^0.1.1",
-    "node-polyfill-webpack-plugin": "^3.0.0",
-    "yaml": "2.0.0"
   },
   "resolutions": {
-    "@vue/cli-plugin-babel": "5.0.8",
+    "@types/node": "~20.10.0",
-    "@vue/cli-service": "5.0.8",
-    "@vue/cli-plugin-typescript": "5.0.8",
     "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",
+    "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"
   }
 }

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"

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,
+        };
+      });
+    },
+  });
+}

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"

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">

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">

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

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>

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 extensionRoutes from './routing/harvester-routing';
-import harvesterCommonStore from './store/harvester-common';
-import harvesterStore from './store/harvester-store';
-import customValidators from './validators';
 
 // 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
+  // Built-in icon
-  plugin.addProduct(require('./product'));
+  plugin.metadata.icon = require('./icon.svg');
 
-  // Add Vue Routes
+  plugin.addProduct(require('./config/harvester-manager'));
-  plugin.addRoutes(extensionRouting);
+  plugin.addRoutes(extensionRoutes);
-
-  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`));
 }

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'

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>

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": {

pkg/harvester/product.ts

@@ -70,7 +70,7 @@ 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,
         resource: HCI.DASHBOARD
@@ -80,7 +80,7 @@ export function init($plugin: any, store: any) {
     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',
+      getVersionInfo: (store: any) => store.getters[`${PRODUCT_NAME}/byId`]?.(HCI.SETTING, 'server-version')?.value || 'unknown',
       afterLoginRoute: home,
       logoRoute: home,
       supportCustomLogo: true
@@ -102,15 +102,17 @@ export function init($plugin: any, store: any) {
       [MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING]: 'management',
       [MANAGEMENT.PROJECT_ROLE_TEMPLATE_BINDING]: 'management'
     },
-    supportRoute: { name: `${ PRODUCT_NAME }-c-cluster-support` },
+    supportRoute: { name: `${PRODUCT_NAME}-c-cluster-support` },
     to: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: {
         product: PRODUCT_NAME,
         resource: HCI.DASHBOARD
       }
     },
     hideNamespaceLocation: true,
+    category: 'global',
+    icon: 'globe',
   });
 
   basicType([HCI.DASHBOARD]);
@@ -120,7 +122,7 @@ export function init($plugin: any, store: any) {
     name: HCI.DASHBOARD,
     weight: 500,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: {
         product: PRODUCT_NAME,
         resource: HCI.DASHBOARD
@@ -131,7 +133,7 @@ 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,
@@ -150,7 +152,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: 399,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.HOST }
     },
     exact: false
@@ -165,7 +167,7 @@ export function init($plugin: any, store: any) {
     namespaced: false,
     name: VIRTUAL_TYPES.CLUSTER_MEMBERS,
     weight: 100,
-    route:      { name: `${ PRODUCT_NAME }-c-cluster-members` },
+    route: { name: `${PRODUCT_NAME}-c-cluster-members` },
     exact: true,
     ifHaveType: {
       type: MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING,
@@ -181,7 +183,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: 299,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.VM }
     },
     exact: false
@@ -190,7 +192,7 @@ 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,
@@ -205,7 +207,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: 199,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.VOLUME }
     },
     exact: false
@@ -227,7 +229,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: 198,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.IMAGE }
     },
     exact: false
@@ -241,7 +243,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     name: 'projects-namespaces',
     weight: 98,
-    route:      { name: `${ PRODUCT_NAME }-c-cluster-projectsnamespaces` },
+    route: { name: `${PRODUCT_NAME}-c-cluster-projectsnamespaces` },
     exact: true,
   });
 
@@ -255,7 +257,7 @@ export function init($plugin: any, store: any) {
       namespaced: true,
       weight: 89,
       route: {
-        name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+        name: `${PRODUCT_NAME}-c-cluster-resource`,
         params: { resource: NAMESPACE }
       },
       exact: false,
@@ -290,7 +292,7 @@ export function init($plugin: any, store: any) {
 
   configureType(HCI.ALERTMANAGERCONFIG, {
     location: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.ALERTMANAGERCONFIG },
     },
     resource: MONITORING.ALERTMANAGERCONFIG,
@@ -305,7 +307,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: 87,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.ALERTMANAGERCONFIG }
     },
     exact: false,
@@ -313,7 +315,7 @@ 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,
@@ -327,7 +329,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: 79,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.CLUSTER_FLOW }
     },
     exact: false,
@@ -335,7 +337,7 @@ 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,
@@ -349,7 +351,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: 78,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.CLUSTER_OUTPUT }
     },
     exact: false,
@@ -357,7 +359,7 @@ 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,
@@ -371,7 +373,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: 77,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.FLOW }
     },
     exact: false,
@@ -379,7 +381,7 @@ 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,
@@ -393,7 +395,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: 76,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.OUTPUT }
     },
     exact: false,
@@ -456,7 +458,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: 289,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: TEMPLATE }
     },
     exact: false
@@ -469,7 +471,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: 200,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.BACKUP }
     },
     exact: false
@@ -485,7 +487,7 @@ export function init($plugin: any, store: any) {
     namespaced: false,
     weight: 189,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.CLUSTER_NETWORK }
     },
     exact: false,
@@ -493,7 +495,7 @@ 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,
@@ -507,7 +509,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: 188,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.NETWORK_ATTACHMENT }
     },
     exact: false
@@ -516,7 +518,7 @@ export function init($plugin: any, store: any) {
   configureType(HCI.SNAPSHOT, {
     isCreatable: false,
     location: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.SNAPSHOT },
     },
     resource: VOLUME_SNAPSHOT,
@@ -530,7 +532,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: 190,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.SNAPSHOT }
     },
     exact: false,
@@ -539,7 +541,7 @@ export function init($plugin: any, store: any) {
   configureType(HCI.VM_SNAPSHOT, {
     showListMasthead: false,
     location: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.VM_SNAPSHOT }
     },
     resource: HCI.BACKUP,
@@ -553,7 +555,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: 191,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.VM_SNAPSHOT }
     },
     exact: false
@@ -566,7 +568,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: 170,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.SSH }
     },
     exact: false
@@ -574,7 +576,7 @@ 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,
@@ -588,7 +590,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: 87,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.CLOUD_TEMPLATE }
     },
     exact: false
@@ -610,7 +612,7 @@ 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,
@@ -625,7 +627,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: -999,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.SECRET }
     },
     exact: false
@@ -641,7 +643,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: -1000,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.SETTING }
     },
     exact: false
@@ -649,7 +651,7 @@ 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,
@@ -665,7 +667,7 @@ export function init($plugin: any, store: any) {
     namespaced: false,
     weight: 79,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.STORAGE }
     },
     exact: false,
@@ -678,7 +680,7 @@ export function init($plugin: any, store: any) {
     name: HCI.PCI_DEVICE,
     namespaced: false,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.PCI_DEVICE }
     },
     exact: false,
@@ -713,7 +715,7 @@ export function init($plugin: any, store: any) {
     name: HCI.SR_IOV,
     namespaced: false,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.SR_IOV }
     },
     exact: false
@@ -732,7 +734,7 @@ export function init($plugin: any, store: any) {
     name: HCI.SR_IOVGPU_DEVICE,
     namespaced: false,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.SR_IOVGPU_DEVICE }
     },
     exact: false,
@@ -750,7 +752,7 @@ export function init($plugin: any, store: any) {
     name: HCI.VGPU_DEVICE,
     namespaced: false,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.VGPU_DEVICE }
     },
     exact: false,
@@ -784,7 +786,7 @@ export function init($plugin: any, store: any) {
     weight: -900,
     namespaced: false,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.ADD_ONS }
     },
     exact: false,
@@ -792,7 +794,7 @@ 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 }
     },
   });
@@ -802,7 +804,7 @@ export function init($plugin: any, store: any) {
     namespaced: true,
     weight: 185,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.LB }
     },
     exact: false,
@@ -830,7 +832,7 @@ export function init($plugin: any, store: any) {
 
   configureType(HCI.IP_POOL, {
     location: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.IP_POOL }
     },
   });
@@ -840,7 +842,7 @@ export function init($plugin: any, store: any) {
     namespaced: false,
     weight: 184,
     route: {
-      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      name: `${PRODUCT_NAME}-c-cluster-resource`,
       params: { resource: HCI.IP_POOL }
     },
     exact: false,

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;

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;

tsconfig.json

@@ -30,7 +30,6 @@
       "./node_modules/@rancher/shell/types"
     ],
     "types": [
-      "@types/jest",
       "@types/node",
       "cypress",
       "rancher",