[11513] Added workload-dashboard

shell/assets/translations/en-us.yaml

@@ -7425,6 +7425,20 @@ wm:
   kubectlShell:
     title: "Kubectl: {name}"
 
+workloadDashboard:
+  title: Workloads Overview
+  subtitle:
+    allNamespaces: For all namespaces
+    filtered: "For namespace: {namespace}"
+    filteredMultiple: "For {count} namespaces"
+  sections:
+    byState: By State
+    byType: By Type
+  empty:
+    title: No workloads to show
+    message: "Tips: undo the last namespace filter you applied or <resetLink>reset the namespaces filter</resetLink>."
+    docsMessage: "Want to learn more about Workloads? Read our <docsLink>documentation</docsLink>."
+
 workload:
   scaleWorkloads: Scale workloads
   healthWorkloads: Jobs/Pods health status

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

@@ -8,12 +8,15 @@ 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;
+  rowTo?: RouteLocationRaw | string;
 }
 </script>
 
@@ -24,7 +27,9 @@ const i18n = useI18n(store);
 const props = withDefaults(defineProps<Props>(), {
   resources:          undefined,
   showScaling:        false,
-  noResourcesMessage: undefined
+  showPercent:        true,
+  noResourcesMessage: undefined,
+  rowTo:              undefined
 });
 const emit = defineEmits(['decrease', 'increase']);
 
@@ -85,6 +90,14 @@ const rows = computed(() => {
   }));
 });
 
+function rowRoute(label: string): RouteLocationRaw | undefined {
+  if (!props.rowTo || typeof props.rowTo === 'string') {
+    return undefined;
+  }
+
+  return { ...props.rowTo, query: { q: label } };
+}
+
 </script>
 
 <template>
@@ -120,6 +133,8 @@ const rows = computed(() => {
         :label="row.label"
         :count="row.count"
         :percent="row.percent"
+        :showPercent="props.showPercent"
+        :to="rowRoute(row.label)"
       />
     </div>
     <div

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

@@ -11,17 +11,19 @@ const { title } = defineProps<CardProps>();
 
 <template>
   <div class="detail-card">
-    <div class="heading">
-      <slot name="heading">
-        <div class="title">
-          <slot name="title">
-            {{ title }}
-          </slot>
-        </div>
-      </slot>
-      <slot name="heading-action" />
-    </div>
-    <VerticalGap />
+    <template v-if="title">
+      <div class="heading">
+        <slot name="heading">
+          <div class="title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </div>
+        </slot>
+        <slot name="heading-action" />
+      </div>
+      <VerticalGap />
+    </template>
     <div class="body">
       <slot name="default" />
     </div>

shell/components/Resource/Detail/StatusRow.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
 import { RcCounterBadge } from '@components/Pill';
+import SubtleLink from '@shell/components/SubtleLink.vue';
 import { StateColor, stateColorCssVar } from '@shell/utils/style';
+import type { RouteLocationRaw } from 'vue-router';
 
 export interface Props {
         color: StateColor;
         label: string;
         count: number;
         percent: number;
+        showPercent?: boolean;
+        to?: RouteLocationRaw;
 }
 
 const {
-  color, label, count, percent
+  color, label, count, percent, showPercent = true, to
 } = defineProps<Props>();
 </script>
 
@@ -21,15 +25,26 @@ const {
       :style="{backgroundColor: stateColorCssVar(color)}"
     />
     <div class="label">
-      {{ label }}
+      <SubtleLink
+        v-if="to"
+        :to="to"
+      >
+        {{ label }}
+      </SubtleLink>
+      <template v-else>
+        {{ label }}
+      </template>
     </div>
     <div class="count">
       <RcCounterBadge
         :count="count"
         type="inactive"
       />
     </div>
-    <div class="percent text-muted">
+    <div
+      v-if="showPercent"
+      class="percent text-muted"
+    >
       {{ percent.toFixed(1) }}%
     </div>
   </div>

shell/config/product/explorer.js

@@ -10,6 +10,7 @@ import {
   SNAPSHOT,
   VIRTUAL_TYPES,
   CAPI,
+  WORKLOAD_DASHBOARD,
 } from '@shell/config/types';
 
 import {
@@ -103,6 +104,7 @@ export function init(store) {
     CONFIG_MAP
   ], 'storage');
   basicType([
+    WORKLOAD_DASHBOARD,
     WORKLOAD,
     WORKLOAD_TYPES.DEPLOYMENT,
     WORKLOAD_TYPES.DAEMON_SET,
@@ -112,10 +114,6 @@ export function init(store) {
     POD,
   ], 'workload');
 
-  setGroupDefaultType('workload', () => {
-    return store.getters['features/get'](STEVE_CACHE) ? WORKLOAD_TYPES.DEPLOYMENT : undefined;
-  });
-
   weightGroup('cluster', 99, true);
   weightGroup('workload', 98, true);
   weightGroup('serviceDiscovery', 96, true);
@@ -586,6 +584,20 @@ export function init(store) {
     overview:   true,
   });
 
+  // Workload Dashboard - overview page using the Resource Summary API
+  virtualType({
+    label:          store.getters['i18n/t'](`typeLabel.${ WORKLOAD }`, { count: 2 }),
+    group:          'Root',
+    namespaced:     true,
+    name:           WORKLOAD_DASHBOARD,
+    weight:         100,
+    icon:           'folder',
+    ifHaveSubTypes: Object.values(WORKLOAD_TYPES),
+    route:          { name: 'c-cluster-explorer-workload-dashboard' },
+    exact:          true,
+    overview:       true,
+  });
+
   virtualType({
     labelKey:     'members.clusterAndProject',
     group:        'cluster',

shell/config/router/routes.js

@@ -349,6 +349,10 @@ export default [
         path:      '/c/:cluster/explorer/explorer-utils',
         component: () => interopDefault(import('@shell/pages/c/_cluster/explorer/explorer-utils.js')),
         name:      'c-cluster-explorer-explorer-utils'
+      }, {
+        path:      '/c/:cluster/explorer/workload-dashboard',
+        component: () => interopDefault(import('@shell/pages/c/_cluster/explorer/workload-dashboard.vue')),
+        name:      'c-cluster-explorer-workload-dashboard'
       }, {
         path:      '/c/:cluster/explorer/tools',
         component: () => interopDefault(import('@shell/pages/c/_cluster/explorer/tools/index.vue')),

shell/config/types.js

@@ -81,6 +81,7 @@ export const RBAC = {
 };
 
 export const WORKLOAD = 'workload';
+export const WORKLOAD_DASHBOARD = 'workload-dashboard';
 
 /**
  * Rancher Workload types