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

package/components/Resource/Detail/Metadata/Rectangle.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+export interface RectangleProps {
+    outline?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<RectangleProps>(),
+  { outline: false }
+);
+
+</script>
+
+<template>
+  <div
+    class="rectangle"
+    :class="{outline: props.outline}"
+  >
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.rectangle {
+    border: 1px solid var(--tag-bg);
+    border-radius: 4px;
+    padding: 4px;
+
+    &:not(.outline) {
+        background-color: var(--tag-bg);
+    }
+}
+</style>

package/components/Resource/Detail/Metadata/__tests__/KeyValue.test.ts

@@ -0,0 +1,107 @@
+import { mount, RouterLinkStub } from '@vue/test-utils';
+import KeyValue from '@shell/components/Resource/Detail/Metadata/KeyValue.vue';
+import { createStore } from 'vuex';
+import Rectangle from '@shell/components/Resource/Detail/Metadata/Rectangle.vue';
+
+describe('component: Metadata/IdentifyingInformation', () => {
+  const propertyName = 'PROPERTY_NAME';
+  const store = createStore({});
+  const cleanTooltip = jest.fn();
+  const directives = { 'clean-tooltip': cleanTooltip };
+  const rows = [{ key: 'KEY', value: 'VALUE' }];
+
+  afterEach(() => {
+    cleanTooltip.mockClear();
+  });
+
+  it('should render container with identifying information', async() => {
+    const wrapper = mount(KeyValue, {
+      props:  { propertyName, rows },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        provide: { store },
+        directives
+      }
+    });
+
+    expect(wrapper.find('.key-value').exists()).toBeTruthy();
+  });
+
+  it('should render property name and count', async() => {
+    const wrapper = mount(KeyValue, {
+      props:  { propertyName, rows },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        provide: { store },
+        directives
+      }
+    });
+
+    expect(wrapper.find('.heading .title').element.innerHTML.trim()).toStrictEqual(propertyName);
+    expect(wrapper.find('.heading .count').element.innerHTML.trim()).toStrictEqual(rows.length.toString());
+  });
+
+  it('should render no rows messaging', async() => {
+    const wrapper = mount(KeyValue, {
+      props:  { propertyName, rows: [] },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        provide: { store },
+        directives
+      }
+    });
+
+    expect(wrapper.find('.empty .no-rows').element.innerHTML.trim()).toStrictEqual(`component.resource.detail.metadata.keyValue.noRows-{"propertyName":"${ propertyName.toLowerCase() }"}`);
+    expect(wrapper.find('.empty .show-configuration').findComponent(RouterLinkStub).element.innerHTML).toStrictEqual('component.resource.detail.metadata.keyValue.showConfiguration');
+  });
+
+  it('should render show all button if rows length exceeds max', async() => {
+    const wrapper = mount(KeyValue, {
+      props: {
+        propertyName, rows: [...rows, ...rows], maxRows: 1
+      },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        provide: { store },
+        directives
+      }
+    });
+
+    expect(wrapper.find('.show-all').exists()).toBeTruthy();
+  });
+
+  it('should pass outline down to rectangle', async() => {
+    const wrapper = mount(KeyValue, {
+      props: {
+        propertyName, rows, outline: false
+      },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        provide: { store },
+        directives
+      }
+    });
+
+    const rectangleComponent = wrapper.find('.row').findComponent(Rectangle);
+
+    expect(rectangleComponent.props('outline')).toStrictEqual(false);
+  });
+
+  it('should render a concatenated string for the tooltip and default slot of the rectangle', async() => {
+    const wrapper = mount(KeyValue, {
+      props:  { propertyName, rows },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        provide: { store },
+        directives
+      }
+    });
+
+    const row = rows[0];
+    const concatenated = `${ row.key }: ${ row.value }`;
+    const rectangleComponent = wrapper.find('.row').findComponent(Rectangle);
+
+    expect(rectangleComponent.element.innerHTML).toStrictEqual(concatenated);
+    expect(cleanTooltip.mock.calls[0][1].value).toStrictEqual(concatenated);
+  });
+});

package/components/Resource/Detail/Metadata/__tests__/Rectangle.test.ts

