@rancher/shell 0.3.23 → 0.3.25

package/components/nav/Type.vue

@@ -1,6 +1,7 @@
 <script>
 import Favorite from '@shell/components/nav/Favorite';
 import { FAVORITE, USED } from '@shell/store/type-map';
+import { linkActiveClass } from '@shell/config/router';
 
 const showFavoritesFor = [FAVORITE, USED];
 
@@ -27,12 +28,65 @@ export default {
 
   data() {
     return {
-      near: false,
-      over: false,
+      near:     false,
+      over:     false,
+      menuPath: this.type.route ? this.$router.resolve(this.type.route)?.route?.path : undefined,
+      linkActiveClass
     };
   },
 
   computed: {
+    isCurrent() {
+      // This is required to avoid scenarios where fragments break vue routers location matching
+      // For example, the following fails
+      // Curruent Path /c/c-m-hzqf4tqt/explorer/members#project-membership
+      // Menu Path /c/c-m-hzqf4tqt/explorer/members
+      // vue-router exact-path="true" fixes this (https://v3.router.vuejs.org/api/#exact-path),
+      // but fails when the the current path is a child (for instance a resource detail page)
+
+      // Scenarios to consider
+      // - Fragement world
+      //   Curruent Path /c/c-m-hzqf4tqt/explorer/members#project-membership
+      //   Menu Path /c/c-m-hzqf4tqt/explorer/members
+      // - Similar current paths
+      //   /c/c-m-hzqf4tqt/fleet/fleet.cattle.io.bundlenamespacemapping
+      //   /c/c-m-hzqf4tqt/fleet/fleet.cattle.io.bundle
+      // - Other menu items that appear in current menu item
+      //   /c/c-m-hzqf4tqt/fleet
+      //   /c/c-m-hzqf4tqt/fleet/management.cattle.io.fleetworkspace
+
+      // If there's no hash the n-link will determine it's linkActiveClass correctly, so avoid this faff
+      const invalidHash = !this.$route.hash;
+      // Lets be super safe
+      const invalidProps = !this.menuPath || !this.$route.path;
+
+      if (invalidHash || invalidProps) {
+        return false;
+      }
+
+      // We're kind of, but in a fixing way, copying n-link --> vue-router link see vue-router/src/components/link.js & vue-router/src/util/route.js
+      // We're only going to compare the path and ignore query and fragment
+
+      if (this.type.exact) {
+        return this.$route.path === this.menuPath;
+      }
+
+      const currentPath = this.$route.path.split('/');
+      const menuPath = this.menuPath.split('/');
+
+      if (menuPath.length > currentPath.length) {
+        return false;
+      }
+
+      for (let i = 0; i < menuPath.length; i++) {
+        if (menuPath[i] !== currentPath[i]) {
+          return false;
+        }
+      }
+
+      return true;
+    },
+
     showFavorite() {
       return ( this.type.mode && this.near && showFavoritesFor.includes(this.type.mode) );
     },
@@ -40,6 +94,10 @@ export default {
     showCount() {
       return typeof this.type.count !== 'undefined';
     },
+
+    namespaceIcon() {
+      return this.type.namespaced;
+    },
   },
 
   methods: {
@@ -76,7 +134,7 @@ export default {
     :to="type.route"
     tag="li"
     class="child nav-type"
-    :class="{'root': isRoot, [`depth-${depth}`]: true}"
+    :class="{'root': isRoot, [`depth-${depth}`]: true, [linkActiveClass]: isCurrent}"
     :exact="type.exact"
   >
     <a
@@ -102,6 +160,10 @@ export default {
           v-if="showFavorite"
           :resource="type.name"
         />
+        <i
+          v-if="namespaceIcon"
+          class="icon icon-namespace namespaced"
+        />
         {{ type.count }}
       </span>
     </a>
@@ -127,13 +189,16 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+  .namespaced {
+    margin-right: 4px;
+  }
+
   .child {
     margin: 0 var(--outline) 0 0;
 
     .label {
       align-items: center;
       grid-area: label;
-      display: flex;
       overflow: hidden;
       text-overflow: ellipsis;
 
@@ -166,6 +231,7 @@ export default {
       text-overflow: ellipsis;
       white-space: nowrap;
       color: var(--body-text);
+      height: 33px;
 
       &:hover {
         background: var(--nav-hover);
@@ -181,26 +247,40 @@ export default {
       grid-area: favorite;
       font-size: 12px;
       position: relative;
+      vertical-align: middle;
+      margin-right: 4px;
     }
 
     .count {
-      grid-area: count;
       font-size: 12px;
-      text-align: right;
       justify-items: center;
       padding-right: 4px;
+      display: flex;
+      align-items: center;
     }
 
     &.nav-type:not(.depth-0) {
       A {
-        font-size: 13px;
-        padding: 5.5px 7px 5.5px 10px;
+        padding-left: 16px;
       }
 
       ::v-deep .label I {
         padding-right: 2px;
       }
     }
+
+    &.nav-type:is(.depth-1) {
+      A {
+        font-size: 13px;
+        padding-left: 23px;
+      }
+    }
+
+    &.nav-type:not(.depth-0):not(.depth-1) {
+      A {
+        padding-left: 14px;
+      }
+    }
   }
 
 </style>

package/config/home-links.js

@@ -26,7 +26,7 @@ const DEFAULT_LINKS = [
   },
   {
     key:     'getStarted',
-    value:   '/docs/getting-started',
+    value:   'https://ranchermanager.docs.rancher.com/getting-started/overview',
     enabled: true,
   },
 ];

package/config/product/istio.js

@@ -1,4 +1,4 @@
-import { AGE, NAME as NAME_HEADER, STATE } from '@shell/config/table-headers';
+import { AGE, NAME as NAME_HEADER, NAMESPACE as NAMESPACE_HEADER, STATE } from '@shell/config/table-headers';
 import { ISTIO } from '@shell/config/types';
 import { DSL, IF_HAVE } from '@shell/store/type-map';
 
@@ -14,9 +14,10 @@ export function init(store) {
   } = DSL(store, NAME);
 
   product({
-    ifHaveGroup: /^(.*\.)*istio\.io$/,
-    ifHave:      IF_HAVE.NOT_V1_ISTIO,
-    icon:        'istio',
+    ifHaveGroup:         /^(.*\.)*istio\.io$/,
+    ifHave:              IF_HAVE.NOT_V1_ISTIO,
+    icon:                'istio',
+    showNamespaceFilter: true,
   });
 
   virtualType({
@@ -42,7 +43,9 @@ export function init(store) {
     'networking.istio.io.envoyfilter',
     'networking.istio.io.serviceentry',
     'networking.istio.io.sidecar',
-    'networking.istio.io.workloadentrie',
+    'networking.istio.io.proxyconfig',
+    'networking.istio.io.workloadentry',
+    'networking.istio.io.workloadgroup',
   ], 'Networking');
 
   basicType([
@@ -58,9 +61,16 @@ export function init(store) {
     'security.istio.io.requestauthentication',
   ], 'Security');
 
+  basicType([
+    'install.istio.io.istiooperator',
+    'telemetry.istio.io.telemetry',
+    'extensions.istio.io.wasmplugin',
+  ], 'Advanced');
+
   headers(ISTIO.VIRTUAL_SERVICE, [
     STATE,
     NAME_HEADER,
+    NAMESPACE_HEADER,
     {
       name:      'gateways',
       label:     'Gateways',

package/config/router.js

@@ -6,13 +6,15 @@ import scrollBehavior from '../utils/router.scrollBehavior.js';
 
 const emptyFn = () => {};
 
+export const linkActiveClass = 'nuxt-link-active';
+
 Vue.use(Router);
 
 export const routerOptions = {
   mode:                 'history',
   // Note: router base comes from the ROUTER_BASE env var
   base:                 process.env.routerBase || '/',
-  linkActiveClass:      'nuxt-link-active',
+  linkActiveClass,
   linkExactActiveClass: 'nuxt-link-exact-active',
   scrollBehavior,
 
@@ -72,10 +74,6 @@ export const routerOptions = {
     path:      '/auth/verify',
     component: () => interopDefault(import('../pages/auth/verify.vue' /* webpackChunkName: "pages/auth/verify" */)),
     name:      'auth-verify'
-  }, {
-    path:      '/docs/toc',
-    component: () => interopDefault(import('../pages/docs/toc.js' /* webpackChunkName: "pages/docs/toc" */)),
-    name:      'docs-toc'
   }, {
     path:      '/rio/mesh',
     component: () => interopDefault(import('../pages/rio/mesh.vue' /* webpackChunkName: "pages/rio/mesh" */)),
@@ -84,10 +82,6 @@ export const routerOptions = {
     path:      '/c/:cluster',
     component: () => interopDefault(import('../pages/c/_cluster/index.vue' /* webpackChunkName: "pages/c/_cluster/index" */)),
     name:      'c-cluster'
-  }, {
-    path:      '/docs/:doc?',
-    component: () => interopDefault(import('../pages/docs/_doc.vue' /* webpackChunkName: "pages/docs/_doc" */)),
-    name:      'docs-doc'
   }, {
     path:      '/c/:cluster/apps',
     component: () => interopDefault(import('../pages/c/_cluster/apps/index.vue' /* webpackChunkName: "pages/c/_cluster/apps/index" */)),

package/config/table-headers.js

@@ -993,13 +993,12 @@ export const UI_PLUGIN_CATALOG = [
     name:     'image',
     sort:     ['image'],
     labelKey: 'plugins.manageCatalog.headers.image.label',
-    value:    'deploymentImage'
+    value:    'image'
   },
   {
-    name:      'cacheState',
-    sort:      ['cacheState'],
-    labelKey:  'plugins.manageCatalog.headers.cacheState.label',
-    value:     'cacheState',
-    formatter: 'ExtensionCache'
+    name:     'repository',
+    sort:     ['repository'],
+    labelKey: 'plugins.manageCatalog.headers.repository.label',
+    value:    'repo.metadata.name'
   }
 ];

package/config/uiplugins.js

@@ -49,6 +49,7 @@ export const UI_PLUGIN_CHART_ANNOTATIONS = {
   UI_VERSION:         'catalog.cattle.io/ui-version',
   EXTENSIONS_HOST:    'catalog.cattle.io/ui-extensions-host',
   DISPLAY_NAME:       'catalog.cattle.io/display-name',
+  HIDDEN_BUILTIN:     'catalog.cattle.io/ui-hidden-builtin',
 };
 
 // Extension catalog labels

package/core/plugin-helpers.js

@@ -85,6 +85,9 @@ function checkExtensionRouteBinding($route, locationConfig, context) {
           // also handle "mode" in a separate way because it mainly depends on query params
           } else if (param === 'mode') {
             res = checkRouteMode($route, locationConfigParam);
+          } else if (param === 'resource') {
+            // Match exact resource but also allow resource of '*' to match any resource
+            res = (params[param] && locationConfigParam === '*') || locationConfigParam === params[param];
           } else if (param === 'context') {
             // Need all keys and values to match
             res = isEqual(locationConfigParam, context);

package/core/types.ts

@@ -102,7 +102,7 @@ export type Action = {
   icon?: string;
   multiple?: boolean;
   enabled?: Function | boolean;
-  invoke: (opts: ActionOpts, resources: any[]) => void | boolean | Promise<boolean>;
+  invoke: (opts: ActionOpts, resources: any[], globals?: any) => void | boolean | Promise<boolean>;
 };
 
 /** Definition of a panel (options that can be passed when defining an extension panel enhancement) */
@@ -567,3 +567,8 @@ export interface IPlugin {
    */
   DSL(store: any, productName: string): DSLReturnType;
 }
+
+// Internal interface
+// Built-in extensions may use this, but external extensions should not, as this is subject to change
+// Defined as any for now
+export type IInternal = any;

package/creators/app/files/.vscode/settings.json

@@ -10,7 +10,6 @@
     ".gitignore": true,
     ".nuxt*": true,
     ".nyc_output": true,
-    "Dockerfile": true,
     ".vscode": true,
     "LICENSE": true,
     "node_modules": true,

package/creators/pkg/init

@@ -174,8 +174,8 @@ if (addWorkflowFolder) {
   }
 
   const files = [
-    'build-extension.yml',
-    'build-container.yml'
+    'build-extension-catalog.yml',
+    'build-extension-charts.yml'
   ];
 
   files.forEach((fileName) => {

package/detail/__tests__/autoscaling.horizontalpodautoscaler.test.ts

@@ -0,0 +1,118 @@
+import { shallowMount } from '@vue/test-utils';
+import HorizontalPodAutoScaler from '@shell/detail/autoscaling.horizontalpodautoscaler/index.vue';
+
+describe('view: autoscaling.horizontalpodautoscaler', () => {
+  const mockStore = {
+    getters: {
+      'i18n/t':                  (text: string) => text,
+      t:                         (text: string) => text,
+      currentStore:              () => 'current_store',
+      'current_store/schemaFor': jest.fn(),
+      'current_store/all':       jest.fn(),
+      workspace:                 jest.fn(),
+    },
+  };
+
+  const mocks = {
+    $store:      mockStore,
+    $fetchState: { pending: false },
+    $route:      {
+      query: { AS: '' },
+      name:  {
+        endsWith: () => {
+          return false;
+        },
+      },
+    },
+  };
+
+  const value = {
+    status: {
+      currentMetrics: [
+        {
+          resource: {
+            current: {
+              averageUtilization: 8,
+              averageValue:       '11481088'
+            },
+            name: 'memory'
+          },
+          type: 'Resource'
+        },
+        {
+          resource: {
+            current: {
+              averageUtilization: 0,
+              averageValue:       '1m'
+            },
+            name: 'cpu'
+          },
+          type: 'Resource'
+        }
+      ],
+    },
+    spec: {
+      maxReplicas: 10,
+      metrics:     [
+        {
+          resource: {
+            name:   'memory',
+            target: {
+              averageUtilization: 80,
+              type:               'Utilization'
+            }
+          },
+          type: 'Resource'
+        },
+        {
+          resource: {
+            name:   'cpu',
+            target: {
+              averageUtilization: 50,
+              type:               'Utilization'
+            }
+          },
+          type: 'Resource'
+        }
+      ],
+      minReplicas:    1,
+      scaleTargetRef: {
+        apiVersion: 'apps/v1',
+        kind:       'Deployment',
+        name:       'php-apache'
+      }
+    }
+  };
+
+  const metricsValue = Object.values(value.spec.metrics);
+  const currentMetrics = Object.values(value.status.currentMetrics);
+
+  const wrapper = shallowMount(HorizontalPodAutoScaler, {
+    mocks,
+    propsData: { value },
+  });
+
+  describe.each(value.spec.metrics)('should display metrics for each resource:', (metric) => {
+    const name = metric.resource.name;
+
+    it(`${ name }:`, () => {
+      // Resource metrics
+      const resourceValue = wrapper.find(`[data-testid="resource-metrics-value-${ name }"]`);
+      const resourceName = wrapper.find(`[data-testid="resource-metrics-name-${ name }"]`);
+      const metricValue = metricsValue.find((f) => f.resource.name === name)?.resource;
+
+      // Current Metrics
+      const averageUtilization = wrapper.find(`[data-testid="current-metrics-Average Utilization-${ name }"]`);
+      const averageValue = wrapper.find(`[data-testid="current-metrics-Average Value-${ name }"]`);
+      const currentResource = currentMetrics.find((f) => f.resource.name === name)?.resource.current;
+
+      // Resource metrics
+      expect(resourceValue.element.textContent).toBe(`${ metricValue?.target?.averageUtilization }`);
+      expect(resourceName.element.textContent).toBe(`${ metricValue?.name }`);
+
+      // Current Metrics
+      expect(averageUtilization.element.textContent).toBe(`${ currentResource?.averageUtilization }`);
+      expect(averageValue.element.textContent).toBe(`${ currentResource?.averageValue }`);
+    });
+  });
+});

package/detail/autoscaling.horizontalpodautoscaler/index.vue

@@ -43,7 +43,7 @@ export default {
       return metrics.map((metric) => {
         const metricValue = get(metric, camelCase(metric.type));
         const targetType = metricValue?.target?.type;
-        const currentMatch = findBy(currentMetrics, 'type', metric.type);
+        const currentMatch = findBy(currentMetrics, 'resource.name', metric.resource.name);
         const current = currentMatch ? get(currentMatch, `${ camelCase(metric.type) }.current`) : null;
         const currentMetricsKVs = [];
 
@@ -128,7 +128,7 @@ export default {
                 <label class="text-label">
                   <t k="hpa.metrics.headers.value" />:
                 </label>
-                <span>{{ metric.targetValue }}</span>
+                <span :data-testid="`resource-metrics-value-${metric.subRowContent.resourceName}`">{{ metric.targetValue }}</span>
               </div>
               <div v-if="metric.metricSource === 'Object'">
                 <div class="mb-5">
@@ -155,7 +155,7 @@ export default {
                   <label class="text-label">
                     <t k="hpa.metrics.headers.resource" />:
                   </label>
-                  <span>{{ metric.subRowContent.resourceName }}</span>
+                  <span :data-testid="`resource-metrics-name-${metric.subRowContent.resourceName}`">{{ metric.subRowContent.resourceName }}</span>
                 </div>
               </div>
             </div>
@@ -173,7 +173,7 @@ export default {
                     <label class="text-label">
                       {{ current.targetName }}:
                     </label>
-                    <span>{{ current.targetValue }}</span>
+                    <span :data-testid="`current-metrics-${current.targetName}-${metric.subRowContent.resourceName}`">{{ current.targetValue }}</span>
                   </div>
                 </div>
               </div>

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

@@ -339,9 +339,10 @@ export default {
         pool._clusterSpec = mp;
 
         return {
-          poolId:     pool.id,
-          mainRowKey: 'isFake',
+          poolId:           pool.id,
+          mainRowKey:       'isFake',
           pool,
+          availableActions: []
         };
       });
     },
@@ -361,9 +362,10 @@ export default {
       const emptyNodePools = this.allNodePools.filter((x) => x.spec.clusterName === this.value.mgmtClusterId && x.spec.quantity === 0);
 
       return emptyNodePools.map((np) => ({
-        spec:       { nodePoolName: np.id.replace('/', ':') },
-        mainRowKey: 'isFake',
-        pool:       np,
+        spec:             { nodePoolName: np.id.replace('/', ':') },
+        mainRowKey:       'isFake',
+        pool:             np,
+        availableActions: []
       }));
     },
 

package/edit/__tests__/management.cattle.io.clusterroletemplatebinding.test.ts

@@ -0,0 +1,58 @@
+/* eslint-disable jest/no-hooks */
+import { mount } from '@vue/test-utils';
+import ClusterRoleTemplateBinding from '@shell/edit/management.cattle.io.clusterroletemplatebinding.vue';
+import Banner from '@components/Banner/Banner.vue';
+import CruResource from '@shell/components/CruResource';
+
+describe('view: management.cattle.io.clusterroletemplatebinding should', () => {
+  let wrapper: any;
+
+  const stubs = {
+    ClusterPermissionsEditor: true,
+    Loading:                  true
+  };
+
+  const requiredSetup = () => ({
+    // Remove all these mocks after migration to Vue 2.7/3 due mixin logic
+    mocks: {
+      $store: {
+        getters: {
+          currentStore:              () => 'current_store',
+          'current_store/schemaFor': jest.fn(),
+          'current_store/all':       jest.fn(),
+          currentCluster:            { id: 'my-cluster' },
+          currentProduct:            { inStore: 'whatever' },
+          'i18n/t':                  (val) => val,
+          'i18n/exists':             jest.fn(),
+        },
+        dispatch: { 'management/findAll': () => ([]) }
+      },
+      $fetchState: { pending: false },
+      $route:      { query: { AS: '' } },
+      $router:     {
+        applyQuery: jest.fn(),
+        replace:    jest.fn()
+      },
+    },
+    propsData: { value: {} },
+    stubs,
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should only show one error banner', async() => {
+    const errors = ['mistake!'];
+
+    wrapper = mount(ClusterRoleTemplateBinding, { ...requiredSetup() });
+
+    const cruResourceElem = wrapper.findComponent(CruResource);
+
+    await cruResourceElem.vm.$emit('error', errors);
+
+    const bannerElems = wrapper.findAllComponents(Banner);
+
+    expect(bannerElems).toHaveLength(1);
+  });
+});

package/edit/__tests__/namespace.test.ts

@@ -25,9 +25,10 @@ describe('view Namespace should', () => {
         $router: { applyQuery: {} },
         $store:  {
           getters: {
-            'i18n/t':         jest.fn(),
-            'management/all': () => ([project]),
-            currentProduct:   jest.fn(),
+            'i18n/t':              jest.fn(),
+            'management/all':      () => ([project]),
+            currentProduct:        jest.fn(),
+            isStandaloneHarvester: false
           }
         }
       },
@@ -36,6 +37,7 @@ describe('view Namespace should', () => {
         ContainerResourceLimit: { template: '<div data-testid="limits"></div>' }, // Ensure value to be added to component
         NameNsDescription:      true,
         Tab:                    true,
+        ResourceTabs:           true
       }
     });