@rancher/shell 0.5.3 → 2.0.0

package/assets/translations/zh-hans.yaml

@@ -366,7 +366,6 @@ authConfig:
     unrestricted: 允许所有用户访问
   allowedPrincipalIds:
     title: 授权的用户和用户组
-  associatedWarning: '注意：你认证的 {provider} 用户将作为你当前登录的 {vendor} 用户（<code>{username}</code>）的替代登录方式。此 {vendor} 用户的所有全局权限、项目和集群角色绑定也将应用到 {provider} 用户。'
   github:
     clientId:
       label: 客户端 ID
@@ -1668,7 +1667,7 @@ cluster:
   banner:
     warning: '此集群包含此表单不完全支持的 machineSelectorConfig。使用 YAML 编辑器管理完整配置。'
     os: '你正在将 {newOS} worker 节点添加到具有一个或多个 {existingOS} worker 节点的集群。你可能需要升级或删除某些已安装的应用。'
-    rke2-k3-reprovisioning: '更改集群配置可能导致节点重新配置。详情请参见 <a target="blank" href="{docsBase}/cluster-provisioning/rke-clusters/behavior-differences-between-rke1-and-rke2/" target="_blank" rel="noopener nofollow">文档</a>。'
+    rke2-k3-reprovisioning: '更改集群配置可能导致节点重新配置。详情请参见 <a target="blank" href="{docsBase}/how-to-guides/new-user-guides/launch-kubernetes-with-rancher/rke1-vs-rke2-differences#cluster-api" target="_blank" rel="noopener nofollow">文档</a>。'
     desiredNodeGroupWarning: 没有可用于运行 Cluster Agent 的节点。要让集群变为 Active 状态，至少需要有 1 个可用的节点。
     haveArgInfo: 所选 Kubernetes 版本的配置信息不可用。此屏幕中可用的选项将受到限制，你可能需要使用 YAML 编辑器。
   rkeTemplateUpgrade: 模板修订版 {name} 可用于升级
@@ -2313,7 +2312,6 @@ glance:
   version: Kubernetes 版本
   monitoringDashboard: 监控仪表板
   installMonitoring: 安装 Monitoring
-  v1MonitoringInstalled: 已安装 Monitoring V1
   clusterInfo: 集群信息
   eventsTable: 完整事件列表
 
@@ -2793,7 +2791,7 @@ logging:
     dockerRootDirectory: Docker 根目录
     systemdLogPath: systemd 日志路径
     tooltip: '某些 Kubernetes 发行版在 <code>journald</code>中记录日志。你需要定义<code>systemdLogPath</code> 以收集日志。默认路径是<code>/run/log/journal</code>，但某些 Linux 发行版不默认使用该路径。'
-    url: '<a href="https://ranchermanager.docs.rancher.com/v2.8/integrations-in-rancher/logging/logging-helm-chart-options" target="_blank" rel="noopener nofollow noreferrer">了解更多</a>'
+    url: '<a href="{docsBase}/integrations-in-rancher/logging/logging-helm-chart-options" target="_blank" rel="noopener nofollow noreferrer">了解更多</a>'
     default: /run/log/journal
   elasticsearch:
     host: 主机
@@ -3062,7 +3060,7 @@ members:
   clusterMembers: 集群成员
   clusterAndProject: 集群和项目成员
   createActionLabel: 添加
-  clusterMemebership: 集群成员
+  clusterMembership: 集群成员
   projectMembership: 项目成员
   clusterPermissions:
     noDescription: 已创建用户 - 没有描述
@@ -3290,15 +3288,6 @@ monitoring:
       bearerTokenSecret: 持有者令牌密文
       basicAuthUsername: 具有基本认证用户名的密文
       basicAuthPassword: 具有基本认证密码的密文
-  installSteps:
-    uninstallV1:
-      stepTitle: 卸载 V1
-      stepSubtext: 卸载旧版 Monitoring
-      warning1: 已部署 Monitoring V1。你需要先卸载 Monitoring V1 才能安装 Monitoring V2。
-      warning2: <a target="blank" href="{docsBase}/monitoring-alerting/guides/migrating/" target='_blank' rel='noopener nofollow'>了解迁移到 Monitoring V2 的步骤</a>。
-      promptDescription: <div class="mt-20 mb-20">你正在尝试卸载 Monitoring V1。请确保你已阅读迁移步骤。</div>
-      success1:  Monitoring V1 已成功卸载。
-      success2: 点击下一步继续
   tabs:
     alerting: 告警
     general: 通用
