@rancher/shell 3.0.5-rc.2 → 3.0.5-rc.5

package/components/formatter/FleetApplicationClustersReady.vue

@@ -0,0 +1,77 @@
+<script>
+
+export default {
+  name: 'FleetApplicationClustersReady',
+
+  components: {},
+
+  props: {
+    value: {
+      type:    Number,
+      default: 0
+    },
+
+    row: {
+      type:     Object,
+      required: true
+    },
+
+    col: {
+      type:    Object,
+      default: () => {}
+    },
+
+    rowKey: {
+      type:    String,
+      default: '',
+    },
+
+    getCustomDetailLink: {
+      type:    Function,
+      default: null
+    },
+  },
+
+  methods: {
+    parseTargetMode(row) {
+      return row.targetInfo?.mode === 'clusterGroup' ? this.t('fleet.application.warningTooltip.clusterGroup') : this.t('fleet.application.warningTooltip.cluster');
+    },
+  },
+};
+</script>
+
+<template>
+  <span
+    v-if="!row.clusterInfo"
+    class="text-muted"
+  >&mdash;</span>
+  <span
+    v-else-if="row.clusterInfo.unready"
+    class="text-warning"
+  >{{ row.clusterInfo.ready }}/{{
+    row.clusterInfo.total }}</span>
+  <span
+    v-else
+    class="cluster-count-info"
+  >
+    {{ row.clusterInfo.ready }}/{{ row.clusterInfo.total }}
+    <i
+      v-if="!row.clusterInfo.total"
+      v-clean-tooltip.bottom="parseTargetMode(row)"
+      class="icon icon-warning"
+    />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.cluster-count-info {
+  display: flex;
+  align-items: center;
+
+  i {
+    margin-left: 5px;
+    font-size: 22px;
+    color: var(--warning);
+  }
+}
+</style>

package/components/formatter/FleetApplicationSource.vue

@@ -0,0 +1,71 @@
+<script>
+import Link from '@shell/components/formatter/Link';
+import Shortened from '@shell/components/formatter/Shortened';
+
+export default {
+  name: 'FleetApplicationSource',
+
+  components: {
+    Link,
+    Shortened,
+  },
+
+  props: {
+    value: {
+      type:    String,
+      default: ''
+    },
+
+    row: {
+      type:     Object,
+      required: true
+    },
+
+    col: {
+      type:    Object,
+      default: () => {}
+    },
+
+    rowKey: {
+      type:    String,
+      default: '',
+    },
+
+    getCustomDetailLink: {
+      type:    Function,
+      default: null
+    }
+  },
+};
+</script>
+
+<template>
+  <template v-if="row.source.showLink">
+    <Link
+      class="source-link"
+      label-key="source.display"
+      before-icon-key="source.icon"
+      url-key="source.value"
+      :row="row"
+      :value="row.source.value || ''"
+    />
+    <template v-if="row.source.value && row.sourceSub.value">
+      <div class="text-muted">
+        <Shortened
+          long-value-key="sourceSub.value"
+          :row="row"
+          :value="row.sourceSub.display"
+        />
+      </div>
+    </template>
+  </template>
+  <span v-else>
+    {{ row.source.value }}
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.source-link {
+  width: fit-content;
+}
+</style>

package/components/formatter/FleetSummaryGraph.vue

@@ -119,4 +119,11 @@ export default {
   padding: 0;
   line-height: initial;
 }
+
+.hand {
+  .progress, .progress > .piece {
+    height: 6px;
+    border-right: 1px solid var(--body-bg);
+  }
+}
 </style>

package/components/formatter/__tests__/ClusterLink.test.ts