@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils';
+import Rectangle from '@shell/components/Resource/Detail/Metadata/Rectangle.vue';
+
+describe('component: Rectangle', () => {
+  it('shoulder render container with class title and missing outline when passed outline:false', async() => {
+    const wrapper = mount(Rectangle, { props: { outline: false } });
+
+    expect(wrapper.find('.rectangle').exists()).toBeTruthy();
+    expect(wrapper.find('.rectangle.outline').exists()).toBeFalsy();
+  });
+
+  it('should render outline class when passed outline:true', async() => {
+    const wrapper = mount(Rectangle, { props: { outline: true } });
+
+    expect(wrapper.find('.rectangle.outline').exists()).toBeTruthy();
+  });
+
+  it('should render default slot', async() => {
+    const content = 'CONTENT';
+    const wrapper = mount(Rectangle, { slots: { default: content } });
+
+    expect(wrapper.find('.rectangle').element.innerHTML).toStrictEqual(content);
+  });
+});

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

@@ -0,0 +1,91 @@
+import { mount } from '@vue/test-utils';
+import Metadata from '@shell/components/Resource/Detail/Metadata/index.vue';
+import { createStore } from 'vuex';
+
+describe('component: Metadata/index', () => {
+  const store = createStore({});
+  const stubs = ['IdentifyingInformation', 'KeyValue', 'Labels', 'Annotations'];
+
+  const identifyingInformation = [{ label: 'zero' }];
+  const keyValue = [{ key: 'key', value: 'value' }];
+
+  it('should render the container with metadata class', async() => {
+    const wrapper = mount(Metadata, {
+      props: {
+        identifyingInformation,
+        labels:      [],
+        annotations: []
+      },
+      global: { provide: { store }, stubs }
+    });
+
+    expect(wrapper.find('.spaced-row.metadata').exists()).toBeTruthy();
+  });
+
+  it('should render identifying information with the appropriate class and rows', async() => {
+    const wrapper = mount(Metadata, {
+      props: {
+        identifyingInformation,
+        labels:      [],
+        annotations: []
+      },
+      global: { provide: { store }, stubs }
+    });
+
+    const identingInformationComponent = wrapper.find('.identifying-info').getComponent<any>('identifying-information-stub');
+
+    expect(identingInformationComponent.props('rows')).toStrictEqual(identifyingInformation);
+  });
+
+  it('should render both empty message if labels and annotations are empty and labels/annotations are hidden', async() => {
+    const wrapper = mount(Metadata, {
+      props: {
+        identifyingInformation,
+        labels:      [],
+        annotations: []
+      },
+      global: { provide: { store }, stubs }
+    });
+
+    expect(wrapper.find('.labels').exists()).toBeFalsy();
+    expect(wrapper.find('.annotations').exists()).toBeFalsy();
+    const keyValueComponent = wrapper.find('.labels-and-annotations-empty').getComponent<any>('key-value-stub');
+
+    expect(keyValueComponent.props('rows')).toStrictEqual([]);
+    expect(keyValueComponent.props('propertyName')).toStrictEqual('component.resource.detail.metadata.labelsAndAnnotations');
+  });
+
+  it('should render labels and pass appropriate props and not render the empty message', async() => {
+    const wrapper = mount(Metadata, {
+      props: {
+        identifyingInformation,
+        labels:      keyValue,
+        annotations: []
+      },
+      global: { provide: { store }, stubs }
+    });
+
+    expect(wrapper.find('.labels-and-annotations-empty').exists()).toBeFalsy();
+
+    const labelsComponent = wrapper.find('.labels').getComponent<any>('labels-stub');
+
+    expect(labelsComponent.props('labels')).toStrictEqual(keyValue);
+  });
+
+  it('should render annotations and pass appropriate props and not render the empty message', async() => {
+    const wrapper = mount(Metadata, {
+      props: {
+        identifyingInformation,
+        labels:      [],
+        annotations: keyValue
+      },
+      global: { provide: { store }, stubs }
+    });
+
+    expect(wrapper.find('.labels-and-annotations-empty').exists()).toBeFalsy();
+
+    const labelsComponent = wrapper.find('.annotations').getComponent<any>('annotations-stub');
+
+    expect(labelsComponent.props('annotations')).toStrictEqual(keyValue);
+  });
+});

package/components/Resource/Detail/Metadata/composables.ts

