@rancher/shell 3.0.1-rc.4 → 3.0.1

package/assets/data/aws-regions.json

@@ -10,6 +10,7 @@
   "ap-southeast-2",
   "ap-southeast-3",
   "ap-southeast-4",
+  "ap-southeast-5",
   "ca-central-1",
   "ca-west-1",
   "cn-north-1",

package/assets/styles/base/_basic.scss

@@ -89,6 +89,11 @@ A {
     text-decoration: underline;
     color: var(--body-text);
   }
+
+  &:focus-visible {
+    @include focus-outline;
+    outline-offset: 2px;
+  }
 }
 
 HR {

package/assets/styles/base/_mixins.scss

@@ -147,8 +147,16 @@
   }
 }
 
+// -------------------------------------------------------------------------------------------------
+// Focus styles
+
 @mixin form-focus {
   // Focus for form like elements (not to be confused with basic :focus style)
   outline: none;
   border-color: var(--outline);
+}
+
+@mixin focus-outline {
+  // Focus for form like elements (not to be confused with basic :focus style)
+  outline: 2px solid var(--primary-keyboard-focus);
 }

package/assets/styles/global/_button.scss

@@ -77,6 +77,11 @@ button,
     background-color: var(--primary-hover-bg);
     color: var(--primary-text);
   }