@@ -6964,7 +6953,7 @@ podAffinity:
 keyValue:
   keyPlaceholder: 例如：foo
   valuePlaceholder: 例如：bar
-  protip: '把多行 <em>key=value</em> 或 <em>key: value</em> 键值对复制到各字段中，以便批量输入'
+  protip: '把多行 <em>key=value</em> 或 <em>key:value</em> 键值对复制到各字段中，以便批量输入'
 
 registryMirror:
   header: Mirror
@@ -7115,7 +7104,7 @@ performance:
     checkboxLabel: 禁用 WebSocket 通知
   gc:
     label: 资源垃圾回收
-    description: UI 将在本地缓存 kuberentes 资源，避免这些资源被重新抓取。在某些情况下，这可能会导致浏览器中存储了大量数据。你可以启用此设置进行定期删除。
+    description: UI 将在本地缓存 Kubernetes 资源，避免这些资源被重新抓取。在某些情况下，这可能会导致浏览器中存储了大量数据。你可以启用此设置进行定期删除。
     checkboxLabel: 启用垃圾回收
     whenRun:
       description: 垃圾回收运行的时候更新
@@ -7339,17 +7328,6 @@ embedding:
   retry: 重试
   unavailable: Cluster Manager UI 不可用
 
-v1ClusterTools:
-  monitoring:
-    label: Monitoring（旧版）
-    description: '旧版 Monitoring V1。自 Rancher 2.5.0 起，我们已弃用 Monitoring V1。了解<a target="blank" href="{docsBase}/monitoring-alerting/guides/migrating/">迁移到 Monitoring V2 的步骤</a>。'
-  logging:
-    label: Logging（旧版）
-    description: '旧版 Logging V1。自 Rancher 2.5.0 起，我们已弃用 Logging V1。了解<a target="blank" href="{docsBase}/logging/migrating/">迁移到 Logging V2 的步骤</a>。'
-  istio:
-    label: Istio（旧版）
-    description: '旧版 Istio V1。自 Rancher 2.5.0 起，我们已弃用 Istio V1.5。了解<a target="blank" href="{docsBase}/istio/#migrate-from-previous-istio-version">迁移到最新版本</a> 的更多信息。'
-
 legacy:
   alerts: 告警
   apps: 应用

package/babel.config.js

@@ -18,7 +18,7 @@ module.exports = function(api) {
     }
   };
 
