@rancher/shell 0.4.0 → 0.5.1

package/config/settings.ts

@@ -77,6 +77,7 @@ export const SETTING = {
   FAVICON:                              'ui-favicon',
   UI_PERFORMANCE:                       'ui-performance',
   UI_CUSTOM_LINKS:                      'ui-custom-links',
+  UI_SUPPORTED_K8S_VERSIONS:            'ui-k8s-supported-versions-range',
   /**
    * Allow the backend to force a light/dark theme. Used in non-rancher world and results in the theme used
    * both pre and post log in. If not present defaults to the usual process

package/config/store.js

@@ -40,7 +40,7 @@ let store = {};
 
   // If the environment supports hot reloading...
 
-  if (process.client && module.hot) {
+  if (module.hot) {
     // Whenever any Vuex module is updated...
     module.hot.accept([
       '../store/action-menu.js',

package/config/system-namespaces.js

@@ -12,4 +12,7 @@ export default [
   'linkerd',
   'security-scan',
   'tekton-pipelines',
+  'cis-operator-system',
+  'istio-system',
+  'longhorn-system',
 ];

package/config/table-headers.js

@@ -706,6 +706,29 @@ export const FLEET_SUMMARY = {
   width:     100,
 };
 
+export const FLEET_REPO_CLUSTER_SUMMARY = {
+  name:      'clusterSummary',
+  labelKey:  'tableHeaders.clusterResources',
+  value:     'status.resourceCounts',
+  sort:      false,
+  search:    false,
+  formatter: 'FleetClusterSummaryGraph',
+  align:     'center',
+  width:     100,
+};
+
+export const FLEET_REPO_PER_CLUSTER_STATE = {
+  name:          'perClusterState',
+  labelKey:      'tableHeaders.repoPerClusterState',
+  tooltip:       'tableHeaders.repoPerClusterStateTooltip',
+  sort:          ['stateSort', 'nameSort'],
+  width:         100,
+  default:       'unknown',
+  formatter:     'BadgeStateFormatter',
+  formatterOpts: { arbitrary: true }
+
+};
+
 export const APP_SUMMARY = {
   name:      'summary',
   labelKey:  'tableHeaders.resources',
@@ -971,6 +994,30 @@ export const FLEET_BUNDLE_TYPE = {
   width:    100,
 };
 
+export const FLEET_REPO_CLUSTERS_READY = {
+  name:     'clustersReady',
+  labelKey: 'tableHeaders.clustersReady',
+  value:    'status.readyClusters',
+  sort:     'status.readyClusters',
+  search:   false,
+};
+
+export const FLEET_REPO_TARGET = {
+  name:     'target',
+  labelKey: 'tableHeaders.target',
+  value:    'targetInfo.modeDisplay',
+  sort:     ['targetInfo.modeDisplay', 'targetInfo.cluster', 'targetInfo.clusterGroup'],
+
+};
+
+export const FLEET_REPO = {
+  name:     'repo',
+  labelKey: 'tableHeaders.repo',
+  value:    'repoDisplay',
+  sort:     'repoDisplay',
+  search:   ['spec.repo', 'status.commit'],
+};
+
 export const UI_PLUGIN_CATALOG = [
   {
     name:          'state',

package/core/plugin-routes.ts

@@ -6,20 +6,8 @@ interface RouteInfo {
   route: RouteConfig;
 }
 
-interface RouteInstallInfo {
-  plugin: string;
-  route: RouteConfig;
-}
-
-type RouteInstallHistory = {
-  [route: string]: RouteInstallInfo[]
-}
-
 export class PluginRoutes {
   router: Router;
-  pluginRoutes: RouteConfig[] = [];
-
-  replacedRoutes: RouteInstallHistory = {};
 
   constructor(router: Router) {
     this.router = router;
@@ -34,70 +22,25 @@ export class PluginRoutes {
     });
   }
 
-  // Ensure we put back any routes that the plugin that is being uninstalled added
-  public uninstall(plugin: any) {
-    // List of routes we need to restore
-    const restore: RouteInfo[] = [];
-
-    Object.keys(this.replacedRoutes).forEach((routeName) => {
-      const info = this.replacedRoutes[routeName];
-
-      for (let index = 0; index < info.length; index++) {
-        const savedRoute = info[index];
-
-        if (savedRoute.plugin === plugin.id) {
-          // The plugin that is being uninstalled replaced an existing route that we will restore
-          if (index === 0) {
-            // Need to restore the previous route, since the plugin owned the active route
-            info.shift();
-
-            restore.push({ route: savedRoute.route });
-
-            break;
-          } else {
-            // Need to update the previous item so that when it is removed, it restores the correct route
-            const previous = info[index - 1];
-
-            previous.route = savedRoute.route;
-            info.splice(index, 1);
-
-            break;
-          }
-        }
-      }
-    });
-
-    // Remove routes from pluginRoutes, update matcher (to avoid dupes when re-adding plugin routes)
-    this.pluginRoutes = this.pluginRoutes.filter((pR) => !plugin.routes.find((r: any) => pR === r.route));
-    this.updateMatcher([], [
-      ...this.pluginRoutes,
-      ...(this.router.options.routes || [])
-    ]);
-
-    // Restore appropriate routes
-    if (restore.length > 0) {
-      this.addRoutes(null, restore);
-    }
-  }
-
-  public addRoutes(plugin: any, routes: RouteInfo[]) {
+  public addRoutes(plugin: any, newRouteInfos: RouteInfo[]) {
     const allRoutes = [
-      ...this.pluginRoutes,
       ...(this.router.options.routes || [])
     ];
 
     // Need to take into account if routes are being replaced
     // Despite what the docs say, routes are not replaced, so we use a workaround
     // Remove all routes that are being replaced
-    routes.forEach((r: RouteInfo) => {
+    const newRoutes = newRouteInfos.map((ri) => ri.route);
+
+    this.forEachNestedRoutes(newRoutes, (r: RouteConfig) => {
       // Patch colliding legacy routes that start /:product
-      if (r.route.path?.startsWith('/:product')) {
+      if (r.path?.startsWith('/:product')) {
         // Legacy pattern used by extensions - routes may collide, so modify them not to
         let productName;
 
         // If the route has a name (which is always the case for the extensions we have written), use it to get the product name
-        if (r.route.name) {
-          const nameParts = r.route.name.split('-');
+        if (r.name) {
+          const nameParts = r.name.split('-');
 
           // First part of the route name is the product name
           productName = nameParts[0];
@@ -107,74 +50,40 @@ export class PluginRoutes {
         productName = productName || plugin.name;
 
         // Replace the path - removing :product and using the actual product name instead - this avoids route collisions
-        r.route.path = `/${ productName }${ r.route.path.substr(9) }`;
-        r.route.meta = r.route.meta || {};
-
-        r.route.meta.product = r.route.meta.product || productName;
-      }
-
-      // See if the route exists
-      let existing: any;
-
-      if (r.parent) {
-        const pExisting = allRoutes.findIndex((route: any) => route.name === r.parent) as any;
-        const path = `${ pExisting.path }${ r.route.path }`;
-
-        // TODO: Validate
-        existing = allRoutes.findIndex((route: any) => route.path === path);
-      } else {
-        // no parent route
-        existing = allRoutes.findIndex((route: any) => route.name === r.route.name);
-      }
-
-      if (existing >= 0) {
-        const existingRoute = allRoutes[existing];
-
-        // Store the route so we can restore it on uninstall
-        if (plugin && existingRoute?.name) {
-          if (!this.replacedRoutes[existingRoute.name]) {
-            this.replacedRoutes[existingRoute.name] = [];
-          }
-
-          this.replacedRoutes[existingRoute.name].unshift({
-            plugin: plugin.id,
-            route:  existingRoute
-          });
-        }
+        r.path = `/${ productName }${ r.path.substr(9) }`;
+        r.meta = r.meta || {};
 
-        allRoutes.splice(existing, 1);
+        r.meta.product = r.meta.product || productName;
       }
     });
 
-    this.updateMatcher(routes, allRoutes);
+    this.updateMatcher(newRouteInfos, allRoutes);
   }
 
   private updateMatcher(newRoutes: RouteInfo[], allRoutes: RouteConfig[]) {
     // Note - Always use a new router and replace the existing router's matching
-    // Using the existing router and adding routes to it will force nuxt middleware (specifically authenticated on default layout) to
+    // Using the existing router and adding routes to it will force nuxt middleware to
     // execute many times (nuxt middleware boils down to router.beforeEach). This issue was seen refreshing in a harvester cluster with a
     // dynamically loaded cluster
 
-    const pluginRoutesWithParents: any[] = [];
     const orderedPluginRoutes: any[] = [];
 
-    // separate plugin routes that have parent and not
-    newRoutes.forEach((r: any) => {
+    // separate plugin routes that have parent and not, you want to push the new routes in REVERSE order to the front of the existing list so that the order of routes specified by the extension is preserved
+    newRoutes.reverse().forEach((r: any) => {
       let foundParentRoute;
 
       if (r.parent) {
-        foundParentRoute = allRoutes.find((route) => route.name === r.parent);
+        foundParentRoute = this.findInNestedRoutes(allRoutes, (route: RouteConfig) => route.name === r.parent);
 
         if (foundParentRoute) {
-          pluginRoutesWithParents.push(r);
+          foundParentRoute.children = foundParentRoute?.children || [];
+          foundParentRoute.children.unshift(r.route);
         }
       }
 
       if (!foundParentRoute) {
-        orderedPluginRoutes.push(r.route);
+        orderedPluginRoutes.unshift(r.route);
       }
-
-      this.pluginRoutes.push(r.route);
     });
 
     const newRouter: Router = new Router({
@@ -182,12 +91,45 @@ export class PluginRoutes {
       routes: [...orderedPluginRoutes, ...allRoutes]
     });
 
-    // handle plugin routes with parent
-    pluginRoutesWithParents.forEach((r: any) => {
-      newRouter.addRoute(r.parent, r.route);
+    (this.router as any).matcher = (newRouter as any).matcher;
+  }
+
+  /**
+   * Traverse the entire tree of nested routes
+   *
+   * @param routes The routes we wish to traverse through
+   * @param fn -> Return true if you'd like to break the loop early (small)
+   * @returns {@boolean} -> Returns true if breaking early
+   */
+  private forEachNestedRoutes(routes: RouteConfig[] = [], fn: (route: RouteConfig) => boolean | undefined | void) {
+    for (let i = 0; i < routes.length; ++i) {
+      const route = routes[i];
+      const result = fn(route);
+
+      if (result || this.forEachNestedRoutes(route.children, fn)) {
+        return true;
+      }
+    }
+  }
+
+  /**
+   * Find a route that matches the criteria defined by fn.
+   *
+   * @param routes The routes we wish to search through
+   * @param fn -> Returns true if the passed in route matches the expected criteria
+   * @returns The found route or undefined
+   */
+  private findInNestedRoutes(routes: RouteConfig[] = [], fn: (route: RouteConfig) => boolean): RouteConfig | undefined {
+    let found: any;
+
+    this.forEachNestedRoutes(routes, (route) => {
+      if (fn(route)) {
+        found = route;
+
+        return true;
+      }
     });
 
-    // Typing is incorrect
-    (this.router as any).matcher = (newRouter as any).matcher;
+    return found;
   }
 }

