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

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 });
+    });
+  });
+});

package/components/Resource/Detail/Metadata/IdentifyingInformation/composable.ts

@@ -1,263 +1,44 @@
-import { useI18n } from '@shell/composables/useI18n';
-import { computed, ComputedRef, markRaw, toValue } from 'vue';
-import LiveDate from '@shell/components/formatter/LiveDate.vue';
-import LinkName from '@shell/components/formatter/LinkName.vue';
-import Additional from '@shell/components/Resource/Detail/Additional.vue';
-import { useStore } from 'vuex';
-import CopyToClipboardText from '@shell/components/CopyToClipboardText.vue';
-import IconText from '@shell/components/formatter/IconText.vue';
-import { NODE } from '@shell/config/types';
-import day from 'dayjs';
+import { computed, ComputedRef, toValue } from 'vue';
 import { Row } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue';
+import {
+  useCertificate,
+  useExpires,
+  useImage, useIssuer, useLiveDate, useNamespace, useReady, useSecretType,
+  useServiceAccount
+} from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
 
-export const useContainerRuntime = (resource: any): ComputedRef<Row> => {
-  const store = useStore();
-  const i18n = useI18n(store);
-  const resourceValue = toValue(resource);
-
-  return computed(() => ({
-    label:         i18n.t('node.detail.detailTop.containerRuntime'),
-    valueOverride: {
-      component: markRaw(IconText),
-      props:     { value: resourceValue.containerRuntimeVersion, iconClass: resourceValue.containerRuntimeIcon }
-    },
-    value: resourceValue.containerRuntimeVersion
-  }));
-};
-
-export const useExternalIp = (resource: any): ComputedRef<Row> => {
-  const store = useStore();
-  const i18n = useI18n(store);
-  const resourceValue = toValue(resource);
-
-  return computed(() => ({
-    label:         i18n.t('node.detail.detailTop.externalIP'),
-    valueOverride: {
-      component: markRaw(CopyToClipboardText),
-      props:     { text: resourceValue.externalIp }
-    },
-    value: resourceValue.externalIp
-  }));
-};
-
-export const usePodIp = (resource: any): ComputedRef<Row> => {
-  const store = useStore();
-  const i18n = useI18n(store);
-  const resourceValue = toValue(resource);
-
-  return computed(() => ({
-    label: i18n.t('workload.detailTop.podIP'),
-    value: resourceValue.status.podIP
-  }));
-};
-
-export const useWorkload = (resource: any): ComputedRef<Row> => {
-  const store = useStore();
-  const i18n = useI18n(store);
-  const resourceValue = toValue(resource);
-
-  return computed(() => ({
-    label:         i18n.t('workload.detailTop.workload'),
-    valueOverride: {
-      component: markRaw(LinkName),
-      props:     {
-        type:      resourceValue.workloadRef.type,
-        value:     resourceValue.workloadRef.name,
-        namespace: resourceValue.workloadRef.namespace
-      }
-    },
-    value: resourceValue.workloadRef.name
-  }));
-};
-
-export const useNode = (resource: any): ComputedRef<Row> => {
-  const store = useStore();
-  const i18n = useI18n(store);
-  const resourceValue = toValue(resource);
-
-  return computed(() => ({
-    label:         i18n.t('workload.detailTop.node'),
-    valueOverride: {
-      component: markRaw(LinkName),
-      props:     { type: NODE, value: resourceValue.spec.nodeName }
-    },
-    value: resourceValue.spec.nodeName
-  }));
-};
-
-export const useStarted = (resource: any): ComputedRef<Row> => {
-  const store = useStore();
-  const i18n = useI18n(store);
-  const resourceValue = toValue(resource);
-
-  return computed(() => ({
-    label:         i18n.t('workload.detailTop.started'),
-    valueOverride: {
-      component: markRaw(LiveDate),
-      props:     { addSuffix: true, value: resourceValue.status.startTime }
-    },
-    value: resourceValue.spec.nodeName
-  }));
-};
-
-export const useDuration = (resource: any): ComputedRef<Row> => {
-  const store = useStore();
-  const i18n = useI18n(store);
-  const resourceValue = toValue(resource);
-
-  const FACTORS = [60, 60, 24];
-  const LABELS = ['sec', 'min', 'hour', 'day'];
-  const value = computed(() => {
-    const { completionTime, startTime } = resourceValue.status;
-    const end = day(completionTime);
-    const start = day(startTime);
-    let diff = end.diff(start) / 1000;
-
-    let label: any;
-
-    let i = 0;
-
-    while (diff >= FACTORS[i] && i < FACTORS.length) {
-      diff /= FACTORS[i];
-      i++;
-    }
-
-    if (diff < 5) {
-      label = Math.floor(diff * 10) / 10;
-    } else {
-      label = Math.floor(diff);
-    }
-
-    label += ` ${ i18n.t(`unit.${ LABELS[i] }`, { count: label }) } `;
-    label = label.trim();
+export const useDefaultIdentifyingInformation = (resource: any): ComputedRef<Row[]> => {
+  const namespace = useNamespace(resource);
+  const liveDate = useLiveDate(resource);
 
-    return label;
+  return computed(() => {
+    return [
+      namespace?.value,
+      liveDate?.value
+    ].filter((info) => typeof info !== 'undefined');
   });
-
-  return computed(() => ({
-    label:         i18n.t('workload.detailTop.duration'),
-    valueOverride: {
-      component: markRaw(LiveDate),
-      props:     { value: value.value }
-    },
-    value: value.value
-  }));
-};
-
-export const useImage = (resource: any): ComputedRef<Row> => {
-  const store = useStore();
-  const i18n = useI18n(store);
-  const resourceValue = toValue(resource);
-
-  return computed(() => ({
-    label:         i18n.t('component.resource.detail.metadata.identifyingInformation.image'),
-    value:         resourceValue.imageNames,
-    valueOverride: {
-      component: markRaw(Additional),
-      props:     { items: resourceValue.imageNames }
-    },
-  }));
-};
-
-export const useReady = (resource: any): ComputedRef<Row> => {
-  const store = useStore();
-  const i18n = useI18n(store);
-  const resourceValue = toValue(resource);
-
-  return computed(() => ({
-    label: i18n.t('component.resource.detail.metadata.identifyingInformation.ready'),
-    value: resourceValue.ready,
-  }));
-};
-
-export const useRestarts = (resource: any): ComputedRef<Row> => {
-  const store = useStore();
-  const i18n = useI18n(store);
-  const resourceValue = toValue(resource);
-
-  return computed(() => ({
-    label: i18n.t('workload.detailTop.podRestarts'),
-    value: resourceValue.restartCount
-  }));
 };
 
-export const useInternalIp = (resource: any): ComputedRef<Row> => {
-  const store = useStore();
-  const i18n = useI18n(store);
-  const resourceValue = toValue(resource);
+export const useSecretIdentifyingInformation = (resource: any): ComputedRef<Row[]> => {
+  const secretType = useSecretType(resource);
+  const serviceAccount = useServiceAccount(resource);
+  const certificate = useCertificate(resource);
+  const issuer = useIssuer(resource);
+  const expires = useExpires(resource);
 
-  return computed(() => ({
-    label:         i18n.t('node.detail.detailTop.internalIP'),
-    valueOverride: {
-      component: markRaw(CopyToClipboardText),
-      props:     { text: resourceValue.internalIp }
-    },
-    value: resourceValue.internalIp
-  }));
-};
+  return computed(() => {
+    const rows = [
+      secretType?.value,
+      serviceAccount?.value,
+      certificate?.value,
+      issuer?.value,
+      expires?.value,
+    ];
 
-export const useVersion = (resource: any): ComputedRef<Row> => {
-  const store = useStore();
-  const i18n = useI18n(store);
-  const resourceValue = toValue(resource);
-
-  return computed(() => ({
-    label: i18n.t('node.detail.detailTop.version'),
-    value: resourceValue.version
-  }));
-};
-
-export const useOs = (resource: any): ComputedRef<Row> => {
-  const store = useStore();
-  const i18n = useI18n(store);
-  const resourceValue = toValue(resource);
-
-  return computed(() => ({
-    label: i18n.t('node.detail.detailTop.os'),
-    value: resourceValue.status.nodeInfo.osImage
-  }));
-};
-
-export const useLiveDate = (resource: any): ComputedRef<Row> => {
-  const store = useStore();
-  const i18n = useI18n(store);
-  const resourceValue = toValue(resource);
-
-  return computed(() => ({
-    label:         i18n.t('component.resource.detail.metadata.identifyingInformation.age'),
-    valueOverride: {
-      component: markRaw(LiveDate),
-      props:     { value: resourceValue.creationTimestamp }
-    },
-    value: resourceValue.age,
-  }));
-};
-
-export const useProject = (resource: any): ComputedRef<Row> => {
-  const store = useStore();
-  const i18n = useI18n(store);
-  const resourceValue = toValue(resource);
-
-  return computed(() => ({
-    label: i18n.t('component.resource.detail.metadata.identifyingInformation.project'),
-    value: resourceValue.project.nameDisplay,
-    to:    '#'
-  }));
-};
-
-export const useDefaultIdentifyingInformation = (resource: any): ComputedRef<Row[]> => {
-  const store = useStore();
-  const i18n = useI18n(store);
-  const resourceValue = toValue(resource);
-  const liveDate = useLiveDate(resource);
-
-  return computed(() => [
-    {
-      label: i18n.t('component.resource.detail.metadata.identifyingInformation.namespace'),
-      value: resourceValue.namespace,
-    },
-    liveDate.value
-  ]);
+    return rows.filter((r) => typeof r !== 'undefined');
+  });
 };
 
 export const useDefaultWorkloadIdentifyingInformation = (resource: any): ComputedRef<Row[]> => {
@@ -265,10 +46,12 @@ export const useDefaultWorkloadIdentifyingInformation = (resource: any): Compute
   const i18n = useI18n(store);
 
   const resourceValue = toValue(resource);
+  const image = useImage(resource);
+  const ready = useReady(resource);
 
   return computed(() => [
-    useImage(resource).value,
-    useReady(resource).value,
+    image.value,
+    ready.value,
     {
       label: i18n.t('component.resource.detail.metadata.identifyingInformation.up-to-date'),
       value: resourceValue.upToDate,