@@ -3,7 +3,6 @@ import ClusterLink from '@shell/components/formatter/ClusterLink.vue';
 
 describe('component: ClusterLink', () => {
   const UNAVAILABLE_MACHINES_ICON_SELECTOR = '[data-testid="unavailable-machines-alert-icon"]';
-  const TEMPLATE_UPGRADE_ICON_SELECTOR = '[data-testid="rke-template-upgrade-alert-icon"]';
   const CONDITION_HAS_ERROR_ICON_SELECTOR = '[data-testid="conditions-has-error-icon"]';
 
   describe('unavailable machines alert icon', () => {
@@ -20,10 +19,9 @@ describe('component: ClusterLink', () => {
         const wrapper = mount(ClusterLink, {
           props: {
             row: {
-              hasError:           false,
-              status:             {},
+              hasError: false,
+              status:   {},
               unavailableMachines,
-              rkeTemplateUpgrade: undefined
             },
             reference: 'any',
             value:     'any'
@@ -36,34 +34,6 @@ describe('component: ClusterLink', () => {
     );
   });
 
-  describe('template upgrade alert icon', () => {
-    const testCases = [
-      [undefined, false],
-      ['any', true],
-    ];
-
-    it.each(testCases)(
-      'should show/hide properly based on rkeTemplateUpgrade',
-      (rkeTemplateUpgrade, expected) => {
-        const wrapper = mount(ClusterLink, {
-          props: {
-            row: {
-              hasError:            false,
-              status:              {},
-              unavailableMachines: 0,
-              rkeTemplateUpgrade
-            },
-            reference: 'any',
-            value:     'any'
-          }
-        });
-        const el = wrapper.find(TEMPLATE_UPGRADE_ICON_SELECTOR);
-
-        expect(el.exists()).toBe(expected);
-      }
-    );
-  });
-
   describe('conditions has error icon', () => {
     const MOCKED_CONDITIONS_1 = [{
       status: '', type: 'Ready', reason: 'Waiting', error: true // When the only existing error has a type "Ready" and reason "Waiting"

package/components/nav/Header.vue

@@ -93,7 +93,8 @@ export default {
       'isSingleProduct',
       'isRancherInHarvester',
       'showTopLevelMenu',
-      'isMultiCluster'
+      'isMultiCluster',
+      'showWorkspaceSwitcher'
     ]),
 
     samlAuthProviderEnabled() {
@@ -238,16 +239,16 @@ export default {
   },
 
   watch: {
-    currentCluster(nue, old) {
-      if (nue && old && nue.id !== old.id) {
+    currentCluster(neu, old) {
+      if (neu && old && neu.id !== old.id) {
         this.checkClusterName();
       }
     },
     // since the Header is a "persistent component" we need to update it at every route change...
     $route: {
-      handler(nue) {
-        if (nue) {
-          this.extensionHeaderActions = getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, nue);
+      handler(neu) {
+        if (neu) {
+          this.extensionHeaderActions = getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, neu);
 
           this.navHeaderRight = this.$plugin?.getDynamic('component', 'NavHeaderRight');
         }
@@ -533,7 +534,7 @@ export default {
         class="top"
       >
         <NamespaceFilter v-if="clusterReady && currentProduct && (currentProduct.showNamespaceFilter || isExplorer)" />
-        <WorkspaceSwitcher v-else-if="clusterReady && currentProduct && currentProduct.showWorkspaceSwitcher" />
+        <WorkspaceSwitcher v-else-if="clusterReady && currentProduct && currentProduct.showWorkspaceSwitcher && showWorkspaceSwitcher" />
       </div>
       <div
         v-if="currentCluster && !simple"

package/components/nav/NamespaceFilter.vue

@@ -702,7 +702,7 @@ export default {
     data-testid="namespaces-filter"
     tabindex="0"
     @mousedown.prevent
-    @keydown.down.enter.space.prevent="open"
+    @keydown.self.down.enter.space.prevent="open"
   >
     <div
       v-if="isOpen"

package/components/nav/TopLevelMenu.helper.ts

@@ -1,10 +1,12 @@
 import { CAPI, MANAGEMENT } from '@shell/config/types';
+import { STORE } from '@shell/store/store-types';
 import { PaginationParam, PaginationParamFilter, PaginationSort } from '@shell/types/store/pagination.types';
 import { VuexStore } from '@shell/types/store/vuex';
 import { filterHiddenLocalCluster, filterOnlyKubernetesClusters, paginationFilterClusters } from '@shell/utils/cluster';
 import PaginationWrapper from '@shell/utils/pagination-wrapper';
 import { allHash } from '@shell/utils/promise';
 import { sortBy } from '@shell/utils/sort';
+import { reactive } from 'vue';
 import { LocationAsRelativeRaw } from 'vue-router';
 
 interface TopLevelMenuCluster {
@@ -86,7 +88,15 @@ export interface TopLevelMenuHelper {
   */
   clustersOthers: Array<TopLevelMenuCluster>;
 
-  update: (args: UpdateArgs) => Promise<void>
+  /**
+   * Fetch all cluster resources
+   */
+  update: (args: UpdateArgs) => Promise<void>;
+
+  /**
+   * Cleanup on destroy of TopLevelMenu
+   */
+  destroy: () => Promise<void>;
 }
 
 export abstract class BaseTopLevelMenuHelper {
@@ -106,7 +116,7 @@ export abstract class BaseTopLevelMenuHelper {
   * 2. ready
   * 3. name
   */
-  public clustersPinned: Array<TopLevelMenuCluster> = [];
+  public clustersPinned: Array<TopLevelMenuCluster> = reactive([]);
 
   /**
   * Filter mgmt clusters by
@@ -121,7 +131,7 @@ export abstract class BaseTopLevelMenuHelper {
   * 2. ready
   * 3. name
   */
-  public clustersOthers: Array<TopLevelMenuCluster> = [];
+  public clustersOthers: Array<TopLevelMenuCluster> = reactive([]);
 
   constructor({ $store }: {
     $store: VuexStore,
@@ -141,7 +151,7 @@ export abstract class BaseTopLevelMenuHelper {
     return {
       id:              mgmtCluster.id,
       label:           mgmtCluster.nameDisplay,
-      ready:           mgmtCluster.isReady, // && !provCluster?.hasError,
+      ready:           mgmtCluster.isReady,
       providerNavLogo: mgmtCluster.providerMenuLogo,
       badge:           mgmtCluster.badge,
       iconColor:       mgmtCluster.iconColor,
@@ -165,69 +175,64 @@ export abstract class BaseTopLevelMenuHelper {
 export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper implements TopLevelMenuHelper {
   private args?: UpdateArgs;
 
-  private clustersPinnedWrapper: PaginationWrapper;
-  private clustersOthersWrapper: PaginationWrapper;
-  private provClusterWrapper: PaginationWrapper;
-
-  private commonClusterFilters: PaginationParam[];
+  private clustersPinnedWrapper: PaginationWrapper<any>;
+  private clustersOthersWrapper: PaginationWrapper<any>;
+  private provClusterWrapper: PaginationWrapper<any>;
 
   constructor({ $store }: {
       $store: VuexStore,
   }) {
     super({ $store });
 
-    this.commonClusterFilters = paginationFilterClusters({ getters: this.$store.getters });
-
+    // Fetch all PINNED clusters (see `clustersPinned` description for details)
+    // No need to monitor for changes, the UNPINNED request will handle it
     this.clustersPinnedWrapper = new PaginationWrapper({
       $store,
-      onUpdate: () => {
-        // trigger on websocket update (only need 1 trigger for this cluster type)
-        // https://github.com/rancher/rancher/issues/40773 / https://github.com/rancher/dashboard/issues/12734
-        if (this.args) {
-          this.update(this.args);
-        }
-      },
+      id:         'tlm-pinned-clusters',
       enabledFor: {
-        store:    'management',
+        store:    STORE.MANAGEMENT,
         resource: {
           id:      MANAGEMENT.CLUSTER,
           context: 'side-bar',
         }
-      }
+      },
+      formatResponse: { classify: true }
     });
+    // Fetch all UNPINNED clusters capped at 10 (see `clustersOthers` description for details)
     this.clustersOthersWrapper = new PaginationWrapper({
       $store,
-      onUpdate: (res) => {
-        // trigger on websocket update (only need 1 trigger for this cluster type)
-        // https://github.com/rancher/rancher/issues/40773 / https://github.com/rancher/dashboard/issues/12734
+      id:       'tlm-unpinned-clusters',
+      onChange: () => {
         if (this.args) {
           this.update(this.args);
         }
       },
       enabledFor: {
-        store:    'management',
+        store:    STORE.MANAGEMENT,
         resource: {
           id:      MANAGEMENT.CLUSTER,
           context: 'side-bar',
         }
-      }
+      },
+      formatResponse: { classify: true }
     });
+    // Fetch all prov clusters for the mgmt clusters we have
     this.provClusterWrapper = new PaginationWrapper({
       $store,
-      onUpdate: (res) => {
-        // trigger on websocket update (only need 1 trigger for this cluster type)
-        // https://github.com/rancher/rancher/issues/40773 / https://github.com/rancher/dashboard/issues/12734
+      id:       'tlm-prov-clusters',
+      onChange: () => {
         if (this.args) {
           this.update(this.args);
         }
       },
       enabledFor: {
-        store:    'management',
+        store:    STORE.MANAGEMENT,
         resource: {
           id:      CAPI.RANCHER_CLUSTER,
           context: 'side-bar',
         }
-      }
+      },
+      formatResponse: { classify: true }
     });
   }
 
@@ -258,6 +263,7 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
       return res;
     }, {} as { [mgmtId: string]: ProvCluster});
 
+    // Filter out mgmt clusters that don't have matching prov cluster and convert remaining to required format
     const _clustersNotPinned = res.notPinned
       .filter((mgmtCluster) => !!provClustersByMgmtId[mgmtCluster.id])
       .map((mgmtCluster) => this.convertToCluster(mgmtCluster, provClustersByMgmtId[mgmtCluster.id]));
@@ -274,6 +280,19 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     this.cacheClusters();
   }
 
+  async destroy() {
+    this.clustersPinnedWrapper.onDestroy();
+    this.clustersOthersWrapper.onDestroy();
+    this.provClusterWrapper.onDestroy();
+  }
+
+  /**
+   * Helper function
+   *
+   * This extracts all the functionality previously in TopLevelMenu
+   *
+   * Construct SSP filter params
+   */
   private constructParams({
     pinnedIds,
     searchTerm,
@@ -289,7 +308,8 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     includePinned?: boolean,
     excludePinned?: boolean,
   }): PaginationParam[] {
-    const filters: PaginationParam[] = [...this.commonClusterFilters];
+    const commonClusterFilters = paginationFilterClusters({ getters: this.$store.getters });
+    const filters: PaginationParam[] = [...commonClusterFilters];
 
     if (pinnedIds) {
       if (includePinned) {
@@ -341,7 +361,6 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
         sort:                 DEFAULT_SORT,
         projectsOrNamespaces: []
       },
-      classify: true,
     }).then((r) => r.data);
   }
 
@@ -362,7 +381,6 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
         sort:                 DEFAULT_SORT,
         projectsOrNamespaces: []
       },
-      classify: true,
     }).then((r) => r.data);
   }
 
@@ -386,7 +404,6 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
         sort:                 [],
         projectsOrNamespaces: []
       },
-      classify: true,
     }).then((r) => r.data);
   }
 }
@@ -419,6 +436,10 @@ export class TopLevelMenuHelperLegacy extends BaseTopLevelMenuHelper implements
     this.cacheClusters();
   }
 
+  async destroy() {
+    // No-op
+  }
+
   /**
    * Filter mgmt clusters by
    * 1. Harvester type 1 (filterOnlyKubernetesClusters)

package/components/nav/TopLevelMenu.vue

@@ -257,6 +257,13 @@ export default {
       });
 
       return appBar;
+    },
+
+    hideLocalCluster() {
+      const hideLocalSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.HIDE_LOCAL_CLUSTER) || {};
+      const value = hideLocalSetting.value || hideLocalSetting.default || 'false';
+
+      return value === 'true';
     }
   },
 
@@ -309,6 +316,9 @@ export default {
       immediate: true,
     },
 
+    hideLocalCluster() {
+      this.updateClusters(this.pinnedIds, 'slow');
+    }
   },
 
   mounted() {
@@ -317,6 +327,7 @@ export default {
 
   beforeUnmount() {
     document.removeEventListener('keyup', this.handler);
+    this.helper?.destroy();
   },
 
   methods: {

package/components/nav/Type.vue

@@ -64,7 +64,10 @@ export default {
       // If the route explicitly declares the nav path that should be highlighted, then use that
       if (routeMetaNav) {
         const cluster = this.$route.params?.cluster;
-        const navPath = routeMetaNav.replace(':cluster', cluster);
+        const product = this.$route.params?.product;
+        const navPath = routeMetaNav
+          .replace(':cluster', cluster)
+          .replace(':product', product);
 
         if (navPath === typeFullPath) {
           return true;

package/components/nav/WindowManager/index.vue

@@ -326,6 +326,7 @@ export default {
 
 <template>
   <div
+    v-if="open"
     id="windowmanager"
     data-testid="windowmanager"
     class="windowmanager"

package/composables/useI18n.ts

@@ -3,17 +3,6 @@ import { Store } from 'vuex';
 import { stringFor } from '@shell/plugins/i18n';
 
 let store: Store<any> | null = null;
-
-export const useI18n = (vuexStore: Store<any>): { t: typeof t } => {
-  store = vuexStore;
-
-  if (!store) {
-    throw new Error('usI18n() must be called from setup()');
-  }
-
-  return { t };
-};
-
 /**
  * Allows for consuming i18n strings with the Vue composition API.
  * @param key - The key for the i18n string to translate.
@@ -24,3 +13,15 @@ export const useI18n = (vuexStore: Store<any>): { t: typeof t } => {
 const t = (key: string, args?: unknown, raw?: boolean): string => {
   return stringFor(store, key, args, raw);
 };
+
+export type I18n = { t: typeof t };
+
+export const useI18n = (vuexStore: Store<any>): I18n => {
+  store = vuexStore;
+
+  if (!store) {
+    throw new Error('usI18n() must be called from setup()');
+  }
+
+  return { t };
+};

package/config/labels-annotations.js

@@ -116,17 +116,20 @@ export const CATALOG = {
 };
 
 export const FLEET = {
-  REPO_NAME:            'fleet.cattle.io/repo-name',
-  CLUSTER_DISPLAY_NAME: 'management.cattle.io/cluster-display-name',
-  CLUSTER_NAME:         'management.cattle.io/cluster-name',
-  BUNDLE_ID:            'fleet.cattle.io/bundle-id',
-  BUNDLE_NAME:          'fleet.cattle.io/bundle-name',
-  BUNDLE_NAMESPACE:     'fleet.cattle.io/bundle-namespace',
-  MANAGED:              'fleet.cattle.io/managed',
-  CLUSTER_NAMESPACE:    'fleet.cattle.io/cluster-namespace',
-  CLUSTER:              'fleet.cattle.io/cluster',
-  CREATED_BY_USER_ID:   'fleet.cattle.io/created-by-user-id',
-  CREATED_BY_USER_NAME: 'fleet.cattle.io/created-by-display-name',
+  REPO_NAME:                    'fleet.cattle.io/repo-name',
+  HELM_NAME:                    'fleet.cattle.io/fleet-helm-name',
+  CLUSTER_DISPLAY_NAME:         'management.cattle.io/cluster-display-name',
+  CLUSTER_NAME:                 'management.cattle.io/cluster-name',
+  BUNDLE_ID:                    'fleet.cattle.io/bundle-id',
+  BUNDLE_NAME:                  'fleet.cattle.io/bundle-name',
+  BUNDLE_NAMESPACE:             'fleet.cattle.io/bundle-namespace',
+  MANAGED:                      'fleet.cattle.io/managed',
+  CLUSTER_NAMESPACE:            'fleet.cattle.io/cluster-namespace',
+  CLUSTER:                      'fleet.cattle.io/cluster',
+  CREATED_BY_USER_ID:           'fleet.cattle.io/created-by-user-id',
+  CREATED_BY_USER_NAME:         'fleet.cattle.io/created-by-display-name',
+  OCI_STORAGE_SECRET_DEFAULT:   'ui-default-oci-registry',
+  OCI_STORAGE_SECRET_GENERATED: 'fleet.cattle.io/bundle-internal-secret',
 };
 
 export const RBAC = { PRODUCT: 'management.cattle.io/ui-product' };

package/config/product/auth.js

@@ -175,6 +175,7 @@ export function init(store) {
   componentForType(`${ MANAGEMENT.AUTH_CONFIG }/azuread`, 'auth/azuread');
   componentForType(`${ MANAGEMENT.AUTH_CONFIG }/keycloakoidc`, 'auth/oidc');
   componentForType(`${ MANAGEMENT.AUTH_CONFIG }/genericoidc`, 'auth/oidc');
+  componentForType(`${ MANAGEMENT.AUTH_CONFIG }/cognito`, 'auth/oidc');
 
   basicType([
     'config',