dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-test.2

package/components/Resource/Detail/Card/PodsCard/composable.ts

@@ -0,0 +1,30 @@
+import { useI18n } from '@shell/composables/useI18n';
+import { toValue } from 'vue';
+import { useStore } from 'vuex';
+
+export type ScaleFn = () => Promise<void>;
+export const useScaling = (workloadName: string, scaleUpFn: ScaleFn, scaleDownFn: ScaleFn) => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const scale = (scaleFn: () => Promise<void>, workloadName: string, direction: 'up' | 'down') => {
+    return async() => {
+      try {
+        await scaleFn();
+      } catch (err) {
+        store.dispatch('growl/fromError', {
+          title: i18n.t('workload.list.errorCannotScale', { workloadName, direction }),
+          err
+        },
+        { root: true });
+      }
+    };
+  };
+
+  const workloadNameValue = toValue(workloadName);
+
+  return {
+    scaleUp:   scale(() => scaleUpFn(), workloadNameValue, 'up'),
+    scaleDown: scale(() => scaleDownFn(), workloadNameValue, 'down')
+  };
+};

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

@@ -0,0 +1,118 @@
+<script lang="ts">
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import Scaler from '@shell/components/Resource/Detail/Card/Scaler.vue';
+import VerticalGap from '@shell/components/Resource/Detail/Card/VerticalGap.vue';
+import StatusBar from '@shell/components/Resource/Detail/StatusBar.vue';
+import StatusRow from '@shell/components/Resource/Detail/StatusRow.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { StateColor } from '@shell/utils/style';
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+export interface Props {
+  pods?: any[];
+  showScaling?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+const store = useStore();
+const i18n = useI18n(store);
+
+const props = withDefaults(defineProps<Props>(), { pods: undefined, showScaling: false });
+const emit = defineEmits(['decrease', 'increase']);
+
+const segmentAccumulator = computed(() => {
+  interface Value {
+    count: number;
+  }
+  const accumulator: {[key in StateColor]?: Value} = {};
+
+  props.pods?.forEach((pod: any) => {
+    const color: StateColor = pod.stateSimpleColor;
+
+    accumulator[color] = accumulator[color] || { count: 0 };
+    accumulator[color].count++;
+  });
+
+  return accumulator;
+});
+
+const rowAccumulator = computed(() => {
+  interface Value {
+    count: number;
+    color: StateColor;
+  }
+  const accumulator: {[key in string]: Value} = {};
+
+  props.pods?.forEach((pod: any) => {
+    accumulator[pod.stateDisplay] = accumulator[pod.stateDisplay] || { count: 0 };
+    accumulator[pod.stateDisplay].count++;
+    accumulator[pod.stateDisplay].color = pod.stateSimpleColor.replace('text-', '') as StateColor;
+  });
+
+  return accumulator;
+});
+
+const percent = (count: number, total: number) => {
+  return count / total * 100;
+};
+
+const count = computed(() => props.pods?.length || 0);
+
+const segmentColors = computed(() => Object.keys(segmentAccumulator.value) as StateColor[]);
+const segments = computed(() => segmentColors.value.map((color: StateColor) => ({
+  color,
+  percent: percent(segmentAccumulator.value[color]?.count || 0, count.value)
+})));
+
+const rowStates = computed(() => {
+  return Object.keys(rowAccumulator.value);
+});
+
+const rows = computed(() => {
+  return rowStates.value.map((state) => ({
+    color:   rowAccumulator.value[state].color,
+    label:   state,
+    count:   rowAccumulator.value[state].count,
+    percent: percent(rowAccumulator.value[state].count, count.value)
+  }));
+});
+
+</script>
+
+<template>
+  <Card :title="i18n.t('component.resource.detail.card.podsCard.title')">
+    <template
+      v-if="props.showScaling"
+      #heading-action
+    >
+      <Scaler
+        :ariaResourceName="i18n.t('component.resource.detail.card.podsCard.ariaResourceName')"
+        :value="count"
+        :min="0"
+        @increase="(newValue) => emit('increase', newValue)"
+        @decrease="(newValue) => emit('decrease', newValue)"
+      />
+    </template>
+    <StatusBar :segments="segments" />
+    <VerticalGap />
+    <div class="pod-distribution">
+      <StatusRow
+        v-for="(row, i) in rows"
+        :key="i"
+        :color="row.color"
+        :label="row.label"
+        :count="row.count"
+        :percent="row.percent"
+      />
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.pod-distribution {
+    display: flex;
+    flex-direction: column;
+}
+</style>

package/components/Resource/Detail/Card/ResourceUsageCard/composable.ts

@@ -0,0 +1,51 @@
+import { Props } from '@shell/components/Resource/Detail/Card/ResourceUsageCard/index.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+export const useCpuUsageCardDefaultProps = (resource: any): Props => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  //   const resourceValue = toValue(resource);
+
+  return computed(() => {
+    return {
+      title:     i18n.t('component.resource.detail.card.resourceUsage.cpu'),
+      used:      1.20,
+      available: 1.93
+    };
+  }).value;
+};
+
+export const useMemoryUsageCardDefaultProps = (resource: any): Props => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  //   const resourceValue = toValue(resource);
+
+  return computed(() => {
+    return {
+      title:              i18n.t('component.resource.detail.card.resourceUsage.memory'),
+      used:               870,
+      available:          3290,
+      availableFormatter: (n: number) => (n / 1000).toFixed(2),
+      unit:               'GiB',
+    };
+  }).value;
+};
+
+export const usePodUsageCardDefaultProps = (resource: any): Props => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  //   const resourceValue = toValue(resource);
+
+  return computed(() => {
+    return {
+      title:     i18n.t('component.resource.detail.card.resourceUsage.pods'),
+      used:      9,
+      available: 17
+    };
+  }).value;
+};

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

