@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.4

package/pages/c/_cluster/apps/charts/install.vue

@@ -22,7 +22,6 @@ import Tabbed from '@shell/components/Tabbed';
 import UnitInput from '@shell/components/form/UnitInput';
 import YamlEditor, { EDITOR_MODES } from '@shell/components/YamlEditor';
 import Wizard from '@shell/components/Wizard';
-import TypeDescription from '@shell/components/TypeDescription';
 import ChartMixin from '@shell/mixins/chart';
 import ChildHook, { BEFORE_SAVE_HOOKS, AFTER_SAVE_HOOKS } from '@shell/mixins/child-hook';
 import {
@@ -41,7 +40,7 @@ import {
 import { ignoreVariables } from './install.helpers';
 import { findBy, insertAt } from '@shell/utils/array';
 import { saferDump } from '@shell/utils/create-yaml';
-import { LINUX, WINDOWS } from '@shell/store/catalog';
+import { WINDOWS } from '@shell/store/catalog';
 import { SETTING } from '@shell/config/settings';
 import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret.vue';
 import { generateRandomAlphaString } from '@shell/utils/string';
@@ -96,7 +95,6 @@ export default {
     UnitInput,
     YamlEditor,
     Wizard,
-    TypeDescription,
     SelectOrCreateAuthSecret
   },
 
@@ -601,6 +599,10 @@ export default {
       return out;
     },
 
+    selectedVersionOption() {
+      return this.filteredVersions?.find((v) => v.id === this.query.versionName) || this.query.versionName;
+    },
+
     showSelectVersionOrChart() {
       // Allow the user to choose a version if:
       // - the app exists (editing/upgrading)
@@ -680,7 +682,7 @@ export default {
     },
 
     stepperSubtext() {
-      return this.existing && this.currentVersion !== this.targetVersion ? `${ this.currentVersion } > ${ this.targetVersion }` : this.targetVersion;
+      return this.mappedVersions?.find((v) => v.id === this.targetVersion)?.label || this.targetVersion;
     },
 
     readmeWindowName() {
@@ -765,21 +767,6 @@ export default {
       return { name: 'c-cluster-legacy-project' };
     },
 
-    windowsIncompatible() {
-      if (this.chart?.windowsIncompatible) {
-        return this.t('catalog.charts.windowsIncompatible');
-      }
-      if (this.versionInfo) {
-        const incompatibleVersion = !(this.versionInfo?.chart?.annotations?.[CATALOG_ANNOTATIONS.PERMITTED_OS] || LINUX).includes('windows');
-
-        if (incompatibleVersion && !this.chart.windowsIncompatible) {
-          return this.t('catalog.charts.versionWindowsIncompatible');
-        }
-      }
-
-      return null;
-    },
-
     /**
      * Check if the chart contains `systemDefaultRegistry` properties.
      * If not we shouldn't apply the setting, because if the option
@@ -1551,10 +1538,9 @@ export default {
   <Loading v-if="$fetchState.pending" />
   <div
     v-else-if="!legacyApp && !mcapp"
-    class="install-steps pt-20"
+    class="install-steps"
     :class="{ 'isPlainLayout': isPlainLayout}"
   >
-    <TypeDescription resource="chart" />
     <Wizard
       v-if="value"
       :steps="steps"
@@ -1564,25 +1550,45 @@ export default {
       :banner-title-subtext="stepperSubtext"
       :finish-mode="action.name"
       :header-mode="action.tKey"
+      :show-step-header="false"
       class="wizard"
-      :class="{'windowsIncompatible': windowsIncompatible}"
       @cancel="cancel"
       @finish="finish"
     >
-      <template #bannerTitleImage>
-        <div>
-          <div class="logo-bg">
-            <LazyImage
-              :src="chart ? chart.icon : ''"
-              class="logo"
-            />
+      <template #bannerTitle>
+        <div class="chart-title-container">
+          <div class="logo-container">
+            <div class="logo-box">
+              <LazyImage
+                :src="chart ? chart.icon : ''"
+                class="logo"
+              />
+            </div>
+          </div>
+          <div class="chart-title">
+            <h1>
+              <router-link
+                v-if="chart"
+                :to="chartLocation()"
+                data-testid="chart-install-name-link"
+              >
+                {{ stepperName }}
+              </router-link>
+              <span v-else>
+                {{ stepperName }}
+              </span>: {{ t(`wizard.${action.tKey}`) }}
+            </h1>
+            <span
+              v-if="stepperSubtext"
+              class="subtext"
+            >
+              <i
+                v-clean-tooltip="t('tableHeaders.version')"
+                class="icon icon-version-alt"
+              />
+              {{ stepperSubtext }}
+            </span>
           </div>
-          <label
-            v-if="windowsIncompatible"
-            class="os-label"
-          >
-            {{ windowsIncompatible }}
-          </label>
         </div>
       </template>
       <template #basics>
@@ -1626,20 +1632,26 @@ export default {
             v-if="showSelectVersionOrChart"
             class="row mb-20"
           >
-            <div class="col span-4">
-              <!-- We have a chart for the app, let the user select a new version -->
+            <!-- We have a chart for the app, let the user select a new version -->
+            <div
+              v-if="chart"
+              class="col span-4"
+            >
               <LabeledSelect
-                v-if="chart"
                 data-testid="chart-version-selector"
                 :label="t('catalog.install.version')"
-                :value="query.versionName"
+                :value="selectedVersionOption"
                 :options="filteredVersions"
                 :selectable="version => !version.disabled"
                 @update:value="selectVersion"
               />
-              <!-- Can't find the chart for the app, let the user try to select one -->
+            </div>
+            <!-- Can't find the chart for the app, let the user try to select one -->
+            <div
+              v-else
+              class="col span-4"
+            >
               <LabeledSelect
-                v-else
                 :label="t('catalog.install.chart')"
                 :value="chart"
                 :options="charts"
@@ -1788,7 +1800,7 @@ export default {
             <LabeledSelect
               v-if="chart"
               :label="t('catalog.install.version')"
-              :value="query.versionName"
+              :value="selectedVersionOption"
               :options="filteredVersions"
               :selectable="version => !version.disabled"
               @update:value="selectVersion"
@@ -2043,30 +2055,37 @@ export default {
     :class="{ 'isPlainLayout': isPlainLayout}"
   >
     <div class="outer-container">
-      <div class="header mb-20">
-        <div class="title">
-          <div class="top choice-banner">
-            <div class="title">
-              <!-- Logo -->
-              <slot name="bannerTitleImage">
-                <div class="round-image">
-                  <LazyImage
-                    :src="chart ? chart.icon : ''"
-                    class="logo"
-                  />
-                </div>
-              </slot>
-              <!-- Title with subtext -->
-              <div class="subtitle">
-                <h2 v-if="stepperName">
-                  {{ stepperName }}
-                </h2>
-                <span
-                  v-if="stepperSubtext"
-                  class="subtext"
-                >{{ stepperSubtext }}</span>
+      <div class="header mmt-6 mmb-6">
+        <div class="top choice-banner">
+          <div class="chart-title-container mmb-6">
+            <div class="logo-container">
+              <div class="logo-box">
+                <LazyImage
+                  :src="chart ? chart.icon : ''"
+                  class="logo"
+                />
               </div>
             </div>
+            <div class="chart-title">
+              <h2 v-if="stepperName">
+                <router-link
+                  :to="chartLocation()"
+                  data-testid="chart-install-name-link"
+                >
+                  {{ stepperName }}
+                </router-link>
+              </h2>
+              <span
+                v-if="stepperSubtext"
+                class="subtext"
+              >
+                <i
+                  v-clean-tooltip="t('tableHeaders.version')"
+                  class="icon icon-version-alt"
+                />
+                {{ stepperSubtext }}
+              </span>
+            </div>
           </div>
         </div>
       </div>
@@ -2097,12 +2116,16 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+  .chart-version-footnote {
+    margin-top: 8px;
+    color: var(--input-label);
+  }
+
   $title-height: 50px;
   $padding: 5px;
   $slideout-width: 35%;
 
   .install-steps {
-    padding-top: 0;
     height: 0;
     position: relative;
     overflow: hidden;
@@ -2118,37 +2141,29 @@ export default {
     }
   }
 
-  .wizard {
-    .logo-bg {
-      margin-right: 10px;
-      height: $title-height;
-      width: $title-height;
-      background-color: white;
-      border: $padding solid white;
-      border-radius: calc( 3 * var(--border-radius));
-      position: relative;
-    }
+  .logo-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
-    .logo {
-      max-height: $title-height - 2 * $padding;
-      max-width: $title-height - 2 * $padding;
-      position: absolute;
-      width: auto;
-      height: auto;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      margin: auto;
-    }
+    .logo-box {
+      width: 60px;
+      height: 60px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #fff;
+      border-radius: var(--border-radius);
 
-    // Hack - We're adding an absolute tag under the logo that we want to consume space without breaking vertical alignment of row.
-    // W  ith the slots available this isn't possible without adding tag specific styles to the root wizard classes
-    &.windowsIncompatible {
-      :deep() .header {
-        padding-bottom: 15px;
+      .logo {
+        width: 48px;
+        height: 48px;
+        object-fit: contain;
       }
     }
+  }
+
+  .wizard {
 
     .os-label {
       position: absolute;
@@ -2297,38 +2312,43 @@ export default {
 
   border-bottom: var(--header-border-size) solid var(--header-border);
 
-  & > .title {
+  & > .chart-title-container {
     flex: 1;
     min-height: 75px;
   }
 
   .choice-banner {
 
-    flex-basis: 40%;
+    flex-basis: 100%;
     display: flex;
     align-items: center;
 
     &.top {
 
-      H2 {
+      H1, H2 {
         margin: 0px;
       }
 
-      .title{
+      .chart-title-container {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         justify-content: space-evenly;
-
-        & > .subtitle {
-          margin: 0 20px;
-        }
+        gap: 24px;
       }
 
-      .subtitle{
+      .chart-title {
         display: flex;
         flex-direction: column;
         & .subtext {
+          display: flex;
+          align-items: center;
+          gap: 8px;
           color: var(--input-label);
+          margin-top: 8px;
+
+          .icon-version-alt {
+            font-size: 19px;
+          }
         }
       }
 
@@ -2345,17 +2365,6 @@ export default {
       }
     }
 
-    & .round-image {
-      min-width: 50px;
-      height: 50px;
-      margin: 10px 10px 10px 0;
-      border-radius: 50%;
-      overflow: hidden;
-      .logo {
-        min-width: 50px;
-        height: 50px;
-      }
-    }
   }
 }
 

package/pages/c/_cluster/auth/roles/index.vue

@@ -7,6 +7,7 @@ import Loading from '@shell/components/Loading';
 import { SUBTYPE_MAPPING, CREATE_VERBS } from '@shell/models/management.cattle.io.roletemplate';
 import { NAME } from '@shell/config/product/auth';
 import { BLANK_CLUSTER } from '@shell/store/store-types.js';
+import { RcButton } from '@components/RcButton';
 
 const GLOBAL = SUBTYPE_MAPPING.GLOBAL.key;
 const CLUSTER = SUBTYPE_MAPPING.CLUSTER.key;
@@ -31,7 +32,7 @@ export default {
   name: 'Roles',
 
   components: {
-    Tab, Tabbed, ResourceTable, Loading
+    Tab, Tabbed, ResourceTable, Loading, RcButton
   },
 
   async fetch() {
@@ -162,13 +163,13 @@ export default {
       </div>
       <div class="actions-container">
         <div class="actions">
-          <router-link
+          <rc-button
             v-if="canCreate"
+            size="large"
             :to="createLocation"
-            class="btn role-primary"
           >
             {{ createLabel }}
-          </router-link>
+          </rc-button>
         </div>
       </div>
     </header>

package/pages/c/_cluster/explorer/__tests__/index.test.ts

@@ -1,12 +1,11 @@
-import { clone } from '@shell/utils/object';
+import { mergeWithReplace } from '@shell/utils/object';
 import Dashboard from '@shell/pages/c/_cluster/explorer/index.vue';
 import { shallowMount } from '@vue/test-utils';
 import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
-import { NODE_ARCHITECTURE } from '@shell/config/labels-annotations';
 import { WORKLOAD_TYPES } from '@shell/config/types';
 
 describe('page: cluster dashboard', () => {
-  const mountOptions = {
+  const createMountOptions = () => ({
     global: {
       stubs: {
         'router-link': true,
@@ -17,12 +16,11 @@ describe('page: cluster dashboard', () => {
           dispatch: jest.fn(),
           getters:  {
             currentCluster: {
-              id:                         'cluster',
-              metadata:                   { creationTimestamp: Date.now() },
-              status:                     { provider: 'foo' },
-              kubernetesVersionBase:      '0.0.0',
-              kubernetesVersionExtension: 'k3s',
+              id:       'cluster',
+              metadata: { creationTimestamp: Date.now() },
+              status:   { provider: 'foo' },
             },
+            'management/byId':   jest.fn(),
             'cluster/inError':   () => false,
             'cluster/schemaFor': jest.fn(),
             'cluster/canList':   jest.fn(),
@@ -36,7 +34,7 @@ describe('page: cluster dashboard', () => {
         }
       },
     }
-  };
+  });
 
   describe.each([
     'etcd',
@@ -49,7 +47,7 @@ describe('page: cluster dashboard', () => {
       [STATES_ENUM.HEALTHY, 'icon-checkmark', `${ componentId }foo`, [{ status: 'True' }]],
       [STATES_ENUM.UNHEALTHY, 'icon-warning', `${ componentId }foo`, [{ status: 'False' }]],
     ])('should show %p status', (status, iconClass, name, conditions) => {
-      const options = clone(mountOptions);
+      const options = createMountOptions();
 
       options.global.mocks.$store.getters.currentCluster.status = {
         provider:          'provider',
@@ -100,7 +98,7 @@ describe('page: cluster dashboard', () => {
     ]]
   ])('%p cluster - %p agent health box :', (_, agentId, isLocal, agentResources, statuses) => {
     it.each(statuses)('should NOT show %p status due to missing canList permissions', (status, iconClass, isLoaded, disconnected, error, conditions, readyReplicas, unavailableReplicas) => {
-      const options = clone(mountOptions);
+      const options = createMountOptions();
 
       options.global.mocks.$store.getters.currentCluster.isLocal = isLocal;
 
@@ -168,7 +166,7 @@ describe('page: cluster dashboard', () => {
     it.each(statuses)('should show %p status', async(status, iconClass, clickable, isLoaded, disconnected, error, conditions, readyReplicas, unavailableReplicas) => {
       let agentRoute = null;
 
-      const options = clone(mountOptions);
+      const options = createMountOptions();
 
       options.global.mocks.$store.getters.currentCluster.isLocal = isLocal;
 
@@ -221,7 +219,7 @@ describe('page: cluster dashboard', () => {
   });
 
   it('local cluster - cattle agent health box - should be hidden', () => {
-    const options = clone(mountOptions);
+    const options = createMountOptions();
 
     options.global.mocks.$store.getters.currentCluster.isLocal = true;
 
@@ -241,18 +239,18 @@ describe('page: cluster dashboard', () => {
 
   describe('cluster details', () => {
     it.each([
-      ['clusterProvider', 'other', []],
-      ['kubernetesVersion', 'glance.version', []],
-      ['created', 'glance.created', []],
-      ['architecture', 'mixed', [{ labels: { [NODE_ARCHITECTURE]: 'amd64' } }, { labels: { [NODE_ARCHITECTURE]: 'intel' } }]],
-      ['architecture', 'mixed', [{ labels: { [NODE_ARCHITECTURE]: 'amd64' } }, { labels: { } }]],
-      ['architecture', 'amd64', [{ labels: { [NODE_ARCHITECTURE]: 'amd64' } }]],
-      ['architecture', 'unknown', [{ labels: { } }]],
-      ['architecture', 'glance.architecture', [{ metadata: { state: { transitioning: true } } }]],
-    ])('should show %p label %p', (label, text, nodes) => {
-      const options = clone(mountOptions);
-
-      options.global.mocks.$store.getters['cluster/all'] = () => nodes;
+      ['clusterProvider', 'abc', { provisionerDisplay: 'abc' }],
+      ['kubernetesVersion', 'glance.version', null],
+      ['created', 'glance.created', null],
+      ['architecture', 'mixed', { architecture: { label: 'mixed' } }],
+      ['architecture', 'amd64', { architecture: { label: 'amd64' } }],
+      ['architecture', 'glance.architecture', { architecture: { label: null } }],
+    ])('should show %p label %p', (label, text, mgmtCluster) => {
+      const options = createMountOptions();
+
+      const currentCluster = options.global.mocks.$store.getters['currentCluster'];
+
+      options.global.mocks.$store.getters['currentCluster'] = mgmtCluster ? mergeWithReplace(currentCluster, mgmtCluster) : currentCluster; // eslint-disable-line jest/no-if
 
       const wrapper = shallowMount(Dashboard, options);
 

package/pages/c/_cluster/explorer/index.vue

@@ -17,7 +17,6 @@ import {
   CATALOG,
   SECRET
 } from '@shell/config/types';
-import { NODE_ARCHITECTURE } from '@shell/config/labels-annotations';
 import { setPromiseResult } from '@shell/utils/promise';
 import AlertTable from '@shell/components/AlertTable';
 import { Banner } from '@components/Banner';
@@ -220,51 +219,11 @@ export default {
     },
 
     displayProvider() {
-      const other = 'other';
-
-      let provider = this.currentCluster?.status?.provider || this.currentCluster?.status?.driver.toLowerCase() || other;
-
-      if (provider === 'rke.windows') {
-        provider = 'rkeWindows';
-      }
-
-      if (!this.$store.getters['i18n/exists'](`cluster.provider.${ provider }`)) {
-        provider = 'other';
-      }
-
-      return this.t(`cluster.provider.${ provider }`);
-    },
-
-    nodesArchitecture() {
-      const obj = {};
-
-      this.nodes?.forEach((node) => {
-        if (!node.metadata?.state?.transitioning) {
-          const architecture = node.labels?.[NODE_ARCHITECTURE];
-
-          const key = architecture || this.t('cluster.architecture.label.unknown');
-
-          obj[key] = (obj[key] || 0) + 1;
-        }
-      });
-
-      return obj;
+      return this.currentCluster?.provisionerDisplay;
     },
 
     architecture() {
-      const keys = Object.keys(this.nodesArchitecture);
-
-      switch (keys.length) {
-      case 0:
-        return { label: this.t('generic.provisioning') };
-      case 1:
-        return { label: keys[0] };
-      default:
-        return {
-          label:   this.t('cluster.architecture.label.mixed'),
-          tooltip: keys.reduce((acc, k) => `${ acc }${ k }: ${ this.nodesArchitecture[k] }<br>`, '')
-        };
-      }
+      return this.currentCluster?.architecture;
     },
 
     isHarvesterCluster() {
@@ -395,6 +354,7 @@ export default {
 
     metricAggregations() {
       const metrics = this.nodeMetrics.filter((nodeMetrics) => {
+        // This should use cluster/byId getter
         const node = this.nodes.find((nd) => nd.id === nodeMetrics.id);
 
         return node;
@@ -464,9 +424,6 @@ export default {
         }
       };
     },
-    hasNodes() {
-      return this.nodes?.length > 0;
-    },
     kubernetesVersion() {
       const base = this.currentCluster?.kubernetesVersionBase || '';
       const extension = this.currentCluster?.kubernetesVersionExtension || '';
@@ -584,8 +541,7 @@ export default {
 
     async goToHarvesterCluster() {
       try {
-        const provClusters = await this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
-        const provCluster = provClusters.find((p) => p.mgmt.id === this.currentCluster.id);
+        const provCluster = await this.$store.dispatch('management/find', { type: CAPI.RANCHER_CLUSTER, id: this.currentCluster.provClusterId });
 
         await provCluster.goToHarvesterCluster();
       } catch {
@@ -653,7 +609,7 @@ export default {
         <span>{{ kubernetesVersion }}</span>
       </div>
       <div
-        v-if="hasNodes"
+        v-if="architecture"
         data-testid="architecture__label"
       >
         <label>{{ t('glance.architecture') }}: </label>

package/pages/c/_cluster/explorer/workload-dashboard/ByNamespaceSection.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import WorkloadNamespaceCard from './WorkloadNamespaceCard.vue';
+import type { WorkloadDashboardByNamespaceCard, WorkloadDashboardNamespaceNavigateFn, WorkloadDashboardFilterByNamespaceFn } from './types';
+
+defineProps<{
+  cards: WorkloadDashboardByNamespaceCard[];
+  navigateToNamespace: WorkloadDashboardNamespaceNavigateFn;
+  filterByNamespace: WorkloadDashboardFilterByNamespaceFn;
+}>();
+</script>
+
+<template>
+  <div class="card-grid">
+    <WorkloadNamespaceCard
+      v-for="card in cards"
+      :key="card.title"
+      :title="card.title"
+      :rows="card.rows"
+      :navigate-to-namespace="navigateToNamespace"
+      :filter-by-namespace="filterByNamespace"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+}
+</style>