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

package/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import WorkloadCard from './WorkloadCard.vue';
+import type { WorkloadDashboardByStateLayout, WorkloadDashboardResourceRouteFn } from './types';
+
+const props = defineProps<{
+  layout: WorkloadDashboardByStateLayout;
+  resourceRoute: WorkloadDashboardResourceRouteFn;
+}>();
+
+const gridTemplateRows = computed(() => {
+  return `repeat(${ Math.max(1, props.layout.cards?.length) }, auto)`;
+});
+
+function gridColumnEnd(rowCount: number, maxSpan: number): string {
+  const span = Math.min(rowCount, maxSpan);
+
+  return `${ -(maxSpan - span + 1) }`;
+}
+
+function bodyColumns(rowCount: number, maxSpan: number): number | undefined {
+  const cols = Math.min(rowCount, maxSpan);
+
+  return cols >= 2 ? cols : undefined;
+}
+
+const heroFullGridColumnEnd = computed(() => gridColumnEnd(props.layout.hero?.rows.length ?? 3, 3));
+const heroWideGridColumnEnd = computed(() => gridColumnEnd(props.layout.hero?.rows.length ?? 2, 2));
+const heroMode = computed(() => {
+  const cards = props.layout.cards;
+
+  if (cards.length === 0 && !props.layout.subHero) {
+    return 'full';
+  } else if (!props.layout.subHero) {
+    return 'wide';
+  }
+
+  return 'default';
+});
+
+const heroBodyColumns = computed(() => {
+  if (heroMode.value === 'full') {
+    return bodyColumns(props.layout.hero?.rows.length ?? 0, 3);
+  }
+  if (heroMode.value === 'wide') {
+    return bodyColumns(props.layout.hero?.rows.length ?? 0, 2);
+  }
+
+  return undefined;
+});
+
+function toCardRows(rows: typeof props.layout.cards[0]['rows']) {
+  return rows.map((row) => ({
+    label:  row.label,
+    to:     props.resourceRoute(row.type, row.stateNames),
+    color:  row.color,
+    counts: row.counts,
+  }));
+}
+</script>
+
+<template>
+  <div
+    class="bento-grid"
+    :class="{ 'bento-grid--has-sub-hero': !!layout.subHero }"
+  >
+    <WorkloadCard
+      v-for="card in layout.cards"
+      :key="card.color"
+      class="state-card"
+      data-testid="workload-dashboard-state-card"
+      :class="'state-card--' + card.color"
+      :rows="toCardRows(card.rows)"
+      :aria-label="card.color + ' workloads'"
+    />
+    <WorkloadCard
+      v-if="layout.subHero"
+      class="state-card bento-sub-hero"
+      data-testid="workload-dashboard-state-card"
+      :class="'state-card--' + layout.subHero.color"
+      :rows="toCardRows(layout.subHero.rows)"
+      :aria-label="layout.subHero.color + ' workloads'"
+    />
+    <WorkloadCard
+      v-if="layout.hero"
+      class="state-card bento-hero"
+      data-testid="workload-dashboard-state-card"
+      :class="['state-card--' + layout.hero.color, 'bento-hero--' + heroMode]"
+      :body-columns="heroBodyColumns"
+      :rows="toCardRows(layout.hero.rows)"
+      :aria-label="layout.hero.color + ' workloads'"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.bento-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: v-bind(gridTemplateRows);
+  grid-auto-flow: dense;
+  gap: 15px;
+
+  .bento-hero {
+    grid-column: 3;
+    grid-row: 1 / -1;
+
+    &--full {
+      grid-column: 1 / v-bind(heroFullGridColumnEnd);
+    }
+
+    &--wide {
+      grid-column: 2 / v-bind(heroWideGridColumnEnd);
+    }
+  }
+
+  .bento-sub-hero {
+    grid-column: 2;
+    grid-row: 1 / -1;
+  }
+
+  &.bento-grid--has-sub-hero {
+    .state-card:not(.bento-hero):not(.bento-sub-hero) {
+      grid-column: 1;
+    }
+  }
+
+  .state-card {
+    border: 0;
+
+    @each $color in (error, warning, info, success, disabled) {
+      &--#{$color} {
+        background: var(--#{$color}-banner-bg, rgba(var(--#{$color}-rgb), 0.1));
+      }
+    }
+  }
+}
+</style>

package/pages/c/_cluster/explorer/workload-dashboard/ByTypeSection.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import WorkloadTypeCard from './WorkloadTypeCard.vue';
+import type { WorkloadDashboardByTypeCard, WorkloadDashboardResourceRouteFn } from './types';
+
+defineProps<{
+  cards: WorkloadDashboardByTypeCard[];
+  resourceRoute: WorkloadDashboardResourceRouteFn;
+}>();
+</script>
+
+<template>
+  <div class="card-grid">
+    <WorkloadTypeCard
+      v-for="card in cards"
+      :key="card.title"
+      :title="card.title"
+      :type="card.type"
+      :resource-route="resourceRoute"
+      :resources="card.resources"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+}
+</style>

