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

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

@@ -1,263 +1,52 @@
-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, useProject, useReady, useSecretCluster, 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);
-
-  return computed(() => ({
-    label:         i18n.t('node.detail.detailTop.internalIP'),
-    valueOverride: {
-      component: markRaw(CopyToClipboardText),
-      props:     { text: resourceValue.internalIp }
-    },
-    value: resourceValue.internalIp
-  }));
-};
-
-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
-  ]);
+export const useSecretIdentifyingInformation = (resource: any, isProjectSecret: boolean): ComputedRef<Row[]> => {
+  const namespace = isProjectSecret ? undefined : useNamespace(resource);
+  const project = isProjectSecret ? useProject(resource) : undefined;
+  const cluster = isProjectSecret ? useSecretCluster(resource) : undefined;
+  const age = useLiveDate(resource);
+  const secretType = useSecretType(resource);
+  const serviceAccount = useServiceAccount(resource);
+  const certificate = useCertificate(resource);
+  const issuer = useIssuer(resource);
+  const expires = useExpires(resource);
+
+  return computed(() => {
+    const rows = [
+      age?.value,
+      namespace?.value,
+      project?.value,
+      cluster?.value,
+      secretType?.value,
+      serviceAccount?.value,
+      certificate?.value,
+      issuer?.value,
+      expires?.value,
+    ];
+
+    return rows.filter((r) => typeof r !== 'undefined');
+  });
 };
 
 export const useDefaultWorkloadIdentifyingInformation = (resource: any): ComputedRef<Row[]> => {
@@ -265,10 +54,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,

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

@@ -0,0 +1,317 @@
+import { useI18n } from '@shell/composables/useI18n';
+import { computed, ComputedRef, markRaw, toValue } from 'vue';
+import Additional from '@shell/components/Resource/Detail/Additional.vue';
+import { useStore } from 'vuex';
+import {
+  NAMESPACE, FLEET, SERVICE_ACCOUNT, SECRET, CAPI
+} from '@shell/config/types';
+import { Row } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue';
+import { NAME as FLEET_NAME } from '@shell/config/product/fleet';
+import { useRoute } from 'vue-router';
+import { TYPES as SECRET_TYPES } from '@shell/models/secret';
+import { KUBERNETES } from '@shell/config/labels-annotations';
+
+export const useNamespace = (resource: any): ComputedRef<Row> | undefined => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const resourceValue = toValue(resource);
+
+  if (!resourceValue.namespace || resourceValue.namespaces) {
+    return;
+  }
+
+  return computed(() => {
+    const to = resourceValue.namespaceLocation || {
+      name:   `c-cluster-product-resource-id`,
+      params: {
+        product:  store.getters['productId'],
+        cluster:  store.getters['clusterId'],
+        resource: NAMESPACE,
+        id:       resourceValue.namespace
+      }
+    };
+
+    return {
+      label:           i18n.t('component.resource.detail.metadata.identifyingInformation.namespace'),
+      value:           resourceValue.namespace,
+      valueDataTestid: 'masthead-subheader-namespace',
+      to
+    };
+  });
+};
+
+export const useWorkspace = (resource: any): ComputedRef<Row> | undefined => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const resourceValue = toValue(resource);
+  const route = useRoute();
+
+  const isWorkspace = store.getters['productId'] === FLEET_NAME && !!resourceValue?.metadata?.namespace;
+
+  if (!isWorkspace) {
+    return;
+  }
+
+  return computed(() => ({
+    label: i18n.t('component.resource.detail.metadata.identifyingInformation.workspace'),
+    value: resourceValue.namespace,
+    to:    {
+      name:   `c-cluster-product-resource-id`,
+      params: {
+        product:  store.getters['productId'],
+        cluster:  store.getters['clusterId'],
+        resource: FLEET.WORKSPACE,
+        id:       route.params.namespace
+      }
+    }
+  }));
+};
+
+export const useLiveDate = (resource: any): ComputedRef<Row> | undefined => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const resourceValue = toValue(resource);
+
+  const options = store.getters[`type-map/optionsFor`](resource.type);
+
+  if (!options.showAge) {
+    return;
+  }
+
+  return computed(() => ({
+    label:         i18n.t('component.resource.detail.metadata.identifyingInformation.age'),
+    valueOverride: {
+      component: 'LiveDate',
+      props:     { value: resourceValue.creationTimestamp }
+    },
+    value: resourceValue.creationTimestamp,
+  }));
+};
+
+export const useCreatedBy = (resource: any): ComputedRef<Row> | undefined => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const resourceValue = toValue(resource);
+
+  if (!resourceValue.showCreatedBy) {
+    return;
+  }
+
+  return computed(() => {
+    const to = resourceValue.createdBy.location || undefined;
+
+    return {
+      label:           i18n.t('component.resource.detail.metadata.identifyingInformation.createdBy'),
+      value:           resourceValue.createdBy.displayName,
+      to,
+      dataTestid:      'masthead-subheader-createdBy',
+      valueDataTestid: to ? 'masthead-subheader-createdBy-link' : 'masthead-subheader-createdBy_plain-text'
+    };
+  });
+};
+
+export const useProject = (resource: any): ComputedRef<Row> | undefined => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const resourceValue = toValue(resource);
+
+  // Only show project if one of these types
+  if (resource.type !== NAMESPACE && resource.type !== SECRET) {
+    return;
+  }
+
+  if (!resourceValue.project) {
+    return;
+  }
+
+  return computed(() => {
+    return {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.project'),
+      value: resourceValue.project?.nameDisplay,
+      to:    resourceValue.project?.detailLocation
+    };
+  });
+};
+
+export const useSecretCluster = (resource: any): ComputedRef<Row> | undefined => {
+  const store = useStore();
+  const resourceValue = toValue(resource);
+
+  return computed(() => {
+    return {
+      label: store.getters['type-map/labelFor']({ id: CAPI.RANCHER_CLUSTER }),
+      value: resourceValue.projectCluster?.nameDisplay,
+    };
+  });
+};
+
+export const useResourceDetails = (resource: any): undefined | ComputedRef<Row[]> => {
+  const details = resource.details;
+
+  if (!details) {
+    return;
+  }
+
+  const extractValueOverride = (detail: any) => {
+    if (!detail.formatter) {
+      return;
+    }
+
+    return {
+      component: detail.formatter,
+      props:     {
+        value: detail.content,
+        ...detail.formatterOpts
+      }
+    };
+  };
+
+  return computed(() => {
+    return details
+      .filter((detail: any) => !detail.separator)
+      .map((detail: any) => {
+        return {
+          label:         detail.label,
+          value:         detail.content,
+          valueOverride: extractValueOverride(detail)
+        };
+      });
+  });
+};
+
+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 useSecretType = (resource: any): ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const resourceValue = toValue(resource);
+
+  return computed(() => {
+    return {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.type'),
+      value: resourceValue.typeDisplay,
+    };
+  });
+};
+
+export const useServiceAccount = (resource: any): undefined | ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const resourceValue = toValue(resource);
+
+  if (resourceValue._type !== SECRET_TYPES.SERVICE_ACCT) {
+    return;
+  }
+
+  const serviceAccountName = resourceValue.metadata?.annotations?.[KUBERNETES.SERVICE_ACCOUNT_NAME];
+
+  if (!serviceAccountName) {
+    return;
+  }
+
+  return computed(() => {
+    return {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.serviceAccount'),
+      value: serviceAccountName,
+      to:    {
+        name:   `c-cluster-product-resource-namespace-id`,
+        params: {
+          product:   store.getters['productId'],
+          cluster:   store.getters['clusterId'],
+          namespace: resource.namespace,
+          resource:  SERVICE_ACCOUNT,
+          id:        serviceAccountName
+        }
+      }
+    };
+  });
+};
+
+export const useCertificate = (resource: any): undefined | ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const resourceValue = toValue(resource);
+
+  if (!resourceValue.cn) {
+    return;
+  }
+
+  const certificate = resourceValue.plusMoreNames ? `${ resourceValue.cn } ${ i18n.t('secret.certificate.plusMore', { n: resourceValue.plusMoreNames }) }` : resourceValue.cn;
+
+  return computed(() => {
+    return {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.certificate'),
+      value: certificate,
+    };
+  });
+};
+
+export const useIssuer = (resource: any): undefined | ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const resourceValue = toValue(resource);
+
+  if (!resourceValue.issuer) {
+    return;
+  }
+
+  return computed(() => {
+    return {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.issuer'),
+      value: resourceValue.issuer,
+    };
+  });
+};
+
+export const useExpires = (resource: any): undefined | ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const resourceValue = toValue(resource);
+
+  if (!resourceValue.notAfter) {
+    return;
+  }
+
+  return computed(() => {
+    return {
+      label:         i18n.t('component.resource.detail.metadata.identifyingInformation.expires'),
+      valueOverride: {
+        component: markRaw(Date),
+        props:     {
+          value: resourceValue.notAfter,
+          class: resourceValue.dateClass
+        }
+      },
+      value: resourceValue.notAfter,
+    };
+  });
+};