dashboard-shell-shell 1.0.121 → 1.0.1000000081

package/components/rancherSortableTable/sorting.js

@@ -0,0 +1,129 @@
+import { sortBy } from '@shell/utils/sort';
+import { uniq } from '@shell/utils/array';
+
+/**
+ * Always sort by something, this is the best guess on properties
+ *
+ * Can be overriden
+ */
+const DEFAULT_MANDATORY_SORT = ['nameSort', 'id'];
+
+export default {
+  computed: {
+    sortFields() {
+      let fromGroup = ( this.groupBy ? this.groupSort || this.groupBy : null) || [];
+      let fromColumn = [];
+
+      const column = (this.columns || this.headers).find((x) => x && x.name && x.name.toLowerCase() === this.sortBy.toLowerCase());
+
+      if ( this.sortBy && column && column.sort ) {
+        fromColumn = column.sort;
+      }
+
+      if ( !Array.isArray(fromGroup) ) {
+        fromGroup = [fromGroup];
+      }
+
+      if ( !Array.isArray(fromColumn) ) {
+        fromColumn = [fromColumn];
+      }
+
+      // return the sorting based on grouping, user selection and fallback
+      return uniq([...fromGroup, ...fromColumn].concat(...(this.mandatorySort || DEFAULT_MANDATORY_SORT)));
+    },
+
+    arrangedRows() {
+      if (this.externalPaginationEnabled) {
+        return;
+      }
+
+      let key;
+
+      // Why is sortGeneration needed when we have sortGenerationFn?
+      // 1. sortGenerationFn is called when this fn is kicked off and returns latest and greatest string (given things like namespace)
+      // 2. it can be kicked off with stale rows... which is then stored against latest string
+      // 3. when updates rows comes through... sortGenerationFn returns same string
+      // 4. we therefor think nothing has changed and return old, stale rows
+      // This is avoided by outside storage of sortGeneration against rows
+      // (it would be nice to have that hash on the rows object itself, but it gets messy)
+      const sortGenerationKey = this.sortGeneration || this.sortGenerationFn?.apply(this);
+
+      if ( sortGenerationKey) {
+        key = `${ sortGenerationKey }/${ this.rows.length }/${ this.descending }/${ this.sortFields.join(',') }`;
+        if ( this.cacheKey === key ) {
+          return this.cachedRows;
+        }
+      }
+
+      const out = sortBy(this.rows, this.sortFields, this.descending);
+
+      if ( key ) {
+        this.cacheKey = key;
+        this.cachedRows = out;
+      }
+
+      return out;
+    },
+  },
+
+  data() {
+    let sortBy = null;
+
+    this._defaultSortBy = this.defaultSortBy;
+
+    // Try to find a reasonable default sort
+    if ( !this._defaultSortBy ) {
+      const markedColumn = this.headers.find((x) => !!x.defaultSort);
+      const nameColumn = this.headers.find( (x) => x.name === 'name');
+
+      if ( markedColumn ) {
+        this._defaultSortBy = markedColumn.name;
+      } else if ( nameColumn ) {
+        // Use the name column if there is one
+        this._defaultSortBy = nameColumn.name;
+      } else {
+        // The first column that isn't state
+        const first = this.headers.filter( (x) => x.name !== 'state' )[0];
+
+        if ( first ) {
+          this._defaultSortBy = first.name;
+        } else {
+          // I give up
+          this._defaultSortBy = 'id';
+        }
+      }
+    }
+
+    // If the sort column doesn't exist or isn't specified, use default
+    if ( !sortBy || !this.headers.find((x) => x.name === sortBy ) ) {
+      sortBy = this._defaultSortBy;
+    }
+
+    return {
+      sortBy,
+      descending: false,
+      cachedRows: null,
+      cacheKey:   null,
+    };
+  },
+
+  methods: {
+    changeSort(sort, desc) {
+      this.sortBy = sort;
+      this.descending = desc;
+
+      // Always go back to the first page when the sort is changed
+      this.setPage(1);
+    },
+  },
+
+  watch: {
+    sortFields() {
+      this.debouncedPaginationChanged();
+    },
+
+    descending() {
+      this.debouncedPaginationChanged();
+    }
+  }
+};

package/components/templates/blank.vue

