Detail page

shell/assets/styles/app.scss

@@ -7,6 +7,7 @@
 @import "./base/color";
 @import "./base/basic";
 @import "./base/typography";
+@import "./base/spacing";
 
 @import "./fonts/fontstack";
 @import "./fonts/dots";
@@ -31,4 +32,4 @@
 @import "./global/layout";
 
 @import "./vendor/vue-select";
-@import "./vendor/code-mirror";
+@import "./vendor/code-mirror";

shell/assets/styles/base/_spacing.scss

@@ -0,0 +1,29 @@
+// Text indent, margins, and paddings from 5-50px in 5px increments
+// e.g. p-10 - {padding: 10px}
+// e.g. mt-20 - {margin-top: 20px}
+$spacing-property-map: (
+    mm: margin,
+    mmt: margin-top,
+    mmr: margin-right,
+    mml: margin-left,
+    mmb: margin-bottom,
+    pp: padding,
+    ppt: padding-top,
+    ppb: padding-bottom,
+    ppl: padding-left,
+    ppr: padding-right,
+);
+
+@each $keyword, $property in $spacing-property-map {
+    .#{$keyword}-0 {
+        #{$property}: 0 !important;
+    }
+
+    @for $size from 1 through 10 {
+        $val: $size * 4;
+
+        .#{$keyword}-#{$size} {
+            #{$property}: $val * 1px !important;
+        }
+    }
+}

shell/assets/styles/themes/_dark.scss

@@ -226,6 +226,8 @@
   --badge-state-disabled-bg    : #{$medium};
   --badge-state-disabled-border: #{$lighter};
 
+  --bubble-bg                  : #{$darkest};
+
   $slate: #4B4F6B;
 
   --slate: #{$slate};

shell/assets/styles/themes/_light.scss

@@ -351,6 +351,8 @@ BODY, .theme-light {
   --border-width               : 1px;
   --border-radius              : 4px;
   --border-radius-lg           : 8px;
+  --border-radius-small        : 4px;
+  --border-radius-medium       : 6px;
   --outline                    : var(--primary);
   --outline-width              : 1px;
 
@@ -552,4 +554,6 @@ BODY, .theme-light {
   --badge-state-disabled-text  : #{$darker};
   --badge-state-disabled-bg    : #{$lighter};
   --badge-state-disabled-border: #{$medium};
+
+  --bubble-bg                  : #{$lighter};
 }

shell/components/Resource/Detail/Card/CpuUsageCard.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import ResourceUsage from '@shell/components/Resource/Detail/Card/ResourceUsage/index.vue';
+</script>
+
+<template>
+  <ResourceUsage
+    :title="`CPU`"
+    :used="1.20"
+    :available="1.93"
+  />
+</template>

shell/components/Resource/Detail/Card/InsightsCard.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import ResourceStateCard from '@shell/components/Resource/Detail/Card/ResourceStateCard.vue';
+
+const rows = [
+  {
+    label:  'Services',
+    to:     '#',
+    color:  'var(--error)',
+    counts: [{ label: 'failed', count: 1 }, { label: 'passed', count: 6 }]
+  },
+  {
+    label:  'Referred to by',
+    to:     '#',
+    color:  'var(--warning)',
+    counts: [{ label: 'warning', count: 1 }, { label: 'normal', count: 24 }]
+  }
+];
+</script>
+
+<template>
+  <ResourceStateCard
+    title="Insights"
+    :rows="rows"
+  />
+</template>

shell/components/Resource/Detail/Card/MemoryUsageCard.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import ResourceUsage from '@shell/components/Resource/Detail/Card/ResourceUsage/index.vue';
+</script>
+
+<template>
+  <ResourceUsage
+    :title="`Memory`"
+    :used="870"
+    :available="3290"
+    :availableFormatter="(n) => (n/1000).toFixed(2)"
+    :unit="`GiB`"
+  />
+</template>

shell/components/Resource/Detail/Card/PodUsageCard.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import ResourceUsage from '@shell/components/Resource/Detail/Card/ResourceUsage/index.vue';
+</script>
+
+<template>
+  <ResourceUsage
+    :title="`Pods`"
+    :used="9"
+    :available="17"
+  />
+</template>

shell/components/Resource/Detail/Card/PodsCard/Bubble.vue

@@ -0,0 +1,13 @@
+<template>
+  <span class="bubble">
+    <slot name="default" />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.bubble {
+    border-radius: 40%;
+    background-color: var(--bubble-bg);
+    padding: 2px 6px;
+}
+</style>

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import Card from '@shell/components/Resource/Detail/Card/index.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';
+
+const error = 'var(--error)';
+const info = 'var(--info)';
+const success = 'var(--success)';
+
+const healthSegments = [
+  {
+    color:   error,
+    percent: 55
+  },
+  {
+    color:   info,
+    percent: 25
+  },
+  {
+    color:   success,
+    percent: 20
+  }
+];
+
+</script>
+
+<template>
+  <Card title="Pods">
+    <StatusBar :segments="healthSegments" />
+    <VerticalGap />
+    <div class="pod-distribution">
+      <StatusRow
+        :color="error"
+        label="Init: 0/1"
+        :count="3"
+        :percent="60"
+      />
+      <StatusRow
+        :color="info"
+        label="ImagepullbackOff"
+        :count="1"
+        :percent="20"
+      />
+      <StatusRow
+        :color="success"
+        label="Running"
+        :count="1"
+        :percent="20"
+      />
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.pod-distribution {
+    display: flex;
+    flex-direction: column;
+}
+</style>

shell/components/Resource/Detail/Card/ResourceStateCard.vue

@@ -0,0 +1,37 @@
+<script setup 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[];
+}
+
+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>

