@rancher/shell 2.0.0 → 3.0.0-rc.1

package/{middleware/authenticated.js → config/router/navigation-guards/clusters.js}

@@ -1,79 +1,40 @@
 import { DEFAULT_WORKSPACE } from '@shell/config/types';
-import { applyProducts } from '@shell/store/type-map';
 import { ClusterNotFoundError, RedirectToError } from '@shell/utils/error';
 import { get } from '@shell/utils/object';
-import dynamicPluginLoader from '@shell/pkg/dynamic-plugin-loader';
 import { AFTER_LOGIN_ROUTE, WORKSPACE } from '@shell/store/prefs';
-import { BACK_TO } from '@shell/config/local-storage';
 import { NAME as FLEET_NAME } from '@shell/config/product/fleet.js';
 import { validateResource, setProduct } from '@shell/utils/auth';
-import { getClusterFromRoute, getProductFromRoute, getPackageFromRoute } from '@shell/utils/router';
+import { getClusterFromRoute, getProductFromRoute, getPackageFromRoute, routeRequiresAuthentication } from '@shell/utils/router';
 
-let beforeEachSetup = false;
-
-export default async function({
-  route, store, redirect, from, $plugin, next
-}) {
-  if ( store.getters['auth/enabled'] !== false && !store.getters['auth/loggedIn'] ) {
-    return;
-  }
-
-  const backTo = window.localStorage.getItem(BACK_TO);
-
-  if (backTo) {
-    window.localStorage.removeItem(BACK_TO);
-
-    window.location.href = backTo;
-  }
-
-  // GC should be notified of route change before any find/get request is made that might be used for that page
-  store.dispatch('gcRouteChanged', route);
-
-  // Load stuff
-  let localCheckResource = false;
-
-  await applyProducts(store, $plugin);
-
-  // Setup a beforeEach hook once to keep track of the current product
-  if ( !beforeEachSetup ) {
-    beforeEachSetup = true;
-    // This only needs to happen when beforeEach hook hasn't run (the initial load)
-    localCheckResource = true;
-
-    store.app.router.beforeEach((to, from, next) => {
-      // NOTE - This beforeEach runs AFTER this middleware. So anything in this middleware that requires it must set it manually
-      setProduct(store, to);
-
-      next();
-    });
-
-    // Call it for the initial pageload
-    setProduct(store, route);
+export function install(router, context) {
+  router.beforeEach((to, from, next) => loadClusters(to, from, next, context));
+}
 
-    store.app.router.afterEach((to, from) => {
-      // Clear state used to record if back button was used for navigation
-      setTimeout(() => {
-        window._popStateDetected = false;
-      }, 1);
-    });
+export async function loadClusters(to, from, next, { store }) {
+  if (!routeRequiresAuthentication(to)) {
+    return next();
   }
 
   try {
-    let clusterId = get(route, 'params.cluster');
+    let clusterId = get(to, 'params.cluster');
 
     // Route can provide cluster ID via metadata
-    if (!clusterId && route) {
-      clusterId = getClusterFromRoute(route);
+    if (!clusterId && to) {
+      clusterId = getClusterFromRoute(to);
     }
 
-    const pkg = getPackageFromRoute(route);
-    const product = getProductFromRoute(route);
+    const pkg = getPackageFromRoute(to);
+    const product = getProductFromRoute(to);
 
     const oldPkg = getPackageFromRoute(from);
     const oldProduct = getProductFromRoute(from);
 
+    // TODO: Replace all references to store.$plugin.
+    //       Unfortunately the initialization code has circular dependencies between creating
+    //       the router and creating the store that will need to be untangled before this can be tackled.
+
     // Leave an old pkg where we weren't before?
-    const oldPkgPlugin = oldPkg ? Object.values($plugin.getPlugins()).find((p) => p.name === oldPkg) : null;
+    const oldPkgPlugin = oldPkg ? Object.values(store.$plugin.getPlugins()).find((p) => p.name === oldPkg) : null;
 
     if (oldPkg && oldPkg !== pkg ) {
       // Execute anything optional the plugin wants to. For example resetting it's store to remove data
@@ -91,10 +52,10 @@ export default async function({
     ];
 
     // Entering a new package where we weren't before?
-    const newPkgPlugin = pkg ? Object.values($plugin.getPlugins()).find((p) => p.name === pkg) : null;
+    const newPkgPlugin = pkg ? Object.values(store.$plugin.getPlugins()).find((p) => p.name === pkg) : null;
 
     // Note - We can't block on oldPkg !== newPkg because on a fresh load the `from` route equals the `to` route
-    if (pkg && (oldPkg !== pkg || from.fullPath === route.fullPath)) {
+    if (pkg && (oldPkg !== pkg || from.fullPath === to.fullPath)) {
       // Execute mandatory store actions
       await Promise.all(always);
 
@@ -107,29 +68,11 @@ export default async function({
       });
     }
 
-    if (!route.matched?.length) {
-      // If there are no matching routes we could be trying to nav to a page belonging to a dynamic plugin which needs loading
-      await Promise.all([
-        ...always,
-      ]);
-
-      // If a plugin claims the route and is loaded correctly we'll get a route back
-      const newLocation = await dynamicPluginLoader.check({ route, store });
-
-      // If we have a new location, double check that it's actually valid
-      const resolvedRoute = newLocation ? store.app.router.resolve(newLocation) : null;
-
-      if (resolvedRoute?.route.matched.length) {
-        // Note - don't use `redirect` or `store.app.route` (breaks feature by failing to run middleware in default layout)
-        return next(newLocation);
-      }
-    }
-
     // Ensure that the activeNamespaceCache is updated given the change of context either from or to a place where it uses workspaces
     // When fleet moves to it's own package this should be moved to pkg onEnter/onLeave
     if ((oldProduct === FLEET_NAME || product === FLEET_NAME) && oldProduct !== product) {
       // See note above for store.app.router.beforeEach, need to setProduct manually, for the moment do this in a targeted way
-      setProduct(store, route);
+      setProduct(store, to);
 
       store.commit('updateWorkspace', {
         value:   store.getters['prefs/get'](WORKSPACE) || DEFAULT_WORKSPACE,
@@ -147,13 +90,11 @@ export default async function({
         newPkg:      newPkgPlugin,
         product,
         oldProduct,
-        targetRoute: route
+        targetRoute: to
       })
     ]);
 
-    if (localCheckResource) {
-      validateResource(store, route, redirect);
-    }
+    validateResource(store, to);
 
     if (!clusterId) {
       clusterId = store.getters['defaultClusterId']; // This needs the cluster list, so no parallel
@@ -175,16 +116,17 @@ export default async function({
         });
       }
     }
+    next();
   } catch (e) {
-    if ( e.name === ClusterNotFoundError.name ) {
-      return redirect(302, '/home');
-    } if ( e.name === RedirectToError.name ) {
-      return redirect(302, e.url);
+    if ( e.name === ClusterNotFoundError.NAME ) {
+      return next('/home');
+    } if ( e.name === RedirectToError.NAME ) {
+      return next(e.url);
     } else {
       // Sets error 500 if lost connection to API
       store.commit('setError', { error: e, locationError: new Error(store.getters['i18n/t']('nav.failWhale.authMiddleware')) });
 
-      return redirect(302, '/fail-whale');
+      return next('/fail-whale');
     }
   }
 }

package/config/router/navigation-guards/history.js

@@ -0,0 +1,13 @@
+export function install(router, context) {
+  router.beforeEach((to, from, next) => loadHistory(to, from, next, context));
+}
+
+export async function loadHistory(to, from, next) {
+  // Clear state used to record if back button was used for navigation
+  // TODO: Investigate if this can be removed. This is only used on the templates/error.vue page and seems hacky.
+  setTimeout(() => {
+    window._popStateDetected = false;
+  }, 1);
+
+  next();
+}

package/config/router/navigation-guards/i18n.js

@@ -0,0 +1,13 @@
+export function install(router, context) {
+  router.beforeEach(async(to, from, next) => await loadI18n(to, from, next, context));
+}
+
+export async function loadI18n(to, from, next, { store }) {
+  try {
+    await store.dispatch('i18n/init');
+  } catch (e) {
+    console.error('Failed to initialize i18n', e); // eslint-disable-line no-console
+  }
+
+  next();
+}

package/config/router/navigation-guards/index.js

@@ -1,6 +1,14 @@
 import { install as installLoadInitialSettings } from '@shell/config/router/navigation-guards/load-initial-settings';
 import { install as installAttemptFirstLogin } from '@shell/config/router/navigation-guards/attempt-first-login';
 import { install as installAuthentication } from '@shell/config/router/navigation-guards/authentication';
+import { install as installRuntimeExtensionRoute } from '@shell/config/router/navigation-guards/runtime-extension-route';
+import { install as installI18N } from '@shell/config/router/navigation-guards/i18n';
+import { install as installProducts } from '@shell/config/router/navigation-guards/products';
+import { install as installHistory } from '@shell/config/router/navigation-guards/history';
+import { install as installClusters } from '@shell/config/router/navigation-guards/clusters';
+import { install as installHandleInstallRedirect } from '@shell/config/router/navigation-guards/install-redirect';
+import { install as installPageTitle } from '@shell/config/router/navigation-guards/page-title';
+import { install as installServerUpgradeGrowl } from '@shell/config/router/navigation-guards/server-upgrade-growl';
 
 /**
  * Install our router navigation guards. i.e. router.beforeEach(), router.afterEach()
@@ -9,7 +17,7 @@ export function installNavigationGuards(router, context) {
   // NOTE: the order of the installation matters.
   // Be intentional when adding, removing or modifying the guards that are installed.
 
-  const navigationGuardInstallers = [installLoadInitialSettings, installAttemptFirstLogin, installAuthentication];
+  const navigationGuardInstallers = [installLoadInitialSettings, installAttemptFirstLogin, installAuthentication, installProducts, installHistory, installClusters, installRuntimeExtensionRoute, installI18N, installHandleInstallRedirect, installPageTitle, installServerUpgradeGrowl];
 
   navigationGuardInstallers.forEach((installer) => installer(router, context));
 }

package/config/router/navigation-guards/install-redirect.js

@@ -0,0 +1,95 @@
+import { REPO_TYPE, REPO, CHART, VERSION } from '@shell/config/query-params';
+import { routeRequiresInstallRedirect, findMeta } from '@shell/utils/router';
+
+/**
+ * All of this is related to the original install-redirect middleware we used previously. Since removing
+ * middleware this is the closest analog since middleware used to run in beforeeach.
+ *
+ * I originally tried using mixins but the pages wouldn't render if the product didn't exist due to the way our templates/default.vue
+ * determines if a cluster is ready before rendering the child route.
+ *
+ * I personally think that we should remove this concept entirely but I'm leaving it in for completeness sake while getting through the vue3 migration.
+ */
+
+export const INSTALL_REDIRECT_META_KEY = 'installRedirect';
+
+export function install(router, context) {
+  router.beforeEach(async(to, from, next) => await handleInstallRedirect(to, from, next, context));
+}
+
+async function handleInstallRedirect(to, from, next, { store }) {
+  if (!routeRequiresInstallRedirect(to)) {
+    return next();
+  }
+
+  try {
+    const installRedirectArguments = findMeta(to, INSTALL_REDIRECT_META_KEY);
+
+    await installRedirect(store, next, installRedirectArguments);
+  } catch (e) {
+    console.error('Failed to use install-redirect', e); // eslint-disable-line no-console
+  }
+
+  next();
+}
+
+// Arguments here should be the same as the arguments from installRedirectImpl below
+export function installRedirectRouteMeta(product, chartName, defaultResourceOrRoute, install = true) {
+  return { [INSTALL_REDIRECT_META_KEY]: [...arguments] };
+}
+
+async function installRedirect(store, redirect, args) {
+  await installRedirectImpl(...args);
+
+  async function installRedirectImpl(product, chartName, defaultResourceOrRoute, install = true) {
+    const cluster = store.getters['currentCluster']?.id || 'local';
+
+    if ( store.getters['type-map/isProductActive'](product) ) {
+    // If the product is installed and there's a default resource, redirect there
+
+      if ( defaultResourceOrRoute ) {
+        if ( typeof defaultResourceOrRoute === 'object' ) {
+          return redirect(defaultResourceOrRoute);
+        }
+
+        return redirect({
+          name:   'c-cluster-product-resource',
+          params: {
+            cluster,
+            product,
+            resource: defaultResourceOrRoute
+          },
+        });
+      }
+
+    // Otherwise just let the middleware pass through
+    } else if (install) {
+    // The product is not installed, redirect to the details chart
+
+      await store.dispatch('catalog/load');
+
+      const chart = store.getters['catalog/chart']({ chartName });
+
+      if ( chart ) {
+        return redirect({
+          name:   'c-cluster-apps-charts-chart',
+          params: { cluster },
+          query:  {
+            [REPO_TYPE]: chart.repoType,
+            [REPO]:      chart.repoName,
+            [CHART]:     chart.chartName,
+            [VERSION]:   chart.versions[0].version
+          },
+        });
+      } else {
+      // The chart's not available
+        store.dispatch('loadingError', `Chart not found for ${ product }`);
+      }
+    } else {
+      return redirect({
+        name:   'c-cluster-explorer',
+        params: { cluster },
+      });
+    }
+  }
+}

package/config/router/navigation-guards/load-initial-settings.js

@@ -1,7 +1,7 @@
 import { fetchInitialSettings } from '@shell/utils/settings';
 
 export function install(router, context) {
-  router.beforeEach((to, from, next) => loadInitialSettings(to, from, next, context));
+  router.beforeEach(async(to, from, next) => await loadInitialSettings(to, from, next, context));
 }
 
 export async function loadInitialSettings(to, from, next, { store }) {

package/config/router/navigation-guards/page-title.js

@@ -0,0 +1,12 @@
+import { updatePageTitle } from '@shell/utils/title';
+import { getVendor } from '@shell/config/private-label';
+
+export function install(router) {
+  router.afterEach(updatePageTitleOnChange);
+}
+
+export async function updatePageTitleOnChange(to, from) {
+  if (from?.name !== to?.name) {
+    updatePageTitle(getVendor());
+  }
+}

package/config/router/navigation-guards/products.js

@@ -0,0 +1,15 @@
+import { setProduct } from '@shell/utils/auth';
+import { applyProducts } from '@shell/store/type-map';
+
+export function install(router, context) {
+  router.beforeEach((to, from, next) => loadProducts(to, from, next, context));
+}
+
+export async function loadProducts(to, from, next, { store }) {
+  // GC should be notified of route change before any find/get request is made that might be used for that page
+  store.dispatch('gcRouteChanged', to);
+
+  await applyProducts(store, store.$plugin);
+  setProduct(store, to);
+  next();
+}

package/config/router/navigation-guards/runtime-extension-route.js

@@ -0,0 +1,31 @@
+import dynamicPluginLoader from '@shell/pkg/dynamic-plugin-loader';
+import { routeRequiresAuthentication } from '@shell/utils/router';
+
+export function install(router, context) {
+  router.beforeEach((to, from, next) => runtimeExtensionRoute(to, from, next, context));
+}
+
+export async function runtimeExtensionRoute(to, from, next, { store }) {
+  if (!routeRequiresAuthentication(to) || to.name !== '404') {
+    return next();
+  }
+
+  try {
+    // Handle the loading of dynamic plugins (Harvester) because we only want to attempt to load those plugins and routes if we first couldn't find a page.
+    // We should probably get rid of this concept entirely and just load plugins at the start.
+    await store.dispatch('loadManagement');
+    const newLocation = await dynamicPluginLoader.check({ route: { path: window.location.pathname }, store });
+
+    // If we have a new location, double check that it's actually valid
+    const resolvedRoute = newLocation?.path ? store.app.router.resolve({ path: newLocation.path.replace(/^\/{0,1}dashboard/, '') }) : null;
+
+    if (resolvedRoute?.route.matched.length) {
+      // Note - don't use `redirect` or `store.app.route` (breaks feature by failing to run middleware in default layout)
+      return next(resolvedRoute.resolved.path);
+    }
+  } catch (e) {
+    console.error('Failed to load harvester', e); // eslint-disable-line no-console
+  }
+
+  next();
+}

package/config/router/navigation-guards/server-upgrade-growl.js

@@ -0,0 +1,19 @@
+import { UPGRADED, _FLAGGED, _UNFLAG } from '@shell/config/query-params';
+
+export function install(router, context) {
+  router.afterEach((to, from) => renderServerUpgradeGrowl(to, from, { router, ...context }));
+}
+
+export async function renderServerUpgradeGrowl(to, from, { router, store }) {
+  const upgraded = to.query[UPGRADED] === _FLAGGED;
+
+  if ( upgraded ) {
+    router.applyQuery({ [UPGRADED]: _UNFLAG });
+
+    store.dispatch('growl/success', {
+      title:   store.getters['i18n/t']('serverUpgrade.title'),
+      message: store.getters['i18n/t']('serverUpgrade.message'),
+      timeout: 0,
+    });
+  }
+}

package/config/router/routes.js

@@ -1,10 +1,21 @@
 import { NAME as APPS } from '@shell/config/product/apps';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
 import { NAME as MANAGER } from '@shell/config/product/manager';
-import { CAPI, MANAGEMENT } from '@shell/config/types';
+import { CAPI, MANAGEMENT, BACKUP_RESTORE, CIS } from '@shell/config/types';
 import { NAME as MCAPPS, NAME as LEGACY } from '@shell/config/product/multi-cluster-apps';
 import { NAME as AUTH } from '@shell/config/product/auth';
 
+// All these imports are related to the install-redirect.js navigation guard.
+import { installRedirectRouteMeta } from 'config/router/navigation-guards/install-redirect';
+import { NAME as BACKUP_NAME, CHART_NAME as BACKUP_CHART_NAME } from '@shell/config/product/backup';
+import { NAME as CIS_NAME, CHART_NAME as CIS_CHART_NAME } from '@shell/config/product/cis';
+import { NAME as GATEKEEPER_NAME, CHART_NAME as GATEKEEPER_CHART_NAME } from '@shell/config/product/gatekeeper';
+import { NAME as ISTIO_NAME, CHART_NAME as ISTIO_CHART_NAME } from '@shell/config/product/istio';
+import { NAME as LOGGING_NAME, CHART_NAME as LOGGING_CHART_NAME } from '@shell/config/product/logging';
+import { NAME as MONITORING_NAME, CHART_NAME as MONITORING_CHART_NAME } from '@shell/config/product/monitoring';
+import { NAME as NEUVECTOR_NAME, CHART_NAME as NEUVECTOR_CHART_NAME } from '@shell/config/product/neuvector';
+import { NAME as LONGHORN_NAME, CHART_NAME as LONGHORN_CHART_NAME } from '@shell/config/product/longhorn';
+
 const interopDefault = (promise) => promise.then((page) => page.default || page);
 
 /**
@@ -14,11 +25,12 @@ const interopDefault = (promise) => promise.then((page) => page.default || page)
 export default [
   {
     path:      '/',
-    component: () => interopDefault(import('@shell/components/templates/default.vue')),
+    component: () => interopDefault(import('@shell/pages/index.vue')),
+    name:      'index',
     meta:      { requiresAuthentication: true },
     children:  [
       {
-        path:      '',
+        path:      '/',
         component: () => interopDefault(import('@shell/pages/index.vue')),
         name:      'index'
       },
@@ -30,7 +42,7 @@ export default [
     name:      'fail-whale'
   },
   {
-    path:      '',
+    path:      '/',
     component: () => interopDefault(import('@shell/components/templates/blank.vue')),
     name:      'blank',
     meta:      { requiresAuthentication: true },
@@ -38,7 +50,7 @@ export default [
     ]
   },
   {
-    path:      '',
+    path:      '/',
     component: () => interopDefault(import('@shell/components/templates/home.vue')),
     meta:      { requiresAuthentication: true },
     children:  [
@@ -55,7 +67,7 @@ export default [
     ]
   },
   {
-    path:      '',
+    path:      '/',
     component: () => interopDefault(import('@shell/components/templates/plain.vue')),
     name:      'plain',
     meta:      { requiresAuthentication: true },
@@ -118,14 +130,14 @@ export default [
     ]
   },
   {
-    path:      '',
+    path:      '/',
     component: () => interopDefault(import('@shell/components/templates/standalone.vue')),
     name:      'standalone',
     children:  [
     ]
   },
   {
-    path:      '',
+    path:      '/',
     component: () => interopDefault(import('@shell/components/templates/unauthenticated.vue')),
     name:      'unauthenticated',
     children:  [
@@ -151,7 +163,7 @@ export default [
     ]
   },
   {
-    path:      '',
+    path:      '/',
     component: () => interopDefault(import('@shell/components/templates/default.vue')),
     name:      'default',
     meta:      { requiresAuthentication: true },
@@ -192,25 +204,27 @@ export default [
         component: () => interopDefault(import('@shell/pages/c/_cluster/explorer/index.vue')),
         name:      'c-cluster-explorer'
       }, {
-        path:      '/c/:cluster/backup',
-        component: () => interopDefault(import('@shell/pages/c/_cluster/backup/index.vue')),
-        name:      'c-cluster-backup'
+        path: '/c/:cluster/backup',
+        name: 'c-cluster-backup',
+        meta: { ...installRedirectRouteMeta(BACKUP_NAME, BACKUP_CHART_NAME, BACKUP_RESTORE.BACKUP) }
       }, {
-        path:      '/c/:cluster/cis',
-        component: () => interopDefault(import('@shell/pages/c/_cluster/cis/index.vue')),
-        name:      'c-cluster-cis'
+        path: '/c/:cluster/cis',
+        name: 'c-cluster-cis',
+        meta: { ...installRedirectRouteMeta(CIS_NAME, CIS_CHART_NAME, CIS.CLUSTER_SCAN) }
       }, {
         path:      '/c/:cluster/fleet',
         component: () => interopDefault(import('@shell/pages/c/_cluster/fleet/index.vue')),
-        name:      'c-cluster-fleet'
+        name:      'c-cluster-fleet',
       }, {
         path:      '/c/:cluster/gatekeeper',
         component: () => interopDefault(import('@shell/pages/c/_cluster/gatekeeper/index.vue')),
-        name:      'c-cluster-gatekeeper'
+        name:      'c-cluster-gatekeeper',
+        meta:      { ...installRedirectRouteMeta(GATEKEEPER_NAME, GATEKEEPER_CHART_NAME) }
       }, {
         path:      '/c/:cluster/istio',
         component: () => interopDefault(import('@shell/pages/c/_cluster/istio/index.vue')),
-        name:      'c-cluster-istio'
+        name:      'c-cluster-istio',
+        meta:      { ...installRedirectRouteMeta(ISTIO_NAME, ISTIO_CHART_NAME) }
       }, {
         path: '/c/:cluster/legacy',
         redirect(to) {
@@ -228,11 +242,13 @@ export default [
       }, {
         path:      '/c/:cluster/logging',
         component: () => interopDefault(import('@shell/pages/c/_cluster/logging/index.vue')),
-        name:      'c-cluster-logging'
+        name:      'c-cluster-logging',
+        meta:      { ...installRedirectRouteMeta(LOGGING_NAME, LOGGING_CHART_NAME) }
       }, {
         path:      '/c/:cluster/longhorn',
         component: () => interopDefault(import('@shell/pages/c/_cluster/longhorn/index.vue')),
-        name:      'c-cluster-longhorn'
+        name:      'c-cluster-longhorn',
+        meta:      { ...installRedirectRouteMeta(LONGHORN_NAME, LONGHORN_CHART_NAME) }
       }, {
         path: '/c/:cluster/manager',
         redirect(to) {
@@ -262,7 +278,8 @@ export default [
       }, {
         path:      '/c/:cluster/monitoring',
         component: () => interopDefault(import('@shell/pages/c/_cluster/monitoring/index.vue')),
-        name:      'c-cluster-monitoring'
+        name:      'c-cluster-monitoring',
+        meta:      { ...installRedirectRouteMeta(MONITORING_NAME, MONITORING_CHART_NAME) }
       }, {
 
         path:      '/c/:cluster/manager/jwt.authentication',
@@ -272,7 +289,8 @@ export default [
 
         path:      '/c/:cluster/neuvector',
         component: () => interopDefault(import('@shell/pages/c/_cluster/neuvector/index.vue')),
-        name:      'c-cluster-neuvector'
+        name:      'c-cluster-neuvector',
+        meta:      { ...installRedirectRouteMeta(NEUVECTOR_NAME, NEUVECTOR_CHART_NAME, undefined, false) }
       }, {
         path:      '/c/:cluster/apps/charts',
         component: () => interopDefault(import('@shell/pages/c/_cluster/apps/charts/index.vue')),
@@ -484,4 +502,12 @@ export default [
         component: () => interopDefault(import('@shell/pages/c/_cluster/_product/_resource/_namespace/_id.vue')),
         name:      'c-cluster-product-resource-namespace-id'
       }]
-  }];
+  },
+  {
+    path:      '/:catchAll(.*)*',
+    name:      '404',
+    component: () => interopDefault(import('@shell/pages/404.vue')),
+    meta:      { requiresAuthentication: true },
+  },
+
+];

package/config/settings.ts

@@ -108,7 +108,7 @@ export const SETTING = {
   USER_LAST_LOGIN_DEFAULT:              'user-last-login-default',
   DISABLE_INACTIVE_USER_AFTER:          'disable-inactive-user-after',
   DELETE_INACTIVE_USER_AFTER:           'delete-inactive-user-after',
-};
+} as const;
 
 // These are the settings that are allowed to be edited via the UI
 export const ALLOWED_SETTINGS: GlobalSetting = {

package/config/store.js

@@ -1,7 +1,4 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-
-Vue.use(Vuex);
+import { createStore } from 'vuex';
 
 const VUEX_PROPERTIES = ['state', 'getters', 'actions', 'mutations'];
 
@@ -77,7 +74,7 @@ let store = {};
 
 // extendStore
 export const extendStore = store instanceof Function ? store : () => {
-  return new Vuex.Store(Object.assign({ strict: (process.env.NODE_ENV !== 'production') }, store));
+  return createStore(Object.assign({ strict: (process.env.NODE_ENV !== 'production') }, store));
 };
 
 function normalizeRoot(moduleData, filePath) {

package/config/types.js

@@ -93,6 +93,24 @@ export const WORKLOAD_TYPES = {
   REPLICATION_CONTROLLER: 'replicationcontroller',
 };
 
+export const WORKLOAD_TYPE_TO_KIND_MAPPING = {
+  // Each deployment creates a replicaset and the metrics are published for a replicaset.
+  [WORKLOAD_TYPES.DEPLOYMENT]:             'ReplicaSet',
+  [WORKLOAD_TYPES.CRON_JOB]:               'CronJob',
+  [WORKLOAD_TYPES.DAEMON_SET]:             'DaemonSet',
+  [WORKLOAD_TYPES.JOB]:                    'Job',
+  [WORKLOAD_TYPES.STATEFUL_SET]:           'StatefulSet',
+  [WORKLOAD_TYPES.REPLICA_SET]:            'ReplicaSet',
+  [WORKLOAD_TYPES.REPLICATION_CONTROLLER]: 'ReplicationController',
+};
+
+export const METRICS_SUPPORTED_KINDS = [
+  WORKLOAD_TYPES.DAEMON_SET,
+  WORKLOAD_TYPES.REPLICA_SET,
+  WORKLOAD_TYPES.STATEFUL_SET,
+  WORKLOAD_TYPES.DEPLOYMENT
+];
+
 const {
   DAEMON_SET, CRON_JOB, JOB, ...scalableWorkloads
 } = WORKLOAD_TYPES;