@@ -0,0 +1,79 @@
+<script lang="ts">
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import PercentageBar from '@shell/components/Resource/Detail/PercentageBar.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+export interface Props {
+    title: string;
+    unit?: string;
+    used: number;
+    usedFormatter?: (n: number) => string;
+    available: number;
+    availableFormatter?: (n: number) => string
+}
+</script>
+<script setup lang="ts">
+const store = useStore();
+const i18n = useI18n(store);
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    usedFormatter:      (n: number) => n.toString(),
+    availableFormatter: (n: number) => n.toString(),
+    unit:               undefined
+  }
+);
+
+const percentage = computed(() => {
+  const numerator = props.used || 0;
+  const denominator = props.available || 0;
+
+  return denominator === 0 ? 0 : Math.floor((numerator / denominator) * 100);
+});
+
+const used = computed(() => props.usedFormatter(props.used));
+const available = computed(() => props.availableFormatter(props.available));
+</script>
+
+<template>
+  <Card :title="props.title">
+    <div class="numerical">
+      <div class="used">
+        {{ i18n.t('component.resource.detail.card.resourceUsage.used') }}
+      </div>
+      <div class="data">
+        <span class="amount">{{ i18n.t('component.resource.detail.card.resourceUsage.amount', {used, available}) }}</span>
+        <span
+          v-if="props.unit"
+          class="unit"
+        >
+          {{ props.unit }}
+        </span>
+        <span class="spacer">/</span>
+        <span class="percentage">{{ percentage }}%</span>
+      </div>
+    </div>
+    <PercentageBar :percent="percentage" />
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.numerical {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  margin-bottom: 8px;
+
+  .spacer {
+    margin: 0 8px;
+  }
+
+  .percentage {
+    font-weight: bold;
+  }
+}
+</style>

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

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+
+export interface Props {
+  ariaResourceName: string;
+  value?: number;
+  min?: number;
+  max?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: 0, min: undefined, max: undefined
+});
+const emit = defineEmits(['decrease', 'increase']);
+
+const store = useStore();
+const i18n = useI18n(store);
+</script>
+
+<template>
+  <div class="scaler">
+    <button
+      class="decrease"
+      :aria-label="i18n.t('component.resource.detail.card.scaler.ariaLabel.decrease', {resourceName: props.ariaResourceName})"
+      :disabled="!!props.min && (props.value <= props.min)"
+      @click="() => emit('decrease', props.value - 1)"
+    >
+      <i class="icon icon-sm icon-minus" />
+    </button>
+    <div class="value">
+      {{ props.value }}
+    </div>
+    <button
+      class="increase"
+      :aria-label="i18n.t('component.resource.detail.card.scaler.ariaLabel.increase', {resourceName: props.ariaResourceName})"
+      :disabled="!!props.max && (props.value >= props.max)"
+      @click="() => emit('increase', props.value + 1)"
+    >
+      <i class="icon icon-sm icon-plus" />
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.scaler {
+  display: inline-flex;
+  align-items: center;
+  background-color: hsl(from var(--primary) h s calc(l + 30));
+  border-radius: var(--border-radius-md);
+  border: 1px solid var(--primary);
+  overflow: hidden;
+
+  button {
+    all: initial;
+    cursor: pointer;
+    background: none;
+    height: 100%;
+    width: 32px;
+    height: 32px;
+
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    color: var(--primary);
+
+    i.icon {
+      font-size: 0.6em;
+    }
+
+    &:hover {
+      background-color: hsl(from var(--primary) h s calc(l + 20));
+    }
+
+    &[disabled] {
+      cursor: not-allowed;
+      background: var(--disabled-bg);
+      color: var(--disabled-text);
+    }
+  }
+
+  .value {
+    color: initial;
+    cursor: default;
+    padding: 4px;
+    padding-top: 5px;
+  }
+}
+</style>

