@rancher/shell 3.0.1-rc.3 → 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"
@@ -1480,16 +1487,16 @@ cluster:
       defaultLabel: Use default data directory configuration
       commonLabel: Use a common base directory for data directory configuration (sub-directories will be used for the system-agent, provisioning and distro paths)
       customLabel: Use custom data directories
-    common: 
+    common:
       label: Data directory base path
       tooltip: Data directory base path. We will append the sub-directories appropriate for each directory (/agent, /provisioning and either /rke2 or /k3s)
-    systemAgent: 
+    systemAgent:
       label: System-agent directory path
       tooltip: Data directory for the system-agent connection info and plans
-    provisioning: 
+    provisioning:
       label: Provisioning directory path
       tooltip: Data directory for provisioning related files
-    k8sDistro: 
+    k8sDistro:
       label: K8s Distro directory path
       tooltip: Data directory for the k8s distro
   machineConfig:
@@ -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
 
@@ -5300,7 +5316,6 @@ setup:
     skip: Skip
     tip: What URL should be used for this {vendor} installation? All the nodes in your clusters will need to be able to reach this.
   setPassword: The first order of business is to set a strong password for the default <code>{username}</code> user. We suggest using this random one generated just for you, but enter your own if you like.
-  telemetry: Allow collection of <a href="{docsBase}/faq/telemetry" target="_blank" rel="noopener noreferrer nofollow">anonymous statistics</a> to help us improve {name}
   useManual: Set a specific password to use
   useRandom: Use a randomly generated password
   welcome: Welcome to {vendor}!
@@ -6139,6 +6154,14 @@ wm:
     clear: Clear
     containerName: "Container: {label}"
     failed: "Unable to open a shell to the container (none of the shell commmands succeeded)\n\r"
+    logLevel:
+      info: INFO
+      error: ERROR
+      warning: WARN
+      debug: DEBUG
+    logMessage:
+      containerError: "{ logLevel }: Container missing shell executable (/bin/sh)"
+
   kubectlShell:
     title: "Kubectl: {name}"
 
@@ -6544,7 +6567,7 @@ workload:
           managed: Managed
           shared: Shared
       drivers:
-        driver.longhorn.io: Longhorn
+        driver-longhorn-io: Longhorn
       fsType: Filesystem Type
       shareName: Share Name
       secretName: Secret Name
@@ -7415,7 +7438,6 @@ advancedSettings:
     'ui-dashboard-index': 'HTML index location for the {appName} UI.'
     'ui-offline-preferred': 'Controls whether UI assets are served locally by the server container or from the remote URL defined in the ui-index and ui-dashboard-index settings. The `Dynamic` option will use local assets in production builds of {appName}.'
     'ui-pl': 'Private-Label company name.'
-    'telemetry-opt': 'Telemetry reporting opt-in.'
     'auth-user-info-max-age-seconds': 'The maximum age of a users auth tokens before an auth provider group membership sync will be performed.'
     'auth-user-info-resync-cron': 'Default cron schedule for resyncing auth provider group memberships.'
     'cluster-template-enforcement': 'Non-admins will be restricted to launching clusters via preapproved RKE Templates only.'
@@ -7440,10 +7462,6 @@ advancedSettings:
     'ui-default-landing':
       ember: Cluster Manager
       vue: Cluster Explorer
-    'telemetry-opt':
-      prompt: Prompt
-      in: Opt-in to Telemetry
-      out: Opt-out of Telemetry
     'ui-offline-preferred':
       dynamic: Dynamic
       true: Local

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
@@ -4964,7 +4964,6 @@ setup:
     skip: 跳过
     tip: 此 {vendor} 安装应使用什么 URL？集群中的所有节点都需要能访问该 URL。
   setPassword: 请为默认用户 <code>{username}</code>设置强密码。建议使用生成的随机密码。你也可以自行设置。
-  telemetry: 允许收集<a href="{docsBase}/faq/telemetry" target="_blank" rel="noopener noreferrer nofollow">匿名统计数据</a>，以帮我们改进 {name}。
   useManual: 设置密码
   useRandom: 使用随机生成的密码
   welcome: 欢迎使用 {vendor}！
@@ -7011,7 +7010,6 @@ advancedSettings:
     'ui-dashboard-index': '{appName} UI 的 HTML 索引位置。'
     'ui-offline-preferred': '控制 UI 资产是由服务器容器在本地提供，还是从 ui-index 和 ui-dashboard-index 设置中定义的远程 URL 提供。`动态` 选项将在 {appName} 的生产版本中使用本地资产。'
     'ui-pl': '自有品牌公司名称。'
-    'telemetry-opt': '遥测报告加入。'
     'auth-user-info-max-age-seconds': '在同步验证提供程序组成员之前，用户验证 Token 的最长存活时间。'
     'auth-user-info-resync-cron': '重新同步验证提供程序组成员的默认 cron 调度。'
     'cluster-template-enforcement': '非管理员只能通过预先批准的 RKE 模板启动集群。'
