dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-logTest.2

package/components/PaginatedResourceTable.vue

@@ -36,6 +36,35 @@ export default defineComponent({
       default: null,
     },
 
+    groupTooltip: {
+      type:    String,
+      default: 'resourceTable.groupBy.namespace',
+    },
+
+    /**
+     * Field to group rows by, row[groupBy] must be something that can be a map key (or also use groupSort)
+     */
+    groupBy: {
+      type:    String,
+      default: null,
+    },
+
+    /**
+     * Field to order groups by, defaults to groupBy
+     */
+    groupSort: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Override any product based group options
+     */
+    groupOptions: {
+      type:    Array,
+      default: null
+    },
+
     groupable: {
       type:    Boolean,
       default: null, // Null: auto based on namespaced and type custom groupings
@@ -58,6 +87,14 @@ export default defineComponent({
       default: null,
     },
 
+    /**
+     * Use this store instead of the store `inStore` getters
+     */
+    overrideInStore: {
+      type:    String,
+      default: undefined,
+    },
+
     /**
      * Information may be required from resources other than the primary one shown per row
      *
@@ -79,7 +116,7 @@ export default defineComponent({
 
   async fetch() {
     const promises = [
-      this.$fetchType(this.resource, [], this.inStore),
+      this.$fetchType(this.resource, [], this.overrideInStore || this.inStore),
     ];
 
     if (this.fetchSecondaryResources) {
@@ -95,6 +132,12 @@ export default defineComponent({
 
       return customHeaders || this.$store.getters['type-map/headersFor'](this.schema, this.canPaginate);
     }
+  },
+
+  methods: {
+    clearSelection() {
+      this.$refs.table.clearSelection();
+    },
   }
 });
 
@@ -103,18 +146,27 @@ export default defineComponent({
 <template>
   <div>
     <ResourceTable
+      ref="table"
       v-bind="$attrs"
       :schema="schema"
       :rows="rows"
       :alt-loading="canPaginate && !isFirstLoad"
       :loading="loading"
+
+      :group-by="groupBy"
+      :group-sort="groupSort"
       :groupable="groupable"
+      :groupTooltip="groupTooltip"
+      :groupOptions="groupOptions"
+
+      :override-in-store="overrideInStore"
 
       :headers="safeHeaders"
       :namespaced="namespaced"
 
       :external-pagination-enabled="canPaginate"
       :external-pagination-result="paginationResult"
+
       @pagination-changed="paginationChanged"
     >
       <!-- Pass down templates provided by the caller -->

package/components/PodSecurityAdmission.vue

@@ -216,9 +216,9 @@ export default defineComponent({
     <div
       v-for="(psaControl, level, i) in psaControls"
       :key="i"
-      class="row row--y-center mb-20"
+      class="row row--y-center"
     >
-      <span class="col">
+      <span class="col span-1">
         <Checkbox
           v-if="!labelsAlwaysActive"
           v-model:value="psaControl.active"

package/components/ProgressBarMulti.vue

@@ -122,6 +122,7 @@ function toPercent(value, min, max) {
     v-trim-whitespace
     :class="{progress: true, multi: pieces.length > 1}"
     :aria-label="ariaLabelText"
+    role="progressbar"
   >
     <div
       v-for="(piece, idx) of pieces"

package/components/PromptModal.vue

@@ -22,7 +22,6 @@ export default {
 
   computed: {
     ...mapState('action-menu', ['showModal', 'modalData']),
-
     resources() {
       let resources = this.modalData?.resources;
 
@@ -32,11 +31,28 @@ export default {
 
       return resources || [];
     },
-
+    testId() {
+      return this.modalData?.testId || 'prompt-modal-generic-testid';
+    },
+    returnFocusSelector() {
+      return this.modalData?.returnFocusSelector || undefined;
+    },
+    returnFocusFirstIterableNodeSelector() {
+      return this.modalData?.returnFocusFirstIterableNodeSelector || undefined;
+    },
     modalWidth() {
       // property set from workload.js to overwrite modal default width of 600px, with fallback value as well
       return this.modalData?.modalWidth || '610px';
     },
+    customClass() {
+      return this.modalData?.customClass || undefined;
+    },
+    styles() {
+      return this.modalData?.styles || undefined;
+    },
+    height() {
+      return this.modalData?.height || undefined;
+    },
     component() {
       // Looks for a dialog component by looking up in plugins and @shell/dialog/${name}.
       return this.$store.getters['type-map/importDialog'](this.modalData?.component);
@@ -52,6 +68,9 @@ export default {
     },
     closeOnClickOutside() {
       return this.modalData?.closeOnClickOutside;
+    },
+    modalName() {
+      return this.modalData?.modalName;
     }
   },
 
@@ -67,13 +86,18 @@ export default {
       // so that we know when the component is rendered
       this.componentRendered = true;
     },
-    close() {
+    close(data) {
       if (!this.opened) {
         return;
       }
 
       this.errors = [];
-      this.$store.commit('action-menu/togglePromptModal');
+
+      // Guard against events that can be implicitly passed by components
+      const modalData = data instanceof Event ? undefined : data;
+
+      this.$store.commit('action-menu/togglePromptModal', modalData);
+
       if (this.backgroundClosing) {
         this.backgroundClosing();
       }
@@ -93,11 +117,18 @@ export default {
 <template>
   <app-modal
     v-if="opened && component"
+    :name="modalName"
     :click-to-close="closeOnClickOutside"
     :width="modalWidth"
-    :trigger-focus-trap-watcher-based="true"
+    :data-testid="testId"
+    :custom-class="customClass"
+    :styles="styles"
+    :height="height"
+    :trigger-focus-trap="true"
+    :return-focus-selector="returnFocusSelector"
+    :return-focus-first-iterable-node-selector="returnFocusFirstIterableNodeSelector"
     :focus-trap-watcher-based-variable="componentRendered"
-    @close="close()"
+    @close="close"
   >
     <component
       v-bind="modalData.componentProps || {}"
@@ -105,7 +136,7 @@ export default {
       :resources="resources"
       :register-background-closing="registerBackgroundClosing"
       @vue:mounted="onSlotComponentMounted"
-      @close="close()"
+      @close="close"
     />
   </app-modal>
 </template>

package/components/PromptRemove.vue

@@ -44,6 +44,7 @@ export default {
       chartsToRemoveIsApp: false,
       chartsDeleteCrd:     false,
       showModal:           false,
+      cachedDoneLocation:  null
     };
   },
   computed: {
@@ -82,6 +83,22 @@ export default {
       return this.$store.getters['type-map/labelFor'](schema, this.toRemove.length);
     },
 
+   typeZh() {
+    const typeLabel = this.type
+
+    const lowerKey = typeLabel.toLowerCase();
+    const i18nKey = `promptRemoveText.${lowerKey}`;
+
+    console.log(i18nKey, ' i18nKey-------------------------');
+    
+
+    if (this.t(i18nKey)) {
+      return this.t(i18nKey);
+    }
+
+    return typeLabel;
+  },
+
     selfLinks() {
       return this.toRemove.map((resource) => {
         return get(resource, 'links.self');
@@ -222,6 +239,7 @@ export default {
       this.error = '';
       this.chartsDeleteCrd = false;
       this.chartsToRemoveIsApp = false;
+      this.cachedDoneLocation = null;
       this.$store.commit('action-menu/togglePromptRemove');
     },
 
@@ -229,6 +247,8 @@ export default {
       if (this.doneLocation) {
         // doneLocation will recompute to undefined when delete request completes
         this.cachedDoneLocation = { ...this.doneLocation };
+      } else {
+        this.cachedDoneLocation = null;
       }
 
       if (this.hasCustomRemove && this.$refs?.customPrompt?.remove) {
@@ -292,11 +312,17 @@ export default {
         this.done();
       } catch (err) {
         this.error = err.message || err;
+        if (this.error.includes('not supported')) {
+          this.$store.dispatch('growl/error', {
+            title:   '权限不足',
+            message: '当前用户不允许删除集群'
+          }, { root: true });
+        }
         btnCB(false);
       }
     },
     done() {
-      if ( this.cachedDoneLocation && !isEmpty(this.cachedDoneLocation) ) {
+      if (!isEmpty(this.cachedDoneLocation) && this.currentRouter) {
         this.currentRouter.push(this.cachedDoneLocation);
       }
       this.close();
@@ -376,7 +402,7 @@ export default {
             :needs-confirm="needsConfirm"
             :value="toRemove"
             :names="names"
-            :type="type"
+            :type="typeZh"
             :done-location="doneLocation"
             @errors="e => error = e"
             @done="done"

package/components/PromptRestore.vue

@@ -7,7 +7,7 @@ import Date from '@shell/components/formatter/Date.vue';
 import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import { exceptionToErrorsArray } from '@shell/utils/error';
-import { CAPI, NORMAN, SNAPSHOT } from '@shell/config/types';
+import { CAPI, SNAPSHOT } from '@shell/config/types';
 import { set } from '@shell/utils/object';
 import ChildHook, { BEFORE_SAVE_HOOKS } from '@shell/mixins/child-hook';
 import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
@@ -47,14 +47,13 @@ export default {
   },
 
   computed: {
-    // toRestore can be a provisioning.cattle.io.cluster or a rke.cattle.io.etcdsnapshot or an etcdBackup resource
+    // toRestore can be a provisioning.cattle.io.cluster or a rke.cattle.io.etcdsnapshot resource
     ...mapState('action-menu', ['showPromptRestore', 'toRestore']),
     ...mapGetters({ t: 'i18n/t' }),
 
     // Was the dialog opened to restore a specific snapshot, or opened on a cluster to choose
     isCluster() {
-      const isSnapshot = this.toRestore[0]?.type.toLowerCase() === NORMAN.ETCD_BACKUP ||
-      this.toRestore[0]?.type.toLowerCase() === SNAPSHOT;
+      const isSnapshot = this.toRestore[0]?.type.toLowerCase() === SNAPSHOT;
 
       return !isSnapshot;
     },
@@ -79,9 +78,7 @@ export default {
       }
     },
     restoreModeOptions() {
-      const etcdOption = this.isRke2 ? 'none' : 'etcd';
-
-      return [etcdOption, 'kubernetesVersion', 'all'];
+      return ['none', 'kubernetesVersion', 'all'];
     }
   },
 
@@ -112,20 +109,12 @@ export default {
       }
 
       const cluster = this.toRestore?.[0];
-      let promise;
-
-      if (!cluster?.isRke2) {
-        promise = this.$store.dispatch('rancher/findAll', { type: NORMAN.ETCD_BACKUP }).then((snapshots) => {
-          return snapshots.filter((s) => s.state === STATES_ENUM.ACTIVE && s.clusterId === cluster.metadata.name);
-        });
-      } else {
-        promise = this.$store.dispatch('management/findAll', { type: SNAPSHOT }).then((snapshots) => {
-          const toRestoreClusterName = cluster?.clusterName || cluster?.metadata?.name;
+      const promise = this.$store.dispatch('management/findAll', { type: SNAPSHOT }).then((snapshots) => {
+        const toRestoreClusterName = cluster?.clusterName || cluster?.metadata?.name;
 
-          return snapshots.filter((s) => s?.snapshotFile?.status === STATES_ENUM.SUCCESSFUL && s.clusterName === toRestoreClusterName
-          );
-        });
-      }
+        return snapshots.filter((s) => s?.snapshotFile?.status === STATES_ENUM.SUCCESSFUL && s.clusterName === toRestoreClusterName
+        );
+      });
 
       // Map of snapshots by name
       const allSnapshots = await promise.then((snapshots) => {
@@ -154,30 +143,19 @@ export default {
 
     async apply(buttonDone) {
       try {
-        if ( this.isRke2 ) {
-          const cluster = this.$store.getters['management/byId'](CAPI.RANCHER_CLUSTER, this.snapshot.clusterId);
-
-          await this.applyHooks(BEFORE_SAVE_HOOKS);
-
-          const now = cluster.spec?.rkeConfig?.etcdSnapshotRestore?.generation || 0;
-
-          set(cluster, 'spec.rkeConfig.etcdSnapshotRestore', {
-            generation:       now + 1,
-            name:             this.snapshot.name,
-            restoreRKEConfig: this.restoreMode,
-          });
-
-          await cluster.save();
-        } else {
-          await this.$store.dispatch('rancher/request', {
-            url:    `/v3/clusters/${ escape(this.snapshot.clusterId) }?action=restoreFromEtcdBackup`,
-            method: 'post',
-            data:   {
-              etcdBackupId:     this.snapshot.id,
-              restoreRkeConfig: this.restoreMode,
-            },
-          });
-        }
+        const cluster = this.$store.getters['management/byId'](CAPI.RANCHER_CLUSTER, this.snapshot.clusterId);
+
+        await this.applyHooks(BEFORE_SAVE_HOOKS);
+
+        const now = cluster.spec?.rkeConfig?.etcdSnapshotRestore?.generation || 0;
+
+        set(cluster, 'spec.rkeConfig.etcdSnapshotRestore', {
+          generation:       now + 1,
+          name:             this.snapshot.name,
+          restoreRKEConfig: this.restoreMode,
+        });
+
+        await cluster.save();
 
         this.$store.dispatch('growl/success', {
           title:   this.t('promptRestore.notification.title'),

package/components/RelatedResources.vue

@@ -1,6 +1,6 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import { colorForState, stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
+import { STATES_ENUM, colorForState, stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
 import { NAME, NAMESPACE, STATE, TYPE } from '@shell/config/table-headers';
 import { sortableNumericSuffix } from '@shell/utils/sort';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
@@ -70,9 +70,9 @@ export default {
       const out = [];
 
       for ( const r of this.filteredRelationships) {
-        const state = r.state || 'active';
-        const stateColor = colorForState(state, r.error, r.transitioning);
         const type = r[`${ this.direction }Type`];
+        const state = r.state || this.$store.getters[`${ inStore }/byId`](type, r[`${ this.direction }Id`])?.state || STATES_ENUM.MISSING;
+        const stateColor = colorForState(state, r.error, r.transitioning);
         const schema = this.$store.getters[`${ inStore }/schemaFor`](type);
 
         let name = r[`${ this.direction }Id`];
@@ -104,7 +104,6 @@ export default {
 
         out.push({
           type,
-          real:     this.$store.getters[`${ inStore }/byId`](type, r[`${ this.direction }Id`]),
           id:       r[`${ this.direction }Id`],
           state,
           metadata: { namespace, name },
@@ -174,14 +173,10 @@ export default {
     :groupable="false"
   >
     <template #cell:state="{row}">
-      <BadgeState
-        v-if="row.real"
-        :value="row.real"
-      />
-      <BadgeState
-        v-else
-        :value="row"
-      />
+      <BadgeState :value="row" />
+    </template>
+    <template #cell:name="{row}">
+      <span>{{ row.name }}</span>
     </template>
   </ResourceTable>
 </template>

package/components/Resource/Detail/Additional.vue

@@ -0,0 +1,46 @@
+<script lang="ts">
+import { computed } from 'vue';
+
+export interface Props {
+  items: string[];
+}
+</script>
+
+<script setup lang="ts">
+
+const { items } = defineProps<Props>();
+
+const first = computed(() => items[0]);
+const tooltipValue = computed(() => {
+  let rows = '';
+
+  items.forEach((item) => {
+    rows += `&#8226; ${ item }<br>`;
+  });
+
+  return rows;
+});
+</script>
+
+<template>
+  <div class="additional">
+    <div class="initial">
+      {{ first }}
+    </div>
+    <div
+      v-if="items.length > 1"
+      v-clean-tooltip.bottom="tooltipValue"
+      class="more text-muted"
+    >
+      {{ t('generic.plusMore', {n: items.length-1}) }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.more {
+  margin-top: 4px;
+  cursor: help;
+  font-size: 0.8em;
+}
+</style>

package/components/Resource/Detail/Card/PodsCard/Bubble.vue

@@ -0,0 +1,13 @@
+<template>
+  <span class="bubble">
+    <slot name="default" />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.bubble {
+    border-radius: 40%;
+    background-color: var(--bubble-bg);
+    padding: 2px 6px;
+}
+</style>

package/components/Resource/Detail/Card/PodsCard/composable.ts

@@ -0,0 +1,30 @@
+import { useI18n } from '@shell/composables/useI18n';
+import { toValue } from 'vue';
+import { useStore } from 'vuex';
+
+export type ScaleFn = () => Promise<void>;
+export const useScaling = (workloadName: string, scaleUpFn: ScaleFn, scaleDownFn: ScaleFn) => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const scale = (scaleFn: () => Promise<void>, workloadName: string, direction: 'up' | 'down') => {
+    return async() => {
+      try {
+        await scaleFn();
+      } catch (err) {
+        store.dispatch('growl/fromError', {
+          title: i18n.t('workload.list.errorCannotScale', { workloadName, direction }),
+          err
+        },
+        { root: true });
+      }
+    };
+  };
+
+  const workloadNameValue = toValue(workloadName);
+
+  return {
+    scaleUp:   scale(() => scaleUpFn(), workloadNameValue, 'up'),
+    scaleDown: scale(() => scaleDownFn(), workloadNameValue, 'down')
+  };
+};

package/components/Resource/Detail/Card/PodsCard/index.vue

@@ -0,0 +1,118 @@
+<script lang="ts">
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import Scaler from '@shell/components/Resource/Detail/Card/Scaler.vue';
+import VerticalGap from '@shell/components/Resource/Detail/Card/VerticalGap.vue';
+import StatusBar from '@shell/components/Resource/Detail/StatusBar.vue';
+import StatusRow from '@shell/components/Resource/Detail/StatusRow.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { StateColor } from '@shell/utils/style';
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+export interface Props {
+  pods?: any[];
+  showScaling?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+const store = useStore();
+const i18n = useI18n(store);
+
+const props = withDefaults(defineProps<Props>(), { pods: undefined, showScaling: false });
+const emit = defineEmits(['decrease', 'increase']);
+
+const segmentAccumulator = computed(() => {
+  interface Value {
+    count: number;
+  }
+  const accumulator: {[key in StateColor]?: Value} = {};
+
+  props.pods?.forEach((pod: any) => {
+    const color: StateColor = pod.stateSimpleColor;
+
+    accumulator[color] = accumulator[color] || { count: 0 };
+    accumulator[color].count++;
+  });
+
+  return accumulator;
+});
+
+const rowAccumulator = computed(() => {
+  interface Value {
+    count: number;
+    color: StateColor;
+  }
+  const accumulator: {[key in string]: Value} = {};
+
+  props.pods?.forEach((pod: any) => {
+    accumulator[pod.stateDisplay] = accumulator[pod.stateDisplay] || { count: 0 };
+    accumulator[pod.stateDisplay].count++;
+    accumulator[pod.stateDisplay].color = pod.stateSimpleColor.replace('text-', '') as StateColor;
+  });
+
+  return accumulator;
+});
+
+const percent = (count: number, total: number) => {
+  return count / total * 100;
+};
+
+const count = computed(() => props.pods?.length || 0);
+
+const segmentColors = computed(() => Object.keys(segmentAccumulator.value) as StateColor[]);
+const segments = computed(() => segmentColors.value.map((color: StateColor) => ({
+  color,
+  percent: percent(segmentAccumulator.value[color]?.count || 0, count.value)
+})));
+
+const rowStates = computed(() => {
+  return Object.keys(rowAccumulator.value);
+});
+
+const rows = computed(() => {
+  return rowStates.value.map((state) => ({
+    color:   rowAccumulator.value[state].color,
+    label:   state,
+    count:   rowAccumulator.value[state].count,
+    percent: percent(rowAccumulator.value[state].count, count.value)
+  }));
+});
+
+</script>
+
+<template>
+  <Card :title="i18n.t('component.resource.detail.card.podsCard.title')">
+    <template
+      v-if="props.showScaling"
+      #heading-action
+    >
+      <Scaler
+        :ariaResourceName="i18n.t('component.resource.detail.card.podsCard.ariaResourceName')"
+        :value="count"
+        :min="0"
+        @increase="(newValue) => emit('increase', newValue)"
+        @decrease="(newValue) => emit('decrease', newValue)"
+      />
+    </template>
+    <StatusBar :segments="segments" />
+    <VerticalGap />
+    <div class="pod-distribution">
+      <StatusRow
+        v-for="(row, i) in rows"
+        :key="i"
+        :color="row.color"
+        :label="row.label"
+        :count="row.count"
+        :percent="row.percent"
+      />
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.pod-distribution {
+    display: flex;
+    flex-direction: column;
+}
+</style>