@rancher/shell 3.0.5-rc.5 → 3.0.5-rc.7

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) {
@@ -115,13 +152,21 @@ export default defineComponent({
       :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/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

@@ -92,7 +92,12 @@ export default {
       }
 
       this.errors = [];
-      this.$store.commit('action-menu/togglePromptModal', data);
+
+      // 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();
       }

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,7 @@ 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>
   </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/Metadata/Annotations/__tests__/index.test.ts

@@ -3,7 +3,7 @@ import Annotations from '@shell/components/Resource/Detail/Metadata/Annotations/
 import { createStore } from 'vuex';
 
 describe('component: Metadata/Annotations', () => {
-  it('shoulder render KeyValue with the appropriate props', async() => {
+  it('should render KeyValue with the appropriate props', async() => {
     const annotations = [{ key: 'key', value: 'value' }];
     const wrapper = mount(Annotations, {
       props:  { annotations },

package/components/Resource/Detail/Metadata/Annotations/index.vue

@@ -7,12 +7,15 @@ export type Annotation = Row;
 
 export interface AnnotationsProps {
   annotations: Annotation[];
+
+  onShowConfiguration?: (returnFocusSelector: string) => void;
 }
 
 </script>
 
 <script setup lang="ts">
 const { annotations } = defineProps<AnnotationsProps>();
+const emit = defineEmits(['show-configuration']);
 const store = useStore();
 const i18n = useI18n(store);
 </script>
@@ -22,5 +25,7 @@ const i18n = useI18n(store);
     :propertyName="i18n.t('component.resource.detail.metadata.annotations.title')"
     :rows="annotations"
     :outline="true"
+
+    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
   />
 </template>

package/components/Resource/Detail/Metadata/IdentifyingInformation/__tests__/identifying-fields.test.ts

@@ -0,0 +1,223 @@
+import {
+  useNamespace, useWorkspace, useLiveDate, useCreatedBy, useProject,
+  useResourceDetails
+} from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields';
+import { NAMESPACE, FLEET } from '@shell/config/types';
+import { NAME as FLEET_NAME } from '@shell/config/product/fleet';
+
+const mockStore = {
+  getters: {
+    productId: 'PRODUCT_ID', clusterId: 'CLUSTER_ID', 'type-map/optionsFor': jest.fn()
+  }
+};
+const mockRoute = { params: { cluster: 'CLUSTER', namespace: 'NAMESPACE' } };
+const mockDrawer = { openResourceDetailDrawer: jest.fn() };
+
+jest.mock('vuex', () => ({ useStore: () => mockStore }));
+jest.mock('vue-router', () => ({ useRoute: () => mockRoute }));
+jest.mock('@shell/components/Drawer/ResourceDetailDrawer/composables', () => ({ useResourceDetailDrawer: () => mockDrawer }));
+
+describe('composables: IdentifyingFields', () => {
+  describe('useNamespace', () => {
+    it('should return undefined if namespace is falsy', () => {
+      const resource = {};
+      const result = useNamespace(resource);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return undefined if namespaces is truthy', () => {
+      const resource = { namespaces: [] };
+      const result = useNamespace(resource);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return a valid namespace row with namespaceLocation', () => {
+      const resource = { namespace: 'NAMESPACE', namespaceLocation: 'NAMESPACE_LOCATION' };
+      const result = useNamespace(resource);
+
+      expect(result?.value.to).toStrictEqual(resource.namespaceLocation);
+      expect(result?.value.value).toStrictEqual(resource.namespace);
+      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.namespace');
+      expect(result?.value.valueDataTestid).toStrictEqual('masthead-subheader-namespace');
+    });
+
+    it('should return a valid namespace row with computed `to`', () => {
+      const resource = { namespace: 'NAMESPACE' };
+      const result = useNamespace(resource);
+
+      expect(result?.value.to).toStrictEqual({
+        name:   `c-cluster-product-resource-id`,
+        params: {
+          product:  'PRODUCT_ID',
+          cluster:  'CLUSTER_ID',
+          resource: NAMESPACE,
+          id:       resource.namespace
+        }
+      });
+      expect(result?.value.value).toStrictEqual(resource.namespace);
+      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.namespace');
+      expect(result?.value.valueDataTestid).toStrictEqual('masthead-subheader-namespace');
+    });
+  });
+
+  describe('useWorkspace', () => {
+    it('should return undefined if productId is not fleet', () => {
+      const resource = { metadata: { namespace: true } };
+      const result = useWorkspace(resource);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return undefined if productId is fleet and metadata namespace is falsy', () => {
+      mockStore.getters.productId = FLEET_NAME;
+      const resource = { };
+      const result = useWorkspace(resource);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return a valid workspace row', () => {
+      mockStore.getters.productId = FLEET_NAME;
+      const resource = { namespace: 'NAMESPACE', metadata: { namespace: true } };
+      const result = useWorkspace(resource);
+
+      expect(result?.value.to).toStrictEqual({
+        name:   `c-cluster-product-resource-id`,
+        params: {
+          product:  FLEET_NAME,
+          cluster:  'CLUSTER_ID',
+          resource: FLEET.WORKSPACE,
+          id:       mockRoute.params.namespace
+        }
+      });
+      expect(result?.value.value).toStrictEqual(resource.namespace);
+      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.workspace');
+    });
+  });
+
+  describe('useLiveDate', () => {
+    it('should return undefined if showAge is false', () => {
+      mockStore.getters[`type-map/optionsFor`].mockReturnValue({ showAge: false });
+
+      const resource = { };
+      const result = useLiveDate(resource);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return a valid liveDate row', () => {
+      mockStore.getters[`type-map/optionsFor`].mockReturnValue({ showAge: true });
+
+      const resource = { creationTimestamp: 'CREATION_TIMESTAMP' };
+      const result = useLiveDate(resource);
+
+      expect(result?.value.valueOverride).toStrictEqual({
+        component: 'LiveDate',
+        props:     { value: resource.creationTimestamp }
+      });
+      expect(result?.value.value).toStrictEqual(resource.creationTimestamp);
+      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.age');
+    });
+  });
+
+  describe('useCreatedBy', () => {
+    it('should return undefined if showCreatedBy is falsy', () => {
+      const resource = {};
+      const result = useCreatedBy(resource);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return a valid createdBy row', () => {
+      mockStore.getters[`type-map/optionsFor`].mockReturnValue({ showAge: true });
+
+      const resource = { showCreatedBy: true, createdBy: { displayName: 'CREATED_BY' } };
+      const result = useCreatedBy(resource);
+
+      expect(result?.value.to).toBeUndefined();
+      expect(result?.value.value).toStrictEqual(resource.createdBy.displayName);
+      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.createdBy');
+      expect(result?.value.dataTestid).toStrictEqual('masthead-subheader-createdBy');
+      expect(result?.value.valueDataTestid).toStrictEqual('masthead-subheader-createdBy_plain-text');
+    });
+
+    it('should return a valid createdBy row with createdBy.location', () => {
+      mockStore.getters[`type-map/optionsFor`].mockReturnValue({ showAge: true });
+
+      const resource = { showCreatedBy: true, createdBy: { displayName: 'CREATED_BY', location: 'LOCATION' } };
+      const result = useCreatedBy(resource);
+
+      expect(result?.value.to).toStrictEqual(resource.createdBy.location);
+      expect(result?.value.value).toStrictEqual(resource.createdBy.displayName);
+      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.createdBy');
+      expect(result?.value.dataTestid).toStrictEqual('masthead-subheader-createdBy');
+      expect(result?.value.valueDataTestid).toStrictEqual('masthead-subheader-createdBy-link');
+    });
+  });
+
+  describe('useProject', () => {
+    it('should return undefined if type is not namespace', () => {
+      const resource = { type: 'anything' };
+      const result = useProject(resource);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return undefined if project is falsy', () => {
+      const resource = { type: NAMESPACE };
+      const result = useProject(resource);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return a valid project row', () => {
+      const resource = { type: NAMESPACE, project: { nameDisplay: 'PROJECT', detailLocation: 'LOCATION' } };
+      const result = useProject(resource);
+
+      expect(result?.value.to).toStrictEqual(resource.project.detailLocation);
+      expect(result?.value.value).toStrictEqual(resource.project.nameDisplay);
+      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.project');
+    });
+  });
+
+  describe('useResourceDetails', () => {
+    it('should return undefined if details is falsy', () => {
+      const resource = { };
+      const result = useResourceDetails(resource);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return valid resourceDetail without valueOverride', () => {
+      const resource = { details: [{ label: 'LABEL', content: 'CONTENT' }] };
+      const result = useResourceDetails(resource);
+
+      expect(result?.value[0].label).toStrictEqual(resource.details[0].label);
+      expect(result?.value[0].value).toStrictEqual(resource.details[0].content);
+      expect(result?.value[0].valueOverride).toBeUndefined();
+    });
+
+    it('should omit separator details', () => {
+      const resource = { details: [{ separator: true }] };
+      const result = useResourceDetails(resource);
+
+      expect(result?.value).toHaveLength(0);
+    });
+
+    it('should return valid resourceDetail with valueOverride', () => {
+      const resource = {
+        details: [{
+          label: 'LABEL', content: 'CONTENT', formatter: 'FORMATTER', formatterOpts: { key: 'value' }
+        }]
+      };
+      const result = useResourceDetails(resource);
+
+      expect(result?.value[0].label).toStrictEqual(resource.details[0].label);
+      expect(result?.value[0].value).toStrictEqual(resource.details[0].content);
+      expect(result?.value[0].valueOverride?.component).toStrictEqual(resource.details[0].formatter);
+      expect(result?.value[0].valueOverride?.props).toStrictEqual({ value: resource.details[0].content, ...resource.details[0].formatterOpts });
+    });
+  });
+});