From d49b9344432546a2da644ed7e19e5131cc9cbd8c Mon Sep 17 00:00:00 2001
From: David Johnson <djohnson@krum.io>
Date: Mon, 28 Apr 2025 17:28:21 -0400
Subject: [PATCH 1/5] feat: add dashboard page and fixed some cards issues. :

---
 .../pkg/epinio/components/dashboard/Cards.vue | 14 +--
 dashboard/pkg/epinio/index.ts                 | 35 +++----
 .../pkg/epinio/pages/c/_cluster/dashboard.vue | 97 +++++++++----------
 dashboard/yarn.lock                           | 18 ++--
 4 files changed, 75 insertions(+), 89 deletions(-)

diff --git a/dashboard/pkg/epinio/components/dashboard/Cards.vue b/dashboard/pkg/epinio/components/dashboard/Cards.vue
index 557795f9..c664bbab 100644
--- a/dashboard/pkg/epinio/components/dashboard/Cards.vue
+++ b/dashboard/pkg/epinio/components/dashboard/Cards.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-
+import { computed, defineProps, useSlots } from 'vue';
+const slots = useSlots();
 const props = defineProps<{
   isLoaded: boolean,
-  title: string,
+  title: string | undefined,
   icon: string,
   cta: object,
   link: object,
@@ -52,16 +52,18 @@ const setLoading = computed(() => {
       {{ props.linkText }}
     </router-link>
 
-    <hr v-if="$slots.default">
+    {{slots}}
+    <hr v-if="slots.default">
 
+    {{slots.default}}
     <div
-      v-if="$slots.default"
+      v-if="slots.default"
       class="d-slot"
     >
       <h2 v-if="props.slotTitle">
         {{ props.slotTitle }}
       </h2>
-      <slot />
+      <slot></slot>
     </div>
   </div>
 </template>
diff --git a/dashboard/pkg/epinio/index.ts b/dashboard/pkg/epinio/index.ts
index 2e050043..e01b5922 100644
--- a/dashboard/pkg/epinio/index.ts
+++ b/dashboard/pkg/epinio/index.ts
@@ -1,34 +1,14 @@
-// import { importTypes } from '@rancher/auto-import';
-// import { IPlugin } from '@shell/core/types';
-// import extensionRouting from './routing/extension-routing';
-
-// // Init the package
-// export default function (plugin: IPlugin) {
-//   // Auto-import model, detail, edit from the folders
-//   importTypes(plugin);
-
-//   // Provide extension metadata from package.json
-//   // it will grab information such as `name` and `description`
-//   plugin.metadata = require('./package.json');
-
-//   // Load a product
-//   plugin.addProduct(require('./product'));
-
-//   // Add Vue Routes
-//   plugin.addRoutes(extensionRouting);
-// }
-
 import { importTypes } from '@rancher/auto-import';
 import {
   ActionLocation, ActionOpts, IPlugin, OnNavAwayFromPackage, OnNavToPackage
 } from '@shell/core/types';
 import { EPINIO_TYPES } from './types';
 import epinioRoutes from './routing/epinio-routing';
-// import extensionRouting from './routing/extension-routing';
 
 import epinioMgmtStore from './store/epinio-mgmt-store';
 import epinioStore from './store/epinio-store';
 import { createEpinioRoute } from './utils/custom-routing';
+import { createI18n } from 'vue-i18n';
 
 const epinioObjAnnotations = [
   'epinio.io/app-container',
@@ -67,12 +47,19 @@ export default function(plugin: IPlugin) {
   // plugin.addProduct(require('./product'));
 
   // Add Vuex stores
-  plugin.addDashboardStore(epinioMgmtStore.config.namespace, epinioMgmtStore.specifics, epinioMgmtStore.config);
-  plugin.addDashboardStore(epinioStore.config.namespace, epinioStore.specifics, epinioStore.config);
+  plugin.addDashboardStore(
+    epinioMgmtStore.config.namespace, 
+    epinioMgmtStore.specifics, 
+    epinioMgmtStore.config,
+  );
+  plugin.addDashboardStore(
+    epinioStore.config.namespace, 
+    epinioStore.specifics, 
+    epinioStore.config,
+  );
 
   // Add Vue Routes
   plugin.addRoutes(epinioRoutes);
-  // plugin.addRoutes(extensionRouting);
 
   // Add hooks to Vue navigation world
   plugin.addNavHooks(onEnter, onLeave);
diff --git a/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue b/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
index d7e6d38f..ac9f70bd 100644
--- a/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
+++ b/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
-import { Vue, onMounted, computed, watch } from 'vue';
+import { ref, onMounted, computed, watch } from 'vue';
 import { mapGetters, mapState } from 'vuex';
 import DashboardCard from '../../../components/dashboard/Cards.vue';
 import { createEpinioRoute } from '../../../utils/custom-routing';
@@ -30,9 +29,17 @@ type ComponentService = {
   isEnabled: boolean
 }
 
+const version = ref<string>('');
+const showMetricsInfo = ref<boolean>(false);
+
 const store = useStore();
 const router = useRouter();
-let version: string;
+const t = store.getters['i18n/t'];
+
+//Need to convert to computed
+const aboutLink = !store.getters['isSingleProduct'] ? createEpinioRoute('c-cluster-about', { cluster: store.getters['clusterId'] }) : null;
+const availableCpu = ref<number>(100);
+const availableMemory = ref<number>(100);
 
 const sectionContent = [
   {
@@ -92,15 +99,8 @@ const colorStops = {
   70: '--info',
 };
 
-//Need to convert to computed
-const aboutLink = !store.getters['isSingleProduct'] ? createEpinioRoute('c-cluster-about', { cluster: store.getters['clusterId'] }) : null;
-const availableCpu = 100;
-const availableMemory = 100;
-const showMetricsInfo = false;
-
 onMounted(async () => {
   await getVersionHash();
-  generateCards();
 });
 
 //Computed Variables
@@ -161,27 +161,25 @@ const metricsDetails = computed(() => {
 });
 
 //Watchers
-watch(namespaces, (oldValue, newValue) => {
-  if (isEqual(oldValue, newValue)){
-    return;
-  }
+/*watch(namespaces, (oldValue, newValue) => {
+  console.log("GRRRRR");
 
   generateCards();
-});
+}, { immediate: true });
 watch(apps, (oldValue, newValue) => {
   if (isEqual(oldValue, newValue)){
     return;
   }
 
   generateCards();
-});
+}, { immediate: true });
 watch(services, (oldValue, newValue) => {
   if (isEqual(oldValue, newValue)){
     return;
   }
 
   generateCards();
-});
+}, { immediate: true });*/
 
 async function getVersionHash() {
   const hash: { [key:string]: any } = await allHash({
@@ -192,7 +190,7 @@ async function getVersionHash() {
     showMetrics: calcAvailableResources()
   });
 
-  version = hash.version;
+  version.value = hash.version;
 }
 
 async function calcAvailableResources() {
@@ -201,11 +199,11 @@ async function calcAvailableResources() {
   }
 
   const nodeMetricsSchema = store.getters[`epinio/schemaFor`](METRIC.NODE);
-
+  
   if (nodeMetricsSchema) {
     const id = store.getters['clusterId'];
 
-    const nodeMetrics = await $store.dispatch(
+    const nodeMetrics = await store.dispatch(
       `cluster/request`, 
       { url: `/k8s/clusters/${ id }/v1/metrics.k8s.io.nodemetrics` }, 
       { root: true },
@@ -218,20 +216,23 @@ async function calcAvailableResources() {
       useful: parseSi(nodeMetrics.data[0].usage.cpu, null)
     };
 
-    const memory = createMemoryValues(currentCluster.mgmtCluster?.status?.capacity?.memory, nodeMetrics.data[0].usage.memory);
+    const memory = createMemoryValues(
+      currentCluster.mgmtCluster?.status?.capacity?.memory, 
+      nodeMetrics.data[0].usage.memory,
+    );
 
-    availableCpu = Math.floor(100 - cpu.useful / cpu.total * 100);
-    availableMemory = Math.floor(100 - memory.useful / memory.total * 100);
+    availableCpu.value = Math.floor(100 - cpu.useful / cpu.total * 100);
+    availableMemory.value = Math.floor(100 - memory.useful / memory.total * 100);
 
-    showMetricsInfo = true;
+    showMetricsInfo.value = true;
   }
 }
 
-function generateCards() {
+const sectionContentUpdated = computed(() => {
   // Handles titles
-  /*sectionContent[0].title = this.t('typeLabel.withCount.namespaces', { n: this.namespaces.totalNamespaces });
-  this.sectionContent[1].title = this.t('typeLabel.withCount.applications', { n: this.apps?.totalApps });
-  this.sectionContent[2].title = this.t('typeLabel.withCount.services', { n: this.services?.servicesInstances });*/
+  sectionContent[0].title = t('typeLabel.withCount.namespaces', { n: namespaces.totalNamespaces });
+  sectionContent[1].title = t('typeLabel.withCount.applications', { n: apps?.totalApps });
+  sectionContent[2].title = t('typeLabel.withCount.services', { n: services?.servicesInstances });
 
   // Handles descriptions
   if (namespaces?.totalNamespaces >= 0) {
@@ -246,7 +247,9 @@ function generateCards() {
     sectionContent[2].isLoaded = true;
     sectionContent[2].isEnable = true;
   }
-}
+console.log(sectionContent);
+  return sectionContent;
+});
 </script>
 
 <template>
@@ -276,12 +279,12 @@ function generateCards() {
           target="_blank"
           rel="noopener noreferrer nofollow"
         >{{ t('epinio.intro.issues') }}</a>
-        <n-link
+        <RouterLink
           v-if="aboutLink"
           :to="aboutLink"
         >
           {{ t('epinio.intro.about') }}
-        </n-link>
+        </RouterLink>
       </div>
     </div>
 
@@ -293,16 +296,16 @@ function generateCards() {
       <span>
         {{ t('epinio.intro.metrics.availability', { availableCpu, availableMemory }) }}
       </span>
-      <n-link
+      <RouterLink
         :to="metricsDetails"
       >
         {{ t('epinio.intro.metrics.link.label') }}
-      </n-link>
+      </RouterLink>
     </Banner>
 
     <div class="get-started">
       <div
-        v-for="(card, index) in sectionContent"
+        v-for="(card, index) in sectionContentUpdated"
         :key="index"
       >
         <DashboardCard
@@ -317,20 +320,17 @@ function generateCards() {
           :slot-title="card.slotTitle"
         >
           <span v-if="index === 0 && namespaces.latestNamespaces.length > 0">
-            <slot>
-              <ul>
-                <li
-                  v-for="(ns, i) in namespaces.latestNamespaces"
-                  :key="i"
-                >
-                  {{ ns.id }}
-                </li>
-              </ul>
-            </slot>
+            <ul>
+              <li
+                v-for="(ns, i) in namespaces.latestNamespaces"
+                :key="i"
+              >
+                {{ ns.id }}
+              </li>
+            </ul>
           </span>
 
           <span v-if="index === 1 && apps.totalApps > 0">
-            <slot>
               <ConsumptionGauge
                 :resource-name="t('epinio.intro.cards.applications.running')"
                 :capacity="apps.totalApps"
@@ -339,24 +339,22 @@ function generateCards() {
                 :used="apps.runningApps"
                 units="Apps"
               />
-            </slot>
           </span>
 
           <span v-if="index === 2">
-            <slot>
               <ul>
                 <li
                   v-for="(service, i) in services.servicesCatalog"
                   :key="i"
                 >
-                  <n-link
+                  <RouterLink
                     v-if="service.isEnabled"
                     :to="service.link"
                     class="link"
                   >
                     {{ service.name }}
                     <span>+</span>
-                  </n-link>
+                  </RouterLink>
 
                   <span
                     v-if="!service.isEnabled"
@@ -367,7 +365,6 @@ function generateCards() {
                   </span>
                 </li>
               </ul>
-            </slot>
           </span>
         </DashboardCard>
       </div>
diff --git a/dashboard/yarn.lock b/dashboard/yarn.lock
index c36d59a2..06738812 100644
--- a/dashboard/yarn.lock
+++ b/dashboard/yarn.lock
@@ -7108,9 +7108,9 @@ ee-first@1.1.1:
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
 electron-to-chromium@^1.5.73:
-  version "1.5.142"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.142.tgz#1de55d0d19b24b07768c4bfc90f41bd7f248d043"
-  integrity sha512-Ah2HgkTu/9RhTDNThBtzu2Wirdy4DC9b0sMT1pUhbkZQ5U/iwmE+PHZX1MpjD5IkJCc2wSghgGG/B04szAx07w==
+  version "1.5.143"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.143.tgz#b057bcb9dddd3a9b24ba6c9b9e39a82bee84bdaf"
+  integrity sha512-QqklJMOFBMqe46k8iIOwA9l2hz57V2OKMmP5eSWcUvwx+mASAsbU+wkF1pHjn9ZVSBPrsYWr4/W/95y5SwYg2g==
 
 element-matches@^0.1.2:
   version "0.1.2"
@@ -11361,9 +11361,9 @@ portal-vue@~3.0.0:
   integrity sha512-9eprMxNURLx6ijbcgkWjYNcTWJYu/H8QF8nyAeBzOmk9lKCea01BW1hYBeLkgz+AestmPOvznAEOFmNuO4Adjw==
 
 portfinder@^1.0.26:
-  version "1.0.36"
-  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.36.tgz#4eef523c15e972417a9ee496c3e9c95b8f649d52"
-  integrity sha512-gMKUzCoP+feA7t45moaSx7UniU7PgGN3hA8acAB+3Qn7/js0/lJ07fYZlxt9riE9S3myyxDCyAFzSrLlta0c9g==
+  version "1.0.37"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.37.tgz#92b754ef89a11801c8efe4b0e5cd845b0064c212"
+  integrity sha512-yuGIEjDAYnnOex9ddMnKZEMFE0CcGo6zbfzDklkmT1m5z734ss6JMzN9rNB3+RR7iS+F10D4/BVIaXOyh8PQKw==
   dependencies:
     async "^3.2.6"
     debug "^4.3.6"
@@ -13410,9 +13410,9 @@ type-fest@^0.8.0, type-fest@^0.8.1:
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
 type-fest@^4.4.0:
-  version "4.40.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-4.40.0.tgz#62bc09caccb99a75e1ad6b9b4653e8805e5e1eee"
-  integrity sha512-ABHZ2/tS2JkvH1PEjxFDTUWC8dB5OsIGZP4IFLhR293GqT5Y5qB1WwL2kMPYhQW9DVgVD8Hd7I8gjwPIf5GFkw==
+  version "4.40.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-4.40.1.tgz#d78a09f08dd1081a434dd377967650cfd565401d"
+  integrity sha512-9YvLNnORDpI+vghLU/Nf+zSv0kL47KbVJ1o3sKgoTefl6i+zebxbiDQWoe/oWWqPhIgQdRZRT1KA9sCPL810SA==
 
 type-is@~1.6.17, type-is@~1.6.18:
   version "1.6.18"

From 39f7ea577ffa3dcdfaa25d5b0ebe8ae0297efb88 Mon Sep 17 00:00:00 2001
From: David Johnson <djohnson@krum.io>
Date: Mon, 28 Apr 2025 23:32:59 -0400
Subject: [PATCH 2/5] feat: Cleanup dashboard page:

---
 .../pkg/epinio/components/dashboard/Cards.vue |   2 -
 .../pkg/epinio/pages/c/_cluster/dashboard.vue | 185 +++++++++++-------
 2 files changed, 114 insertions(+), 73 deletions(-)

diff --git a/dashboard/pkg/epinio/components/dashboard/Cards.vue b/dashboard/pkg/epinio/components/dashboard/Cards.vue
index c664bbab..7a76b7a9 100644
--- a/dashboard/pkg/epinio/components/dashboard/Cards.vue
+++ b/dashboard/pkg/epinio/components/dashboard/Cards.vue
@@ -52,10 +52,8 @@ const setLoading = computed(() => {
       {{ props.linkText }}
     </router-link>
 
-    {{slots}}
     <hr v-if="slots.default">
 
-    {{slots.default}}
     <div
       v-if="slots.default"
       class="d-slot"
diff --git a/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue b/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
index ac9f70bd..5afc1196 100644
--- a/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
+++ b/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
@@ -1,27 +1,26 @@
 <script setup lang="ts">
+import { Location, useRouter } from 'vue-router';
+import { mapGetters, mapState, useStore } from 'vuex';
 import { ref, onMounted, computed, watch } from 'vue';
-import { mapGetters, mapState } from 'vuex';
-import DashboardCard from '../../../components/dashboard/Cards.vue';
-import { createEpinioRoute } from '../../../utils/custom-routing';
 import { 
   EpinioApplicationResource, 
   EpinioCatalogService, 
   EPINIO_MGMT_STORE, 
   EPINIO_TYPES,
 } from '../../../types';
-import ConsumptionGauge from '@shell/components/ConsumptionGauge.vue';
-import Namespace from '@shell/models/namespace';
-import { parseSi, createMemoryValues } from '@shell/utils/units';
-import EpinioServiceModel from '../../../models/services';
-import isEqual from 'lodash/isEqual';
+
 import { sortBy } from 'lodash';
-import { Location } from 'vue-router';
-import Banner from '@components/Banner/Banner.vue';
+import isEqual from 'lodash/isEqual';
+
 import { METRIC } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
-
-import { useStore } from 'vuex';
-import { useRouter } from 'vue-router';
+import Namespace from '@shell/models/namespace';
+import Banner from '@components/Banner/Banner.vue';
+import EpinioServiceModel from '../../../models/services';
+import { parseSi, createMemoryValues } from '@shell/utils/units';
+import { createEpinioRoute } from '../../../utils/custom-routing';
+import DashboardCard from '../../../components/dashboard/Cards.vue';
+import ConsumptionGauge from '@shell/components/ConsumptionGauge.vue';
 
 type ComponentService = {
   name: string,
@@ -29,19 +28,21 @@ type ComponentService = {
   isEnabled: boolean
 }
 
-const version = ref<string>('');
-const showMetricsInfo = ref<boolean>(false);
-
 const store = useStore();
 const router = useRouter();
 const t = store.getters['i18n/t'];
+const colorStops = {
+  0: '--info', 
+  30: '--info', 
+  70: '--info',
+};
 
-//Need to convert to computed
-const aboutLink = !store.getters['isSingleProduct'] ? createEpinioRoute('c-cluster-about', { cluster: store.getters['clusterId'] }) : null;
+//Variables that can recieve updates
+const version = ref<string>('');
+const showMetricsInfo = ref<boolean>(false);
 const availableCpu = ref<number>(100);
 const availableMemory = ref<number>(100);
-
-const sectionContent = [
+const sectionContent = ref<array>([
   {
     isEnable: true,
     isLoaded: false,
@@ -88,35 +89,49 @@ const sectionContent = [
       { resource: EPINIO_TYPES.SERVICE_INSTANCE },
     ),
     linkText: t('epinio.intro.cards.services.linkText'),
-    description: t('epinio.intro.cards.services.description'), // INFO: typeDescription to long for the dashboard card.
+    // INFO: typeDescription to long for the dashboard card.
+    description: t('epinio.intro.cards.services.description'),
     slotTitle: t('epinio.intro.cards.services.slotTitle')
   },
-];
+]);
 
-const colorStops = {
-  0: '--info', 
-  30: '--info', 
-  70: '--info',
-};
+/*
+* Computed Variables
+*/
 
-onMounted(async () => {
-  await getVersionHash();
+const aboutLink = computed(() => {
+  if (!store.getters['isSingleProduct']) {
+    return createEpinioRoute(
+      'c-cluster-about', 
+      { cluster: store.getters['clusterId'] },
+    );
+  }
+
+  return null;
 });
 
-//Computed Variables
 const services = computed(() => {
-  const fetchServicesInstances: EpinioServiceModel[] = store.getters['epinio/all'](EPINIO_TYPES.SERVICE_INSTANCE);
-  const fetchServices: EpinioCatalogService[] = store.getters['epinio/all'](EPINIO_TYPES.CATALOG_SERVICE);
+  const fetchServicesInstances: EpinioServiceModel[] = 
+    store.getters['epinio/all'](EPINIO_TYPES.SERVICE_INSTANCE);
+  const fetchServices: EpinioCatalogService[] = 
+    store.getters['epinio/all'](EPINIO_TYPES.CATALOG_SERVICE);
 
   // Try to find the desired services
-  const findDesiredServices = fetchServices?.filter((service) => service.id === 'mysql-dev' || service.id === 'redis-dev');
+  const findDesiredServices = fetchServices?.filter(
+    (service) => service.id === 'mysql-dev' || service.id === 'redis-dev'
+  );
 
   //  if not found, return the first two services from the catalog
-  const services: EpinioCatalogService[] = findDesiredServices.length ? findDesiredServices : fetchServices.slice(0, 2);
-
-  const s = services.reduce((acc: ComponentService[], service: EpinioCatalogService) => {
-    acc.push({
-      link:      createEpinioRoute('c-cluster-resource-create', { resource: EPINIO_TYPES.SERVICE_INSTANCE, name: service.id }, { query: { service: service.id } }),
+  const services: EpinioCatalogService[] = 
+    findDesiredServices.length ? findDesiredServices : fetchServices.slice(0, 2);
+
+  const s = services.reduce(
+    (acc: ComponentService[], service: EpinioCatalogService) => {
+      acc.push({
+      link: createEpinioRoute(
+        'c-cluster-resource-create', 
+        { resource: EPINIO_TYPES.SERVICE_INSTANCE, name: service.id }, 
+        { query: { service: service.id } }),
       name:      service.name,
           isEnabled: true
         });
@@ -128,7 +143,7 @@ const services = computed(() => {
     servicesInstances: fetchServicesInstances.length,
     servicesCatalog:   s,
   };
-})
+});
 
 const apps = computed(() => {
   const allApps = store.getters['epinio/all'](EPINIO_TYPES.APP) as EpinioApplicationResource[];
@@ -146,26 +161,25 @@ const apps = computed(() => {
 
 const namespaces = computed(() => {
   const allNamespaces: Namespace[] = store.getters['epinio/all'](EPINIO_TYPES.NAMESPACE);
-
+  
   return { 
     totalNamespaces: allNamespaces.length, 
     latestNamespaces: sortBy(allNamespaces, 'metadata.createdAt').reverse().slice(0, 2),
   };
 });
 
-const metricsDetails = computed(() => {
-  return {
-    name:   'c-cluster-explorer',
-    params: { cluster: store.getters['clusterId'] }
-  };
-});
+/*
+* Watchers
+*/
 
-//Watchers
-/*watch(namespaces, (oldValue, newValue) => {
-  console.log("GRRRRR");
+watch(services, (oldValue, newValue) => {
+  if (isEqual(oldValue, newValue)){
+    return;
+  }
 
   generateCards();
 }, { immediate: true });
+
 watch(apps, (oldValue, newValue) => {
   if (isEqual(oldValue, newValue)){
     return;
@@ -173,20 +187,42 @@ watch(apps, (oldValue, newValue) => {
 
   generateCards();
 }, { immediate: true });
-watch(services, (oldValue, newValue) => {
-  if (isEqual(oldValue, newValue)){
+
+watch(namespaces, (oldValue, newValue) => {
+  if (isEqual(oldValue, newValue)) {
     return;
   }
 
   generateCards();
-}, { immediate: true });*/
+}, { immediate: true });
+
+const metricsDetails = computed(() => {
+  return {
+    name:   'c-cluster-explorer',
+    params: { cluster: store.getters['clusterId'] }
+  };
+});
+
+onMounted(async () => {
+  generateCards();
+  await getVersionHash();
+});
 
 async function getVersionHash() {
   const hash: { [key:string]: any } = await allHash({
-    ns:          store.dispatch(`epinio/findAll`, { type: EPINIO_TYPES.NAMESPACE }),
-    svc:         store.dispatch(`epinio/findAll`, { type: EPINIO_TYPES.SERVICE_INSTANCE }),
-    catalogSvc:  store.dispatch(`epinio/findAll`, { type: EPINIO_TYPES.CATALOG_SERVICE }),
-    version:     store.dispatch('epinio/version'),
+    ns: store.dispatch(
+      `epinio/findAll`, 
+      { type: EPINIO_TYPES.NAMESPACE }
+    ),
+    svc: store.dispatch(
+      `epinio/findAll`, 
+      { type: EPINIO_TYPES.SERVICE_INSTANCE }
+    ),
+    catalogSvc: store.dispatch(
+      `epinio/findAll`, 
+      { type: EPINIO_TYPES.CATALOG_SERVICE }
+    ),
+    version: store.dispatch('epinio/version'),
     showMetrics: calcAvailableResources()
   });
 
@@ -228,28 +264,35 @@ async function calcAvailableResources() {
   }
 }
 
-const sectionContentUpdated = computed(() => {
+function generateCards() {
   // Handles titles
-  sectionContent[0].title = t('typeLabel.withCount.namespaces', { n: namespaces.totalNamespaces });
-  sectionContent[1].title = t('typeLabel.withCount.applications', { n: apps?.totalApps });
-  sectionContent[2].title = t('typeLabel.withCount.services', { n: services?.servicesInstances });
+  sectionContent.value[0].title = t(
+    'typeLabel.withCount.namespaces', 
+    { n: namespaces.totalNamespaces },
+  );
+  sectionContent.value[1].title = t(
+    'typeLabel.withCount.applications', 
+    { n: apps?.totalApps },
+  );
+  sectionContent.value[2].title = t(
+    'typeLabel.withCount.services', 
+    { n: services?.servicesInstances },
+  );
 
   // Handles descriptions
-  if (namespaces?.totalNamespaces >= 0) {
-    sectionContent[0].isLoaded = true;
+  if (namespaces._value?.totalNamespaces >= 0) {
+    sectionContent.value[0].isLoaded = true;
   }
 
-  if (apps?.totalApps >= 0) {
-    sectionContent[1].isLoaded = true;
+  if (apps._value?.totalApps >= 0) {
+    sectionContent.value[1].isLoaded = true;
   }
 
-  if (services?.servicesCatalog?.length >= 0) {
-    sectionContent[2].isLoaded = true;
-    sectionContent[2].isEnable = true;
+  if (services._value?.servicesCatalog?.length >= 0) {
+    sectionContent.value[2].isLoaded = true;
+    sectionContent.value[2].isEnable = true;
   }
-console.log(sectionContent);
-  return sectionContent;
-});
+}
 </script>
 
 <template>
@@ -305,7 +348,7 @@ console.log(sectionContent);
 
     <div class="get-started">
       <div
-        v-for="(card, index) in sectionContentUpdated"
+        v-for="(card, index) in sectionContent"
         :key="index"
       >
         <DashboardCard

From 060415494ca06d8773274928dae3b84812097f81 Mon Sep 17 00:00:00 2001
From: David Johnson <djohnson@krum.io>
Date: Mon, 28 Apr 2025 23:42:52 -0400
Subject: [PATCH 3/5] style: Add slot styling:

---
 .../pkg/epinio/components/dashboard/Cards.vue | 30 -------
 .../pkg/epinio/pages/c/_cluster/dashboard.vue | 90 ++++++++++++-------
 2 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/dashboard/pkg/epinio/components/dashboard/Cards.vue b/dashboard/pkg/epinio/components/dashboard/Cards.vue
index 7a76b7a9..e6712a45 100644
--- a/dashboard/pkg/epinio/components/dashboard/Cards.vue
+++ b/dashboard/pkg/epinio/components/dashboard/Cards.vue
@@ -108,36 +108,6 @@ const setLoading = computed(() => {
       min-height: 18px;
       font-size: 16px;
     }
-
-    ul {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      display: flex;
-      flex-direction: column;
-      gap: $space-s;
-
-      li, .link {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-        font-size: 14px;
-
-        &:not(:last-child) {
-          border-bottom: 1px solid var(--border);
-          padding-bottom: $space-s;
-        }
-      }
-
-      li > .disabled {
-        color: var(--disabled-text);
-      }
-
-      .disabled {
-        cursor: not-allowed;
-      }
-    }
   }
 }
 
diff --git a/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue b/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
index 5afc1196..7080218a 100644
--- a/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
+++ b/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
@@ -374,40 +374,40 @@ function generateCards() {
           </span>
 
           <span v-if="index === 1 && apps.totalApps > 0">
-              <ConsumptionGauge
-                :resource-name="t('epinio.intro.cards.applications.running')"
-                :capacity="apps.totalApps"
-                :used-as-resource-name="true"
-                :color-stops="colorStops"
-                :used="apps.runningApps"
-                units="Apps"
-              />
+            <ConsumptionGauge
+              :resource-name="t('epinio.intro.cards.applications.running')"
+              :capacity="apps.totalApps"
+              :used-as-resource-name="true"
+              :color-stops="colorStops"
+              :used="apps.runningApps"
+              units="Apps"
+            />
           </span>
 
           <span v-if="index === 2">
-              <ul>
-                <li
-                  v-for="(service, i) in services.servicesCatalog"
-                  :key="i"
+            <ul>
+              <li
+                v-for="(service, i) in services.servicesCatalog"
+                :key="i"
+              >
+                <RouterLink
+                  v-if="service.isEnabled"
+                  :to="service.link"
+                  class="link"
+                >
+                  {{ service.name }}
+                  <span>+</span>
+                </RouterLink>
+
+                <span
+                  v-if="!service.isEnabled"
+                  class="link disabled"
                 >
-                  <RouterLink
-                    v-if="service.isEnabled"
-                    :to="service.link"
-                    class="link"
-                  >
-                    {{ service.name }}
-                    <span>+</span>
-                  </RouterLink>
-
-                  <span
-                    v-if="!service.isEnabled"
-                    class="link disabled"
-                  >
-                    {{ service.name }}
-                    <span>+</span>
-                  </span>
-                </li>
-              </ul>
+                  {{ service.name }}
+                  <span>+</span>
+                </span>
+              </li>
+            </ul>
           </span>
         </DashboardCard>
       </div>
@@ -467,6 +467,36 @@ function generateCards() {
     grid-gap: 20px;
   }
 }
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: $space-s;
+
+  li, .link {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    font-size: 14px;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--border);
+      padding-bottom: $space-s;
+    }
+  }
+
+  li > .disabled {
+    color: var(--disabled-text);
+  }
+
+  .disabled {
+    cursor: not-allowed;
+  }
+}
 </style>
 
 <style lang="scss">

From 68f03e96376d153f45fa8baa5d4e8f0b382accc0 Mon Sep 17 00:00:00 2001
From: David Johnson <djohnson@krum.io>
Date: Tue, 29 Apr 2025 09:08:10 -0400
Subject: [PATCH 4/5] chore: clean up some syntax:

---
 .../pkg/epinio/pages/c/_cluster/dashboard.vue | 30 ++++++++-----------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue b/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
index 7080218a..5025942b 100644
--- a/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
+++ b/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
@@ -128,16 +128,19 @@ const services = computed(() => {
   const s = services.reduce(
     (acc: ComponentService[], service: EpinioCatalogService) => {
       acc.push({
-      link: createEpinioRoute(
-        'c-cluster-resource-create', 
-        { resource: EPINIO_TYPES.SERVICE_INSTANCE, name: service.id }, 
-        { query: { service: service.id } }),
-      name:      service.name,
-          isEnabled: true
-        });
-
-        return acc;
-      }, [] as ComponentService[]);
+        link: createEpinioRoute(
+          'c-cluster-resource-create', 
+          { resource: EPINIO_TYPES.SERVICE_INSTANCE, name: service.id }, 
+          { query: { service: service.id } }
+        ),
+        name: service.name,
+        isEnabled: true
+      });
+
+      return acc;
+    }, 
+    [] as ComponentService[]
+  );
 
   return {
     servicesInstances: fetchServicesInstances.length,
@@ -302,15 +305,12 @@ function generateCards() {
         <h1>{{ t('epinio.intro.welcome') }}</h1>
         <span v-if="version">{{ version.displayVersion }}</span>
       </div>
-
       <p class="head-subheader">
         {{ t('epinio.intro.blurb') }}
       </p>
-
       <p>
         {{ t('epinio.intro.description') }}
       </p>
-
       <div class="head-links">
         <a
           href="https://epinio.io/"
@@ -330,7 +330,6 @@ function generateCards() {
         </RouterLink>
       </div>
     </div>
-
     <Banner
       v-if="showMetricsInfo"
       class="metrics"
@@ -345,7 +344,6 @@ function generateCards() {
         {{ t('epinio.intro.metrics.link.label') }}
       </RouterLink>
     </Banner>
-
     <div class="get-started">
       <div
         v-for="(card, index) in sectionContent"
@@ -372,7 +370,6 @@ function generateCards() {
               </li>
             </ul>
           </span>
-
           <span v-if="index === 1 && apps.totalApps > 0">
             <ConsumptionGauge
               :resource-name="t('epinio.intro.cards.applications.running')"
@@ -383,7 +380,6 @@ function generateCards() {
               units="Apps"
             />
           </span>
-
           <span v-if="index === 2">
             <ul>
               <li

From ee8eb29312822f66e4112c6d900ed9fe5b944158 Mon Sep 17 00:00:00 2001
From: David Johnson <djohnson@krum.io>
Date: Tue, 29 Apr 2025 14:25:29 -0400
Subject: [PATCH 5/5] fix: The count for each resource type was not showing,
 fixed by properly referencing those values:

---
 dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue b/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
index 5025942b..994dae9c 100644
--- a/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
+++ b/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
@@ -271,15 +271,15 @@ function generateCards() {
   // Handles titles
   sectionContent.value[0].title = t(
     'typeLabel.withCount.namespaces', 
-    { n: namespaces.totalNamespaces },
+    { n: namespaces._value?.totalNamespaces },
   );
   sectionContent.value[1].title = t(
     'typeLabel.withCount.applications', 
-    { n: apps?.totalApps },
+    { n: apps._value?.totalApps },
   );
   sectionContent.value[2].title = t(
     'typeLabel.withCount.services', 
-    { n: services?.servicesInstances },
+    { n: services._value?.servicesInstances },
   );
 
   // Handles descriptions