@rancher/shell 3.0.7 → 3.0.8-rc.10

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

@@ -84,11 +84,21 @@ export default {
     maintainers() {
       const maintainers = this.version.maintainers || this.versionInfo?.chart?.maintainers || [];
 
-      return maintainers.map((m) => {
+      return maintainers.map((m, i) => {
+        const label = m.name || m.url || m.email || this.t('generic.unknown');
+        let href = null;
+
+        if (m.url) {
+          href = m.url;
+        } else if (m.email) {
+          href = `mailto:${ m.email }`;
+        }
+
         return {
-          id:   m.name,
-          text: m.name,
-          url:  m.email ? `mailto:${ m.email }` : m.url
+          id:   `${ m.name }-${ i }`,
+          name: m.name,
+          label,
+          href
         };
       });
     },
@@ -259,11 +269,11 @@ export default {
               class="status"
             >
               <i
-                v-clean-tooltip="t(status.tooltip.key)"
+                v-clean-tooltip="status.tooltip.key ? t(status.tooltip.key) : status.tooltip.text"
                 :class="['icon', status.icon, status.color]"
                 :style="{color: status.customColor}"
                 role="img"
-                :aria-label="t(status.tooltip.key)"
+                :aria-label="status.tooltip.key ? t(status.tooltip.key) : status.tooltip.text"
               />
             </div>
           </div>
@@ -456,18 +466,26 @@ export default {
             data-testid="chart-home-link"
           >{{ home }}<i class="icon icon-external-link" /><span class="sr-only">{{ t('generic.opensInNewTab') }}</span></a>
         </div>
-        <div
-          v-if="maintainers.length"
-          class="chart-body__info-section"
-        >
+        <div class="chart-body__info-section">
           <h4>{{ t('catalog.chart.info.maintainers') }}</h4>
-          <a
-            v-for="m of maintainers"
-            :key="m.id"
-            :href="m.url"
-            rel="nofollow noopener noreferrer"
-            target="_blank"
-          >{{ m.text }}<span class="sr-only">{{ t('generic.opensInNewTab') }}</span></a>
+          <template v-if="maintainers.length">
+            <div
+              v-for="m of maintainers"
+              :key="m.id"
+            >
+              <a
+                v-if="m.href"
+                v-clean-tooltip="m.name ? t('catalog.chart.info.maintainerContactTooltip', { maintainer: m.name }) : undefined"
+                :href="m.href"
+                rel="nofollow noopener noreferrer"
+                target="_blank"
+              >
+                {{ m.label }}
+              </a>
+              <span v-else>{{ m.label }}</span>
+            </div>
+          </template>
+          <span v-else>{{ t('generic.unknown') }}</span>
         </div>
         <div
           v-if="version.sources"

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

@@ -7,7 +7,7 @@ import {
   REPO_TYPE, REPO, CHART, VERSION, SEARCH_QUERY, SORT_BY, _FLAGGED, CATEGORY, DEPRECATED, HIDDEN, TAG, STATUS
 } from '@shell/config/query-params';
 import { DOCS_BASE } from '@shell/config/private-label';
-import { APP_STATUS, compatibleVersionsFor, filterAndArrangeCharts, normalizeFilterQuery } from '@shell/store/catalog';
+import { APP_STATUS, filterAndArrangeCharts, normalizeFilterQuery } from '@shell/store/catalog';
 import { lcFirst } from '@shell/utils/string';
 import { sortBy } from '@shell/utils/sort';
 import debounce from 'lodash/debounce';
@@ -24,6 +24,7 @@ import AppChartCardFooter from '@shell/pages/c/_cluster/apps/charts/AppChartCard
 import AddRepoLink from '@shell/pages/c/_cluster/apps/charts/AddRepoLink';
 import StatusLabel from '@shell/pages/c/_cluster/apps/charts/StatusLabel';
 import RichTranslation from '@shell/components/RichTranslation.vue';
+import { getLatestCompatibleVersion } from '@shell/utils/chart';
 import Select from '@shell/components/form/Select';
 
 const createInitialFilters = () => ({
@@ -190,6 +191,13 @@ export default {
         sort:        this.selectedSortOption
       });
 
+      const OSs = this.currentCluster.workerOSs;
+      const showPrerelease = this.$store.getters['prefs/get'](SHOW_PRE_RELEASE);
+
+      res.forEach((chart) => {
+        chart._latestCompatibleVersion = getLatestCompatibleVersion(chart, OSs, showPrerelease);
+      });
+
       // status filtering is separated from other filters because "isInstalled" and "upgradeable" statuses are already calculated in models/chart.js
       // by doing this we won't need to re-calculate it in filterAndArrangeCharts
       if (!statuses.length) {
@@ -265,7 +273,7 @@ export default {
               statuses: chart.cardContent.statuses
             },
             subHeaderItems: chart.cardContent.subHeaderItems,
-            image:          { src: chart.versions[0].icon, alt: { text: this.t('catalog.charts.iconAlt', { app: get(chart, 'chartNameDisplay') }) } },
+            image:          { src: chart.latestCompatibleVersion.icon, alt: { text: this.t('catalog.charts.iconAlt', { app: get(chart, 'chartNameDisplay') }) } },
             content:        { text: chart.chartDescription },
             footerItems:    chart.cardContent.footerItems,
             rawChart:       chart
@@ -343,17 +351,7 @@ export default {
     }, 100),
 
     selectChart(chart) {
-      let version;
-      const OSs = this.currentCluster.workerOSs;
-      const showPrerelease = this.$store.getters['prefs/get'](SHOW_PRE_RELEASE);
-      const compatibleVersions = compatibleVersionsFor(chart, OSs, showPrerelease);
-      const versions = chart.versions;
-
-      if (compatibleVersions.length > 0) {
-        version = compatibleVersions[0].version;
-      } else {
-        version = versions[0].version;
-      }
+      const version = chart.latestCompatibleVersion.version;
 
       const query = {
         [REPO_TYPE]: chart.repoType,

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

@@ -1203,7 +1203,7 @@ export default {
         const { allValues, values: crdValues } = versionInfo;
 
         // only save crd values that differ from the defaults defined in chart values.yaml
-        const customizedCrdValues = diff(crdValues, allValues);
+        const customizedCrdValues = diff(crdValues, allValues, true);
 
         // CRD globals should be overwritten by main chart globals
         // we want to avoid including globals present on crd values and not main chart values

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

@@ -6,6 +6,8 @@ import PaginatedResourceTable from '@shell/components/PaginatedResourceTable';
 import { STEVE_EVENT_FIRST_SEEN, STEVE_EVENT_LAST_SEEN, STEVE_EVENT_OBJECT, STEVE_NAME_COL } from '@shell/config/pagination-table-headers';
 import { headerFromSchemaColString } from '@shell/store/type-map.utils';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
+import { ROWS_PER_PAGE } from '@shell/store/prefs';
+import { RcDropdown, RcDropdownTrigger, RcDropdownItem } from '@components/RcDropdown';
 
 const reason = {
   ...REASON,
@@ -29,15 +31,42 @@ const eventHeaders = [
   },
 ];
 
+// Local storage key for the events table row count preference
+const ROWS_COUNT_PREF = 'events-row-count-pref';
+// Value to use when we want to use the user's preference from the table
+const ROWS_PREF_USE_TABLE = -1;
+// Default number of rows to show in the events table when not set in the preference
+const ROWS_COUNT_DEFAULT = 10;
+
 export default {
-  components: { PaginatedResourceTable },
+  components: {
+    PaginatedResourceTable,
+    RcDropdown,
+    RcDropdownItem,
+    RcDropdownTrigger
+  },
 
   data() {
+    const tableRowOptions = this.$store.getters['prefs/options'](ROWS_PER_PAGE);
+
+    let rowsPerPage = ROWS_COUNT_DEFAULT;
+
+    // Read the current value from localStorage if it exists
+    if (window.localStorage.getItem(ROWS_COUNT_PREF)) {
+      try {
+        rowsPerPage = parseInt(window.localStorage.getItem(ROWS_COUNT_PREF));
+      } catch (e) {
+        console.error('Error parsing rows count from localStorage:', e); // eslint-disable-line no-console
+      }
+    }
+
     return {
+      rowsPerPage,
       schema:            null,
       events:            [],
       eventHeaders,
       paginationHeaders: null,
+      options:           tableRowOptions || [],
       allEventsLink:     {
         name:   'c-cluster-product-resource',
         params: {
@@ -72,7 +101,34 @@ export default {
     this.dismissRouteHandler = this.$router.beforeEach(this.onRouteChange);
   },
 
+  computed: {
+    userPrefRowsPerPage() {
+      return parseInt(this.$store.getters['prefs/get'](ROWS_PER_PAGE), 10) || undefined;
+    },
+    rowOptions() {
+      const rowOptions = [];
+
+      this.options.forEach((item) => rowOptions.push({
+        label: this.t('glance.showXEvents', { count: item }),
+        value: item
+      }));
+
+      if (this.userPrefRowsPerPage) {
+        rowOptions.push({
+          label: this.t('glance.useUserPreference', { count: this.userPrefRowsPerPage }),
+          value: ROWS_PREF_USE_TABLE,
+        });
+      }
+
+      return rowOptions;
+    }
+  },
+
   methods: {
+    updateRowsCount(val) {
+      this.rowsPerPage = val;
+      window.localStorage.setItem(ROWS_COUNT_PREF, val);
+    },
     async onRouteChange(to, from, next) {
       if (this.$route.name !== to.name) {
         await this.$store.dispatch('cluster/forgetType', EVENT);
@@ -100,7 +156,7 @@ export default {
     :table-actions="false"
     :row-actions="false"
     :groupable="false"
-    :rows-per-page="10"
+    :rows-per-page="rowsPerPage"
   >
     <template v-slot:header-right>
       <router-link
@@ -110,14 +166,44 @@ export default {
       >
         <span>{{ t('glance.eventsTable') }}</span>
       </router-link>
+      <rc-dropdown>
+        <rc-dropdown-trigger
+          data-testid="events-list-row-count-menu-toggle"
+          :aria-label="t('glance.changeEventsListRowCount')"
+          ghost
+          small
+        >
+          <i class="icon icon-gear" />
+        </rc-dropdown-trigger>
+        <template #dropdownCollection>
+          <rc-dropdown-item
+            v-for="(item, i) in rowOptions"
+            :key="i"
+            :value="item.value"
+            @click.stop="updateRowsCount(item.value)"
+          >
+            <span :class="{ 'selected-pagesize-option': rowsPerPage === item.value }">
+              {{ item.label }}
+            </span>
+          </rc-dropdown-item>
+        </template>
+      </rc-dropdown>
     </template>
   </PaginatedResourceTable>
 </template>
 
 <style lang="scss" scoped>
+.icon.icon-gear {
+  color: var(--primary);
+  padding: 0 8px;
+}
 .events-link {
   align-self: center;
-  padding-right: 20px;
+  margin-right: 10px;
   white-space: nowrap;
 }
+
+.selected-pagesize-option {
+  font-weight: bold;
+}
 </style>

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

@@ -222,7 +222,7 @@ export default {
     displayProvider() {
       const other = 'other';
 
-      let provider = this.currentCluster?.status?.provider || other;
+      let provider = this.currentCluster?.status?.provider || this.currentCluster?.status?.driver.toLowerCase() || other;
 
       if (provider === 'rke.windows') {
         provider = 'rkeWindows';
@@ -484,6 +484,12 @@ export default {
     hasNodes() {
       return this.nodes?.length > 0;
     },
+    kubernetesVersion() {
+      const base = this.currentCluster?.kubernetesVersionBase || '';
+      const extension = this.currentCluster?.kubernetesVersionExtension || '';
+
+      return `${ base }${ extension }`;
+    }
   },
 
   methods: {
@@ -661,11 +667,7 @@ export default {
       </div>
       <div data-testid="kubernetesVersion__label">
         <label>{{ t('glance.version') }}: </label>
-        <span>{{ currentCluster.kubernetesVersionBase }}</span>
-        <span
-          v-if="currentCluster.kubernetesVersionExtension"
-          style="font-size: 0.75em"
-        >{{ currentCluster.kubernetesVersionExtension }}</span>
+        <span>{{ kubernetesVersion }}</span>
       </div>
       <div
         v-if="hasNodes"

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

@@ -96,7 +96,7 @@ export default {
             title:    { text: chart.chartNameDisplay },
             statuses: chart.cardContent.statuses
           },
-          subHeaderItems: chart.cardContent.subHeaderItems.slice(0, 1),
+          subHeaderItems: chart.cardContent.subHeaderItems,
           footerItems:    chart.deploysOnWindows ? [{
             icon:        'icon-tag-alt',
             iconTooltip: { key: 'generic.tags' },
@@ -151,7 +151,7 @@ export default {
           action: 'edit',
         });
 
-        const currentVersion = installedApp.spec.chart.metadata.version;
+        const currentVersion = installedApp.spec?.chart?.metadata?.version;
         const versions = rawChart.versions;
         const currentIndex = versions.findIndex((v) => v.version === currentVersion);
 
@@ -190,7 +190,7 @@ export default {
     },
 
     downgrade(app, chart) {
-      const currentVersion = app.spec.chart.metadata.version;
+      const currentVersion = app.spec?.chart?.metadata?.version;
       const versions = chart.versions;
       const currentIndex = versions.findIndex((v) => v.version === currentVersion);
 

package/pages/c/_cluster/manager/hostedprovider/index.vue

@@ -0,0 +1,220 @@
+<script>
+import { MANAGEMENT, HOSTED_PROVIDER } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
+import { STATE, NAME } from '@shell/config/table-headers';
+import ResourceTable from '@shell/components/ResourceTable';
+import Masthead from '@shell/components/ResourceList/Masthead';
+import Banner from '@components/Banner/Banner.vue';
+import RcStatusBadge from '@components/Pill/RcStatusBadge/RcStatusBadge.vue';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { isRancherPrime } from '@shell/config/version';
+import { stateDisplay, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+import { getHostedProviders } from '@shell/utils/provider';
+
+export default {
+  name:       'HostedProviders',
+  components: {
+    ResourceTable, Masthead, RcStatusBadge, Banner
+  },
+  data() {
+    return {
+      errors:          [],
+      rows:            [],
+      allProviders:    null,
+      resource:        HOSTED_PROVIDER,
+      schema:          this.$store.getters['rancher/schemaFor'](HOSTED_PROVIDER),
+      prime:           isRancherPrime(),
+      settingResource: null
+    };
+  },
+  fetch() {
+    this.allProviders = this.getProviders();
+    this.getSettings();
+    this.generateRows();
+  },
+  watch: {
+    settings() {
+      this.generateRows();
+    },
+    allProviders() {
+      this.generateRows();
+    }
+  },
+  computed: {
+    headers() {
+      return [
+        STATE,
+        NAME,
+      ];
+    },
+    settings() {
+      const providerTypesJSON = this.settingResource?.value;
+      const providerTypes = providerTypesJSON ? JSON.parse(providerTypesJSON) : [];
+      const settingsDict = {};
+
+      providerTypes.forEach((p) => {
+        settingsDict[p.name] = p.active;
+      });
+
+      return settingsDict;
+    },
+
+  },
+  methods: {
+    getProviders() {
+      const context = {
+        dispatch:   this.$store.dispatch,
+        getters:    this.$store.getters,
+        axios:      this.$store.$axios,
+        $extension: this.$store.app.$extension,
+        t:          (...args) => this.t.apply(this, args),
+      };
+
+      return getHostedProviders(context);
+    },
+    getSettings() {
+      this.settingResource = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.KEV2_OPERATORS );
+    },
+    stateDisplay(row) {
+      if (!row.active) {
+        return stateDisplay(STATES_ENUM.INACTIVE);
+      }
+
+      return stateDisplay(STATES_ENUM.ACTIVE);
+    },
+    async setSetting(resources, active) {
+      try {
+        const providerTypes = this.settingResource.value ? JSON.parse(this.settingResource.value) : [];
+        const providerMap = new Map(providerTypes.map((prov) => [prov.name, prov]));
+
+        resources.forEach((resource) => {
+          const provider = providerMap.get(resource.id);
+
+          if (provider) {
+            provider.active = active;
+          } else {
+            providerMap.set(resource.id, { name: resource.id, active });
+          }
+        });
+
+        this.settingResource.value = JSON.stringify(Array.from(providerMap.values()));
+        await this.settingResource.save();
+        this.getSettings();
+      } catch (e) {
+        this.errors = exceptionToErrorsArray(e);
+      }
+    },
+    async generateRows() {
+      this.rows = this.allProviders.map((p) => {
+        const active = p.id in this.settings ? this.settings[p.id] : true;
+        const canNotPrime = p.prime && !this.prime;
+        const canNotChangeSettings = !this.settingResource?.canUpdate;
+        const enableAction = {
+          action:   'activate',
+          label:    this.t('action.activate'),
+          icon:     'icon icon-play',
+          bulkable: true,
+          enabled:  !active && !canNotPrime && !canNotChangeSettings,
+          invoke:   async(opts, resources) => {
+            await this.setSetting(resources, true);
+          }
+        };
+        const disableAction = {
+          action:   'deactivate',
+          label:    this.t('action.deactivate'),
+          icon:     'icon icon-pause',
+          bulkable: true,
+          enabled:  active && !canNotChangeSettings,
+          weight:   -1,
+          invoke:   async(opts, resources) => {
+            await this.setSetting(resources, false);
+          }
+        };
+        const availableActions = [enableAction, disableAction];
+
+        return {
+          id:          p.id,
+          name:        p.label,
+          nameDisplay: p.label,
+          description: p.description || '',
+          prime:       p.prime,
+          active,
+          availableActions
+        };
+      }) || [];
+    },
+    closeError(index) {
+      this.errors.splice(index, 1);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <Masthead
+      :schema="schema"
+      :resource="resource"
+      :type-display="t('providers.hosted.title')"
+      :is-creatable="false"
+    />
+    <Banner
+      color="warning"
+      :label="t('providers.hosted.warning')"
+      :closable="false"
+    />
+    <Banner
+      v-for="(err, i) in errors"
+      :key="i"
+      color="error"
+      :label="err"
+      :closable="true"
+      @close="closeError(i)"
+    />
+    <ResourceTable
+      :schema="schema"
+      :resource="resource"
+      :rows="rows"
+      :headers="headers"
+      :row-actions="true"
+      :table-actions="true"
+      :data-testid="'hosted-provider-list'"
+      key-field="id"
+    >
+      <template #cell:state="{row}">
+        <RcStatusBadge
+          :status="!row.active ? 'error' : 'success'"
+        >
+          {{ stateDisplay(row) }}
+        </RcStatusBadge>
+      </template>
+      <template #cell:name="{row}">
+        <div class="col">
+          <div class="row">
+            <span class="mr-10">{{ row.name }}</span>
+            <RcStatusBadge
+              v-if="row.prime"
+              class="prime-badge"
+              status="success"
+            >
+              {{ t('providers.hosted.prime') }}
+            </RcStatusBadge>
+          </div>
+          <div
+            v-if="row.description"
+            class="description text-muted text-small"
+          >
+            {{ row.description }}
+          </div>
+        </div>
+      </template>
+    </ResourceTable>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.prime-badge {
+  font-size: 10px;
+  line-height: 15px;
+}
+</style>

package/pages/c/_cluster/settings/brand.vue

@@ -18,7 +18,7 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { setFavIcon } from '@shell/utils/favicon';
 import TabTitle from '@shell/components/TabTitle';
 
-const Color = require('color');
+import Color from 'color';
 
 export default {
   components: {

package/pages/c/_cluster/settings/performance.vue

@@ -76,6 +76,13 @@ export default {
           resource: MANAGEMENT.FEATURE
         }
       }).href,
+      settingsPageUrl: this.$router.resolve({
+        name:   'c-cluster-product-resource',
+        params: {
+          product:  SETTING_PRODUCT,
+          resource: MANAGEMENT.SETTING
+        }
+      }).href,
       ssPApplicableTypesOpen: false,
     };
   },
@@ -206,31 +213,11 @@ export default {
         <!-- Inactivity -->
         <div class="mt-20">
           <h2>{{ t('performance.inactivity.title') }}</h2>
-          <p>{{ t('performance.inactivity.description') }}</p>
-          <Checkbox
-            v-model:value="value.inactivity.enabled"
-            :mode="mode"
-            :label="t('performance.inactivity.checkboxLabel')"
-            class="mt-10 mb-20"
-            :primary="true"
-          />
-          <div class="ml-20">
-            <LabeledInput
-              v-model:value="value.inactivity.threshold"
-              data-testid="inactivity-threshold"
-              :mode="mode"
-              :label="t('performance.inactivity.inputLabel')"
-              :disabled="!value.inactivity.enabled"
-              class="input mb-10"
-              type="number"
-              min="0"
-              :rules="[validateInactivityThreshold]"
-            />
-            <span
-              v-clean-html="t('performance.inactivity.information', {}, true)"
-              :class="{ 'text-muted': !value.incrementalLoading.enabled }"
-            />
-          </div>
+          <Banner
+            color="warning"
+          >
+            <span v-clean-html="t(`performance.deprecatedInactivitySetting`, { settingsPageUrl }, true)" />
+          </Banner>
         </div>
         <!-- Websocket Notifications -->
         <div class="mt-40">

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

@@ -164,6 +164,13 @@ describe('page: UI plugins/Extensions', () => {
   });
 
   describe('getFooterItems', () => {
+    it('should return "developer" label for isDeveloper plugins', () => {
+      const plugin = { isDeveloper: true };
+      const items = wrapper.vm.getFooterItems(plugin);
+
+      expect(items[0].labels).toContain('plugins.labels.isDeveloper');
+    });
+
     it('should return "builtin" label for builtin plugins', () => {
       const plugin = { builtin: true };
       const items = wrapper.vm.getFooterItems(plugin);