@@ -9,7 +9,10 @@ export default {
 </script>
 
 <template>
-  <main class="main-layout">
+  <main
+    class="main-layout"
+    :aria-label="t('layouts.blank')"
+  >
     <router-view :key="$route.path" />
 
     <Inactivity />

package/components/templates/default.vue

@@ -7,6 +7,8 @@ import {
 } from '@shell/store/prefs';
 import ActionMenu from '@shell/components/ActionMenu';
 import GrowlManager from '@shell/components/GrowlManager';
+import ModalManager from '@shell/components/ModalManager';
+import SlideInPanelManager from '@shell/components/SlideInPanelManager';
 import WindowManager from '@shell/components/nav/WindowManager';
 import PromptRemove from '@shell/components/PromptRemove';
 import PromptRestore from '@shell/components/PromptRestore';
@@ -39,6 +41,8 @@ export default {
     Header,
     ActionMenu,
     GrowlManager,
+    ModalManager,
+    SlideInPanelManager,
     WindowManager,
     FixedBanner,
     AwsComplianceBanner,
@@ -198,6 +202,7 @@ export default {
       <main
         v-if="clusterAndRouteReady"
         class="main-layout"
+        :aria-label="t('layouts.default')"
       >
         <router-view
           :key="$route.path"
@@ -208,6 +213,7 @@ export default {
         <PromptRestore />
         <AssignTo />
         <PromptModal />
+        <ModalManager />
         <button
           v-if="noLocaleShortcut"
           v-shortkey.once="['shift','l']"
@@ -235,6 +241,7 @@ export default {
       <main
         v-else-if="unmatchedRoute"
         class="main-layout"
+        :aria-label="t('layouts.default')"
       >
         <router-view
           :key="$route.path"
@@ -257,6 +264,7 @@ export default {
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
+    <SlideInPanelManager />
     <Inactivity />
     <DraggableZone ref="draggableZone" />
   </div>

package/components/templates/home.vue

@@ -3,6 +3,8 @@ import Header from '@shell/components/nav/Header';
 import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
 import GrowlManager from '@shell/components/GrowlManager';
+import ModalManager from '@shell/components/ModalManager';
+import SlideInPanelManager from '@shell/components/SlideInPanelManager';
 import { mapPref, THEME_SHORTCUT } from '@shell/store/prefs';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
@@ -17,6 +19,8 @@ export default {
     Header,
     FixedBanner,
     GrowlManager,
+    ModalManager,
+    SlideInPanelManager,
     AzureWarning,
     AwsComplianceBanner,
     Inactivity,
@@ -58,6 +62,7 @@ export default {
     <AwsComplianceBanner />
     <AzureWarning />
     <PromptModal />
+    <ModalManager />
     <div
       class="dashboard-content"
       :class="{'dashboard-padding-left': showTopLevelMenu}"
@@ -67,7 +72,10 @@ export default {
         :simple="true"
       />
 
-      <main class="main-layout">
+      <main
+        class="main-layout"
+        :aria-label="t('layouts.home')"
+      >
         <router-view
           :key="$route.path"
           class="outlet"
@@ -76,6 +84,7 @@ export default {
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
+    <SlideInPanelManager />
     <button
       v-if="themeShortcut"
       v-shortkey.once="['shift','t']"

package/components/templates/plain.vue

@@ -8,6 +8,8 @@ import IndentedPanel from '@shell/components/IndentedPanel';
 import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
 import GrowlManager from '@shell/components/GrowlManager';
+import ModalManager from '@shell/components/ModalManager';
+import SlideInPanelManager from '@shell/components/SlideInPanelManager';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
@@ -26,6 +28,8 @@ export default {
     PromptModal,
     FixedBanner,
     GrowlManager,
+    ModalManager,
+    SlideInPanelManager,
     AwsComplianceBanner,
     AzureWarning,
     Inactivity
@@ -68,7 +72,10 @@ export default {
       :class="{'dashboard-padding-left': showTopLevelMenu}"
     >
       <Header :simple="true" />
-      <main class="main-layout">
+      <main
+        class="main-layout"
+        :aria-label="t('layouts.plain')"
+      >
         <IndentedPanel class="pt-20">
           <router-view
             :key="$route.path"
@@ -78,6 +85,7 @@ export default {
         <ActionMenu />
         <PromptRemove />
         <PromptModal />
+        <ModalManager />
         <AssignTo />
         <button
           v-if="themeShortcut"
@@ -96,6 +104,7 @@ export default {
 
     <FixedBanner :footer="true" />
     <GrowlManager />
+    <SlideInPanelManager />
     <Inactivity />
   </div>
 </template>

package/composables/focusTrap.ts

@@ -46,12 +46,12 @@ export function useBasicSetupFocusTrap(focusElement: string | HTMLElement, opts:
   });
 }
 
-export function useWatcherBasedSetupFocusTrapWithDestroyIncluded(watchVar:any, focusElement: string | HTMLElement, opts:any = DEFAULT_FOCUS_TRAP_OPTS) {
+export function useWatcherBasedSetupFocusTrapWithDestroyIncluded(watchVar:any, focusElement: string | HTMLElement, opts:any = DEFAULT_FOCUS_TRAP_OPTS, useUnmountHook = false) {
   let focusTrapInstance: FocusTrap;
   let focusEl;
 
   watch(watchVar, (neu) => {
-    if (neu) {
+    if (neu && !focusTrapInstance) {
       nextTick(() => {
         focusEl = typeof focusElement === 'string' ? document.querySelector(focusElement) as HTMLElement : focusElement;
 
@@ -61,8 +61,16 @@ export function useWatcherBasedSetupFocusTrapWithDestroyIncluded(watchVar:any, f
           focusTrapInstance.activate();
         });
       });
-    } else if (!neu && Object.keys(focusTrapInstance).length) {
+    } else if (!neu && Object.keys(focusTrapInstance).length && !useUnmountHook) {
       focusTrapInstance.deactivate();
     }
   });
+
+  if (useUnmountHook) {
+    onBeforeUnmount(() => {
+      if (Object.keys(focusTrapInstance).length) {
+        focusTrapInstance.deactivate();
+      }
+    });
+  }
 }

package/composables/useRuntimeFlag.ts

@@ -0,0 +1,29 @@
+import { computed } from 'vue';
+import { Store } from 'vuex';
+import semver from 'semver';
+
+import { getVersionInfo } from '@shell/utils/version';
+
+let store: Store<any>;
+
+/**
+ * Initializes runtime flags.
+ * @param vuexStore The Vuex store instance
+ */
+export const useRuntimeFlag = (vuexStore: Store<any>) => {
+  store = vuexStore;
+
+  return { featureDropdownMenu };
+};
+
+/**
+ * Check if the dropdown menu feature is enabled
+ * @returns A boolean indicating whether the dropdownMenu feature is enabled.
+ */
+const featureDropdownMenu = computed(() => {
+  const { fullVersion } = getVersionInfo(store);
+
+  const coerced = semver.coerce(fullVersion) || { version: '0.0.0' };
+
+  return semver.gte(coerced.version, '2.11.0');
+});

package/config/private-label.js

@@ -58,17 +58,22 @@ export function matches(pl) {
 }
 
 export function getVendor() {
-  if ( vendor === SETTING.PL_RANCHER_VALUE ) {
-    // Custom vendor override based on brand
-    if (brand && CUSTOM_VENDOR[brand]) {
-      return CUSTOM_VENDOR[brand];
-    }
 
-    return STANDARD_VENDOR;
-  }
 
-  return vendor;
+  return 'HCI';
 }
+// export function getVendor() {
+//   if ( vendor === SETTING.PL_RANCHER_VALUE ) {
+//     // Custom vendor override based on brand
+//     if (brand && CUSTOM_VENDOR[brand]) {
+//       return CUSTOM_VENDOR[brand];
+//     }
+
+//     return STANDARD_VENDOR;
+//   }
+
+//   return vendor;
+// }
 
 export function getProduct() {
   return product;
@@ -80,13 +85,13 @@ export function setTitle() {
   if (v === 'Harvester') {
     const ico = require(`~shell/assets/images/pl/harvester.png`);
 
-    document.title = 'Harvester';
+    document.title = 'HCI';
     const link = document.createElement('link');
 
     link.hid = 'icon';
     link.rel = 'icon';
     link.type = 'image/x-icon';
-    link.hrefv = ico;
+    link.href = ico;
     const head = document.getElementsByTagName('head')[0];
 
     head.appendChild(link);

package/config/router/routes.js

@@ -23,6 +23,7 @@ const interopDefault = (promise) => promise.then((page) => page.default || page)
  */
 export default [
   {
+    name:      'root',
     path:      '/',
     component: () => interopDefault(import('@shell/pages/index.vue')),
     meta:      { requiresAuthentication: true },
@@ -275,14 +276,24 @@ export default [
         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')),
-        name:      'c-cluster-apps-charts'
-      },
-      {
-        path:      '/c/:cluster/apps/charts/install',
-        component: () => interopDefault(import('@shell/pages/c/_cluster/apps/charts/install.vue')),
-        name:      'c-cluster-apps-charts-install'
+        path:     '/c/:cluster/apps/charts',
+        children: [
+          {
+            path:      '',
+            component: () => interopDefault(import('@shell/pages/c/_cluster/apps/charts/index.vue')),
+            name:      'c-cluster-apps-charts'
+          },
+          {
+            path:      'chart',
+            component: () => interopDefault(import('@shell/pages/c/_cluster/apps/charts/chart.vue')),
+            name:      'c-cluster-apps-charts-chart',
+          },
+          {
+            path:      'install',
+            component: () => interopDefault(import('@shell/pages/c/_cluster/apps/charts/install.vue')),
+            name:      'c-cluster-apps-charts-install',
+          },
+        ]
       },
       {
         path:      '/c/:cluster/auth/config',
@@ -352,10 +363,6 @@ export default [
         path:      '/c/:cluster/settings/performance',
         component: () => interopDefault(import('@shell/pages/c/_cluster/settings/performance.vue')),
         name:      'c-cluster-settings-performance'
-      }, {
-        path:      '/c/:cluster/apps/charts/chart',
-        component: () => interopDefault(import('@shell/pages/c/_cluster/apps/charts/chart.vue')),
-        name:      'c-cluster-apps-charts-chart'
       }, {
         path:      '/c/:cluster/auth/group.principal/assign-edit',
         component: () => interopDefault(import('@shell/pages/c/_cluster/auth/group.principal/assign-edit.vue')),
@@ -363,7 +370,8 @@ export default [
       }, {
         path:      '/c/:cluster/auth/user.retention',
         component: () => interopDefault(import('@shell/pages/c/_cluster/auth/user.retention/index.vue')),
-        name:      'c-cluster-auth-user.retention'
+        name:      'c-cluster-auth-user.retention',
+        meta:      { nav: '/c/:cluster/auth/management.cattle.io.user' }
       }, {
         path:      '/c/:cluster/manager/cloudCredential/create',
         component: () => interopDefault(import('@shell/pages/c/_cluster/manager/cloudCredential/create.vue')),

package/config/store.js

@@ -27,10 +27,12 @@ let store = {};
   resolveStoreModules(require('../store/growl.js'), 'growl.js');
   resolveStoreModules(require('../store/i18n.js'), 'i18n.js');
   resolveStoreModules(require('../store/linode.js'), 'linode.js');
+  resolveStoreModules(require('../store/modal.ts'), 'modal.ts');
   resolveStoreModules(require('../store/plugins.js'), 'plugins.js');
   resolveStoreModules(require('../store/pnap.js'), 'pnap.js');
   resolveStoreModules(require('../store/prefs.js'), 'prefs.js');
   resolveStoreModules(require('../store/resource-fetch.js'), 'resource-fetch.js');
+  resolveStoreModules(require('../store/slideInPanel.ts'), 'slideInPanel.ts');
   resolveStoreModules(require('../store/type-map.js'), 'type-map.js');
   resolveStoreModules(require('../store/uiplugins.ts'), 'uiplugins.ts');
   resolveStoreModules(require('../store/wm.js'), 'wm.js');
@@ -54,10 +56,12 @@ let store = {};
       '../store/i18n.js',
       '../store/index.js',
       '../store/linode.js',
+      '../store/modal.ts',
       '../store/plugins.js',
       '../store/pnap.js',
       '../store/prefs.js',
       '../store/resource-fetch.js',
+      '../store/slideInPanel.ts',
       '../store/type-map.js',
       '../store/uiplugins.ts',
       '../store/wm.js',

package/config/table-headers.js

@@ -52,6 +52,7 @@ export const NAME = {
   getValue:      (row) => row.nameDisplay,
   sort:          ['nameSort'],
   formatter:     'LinkDetail',
+  width: 200,
   canBeVariable: true,
 };
 
@@ -161,7 +162,7 @@ export const NAMESPACE = {
   name:        'namespace',
   labelKey:    'tableHeaders.namespace',
   value:       'namespace',
-  getValue:    (row) => row.namespace,
+  getValue:    row => row && row.namespace && row.namespace.replace('harvester', 'cloud'),
   sort:        'namespace',
   dashIfEmpty: true,
 };
@@ -278,7 +279,7 @@ export const NS_SNAPSHOT_QUOTA = {
   labelKey:      'harvester.tableHeaders.totalSnapshotQuota',
   value:         'snapshotSizeQuota',
   sort:          'snapshotSizeQuota',
-  align:         'center',
+  align:         'left',
   formatter:     'Si',
   formatterOpts: {
     opts: {

package/config/uiplugins.js

@@ -148,7 +148,11 @@ function checkIncompatibility(currentVersion, requiredVersion, incompatibilityDa
  * @returns String | Boolean
  */
 export function shouldNotLoadPlugin(UIPluginResource, { rancherVersion, kubeVersion }, loadedPlugins) {
-  if (!UIPluginResource.name || !UIPluginResource.version || !UIPluginResource.endpoint) {
+  const {
+    name, version, endpoint, compressedEndpoint
+  } = UIPluginResource;
+
+  if (!name || !version || (!endpoint && !compressedEndpoint)) {
     return 'plugins.error.generic';
   }
 

package/core/plugin-routes.ts

@@ -22,123 +22,13 @@ export class PluginRoutes {
     });
   }
 
-  public addRoutes(plugin: any, newRouteInfos: RouteInfo[]) {
-    const allRoutes = [
-      ...(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
-    const newRoutes = newRouteInfos.map((ri) => ri.route);
-
-    this.forEachNestedRoutes(newRoutes, (route: RouteRecordRaw) => {
-      // Patch colliding legacy routes that start /:product
-      if (route.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 (route.name && typeof route.name === 'string') {
-          const nameParts = route.name.split('-');
-
-          // First part of the route name is the product name
-          productName = nameParts[0];
-        }
-
-        // Use the plugin name as the product, if the route does not have a name
-        productName = productName || plugin.name;
-
-        // Replace the path - removing :product and using the actual product name instead - this avoids route collisions
-        route.path = `/${ productName }${ route.path.substr(9) }`;
-        route.meta = route.meta || {};
-
-        route.meta.product = route.meta.product || productName;
-      }
-    });
-
-    this.updateMatcher(newRouteInfos, allRoutes);
-  }
-
-  private updateMatcher(newRoutes: RouteInfo[], allRoutes: RouteRecordRaw[]) {
-    // 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 to
-    // execute many times (nuxt middleware boils down to route.beforeEach). This issue was seen refreshing in a harvester cluster with a
-    // dynamically loaded cluster
-
-    if (newRoutes.length === 0) {
-      return;
-    }
-
-    const orderedPluginRoutes: RouteRecordRaw[] = [];
-
-    // 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((routeInfo: RouteInfo) => {
-      let foundParentRoute;
-
+  public addRoutes(newRouteInfos: RouteInfo[]) {
+    newRouteInfos.forEach((routeInfo) => {
       if (routeInfo.parent) {
-        foundParentRoute = this.findInNestedRoutes(allRoutes, (route: RouteRecordRaw) => route.name === routeInfo.parent);
-
-        if (foundParentRoute) {
-          foundParentRoute.children = foundParentRoute?.children || [];
-          foundParentRoute.children.unshift(routeInfo.route);
-        }
-      }
-
-      if (!foundParentRoute) {
-        orderedPluginRoutes.unshift(routeInfo.route);
-      }
-    });
-
-    this.router.clearRoutes();
-
-    const allRoutesToAdd = [...orderedPluginRoutes, ...allRoutes];
-
-    allRoutesToAdd.forEach((route) => this.router.addRoute(route));
-  }
-
-  /**
-   * 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: RouteRecordRaw[] = [],
-    fn: (route: RouteRecordRaw) => 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: RouteRecordRaw[] = [],
-    fn: (route: RouteRecordRaw) => boolean
-  ): RouteRecordRaw | undefined {
-    let found: RouteRecordRaw | undefined;
-
-    this.forEachNestedRoutes(routes, (route) => {
-      if (fn(route)) {
-        found = route;
-
-        return true;
+        this.router.addRoute(routeInfo.parent, routeInfo.route);
+      } else {
+        this.router.addRoute(routeInfo.route);
       }
     });
-
-    return found;
   }
 }

package/core/plugins.js

@@ -344,7 +344,7 @@ export default function(context, inject, vueApp) {
         });
 
         // Routes
-        pluginRoutes.addRoutes(plugin, plugin.routes);
+        pluginRoutes.addRoutes(plugin.routes);
 
         // Validators
         Object.keys(plugin.validators).forEach((key) => {