package/pages/c/_cluster/explorer/workload-dashboard/WorkloadCard.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+import SubtleLink from '@shell/components/SubtleLink.vue';
+import StateDot from '@shell/components/StateDot/index.vue';
+import type { StateColor } from '@shell/utils/style';
+
+export interface WorkloadCardRow {
+  label: string;
+  to?: RouteLocationRaw;
+  color?: StateColor;
+  counts?: { label: string; count: number }[];
+}
+
+const { bodyColumns } = defineProps<{
+  bodyColumns?: number;
+  rows: WorkloadCardRow[];
+  ariaLabel?: string;
+}>();
+
+const gridColumns = computed(() => bodyColumns ? `repeat(${ bodyColumns }, 1fr)` : 'none');
+</script>
+
+<template>
+  <div
+    class="workload-card"
+    role="group"
+    :aria-label="ariaLabel"
+  >
+    <ul
+      class="body"
+      :class="{ 'body--grid': bodyColumns }"
+    >
+      <li
+        v-for="(row, idx) in rows"
+        :key="idx"
+        class="resource-row"
+      >
+        <StateDot
+          v-if="row.color"
+          class="state-dot"
+          :color="row.color"
+        />
+        <span class="left">
+          <SubtleLink
+            v-if="row.to && row.counts?.length"
+            :to="row.to"
+          >
+            {{ row.label }}
+          </SubtleLink>
+          <span
+            v-else
+            class="text-deemphasized"
+          >
+            {{ row.label }}
+          </span>
+        </span>
+        <span class="right">
+          <span
+            v-if="!row.counts?.length"
+            class="text-deemphasized"
+          >
+            0
+          </span>
+          <span
+            v-else
+            class="counts"
+          >
+            <span
+              v-for="(c, i) in row.counts"
+              :key="c.label"
+              class="count"
+            >
+              <span class="count-value">{{ c.count }}</span>&nbsp;<span class="count-label">{{ c.label }}</span><span
+                v-if="i < row.counts.length - 1"
+                aria-hidden="true"
+              >&nbsp;+&nbsp;</span>
+            </span>
+          </span>
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.workload-card {
+  padding: 16px;
+  border-radius: var(--border-radius-md);
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: 4px;
+
+    &--grid {
+      display: grid;
+      grid-template-columns: v-bind(gridColumns);
+      gap: 4px 48px;
+    }
+  }
+
+  .resource-row {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding-left: 20px;
+    line-height: 24px;
+    height: 24px;
+
+    .left {
+      flex-grow: 1;
+    }
+
+    .right {
+      flex-grow: 1;
+      text-align: right;
+      overflow: hidden;
+    }
+
+    .counts {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      max-width: 100%;
+      overflow: hidden;
+
+      .count {
+        display: flex;
+        justify-content: flex-end;
+        min-width: 0;
+      }
+
+      .count:first-child {
+        max-width: calc(100% - 90px);
+
+        .count-label {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
+    .state-dot {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}
+</style>

package/pages/c/_cluster/explorer/workload-dashboard/WorkloadNamespaceCard.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import StateDot from '@shell/components/StateDot/index.vue';
+import SubtleLink from '@shell/components/SubtleLink.vue';
+import type { WorkloadDashboardByNamespaceCardRow, WorkloadDashboardNamespaceNavigateFn, WorkloadDashboardFilterByNamespaceFn } from './types';
+
+const props = defineProps<{
+  title: string;
+  rows: WorkloadDashboardByNamespaceCardRow[];
+  navigateToNamespace: WorkloadDashboardNamespaceNavigateFn;
+  filterByNamespace: WorkloadDashboardFilterByNamespaceFn;
+}>();
+
+function handleCardClick(e: MouseEvent): void {
+  const target = e.target as HTMLElement;
+
+  if (target.closest('a')) {
+    return;
+  }
+
+  props.filterByNamespace(props.title);
+}
+
+function handleTypeClick(type: string): void {
+  props.navigateToNamespace(type, props.title);
+}
+
+function handleCountClick(type: string, stateNames: string[]): void {
+  props.navigateToNamespace(type, props.title, stateNames);
+}
+</script>
+
+<template>
+  <Card
+    class="workload-namespace-card"
+    data-testid="workload-dashboard-namespace-card"
+    tabindex="0"
+    role="group"
+    :aria-label="title"
+    @click="handleCardClick"
+    @keyup.enter="filterByNamespace(title)"
+  >
+    <template
+      #title
+    >
+      <div class="align-center">
+        {{ title }}
+      </div>
+    </template>
+    <ul
+      v-if="rows.length > 0"
+      class="rows"
+    >
+      <li
+        v-for="row in rows"
+        :key="row.type"
+        class="resource-row"
+      >
+        <span class="label">
+          <SubtleLink
+            href="#"
+            @click.prevent="handleTypeClick(row.type)"
+          >
+            {{ row.label }}
+          </SubtleLink>
+        </span>
+        <span class="counts">
+          <span
+            v-for="c in row.counts"
+            :key="c.color"
+            class="count-entry"
+          >
+            <SubtleLink
+              href="#"
+              @click.prevent="handleCountClick(row.type, c.stateNames)"
+            >
+              <div class="count-entry-count">{{ c.count }}</div>
+            </SubtleLink>
+            <StateDot :color="c.color" />
+          </span>
+        </span>
+      </li>
+    </ul>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.workload-namespace-card {
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--primary);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: -2px;
+  }
+
+  .align-center {
+    align-items: center;
+    display: flex;
+    height: 100%;
+  }
+
+  .rows {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: 4px;
+  }
+
+  .resource-row {
+    display: flex;
+    align-items: center;
+    line-height: 24px;
+
+    .label {
+      flex-grow: 1;
+    }
+
+    .counts {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .count-entry {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      .count-entry-count {
+        text-align: right;
+        min-width: 20px;
+      }
+    }
+  }
+}
+</style>

package/pages/c/_cluster/explorer/workload-dashboard/WorkloadTypeCard.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import RcCounterBadge from '@components/Pill/RcCounterBadge';
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import StatusBar from '@shell/components/Resource/Detail/StatusBar.vue';
+import SubtleLink from '@shell/components/SubtleLink.vue';
+import { stateColorCssVar, type StateColor } from '@shell/utils/style';
+import VerticalGap from '@shell/components/Resource/Detail/Card/VerticalGap.vue';
+import type { WorkloadDashboardResourceRouteFn } from './types';
+
+interface Resource {
+  stateDisplay: string;
+  stateId: string;
+  stateSimpleColor: StateColor;
+  count: number;
+}
+
+const props = defineProps<{
+  title: string;
+  type: string;
+  resourceRoute: WorkloadDashboardResourceRouteFn;
+  resources: Resource[];
+}>();
+
+const router = useRouter();
+
+const total = computed(() => props.resources.reduce((sum, r) => sum + r.count, 0));
+
+const segments = computed(() => {
+  const byColor: Record<string, number> = {};
+
+  for (const r of props.resources) {
+    byColor[r.stateSimpleColor] = (byColor[r.stateSimpleColor] || 0) + r.count;
+  }
+
+  return Object.entries(byColor).map(([color, count]) => ({
+    color:   color as StateColor,
+    percent: (count / total.value) * 100,
+  }));
+});
+
+function handleClick(e: MouseEvent | KeyboardEvent): void {
+  const target = e.target as HTMLElement;
+
+  if (target.closest('a, button')) {
+    return;
+  }
+
+  if (window.getSelection()?.toString()) {
+    return;
+  }
+
+  router.push(props.resourceRoute(props.type));
+}
+</script>
+
+<template>
+  <Card
+    class="workload-type-card"
+    data-testid="resource-detail-status-card"
+    role="group"
+    tabindex="0"
+    :aria-label="`${ title }: ${ total } total`"
+    @click="handleClick"
+    @keyup.enter="handleClick"
+  >
+    <StatusBar
+      v-if="resources.length > 0"
+      :segments="segments"
+      class="align-center"
+      aria-hidden="true"
+    />
+    <VerticalGap />
+    <template
+      #title
+    >
+      <div class="align-center full-height">
+        {{ title }}
+      </div>
+    </template>
+    <ul
+      v-if="resources.length > 0"
+      class="rows"
+    >
+      <li
+        v-for="r in resources"
+        :key="r.stateId"
+        class="status-row"
+      >
+        <span
+          class="indicator"
+          :style="{ backgroundColor: stateColorCssVar(r.stateSimpleColor) }"
+          aria-hidden="true"
+        />
+        <span class="label">
+          <SubtleLink :to="resourceRoute(type, [r.stateId])">
+            {{ r.stateDisplay }}
+          </SubtleLink>
+        </span>
+        <RcCounterBadge
+          :count="r.count"
+          type="inactive"
+          :aria-label="`${ r.count } ${ r.stateDisplay }`"
+        />
+      </li>
+    </ul>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.workload-type-card {
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--primary);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: -2px;
+  }
+
+  .align-center {
+    align-items: center;
+    display: flex;
+  }
+
+  .full-height {
+    height: 100%;
+  }
+
+  .rows {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: 4px;
+  }
+
+  .status-row {
+    display: flex;
+    align-items: center;
+    line-height: 24px;
+
+    .indicator {
+      height: 4px;
+      border-radius: 4px;
+      width: 20px;
+      margin-right: 10px;
+    }
+
+    .label {
+      flex-grow: 1;
+    }
+  }
+}
+</style>