package/components/Resource/Detail/Card/StateCard/composables.ts

@@ -0,0 +1,112 @@
+import { extractCounts, Props as ResourceRowProps } from '@shell/components/Resource/Detail/ResourceRow.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { INGRESS, SERVICE } from '@shell/config/types';
+import { getHighestAlertColor } from '@shell/utils/style';
+import { computed, Ref, toValue } from 'vue';
+import { useStore } from 'vuex';
+import { Props as StateCardProps } from '@shell/components/Resource/Detail/Card/StateCard/index.vue';
+import { RouteLocationRaw } from 'vue-router';
+
+export function useResourceCardRow(label: string, resources: any[], to?: RouteLocationRaw): ResourceRowProps {
+  const colors = resources.map((r: any) => r.stateSimpleColor);
+  const states = resources.map((r: any) => r.stateDisplay.toLowerCase());
+
+  return {
+    label,
+    color:  resources.length ? getHighestAlertColor(colors) : undefined,
+    counts: resources.length ? extractCounts(states) : undefined,
+    to
+  };
+}
+
+export interface Pairs {
+    label: string;
+    to?: RouteLocationRaw;
+    resources: any[];
+}
+
+export function useDefaultResources(pairs: Ref<Pairs[]>) {
+  const pairsValue = toValue(pairs);
+  const rows = computed(() => pairsValue.map(({ label, resources, to }) => useResourceCardRow(label, resources, to)));
+
+  return rows;
+}
+
+export function useResourcePair(label: string, type: string, resources?: any[]) {
+  const store = useStore();
+
+  return computed(() => {
+    if (!resources) {
+      return undefined;
+    }
+
+    const resourcesValue = toValue(resources);
+
+    return {
+      label,
+      resources: resourcesValue,
+      to:        (resourcesValue?.length > 0) ? {
+        name:   'c-cluster-product-resource',
+        params: {
+          cluster:  store.getters.currentCluster.id,
+          product:  store.getters.currentProduct.name,
+          resource: type
+        }
+      } : undefined,
+    };
+  });
+}
+
+export function useDefaultWorkloadResources(services?: any[], ingresses?: any[], referredToBy?: any[], refersTo?: any[]): StateCardProps {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const pairs: Ref<(Pairs | undefined)[]> = computed(() => [
+    useResourcePair(i18n.t('component.resource.detail.card.resourcesCard.rows.services'), SERVICE, services).value,
+    useResourcePair(i18n.t('component.resource.detail.card.resourcesCard.rows.ingresses'), INGRESS, ingresses).value,
+    referredToBy ? {
+      label:     i18n.t('component.resource.detail.card.resourcesCard.rows.referredToBy'),
+      resources: toValue(referredToBy || []),
+      to:        { hash: '#related' }
+    } : undefined,
+    refersTo ? {
+      label:     i18n.t('component.resource.detail.card.resourcesCard.rows.refersTo'),
+      resources: toValue(refersTo || []),
+      to:        { hash: '#related' }
+    } : undefined
+  ]);
+
+  const remainingPairs = computed(() => pairs.value.filter((p: (Pairs | undefined)): p is Pairs => p !== undefined));
+
+  const rows = useDefaultResources(remainingPairs);
+
+  return {
+    title: 'Resources',
+    rows:  rows.value
+  };
+}
+
+export function useDefaultWorkloadInsightsCardProps(): StateCardProps {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const rows: ResourceRowProps[] = [
+    {
+      label:  i18n.t('component.resource.detail.card.insightsCard.rows.conditions'),
+      to:     '#',
+      color:  'disabled',
+      counts: [{ label: 'Available', count: 1 }, { label: 'Progressing', count: 1 }]
+    },
+    {
+      label:  i18n.t('component.resource.detail.card.insightsCard.rows.events'),
+      to:     '#',
+      color:  'disabled',
+      counts: [{ label: 'Normal', count: 2 }]
+    }
+  ];
+
+  return {
+    title: i18n.t('component.resource.detail.card.insightsCard.title'),
+    rows
+  };
+}

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import ResourceRow, { Props as ResourceRowProps } from '@shell/components/Resource/Detail/ResourceRow.vue';
+
+export interface Props {
+  title: string;
+  rows: ResourceRowProps[];
+}
+</script>
+
+<script setup lang="ts">
+const { title, rows } = defineProps<Props>();
+</script>
+
+<template>
+  <Card :title="title">
+    <div class="resource-rows">
+      <ResourceRow
+        v-for="(row, i) in rows"
+        :key="i"
+        :label="row.label"
+        :color="row.color"
+        :to="row.to"
+        :counts="row.counts"
+      />
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.resource-rows {
+    display: flex;
+    flex-direction: column;
+
+    & > *:not(:first-of-type) {
+        margin-top: 4px;
+    }
+}
+</style>

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