package/core/plugin.ts

@@ -15,7 +15,6 @@ import {
   PluginRouteConfig, RegisterStore, UnregisterStore, CoreStoreSpecifics, CoreStoreConfig, OnNavToPackage, OnNavAwayFromPackage, OnLogOut
 } from './types';
 import coreStore, { coreStoreModule, coreStoreState } from '@shell/plugins/dashboard-store';
-import { registerLayout } from '@shell/initialize/layouts';
 
 export type ProductFunction = (plugin: IPlugin, store: any) => void;
 
@@ -120,12 +119,27 @@ export class Plugin implements IPlugin {
     const parent: string | undefined = hasParent ? parentOrRoute as string : undefined;
     const route: RouteConfig = hasParent ? optionalRoute as RouteConfig : parentOrRoute as RouteConfig;
 
+    let parentOverride;
+
+    if (!parent) {
+      // TODO: Inspecting the route object in the browser clearly indicates it's not a RouteConfig. The type needs to be changed or at least extended.
+      const typelessRoute: any = route;
+
+      if (typelessRoute.component?.layout) {
+        console.warn(`Layouts have been deprecated. We still have parent routes which use the same name and styling as the previous layouts. \n\nFound a component ${ typelessRoute.component.name } with the '${ typelessRoute.component.layout }' layout specified `); // eslint-disable-line no-console
+        parentOverride = typelessRoute.component.layout.toLowerCase();
+      } else {
+        console.warn(`Layouts have been deprecated. We still have parent routes which use the same name and styling as the previous layouts. You should specify a parent, we're currently setting the parent to 'default'`); // eslint-disable-line no-console
+        parentOverride = 'default';
+      }
+    }
+
     route.meta = {
       ...route?.meta,
       pkg: this.name,
     };
 
-    this.routes.push({ parent, route });
+    this.routes.push({ parent: parentOverride || parent, route });
   }
 
   private _addUIConfig(type: string, where: string, when: LocationConfig | string, config: any) {
@@ -268,14 +282,6 @@ export class Plugin implements IPlugin {
       }
 
       this.l10n[name].push(fn);
-    } else if (type === 'layouts') {
-      fn().then((component: any) => {
-        if (component.default) {
-          registerLayout(name, component.default);
-        } else {
-          console.error(`Failed to load layout ${ name } because the file didn't export a default component.`); // eslint-disable-line no-console
-        }
-      });
     } else {
       if (!this.types[type]) {
         this.types[type] = {};

package/core/plugins-loader.js

@@ -20,14 +20,12 @@ export default function({
     dynamicLoader.default($plugin);
   }
 
-  if (process.client) {
-    // The libraries we build have Vue externalised, so we need to expose Vue as a global for
-    // them to pick up - see: https://cli.vuejs.org/guide/build-targets.html#library
-    window.Vue = Vue;
+  // The libraries we build have Vue externalised, so we need to expose Vue as a global for
+  // them to pick up - see: https://cli.vuejs.org/guide/build-targets.html#library
+  window.Vue = Vue;
 
-    // Global libraries - allows us to externalise these to reduce package bundle size
-    window.$ = $;
-    window.__jszip = JSZip;
-    window.__jsyaml = jsyaml;
-  }
+  // Global libraries - allows us to externalise these to reduce package bundle size
+  window.$ = $;
+  window.__jszip = JSZip;
+  window.__jsyaml = jsyaml;
 }

package/core/plugins.js

@@ -222,9 +222,6 @@ export default function({
         promises.push(...this.removeTypeFromStore(store, 'management', Object.keys(plugin.types.models)));
       }
 
-      // Uninstall routes
-      pluginRoutes.uninstall(plugin);
-
       // Call plugin uninstall hooks
       plugin.uninstallHooks.forEach((fn) => fn(plugin, this.internal()));
 

package/creators/app/files/.gitlab-ci.yml

@@ -11,4 +11,4 @@ variables:
   IMAGE_NAMESPACE: $CI_PROJECT_NAMESPACE/$CI_PROJECT_NAME
 
 include:
-  - remote: 'https://raw.githubusercontent.com/rancher/dashboard/master/.gitlab/workflows/build-extension-catalog.gitlab-ci.yml'
+  - remote: 'https://raw.githubusercontent.com/rancher/dashboard/master/shell/scripts/.gitlab/workflows/build-extension-catalog.gitlab-ci.yml'

package/detail/fleet.cattle.io.cluster.vue

@@ -8,7 +8,7 @@ import { MANAGEMENT, FLEET } from '@shell/config/types';
 import { FLEET as FLEET_LABELS } from '@shell/config/labels-annotations';
 
 export default {
-  name: 'DetailCluster',
+  name: 'FleetDetailCluster',
 
   components: {
     Loading,
@@ -36,6 +36,8 @@ export default {
     this.allRepos = await this.$store.dispatch('management/findAll', { type: FLEET.GIT_REPO });
 
     await this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE });
+
+    await this.$store.dispatch('management/findAll', { type: FLEET.BUNDLE_DEPLOYMENT });
   },
 
   data() {
@@ -43,6 +45,13 @@ export default {
   },
 
   computed: {
+    allBundleDeployments() {
+      return this.value.bundleDeployments;
+    },
+    clusterId() {
+      return this.value?.metadata?.labels[FLEET_LABELS.CLUSTER_NAME];
+    },
+
     repos() {
       return this.allRepos.filter((x) => {
         return x.targetClusters.includes(this.value);
@@ -76,6 +85,7 @@ export default {
         :weight="19"
       >
         <FleetRepos
+          :clusterId="clusterId"
           :rows="repos"
           :schema="repoSchema"
           :paging="true"

package/detail/provisioning.cattle.io.cluster.vue

@@ -775,10 +775,10 @@ export default {
                   v-clean-html="t('resourceTable.groupLabel.notInANodePool')"
                 />
                 <div
-                  v-if="group.ref && group.ref.template"
+                  v-if="group.ref && group.ref.providerSummary"
                   class="description text-muted text-small"
                 >
-                  {{ group.ref.providerDisplay }} &ndash;  {{ group.ref.providerLocation }} / {{ group.ref.providerSize }} ({{ group.ref.providerName }})
+                  {{ group.ref.providerSummary }}
                 </div>
               </div>
               <div
@@ -880,7 +880,7 @@ export default {
                 <template v-if="group.ref.hasLink('update')">
                   <button
                     v-clean-tooltip="t('node.list.scaleDown')"
-                    :disabled="group.ref.spec.quantity < 2"
+                    :disabled="!group.ref.canScaleDownPool()"
                     type="button"
                     class="btn btn-sm role-secondary"
                     @click="toggleScaleDownModal($event, group.ref)"
@@ -1006,6 +1006,7 @@ export default {
       >
         <SortableTable
           class="snapshots"
+          :data-testid="'cluster-snapshots-list'"
           :headers="value.isRke1 ? rke1SnapshotHeaders : rke2SnapshotHeaders"
           default-sort-by="age"
           :table-actions="value.isRke1"

package/dialog/ScaleMachineDownDialog.vue

@@ -1,6 +1,6 @@
 <script>
 import { CAPI as CAPI_LABELS } from '@shell/config/labels-annotations';
-import { CAPI } from '@shell/config/types';
+import { MANAGEMENT, CAPI } from '@shell/config/types';
 import GenericPrompt from './GenericPrompt';
 
 export default {
@@ -14,30 +14,38 @@ export default {
   },
 
   async fetch() {
-    await Promise.all([
-      this.$store.dispatch('management/findAll', { type: CAPI.MACHINE_DEPLOYMENT }),
-      this.$store.dispatch('management/findAll', { type: CAPI.MACHINE })
-    ]);
+    if (this.isRke2) {
+      await Promise.all([
+        this.$store.dispatch('management/findAll', { type: CAPI.MACHINE_DEPLOYMENT }),
+        this.$store.dispatch('management/findAll', { type: CAPI.MACHINE })
+      ]);
+    } else {
+      await Promise.all([
+        this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_POOL }),
+        this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE })
+      ]);
+    }
   },
 
   data() {
-    const allToDelete = Array.isArray(this.resources) ? this.resources : [this.resources];
-    const cluster = allToDelete[0].cluster;
+    const isRke2 = this.resources[0].cluster?.isRke2;
+    const cluster = isRke2 ? this.resources[0].cluster : this.resources[0].provisioningCluster;
 
     // Not all machines can be deleted, there must always be at least one left for roles control plane and etcd
     // First ensure that at least one control plane exists... and then check from the remaining machines that at least one etcd exists
     // This isn't optimisied, there may be cases that retaining a single machine with both roles would be better than retaining two with single roles
-    const [ignoredControlPlane, safeControlePlaneMachinesToDelete] = this.deleteType('isControlPlane', allToDelete, cluster);
-    const [ignoredEtcd, safeMachinesToDelete] = this.deleteType('isEtcd', safeControlePlaneMachinesToDelete, cluster);
+    const [ignoredControlPlane, safeControlePlaneMachinesToDelete] = this.deleteType('isControlPlane', this.resources, cluster, isRke2);
+    const [ignoredEtcd, safeMachinesToDelete] = this.deleteType('isEtcd', safeControlePlaneMachinesToDelete, cluster, isRke2);
     const ignored = [ignoredControlPlane, ignoredEtcd].filter((i) => !!i);
 
     return {
       cluster,
-      allToDelete,
+      isRke2,
+      allToDelete: this.resources,
       safeMachinesToDelete,
       ignored,
-      type:   this.$store.getters['type-map/labelFor'](allToDelete[0].schema, allToDelete.length),
-      config: {
+      type:        this.$store.getters['type-map/labelFor'](this.resources[0].schema, this.resources.length),
+      config:      {
         title:       this.t('promptRemove.title'),
         applyMode:   'delete',
         applyAction: this.remove,
@@ -46,7 +54,7 @@ export default {
   },
 
   methods: {
-    deleteType(type, allToDelete, cluster) {
+    deleteType(type, allToDelete, cluster, isRke2) {
       const allToDeleteByType = allToDelete.reduce((res, m) => {
         if (m[type]) {
           res.typed.push(m);
@@ -57,7 +65,8 @@ export default {
         return res;
       }, { typed: [], others: [] });
 
-      const totalTypes = cluster.machines.filter((m) => m[type]).length;
+      const machines = isRke2 ? cluster.machines : cluster.nodes;
+      const totalTypes = machines.filter((m) => m[type]).length;
       const typesToDelete = allToDeleteByType.typed.length;
       // If we're attempting to remove all control plan machines.... ignore one
       const ignoredType = totalTypes - typesToDelete === 0 ? allToDeleteByType.typed.pop() : undefined;
@@ -67,6 +76,14 @@ export default {
     },
 
     async remove() {
+      if (!this.isRke2) {
+        await Promise.all(this.safeMachinesToDelete.map((node) => {
+          return node.norman?.doAction('scaledown');
+        }));
+
+        return;
+      }
+
       // Group machines into pools
       const poolInfo = this.safeMachinesToDelete.reduce((res, m) => {
         res.set(m.pool, res.get(m.pool) || []);
@@ -103,7 +120,7 @@ export default {
     <template slot="body">
       <div class="pl-10 pr-10 mt-20 mb-20 body">
         <div v-if="allToDelete.length === 1">
-          {{ t('promptRemove.attemptingToRemove', { type }) }} <b>{{ safeMachinesToDelete[0].name }}</b>
+          {{ t('promptRemove.attemptingToRemove', { type }) }} <b>{{ safeMachinesToDelete[0].nameDisplay }}</b>
         </div>
         <div v-else>
           {{ t('promptScaleMachineDown.attemptingToRemove', { type, count: allToDelete.length }, true) }}
@@ -115,8 +132,8 @@ export default {
           <span class="mb-20">{{ t('promptScaleMachineDown.retainedMachine1') }}</span>
           <span
             v-for="i in ignored"
-            :key="i.name"
-            v-clean-html="t('promptScaleMachineDown.retainedMachine2', { name: i.name }, true)"
+            :key="i.nameDisplay"
+            v-clean-html="t('promptScaleMachineDown.retainedMachine2', { name: i.nameDisplay }, true)"
           />
         </div>
       </div>