From 5162c41292b03748e2da85c3c6c5fc9fb44ed64b Mon Sep 17 00:00:00 2001
From: Jordon Leach <jordonleach@gmail.com>
Date: Thu, 7 Nov 2024 10:08:44 -0500
Subject: [PATCH 1/6] Fix UX issues of policy reports in dashboard page

---
 pkg/kubewarden/components/Dashboard/Card.vue  |  55 ++-
 .../components/Dashboard/DashboardView.vue    | 464 +++++++-----------
 .../components/Dashboard/Masthead.vue         | 297 +++++++++++
 pkg/kubewarden/components/Dashboard/Modes.vue |  25 +
 .../components/Dashboard/Reports.vue          |  51 ++
 .../components/Dashboard/ReportsGauge.vue     |  81 +++
 pkg/kubewarden/config/table-headers.ts        |  24 +-
 pkg/kubewarden/l10n/en-us.yaml                |  23 +-
 .../Dashboard/DashboardView.spec.ts           | 209 +-------
 .../components/Dashboard/Masthead.spec.ts     | 229 +++++++++
 10 files changed, 923 insertions(+), 535 deletions(-)
 create mode 100644 pkg/kubewarden/components/Dashboard/Masthead.vue
 create mode 100644 pkg/kubewarden/components/Dashboard/Modes.vue
 create mode 100644 pkg/kubewarden/components/Dashboard/Reports.vue
 create mode 100644 pkg/kubewarden/components/Dashboard/ReportsGauge.vue
 create mode 100644 tests/unit/components/Dashboard/Masthead.spec.ts

diff --git a/pkg/kubewarden/components/Dashboard/Card.vue b/pkg/kubewarden/components/Dashboard/Card.vue
index 0235e452..1d5e2f7d 100644
--- a/pkg/kubewarden/components/Dashboard/Card.vue
+++ b/pkg/kubewarden/components/Dashboard/Card.vue
@@ -27,24 +27,23 @@ export default {
     :class="setLoading"
   >
     <div class="d-header">
-      <router-link :to="card.link">
-        <h1>
-          {{ t(card.title) }}
-        </h1>
-      </router-link>
+      <slot name="count" />
+      <div class="title">
+        <router-link :to="card.link">
+          <h1 class="link">
+            {{ t(card.title) }}
+          </h1>
+        </router-link>
+        <p v-clean-html="t(card.description)" class="mb-0" />
+      </div>
     </div>
 
-    <p v-clean-html="t(card.description)" />
-
-    <router-link class="btn role-secondary" :to="card.cta">
-      {{ t(card.linkText) }}
-    </router-link>
-
-    <hr>
-
     <div class="d-slot">
-      <h2>{{ t(card.slotTitle) }}</h2>
-      <slot />
+      <slot name="content" />
+    </div>
+
+    <div class="d-action">
+      <slot name="action" />
     </div>
   </div>
 </template>
@@ -54,7 +53,9 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  justify-content: space-between;
   height: 100%;
+  width: 100%;
   padding: $space-m;
   grid-auto-rows: 1fr;
   gap: $space-m;
@@ -66,14 +67,25 @@ export default {
     display: flex;
     align-items: center;
 
+    .title {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
     h1 {
       margin: 0;
-      font-size: 18px;
+      color: var(--link);
+    }
+
+    h1:hover {
+      color: var(--body-text);
     }
-  }
 
-  p {
-    min-height: 48px;
+    p {
+      font-size: 10.5px;
+      font-weight: 700;
+    }
   }
 
   .d-slot {
@@ -115,7 +127,12 @@ export default {
       }
     }
   }
+
+  .d-action {
+    width: 100%;
+  }
 }