@@ -0,0 +1,11 @@
+<template>
+  <div class="vertical-gap">
+&nbsp;
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.vertical-gap {
+    height: 12px;
+}
+</style>

package/components/Resource/Detail/Card/__tests__/Card.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/__tests__/PodsCard.test.ts

@@ -0,0 +1,84 @@
+import { mount } from '@vue/test-utils';
+import Bubble from '@shell/components/Resource/Detail/Card/PodsCard/Bubble.vue';
+import PodsCard from '@shell/components/Resource/Detail/Card/PodsCard/index.vue';
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import Scaler from '@shell/components/Resource/Detail/Card/Scaler.vue';
+import StatusBar from '@shell/components/Resource/Detail/StatusBar.vue';
+import StatusRow from '@shell/components/Resource/Detail/StatusRow.vue';
+import { createStore } from 'vuex';
+
+describe('component: Bubble', () => {
+  it('should render element with bubble class for styling', async() => {
+    const content = 'content';
+    const wrapper = mount(Bubble, { slots: { default: content } });
+
+    expect(wrapper.element.className).toStrictEqual('bubble');
+  });
+
+  it('should render default slot content', async() => {
+    const content = 'content';
+    const wrapper = mount(Bubble, { slots: { default: content } });
+
+    expect(wrapper.find('.bubble').element.innerHTML).toStrictEqual(content);
+  });
+});
+
+describe('component: PodsCard', () => {
+  const store = createStore({});
+
+  const podSuccess = { stateSimpleColor: 'success', stateDisplay: 'Completed' };
+  const podFail = { stateSimpleColor: 'error', stateDisplay: 'Error' };
+
+  it('should pass title to Card prop correctly', async() => {
+    const wrapper = mount(PodsCard, { props: { showScaling: true }, global: { provide: { store } } });
+
+    const card = wrapper.findComponent(Card);
+
+    expect(card.props('title')).toStrictEqual('component.resource.detail.card.podsCard.title');
+  });
+
+  it('should show Scaler when showScaling is true', async() => {
+    const wrapper = mount(PodsCard, { props: { showScaling: true }, global: { provide: { store } } });
+
+    expect(wrapper.find('.scaler').exists()).toBeTruthy();
+  });
+
+  it('should hide scaler when showScaling is false', async() => {
+    const wrapper = mount(PodsCard, { props: { showScaling: false }, global: { provide: { store } } });
+
+    expect(wrapper.find('.scaler').exists()).toBeFalsy();
+  });
+
+  it('should pass the appropriate props to the Scaler component', async() => {
+    const wrapper = mount(PodsCard, { props: { showScaling: true, pods: [podSuccess] }, global: { provide: { store } } });
+    const scaler = wrapper.findComponent(Scaler);
+
+    expect(scaler.props('value')).toStrictEqual(1);
+    expect(scaler.props('min')).toStrictEqual(0);
+  });
+
+  it('should pass the appropriate props to the StatusBar component based on the pods input', async() => {
+    const wrapper = mount(PodsCard, { props: { showScaling: true, pods: [podSuccess, podFail] }, global: { provide: { store } } });
+    const statusBar = wrapper.findComponent(StatusBar);
+
+    const segments = statusBar.props('segments');
+
+    expect(segments[0].color).toStrictEqual('success');
+    expect(segments[0].percent).toStrictEqual(50);
+
+    expect(segments[1].color).toStrictEqual('error');
+    expect(segments[1].percent).toStrictEqual(50);
+  });
+
+  it('should pass the appropriate props to the StatusRow component based on the pods input', async() => {
+    const wrapper = mount(PodsCard, { props: { showScaling: true, pods: [podSuccess, podFail] }, global: { provide: { store } } });
+    const rows = wrapper.findComponent(StatusRow);
+
+    expect(rows.props()).toStrictEqual({
+      color:   'success',
+      count:   1,
+      label:   'Completed',
+      percent: 50
+    });
+  });
+});