@rancher/shell 0.3.24 → 0.3.25

package/components/nav/TopLevelMenu.vue

@@ -1,6 +1,6 @@
 <script>
 import BrandImage from '@shell/components/BrandImage';
-import ClusterProviderIconMenu from '@shell/components/ClusterProviderIconMenu';
+import ClusterIconMenu from '@shell/components/ClusterIconMenu';
 import IconOrSvg from '../IconOrSvg';
 import { BLANK_CLUSTER } from '@shell/store/store-types.js';
 import { mapGetters } from 'vuex';
@@ -14,13 +14,14 @@ import { LEGACY } from '@shell/store/features';
 import { SETTING } from '@shell/config/settings';
 import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
 import { isRancherPrime } from '@shell/config/version';
+import Pinned from '@shell/components/nav/Pinned';
 
 export default {
-
   components: {
     BrandImage,
-    ClusterProviderIconMenu,
-    IconOrSvg
+    ClusterIconMenu,
+    IconOrSvg,
+    Pinned
   },
 
   data() {
@@ -34,7 +35,9 @@ export default {
       clusterFilter:     '',
       hasProvCluster,
       maxClustersToShow: MENU_MAX_CLUSTERS,
-      emptyCluster:      BLANK_CLUSTER
+      emptyCluster:      BLANK_CLUSTER,
+      showPinClusters:   false,
+      searchActive:      false,
     };
   },
 
@@ -56,6 +59,24 @@ export default {
       },
     },
 
+    globalBannerSettings() {
+      const settings = this.$store.getters['management/all'](MANAGEMENT.SETTING);
+      const bannerSettings = settings.find((s) => s.id === SETTING.BANNERS);
+
+      if (bannerSettings) {
+        const parsed = JSON.parse(bannerSettings.value);
+        const {
+          showFooter, showHeader, bannerFooter, bannerHeader
+        } = parsed;
+
+        return {
+          headerFont: showHeader === 'true' ? this.pxToEm(bannerHeader.fontSize) : '0px',
+          footerFont: showFooter === 'true' ? this.pxToEm(bannerFooter.fontSize) : '0px'
+        };
+      }
+
+      return undefined;
+    },
     legacyEnabled() {
       return this.features(LEGACY);
     },
@@ -95,7 +116,9 @@ export default {
           badge:           x.badge,
           isLocal:         x.isLocal,
           isHarvester:     x.isHarvester,
-          pinned:          true,
+          pinned:          x.pinned,
+          pin:             () => x.pin(),
+          unpin:           () => x.unpin()
         };
       });
     },
@@ -107,13 +130,38 @@ export default {
 
       const sorted = sortBy(out, ['ready:desc', 'label']);
 
+      if (search) {
+        this.showPinClusters = false;
+        this.searchActive = !sorted.length > 0;
+
+        return sorted;
+      }
+      this.showPinClusters = true;
+      this.searchActive = false;
+
       if (sorted.length >= this.maxClustersToShow) {
-        return sorted.slice(0, this.maxClustersToShow);
+        const sortedPinOut = sorted.filter((item) => !item.pinned).slice(0, this.maxClustersToShow);
+
+        return sortedPinOut;
       } else {
-        return sorted;
+        return sorted.filter((item) => !item.pinned);
       }
     },
 
+    pinFiltered() {
+      const out = this.clusters.filter((item) => item.pinned);
+      const sorted = sortBy(out, ['ready:desc', 'label']);
+
+      return sorted;
+    },
+
+    pinnedClustersHeight() {
+      const pinCount = this.clusters.filter((item) => item.pinned).length;
+      const height = pinCount > 2 ? (pinCount * 43) : 90;
+
+      return `min-height: ${ height }px`;
+    },
+
     clusterFilterCount() {
       return this.clusterFilter ? this.clustersFiltered.length : this.clusters.length;
     },