shell/components/Resource/Detail/Card/ResourceUsage/index.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import PercentageBar from '@shell/components/Resource/Detail/PercentageBar.vue';
+import { computed } from 'vue';
+
+export interface Props {
+    title: string;
+    unit?: string;
+    used: number;
+    usedFormatter?: (n: number) => string;
+    available: number;
+    availableFormatter?: (n: number) => string
+}
+
+const {
+  title, unit, used, usedFormatter, available, availableFormatter
+} = withDefaults(
+  defineProps<Props>(),
+  {
+    usedFormatter:      (n: number) => n.toString(),
+    availableFormatter: (n: number) => n.toString(),
+    unit:               undefined
+  }
+);
+
+const percentage = computed(() => {
+  const numerator = used || 0;
+  const denominator = available || 0;
+
+  return denominator === 0 ? 0 : Math.floor((numerator / denominator) * 100);
+});
+</script>
+
+<template>
+  <Card :title="title">
+    <div class="numerical">
+      <div>Used</div>
+      <div>
+        {{ usedFormatter(used) }} of {{ availableFormatter(available) }}
+        <span
+          v-if="unit"
+          class="unit"
+        >
+          {{ 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>

shell/components/Resource/Detail/Card/ResourcesCard.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import ResourceStateCard from '@shell/components/Resource/Detail/Card/ResourceStateCard.vue';
+
+const rows = [
+  {
+    label:  'Services',
+    to:     '#',
+    color:  'var(--success)',
+    counts: [{ label: 'active', count: 3 }]
+  },
+  { label: 'Ingresses' },
+  {
+    label:  'Referred to by',
+    to:     '#',
+    color:  'var(--error)',
+    counts: [{ label: 'updating', count: 1 }, { label: 'active', count: 1 }]
+  },
+  {
+    label:  'Refers to',
+    to:     '#',
+    color:  'var(--success)',
+    counts: [{ label: 'active', count: 5 }]
+  }
+];
+</script>
+
+<template>
+  <ResourceStateCard
+    title="Resources"
+    :rows="rows"
+  />
+</template>

shell/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>