@@ -0,0 +1,29 @@
+import { Row as IdentifyingInformationRow } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue';
+import { useDefaultIdentifyingInformation } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/composable';
+import { useDefaultLabels } from '@shell/components/Resource/Detail/Metadata/Labels/composable';
+import { useDefaultAnnotations } from '@shell/components/Resource/Detail/Metadata/Annotations/composable';
+import { computed, toValue, Ref } from 'vue';
+
+export const useBasicMetadata = (resource: any) => {
+  const labels = useDefaultLabels(resource);
+  const annotations = useDefaultAnnotations(resource);
+
+  return {
+    labels,
+    annotations
+  };
+};
+
+export const useDefaultMetadata = (resource: any, additionalIdentifyingInformation?: (IdentifyingInformationRow[] | Ref<IdentifyingInformationRow[]>)) => {
+  const defaultIdentifyingInformation = useDefaultIdentifyingInformation(resource);
+  const additionalIdentifyingInformationValue = toValue(additionalIdentifyingInformation);
+
+  const identifyingInformation = computed(() => [...defaultIdentifyingInformation.value, ...(additionalIdentifyingInformationValue || [])]);
+  const { labels, annotations } = useBasicMetadata(resource);
+
+  return {
+    identifyingInformation,
+    labels,
+    annotations
+  };
+};

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

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import IdentifyingInformation, { Row as IdentifyingInformationRow } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue';
+import Labels, { Label } from '@shell/components/Resource/Detail/Metadata/Labels/index.vue';
+import Annotations, { Annotation } from '@shell/components/Resource/Detail/Metadata/Annotations/index.vue';
+import SpacedRow from '@shell/components/Resource/Detail/SpacedRow.vue';
+import KeyValue from '@shell/components/Resource/Detail/Metadata/KeyValue.vue';
+import { computed } from 'vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+
+export interface MetadataProps {
+  identifyingInformation: IdentifyingInformationRow[],
+  labels: Label[],
+  annotations: Annotation[]
+}
+
+const { identifyingInformation, labels, annotations } = defineProps<MetadataProps>();
+
+const store = useStore();
+const i18n = useI18n(store);
+
+const showBothEmpty = computed(() => labels.length === 0 && annotations.length === 0);
+</script>
+
+<template>
+  <SpacedRow class="metadata ppb-3">
+    <div
+      class="identifying-info"
+    >
+      <IdentifyingInformation :rows="identifyingInformation" />
+    </div>
+    <!-- In the renders we want the same empty message that the labels/annotations show but we want it to span two columns. This is a cheap way to keep the look consistent without duplicating code. -->
+    <div
+      v-if="showBothEmpty"
+      class="labels-and-annotations-empty"
+    >
+      <KeyValue
+        :rows="[]"
+        :propertyName="i18n.t('component.resource.detail.metadata.labelsAndAnnotations')"
+      />
+    </div>
+    <!-- I'm not using v-else here so I can maintain the spacing correctly with the other columns in other rows. -->
+    <div
+      v-if="!showBothEmpty"
+      class="labels"
+    >
+      <Labels :labels="labels" />
+    </div>
+    <div
+      v-if="!showBothEmpty"
+      class="annotations"
+    >
+      <Annotations :annotations="annotations" />
+    </div>
+  </SpacedRow>
+</template>
+
+<style lang="scss" scoped>
+.metadata {
+    .labels-and-annotations-empty {
+      grid-column: span 2;
+    }
+
+    border-bottom: 1px solid var(--border);
+}
+</style>

package/components/Resource/Detail/Page.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="resource-detail-page">
+    <div
+      v-if="$slots['top-area']"
+      class="top-area"
+    >
+      <slot name="top-area" />
+    </div>
+    <div
+      v-if="$slots['middle-area']"
+      class="middle-area mmt-6"
+    >
+      <slot name="middle-area" />
+    </div>
+    <div
+      v-if="$slots['bottom-area']"
+      class="bottom-area mmt-6"
+    >
+      <slot name="bottom-area" />
+    </div>
+  </div>
+</template>

package/components/Resource/Detail/PercentageBar.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+export interface Props {
+  percent: number;
+  percentageColor?: string;
+  baseColor?: string;
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    baseColor:       'var(--progress-bg)',
+    percentageColor: 'var(--primary)'
+  }
+);
+
+const usedWidth = computed(() => `${ props.percent }%`);
+</script>
+
+<template>
+  <div class="percentage-bar">
+    <div class="used" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.percentage-bar {
+  border-radius: var(--border-radius-md);
+  height: 16px;
+  overflow: hidden;
+  background-color: v-bind('props.baseColor');
+
+  .used {
+    height: 100%;
+    background-color: v-bind('props.percentageColor');
+    width: v-bind('usedWidth')
+  }
+}
+</style>

package/components/Resource/Detail/ResourceRow.vue