@@ -208,6 +256,19 @@ export default {
   },
 
   methods: {
+    /**
+     * Converts a pixel value to an em value based on the default font size.
+     * @param {number} elementFontSize - The font size of the element in pixels.
+     * @param {number} [defaultFontSize=14] - The default font size in pixels.
+     * @returns {string} The converted value in em units.
+     */
+    pxToEm(elementFontSize, defaultFontSize = 14) {
+      const lineHeightInPx = 2 * parseInt(elementFontSize);
+      const lineHeightInEm = lineHeightInPx / defaultFontSize;
+
+      return `${ lineHeightInEm }em`;
+    },
+
     handler(e) {
       if (e.keyCode === KEY.ESCAPE ) {
         this.hide();
@@ -242,7 +303,7 @@ export default {
         return {
           content:       this.shown ? null : item,
           placement:     'right',
-          popperOptions: { modifiers: { preventOverflow: { enabled: false } } }
+          popperOptions: { modifiers: { preventOverflow: { enabled: false }, hide: { enabled: false } } }
         };
       } else {
         return { content: undefined };
@@ -263,6 +324,10 @@ export default {
         data-testid="side-menu"
         class="side-menu"
         :class="{'menu-open': shown, 'menu-close':!shown}"
+        :style="{'marginBottom':
+                   globalBannerSettings?.footerFont,
+                 'marginTop':
+                   globalBannerSettings?.headerFont}"
         tabindex="-1"
       >
         <div class="title">
@@ -306,7 +371,6 @@ export default {
                 {{ t('nav.home') }}
               </div>
             </nuxt-link>
-
             <div
               v-if="showClusterSearch"
               class="clusters-search"
@@ -375,41 +439,101 @@ export default {
             <div
               ref="clusterList"
               class="clusters"
+              :style="pinnedClustersHeight"
             >
               <div
-                v-for="c in clustersFiltered"
-                :key="c.id"
-                @click="hide()"
+                v-if="showPinClusters && pinFiltered.length"
+                class="clustersPinned"
               >
-                <nuxt-link
-                  v-if="c.ready"
-                  :data-testid="`menu-cluster-${ c.id }`"
-                  class="cluster selector option"
-                  :to="{ name: 'c-cluster-explorer', params: { cluster: c.id } }"
+                <div
+                  v-for="c in pinFiltered"
+                  :key="c.id"
+                  @click="hide()"
                 >
-                  <ClusterProviderIconMenu
-                    v-tooltip="getTooltipConfig(c.label)"
-                    :cluster="c"
-                    class="rancher-provider-icon"
-                  />
-                  <div class="cluster-name">
-                    {{ c.label }}
-                  </div>
-                </nuxt-link>
-                <span
-                  v-else
-                  class="option cluster selector disabled"
+                  <nuxt-link
+                    v-if="c.ready"
+                    :data-testid="`menu-cluster-${ c.id }`"
+                    class="cluster selector option"
+                    :to="{ name: 'c-cluster-explorer', params: { cluster: c.id } }"
+                  >
+                    <ClusterIconMenu
+                      v-tooltip="getTooltipConfig(c.label)"
+                      :cluster="c"
+                      class="rancher-provider-icon"
+                    />
+                    <div class="cluster-name">
+                      {{ c.label }}
+                    </div>
+                    <Pinned
+                      :cluster="c"
+                    />
+                  </nuxt-link>
+                  <span
+                    v-else
+                    class="option cluster selector disabled"
+                  >
+                    <ClusterIconMenu
+                      v-tooltip="getTooltipConfig(c.label)"
+                      :cluster="c"
+                      class="rancher-provider-icon"
+                    />
+                    <div class="cluster-name">{{ c.label }}</div>
+                    <Pinned
+                      :cluster="c"
+                    />
+                  </span>
+                </div>
+                <div
+                  v-if="clustersFiltered.length > 0"
+                  class="category-title"
                 >
-                  <ClusterProviderIconMenu
-                    v-tooltip="getTooltipConfig(c.label)"
-                    :cluster="c"
-                    class="rancher-provider-icon"
-                  />
-                  <div class="cluster-name">{{ c.label }}</div>
-                </span>
+                  <hr>
+                </div>
+              </div>
+              <div class="clustersList">
+                <div
+                  v-for="c in clustersFiltered"
+                  :key="c.id"
+                  @click="hide()"
+                >
+                  <nuxt-link
+                    v-if="c.ready"
+                    :data-testid="`menu-cluster-${ c.id }`"
+                    class="cluster selector option"
+                    :to="{ name: 'c-cluster-explorer', params: { cluster: c.id } }"
+                  >
+                    <ClusterIconMenu
+                      v-tooltip="getTooltipConfig(c.label)"
+                      :cluster="c"
+                      class="rancher-provider-icon"
+                    />
+                    <div class="cluster-name">
+                      {{ c.label }}
+                    </div>
+                    <Pinned
+                      :class="{'showPin': c.pinned}"
+                      :cluster="c"
+                    />
+                  </nuxt-link>
+                  <span
+                    v-else
+                    class="option cluster selector disabled"
+                  >
+                    <ClusterIconMenu
+                      v-tooltip="getTooltipConfig(c.label)"
+                      :cluster="c"
+                      class="rancher-provider-icon"
+                    />
+                    <div class="cluster-name">{{ c.label }}</div>
+                    <Pinned
+                      :class="{'showPin': c.pinned}"
+                      :cluster="c"
+                    />
+                  </span>
+                </div>
               </div>
               <div
-                v-if="clustersFiltered.length === 0 && shown"
+                v-if="(clustersFiltered.length === 0 || pinFiltered.length === 0) && searchActive"
                 class="none-matching"
               >
                 {{ t('nav.search.noResults') }}
@@ -573,25 +697,25 @@ export default {
   $option-padding-left: 14px;
   $option-height: $icon-size + $option-padding + $option-padding;
 
-  .menu {
-    position: absolute;
-    width: $app-bar-collapsed-width;
-    height: 54px;
-    top: 0;
-    grid-area: menu;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .side-menu {
+    .menu {
+      position: absolute;
+      width: $app-bar-collapsed-width;
+      height: 54px;
+      top: 0;
+      grid-area: menu;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-    .menu-icon {
-      width: 25px;
-      height: 25px;
-      fill: var(--header-btn-text);
+      .menu-icon {
+        width: 25px;
+        height: 25px;
+        fill: var(--header-btn-text);
+      }
     }
-  }
 
-  .side-menu {
     position: fixed;
     top: 0;
     left: 0px;
@@ -636,7 +760,7 @@ export default {
       svg {
         width: 25px;
         height: 25px;
-        margin-left: 10px;
+        margin-left: 9px;
       }
     }
     .home-text {
@@ -664,8 +788,23 @@ export default {
           font-weight: 500;
         }
 
+        .pin {
+          font-size: 16px;
+          margin-left: auto;
+          display: none;
+          color: var(--body-text);
+          &.showPin {
+            display: block;
+          }
+        }
+
         &:hover {
           text-decoration: none;
+
+          .pin {
+            display: block;
+            color: var(--darker-text);
+          }
         }
         &.disabled {
           background: transparent;
@@ -676,6 +815,10 @@ export default {
             filter: grayscale(1);
             color: var(--muted);
           }
+
+          .pin {
+            cursor: pointer;
+          }
         }
 
         &:focus {
@@ -729,6 +872,11 @@ export default {
           &.disabled {
             background: transparent;
             color: var(--muted);
+
+            > .pin {
+              color:var(--default-text);
+              display: block;
+            }
           }
         }
 
@@ -749,7 +897,7 @@ export default {
         > input {
           background-color: transparent;
           margin-bottom: 8px;
-          padding-right: 34px;
+          padding-right: 35px;
         }
         > i {
           position: absolute;
@@ -779,10 +927,6 @@ export default {
       .clusters {
         overflow-y: auto;
 
-        @media screen and (max-height: 720px) {
-          min-height: 80px;
-        }
-
          a, span {
           margin: 0;
          }
@@ -846,6 +990,24 @@ export default {
         padding: 8px
       }
 
+      .clustersPinned {
+        .category {
+          &-title {
+            margin: 8px 0;
+            margin-left: 16px;
+            hr {
+              margin: 0;
+              width: 94%;
+              transition: all 0.5s ease-in-out;
+              max-width: 100%;
+            }
+          }
+        }
+        .pin {
+          display: block;
+        }
+      }
+
       .category {
         display: flex;
         flex-direction: column;
@@ -907,6 +1069,17 @@ export default {
           }
         }
       }
+
+      .clustersPinned {
+        .category {
+          &-title {
+            hr {
+              width: 40px;
+            }
+          }
+        }
+      }
+
       .footer {
         margin: 20px 15px;
 

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

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;