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

package/components/Resource/Detail/Card/__tests__/index.test.ts

@@ -0,0 +1,36 @@
+import { mount } from '@vue/test-utils';
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+
+describe('component: Card/index', () => {
+  it('should render title and default slot', async() => {
+    const title = 'title';
+    const content = 'content';
+    const wrapper = mount(Card, { props: { title }, slots: { default: content } });
+
+    expect(wrapper.find('.title').element.innerHTML).toStrictEqual(title);
+  });
+
+  it('should allow you to override the heading with slot', async() => {
+    const title = 'title';
+    const content = 'content';
+    const wrapper = mount(Card, { props: { title }, slots: { heading: content } });
+
+    expect(wrapper.find('.title').exists()).toBeFalsy();
+    expect(wrapper.find('.heading').element.innerHTML).toStrictEqual(content);
+  });
+
+  it('should allow you to override the title with slot', async() => {
+    const title = 'title';
+    const content = 'content';
+    const wrapper = mount(Card, { props: { title }, slots: { title: content } });
+
+    expect(wrapper.find('.title').element.innerHTML).toStrictEqual(content);
+  });
+
+  it('should allow you to insert heading-action with slot', async() => {
+    const content = '<div id="test">content</div>';
+    const wrapper = mount(Card, { slots: { 'heading-action': content } });
+
+    expect(wrapper.find('.heading #test').exists()).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import VerticalGap from '@shell/components/Resource/Detail/Card/VerticalGap.vue';
+
+export interface CardProps {
+    title?: string;
+}
+
+const { title } = defineProps<CardProps>();
+
+</script>
+
+<template>
+  <div class="detail-card">
+    <div class="heading">
+      <slot name="heading">
+        <div class="title">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </div>
+      </slot>
+      <slot name="heading-action" />
+    </div>
+    <VerticalGap />
+    <div class="body">
+      <slot name="default" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.detail-card {
+    padding: 16px;
+    border-radius: var(--border-radius-md);
+    border: 1px solid var(--border);
+
+    .heading {
+      display: flex;
+      justify-content: space-between;
+
+      height: 32px;
+
+      .title {
+          font-size: 18px;
+          font-weight: 600;
+          line-height: 21px;
+      }
+    }
+
+    .body {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+    }
+}
+</style>

package/components/Resource/Detail/Metadata/Annotations/__tests__/index.test.ts

@@ -0,0 +1,19 @@
+import { mount } from '@vue/test-utils';
+import Annotations from '@shell/components/Resource/Detail/Metadata/Annotations/index.vue';
+import { createStore } from 'vuex';
+
+describe('component: Metadata/Annotations', () => {
+  it('shoulder render KeyValue with the appropriate props', async() => {
+    const annotations = [{ key: 'key', value: 'value' }];
+    const wrapper = mount(Annotations, {
+      props:  { annotations },
+      global: { provide: { store: createStore({}) }, stubs: { KeyValue: true } }
+    });
+
+    const keyValue = wrapper.getComponent<any>('key-value-stub');
+
+    expect(keyValue.props('propertyName')).toStrictEqual('component.resource.detail.metadata.annotations.title');
+    expect(keyValue.props('rows')).toStrictEqual(annotations);
+    expect(keyValue.props('outline')).toStrictEqual(true);
+  });
+});

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

@@ -0,0 +1,12 @@
+import { Annotation } from '@shell/components/Resource/Detail/Metadata/Annotations/index.vue';
+import { computed, Ref, toValue } from 'vue';
+
+export const useDefaultAnnotations = (resource: any): Ref<Annotation[]> => {
+  const resourceValue = toValue(resource);
+
+  return computed(() => {
+    const keyValuePairs = Object.entries<string>(resourceValue.annotations || {});
+
+    return keyValuePairs.map(([key, value]) => ({ key, value }));
+  });
+};

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+import KeyValue, { Row } from '@shell/components/Resource/Detail/Metadata/KeyValue.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+
+export type Annotation = Row;
+
+export interface AnnotationsProps {
+  annotations: Annotation[];
+}
+
+</script>
+
+<script setup lang="ts">
+const { annotations } = defineProps<AnnotationsProps>();
+const store = useStore();
+const i18n = useI18n(store);
+</script>
+
+<template>
+  <KeyValue
+    :propertyName="i18n.t('component.resource.detail.metadata.annotations.title')"
+    :rows="annotations"
+    :outline="true"
+  />
+</template>

package/components/Resource/Detail/Metadata/IdentifyingInformation/__tests__/index.test.ts

@@ -0,0 +1,103 @@
+import { mount, RouterLinkStub } from '@vue/test-utils';
+import IdentifyingInformation from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue';
+import Rectangle from '@shell/components/Resource/Detail/Metadata/Rectangle.vue';
+import { markRaw } from 'vue';
+
+describe('component: Metadata/IdentifyingInformation', () => {
+  const label = 'LABEL';
+  const value = 'VALUE';
+  const status = 'error';
+  const to = 'http://google.com';
+
+  it('should render container with identifying information', async() => {
+    const wrapper = mount(IdentifyingInformation, {
+      props:  { rows: [] },
+      global: { stubs: { 'router-link': RouterLinkStub } }
+    });
+
+    expect(wrapper.find('.identifying-information').exists()).toBeTruthy();
+  });
+
+  it('should render basic label and value', async() => {
+    const wrapper = mount(IdentifyingInformation, {
+      props: {
+        rows: [
+          {
+            label,
+            value
+          }
+        ]
+      },
+      global: { stubs: { 'router-link': RouterLinkStub } }
+    });
+
+    expect(wrapper.find('.label').element.innerHTML.trim()).toStrictEqual(label);
+    expect(wrapper.find('.value span').element.innerHTML.trim()).toStrictEqual(value);
+  });
+
+  it('should render a link value', async() => {
+    const wrapper = mount(IdentifyingInformation, {
+      props: {
+        rows: [
+          {
+            label,
+            value,
+            to
+          }
+        ]
+      },
+      global: { stubs: { 'router-link': RouterLinkStub } }
+    });
+
+    expect(wrapper.find('.label').element.innerHTML.trim()).toStrictEqual(label);
+
+    const routerLinkComponent = wrapper.find('.value').getComponent(RouterLinkStub);
+
+    expect(routerLinkComponent.props('to')).toStrictEqual(to);
+    expect(routerLinkComponent.element.innerHTML).toStrictEqual(value);
+  });
+
+  it('should render a status value', async() => {
+    const wrapper = mount(IdentifyingInformation, {
+      props: {
+        rows: [
+          {
+            label,
+            value,
+            status
+          }
+        ]
+      },
+      global: { stubs: { 'router-link': RouterLinkStub } }
+    });
+
+    expect(wrapper.find('.label').element.innerHTML.trim()).toStrictEqual(label);
+    expect(wrapper.find('.value span').element.innerHTML.trim()).toStrictEqual(value);
+    expect(wrapper.find(`.value .status.${ status }`).exists()).toBeTruthy();
+  });
+
+  it('should render a valueOverride', async() => {
+    const valueOverride = {
+      component: markRaw(Rectangle),
+      props:     { outline: false }
+    };
+    const wrapper = mount(IdentifyingInformation, {
+      props: {
+        rows: [
+          {
+            label,
+            value,
+            valueOverride
+          }
+        ]
+      },
+      global: { stubs: { 'router-link': RouterLinkStub } }
+    });
+
+    expect(wrapper.find('.label').element.innerHTML.trim()).toStrictEqual(label);
+
+    const testComponent = wrapper.find('.value').getComponent(Rectangle);
+
+    expect(testComponent.props('outline')).toStrictEqual(valueOverride.props.outline);
+  });
+});

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

@@ -0,0 +1,281 @@
+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 { Row } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue';
+
+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();
+
+    return label;
+  });
+
+  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 useDefaultWorkloadIdentifyingInformation = (resource: any): ComputedRef<Row[]> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const resourceValue = toValue(resource);
+
+  return computed(() => [
+    useImage(resource).value,
+    useReady(resource).value,
+    {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.up-to-date'),
+      value: resourceValue.upToDate,
+    },
+    {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.available'),
+      value: resourceValue.available,
+    },
+  ]);
+};

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

@@ -0,0 +1,111 @@
+<script lang="ts">
+import { RouteLocationRaw } from 'vue-router';
+
+export interface Row {
+    label: string;
+    value?: string;
+    valueOverride?: {
+      component: any,
+      props?: Object
+    },
+    to?: RouteLocationRaw;
+    status?: 'success' | 'warning' | 'info' | 'error',
+}
+
+export interface MetadataProps {
+  rows: Row[];
+}
+</script>
+
+<script setup lang="ts">
+const { rows } = defineProps<MetadataProps>();
+</script>
+
+<template>
+  <div class="identifying-information">
+    <div
+      v-for="row in rows"
+      :key="`${row.label}:${row.value}`"
+      class="row"
+    >
+      <div class="label text-muted">
+        {{ row.label }}
+      </div>
+      <div
+        v-if="row.valueOverride?.component"
+        class="value"
+      >
+        <component
+          :is="row.valueOverride?.component"
+          v-if="row.valueOverride?.component"
+          v-bind="row.valueOverride?.props"
+        />
+      </div>
+      <div
+        v-else
+        class="value"
+      >
+        <div
+          v-if="row.status"
+          :class="['status', row.status]"
+        />
+        <router-link
+          v-if="row.to"
+          :to="row.to"
+        >
+          {{ row.value }}
+        </router-link>
+        <span v-else>{{ row.value }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.identifying-information {
+    display: flex;
+    flex-direction: column;
+
+    .row {
+      margin-bottom: 8px;
+
+      .value {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+
+      .label {
+        width: 30%;
+        min-width: 120px;
+      }
+
+      .status {
+        display: inline-block;
+        $size: 8px;
+        border-radius: 50%;
+        width: $size;
+        height: $size;
+        margin-right: 12px;
+
+        &.success {
+          background-color: var(--success);
+        }
+
+        &.warning {
+          background-color: var(--warning);
+        }
+
+        &.error {
+          background-color: var(--error);
+        }
+
+        &.info {
+          background-color: var(--info);
+        }
+      }
+
+    }
+
+}
+</style>