@@ -0,0 +1,119 @@
+<script lang="ts">
+import SubtleLink from '@shell/components/SubtleLink.vue';
+import { StateColor, stateColorCssVar } from '@shell/utils/style';
+import { sortBy } from 'lodash';
+import { RouteLocationRaw } from 'vue-router';
+
+export interface Count {
+  label: string;
+  count: number;
+}
+
+export interface Props {
+  label: string;
+  to?: RouteLocationRaw;
+  color?: StateColor;
+  counts?: Count[];
+}
+
+export function extractCounts(labels: string[]): Count[] {
+  const accumulator: { [k: string]: number} = {};
+
+  labels.forEach((l: string) => {
+    accumulator[l] = accumulator[l] || 0;
+    accumulator[l]++;
+  });
+
+  const counts: Count[] = Object.entries(accumulator).map(([label, count]) => ({ label, count }));
+
+  return sortBy(counts, 'label');
+}
+
+</script>
+
+<script setup lang="ts">
+const {
+  label, to, counts, color
+} = defineProps<Props>();
+</script>
+
+<template>
+  <div class="resource-row">
+    <div class="left">
+      <SubtleLink
+        v-if="to"
+        :to="to"
+      >
+        {{ label }}
+      </SubtleLink>
+      <span
+        v-else
+        class="text-muted"
+      >
+        {{ label }}
+      </span>
+    </div>
+    <div class="right">
+      <div
+        v-if="!counts || counts.length == 0"
+        class="text-muted"
+      >
+        &mdash;
+      </div>
+      <div
+        v-else
+        class="counts"
+      >
+        <span
+          v-if="color"
+          class="dot"
+          :style="{backgroundColor: stateColorCssVar(color)}"
+        >
+&nbsp;
+        </span>
+        <span
+          v-for="count in counts"
+          :key="count.label"
+          class="count"
+        >
+          {{ count.count }} {{ count.label }}<span class="and">&nbsp;+&nbsp;</span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.resource-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .right {
+      flex-grow: 1;
+      text-align: right;
+    }
+
+    .counts {
+      display: inline-flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+    }
+
+    .count:last-of-type .and {
+      display: none;
+    }
+
+    .dot {
+      display: inline-block;
+
+      $size: 6px;
+      width: $size;
+      height: $size;
+
+      border-radius: 50%;
+      margin-right: 10px;
+    }
+}
+</style>

package/components/Resource/Detail/SpacedRow.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="spaced-row">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.spaced-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-auto-flow: dense;
+  grid-gap: 24px;
+}
+</style>

package/components/Resource/Detail/StatusBar.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { stateColorCssVar, StateColor } from '@shell/utils/style';
+
+export interface Segment {
+  color: StateColor;
+  percent: number;
+}
+
+export interface Props {
+  segments: Segment[]
+}
+
+const { segments } = defineProps<Props>();
+
+const computeStyle = (segment: Segment) => {
+  return {
+    backgroundColor: stateColorCssVar(segment.color),
+    width:           `${ segment.percent }%`
+  };
+};
+</script>
+
+<template>
+  <div class="status-bar">
+    <div
+      v-for="(segment, i) in segments"
+      :key="i"
+      class="segment"
+      :style="computeStyle(segment)"
+    >
+&nbsp;
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.status-bar {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    column-gap: 2px;
+    height: 21px;
+
+    .segment {
+        height: 4px;
+
+        &:first-of-type {
+          border-top-left-radius: 4px;
+          border-bottom-left-radius: 4px;
+        }
+
+        &:last-of-type {
+          border-top-right-radius: 4px;
+          border-bottom-right-radius: 4px;
+        }
+    }
+}
+</style>

package/components/Resource/Detail/StatusRow.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import Bubble from '@shell/components/Resource/Detail/Card/PodsCard/Bubble.vue';
+import { StateColor, stateColorCssVar } from '@shell/utils/style';
+
+export interface Props {
+        color: StateColor;
+        label: string;
+        count: number;
+        percent: number;
+}
+
+const {
+  color, label, count, percent
+} = defineProps<Props>();
+</script>
+
+<template>
+  <div class="status-row">
+    <div
+      class="indicator"
+      :style="{backgroundColor: stateColorCssVar(color)}"
+    />
+    <div class="label">
+      {{ label }}
+    </div>
+    <div class="count">
+      <Bubble>{{ count }}</Bubble>
+    </div>
+    <div class="percent text-muted">
+      {{ percent.toFixed(1) }}%
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.status-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    &:not(:first-of-type) {
+      margin-top: 8px;
+    }
+
+    .label {
+      flex-grow: 1;
+    }
+
+    .indicator {
+      height: 4px;
+      border-radius: 4px;
+      width: 20px;
+      margin-right: 10px;
+    }
+
+    .percent {
+      width: 60px;
+      text-align: right;
+    }
+}
+</style>

package/components/Resource/Detail/TitleBar/Title.vue

@@ -0,0 +1,13 @@
+<template>
+  <h1 class="title">
+    <slot name="default" />
+  </h1>
+</template>
+
+<style lang="scss" scoped>
+  h1.title {
+    display: inline-block;
+    align-items: center;
+    line-height: 18px;
+  }
+</style>