@@ -7032,10 +7030,6 @@ advancedSettings:
     'ui-default-landing':
       ember: Cluster Manager
       vue: 集群浏览器
-    'telemetry-opt':
-      prompt: 提示
-      in: 加入遥测
-      out: 退出遥测
     'ui-offline-preferred':
       dynamic: 动态
       true: 本地

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/ResourceDetail/Masthead.vue

@@ -447,7 +447,7 @@ export default {
               {{ parent.displayName }}:
             </router-link>
             <span v-else>{{ parent.displayName }}:</span>
-            <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
+            <span v-if="value?.detailPageHeaderActionOverride && value?.detailPageHeaderActionOverride(realMode)">{{ value?.detailPageHeaderActionOverride(realMode) }}</span>
             <t
               v-else
               class="masthead-resource-title"

package/components/ResourceDetail/index.vue

@@ -14,6 +14,8 @@ import { clone, diff } from '@shell/utils/object';
 import IconMessage from '@shell/components/IconMessage';
 import ForceDirectedTreeChart from '@shell/components/fleet/ForceDirectedTreeChart';
 import { checkSchemasForFindAllHash } from '@shell/utils/auth';
+import { stringify } from '@shell/utils/error';
+import { Banner } from '@components/Banner';
 
 function modeFor(route) {
   if ( route.query?.mode === _IMPORT ) {
@@ -48,6 +50,7 @@ export default {
     ResourceYaml,
     Masthead,
     IconMessage,
+    Banner
   },
 
   mixins: [CreateEditView],
@@ -75,7 +78,11 @@ export default {
     componentTestid: {
       type:    String,
       default: 'resource-details'
-    }
+    },
+    errorsMap: {
+      type:    Object,
+      default: null
+    },
   },
 
   async fetch() {
@@ -202,16 +209,26 @@ export default {
         notFound = fqid;
       }
 
-      if (realMode === _VIEW) {
-        model = liveModel;
-      } else {
-        model = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
-      }
-
-      initialModel = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
+      try {
+        if (realMode === _VIEW) {
+          model = liveModel;
+        } else {
+          model = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
+        }
+        initialModel = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
 
+        if ( as === _YAML ) {
+          yaml = await getYaml(this.$store, liveModel);
+        }
+      } catch (e) {
+        this.errors.push(e);
+      }
       if ( as === _YAML ) {
-        yaml = await getYaml(this.$store, liveModel);
+        try {
+          yaml = await getYaml(this.$store, liveModel);
+        } catch (e) {
+          this.errors.push(e);
+        }
       }
 
       if ( as === _GRAPH ) {
@@ -225,7 +242,11 @@ export default {
     }
 
     // Ensure common properties exists
-    model = await store.dispatch(`${ inStore }/cleanForDetail`, model);
+    try {
+      model = await store.dispatch(`${ inStore }/cleanForDetail`, model);
+    } catch (e) {
+      this.errors.push(e);
+    }
 
     const out = {
       hasGraph,
@@ -272,6 +293,7 @@ export default {
       notFound:        null,
       canViewChart:    true,
       canViewYaml:     null,
+      errors:          []
     };
   },
 
@@ -311,6 +333,18 @@ export default {
 
       return null;
     },
+    hasErrors() {
+      return this.errors?.length && Array.isArray(this.errors);
+    },
+    mappedErrors() {
+      return !this.errors ? {} : this.errorsMap || this.errors.reduce((acc, error) => ({
+        ...acc,
+        [error]: {
+          message: error?.data?.message || error,
+          icon:    null
+        }
+      }), {});
+    },
   },
 
   watch: {
@@ -360,6 +394,7 @@ export default {
   },
 
   methods: {
+    stringify,
     setSubtype(subtype) {
       this.resourceSubtype = subtype;
     },
@@ -371,6 +406,9 @@ export default {
         m[act]();
       }
     },
+    closeError(index) {
+      this.errors = this.errors.filter((_, i) => i !== index);
+    },
   }
 };
 </script>
@@ -398,6 +436,22 @@ export default {
         :value="liveModel"
       />
     </Masthead>
+    <div
+      v-if="hasErrors"
+      id="cru-errors"
+      class="cru__errors"
+    >
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :data-testid="`error-banner${i}`"
+        :label="stringify(mappedErrors[err].message)"
+        :icon="mappedErrors[err].icon"
+        :closable="true"
+        @close="closeError(i)"
+      />
+    </div>
 
     <ForceDirectedTreeChart
       v-if="isGraph && canViewChart"
@@ -413,8 +467,9 @@ export default {
       :yaml="yaml"
       :offer-preview="offerPreview"
       :done-route="doneRoute"
-      :done-override="value.doneOverride"
+      :done-override="value ? value.doneOverride : null"
       @update:value="$emit('input', $event)"
+      @error="e=>errors.push(e)"
     />
 
     <component

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';
       }