+
+  &:focus-visible {
+    @include focus-outline;
+    outline-offset: 2px;
+  }
 }
 
 .role-secondary {

package/assets/styles/themes/_dark.scss

@@ -21,6 +21,7 @@
 
   // dark main text
   $lightest: #ffffff;
+  $keyboard-focus: #00ddff;
 
   // menu cluster description active+hover
   $desc-light: #EEEFF4;
@@ -45,6 +46,7 @@
   --default-light-bg           : #{rgba($dark, 0.05)};
   --slider-light-bg            : #{rgba($darker, 1)};
   --slider-light-bg-right      : #{rgba($darker, 0)};
+  --primary-keyboard-focus     : #{$keyboard-focus};
 
   --muted                      : #{$disabled};
 

package/assets/styles/themes/_light.scss

@@ -26,6 +26,7 @@ $disabled  : $medium;
 $primary         : #3D98D3;
 $secondary       : $darker;
 $link            : #3D98D3;
+$keyboard-focus  : #3300ff;
 
 // Status colors
 $success         : #5D995D;
@@ -53,6 +54,7 @@ BODY, .theme-light {
   --primary-border             : #{$primary};
   --primary-banner-bg          : #{rgba($primary, 0.15)};
   --primary-light-bg           : #{rgba($primary, 0.05)};
+  --primary-keyboard-focus     : #{$keyboard-focus};
 
 
   .text-primary {

package/assets/translations/en-us.yaml

@@ -120,6 +120,7 @@ locale:
   none: (None)
 
 nav:
+  expandCollapseAppBar: Expand/Collapse the Application Bar
   harvesterDashboard: Harvester Dashboard
   backToRancher: Cluster Manager
   tools: Tools
@@ -273,6 +274,9 @@ suffix:
 about:
   title: About
   versions:
+    downloadImages: "Download {listName} images list"
+    downloadCli: "Download CLI for {os}"
+    githubRepo: "Open GitHub repository for the {name} component"
     title: Versions
     component: Component
     version: Version
@@ -1079,14 +1083,17 @@ catalog:
       exponentialBackOff:
         label: Exponential Back Off
         minWait:
-          label: Min Wait Time (in Seconds)
-          placeholder: 1 (default)
+          label: Min Wait Time
+          placeholder: 'default: 1'
         maxWait:
-          label: Max Wait Time (in Seconds)
-          placeholder: 5 (default)
+          label: Max Wait Time
+          placeholder: 'default: 5'
         maxRetries:
           label: Max Number of Retries
-          placeholder: 5 (default)
+          placeholder: 'default: 5'
+    refreshInterval:
+      label: Refresh Interval
+      placeholder: 'default: {hours}'
   tools:
     header: Cluster Tools
     noTools: "No Cluster Tools found"
@@ -1921,7 +1928,7 @@ cluster:
     header: Registry for Rancher System Container Images
     label: Enable cluster scoped container registry for Rancher system container images
     description: "If enabled, Rancher will pull container images from this registry during cluster provisioning. By default, Rancher will also use this registry when installing Rancher's official Helm chart apps. If the cluster scoped registry is disabled, system images are pulled from the System Default Registry in the global settings."
-    docsLinkRke2: "For help configuring private registry mirrors, see the RKE2 <a href=\"https://docs.rke2.io/install/containerd_registry_configuration\" target=\"_blank\">documentation.</a>"
+    docsLinkRke2: "For help configuring private registry mirrors, see the RKE2 <a href=\"https://docs.rke2.io/install/private_registry\" target=\"_blank\">documentation.</a>"
     docsLinkK3s: "For help configuring private registry mirrors, see the K3s <a href=\"https://docs.k3s.io/installation/private-registry\" target=\"_blank\">documentation.</a>"
   provider:
     aliyunecs: Aliyun ECS
@@ -2198,11 +2205,20 @@ clusterIndexPage:
       label: Unhealthy Nodes
       noRows: There are no unhealthy nodes to show.
     componentStatus:
-      etcd: Etcd
-      scheduler: Scheduler
-      controller-manager: Controller Manager
-      cattle: Cattle
-      fleet: Fleet
+      component:
+        etcd:
+          label: Etcd
+        scheduler:
+          label: Scheduler
+        controller-manager:
+          label: Controller Manager
+        cattle:
+          label: Cattle
+        fleet:
+          label: Fleet
+      tooltip:
+        disconnected: Agent disconnected
+        unavailableReplicas: Replicas not available
     certs:
       label: Certificates
 

package/assets/translations/zh-hans.yaml

@@ -1751,7 +1751,7 @@ cluster:
   privateRegistry:
     label: 为 Rancher 系统容器镜像启用集群级别的容器镜像仓库
     description: "如果启用，Rancher 将在集群配置期间从该镜像仓库中拉取容器镜像。默认情况下，Rancher 在安装 Rancher 的官方 Helm Chart 应用程序时也会使用此镜像仓库。如果集群级别的镜像仓库被禁用，将从全局设置中的系统默认镜像仓库中拉取系统镜像。"
-    docsLinkRke2: "如需配置私有镜像仓库 mirror 的帮助，请参阅 RKE2 <a href=\"https://docs.rke2.io/install/containerd_registry_configuration\" target=\"_blank\">文档</a>。"
+    docsLinkRke2: "如需配置私有镜像仓库 mirror 的帮助，请参阅 RKE2 <a href=\"https://docs.rke2.io/install/private_registry\" target=\"_blank\">文档</a>。"
     docsLinkK3s: "如需配置私有镜像仓库 mirror 的帮助，请参阅 K3s <a href=\"https://docs.k3s.io/installation/private-registry\" target=\"_blank\">文档</a>。"
   provider:
     aliyunecs: Aliyun ECS

package/chart/monitoring/StorageClassSelector.vue

@@ -44,6 +44,6 @@ export default {
     :options="options"
     :push-tags="true"
     :taggable="true"
-    @input="updateName"
+    @update:value="updateName"
   />
 </template>

package/components/AssignTo.vue

@@ -132,6 +132,7 @@ export default {
           <form>
             <LabeledSelect
               v-model:value="moveTo"
+              data-testid="workspace_options"
               :label="t('assignTo.workspace')"
               :options="workspaceOptions"
               placement="bottom"

package/components/AsyncButton.vue

@@ -288,6 +288,7 @@ export default defineComponent({
       v-if="displayIcon"
       v-clean-tooltip="tooltip"
       :class="{icon: true, 'icon-lg': true, [displayIcon]: true}"
+      class="ml-5 mr-0"
     />
     <span
       v-if="labelAs === 'text' && displayLabel"

package/components/BackLink.vue

@@ -13,6 +13,8 @@ export default {
     v-if="link && link.name"
     :to="link"
     class="back-link"
+    role="link"
+    :aria-label="t('generic.back')"
   >
     <i class="icon icon-chevron-left" /> {{ t('generic.back') }}
   </router-link>
@@ -20,6 +22,7 @@ export default {
     v-else
     to="/"
     class="back-link"
+    :aria-label="t('nav.home')"
   >
     <i class="icon icon-chevron-left" /> {{ t('nav.home') }}
   </router-link>
@@ -30,9 +33,12 @@ export default {
     align-items: center;
     display: flex;
     font-size: 16px;
-    margin-bottom: 10px;
+    margin: 10px 0 20px 0;
     outline: 0;
-    padding: 10px 0;
     width: fit-content;
+
+    &:focus-visible {
+      @include focus-outline;
+    }
   }
 </style>

package/components/PaginatedResourceTable.vue

@@ -0,0 +1,135 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import ResourceFetch from '@shell/mixins/resource-fetch';
+import ResourceTable from '@shell/components/ResourceTable.vue';
+import { StorePaginationResult } from '@shell/types/store/pagination.types';
+
+export type FetchSecondaryResourcesOpts = { canPaginate: boolean }
+export type FetchSecondaryResources = (opts: FetchSecondaryResourcesOpts) => Promise<any>
+
+export type FetchPageSecondaryResourcesOpts = { canPaginate: boolean, force: boolean, page: any[], pagResult: StorePaginationResult }
+export type FetchPageSecondaryResources = (opts: FetchPageSecondaryResourcesOpts) => Promise<any>
+
+/**
+ * This is meant to enable ResourceList like capabilities outside of List pages / components
+ *
+ * Specifically
+ * - Resource Fetch features, including server-side pagination
+ * - Some plumbing
+ *
+ * This avoids polluting the owning component with mixins
+ *
+ */
+export default defineComponent({
+  name: 'PaginatedResourceTable',
+
+  components: { ResourceTable },
+
+  mixins: [ResourceFetch],
+
+  props: {
+    schema: {
+      type:     Object,
+      required: true,
+    },
+
+    headers: {
+      type:    Array,
+      default: null,
+    },
+
+    paginationHeaders: {
+      type:    Array,
+      default: null,
+    },
+
+    groupable: {
+      type:    Boolean,
+      default: null, // Null: auto based on namespaced and type custom groupings
+    },
+
+    namespaced: {
+      type:    Boolean,
+      default: null, // Automatic from schema
+    },
+
+    /**
+     * Information may be required from resources other than the primary one shown per row
+     *
+     * This will fetch them ALL and will be run in a non-server-side pagination world
+     */
+    fetchSecondaryResources: {
+      type:    Function,
+      default: null,
+    },
+
+    /**
+     * Information may be required from resources other than the primary one shown per row
+     *
+     * This will fetch only those relevant to the current page using server-side pagination based filters
+     *
+     * called from shell/mixins/resource-fetch-api-pagination.js
+     */
+    fetchPageSecondaryResources: {
+      type:    Function,
+      default: null,
+    }
+  },
+
+  data() {
+    return { resource: this.schema.id };
+  },
+
+  async fetch() {
+    const promises = [
+      this.$fetchType(this.resource, [], this.inStore),
+    ];
+
+    if (this.fetchSecondaryResources) {
+      promises.push(this.fetchSecondaryResources({ canPaginate: this.canPaginate }));
+    }
+
+    await Promise.all(promises);
+  },
+
+  computed: {
+    safeHeaders() {
+      const customHeaders = this.canPaginate ? this.paginationHeaders : this.headers;
+
+      return customHeaders || this.$store.getters['type-map/headersFor'](this.schema, this.canPaginate);
+    }
+  }
+});
+
+</script>
+
+<template>
+  <div>
+    <ResourceTable
+      v-bind="$attrs"
+      :schema="schema"
+      :rows="rows"
+      :alt-loading="canPaginate"
+      :loading="loading"
+      :groupable="groupable"
+
+      :headers="safeHeaders"
+      :namespaced="namespaced"
+
+      :external-pagination-enabled="canPaginate"
+      :external-pagination-result="paginationResult"
+      @pagination-changed="paginationChanged"
+    >
+      <!-- Pass down templates provided by the caller -->
+      <template
+        v-for="(_, slot) of $slots"
+        v-slot:[slot]="scope"
+      >
+        <slot
+          :name="slot"
+          v-bind="scope"
+        />
+      </template>
+    </ResourceTable>
+  </div>
+</template>

package/components/ResourceList/index.vue

@@ -96,7 +96,6 @@ export default {
     const showMasthead = getters[`type-map/optionsFor`](resource).showListMasthead;
 
     return {
-      inStore,
       schema,
       hasListComponent,
       showMasthead:                     showMasthead === undefined ? true : showMasthead,

package/components/ResourceTable.vue

@@ -429,12 +429,17 @@ export default {
     },
 
     computedGroupBy() {
+      // If we're not showing grouping options we shouldn't have a group by property
+      if (!this.showGrouping) {
+        return null;
+      }
+
       if ( this.groupBy ) {
         // This probably comes from the type-map config for the resource (see ResourceList)
         return this.groupBy;
       }
 
-      if ( this.group === 'namespace' && this.showGrouping ) {
+      if ( this.group === 'namespace' ) {
         // This switches to group rows by a key which is the label for the group (??)
         return 'groupByLabel';
       }

package/components/SortableTable/index.vue

@@ -361,7 +361,13 @@ export default {
     externalPaginationResult: {
       type:    Object,
       default: null
+    },
+
+    manualRefreshButtonSize: {
+      type:    String,
+      default: ''
     }
+
   },
 
   data() {
@@ -1140,8 +1146,8 @@ export default {
           <slot name="header-right" />
           <AsyncButton
             v-if="isTooManyItemsToAutoUpdate"
-            class="manual-refresh"
             mode="manual-refresh"
+            :size="manualRefreshButtonSize"
             :current-phase="refreshButtonPhase"
             @click="debouncedRefreshTableData"
           />
@@ -1568,10 +1574,6 @@ export default {
     opacity: 0.5;
     pointer-events: none;
   }
-
-  .manual-refresh {
-    height: 40px;
-  }
   .advanced-filter-group {
     position: relative;
     margin-left: 10px;
@@ -1672,7 +1674,7 @@ export default {
         margin-right: 10px;
         font-size: 11px;
       }
-     .cross {
+      .cross {
         font-size: 12px;
         font-weight: bold;
         cursor: pointer;

package/components/Tabbed/index.vue

@@ -4,10 +4,15 @@ import isEmpty from 'lodash/isEmpty';
 import { addObject, removeObject, findBy } from '@shell/utils/array';
 import { sortBy } from '@shell/utils/sort';
 import findIndex from 'lodash/findIndex';
+import { ExtensionPoint, TabLocation } from '@shell/core/types';
+import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
+import Tab from '@shell/components/Tabbed/Tab';
 
 export default {
   name: 'Tabbed',
 
+  components: { Tab },
+
   emits: ['changed', 'addTab', 'removeTab'],
 
   props: {
@@ -82,9 +87,19 @@ export default {
   },
 
   data() {
+    const extensionTabs = getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams) || [];
+
+    const parsedExtTabs = extensionTabs.map((item) => {
+      return {
+        ...item,
+        active: false
+      };
+    });
+
     return {
-      tabs:          [],
-      activeTabName: null,
+      tabs:          [...parsedExtTabs],
+      extensionTabs: parsedExtTabs,
+      activeTabName: null
     };
   },
 
@@ -320,6 +335,24 @@ export default {
       }"
     >
       <slot />
+      <!-- Extension tabs -->
+      <Tab
+        v-for="tab, i in extensionTabs"
+        :key="`${tab.name}${i}`"
+        :name="tab.name"
+        :label="tab.label"
+        :label-key="tab.labelKey"
+        :weight="tab.weight"
+        :tooltip="tab.tooltip"
+        :show-header="tab.showHeader"
+        :display-alert-icon="tab.displayAlertIcon"
+        :error="tab.error"
+        :badge="tab.badge"
+      >
+        <component
+          :is="tab.component"
+        />
+      </Tab>
     </div>
   </div>
 </template>

package/components/form/ResourceLabeledSelect.vue

@@ -52,14 +52,14 @@ export enum RESOURCE_LABEL_SELECT_MODE {
 }
 
 /**
- * Convience wrapper around the LabelSelect component to support pagination
+ * Convenience  wrapper around the LabelSelect component to support pagination
  *
  * Handles
  *
  * 1) Conditionally enabling the pagination feature given system settings
  * 2) Helper function to fetch the pagination result
  *
- * A number of ways can be provided to override the convienences (see props)
+ * A number of ways can be provided to override the conveniences (see props)
  */
 export default defineComponent({
   name: 'ResourceLabeledSelect',

package/components/form/ResourceTabs/index.vue

@@ -11,8 +11,6 @@ import { EVENT } from '@shell/config/types';
 import SortableTable from '@shell/components/SortableTable';
 import { _VIEW } from '@shell/config/query-params';
 import RelatedResources from '@shell/components/RelatedResources';
-import { ExtensionPoint, TabLocation } from '@shell/core/types';
-import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import { isConditionReadyAndWaiting } from '@shell/plugins/dashboard-store/resource-class';
 
 export default {
@@ -77,7 +75,6 @@ export default {
       allEvents:      [],
       selectedTab:    this.defaultTab,
       didLoadEvents:  false,
-      extensionTabs:  getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams),
       inStore,
       showConditions: false,
     };
@@ -246,25 +243,5 @@ export default {
         direction="to"
       />
     </Tab>
-
-    <!-- Extension tabs -->
-    <Tab
-      v-for="tab, i in extensionTabs"
-      :key="`${tab.name}${i}`"
-      :name="tab.name"
-      :label="tab.label"
-      :label-key="tab.labelKey"
-      :weight="tab.weight"
-      :tooltip="tab.tooltip"
-      :show-header="tab.showHeader"
-      :display-alert-icon="tab.displayAlertIcon"
-      :error="tab.error"
-      :badge="tab.badge"
-    >
-      <component
-        :is="tab.component"
-        :resource="value"
-      />
-    </Tab>
   </Tabbed>
 </template>

package/components/form/Taints.vue

@@ -71,7 +71,7 @@ export default {
       :preserve-keys="['effect']"
       :add-label="t('labels.addTaint')"
       :disabled="disabled"
-      @update:value="$emit('input', $event)"
+      @update:value="(e) => $emit('update:value', e)"
     >
       <template #label:effect>
         {{ t('tableHeaders.effect') }}