index.vue

<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';
import type { RouteLocationRaw } from 'vue-router';

export interface Props {
  title: string;
  resources?: any[];
  showScaling?: boolean;
  showPercent?: boolean;
  noResourcesMessage?: string;
  to?: RouteLocationRaw;
  rowTo?: RouteLocationRaw | string;
}
</script>

<script setup lang="ts">
const store = useStore();
const i18n = useI18n(store);

const props = withDefaults(defineProps<Props>(), {
  resources:          undefined,
  showScaling:        false,
  showPercent:        true,
  noResourcesMessage: undefined,
  to:                 undefined,
  rowTo:              undefined,
});
const emit = defineEmits(['decrease', 'increase']);

const segmentAccumulator = computed(() => {
  interface Value {
    count: number;
  }
  const accumulator: {[key in StateColor]?: Value} = {};

  props.resources?.forEach((resource: any) => {
    const color: StateColor = resource.stateSimpleColor;

    accumulator[color] = accumulator[color] || { count: 0 };
    accumulator[color].count += resource.count || 1;
  });

  return accumulator;
});

const rowAccumulator = computed(() => {
  interface Value {
    count: number;
    color: StateColor;
    stateId: string;
  }
  const accumulator: {[key in string]: Value} = {};

  props.resources?.forEach((resource: any) => {
    accumulator[resource.stateDisplay] = accumulator[resource.stateDisplay] || { count: 0, stateId: resource.stateId || resource.stateDisplay };
    accumulator[resource.stateDisplay].count += resource.count || 1;
    accumulator[resource.stateDisplay].color = resource.stateSimpleColor.replace('text-', '') as StateColor;
  });

  return accumulator;
});

const percent = (count: number, total: number) => {
  return count / total * 100;
};

const count = computed(() => {
  if (!props.resources?.length) {
    return 0;
  }

  return props.resources.reduce((sum: number, r: any) => sum + (r.count || 1), 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,
    stateId: rowAccumulator.value[state].stateId,
    count:   rowAccumulator.value[state].count,
    percent: percent(rowAccumulator.value[state].count, count.value)
  }));
});

function rowRoute(stateId: string): RouteLocationRaw | undefined {
  if (!props.rowTo || typeof props.rowTo === 'string') {
    return undefined;
  }

  return { ...props.rowTo, query: { q: `"metadata.state.name":"${ stateId }"` } };
}

</script>

<template>
  <Card
    :title="title"
    data-testid="resource-detail-status-card"
    :to="props.to"
  >
    <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
      v-if="rows.length > 0"
      :segments="segments"
    />
    <VerticalGap v-if="rows.length > 0" />
    <div
      v-if="rows.length > 0"
      class="pod-distribution"
    >
      <StatusRow
        v-for="(row, i) in rows"
        :key="i"
        :color="row.color"
        :label="row.label"
        :count="row.count"
        :percent="row.percent"
        :showPercent="props.showPercent"
        :to="rowRoute(row.stateId)"
      />
    </div>
    <div
      v-else-if="props.noResourcesMessage"
      class="text-deemphasized"
    >
      {{ props.noResourcesMessage }}
    </div>
  </Card>
</template>

<style lang="scss" scoped>
.pod-distribution {
    display: flex;
    flex-direction: column;
}
</style>