-  const plugins = [];
+  const plugins = ['@babel/plugin-transform-nullish-coalescing-operator'];
 
   if (process.env.NODE_ENV === 'test') {
     plugins.push('transform-require-context');

package/chart/__tests__/S3.test.ts

@@ -9,8 +9,15 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 
 describe('rancher-backup: S3', () => {
-  const mockStore = { getters: { 'i18n/t': (text: string) => text, t: (text: string) => text } };
-  const wrapper = mount(S3, { mocks: { $store: mockStore } });
+  const mockStore = {
+    getters: {
+      'i18n/t':                    (text: string) => text,
+      t:                           (text: string) => text,
+      'cluster/all':               () => [],
+      'cluster/paginationEnabled': () => false
+    }
+  };
+  const wrapper = mount(S3, { mocks: { $store: mockStore, $fetchState: { pending: false } } });
 
   it('should emit invalid when form is not filled', () => {
     expect(wrapper.emitted('valid')).toHaveLength(1);

package/chart/monitoring/grafana/index.vue

@@ -5,6 +5,7 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import KeyValue from '@shell/components/form/KeyValue';
 import ArrayList from '@shell/components/form/ArrayList';
 import StorageClassSelector from '@shell/chart/monitoring/StorageClassSelector';
+import { DEFAULT_GRAFANA_STORAGE_SIZE } from '@shell/config/types';
 
 export default {
   components: {
@@ -139,7 +140,7 @@ export default {
         newValsOut = {
           accessModes:      null,
           storageClassName: null,
-          size:             '10Gi',
+          size:             DEFAULT_GRAFANA_STORAGE_SIZE,
           subPath:          null,
           type:             'pvc',
           annotations:      null,
@@ -151,7 +152,7 @@ export default {
         newValsOut = {
           accessModes:      null,
           storageClassName: null,
-          size:             '10Gi',
+          size:             DEFAULT_GRAFANA_STORAGE_SIZE,
           subPath:          null,
           type:             'statefulset',
           enabled:          true,
@@ -236,6 +237,7 @@ export default {
             :labels="persistentStorageTypeLabels"
             :mode="mode"
             :options="persistentStorageTypes"
+            data-testid="radio-group-input-grafana-storage"
           />
         </div>
       </div>
@@ -259,6 +261,7 @@ export default {
               v-model="value.grafana.persistence.size"
               :label="t('monitoring.grafana.storage.size')"
               :mode="mode"
+              data-testid="grafana-storage-pvc-size"
             />
           </div>
           <div class="col span-6">
@@ -325,6 +328,7 @@ export default {
               v-model="value.grafana.persistence.size"
               :label="t('monitoring.grafana.storage.size')"
               :mode="mode"
+              data-testid="grafana-storage-statefulset-size"
             />
           </div>
           <div class="col span-6">

package/chart/monitoring/prometheus/index.vue

@@ -197,12 +197,12 @@ export default {
           :key="wl.id"
           class="mt-10"
         >
-          <nuxt-link
+          <router-link
             :to="wl.link"
             class="btn role-tertiary"
           >
             {{ wl.label }}
-          </nuxt-link>
+          </router-link>
         </div>
       </template>
     </Banner>

package/chart/rancher-backup/S3.vue

@@ -2,15 +2,16 @@
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { Checkbox } from '@components/Form/Checkbox';
 import FileSelector from '@shell/components/form/FileSelector';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect';
 import { mapGetters } from 'vuex';
+import { SECRET } from '@shell/config/types';
 
 export default {
   components: {
     LabeledInput,
     Checkbox,
     FileSelector,
-    LabeledSelect,
+    ResourceLabeledSelect,
   },
 
   props: {
@@ -25,10 +26,10 @@ export default {
       default: 'create'
     },
 
-    secrets: {
-      type:    Array,
-      default: () => []
-    }
+  },
+
+  data() {
+    return { SECRET };
   },
 
   mounted() {
@@ -44,6 +45,7 @@ export default {
       this.$emit('valid', this.valid);
     }
   },
+
   computed: {
     credentialSecret: {
       get() {
@@ -75,7 +77,7 @@ export default {
         // eslint-disable-next-line no-console
         console.warn(e);
       }
-    }
+    },
   },
 
   created() {
@@ -92,13 +94,13 @@ export default {
   <div>
     <div class="row mb-10">
       <div class="col span-6">
-        <LabeledSelect
+        <ResourceLabeledSelect
           v-model="credentialSecret"
           :get-option-label="opt=>opt.metadata.name || ''"
           option-key="id"
           :mode="mode"
-          :options="secrets"
           :label="t('backupRestoreOperator.s3.credentialSecretName')"
+          :resource-type="SECRET"
         />
       </div>
       <div class="col span-6">

package/chart/rancher-backup/index.vue

@@ -7,7 +7,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import { Banner } from '@components/Banner';
 import { get } from '@shell/utils/object';
 import { allHash } from '@shell/utils/promise';
-import { STORAGE_CLASS, SECRET, PV } from '@shell/config/types';
+import { STORAGE_CLASS, PV } from '@shell/config/types';
 import { mapGetters } from 'vuex';
 import { STORAGE } from '@shell/config/labels-annotations';
 
@@ -41,10 +41,8 @@ export default {
     const hash = await allHash({
       storageClasses:    this.$store.dispatch('cluster/findAll', { type: STORAGE_CLASS }),
       persistentVolumes: this.$store.dispatch('cluster/findAll', { type: PV }),
-      secrets:           this.$store.dispatch('cluster/findAll', { type: SECRET }),
     });
 
-    this.secrets = hash.secrets;
     this.storageClasses = hash.storageClasses;
     this.persistentVolumes = hash.persistentVolumes;
 
@@ -89,10 +87,23 @@ export default {
 
   watch: {
     storageSource(neu) {
+      if (!this.value.persistence) {
+        this.value.persistence = {};
+      }
+      if (!this.value.s3) {
+        this.value.s3 = {};
+      }
       switch (neu) {
       case 'pickSC':
         this.value.persistence.enabled = true;
         this.value.s3.enabled = false;
+        if (this.value.persistence.storageClass) {
+          const matchedStorageClass = this.storageClasses.find((sc) => sc.id === this.value.persistence.storageClass);
+
+          if (matchedStorageClass) {
+            this.storageClass = matchedStorageClass;
+          }
+        }
         if (this.defaultStorageClass && (!this.value.persistence.storageClass || this.value.persistence.storageClass === '-' )) {
           this.value.persistence.storageClass = this.defaultStorageClass.id;
           this.storageClass = this.defaultStorageClass;
@@ -155,7 +166,7 @@ export default {
     },
     updatePageValid(update) {
       this.$emit('valid', update);
-    }
+    },
   },
   get
 };
@@ -182,7 +193,6 @@ export default {
       <S3
         v-if="storageSource==='s3'"
         :value="value.s3"
-        :secrets="secrets"
         :mode="mode"
         @valid="updatePageValid($event)"
       />

package/cloud-credential/__tests__/harvester.test.ts

@@ -0,0 +1,18 @@
+import { mount } from '@vue/test-utils';
+import HarvesterCloudCreds from '@shell/cloud-credential/harvester.vue';
+
+const mockStore = { getters: { 'i18n/t': jest.fn() } };
+
+describe('cloud credentials: Harvester', () => {
+  const wrapper = mount(HarvesterCloudCreds, {
+    propsData: { value: {} },
+    mocks:     { $store: mockStore }
+  });
+
+  it('should display the warning banner for token expiration', async() => {
+    const warningBanner = wrapper.find('[data-testid="harvester-token-expiration-warning-banner"]');
+
+    expect(warningBanner.exists()).toBe(true);
+    expect(warningBanner.isVisible()).toBe(true);
+  });
+});

package/cloud-credential/generic.vue

@@ -3,10 +3,13 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import KeyValue from '@shell/components/form/KeyValue';
 import { Banner } from '@components/Banner';
 import { simplify, iffyFields, likelyFields } from '@shell/store/plugins';
+import Loading from '@shell/components/Loading';
 
 export default {
-  components: { KeyValue, Banner },
-  mixins:     [CreateEditView],
+  components: {
+    KeyValue, Banner, Loading
+  },
+  mixins: [CreateEditView],
 
   props: {
     driverName: {
@@ -15,19 +18,19 @@ export default {
     }
   },
 
-  data() {
+  async fetch() {
     let keyOptions = [];
 
-    const normanType = this.$store.getters['plugins/credentialFieldForDriver'](this.driverName);
-    const normanSchema = this.$store.getters['rancher/schemaFor'](`${ normanType }credentialconfig`);
+    const { normanSchema } = this;
 
     if ( normanSchema?.resourceFields ) {
       keyOptions = Object.keys(normanSchema.resourceFields);
     } else {
-      keyOptions = this.$store.getters['plugins/fieldNamesForDriver'](this.driverName);
+      keyOptions = await this.$store.getters['plugins/fieldNamesForDriver'](this.driverName);
     }
 
-    // Prepopulate empty values for keys that sound like they're cloud-credential-ey
+    this.keyOptions = keyOptions;
+
     const keys = [];
 
     for ( const k of keyOptions ) {
@@ -43,11 +46,16 @@ export default {
         this.value.setData(k, '');
       }
     }
+  },
+
+  data() {
+    const normanType = this.$store.getters['plugins/credentialFieldForDriver'](this.driverName);
+    const normanSchema = this.$store.getters['rancher/schemaFor'](`${ normanType }credentialconfig`);
 
     return {
       hasSupport: !!normanSchema,
-      keyOptions,
       errors:     null,
+      normanSchema,
     };
   },
 
@@ -67,7 +75,8 @@ export default {
 </script>
 
 <template>
-  <div>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
     <Banner
       v-if="!hasSupport"
       color="info"

package/cloud-credential/harvester.vue

@@ -1,12 +1,13 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { Banner } from '@components/Banner';
 
 import { get, set } from '@shell/utils/object';
 import { MANAGEMENT, VIRTUAL_HARVESTER_PROVIDER } from '@shell/config/types';
 
 export default {
-  components: { LabeledSelect },
+  components: { LabeledSelect, Banner },
   mixins:     [CreateEditView],
 
   async fetch() {
@@ -47,11 +48,11 @@ export default {
 
       const currentCluster = this.$store.getters['management/all'](MANAGEMENT.CLUSTER).find((x) => x.id === neu);
 
-      this.$nuxt.$loading.start();
+      window.$globalApp.$loading.start();
 
       const kubeconfigContent = await currentCluster.generateKubeConfig();
 
-      this.$nuxt.$loading.finish();
+      window.$globalApp.$loading.finish();
 
       this.value.setData('kubeconfigContent', kubeconfigContent);
     },
@@ -97,6 +98,13 @@ export default {
 
 <template>
   <div>
+    <div class="row mb-10">
+      <Banner
+        color="warning"
+        label-key="cluster.credential.harvester.tokenExpirationWarning"
+        data-testid="harvester-token-expiration-warning-banner"
+      />
+    </div>
     <div class="row mb-10">
       <div
         class="col span-6"

package/components/AppModal.vue

@@ -0,0 +1,167 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name:         'AppModal',
+  inheritAttrs: false,
+  props:        {
+    /**
+     * If set to false, it will not be possible to close modal by clicking on
+     * the background or by pressing Esc key.
+     */
+    clickToClose: {
+      type:    Boolean,
+      default: true,
+    },
+    /**
+     * Width in pixels or percents (50, "50px", "50%").
+     *
+     * Supported string values are <number>% and <number>px
+     */
+    width: {
+      type:    [Number, String],
+      default: 600,
+      validator(value) {
+        if (typeof value === 'number') {
+          return value > 0;
+        }
+
+        if (typeof value === 'string') {
+          return /^(0*(?:[1-9][0-9]*|0)\.?\d*)+(px|%)$/.test(value);
+        }
+
+        return false;
+      }
+    },
+    /**
+     * List of class that will be applied to the modal window
+     */
+    customClass: {
+      type:    String,
+      default: '',
+    },
+    /**
+     * Style that will be applied to the modal window
+     */
+    styles: {
+      type:    String,
+      default: '',
+    },
+    /**
+     * Name of the modal
+     */
+    name: {
+      type:    String,
+      default: '',
+    }
+  },
+  computed: {
+    modalWidth(): string {
+      const uom = typeof (this.width) === 'number' ? 'px' : '';
+
+      return `${ this.width }${ uom }`;
+    },
+    stylesPropToObj(): object {
+      return this.styles.split(';')
+        .map((line) => line.trim().split(':'))
+        .reduce((lines, [key, val]) => {
+          return {
+            ...lines,
+            [key]: val
+          };
+        }, { });
+    },
+    modalStyles(): object {
+      return {
+        width: this.modalWidth,
+        ...this.stylesPropToObj,
+      };
+    }
+  },
+  mounted() {
+    document.addEventListener('keydown', this.handleEscapeKey);
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleEscapeKey);
+  },
+  methods: {
+    handleClickOutside(event: MouseEvent) {
+      if (
+        this.clickToClose &&
+        this.$refs.modalRef &&
+        !(this.$refs.modalRef as HTMLElement).contains(event.target as Node)
+      ) {
+        this.$emit('close');
+      }
+    },
+    handleEscapeKey(event: KeyboardEvent) {
+      if (this.clickToClose && event.key === 'Escape') {
+        this.$emit('close');
+      }
+    }
+  }
+});
+</script>
+
+<template>
+  <mounting-portal
+    mountTo="#modals"
+    name="source"
+    append
+  >
+    <transition
+      name="modal-fade"
+      appear
+    >
+      <div
+        class="modal-overlay"
+        :data-modal="name"
+        @click="handleClickOutside"
+      >
+        <div
+          v-bind="$attrs"
+          ref="modalRef"
+          :class="customClass"
+          class="modal-container"
+          :style="modalStyles"
+          @click.stop
+        >
+          <slot><!--Empty content--></slot>
+        </div>
+      </div>
+    </transition>
+  </mounting-portal>
+</template>
+
+<style lang="scss">
+  .modal-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--overlay-bg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 20;
+
+    .modal-container {
+      background-color: var(--modal-bg);
+      border-radius: var(--border-radius);
+      max-height: 95vh;
+      overflow: auto;
+      border: 2px solid var(--modal-border);
+    }
+  }
+
+  .modal-fade-enter-active,
+  .modal-fade-leave-active {
+    transition: opacity 200ms;
+  }
+
+  .modal-fade-enter,
+  .modal-fade-leave-to {
+    opacity: 0;
+  }
+</style>

package/components/AssignTo.vue

@@ -25,6 +25,7 @@ export default {
       moveTo:        this.workspace,
       loaded:        false,
       allWorkspaces: [],
+      showModal:     false,
     };
   },
 
@@ -51,9 +52,9 @@ export default {
         this.allWorkspaces = await this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE });
         this.moveTo = this.workspace;
         this.loaded = true;
-        this.$modal.show('assignTo');
+        this.showModal = true;
       } else {
-        this.$modal.hide('assignTo');
+        this.showModal = false;
       }
     }
   },
@@ -105,12 +106,14 @@ export default {
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="showModal"
     class="assign-modal"
     name="assignTo"
     styles="background-color: var(--nav-bg); border-radius: var(--border-radius); max-height: 100vh;"
     height="auto"
     :scrollable="true"
+    @close="close"
   >
     <Card
       v-if="loaded"
@@ -165,7 +168,7 @@ export default {
         />
       </div>
     </Card>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang='scss'>