+
 .loading {
   min-height: 325px;
   overflow: hidden;
diff --git a/pkg/kubewarden/components/Dashboard/DashboardView.vue b/pkg/kubewarden/components/Dashboard/DashboardView.vue
index 2003eeb0..68c82a18 100644
--- a/pkg/kubewarden/components/Dashboard/DashboardView.vue
+++ b/pkg/kubewarden/components/Dashboard/DashboardView.vue
@@ -1,55 +1,57 @@
 <script>
 import { mapGetters } from 'vuex';
 import isEmpty from 'lodash/isEmpty';
-import { Banner } from '@components/Banner';
 
 import { CATALOG, POD, UI_PLUGIN } from '@shell/config/types';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
-import { REPO_TYPE, REPO, CHART, VERSION } from '@shell/config/query-params';
-import { SHOW_PRE_RELEASE } from '@shell/store/prefs';
 import { allHash } from '@shell/utils/promise';
 
 import ConsumptionGauge from '@shell/components/ConsumptionGauge';
 import Loading from '@shell/components/Loading';
-import { newPolicyReportCompatible } from '../../modules/policyReporter';
 
 import { DASHBOARD_HEADERS } from '../../config/table-headers';
-import {
-  KUBEWARDEN, KUBEWARDEN_APPS, KUBEWARDEN_CHARTS, KUBEWARDEN_LABELS, KUBEWARDEN_PRODUCT_NAME
-} from '../../types';
-import { handleGrowl } from '../../utils/handle-growl';
-import { appVersionSatisfiesConstraint, checkUpgradeAvailable } from '../../utils/chart';
+import { KUBEWARDEN, KUBEWARDEN_APPS, KUBEWARDEN_CHARTS, KUBEWARDEN_LABELS, WG_POLICY_K8S } from '../../types';
 
-import DefaultsBanner from '../DefaultsBanner';
+import Masthead from './Masthead';
 import Card from './Card';
+import Modes from './Modes';
+import Reports from './Reports';
+import ReportsGauge from './ReportsGauge';
 
 export default {
   components: {
-    Banner, Card, ConsumptionGauge, DefaultsBanner, Loading
+    Card, Modes, Reports, ConsumptionGauge, Loading, Masthead, ReportsGauge
   },
 
   async fetch() {
     const hash = {};
     const types = [
+      WG_POLICY_K8S.CLUSTER_POLICY_REPORT.TYPE,
+      WG_POLICY_K8S.POLICY_REPORT.TYPE,
       KUBEWARDEN.ADMISSION_POLICY,
       KUBEWARDEN.CLUSTER_ADMISSION_POLICY,
+      KUBEWARDEN.POLICY_SERVER,
       POD,
       CATALOG.APP,
       CATALOG.CLUSTER_REPO,
       UI_PLUGIN
     ];
 
-    for ( const type of types ) {
-      if ( this.$store.getters['cluster/canList'](type) ) {
+    for (const type of types) {
+      if (this.$store.getters['cluster/canList'](type)) {
         hash[type] = this.$store.dispatch('cluster/findAll', { type });
       }
     }
 
     await allHash(hash);
 
-    if ( isEmpty(this.charts) ) {
+    if (isEmpty(this.charts)) {
       await this.$store.dispatch('catalog/load');
     }
+
+    if (this.controllerApp) {
+      await this.controllerApp.fetchValues(true);
+    }
   },
 
   data() {
@@ -64,7 +66,6 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['currentCluster']),
     ...mapGetters({ charts: 'catalog/charts' }),
 
     allApps() {
@@ -75,8 +76,12 @@ export default {
       return this.$store.getters['cluster/all'](POD);
     },
 
+    allPolicyServers() {
+      return this.$store.getters['cluster/all'](KUBEWARDEN.POLICY_SERVER);
+    },
+
     controllerApp() {
-      if ( this.allApps ) {
+      if (this.allApps) {
         return this.allApps?.find((a) => {
           return (
             a.spec?.chart?.metadata?.annotations?.[CATALOG_ANNOTATIONS.RELEASE_NAME] === KUBEWARDEN_APPS.RANCHER_CONTROLLER ||
@@ -88,37 +93,11 @@ export default {
       return null;
     },
 
-    controllerChart() {
-      if ( !isEmpty(this.charts) ) {
-        return this.charts.find(chart => chart?.chartName === KUBEWARDEN_CHARTS.CONTROLLER);
-      }
-
-      return null;
-    },
-
-    defaultsApp() {
-      if ( this.allApps ) {
-        return this.allApps?.find((a) => {
-          return a.spec?.chart?.metadata?.annotations?.[CATALOG_ANNOTATIONS.RELEASE_NAME] === KUBEWARDEN_APPS.RANCHER_DEFAULTS;
-        });
-      }
-
-      return false;
-    },
-
-    defaultsChart() {
-      if ( !isEmpty(this.charts) ) {
-        return this.charts.find(chart => chart?.chartName === KUBEWARDEN_CHARTS.DEFAULTS);
-      }
-
-      return null;
-    },
-
     policyServerPods() {
-      if ( this.$store.getters['cluster/canList'](POD) ) {
+      if (this.$store.getters['cluster/canList'](POD)) {
         const pods = this.allPods?.filter(pod => pod?.metadata?.labels?.[KUBEWARDEN_LABELS.POLICY_SERVER]);
 
-        if ( !isEmpty(pods) ) {
+        if (!isEmpty(pods)) {
           return Object.values(pods).flat();
         }
 
@@ -132,16 +111,16 @@ export default {
     policyServerCounts() {
       const pods = this.policyServerPods || [];
 
-      if ( !isEmpty(pods) ) {
+      if (!isEmpty(pods)) {
         return pods?.reduce((ps, neu) => {
           const neuContainerStatues = neu?.status?.containerStatuses;
           let terminated = false;
 
           // If the container state is terminated, remove it from the available counts
-          if ( !isEmpty(neuContainerStatues) ) {
+          if (!isEmpty(neuContainerStatues)) {
             const filtered = neuContainerStatues.filter(status => status?.state['terminated']);
 
-            if ( !isEmpty(filtered) ) {
+            if (!isEmpty(filtered)) {
               terminated = true;
             }
           }
@@ -178,10 +157,6 @@ export default {
       return this.getPolicyGauges(this.globalPolicies);
     },
 
-    hideBannerDefaults() {
-      return this.$store.getters['kubewarden/hideBannerDefaults'] || !!this.defaultsApp;
-    },
-
     namespacedPolicies() {
       return this.$store.getters['cluster/all'](KUBEWARDEN.ADMISSION_POLICY);
     },
@@ -190,63 +165,91 @@ export default {
       return this.getPolicyGauges(this.namespacedPolicies);
     },
 
-    controllerAppVersion() {
-      return this.controllerApp?.spec?.chart?.metadata?.appVersion;
+    namespacedResultsGauges() {
+      return this.getPolicyResultGauges(this.admissionPolicyResults);
     },
 
-    defaultsAppVersion() {
-      return this.defaultsApp?.spec?.chart?.metadata?.appVersion;
+    clusterResultsGauges() {
+      return this.getPolicyResultGauges(this.clusterPolicyResults);
     },
 
-    controllerUpgradeAvailable() {
-      if ( this.controllerApp && this.controllerChart ) {
-        return checkUpgradeAvailable(this.$store, this.controllerApp, this.controllerChart);
+    policyReports() {
+      return {
+        [WG_POLICY_K8S.CLUSTER_POLICY_REPORT.TYPE]: this.$store.getters['cluster/all'](WG_POLICY_K8S.CLUSTER_POLICY_REPORT.TYPE),
+        [WG_POLICY_K8S.POLICY_REPORT.TYPE]:         this.$store.getters['cluster/all'](WG_POLICY_K8S.POLICY_REPORT.TYPE)
+      };
+    },
+
+    admissionPolicyResults() {
+      if (!isEmpty(this.policyReports[WG_POLICY_K8S.POLICY_REPORT.TYPE])) {
+        let out = [];
+
+        this.policyReports[WG_POLICY_K8S.POLICY_REPORT.TYPE].filter((report) => {
+          const results = report?.results?.filter(result => result?.policy.includes('namespaced-'));
+
+          if (!isEmpty(results)) {
+            out = [...out, ...results];
+          }
+        });
+
+        return out;
       }
 
       return null;
     },
 
-    appVersionSatisfies() {
-      const satisfies = appVersionSatisfiesConstraint(this.$store, this.controllerAppVersion, this.defaultsAppVersion, '<=');
+    clusterPolicyResults() {
+      if (!isEmpty(this.policyReports)) {
+        const pr = this.policyReports[WG_POLICY_K8S.POLICY_REPORT.TYPE];
+        const cpr = this.policyReports[WG_POLICY_K8S.CLUSTER_POLICY_REPORT.TYPE];
+        let out = [];
 
-      return satisfies || false;
-    },
+        if (!isEmpty(cpr)) {
+          const results = cpr.flatMap(report => report?.results);
+
+          out = [...out, ...results];
+        }
+
+        if (!isEmpty(pr)) {
+          const results = pr.flatMap((report) => {
+            return report?.results?.filter(result => !result?.policy.includes('namespaced-'));
+          });
+
+          out = [...out, ...results];
+        }
 
-    defaultsUpgradeAvailable() {
-      if ( !this.appVersionSatisfies ) {
-        return checkUpgradeAvailable(this.$store, this.defaultsApp, this.defaultsChart);
+        return out;
       }
 
       return null;
     },
 
-    showPreRelease() {
-      return this.$store.getters['prefs/get'](SHOW_PRE_RELEASE);
-    },
+    showReports() {
+      if (this.controllerApp) {
+        const auditScanner = this.controllerApp.values?.auditScanner;
 
-    kubewardenExtension() {
-      const extensionsInstalled = this.$store.getters['uiplugins/plugins'] || [];
+        // The enable property will not exist if the auditScanner is enabled.
+        // If the enable property exists and is set to false, the auditScanner is disabled.
+        return auditScanner?.enable !== false;
+      }
 
-      return extensionsInstalled.find(ext => ext.id.includes(KUBEWARDEN_PRODUCT_NAME));
+      return false;
     },
 
-    policyReportsCompatible() {
-      const uiPluginVersion = this.kubewardenExtension?.version;
+    showReporterLink() {
+      if (this.controllerApp) {
+        const auditScanner = this.controllerApp.values?.auditScanner;
 
-      if ( this.controllerAppVersion && uiPluginVersion) {
-        return newPolicyReportCompatible(this.controllerAppVersion, uiPluginVersion);
+        return !!auditScanner?.policyReporter;
       }
 
-      return {
-        oldPolicyReports: true,
-        newPolicyReports:  true
-      };
+      return false;
     }
   },
 
   methods: {
     getPolicyGauges(type) {
-      if ( !isEmpty(type) ) {
+      if (!isEmpty(type)) {
         return type?.reduce((policy, neu) => {
           return {
             status: {
@@ -278,34 +281,26 @@ export default {
       };
     },
 
-    getChartRoute(upgradeAvailable) {
-      if ( upgradeAvailable ) {
-        const {
-          repoType, repoName, name, version
-        } = upgradeAvailable;
-
-        if ( version ) {
-          const query = {
-            [REPO_TYPE]: repoType,
-            [REPO]:      repoName,
-            [CHART]:     name,
-            [VERSION]:   version
-          };
-
-          this.$router.push({
-            name:   'c-cluster-apps-charts-install',
-            params: { cluster: this.currentCluster?.id || '_' },
-            query,
-          });
-        } else {
-          const error = {
-            _statusText: this.t('kubewarden.dashboard.appInstall.versionError.title'),
-            message:     this.t('kubewarden.dashboard.appInstall.versionError.message')
+    getPolicyResultGauges(type) {
+      if (!isEmpty(type)) {
+        return type?.reduce((res, neu) => {
+          return {
+            status: {
+              success: res?.status?.success + ( neu?.result === 'pass' ? 1 : 0 ),
+              fail:    res?.status?.fail + ( neu?.result === 'fail' ? 1 : 0 ),
+            },
+            total: res?.total + 1
           };
-
-          handleGrowl({ error, store: this.$store });
-        }
+        }, {
+          status: { success: 0, fail: 0 },
+          total:  0
+        });
       }
+
+      return {
+        status: { success: 0, fail: 0 },
+        total:  0
+      };
     }
   }
 };
@@ -314,95 +309,7 @@ export default {
 <template>
   <Loading v-if="$fetchState.pending" />
   <div v-else class="dashboard">
-    <Banner
-      v-if="controllerApp && kubewardenExtension && !policyReportsCompatible.newPolicyReports"
-      :label="t('kubewarden.dashboard.policyReports.newPolicyReportsIncompatible', { version: kubewardenExtension?.version }, true)"
-      color="warning"
-      class="mb-40"
-      data-testid="kw-dashboard-pr-incompatible-banner-new-policy-structure"
-    />
-    <Banner
-      v-else-if="controllerApp && kubewardenExtension && !policyReportsCompatible.oldPolicyReports"
-      :label="t('kubewarden.dashboard.policyReports.oldPolicyReportsIncompatible', { version: controllerAppVersion }, true)"
-      color="warning"
-      class="mb-40"
-      data-testid="kw-dashboard-pr-incompatible-banner-old-policy-structure"
-    />
-    <div class="head">
-      <div class="head-title">
-        <h1 data-testid="kw-dashboard-title">
-          {{ t('kubewarden.dashboard.intro') }}
-        </h1>
-
-        <div v-if="controllerAppVersion && defaultsApp && !appVersionSatisfies">
-          <Banner
-            :label="t('kubewarden.dashboard.upgrade.appVersionUnsatisfied', { controllerAppVersion, defaultsAppVersion }, true)"
-            color="warning"
-            class="mb-20"
-            data-testid="kw-dashboard-upgrade-unsatisfied-banner"
-          />
-        </div>
-
-        <div v-if="controllerAppVersion" class="head-version-container">
-          <div class="head-version bg-primary mr-10">
-            {{ t('kubewarden.dashboard.upgrade.appVersion') }}: {{ controllerAppVersion }}
-          </div>
-          <!-- Controller upgrade -->
-          <div
-            v-if="controllerUpgradeAvailable && appVersionSatisfies"
-            data-testid="kw-app-controller-upgrade-button"
-            class="head-upgrade badge-state bg-warning hand mr-10"
-            :disabled="!controllerChart"
-            @click.prevent="getChartRoute(controllerUpgradeAvailable)"
-          >
-            <i class="icon icon-upload" />
-            <span>{{ t('kubewarden.dashboard.upgrade.appUpgrade') }}: {{ controllerUpgradeAvailable.appVersion }}</span>
-            <span class="p-0">-</span>
-            <span>{{ t('kubewarden.dashboard.upgrade.controllerChart') }}: {{ controllerUpgradeAvailable.version }}</span>
-          </div>
-          <!-- Defaults upgrade -->
-          <div
-            v-if="defaultsUpgradeAvailable"
-            data-testid="kw-app-defaults-upgrade-button"
-            class="head-upgrade badge-state bg-warning hand"
-            :disabled="!defaultsChart"
-            @click.prevent="getChartRoute(defaultsUpgradeAvailable)"
-          >
-            <i class="icon icon-upload" />
-            <span>{{ t('kubewarden.dashboard.upgrade.appUpgrade') }}: {{ defaultsUpgradeAvailable.appVersion }}</span>
-            <span class="p-0">-</span>
-            <span>{{ t('kubewarden.dashboard.upgrade.defaultsChart') }}: {{ defaultsUpgradeAvailable.version }}</span>
-          </div>
-        </div>
-      </div>
-
-      <p class="head-subheader">
-        {{ t('kubewarden.dashboard.blurb') }}
-      </p>
-
-      <p>
-        {{ t('kubewarden.dashboard.description') }}
-      </p>
-
-      <div class="head-links">
-        <a
-          href="https://kubewarden.io/"
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          {{ t('kubewarden.dashboard.getStarted') }}
-        </a>
-        <a
-          href="https://github.com/kubewarden/kubewarden-controller/issues"
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          {{ t('kubewarden.dashboard.issues') }}
-        </a>
-      </div>
-    </div>
-
-    <DefaultsBanner v-if="!hideBannerDefaults" />
+    <Masthead :controller-app="controllerApp" />
 
     <div class="get-started">
       <div
@@ -411,9 +318,41 @@ export default {
         class="card-container"
       >
         <Card v-if="card.isEnabled" :card="card">
-          <!-- Policy Server pods -->
-          <span v-if="index === 0">
-            <slot>
+          <template #count>
+            <span v-if="index === 0" class="count">{{ namespacedPolicies.length || 0 }}</span>
+            <span v-if="index === 1" class="count">{{ globalPolicies.length || 0 }}</span>
+            <span v-if="index === 2" class="count">{{ allPolicyServers.length || 0 }}</span>
+          </template>
+
+          <template #content>
+            <span v-if="index === 0">
+              <Modes :gauges="namespacedGuages" />
+              <template v-if="showReports">
+                <Reports :gauges="namespacedResultsGauges" :show-reporter-link="showReporterLink" />
+                <ReportsGauge
+                  v-if="namespacedResultsGauges?.total !== 0"
+                  data-testid="kw-dashboard-ap-gauge"
+                  resource-name="Active"
+                  :reports="namespacedResultsGauges"
+                  :used-as-resource-name="true"
+                />
+              </template>
+            </span>
+
+            <span v-if="index === 1">
+              <Modes :gauges="globalGuages" />
+              <template v-if="showReports">
+                <Reports :gauges="clusterResultsGauges" :show-reporter-link="showReporterLink" />
+                <ReportsGauge
+                  v-if="clusterResultsGauges?.total !== 0"
+                  data-testid="kw-dashboard-cap-gauge"
+                  resource-name="Active"
+                  :reports="clusterResultsGauges"
+                />
+              </template>
+            </span>
+
+            <span v-if="index === 2">
               <ConsumptionGauge
                 data-testid="kw-dashboard-ps-gauge"
                 resource-name="Active"
@@ -423,48 +362,14 @@ export default {
                 :used="policyServerCounts.status.running"
                 units="Pods"
               />
-            </slot>
-          </span>
-
-          <!-- Admission Policies -->
-          <span v-if="index === 1">
-            <slot>
-              <ConsumptionGauge
-                data-testid="kw-dashboard-ap-gauge"
-                resource-name="Active"
-                :color-stops="colorStops"
-                :capacity="namespacedGuages.total"
-                :used-as-resource-name="true"
-                :used="namespacedGuages.status.running"
-                units="Namespaced Policies"
-              />
-              <div class="mt-20">
-                <h4>{{ t('kubewarden.dashboard.headers.modes.title') }}</h4>
-                <span class="mr-20">{{ t('kubewarden.dashboard.headers.modes.protect') }}: {{ namespacedGuages.mode.protect }}</span>
-                <span>{{ t('kubewarden.dashboard.headers.modes.monitor') }}: {{ namespacedGuages.mode.monitor }}</span>
-              </div>
-            </slot>
-          </span>
-
-          <!-- Cluster Admission Policies -->
-          <span v-if="index === 2">
-            <slot>
-              <ConsumptionGauge
-                data-testid="kw-dashboard-cap-gauge"
-                resource-name="Active"
-                :color-stops="colorStops"
-                :capacity="globalGuages.total"
-                :used-as-resource-name="true"
-                :used="globalGuages.status.running"
-                units="Global Policies"
-              />
-              <div class="mt-20">
-                <h4>{{ t('kubewarden.dashboard.headers.modes.title') }}</h4>
-                <span class="mr-20">{{ t('kubewarden.dashboard.headers.modes.protect') }}: {{ globalGuages.mode.protect }}</span>
-                <span>{{ t('kubewarden.dashboard.headers.modes.monitor') }}: {{ globalGuages.mode.monitor }}</span>
-              </div>
-            </slot>
-          </span>
+            </span>
+          </template>
+
+          <template #action>
+            <router-link class="btn role-secondary action" :to="card.cta">
+              {{ t(card.linkText) }}
+            </router-link>
+          </template>
         </Card>
       </div>
     </div>
@@ -476,65 +381,42 @@ export default {
   display: flex;
   flex-direction: column;
 
-  .head {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-content: center;
-    gap: $space-m;
-    outline: 1px solid var(--border);
-    border-radius: var(--border-radius);
-    margin: 0 0 64px 0;
-    padding: $space-m;
-    gap: $space-m;
-
-    &-title {
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-
-      h1 {
-        margin: 0;
-      }
-    }
-
-    &-version-container {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-
-    &-upgrade {
-      display: flex;
-      align-items: center;
-    }
-
-    &-version, &-upgrade {
-      border-radius: var(--border-radius);
-      padding: 4px 8px;
-    }
-
-    &-subheader {
-      font-size: 1.2rem;
-      font-weight: 500;
-      color: var(--text-secondary);
-    }
-
-    &-links {
-      display: flex;
-      gap: 10px;
-    }
-  }
-
   .get-started {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     grid-gap: 20px;
 
     .card-container {
-      min-height: 420px;
       padding: 0;
     }
   }
 }
+
+:deep(.consumption-gauge) {
+  h4, .numbers {
+    font-size: 12px;
+    margin-bottom: 0;
+  }
+
+  div {
+    margin-top: 0 !important;
+  }
+}
+
+.count {
+  font-size: 36px;
+  color: var(--text-color);
+  margin-right: 1rem;
+}
+
+.modes, .events {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.action {
+  justify-content: center;
+  width: 100%;
+}
 </style>
diff --git a/pkg/kubewarden/components/Dashboard/Masthead.vue b/pkg/kubewarden/components/Dashboard/Masthead.vue
new file mode 100644
index 00000000..9a264eaa
--- /dev/null
+++ b/pkg/kubewarden/components/Dashboard/Masthead.vue
@@ -0,0 +1,297 @@
+<script>
+import { mapGetters } from 'vuex';
+import isEmpty from 'lodash/isEmpty';
+
+import { CATALOG } from '@shell/config/types';
+import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
+import { REPO_TYPE, REPO, CHART, VERSION } from '@shell/config/query-params';
+
+import { Banner } from '@components/Banner';
+
+import { KUBEWARDEN_APPS, KUBEWARDEN_CHARTS, KUBEWARDEN_PRODUCT_NAME } from '../../types';
+
+import { newPolicyReportCompatible } from '../../modules/policyReporter';
+import { appVersionSatisfiesConstraint, checkUpgradeAvailable } from '../../utils/chart';
+import { handleGrowl } from '../../utils/handle-growl';
+
+import DefaultsBanner from '../DefaultsBanner';
+
+export default {
+  props: {
+    controllerApp: {
+      type: Object,
+      default: null
+    }
+  },
+
+  components: { Banner, DefaultsBanner },
+
+  computed: {
+    ...mapGetters(['currentCluster']),
+    ...mapGetters({ charts: 'catalog/charts' }),
+
+    appVersionSatisfies() {
+      const satisfies = appVersionSatisfiesConstraint(this.$store, this.controllerAppVersion, this.defaultsAppVersion, '=');
+
+      return satisfies || false;
+    },
+
+    allApps() {
+      return this.$store.getters['cluster/all'](CATALOG.APP);
+    },
+
+    controllerAppVersion() {
+      return this.controllerApp?.spec?.chart?.metadata?.appVersion;
+    },
+
+    controllerChart() {
+      if (!isEmpty(this.charts)) {
+        return this.charts.find(chart => chart?.chartName === KUBEWARDEN_CHARTS.CONTROLLER);
+      }
+
+      return null;
+    },
+
+    controllerUpgradeAvailable() {
+      if (this.controllerApp && this.controllerChart) {
+        return checkUpgradeAvailable(this.$store, this.controllerApp, this.controllerChart);
+      }
+
+      return null;
+    },
+
+    defaultsApp() {
+      if (this.allApps) {
+        return this.allApps?.find((a) => {
+          return a.spec?.chart?.metadata?.annotations?.[CATALOG_ANNOTATIONS.RELEASE_NAME] === KUBEWARDEN_APPS.RANCHER_DEFAULTS;
+        });
+      }
+
+      return false;
+    },
+
+    defaultsAppVersion() {
+      return this.defaultsApp?.spec?.chart?.metadata?.appVersion;
+    },
+
+    defaultsChart() {
+      if (!isEmpty(this.charts)) {
+        return this.charts.find(chart => chart?.chartName === KUBEWARDEN_CHARTS.DEFAULTS);
+      }
+
+      return null;
+    },
+
+    defaultsUpgradeAvailable() {
+      if (!this.appVersionSatisfies) {
+        return checkUpgradeAvailable(this.$store, this.defaultsApp, this.defaultsChart);
+      }
+
+      return null;
+    },
+
+    hideBannerDefaults() {
+      return this.$store.getters['kubewarden/hideBannerDefaults'] || !!this.defaultsApp;
+    },
+
+    kubewardenExtension() {
+      const extensionsInstalled = this.$store.getters['uiplugins/plugins'] || [];
+
+      return extensionsInstalled.find(ext => ext.id.includes(KUBEWARDEN_PRODUCT_NAME));
+    },
+
+    policyReportsCompatible() {
+      const uiPluginVersion = this.kubewardenExtension?.version;
+
+      if (this.controllerAppVersion && uiPluginVersion) {
+        return newPolicyReportCompatible(this.controllerAppVersion, uiPluginVersion);
+      }
+
+      return {
+        oldPolicyReports: true,
+        newPolicyReports:  true
+      };
+    }
+  },
+
+  methods: {
+    getChartRoute(upgradeAvailable) {
+      if (upgradeAvailable) {
+        const {
+          repoType, repoName, name, version
+        } = upgradeAvailable;
+
+        if ( version ) {
+          const query = {
+            [REPO_TYPE]: repoType,
+            [REPO]:      repoName,
+            [CHART]:     name,
+            [VERSION]:   version
+          };
+
+          this.$router.push({
+            name:   'c-cluster-apps-charts-install',
+            params: { cluster: this.currentCluster?.id || '_' },
+            query,
+          });
+        } else {
+          const error = {
+            _statusText: this.t('kubewarden.dashboard.appInstall.versionError.title'),
+            message:     this.t('kubewarden.dashboard.appInstall.versionError.message')
+          };
+
+          handleGrowl({ error, store: this.$store });
+        }
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <Banner
+      v-if="controllerApp && kubewardenExtension && !policyReportsCompatible.newPolicyReports"
+      :label="t('kubewarden.dashboard.policyReports.newPolicyReportsIncompatible', { version: kubewardenExtension?.version }, true)"
+      color="warning"
+      class="mb-40"
+      data-testid="kw-dashboard-pr-incompatible-banner-new-policy-structure"
+    />
+
+    <Banner
+      v-else-if="controllerApp && kubewardenExtension && !policyReportsCompatible.oldPolicyReports"
+      :label="t('kubewarden.dashboard.policyReports.oldPolicyReportsIncompatible', { version: controllerAppVersion }, true)"
+      color="warning"
+      class="mb-40"
+      data-testid="kw-dashboard-pr-incompatible-banner-old-policy-structure"
+    />
+
+    <div class="head">
+      <div class="head-title">
+        <h1 data-testid="kw-dashboard-title">
+          {{ t('kubewarden.dashboard.intro') }}
+        </h1>
+
+        <div v-if="controllerAppVersion && defaultsApp && !appVersionSatisfies">
+          <Banner
+            :label="t('kubewarden.dashboard.upgrade.appVersionUnsatisfied', { controllerAppVersion, defaultsAppVersion }, true)"
+            color="warning"
+            class="mb-20"
+            data-testid="kw-dashboard-upgrade-unsatisfied-banner"
+          />
+        </div>
+
+        <div v-if="controllerAppVersion" class="head-version-container">
+          <div class="head-version bg-primary mr-10">
+            {{ t('kubewarden.dashboard.upgrade.appVersion') }}: {{ controllerAppVersion }}
+          </div>
+          <!-- Controller upgrade -->
+          <div
+            v-if="controllerUpgradeAvailable && appVersionSatisfies"
+            data-testid="kw-app-controller-upgrade-button"
+            class="head-upgrade badge-state bg-warning hand mr-10"
+            :disabled="!controllerChart"
+            @click.prevent="getChartRoute(controllerUpgradeAvailable)"
+          >
+            <i class="icon icon-upload" />
+            <span>{{ t('kubewarden.dashboard.upgrade.appUpgrade') }}: {{ controllerUpgradeAvailable.appVersion }}</span>
+            <span class="p-0">-</span>
+            <span>{{ t('kubewarden.dashboard.upgrade.controllerChart') }}: {{ controllerUpgradeAvailable.version }}</span>
+          </div>
+          <!-- Defaults upgrade -->
+          <div
+            v-if="defaultsUpgradeAvailable"
+            data-testid="kw-app-defaults-upgrade-button"
+            class="head-upgrade badge-state bg-warning hand"
+            :disabled="!defaultsChart"
+            @click.prevent="getChartRoute(defaultsUpgradeAvailable)"
+          >
+            <i class="icon icon-upload" />
+            <span>{{ t('kubewarden.dashboard.upgrade.appUpgrade') }}: {{ defaultsUpgradeAvailable.appVersion }}</span>
+            <span class="p-0">-</span>
+            <span>{{ t('kubewarden.dashboard.upgrade.defaultsChart') }}: {{ defaultsUpgradeAvailable.version }}</span>
+          </div>
+        </div>
+      </div>
+
+      <p class="head-subheader">
+        {{ t('kubewarden.dashboard.blurb') }}
+      </p>
+
+      <p>
+        {{ t('kubewarden.dashboard.description') }}
+      </p>
+
+      <div class="head-links">
+        <a
+          href="https://kubewarden.io/"
+          target="_blank"
+          rel="noopener noreferrer nofollow"
+        >
+          {{ t('kubewarden.dashboard.getStarted') }}
+        </a>
+        <a
+          href="https://github.com/kubewarden/kubewarden-controller/issues"
+          target="_blank"
+          rel="noopener noreferrer nofollow"
+        >
+          {{ t('kubewarden.dashboard.issues') }}
+        </a>
+      </div>
+    </div>
+
+    <DefaultsBanner v-if="!hideBannerDefaults" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.head {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-content: center;
+  gap: $space-m;
+  outline: 1px solid var(--border);
+  border-radius: var(--border-radius);
+  margin: 0 0 64px 0;
+  padding: $space-m;
+  gap: $space-m;
+
+  &-title {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+
+    h1 {
+      margin: 0;
+    }
+  }
+
+  &-version-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &-upgrade {
+    display: flex;
+    align-items: center;
+  }
+
+  &-version, &-upgrade {
+    border-radius: var(--border-radius);
+    padding: 4px 8px;
+  }
+
+  &-subheader {
+    font-size: 1.2rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+  }
+
+  &-links {
+    display: flex;
+    gap: 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pkg/kubewarden/components/Dashboard/Modes.vue b/pkg/kubewarden/components/Dashboard/Modes.vue
new file mode 100644
index 00000000..19d02b2f
--- /dev/null
+++ b/pkg/kubewarden/components/Dashboard/Modes.vue
@@ -0,0 +1,25 @@
+<script>
+export default {
+  props: {
+    gauges: {
+      type:     Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="modes">
+    <h4 class="text-bold mb-0">
+      {{ t('kubewarden.dashboard.headers.modes.title') }}:&nbsp;
+    </h4>
+    <span>{{ gauges.mode.protect }} {{ t('kubewarden.dashboard.headers.modes.protect') }}</span>
+    <span>&nbsp;/&nbsp;</span>
+    <span>{{ gauges.mode.monitor }} {{ t('kubewarden.dashboard.headers.modes.monitor') }}</span>
+  </div>
+</template>
+
+<style scoped>
+/* Your styles */
+</style>
diff --git a/pkg/kubewarden/components/Dashboard/Reports.vue b/pkg/kubewarden/components/Dashboard/Reports.vue
new file mode 100644
index 00000000..ed0a82c2
--- /dev/null
+++ b/pkg/kubewarden/components/Dashboard/Reports.vue
@@ -0,0 +1,51 @@
+<script>
+import { KUBEWARDEN_PRODUCT_NAME, POLICY_REPORTER_PRODUCT } from '../../types';
+
+export default {
+  props: {
+    gauges: {
+      type:     Object,
+      required: true
+    },
+    showReporterLink: {
+      type:     Boolean,
+      default:  false
+    }
+  },
+  data() {
+    const reporterLink = {
+      name:   `c-cluster-${ KUBEWARDEN_PRODUCT_NAME }-${ POLICY_REPORTER_PRODUCT }`,
+      params: { product: KUBEWARDEN_PRODUCT_NAME }
+    }
+
+    return {
+      reporterLink
+    };
+  }
+};
+</script>
+
+<template>
+  <div class="mb-20 reports">
+    <h4 class="text-bold mb-0">
+      {{ t('kubewarden.dashboard.headers.reports.title') }}:&nbsp;
+    </h4>
+    <span class="text-success">{{ gauges.status.success }} {{ t('kubewarden.dashboard.headers.reports.success') }}</span>
+    <span>&nbsp;/&nbsp;</span>
+    <span class="text-error">{{ gauges.status.fail }} {{ t('kubewarden.dashboard.headers.reports.fail') }}</span>
+    <router-link
+      v-if="showReporterLink && gauges.total > 0"
+      :to="reporterLink"
+      class="ml-10"
+    >
+      Show All
+    </router-link>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.reports {
+  display: flex;
+  align-items: flex-end;
+}
+</style>
\ No newline at end of file
diff --git a/pkg/kubewarden/components/Dashboard/ReportsGauge.vue b/pkg/kubewarden/components/Dashboard/ReportsGauge.vue
new file mode 100644
index 00000000..8acbb6d4
--- /dev/null
+++ b/pkg/kubewarden/components/Dashboard/ReportsGauge.vue
@@ -0,0 +1,81 @@
+<script>
+import Bar from '@shell/components/graph/Bar';
+
+export default {
+  props:      {
+    reports: {
+      type:     Object,
+      required: true
+    }
+  },
+
+  components: { Bar },
+
+  computed: {
+    percentageBarValue() {
+      if (!this.reports.total) {
+        return 0;
+      }
+
+      return (Math.round(this.reports?.status.success * 100) / this.reports.total).toFixed(0);
+    }
+  },
+
+  methods: {
+    formattedPercentage(type) {
+      return `${ (Math.round(this.reports?.status[type] * 100) / this.reports.total).toFixed(0) }%`;
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="reports-gauge">
+    <div class="numbers">
+      <div class="numbers-stats success">
+        <span class="text-success">{{ reports.status.success }}</span>
+        <span>Success</span>
+        <span class="percentage"><i>/&nbsp;</i>{{ formattedPercentage('success') }}</span>
+      </div>
+
+      <div class="numbers-stats fail">
+        <span class="text-error">{{ reports.status.fail }}</span>
+        <span>Fail</span>
+        <span class="percentage"><i>/&nbsp;</i>{{ formattedPercentage('fail') }}</span>
+      </div>
+    </div>
+    <div>
+      <Bar
+        :percentage="percentageBarValue"
+        primary-color="--success"
+        secondary-color="--error"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.reports-gauge {
+  .numbers {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+
+    &-stats {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      align-self: baseline;
+      font-size: 12px;
+      gap: 4px;
+    }
+
+    .percentage {
+      i {
+        margin-right: 4px;
+      }
+    }
+  }
+}
+</style>
diff --git a/pkg/kubewarden/config/table-headers.ts b/pkg/kubewarden/config/table-headers.ts
index b8439a06..b5215fcc 100644
--- a/pkg/kubewarden/config/table-headers.ts
+++ b/pkg/kubewarden/config/table-headers.ts
@@ -151,17 +151,6 @@ export const POLICY_HEADERS = [
 ];
 
 export const DASHBOARD_HEADERS = [
-  {
-    isEnabled:   true,
-    isLoaded:    true,
-    icon:        'icon-question-mark',
-    cta:         createKubewardenRoute({ name: 'c-cluster-product-resource-create', params: { resource: KUBEWARDEN.POLICY_SERVER } }),
-    link:        createKubewardenRoute({ name: 'c-cluster-product-resource', params: { resource: KUBEWARDEN.POLICY_SERVER } }),
-    linkText:    'kubewarden.dashboard.headers.policyServer.linkText',
-    description: 'kubewarden.dashboard.headers.policyServer.description',
-    slotTitle:   'kubewarden.dashboard.headers.policyServer.slotTitle',
-    title:       'kubewarden.dashboard.headers.policyServer.title'
-  },
   {
     isEnabled:   true,
     isLoaded:    true,
@@ -183,7 +172,18 @@ export const DASHBOARD_HEADERS = [
     description: 'kubewarden.dashboard.headers.clusterAdmissionPolicy.description',
     slotTitle:   'kubewarden.dashboard.headers.clusterAdmissionPolicy.slotTitle',
     title:       'kubewarden.dashboard.headers.clusterAdmissionPolicy.title'
-  }
+  },
+  {
+    isEnabled:   true,
+    isLoaded:    true,
+    icon:        'icon-question-mark',
+    cta:         createKubewardenRoute({ name: 'c-cluster-product-resource-create', params: { resource: KUBEWARDEN.POLICY_SERVER } }),
+    link:        createKubewardenRoute({ name: 'c-cluster-product-resource', params: { resource: KUBEWARDEN.POLICY_SERVER } }),
+    linkText:    'kubewarden.dashboard.headers.policyServer.linkText',
+    description: 'kubewarden.dashboard.headers.policyServer.description',
+    slotTitle:   'kubewarden.dashboard.headers.policyServer.slotTitle',
+    title:       'kubewarden.dashboard.headers.policyServer.title'
+  },
 ];
 
 export const TRACE_HEADERS = [
diff --git a/pkg/kubewarden/l10n/en-us.yaml b/pkg/kubewarden/l10n/en-us.yaml
index 164544b4..cbd02543 100644
--- a/pkg/kubewarden/l10n/en-us.yaml
+++ b/pkg/kubewarden/l10n/en-us.yaml
@@ -30,23 +30,24 @@ kubewarden:
     headers:
       policyServer:
         title: Policy Servers
-        description: Kubewarden uses Policy Servers to receive requests to be validated. It does that by executing Kubewarden's policies.
+        description: Policy Servers validate requests
         linkText: Create Policy Server
-        slotTitle: Policy Server Pods
       admissionPolicy:
-        title: Admission Policies
-        description: An Admission Policy is a namespace-wide resource. The policy will process only the requests that are targeting the Namespace where the Admission Policy is defined.
-        linkText: Create Admission Policy
-        slotTitle: Policies
+        title: Namespaced Policies
+        description: Namespace-wide policy validation
+        linkText: Create Namespaced Policy
       clusterAdmissionPolicy:
-        title: Cluster Admission Policies
-        description: The Cluster Admission Policy resource is the core of the Kubewarden stack. This resource defines how policies evaluate requests.
-        linkText: Create Cluster Admission Policy
-        slotTitle: Policies
+        title: Cluster Policies
+        description: Cluster-wide policy validation
+        linkText: Create Cluster Policy
       modes:
-        title: Policy Modes
+        title: Modes
         monitor: Monitor
         protect: Protect
+      reports:
+        title: Reports
+        success: Success
+        fail: Fail
     appInstall:
       title: Kubewarden App Install
       description: This will take you to the app installation page for Kubewarden.
diff --git a/tests/unit/components/Dashboard/DashboardView.spec.ts b/tests/unit/components/Dashboard/DashboardView.spec.ts
index a12adf04..90d6084e 100644
--- a/tests/unit/components/Dashboard/DashboardView.spec.ts
+++ b/tests/unit/components/Dashboard/DashboardView.spec.ts
@@ -1,22 +1,15 @@
 import { shallowMount } from '@vue/test-utils';
 import { describe, expect, it } from '@jest/globals';
 
-import { SHOW_PRE_RELEASE } from '@shell/store/prefs';
-
 import DashboardView from '@kubewarden/components/Dashboard/DashboardView.vue';
-import DefaultsBanner from '@kubewarden/components/DefaultsBanner';
 import ConsumptionGauge from '@shell/components/ConsumptionGauge';
 
-import DEFAULTS_APP from '@tests/unit/_templates_/defaultsApp';
-import { controllerCharts } from '@tests/unit/_templates_/controllerCharts';
-
 describe('component: DashboardView', () => {
   const commonMocks = {
     $fetchState: { pending: false },
     $store:      {
       getters: {
         currentCluster:                  () => 'current_cluster',
-        'kubewarden/hideBannerDefaults': jest.fn(),
         'i18n/t':                        jest.fn(),
         'catalog/chart':                 jest.fn(),
         'catalog/charts':                jest.fn(),
@@ -28,14 +21,8 @@ describe('component: DashboardView', () => {
   };
 
   const commonComputed = {
-    controllerApp:      () => null,
-    controllerChart:    () => null,
-    defaultsApp:        () => DEFAULTS_APP,
-    hideBannerDefaults: () => false,
     globalPolicies:     () => [],
-    namespacedPolicies: () => [],
-    version:            () => '1.25',
-    upgradeAvailable:   () => null,
+    namespacedPolicies: () => []
   };
 
   const createWrapper = (overrides) => {
@@ -46,19 +33,6 @@ describe('component: DashboardView', () => {
     });
   };
 
-  it('renders defaults banner when default app is not found', () => {
-    const wrapper = createWrapper({
-      stubs: {
-        Card:             { template: '<span />' },
-        ConsumptionGauge: { template: '<span />' },
-      },
-    });
-
-    const banner = wrapper.findComponent(DefaultsBanner);
-
-    expect(banner.exists()).toBe(true);
-  });
-
   it('renders correct gauge info of policy servers', () => {
     const pods = [
       {
@@ -83,13 +57,13 @@ describe('component: DashboardView', () => {
 
     const wrapper = createWrapper({
       computed: { policyServerPods: () => pods },
-      stubs:    { DefaultsBanner: { template: '<span />' } },
+      stubs:    { Masthead: { template: '<span />' } },
     });
 
     const gauges = wrapper.findAllComponents(ConsumptionGauge);
 
-    expect(gauges.at(0).props().capacity).toStrictEqual(pods.length as Number);
-    expect(gauges.at(0).props().used).toStrictEqual(1 as Number);
+    expect(gauges.at(2).props().capacity).toStrictEqual(pods.length as Number);
+    expect(gauges.at(2).props().used).toStrictEqual(1 as Number);
   });
 
   it('renders correct gauge info of admission policies', () => {
@@ -119,183 +93,14 @@ describe('component: DashboardView', () => {
 
     const wrapper = createWrapper({
       computed: { namespacedPolicies: () => policies },
-      stubs:    { DefaultsBanner: { template: '<span />' } },
+      stubs:    { Masthead: { template: '<span />' } }
     });
 
     const gauges = wrapper.findAllComponents(ConsumptionGauge);
 
-    expect(gauges.at(1).props().capacity).toStrictEqual(
+    expect(gauges.at(0).props().capacity).toStrictEqual(
       policies.length as Number
     );
-    expect(gauges.at(1).props().used).toStrictEqual(1 as Number);
-  });
-
-  it('renders the Upgradable button when an upgrade is available', () => {
-    const oldControllerApp = { spec: { chart: { metadata: { version: '2.0.4', appVersion: 'v1.9.0' } } } };
-
-    const wrapper = createWrapper({
-      computed: {
-        controllerApp:   () => oldControllerApp,
-        controllerChart: () => controllerCharts,
-        version:         () => 'v1.9.0',
-      },
-    });
-
-    const upgradeButton = wrapper.find('[data-testid="kw-app-controller-upgrade-button"]');
-
-    expect(upgradeButton.exists()).toBe(true);
-    expect(upgradeButton.text()).toContain(
-      '%kubewarden.dashboard.upgrade.appUpgrade%: v1.9.0 - %kubewarden.dashboard.upgrade.controllerChart%: 2.0.5'
-    );
-  });
-
-  it('calculates the correct chart for a supported MAJOR version upgrade', () => {
-    const oldControllerApp = { spec: { chart: { metadata: { version: '0.4.6', appVersion: 'v0.5.5' } } } };
-
-    const wrapper = createWrapper({
-      computed: {
-        controllerApp:   () => oldControllerApp,
-        controllerChart: () => controllerCharts,
-        version:         () => 'v0.5.5',
-      },
-    });
-
-    const upgradeButton = wrapper.find('[data-testid="kw-app-controller-upgrade-button"]');
-
-    expect(upgradeButton.exists()).toBe(true);
-    expect(upgradeButton.text()).toContain(
-      '%kubewarden.dashboard.upgrade.appUpgrade%: v1.0.0 - %kubewarden.dashboard.upgrade.controllerChart%: 1.0.0'
-
-    );
-  });
-
-  it('calculates the correct chart for a supported MINOR version upgrade', () => {
-    const oldControllerApp = { spec: { chart: { metadata: { version: '1.1.1', appVersion: 'v1.1.0' } } } };
-
-    const wrapper = createWrapper({
-      computed: {
-        controllerApp:   () => oldControllerApp,
-        controllerChart: () => controllerCharts,
-        version:         () => 'v1.1.0',
-      },
-    });
-
-    const upgradeButton = wrapper.find('[data-testid="kw-app-controller-upgrade-button"]');
-
-    expect(upgradeButton.exists()).toBe(true);
-    expect(upgradeButton.text()).toContain(
-      '%kubewarden.dashboard.upgrade.appUpgrade%: v1.1.1 - %kubewarden.dashboard.upgrade.controllerChart%: 1.2.3'
-    );
-  });
-
-  it('calculates the correct chart for a supported PATCH version upgrade', () => {
-    const oldControllerApp = { spec: { chart: { metadata: { version: '2.0.0', appVersion: 'v1.8.0' } } } };
-
-    const wrapper = createWrapper({
-      computed: {
-        controllerApp:   () => oldControllerApp,
-        controllerChart: () => controllerCharts,
-        version:         () => 'v1.8.0',
-      },
-    });
-
-    const upgradeButton = wrapper.find('[data-testid="kw-app-controller-upgrade-button"]');
-
-    expect(upgradeButton.exists()).toBe(true);
-    expect(upgradeButton.text()).toContain(
-      '%kubewarden.dashboard.upgrade.appUpgrade%: v1.9.0 - %kubewarden.dashboard.upgrade.controllerChart%: 2.0.5'
-    );
-    expect(wrapper.vm.controllerUpgradeAvailable).toBe(controllerCharts.versions[1]);
-  });
-
-  it('calculates the correct chart for multiple appVersions with chart PATCH available', () => {
-    const oldControllerApp = { spec: { chart: { metadata: { version: '1.6.0', appVersion: 'v1.7.0' } } } };
-
-    const wrapper = createWrapper({
-      computed: {
-        controllerApp:   () => oldControllerApp,
-        controllerChart: () => controllerCharts,
-        version:         () => 'v1.7.0',
-      },
-    });
-
-    const upgradeButton = wrapper.find('[data-testid="kw-app-controller-upgrade-button"]');
-
-    expect(upgradeButton.exists()).toBe(true);
-    expect(upgradeButton.text()).toContain(
-      '%kubewarden.dashboard.upgrade.appUpgrade%: v1.8.0 - %kubewarden.dashboard.upgrade.controllerChart%: 2.0.2'
-    );
-  });
-
-  it('calculates the correct chart for inconsistent appVersion semantics', () => {
-    const oldControllerApp = { spec: { chart: { metadata: { version: '1.4.0', appVersion: '1.5.0' } } } };
-
-    const wrapper = createWrapper({
-      computed: {
-        controllerApp:   () => oldControllerApp,
-        controllerChart: () => controllerCharts,
-        version:         () => '1.5.0',
-      },
-    });
-
-    const upgradeButton = wrapper.find('[data-testid="kw-app-controller-upgrade-button"]');
-
-    expect(upgradeButton.exists()).toBe(true);
-    expect(upgradeButton.text()).toContain(
-      '%kubewarden.dashboard.upgrade.appUpgrade%: v1.6.0 - %kubewarden.dashboard.upgrade.controllerChart%: 1.5.3'
-    );
-  });
-
-  it('calculates the correct chart for pre-release versions', () => {
-    const oldControllerApp = { spec: { chart: { metadata: { version: '2.0.5', appVersion: 'v1.9.0' } } } };
-
-    commonMocks.$store.getters['prefs/get'].mockImplementation((key) => {
-      if ( key === SHOW_PRE_RELEASE ) {
-        return true;
-      }
-
-      return undefined;
-    });
-
-    const wrapper = createWrapper({
-      computed: {
-        controllerApp:   () => oldControllerApp,
-        controllerChart: () => controllerCharts,
-        version:         () => 'v1.9.0',
-        showPreRelease:  () => true,
-      },
-    });
-
-    const upgradeButton = wrapper.find('[data-testid="kw-app-controller-upgrade-button"]');
-
-    expect(upgradeButton.exists()).toBe(true);
-    expect(upgradeButton.text()).toContain(
-      '%kubewarden.dashboard.upgrade.appUpgrade%: v1.10.0-rc1 - %kubewarden.dashboard.upgrade.controllerChart%: 2.0.6-rc1'
-    );
-  });
-
-  it('does not show pre-release upgrades when preference is false', () => {
-    const oldControllerApp = { spec: { chart: { metadata: { version: '2.0.5', appVersion: 'v1.9.0' } } } };
-
-    commonMocks.$store.getters['prefs/get'].mockImplementation((key) => {
-      if ( key === SHOW_PRE_RELEASE ) {
-        return false;
-      }
-
-      return undefined;
-    });
-
-    const wrapper = createWrapper({
-      computed: {
-        controllerApp:   () => oldControllerApp,
-        controllerChart: () => controllerCharts,
-        version:         () => 'v1.9.0',
-        showPreRelease:  () => false,
-      },
-    });
-
-    const upgradeButton = wrapper.find('[data-testid="kw-app-controller-upgrade-button"]');
-
-    expect(upgradeButton.exists()).toBe(false);
+    expect(gauges.at(0).props().used).toStrictEqual(1 as Number);
   });
 });
diff --git a/tests/unit/components/Dashboard/Masthead.spec.ts b/tests/unit/components/Dashboard/Masthead.spec.ts
new file mode 100644
index 00000000..993ffbf9
--- /dev/null
+++ b/tests/unit/components/Dashboard/Masthead.spec.ts
@@ -0,0 +1,229 @@
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from '@jest/globals';
+
+import { SHOW_PRE_RELEASE } from '@shell/store/prefs';
+
+import Masthead from '@kubewarden/components/Dashboard/Masthead.vue';
+import DefaultsBanner from '@kubewarden/components/DefaultsBanner';
+
+import DEFAULTS_APP from '@tests/unit/_templates_/defaultsApp';
+import { controllerCharts } from '@tests/unit/_templates_/controllerCharts';
+
+describe('component: Masthead', () => {
+  const commonMocks = {
+    $fetchState: { pending: false },
+    $store:      {
+      getters: {
+        currentCluster:                  () => 'current_cluster',
+        'kubewarden/hideBannerDefaults': jest.fn(),
+        'i18n/t':                        jest.fn(),
+        'catalog/chart':                 jest.fn(),
+        'catalog/charts':                jest.fn(),
+        'cluster/all':                   jest.fn(),
+        'cluster/canList':               () => true,
+        'prefs/get':                     jest.fn(),
+      },
+    },
+  };
+
+  const commonComputed = {
+    controllerApp:      () => null,
+    controllerChart:    () => null,
+    defaultsApp:        () => DEFAULTS_APP,
+    hideBannerDefaults: () => false,
+    globalPolicies:     () => [],
+    namespacedPolicies: () => [],
+    version:            () => '1.25',
+    upgradeAvailable:   () => null,
+  };
+
+  const createWrapper = (overrides) => {
+    return shallowMount(Masthead, {
+      mocks:    commonMocks,
+      computed: commonComputed,
+      ...overrides,
+    });
+  };
+
+  it('renders defaults banner when default app is not found', () => {
+    const wrapper = createWrapper({
+      stubs: {
+        Card:             { template: '<span />' },
+        ConsumptionGauge: { template: '<span />' },
+      },
+    });
+
+    const banner = wrapper.findComponent(DefaultsBanner);
+
+    expect(banner.exists()).toBe(true);
+  });
+
+  it('renders the Upgradable button when an upgrade is available', () => {
+    const oldControllerApp = { spec: { chart: { metadata: { version: '2.0.4', appVersion: 'v1.9.0' } } } };
+
+    const wrapper = createWrapper({
+      computed: {
+        controllerApp:   () => oldControllerApp,
+        controllerChart: () => controllerCharts,
+        version:         () => 'v1.9.0',
+      },
+    });
+
+    const upgradeButton = wrapper.find('[data-testid="kw-app-controller-upgrade-button"]');
+
+    expect(upgradeButton.exists()).toBe(true);
+    expect(upgradeButton.text()).toContain(
+      '%kubewarden.dashboard.upgrade.appUpgrade%: v1.9.0 - %kubewarden.dashboard.upgrade.controllerChart%: 2.0.5'
+    );
+  });
+
+  it('calculates the correct chart for a supported MAJOR version upgrade', () => {
+    const oldControllerApp = { spec: { chart: { metadata: { version: '0.4.6', appVersion: 'v0.5.5' } } } };
+
+    const wrapper = createWrapper({
+      computed: {
+        controllerApp:   () => oldControllerApp,
+        controllerChart: () => controllerCharts,
+        version:         () => 'v0.5.5',
+      },
+    });
+
+    const upgradeButton = wrapper.find('[data-testid="kw-app-controller-upgrade-button"]');
+
+    expect(upgradeButton.exists()).toBe(true);
+    expect(upgradeButton.text()).toContain(
+      '%kubewarden.dashboard.upgrade.appUpgrade%: v1.0.0 - %kubewarden.dashboard.upgrade.controllerChart%: 1.0.0'
+
+    );
+  });
+
+  it('calculates the correct chart for a supported MINOR version upgrade', () => {
+    const oldControllerApp = { spec: { chart: { metadata: { version: '1.1.1', appVersion: 'v1.1.0' } } } };
+
+    const wrapper = createWrapper({
+      computed: {
+        controllerApp:   () => oldControllerApp,
+        controllerChart: () => controllerCharts,
+        version:         () => 'v1.1.0',
+      },
+    });
+
+    const upgradeButton = wrapper.find('[data-testid="kw-app-controller-upgrade-button"]');
+
+    expect(upgradeButton.exists()).toBe(true);
+    expect(upgradeButton.text()).toContain(
+      '%kubewarden.dashboard.upgrade.appUpgrade%: v1.1.1 - %kubewarden.dashboard.upgrade.controllerChart%: 1.2.3'
+    );
+  });
+
+  it('calculates the correct chart for a supported PATCH version upgrade', () => {
+    const oldControllerApp = { spec: { chart: { metadata: { version: '2.0.0', appVersion: 'v1.8.0' } } } };
+
+    const wrapper = createWrapper({
+      computed: {
+        controllerApp:   () => oldControllerApp,
+        controllerChart: () => controllerCharts,
+        version:         () => 'v1.8.0',
+      },
+    });
+
+    const upgradeButton = wrapper.find('[data-testid="kw-app-controller-upgrade-button"]');
+
+    expect(upgradeButton.exists()).toBe(true);
+    expect(upgradeButton.text()).toContain(
+      '%kubewarden.dashboard.upgrade.appUpgrade%: v1.9.0 - %kubewarden.dashboard.upgrade.controllerChart%: 2.0.5'
+    );
+    expect(wrapper.vm.controllerUpgradeAvailable).toBe(controllerCharts.versions[1]);
+  });
+
+  it('calculates the correct chart for multiple appVersions with chart PATCH available', () => {
+    const oldControllerApp = { spec: { chart: { metadata: { version: '1.6.0', appVersion: 'v1.7.0' } } } };
+
+    const wrapper = createWrapper({
+      computed: {
+        controllerApp:   () => oldControllerApp,
+        controllerChart: () => controllerCharts,
+        version:         () => 'v1.7.0',
+      },
+    });
+
+    const upgradeButton = wrapper.find('[data-testid="kw-app-controller-upgrade-button"]');
+
+    expect(upgradeButton.exists()).toBe(true);
+    expect(upgradeButton.text()).toContain(
+      '%kubewarden.dashboard.upgrade.appUpgrade%: v1.8.0 - %kubewarden.dashboard.upgrade.controllerChart%: 2.0.2'
+    );
+  });
+
+  it('calculates the correct chart for inconsistent appVersion semantics', () => {
+    const oldControllerApp = { spec: { chart: { metadata: { version: '1.4.0', appVersion: '1.5.0' } } } };
+
+    const wrapper = createWrapper({
+      computed: {
+        controllerApp:   () => oldControllerApp,
+        controllerChart: () => controllerCharts,
+        version:         () => '1.5.0',
+      },
+    });
+
+    const upgradeButton = wrapper.find('[data-testid="kw-app-controller-upgrade-button"]');
+
+    expect(upgradeButton.exists()).toBe(true);
+    expect(upgradeButton.text()).toContain(
+      '%kubewarden.dashboard.upgrade.appUpgrade%: v1.6.0 - %kubewarden.dashboard.upgrade.controllerChart%: 1.5.3'
+    );
+  });
+
+  it('calculates the correct chart for pre-release versions', () => {
+    const oldControllerApp = { spec: { chart: { metadata: { version: '2.0.5', appVersion: 'v1.9.0' } } } };
+
+    commonMocks.$store.getters['prefs/get'].mockImplementation((key) => {
+      if ( key === SHOW_PRE_RELEASE ) {
+        return true;
+      }
+
+      return undefined;
+    });
+
+    const wrapper = createWrapper({
+      computed: {
+        controllerApp:   () => oldControllerApp,
+        controllerChart: () => controllerCharts,
+        version:         () => 'v1.9.0',
+        showPreRelease:  () => true,
+      },
+    });
+
+    const upgradeButton = wrapper.find('[data-testid="kw-app-controller-upgrade-button"]');
+
+    expect(upgradeButton.exists()).toBe(true);
+    expect(upgradeButton.text()).toContain(
+      '%kubewarden.dashboard.upgrade.appUpgrade%: v1.10.0-rc1 - %kubewarden.dashboard.upgrade.controllerChart%: 2.0.6-rc1'
+    );
+  });
+
+  it('does not show pre-release upgrades when preference is false', () => {
+    const oldControllerApp = { spec: { chart: { metadata: { version: '2.0.5', appVersion: 'v1.9.0' } } } };
+
+    commonMocks.$store.getters['prefs/get'].mockImplementation((key) => {
+      if ( key === SHOW_PRE_RELEASE ) {
+        return false;
+      }
+
+      return undefined;
+    });
+
+    const wrapper = createWrapper({
+      computed: {
+        controllerApp:   () => oldControllerApp,
+        controllerChart: () => controllerCharts,
+        version:         () => 'v1.9.0',
+        showPreRelease:  () => false,
+      },
+    });
+
+    const upgradeButton = wrapper.find('[data-testid="kw-app-controller-upgrade-button"]');
+
+    expect(upgradeButton.exists()).toBe(false);
+  });
+});

From e2ea76a7f5d2c10e6ffe574a18e5e4f7854f0dd6 Mon Sep 17 00:00:00 2001
From: Jordon Leach <jordonleach@gmail.com>
Date: Thu, 15 Aug 2024 13:58:27 -0400
Subject: [PATCH 2/6] Add custom bar graph - error status - fix unit tests

---
 pkg/kubewarden/components/Dashboard/Card.vue  |  38 ++--
 .../components/Dashboard/DashboardView.vue    |  38 ++--
 pkg/kubewarden/components/Graph/Bar.vue       |  75 ++++++++
 pkg/kubewarden/l10n/en-us.yaml                |   1 +
 .../Dashboard/DashboardView.spec.ts           | 178 ++++++++++++++----
 5 files changed, 273 insertions(+), 57 deletions(-)
 create mode 100644 pkg/kubewarden/components/Graph/Bar.vue

diff --git a/pkg/kubewarden/components/Dashboard/Card.vue b/pkg/kubewarden/components/Dashboard/Card.vue
index 1d5e2f7d..154ad8f4 100644
--- a/pkg/kubewarden/components/Dashboard/Card.vue
+++ b/pkg/kubewarden/components/Dashboard/Card.vue
@@ -27,24 +27,24 @@ export default {
     :class="setLoading"
   >
     <div class="d-header">
-      <slot name="count" />
-      <div class="title">
-        <router-link :to="card.link">
-          <h1 class="link">
-            {{ t(card.title) }}
-          </h1>
-        </router-link>
-        <p v-clean-html="t(card.description)" class="mb-0" />
+      <div class="title-container">
+        <slot name="count" />
+        <div class="title">
+          <router-link :to="card.link">
+            <h1 class="link">
+              {{ t(card.title) }}
+            </h1>
+          </router-link>
+          <p v-clean-html="t(card.description)" class="mb-0" />
+        </div>
       </div>
+
+      <slot name="action" class="action" />
     </div>
 
     <div class="d-slot">
       <slot name="content" />
     </div>
-
-    <div class="d-action">
-      <slot name="action" />
-    </div>
   </div>
 </template>
 
@@ -66,6 +66,14 @@ export default {
   .d-header {
     display: flex;
     align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    .title-container {
+      display: flex;
+      align-items: center;
+      width: 55%;
+    }
 
     .title {
       display: flex;
@@ -86,6 +94,10 @@ export default {
       font-size: 10.5px;
       font-weight: 700;
     }
+
+    .action {
+      width: 45%;
+    }
   }
 
   .d-slot {
@@ -129,7 +141,7 @@ export default {
   }
 
   .d-action {
-    width: 100%;
+    width: auto;
   }
 }
 
diff --git a/pkg/kubewarden/components/Dashboard/DashboardView.vue b/pkg/kubewarden/components/Dashboard/DashboardView.vue
index 68c82a18..d6df02a8 100644
--- a/pkg/kubewarden/components/Dashboard/DashboardView.vue
+++ b/pkg/kubewarden/components/Dashboard/DashboardView.vue
@@ -288,18 +288,23 @@ export default {
             status: {
               success: res?.status?.success + ( neu?.result === 'pass' ? 1 : 0 ),
               fail:    res?.status?.fail + ( neu?.result === 'fail' ? 1 : 0 ),
+              error:   res?.status?.error + ( neu?.result === 'error' ? 1 : 0 )
             },
             total: res?.total + 1
           };
         }, {
-          status: { success: 0, fail: 0 },
-          total:  0
+          status: {
+            success: 0, fail: 0, error: 0
+          },
+          total: 0
         });
       }
 
       return {
-        status: { success: 0, fail: 0 },
-        total:  0
+        status: {
+          success: 0, fail: 0, error: 0
+        },
+        total: 0
       };
     }
   }
@@ -324,6 +329,23 @@ export default {
             <span v-if="index === 2" class="count">{{ allPolicyServers.length || 0 }}</span>
           </template>
 
+          <template #action>
+            <router-link
+              class="btn action"
+              :class="{
+                'role-primary': (index === 0 && namespacedPolicies.length < 1) ||
+                  (index === 1 && globalPolicies.length < 1) ||
+                  (index === 2 && allPolicyServers.length < 1),
+                'role-secondary': (index === 0 && namespacedPolicies.length >= 1) ||
+                  (index === 1 && globalPolicies.length >= 1) ||
+                  (index === 2 && allPolicyServers.length >= 1)
+              }"
+              :to="card.cta"
+            >
+              {{ t(card.linkText) }}
+            </router-link>
+          </template>
+
           <template #content>
             <span v-if="index === 0">
               <Modes :gauges="namespacedGuages" />
@@ -364,12 +386,6 @@ export default {
               />
             </span>
           </template>
-
-          <template #action>
-            <router-link class="btn role-secondary action" :to="card.cta">
-              {{ t(card.linkText) }}
-            </router-link>
-          </template>
         </Card>
       </div>
     </div>
@@ -383,7 +399,7 @@ export default {
 
   .get-started {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
     grid-gap: 20px;
 
     .card-container {
diff --git a/pkg/kubewarden/components/Graph/Bar.vue b/pkg/kubewarden/components/Graph/Bar.vue
new file mode 100644
index 00000000..fcae3aad
--- /dev/null
+++ b/pkg/kubewarden/components/Graph/Bar.vue
@@ -0,0 +1,75 @@
+<script>
+export default {
+  props: {
+    percentages: {
+      type:     Array,
+      required: true,
+      validator(value) {
+        return value.reduce((acc, val) => acc + val, 0) <= 100;
+      },
+    },
+    colors: {
+      type:     Array,
+      default: () => ['--success', '--error', '--warning']
+    },
+  },
+  computed: {
+    sliceStyles() {
+      let accumulatedPercentage = 0;
+      const allZero = this.percentages.every(percentage => percentage === 0);
+
+      if ( allZero ) {
+        return [
+          {
+            width:           '100%',
+            backgroundColor: 'var(--disabled-bg)',
+            left:            '0%',
+          },
+        ];
+      }
+
+      return this.percentages.map((percentage, index) => {
+        const style = {
+          width:           `${ percentage }%`,
+          backgroundColor: `var(${ this.colors[index] })`,
+          left:            `${ accumulatedPercentage }%`,
+        };
+
+        accumulatedPercentage += percentage;
+
+        return style;
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="bar">
+    <div
+      v-for="(sliceStyle, i) in sliceStyles"
+      :key="i"
+      class="slice"
+      :style="sliceStyle"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.bar {
+  $height: 15px;
+
+  width: 100%;
+  height: $height;
+  border-radius: math.div($height, 2);
+  overflow: hidden;
+  position: relative;
+
+  .slice {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+  }
+}
+</style>
diff --git a/pkg/kubewarden/l10n/en-us.yaml b/pkg/kubewarden/l10n/en-us.yaml
index cbd02543..01239529 100644
--- a/pkg/kubewarden/l10n/en-us.yaml
+++ b/pkg/kubewarden/l10n/en-us.yaml
@@ -48,6 +48,7 @@ kubewarden:
         title: Reports
         success: Success
         fail: Fail
+        error: Error
     appInstall:
       title: Kubewarden App Install
       description: This will take you to the app installation page for Kubewarden.
diff --git a/tests/unit/components/Dashboard/DashboardView.spec.ts b/tests/unit/components/Dashboard/DashboardView.spec.ts
index 90d6084e..03d47eb9 100644
--- a/tests/unit/components/Dashboard/DashboardView.spec.ts
+++ b/tests/unit/components/Dashboard/DashboardView.spec.ts
@@ -1,8 +1,16 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { describe, expect, it } from '@jest/globals';
 
-import DashboardView from '@kubewarden/components/Dashboard/DashboardView.vue';
 import ConsumptionGauge from '@shell/components/ConsumptionGauge';
+import Loading from '@shell/components/Loading';
+
+import DashboardView from '@kubewarden/components/Dashboard/DashboardView.vue';
+import Card from '@kubewarden/components/Dashboard/Card.vue';
+import Masthead from '@kubewarden/components/Dashboard/Masthead.vue';
+import Modes from '@kubewarden/components/Dashboard/Modes.vue';
+import Events from '@kubewarden/components/Dashboard/Events.vue';
+import EventsGauge from '@kubewarden/components/Dashboard/EventsGauge.vue';
+import { DASHBOARD_HEADERS } from '@kubewarden/config/table-headers';
 
 describe('component: DashboardView', () => {
   const commonMocks = {
@@ -14,7 +22,7 @@ describe('component: DashboardView', () => {
         'catalog/chart':                 jest.fn(),
         'catalog/charts':                jest.fn(),
         'cluster/all':                   jest.fn(),
-        'cluster/canList':               () => true,
+        'cluster/canList':               jest.fn(() => true),
         'prefs/get':                     jest.fn(),
       },
     },
@@ -22,17 +30,117 @@ describe('component: DashboardView', () => {
 
   const commonComputed = {
     globalPolicies:     () => [],
-    namespacedPolicies: () => []
+    namespacedPolicies: () => [],
+    allPolicyServers:   () => [],
+    policyServerCounts: () => ({
+      status: {
+        running: 0, stopped: 0, pending: 0
+      },
+      total: 0
+    }),
   };
 
+  const commonStubs = { 'router-link': { template: '<span />' } };
+
   const createWrapper = (overrides) => {
-    return shallowMount(DashboardView, {
+    return mount(DashboardView, {
       mocks:    commonMocks,
       computed: commonComputed,
+      stubs:    commonStubs,
       ...overrides,
     });
   };
 
+  it('renders the Masthead component', () => {
+    const wrapper = createWrapper({});
+
+    expect(wrapper.findComponent(Masthead).exists()).toBe(true);
+  });
+
+  it('renders the Loading component when fetch state is pending', () => {
+    const wrapper = createWrapper({
+      mocks: {
+        ...commonMocks,
+        $fetchState: { pending: true },
+      },
+    });
+
+    expect(wrapper.findComponent(Loading).exists()).toBe(true);
+  });
+
+  it('renders the correct number of Card components based on DASHBOARD_HEADERS', () => {
+    const wrapper = createWrapper({});
+    const cardComponents = wrapper.findAllComponents(Card);
+
+    expect(cardComponents.length).toBe(DASHBOARD_HEADERS.length);
+  });
+
+  it('renders ConsumptionGauge component with correct props', () => {
+    const wrapper = createWrapper({
+      computed: {
+        globalPolicies:     () => [],
+        namespacedPolicies: () => [],
+        allPolicyServers:   () => [],
+        policyServerCounts: () => ({
+          status: {
+            running: 1, stopped: 0, pending: 0
+          },
+          total: 2
+        })
+      }
+    });
+
+    const gauge = wrapper.findComponent(ConsumptionGauge);
+
+    expect(gauge.exists()).toBe(true);
+    expect(gauge.props('capacity')).toBe(2);
+    expect(gauge.props('used')).toBe(1);
+    expect(gauge.props('colorStops')).toEqual({
+      25: '--error', 50: '--warning', 70: '--info'
+    });
+  });
+
+  it('correctly applies class names based on policy server counts', () => {
+    const wrapper = createWrapper({
+      computed: {
+        globalPolicies:     () => [],
+        namespacedPolicies: () => [],
+        allPolicyServers:   () => [{}, {}]
+      }
+    });
+
+    const btn = wrapper.find('.role-secondary');
+
+    expect(btn.exists()).toBe(true);
+  });
+
+  it('renders EventsGauge component when namespacedPolicies are present', () => {
+    const wrapper = createWrapper({
+      computed: {
+        globalPolicies:     () => [],
+        namespacedPolicies: () => [{}, {}],
+        allPolicyServers:   () => []
+      }
+    });
+
+    const eventsGauge = wrapper.findComponent(EventsGauge);
+
+    expect(eventsGauge.exists()).toBe(true);
+  });
+
+  it('renders Events and Modes components for namespaced policies', () => {
+    const wrapper = createWrapper({
+      computed: {
+        globalPolicies:     () => [],
+        namespacedPolicies: () => [{}, {}],
+        allPolicyServers:   () => []
+      }
+    });
+
+    expect(wrapper.findComponent(Events).exists()).toBe(true);
+    expect(wrapper.findComponent(Modes).exists()).toBe(true);
+  });
+
   it('renders correct gauge info of policy servers', () => {
     const pods = [
       {
@@ -56,51 +164,55 @@ describe('component: DashboardView', () => {
     ];
 
     const wrapper = createWrapper({
-      computed: { policyServerPods: () => pods },
-      stubs:    { Masthead: { template: '<span />' } },
+      computed: {
+        globalPolicies:     () => [],
+        namespacedPolicies: () => [],
+        allPolicyServers:   () => [{}],
+        policyServerPods:   () => pods
+      },
+      stubs: { Masthead: { template: '<span />' } },
     });
 
-    const gauges = wrapper.findAllComponents(ConsumptionGauge);
+    const gauges = wrapper.findComponent(ConsumptionGauge);
 
-    expect(gauges.at(2).props().capacity).toStrictEqual(pods.length as Number);
-    expect(gauges.at(2).props().used).toStrictEqual(1 as Number);
+    expect(gauges.props().capacity).toStrictEqual(pods.length as Number);
+    expect(gauges.props().used).toStrictEqual(1 as Number);
   });
 
-  it('renders correct gauge info of admission policies', () => {
+  it('renders correct gauge info for admission policy events', () => {
     const policies = [
       {
-        status: {
-          policyStatus: 'active',
-          error:        false,
-        },
-        spec: { mode: 'protect' },
+        result: 'pass',
+        policy: 'namespaced-policy-1',
       },
       {
-        status: {
-          policyStatus: 'pending',
-          error:        false,
-        },
-        spec: { mode: 'protect' },
+        result: 'fail',
+        policy: 'namespaced-policy-2',
       },
       {
-        status: {
-          policyStatus: 'unschedulable',
-          error:        true,
-        },
-        spec: { mode: 'monitor' },
+        result: 'error',
+        policy: 'namespaced-policy-3',
       },
     ];
+    const summary = {
+      status: {
+        error: 1, fail: 1, success: 1
+      },
+      total: 3
+    };
 
     const wrapper = createWrapper({
-      computed: { namespacedPolicies: () => policies },
-      stubs:    { Masthead: { template: '<span />' } }
+      computed: {
+        admissionPolicyResults: () => policies,
+        namespacedPolicies:     () => [],
+        globalPolicies:         () => [],
+        allPolicyServers:       () => [],
+      }
     });
 
-    const gauges = wrapper.findAllComponents(ConsumptionGauge);
+    const gauges = wrapper.findAllComponents(EventsGauge);
 
-    expect(gauges.at(0).props().capacity).toStrictEqual(
-      policies.length as Number
-    );
-    expect(gauges.at(0).props().used).toStrictEqual(1 as Number);
+    expect(gauges.at(0).exists()).toBe(true);
+    expect(gauges.at(0).props().events).toStrictEqual(summary);
   });
 });

From 571b1e4e1fe07148551ad31d4e1fb764fb286242 Mon Sep 17 00:00:00 2001
From: Jordon Leach <jordonleach@gmail.com>
Date: Thu, 15 Aug 2024 14:06:24 -0400
Subject: [PATCH 3/6] Update appVersionSatisfies

---
 pkg/kubewarden/components/Dashboard/Masthead.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/kubewarden/components/Dashboard/Masthead.vue b/pkg/kubewarden/components/Dashboard/Masthead.vue
index 9a264eaa..b072db2e 100644
--- a/pkg/kubewarden/components/Dashboard/Masthead.vue
+++ b/pkg/kubewarden/components/Dashboard/Masthead.vue
@@ -31,7 +31,7 @@ export default {
     ...mapGetters({ charts: 'catalog/charts' }),
 
     appVersionSatisfies() {
-      const satisfies = appVersionSatisfiesConstraint(this.$store, this.controllerAppVersion, this.defaultsAppVersion, '=');
+      const satisfies = appVersionSatisfiesConstraint(this.$store, this.controllerAppVersion, this.defaultsAppVersion, '<=');
 
       return satisfies || false;
     },

From fd761c52261485f85f3354353b2c9b24a9c27971 Mon Sep 17 00:00:00 2001
From: Jordon Leach <jordonleach@gmail.com>
Date: Fri, 8 Nov 2024 08:16:29 -0500
Subject: [PATCH 4/6] unify policy server active color with reports colors

---
 pkg/kubewarden/components/Dashboard/DashboardView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/kubewarden/components/Dashboard/DashboardView.vue b/pkg/kubewarden/components/Dashboard/DashboardView.vue
index d6df02a8..2623e443 100644
--- a/pkg/kubewarden/components/Dashboard/DashboardView.vue
+++ b/pkg/kubewarden/components/Dashboard/DashboardView.vue
@@ -56,7 +56,7 @@ export default {
 
   data() {
     const colorStops = {
-      25: '--error', 50: '--warning', 70: '--info'
+      25: '--error', 50: '--warning', 70: '--success'
     };
 
     return {

From cc6ef125ac0bb09a59c567029a58b8e8971655bd Mon Sep 17 00:00:00 2001
From: Jordon Leach <jordonleach@gmail.com>
Date: Fri, 8 Nov 2024 09:36:35 -0500
Subject: [PATCH 5/6] Add empty reports bar

---
 pkg/kubewarden/components/Dashboard/DashboardView.vue | 2 --
 pkg/kubewarden/components/Dashboard/ReportsGauge.vue  | 8 ++++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/pkg/kubewarden/components/Dashboard/DashboardView.vue b/pkg/kubewarden/components/Dashboard/DashboardView.vue
index 2623e443..0d2fdc5a 100644
--- a/pkg/kubewarden/components/Dashboard/DashboardView.vue
+++ b/pkg/kubewarden/components/Dashboard/DashboardView.vue
@@ -352,7 +352,6 @@ export default {
               <template v-if="showReports">
                 <Reports :gauges="namespacedResultsGauges" :show-reporter-link="showReporterLink" />
                 <ReportsGauge
-                  v-if="namespacedResultsGauges?.total !== 0"
                   data-testid="kw-dashboard-ap-gauge"
                   resource-name="Active"
                   :reports="namespacedResultsGauges"
@@ -366,7 +365,6 @@ export default {
               <template v-if="showReports">
                 <Reports :gauges="clusterResultsGauges" :show-reporter-link="showReporterLink" />
                 <ReportsGauge
-                  v-if="clusterResultsGauges?.total !== 0"
                   data-testid="kw-dashboard-cap-gauge"
                   resource-name="Active"
                   :reports="clusterResultsGauges"
diff --git a/pkg/kubewarden/components/Dashboard/ReportsGauge.vue b/pkg/kubewarden/components/Dashboard/ReportsGauge.vue
index 8acbb6d4..ec1d27e2 100644
--- a/pkg/kubewarden/components/Dashboard/ReportsGauge.vue
+++ b/pkg/kubewarden/components/Dashboard/ReportsGauge.vue
@@ -18,12 +18,16 @@ export default {
       }
 
       return (Math.round(this.reports?.status.success * 100) / this.reports.total).toFixed(0);
+    },
+
+    secondaryColor() {
+      return this.reports?.total === 0 ? '--default-text' : '--error';
     }
   },
 
   methods: {
     formattedPercentage(type) {
-      return `${ (Math.round(this.reports?.status[type] * 100) / this.reports.total).toFixed(0) }%`;
+      return `${ ((Math.round(this.reports?.status[type] * 100) / this.reports.total) || 0).toFixed(0) }%`;
     }
   }
 };
@@ -48,7 +52,7 @@ export default {
       <Bar
         :percentage="percentageBarValue"
         primary-color="--success"
-        secondary-color="--error"
+        :secondary-color="secondaryColor"
       />
     </div>
   </div>

From b8ed214d74966d00b71cf15c5e7ecf612ead041b Mon Sep 17 00:00:00 2001
From: Jordon Leach <jordonleach@gmail.com>
Date: Fri, 8 Nov 2024 11:36:28 -0500
Subject: [PATCH 6/6] Fix bar color

---
 pkg/kubewarden/components/Dashboard/ReportsGauge.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/kubewarden/components/Dashboard/ReportsGauge.vue b/pkg/kubewarden/components/Dashboard/ReportsGauge.vue
index ec1d27e2..89ba76c2 100644
--- a/pkg/kubewarden/components/Dashboard/ReportsGauge.vue
+++ b/pkg/kubewarden/components/Dashboard/ReportsGauge.vue
@@ -21,7 +21,7 @@ export default {
     },
 
     secondaryColor() {
-      return this.reports?.total === 0 ? '--default-text' : '--error';
+      return this.reports?.total === 0 ? '--border' : '--error';
     }
   },