From 5774ce3868346291491a12aaf767e519dabcabcd Mon Sep 17 00:00:00 2001
From: Frank Jogeleit <frank.jogeleit@lovoo.com>
Date: Sat, 23 Dec 2023 15:26:38 +0100
Subject: [PATCH] WIP

Signed-off-by: Frank Jogeleit <frank.jogeleit@lovoo.com>
---
 frontend/components/PageLayout.vue            |  38 ++++++
 frontend/layouts/default.vue                  |   3 +-
 frontend/modules/core/api.ts                  |  22 ++-
 .../core/components/CategoryTables.vue        |  31 ++---
 .../core/components/ResourceResultList.vue    |  33 ++++-
 .../core/components/ResourceScroller.vue      |   2 +-
 .../modules/core/components/ResultChip.vue    |   4 +-
 .../modules/core/components/ResultTable.vue   | 116 ++++++++--------
 .../modules/core/components/SourceStatus.vue  |  29 +---
 .../modules/core/components/SourcesStatus.vue |   4 +-
 .../components/chart/StatusPerNamespace.vue   |   4 +-
 .../modules/core/components/chip/Severity.vue |   2 +-
 .../core/components/form/KindAutocomplete.vue |  50 ++++---
 .../core/components/policy/ClusterResults.vue | 125 ++++++++++++++++++
 .../modules/core/components/policy/Item.vue   |  30 +++++
 .../modules/core/components/policy/List.vue   |  50 +++++++
 .../core/components/policy/Results.vue        | 123 +++++++++++++++++
 .../core/components/policy/SourceGroup.vue    |  38 ++++++
 .../core/components/policy/StatusCharts.vue   |  35 +++++
 frontend/modules/core/types.ts                |  14 ++
 frontend/pages/custom-boards/[id].vue         |  26 ++--
 frontend/pages/index.vue                      |  33 ++---
 frontend/pages/policies/[source]/[policy].vue |  57 ++++++++
 frontend/pages/policies/index.vue             |  32 +++++
 frontend/pages/source/[source]/[category].vue |  65 ++++-----
 frontend/pages/source/[source]/index.vue      |  48 ++++---
 frontend/plugins/02.vuetify.ts                |   9 +-
 27 files changed, 782 insertions(+), 241 deletions(-)
 create mode 100644 frontend/components/PageLayout.vue
 create mode 100644 frontend/modules/core/components/policy/ClusterResults.vue
 create mode 100644 frontend/modules/core/components/policy/Item.vue
 create mode 100644 frontend/modules/core/components/policy/List.vue
 create mode 100644 frontend/modules/core/components/policy/Results.vue
 create mode 100644 frontend/modules/core/components/policy/SourceGroup.vue
 create mode 100644 frontend/modules/core/components/policy/StatusCharts.vue
 create mode 100644 frontend/pages/policies/[source]/[policy].vue
 create mode 100644 frontend/pages/policies/index.vue

diff --git a/frontend/components/PageLayout.vue b/frontend/components/PageLayout.vue
new file mode 100644
index 0000000..5db886f
--- /dev/null
+++ b/frontend/components/PageLayout.vue
@@ -0,0 +1,38 @@
+<template>
+  <v-container fluid class="py-4 px-4 main-height">
+    <v-row>
+      <v-col>
+        <v-card>
+          <v-toolbar color="indigo-darken-4" elevation="2">
+            <v-toolbar-title>{{ title }}</v-toolbar-title>
+            <template #append>
+              <FormKindAutocomplete style="min-width: 300px; max-width: 100%; margin-right: 15px;" v-model="kinds" :source="source" />
+              <FormClusterKindAutocomplete v-if="!nsScoped" style="min-width: 300px;" v-model="clusterKinds" :source="source" />
+            </template>
+          </v-toolbar>
+        </v-card>
+      </v-col>
+    </v-row>
+    <slot />
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { ClusterKinds, NamespacedKinds } from "~/modules/core/provider/dashboard";
+
+const props = defineProps<{ title?: string; source?: string; nsScoped?: boolean; kinds?: string[]; clusterKinds?: string[] }>()
+
+const kinds = ref<string[]>(props.kinds ?? [])
+const clusterKinds = ref<string[]>(props.clusterKinds ?? [])
+
+provide(NamespacedKinds, kinds)
+provide(ClusterKinds, clusterKinds)
+
+const emit = defineEmits<{
+  'update:kinds': [kinds: string[]];
+  'update:clusterKinds': [kinds: string[]];
+}>()
+
+watch(kinds, (k) => emit('update:kinds', [...k]))
+watch(clusterKinds, (k) => emit('update:clusterKinds', [...k]))
+</script>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index b42622d..4325e95 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
   <v-layout>
     <v-app-bar elevation="1" prominent>
-      <v-app-bar-nav-icon color="white" icon="mdi-menu" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+      <v-app-bar-nav-icon icon="mdi-menu" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
       <v-toolbar-title>Policy Reporter</v-toolbar-title>
       <template #append>
         <cluster-select />
@@ -65,6 +65,7 @@ const { data: customBoards } = useAPI((api) => api.customBoards(), { default: ()
 
 const navigation = [
   { title: 'Dashboard', path: '/', exact: true },
+  { title: 'Policies', path: '/policies', exact: true },
 ];
 
 const boards = computed(() => (customBoards.value || []).map(b => ({
diff --git a/frontend/modules/core/api.ts b/frontend/modules/core/api.ts
index 3d7dcf1..d1b13ab 100644
--- a/frontend/modules/core/api.ts
+++ b/frontend/modules/core/api.ts
@@ -10,7 +10,13 @@ import {
   type Pagination,
   type FindingCounts,
   type ResourceResultList,
-  type ResourceResult, type ResourceStatusCount, type Resource, type Source, type CustomBoard, type CustomBoardDetails
+  type ResourceResult,
+  type ResourceStatusCount,
+  type Resource,
+  type Source,
+  type CustomBoard,
+  type CustomBoardDetails,
+  type PolicyResult
 } from './types'
 
 type APIConfig = { baseURL: string; prefix?: string; };
@@ -45,8 +51,8 @@ export class CoreAPI {
     return $fetch<string[]>('/proxy/'+this.cluster+'/core/v1/categories', { baseURL: this.baseURL, params: { sources: [source], kinds: kind ? [kind] : undefined } })
   }
 
-  namespaces (source?: string) {
-    return $fetch<string[]>('/proxy/'+this.cluster+'/core/v1/namespaces', { baseURL: this.baseURL, params: { sources: source ? [source] : undefined } })
+  namespaces (source?: string, filter?: Filter) {
+    return $fetch<string[]>('/proxy/'+this.cluster+'/core/v1/namespaces', { baseURL: this.baseURL, params: { ...filter, sources: source ? [source] : undefined } })
   }
 
   ruleStatusCount (policy: string, rule: string) {
@@ -126,11 +132,15 @@ export class CoreAPI {
   }
 
   results (id: string, pagination?: Pagination, filter?: Filter) {
-    return $fetch<ResultList>('/proxy/'+this.cluster+'/core/v1/results', { baseURL: this.baseURL, params: { id, ...pagination, filter } })
+    return $fetch<ResultList>('/proxy/'+this.cluster+'/core/v1/results', { baseURL: this.baseURL, params: { id, ...pagination, ...filter } })
   }
 
-  sources (id?: string) {
-    return $fetch<Source[]>('/proxy/'+this.cluster+'/core/v1/sources', { baseURL: this.baseURL, params: { id } })
+  sources (id?: string, filter?: Filter) {
+    return $fetch<Source[]>('/proxy/'+this.cluster+'/core/v1/sources', { baseURL: this.baseURL, params: { id, ...applyExcludes(filter, [...this.nsExcludes, ...this.clusterExcludes]) } })
+  }
+
+  policies (filter?: Filter) {
+    return $fetch<PolicyResult[]>('/proxy/'+this.cluster+'/core/v1/policies', { baseURL: this.baseURL, params: applyExcludes(filter, this.nsExcludes)})
   }
 
   customBoards () {
diff --git a/frontend/modules/core/components/CategoryTables.vue b/frontend/modules/core/components/CategoryTables.vue
index 3125ed0..7a3b732 100644
--- a/frontend/modules/core/components/CategoryTables.vue
+++ b/frontend/modules/core/components/CategoryTables.vue
@@ -2,29 +2,30 @@
   <v-row>
     <v-col cols="12">
       <v-card>
-        <v-card-title class="py-4">
-          <span class="text-h5">
-            {{ capilize(source.name) }}
-          </span>
-        </v-card-title>
+        <v-toolbar color="primary">
+          <v-toolbar-title>{{ capilize(source.name) }}</v-toolbar-title>
+          <template #append>
+            <CollapseBtn v-model="open" />
+          </template>
+        </v-toolbar>
+        <div v-show="open">
+          <v-divider />
+          <v-card-text>
+            <ChartStatusPerCategory :source="source" />
+          </v-card-text>
+          <result-table :source="source.name" :resource="resource.id" v-for="category in source.categories" :key="category.name" :category="category.name" />
+        </div>
       </v-card>
     </v-col>
   </v-row>
-  <v-row>
-    <v-col cols="12">
-      <v-card>
-        <v-card-text>
-          <ChartStatusPerCategory :source="source" />
-        </v-card-text>
-      </v-card>
-    </v-col>
-  </v-row>
-  <result-table :source="source.name" :resource="resource.id" v-for="category in source.categories" :key="category.name" :category="category.name" />
 </template>
 
 <script setup lang="ts">
 import { capilize } from "~/modules/core/layouthHelper";
 import type { Resource, Source } from "~/modules/core/types";
+import CollapseBtn from "~/components/CollapseBtn.vue";
+
+const open = ref(true)
 
 const props = defineProps<{
   source: Source;
diff --git a/frontend/modules/core/components/ResourceResultList.vue b/frontend/modules/core/components/ResourceResultList.vue
index 6bd1d54..7544837 100644
--- a/frontend/modules/core/components/ResourceResultList.vue
+++ b/frontend/modules/core/components/ResourceResultList.vue
@@ -8,9 +8,13 @@
           <CollapseBtn v-model="open" :disabled="!data.items.length" />
         </template>
       </v-toolbar>
-      <v-list v-if="data?.items?.length && open" lines="two">
+      <v-list v-if="data?.items?.length && open" lines="two" class="pt-0">
         <ResourceResultItem v-for="item in data.items" :key="item.id" :item="item" :details="details" :filter="filter" />
       </v-list>
+      <template v-if="data.count > options.offset">
+        <v-divider />
+        <v-pagination v-model="options.page" :length="length" class="my-4" />
+      </template>
       <template v-if="!pending && !(data.items.length)">
         <v-divider />
         <v-card-text>
@@ -23,7 +27,7 @@
 
 <script setup lang="ts">
 import CollapseBtn from "~/components/CollapseBtn.vue";
-import type { Filter } from "~/modules/core/types";
+import type { Filter, Pagination } from "~/modules/core/types";
 import type { Ref } from "vue";
 import { NamespacedKinds, ResourceFilter } from "~/modules/core/provider/dashboard";
 import { execOnChange } from "~/helper/compare";
@@ -46,12 +50,33 @@ const combinedFilter = computed(() => ({
   search: search.value,
 }))
 
+const options = reactive<Pagination>({
+  page: 1,
+  offset: 8,
+})
+
+const length = computed(() => {
+  return Math.ceil((data.value?.count || 0) / options.offset)
+})
+
 const { data, refresh, pending } = useAPI(
-    (api) => api.namespacedResourceResults(combinedFilter.value),
+    (api) => api.namespacedResourceResults(combinedFilter.value, options),
     {
       default: () => ({ items: [], count: 0 }),
     }
 );
 
-watch(combinedFilter, (n, o) => execOnChange(n, o, refresh))
+watch(combinedFilter, (o, n) =>
+    execOnChange(o, n, () => {
+      if (options.page !== 1) {
+        options.page = 1
+        return
+      }
+
+      refresh()
+    })
+)
+
+watch(options, () => refresh())
+
 </script>
diff --git a/frontend/modules/core/components/ResourceScroller.vue b/frontend/modules/core/components/ResourceScroller.vue
index 66b598b..7a9cf6d 100644
--- a/frontend/modules/core/components/ResourceScroller.vue
+++ b/frontend/modules/core/components/ResourceScroller.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-infinite-scroll :onLoad="load" class="no-scrollbar">
+  <v-infinite-scroll :onLoad="load" class="no-scrollbar" v-if="loaded.length">
     <template v-for="item in loaded" :key="item">
       <v-row>
         <v-col>
diff --git a/frontend/modules/core/components/ResultChip.vue b/frontend/modules/core/components/ResultChip.vue
index bbaf9c9..1fe88b8 100644
--- a/frontend/modules/core/components/ResultChip.vue
+++ b/frontend/modules/core/components/ResultChip.vue
@@ -1,6 +1,6 @@
 <template>
     <v-chip :prepend-icon="`mdi-${icons[status]}`" :color="mapStatus(status)" variant="flat">
-        <div class="text-right" style="min-width: 40px;">{{ count }}</div>
+        <div class="text-right" style="min-width: 40px;">{{ count || 0 }}</div>
         <v-tooltip :text="tooltip" location="top" activator="parent" />
     </v-chip>
 </template>
@@ -11,7 +11,7 @@ import { mapStatus } from '../mapper'
 
 defineProps<{
   status: string;
-  count: number;
+  count?: number;
   tooltip: string;
 }>()
 
diff --git a/frontend/modules/core/components/ResultTable.vue b/frontend/modules/core/components/ResultTable.vue
index 18c6eb3..74eb0e1 100644
--- a/frontend/modules/core/components/ResultTable.vue
+++ b/frontend/modules/core/components/ResultTable.vue
@@ -1,63 +1,61 @@
 <template>
-  <v-row v-if="data.count > 0 || !!searchText">
-    <v-col cols="12">
-      <v-card>
-        <template #title>
-          <span v-if="category">{{ category }}</span>
-          <span v-else>Results for {{ capilize(source) }}</span>
-        </template>
-        <template #append>
-          <search v-model="searchText" class="mr-4" style="min-width: 400px; float: left; height: 48px;" />
-          <v-btn :icon="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" @click="open = !open" variant="text" />
-        </template>
-        <v-expand-transition>
-          <div v-show="open">
-            <v-divider />
-            <v-data-table-server
-              :items="results.results"
-              :items-length="results.count"
-              :headers="headers"
-              item-value="id"
-              show-expand
-              v-model:items-per-page="options.itemsPerPage"
-              v-model:page="options.page"
-            >
-              <template #item.status="{ value }">
-                <chip-status @click="searchText = value" :status="value" />
-              </template>
-              <template #item.severity="{ value }">
-                <chip-severity v-if="value" @click="searchText = value" :severity="value" />
-              </template>
-              <template #expanded-row="{ columns, item }">
-                <tr class="table-expand-text">
-                  <td :colspan="columns.length" class="py-3">
-                    <div v-if="item.hasProps">
-                      <v-card v-if="item.message" variant="flat">
-                        <v-alert type="info" variant="flat">
-                          {{ item.message }}
-                        </v-alert>
-                      </v-card>
-                      <div>
-                        <template v-for="(value, label) in item.chips"  :key="label">
-                          <property-chip :label="label as string" :value="value" class="mr-2 mt-2 rounded-xl" />
-                        </template>
-                        <template v-for="(value, label) in item.cards"  :key="label">
-                          <property-card :label="label as string" :value="value" class="mt-2" />
-                        </template>
-                      </div>
-                    </div>
-                    <div v-else>
+  <div v-if="data.count > 0 || !!searchText">
+    <v-toolbar color="secondary">
+      <template #title>
+        <span v-if="category">{{ category }}</span>
+        <span v-else>Results for {{ capilize(source) }}</span>
+      </template>
+      <template #append>
+        <search v-model="searchText" class="mr-4" style="min-width: 400px; float: left;" />
+        <v-btn :icon="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" @click="open = !open" variant="text" />
+      </template>
+    </v-toolbar>
+    <v-expand-transition>
+      <div v-show="open">
+        <v-divider />
+        <v-data-table-server
+          :items="results.results"
+          :items-length="results.count"
+          :headers="headers"
+          item-value="id"
+          show-expand
+          v-model:items-per-page="options.itemsPerPage"
+          v-model:page="options.page"
+        >
+          <template #item.status="{ value }">
+            <chip-status @click="searchText = value" :status="value" />
+          </template>
+          <template #item.severity="{ value }">
+            <chip-severity v-if="value" @click="searchText = value" :severity="value" />
+          </template>
+          <template #expanded-row="{ columns, item }">
+            <tr class="table-expand-text">
+              <td :colspan="columns.length" class="py-3">
+                <div v-if="item.hasProps">
+                  <v-card v-if="item.message" variant="flat">
+                    <v-alert type="info" variant="flat">
                       {{ item.message }}
-                    </div>
-                  </td>
-                </tr>
-              </template>
-            </v-data-table-server>
-          </div>
-        </v-expand-transition>
-      </v-card>
-    </v-col>
-  </v-row>
+                    </v-alert>
+                  </v-card>
+                  <div>
+                    <template v-for="(value, label) in item.chips"  :key="label">
+                      <property-chip :label="label as string" :value="value" class="mr-2 mt-2 rounded-xl" />
+                    </template>
+                    <template v-for="(value, label) in item.cards"  :key="label">
+                      <property-card :label="label as string" :value="value" class="mt-2" />
+                    </template>
+                  </div>
+                </div>
+                <div v-else>
+                  {{ item.message }}
+                </div>
+              </td>
+            </tr>
+          </template>
+        </v-data-table-server>
+      </div>
+    </v-expand-transition>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -93,7 +91,7 @@ const { data, refresh } = useAPI(
     }, {
       sources: props.source ? [props.source] : undefined,
       categories: props.category ? [props.category] : undefined,
-      search: searchText.value,
+      search: !!searchText.value ? searchText.value : undefined,
     }),
     {
       default: () => ({ items: [], count: 0 }),
diff --git a/frontend/modules/core/components/SourceStatus.vue b/frontend/modules/core/components/SourceStatus.vue
index c0e55ac..8dfd1f6 100644
--- a/frontend/modules/core/components/SourceStatus.vue
+++ b/frontend/modules/core/components/SourceStatus.vue
@@ -15,7 +15,7 @@
       </v-card>
     </v-col>
   </v-row>
-  <template v-if="statusCounts && !hideCluster">
+  <template v-if="!hideCluster">
     <v-row>
       <v-col>
         <v-card :title="`${capilize(source)} cluster scoped results`">
@@ -28,36 +28,9 @@
 
 <script setup lang="ts">
 import type { SourceFindings } from "~/modules/core/types";
-import { Status } from "~/modules/core/types";
 import { capilize } from "~/modules/core/layouthHelper";
 
 const props = defineProps<{ data: SourceFindings, hideCluster?: boolean; category?: string; }>();
 
 const source = computed(() => props.data.source)
-
-const { data: sc } = useAPI(
-    (api) => api.statusCount(), {
-      default: () => [
-        { status: Status.PASS, count: 0 },
-        { status: Status.WARN, count: 0 },
-        { status: Status.FAIL, count: 0 },
-        { status: Status.ERROR, count: 0 },
-      ],
-    }
-);
-
-const statusCounts = computed<{ [status in Status]: number }>(() => {
-  return sc.value.reduce((acc, item) => {
-    if (item.status === Status.SKIP) return acc;
-
-    acc[item.status] = item.count
-
-    return acc
-  }, {
-    [Status.PASS]: 0,
-    [Status.WARN]: 0,
-    [Status.FAIL]: 0,
-    [Status.ERROR]: 0,
-  })
-})
 </script>
diff --git a/frontend/modules/core/components/SourcesStatus.vue b/frontend/modules/core/components/SourcesStatus.vue
index c1f876b..8ee2e21 100644
--- a/frontend/modules/core/components/SourcesStatus.vue
+++ b/frontend/modules/core/components/SourcesStatus.vue
@@ -118,7 +118,7 @@ import { type Filter, type FindingCounts, Status } from '../types';
 import { capilize } from "~/modules/core/layouthHelper";
 import { clusterKinds, kinds } from "~/modules/core/store/filter";
 
-const props = defineProps<{ data: FindingCounts; filter?: Filter; hideCluster?: boolean }>();
+const props = defineProps<{ data?: FindingCounts; filter?: Filter; hideCluster?: boolean }>();
 
 const status1 = ref(Status.PASS);
 const status2 = ref(Status.FAIL);
@@ -135,7 +135,7 @@ const totals = ref(initTotals());
 const sources = ref<string[]>([]);
 
 watch(() => props.data, (findings: FindingCounts) => {
-  if (!findings) return;
+  if (!findings) { findings = { total: 0, counts: [] }}
 
   const results = initTotals();
 
diff --git a/frontend/modules/core/components/chart/StatusPerNamespace.vue b/frontend/modules/core/components/chart/StatusPerNamespace.vue
index 99e4631..61617dc 100644
--- a/frontend/modules/core/components/chart/StatusPerNamespace.vue
+++ b/frontend/modules/core/components/chart/StatusPerNamespace.vue
@@ -10,7 +10,7 @@ import { mapStatus } from '../../mapper'
 import { NamespacedKinds, ResourceFilter } from "~/modules/core/provider/dashboard";
 import type { Ref } from "vue";
 
-const props = defineProps<{ source: string }>()
+const props = defineProps<{ title?: string; source: string }>()
 
 const filter = inject<Ref<Filter>>(ResourceFilter, ref<Filter>({}))
 const kinds = inject<Ref<string[]>>(NamespacedKinds, ref<string[]>([]))
@@ -85,7 +85,7 @@ const chart = computed(() => {
       plugins: {
         title: {
           display: true,
-          text: `${capilize(props.source)} Results per Namespace`
+          text: `${props.title ?? capilize(props.source)} Results per Namespace`
         },
         legend: {
           display: true,
diff --git a/frontend/modules/core/components/chip/Severity.vue b/frontend/modules/core/components/chip/Severity.vue
index cf62737..e885c72 100644
--- a/frontend/modules/core/components/chip/Severity.vue
+++ b/frontend/modules/core/components/chip/Severity.vue
@@ -9,7 +9,7 @@ import type { PropType } from "vue";
 import { Severity, Status } from "~/modules/core/types";
 
 const props = defineProps({
-  severity: { type: String as PropType<Status>, default: null },
+  severity: { type: String as PropType<string>, default: null },
 })
 
 const color = computed(() => {
diff --git a/frontend/modules/core/components/form/KindAutocomplete.vue b/frontend/modules/core/components/form/KindAutocomplete.vue
index f694898..adaaf88 100644
--- a/frontend/modules/core/components/form/KindAutocomplete.vue
+++ b/frontend/modules/core/components/form/KindAutocomplete.vue
@@ -1,16 +1,16 @@
 <template>
   <v-autocomplete
-    multiple
-    clearable
-    density="compact"
-    :items="items as string[]"
-    variant="outlined"
-    hide-details
-    label="Kinds"
-    closable-chips
-    :model-value="selected"
-    @update:model-value="input"
-    v-bind="$attrs"
+      multiple
+      clearable
+      density="compact"
+      :items="items as string[]"
+      variant="outlined"
+      hide-details
+      label="Kinds"
+      closable-chips
+      :model-value="selected"
+      @update:model-value="input"
+      v-bind="$attrs"
   >
     <template v-slot:selection="{ item, index }">
       <v-chip v-if="index < 2">
@@ -24,25 +24,21 @@
 </template>
 
 <script lang="ts" setup>
-import { kinds } from "~/modules/core/store/filter";
+const props = defineProps<{ source?: string; modelValue: string[] }>();
 
-const props = defineProps({
-  source: { type: String, default: undefined },
-});
-
-const selected = ref<string[]>(kinds.value);
+const selected = ref<string[]>(props.modelValue);
 const loading = ref<boolean>(true);
 
 const { data: items } = useAPI(
-  ($coreAPI) => {
-    return $coreAPI.namespacedKinds(props.source)
-  },
-  {
-    default: () => [],
-    finally: () => {
-      loading.value = false;
+    ($coreAPI) => {
+      return $coreAPI.namespacedKinds(props.source)
     },
-  }
+    {
+      default: () => [],
+      finally: () => {
+        loading.value = false;
+      },
+    }
 );
 
 const input = defineRouteQuery('kinds', selected);
@@ -51,7 +47,9 @@ watch(items, (current) => {
   input(selected.value.filter((s) => current.includes(s)));
 });
 
+const emit = defineEmits<{ 'update:modelValue': [kinds: string[]] }>()
+
 watch(selected, (current) => {
-  kinds.value = current as string[]
+  emit('update:modelValue', current)
 });
 </script>
diff --git a/frontend/modules/core/components/policy/ClusterResults.vue b/frontend/modules/core/components/policy/ClusterResults.vue
new file mode 100644
index 0000000..39fa807
--- /dev/null
+++ b/frontend/modules/core/components/policy/ClusterResults.vue
@@ -0,0 +1,125 @@
+<template>
+  <v-row v-if="data.count > 0 || !!searchText">
+    <v-col>
+      <v-card>
+        <v-toolbar color="transparent">
+          <template #title>
+            <span>Cluster Scoped Results</span>
+          </template>
+          <template #append>
+            <search v-model="searchText" class="mr-4" style="min-width: 400px; float: left;" />
+            <v-btn :icon="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" @click="open = !open" variant="text" />
+          </template>
+        </v-toolbar>
+        <v-expand-transition>
+          <div v-show="open">
+            <v-divider />
+            <v-data-table-server
+              :items="results.results"
+              :items-length="results.count"
+              :headers="headers"
+              item-value="id"
+              show-expand
+              v-model:items-per-page="options.itemsPerPage"
+              v-model:page="options.page"
+            >
+              <template #item.status="{ value }">
+                <chip-status @click="searchText = value" :status="value" />
+              </template>
+              <template #item.severity="{ value }">
+                <chip-severity v-if="value" @click="searchText = value" :severity="value" />
+              </template>
+              <template #expanded-row="{ columns, item }">
+                <tr class="table-expand-text">
+                  <td :colspan="columns.length" class="py-3">
+                    <div v-if="item.hasProps">
+                      <v-card v-if="item.message" variant="flat">
+                        <v-alert type="info" variant="flat">
+                          {{ item.message }}
+                        </v-alert>
+                      </v-card>
+                      <div>
+                        <template v-for="(value, label) in item.chips"  :key="label">
+                          <property-chip :label="label as string" :value="value" class="mr-2 mt-2 rounded-xl" />
+                        </template>
+                        <template v-for="(value, label) in item.cards"  :key="label">
+                          <property-card :label="label as string" :value="value" class="mt-2" />
+                        </template>
+                      </div>
+                    </div>
+                    <div v-else>
+                      {{ item.message }}
+                    </div>
+                  </td>
+                </tr>
+              </template>
+              <template #bottom v-if="results.count <= options.itemsPerPage"></template>
+            </v-data-table-server>
+          </div>
+        </v-expand-transition>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts" setup>
+import { mapResults } from "~/modules/core/mapper";
+
+const props = defineProps<{
+  source: string;
+  policy: string;
+}>()
+
+const options = reactive({
+  itemsPerPage: 10,
+  page: 1,
+  sortDesc: [],
+  sortBy: [],
+  groupBy: [],
+  groupDesc: [],
+  multiSort: false,
+  mustSort: false
+})
+
+const open = ref(true)
+const searchText = ref('')
+
+const { data, refresh } = useAPI(
+    (api) => api.clusterResults({
+      sources: props.source ? [props.source] : undefined,
+      policies: [props.policy],
+      search: searchText.value ? searchText.value : undefined,
+    }, {
+      page: options.page,
+      offset: options.itemsPerPage,
+    }),
+    {
+      default: () => ({ items: [], count: 0 }),
+    }
+);
+
+watch(() => options.page, () => refresh())
+watch(() => options.itemsPerPage, () => refresh())
+watch(searchText, () => refresh())
+
+const results = computed(() => mapResults(data.value))
+
+const headers = [
+  { title: 'APIVersion', key: 'apiVersion', width: '10%' },
+  { title: 'Kind', key: 'kind', width: '16%' },
+  { title: 'Name', key: 'name', width: '25%' },
+  { title: 'Rule', key: 'rule', width: '25%' },
+  { title: 'Severity', key: 'severity', width: '12%' },
+  { title: 'Status', key: 'status', width: '12%' }
+]
+</script>
+
+<style>
+.table-expand-text {
+  background-color: #f5f5f5;
+
+  &:hover {
+    background-color: #f5f5f5 !important;
+  }
+}
+</style>
diff --git a/frontend/modules/core/components/policy/Item.vue b/frontend/modules/core/components/policy/Item.vue
new file mode 100644
index 0000000..c9a93c5
--- /dev/null
+++ b/frontend/modules/core/components/policy/Item.vue
@@ -0,0 +1,30 @@
+<template>
+  <v-divider />
+  <v-list-item :to="{ name: 'policies-source-policy', params: { source: item.source, policy: item.policy } }">
+    <template v-if="details" v-slot:prepend>
+      <v-btn class="mr-2" variant="text" :icon="!open ? `mdi-chevron-up` : `mdi-chevron-down`" @click.stop.prevent="open = !open"></v-btn>
+    </template>
+    <v-list-item-title>
+      {{ item.policy }}
+    </v-list-item-title>
+    <template v-slot:append>
+      <ResultChip :status="Status.PASS" :count="item.results.pass" tooltip="pass results" />
+      <ResultChip class="ml-2" :status="Status.WARN" :count="item.results.warn" tooltip="warning results" />
+      <ResultChip class="ml-2" :status="Status.FAIL" :count="item.results.fail" tooltip="fail results" />
+      <ResultChip class="ml-2" :status="Status.ERROR" :count="item.results.error" tooltip="error results" />
+    </template>
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+import { type PropType } from "vue";
+import { type PolicyResult, type Filter, Status } from "~/modules/core/types";
+
+const open = ref(false)
+
+const props = defineProps({
+  item: { type: Object as PropType<PolicyResult>, required: true },
+  details: { type: Boolean, default: false },
+  filter: { type: Object as PropType<Filter>, required: false },
+})
+</script>
diff --git a/frontend/modules/core/components/policy/List.vue b/frontend/modules/core/components/policy/List.vue
new file mode 100644
index 0000000..e0332ef
--- /dev/null
+++ b/frontend/modules/core/components/policy/List.vue
@@ -0,0 +1,50 @@
+<template>
+  <wait>
+      <v-toolbar class="my-0" color="secondary">
+        <v-toolbar-title class="text-subtitle-1 font-weight-bold">{{ category }}</v-toolbar-title>
+        <template #append>
+          <Search class="mr-2" v-model="search" style="min-width: 300px;" />
+          <CollapseBtn v-model="open" :disabled="!data.length" />
+        </template>
+      </v-toolbar>
+      <v-list v-if="data?.length && open" lines="two" class="mt-0 pt-0">
+        <PolicyItem v-for="item in data" :key="item.policy" :item="item" :details="false" />
+      </v-list>
+      <template v-if="!pending && !(data?.length)">
+        <v-divider />
+        <v-card-text>
+          No policies for the selected kinds found
+        </v-card-text>
+      </template>
+  </wait>
+</template>
+
+<script setup lang="ts">
+import type { Ref } from "vue";
+import CollapseBtn from "~/components/CollapseBtn.vue";
+import type { Filter } from "~/modules/core/types";
+import { NamespacedKinds, ResourceFilter } from "~/modules/core/provider/dashboard";
+import { execOnChange } from "~/helper/compare";
+
+const props = defineProps<{ category: string; }>()
+
+const search = ref('')
+const open = ref(true)
+
+const filter = inject<Ref<Filter>>(ResourceFilter, ref<Filter>({}))
+const kinds = inject<Ref<string[]>>(NamespacedKinds, ref<string[]>([]))
+
+const combinedFilter = computed(() => ({
+  ...filter.value,
+  categories: [props.category as string],
+  kinds: kinds.value.length ? kinds.value : undefined,
+  search: search.value,
+}))
+
+const { data, refresh, pending } = useAPI(
+    (api) => api.policies(combinedFilter.value),
+    { default: () => ([]) }
+);
+
+watch(combinedFilter, (o, n) => console.log(o,n) || execOnChange(o, n, () => refresh()))
+</script>
diff --git a/frontend/modules/core/components/policy/Results.vue b/frontend/modules/core/components/policy/Results.vue
new file mode 100644
index 0000000..a2ca90b
--- /dev/null
+++ b/frontend/modules/core/components/policy/Results.vue
@@ -0,0 +1,123 @@
+<template>
+  <v-card v-if="data.count > 0 || !!searchText">
+    <v-toolbar color="transparent">
+      <template #title>
+        <span>{{ namespace }}</span>
+      </template>
+      <template #append>
+        <search v-model="searchText" class="mr-4" style="min-width: 400px; float: left;" />
+        <v-btn :icon="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" @click="open = !open" variant="text" />
+      </template>
+    </v-toolbar>
+    <v-expand-transition>
+      <div v-show="open">
+        <v-divider />
+        <v-data-table-server
+          :items="results.results"
+          :items-length="results.count"
+          :headers="headers"
+          item-value="id"
+          show-expand
+          v-model:items-per-page="options.itemsPerPage"
+          v-model:page="options.page"
+        >
+          <template #item.status="{ value }">
+            <chip-status @click="searchText = value" :status="value" />
+          </template>
+          <template #item.severity="{ value }">
+            <chip-severity v-if="value" @click="searchText = value" :severity="value" />
+          </template>
+          <template #expanded-row="{ columns, item }">
+            <tr class="table-expand-text">
+              <td :colspan="columns.length" class="py-3">
+                <div v-if="item.hasProps">
+                  <v-card v-if="item.message" variant="flat">
+                    <v-alert type="info" variant="flat">
+                      {{ item.message }}
+                    </v-alert>
+                  </v-card>
+                  <div>
+                    <template v-for="(value, label) in item.chips"  :key="label">
+                      <property-chip :label="label as string" :value="value" class="mr-2 mt-2 rounded-xl" />
+                    </template>
+                    <template v-for="(value, label) in item.cards"  :key="label">
+                      <property-card :label="label as string" :value="value" class="mt-2" />
+                    </template>
+                  </div>
+                </div>
+                <div v-else>
+                  {{ item.message }}
+                </div>
+              </td>
+            </tr>
+          </template>
+          <template #bottom v-if="results.count <= options.itemsPerPage"></template>
+        </v-data-table-server>
+      </div>
+    </v-expand-transition>
+  </v-card>
+</template>
+
+<script lang="ts" setup>
+import { mapResults } from "~/modules/core/mapper";
+
+const props = defineProps<{
+  source: string;
+  namespace: string;
+  policy: string;
+}>()
+
+const options = reactive({
+  itemsPerPage: 10,
+  page: 1,
+  sortDesc: [],
+  sortBy: [],
+  groupBy: [],
+  groupDesc: [],
+  multiSort: false,
+  mustSort: false
+})
+
+const open = ref(true)
+const searchText = ref('')
+
+const { data, refresh } = useAPI(
+    (api) => api.namespacedResults({
+      sources: props.source ? [props.source] : undefined,
+      policies: [props.policy],
+      namespaces: [props.namespace],
+      search: searchText.value ? searchText.value : undefined,
+    }, {
+      page: options.page,
+      offset: options.itemsPerPage,
+    }),
+    {
+      default: () => ({ items: [], count: 0 }),
+    }
+);
+
+watch(() => options.page, () => refresh())
+watch(() => options.itemsPerPage, () => refresh())
+watch(searchText, () => refresh())
+
+const results = computed(() => mapResults(data.value))
+
+const headers = [
+  { title: 'APIVersion', key: 'apiVersion', width: '10%' },
+  { title: 'Kind', key: 'kind', width: '16%' },
+  { title: 'Name', key: 'name', width: '25%' },
+  { title: 'Rule', key: 'rule', width: '25%' },
+  { title: 'Severity', key: 'severity', width: '12%' },
+  { title: 'Status', key: 'status', width: '12%' }
+]
+</script>
+
+<style>
+.table-expand-text {
+  background-color: #f5f5f5;
+
+  &:hover {
+    background-color: #f5f5f5 !important;
+  }
+}
+</style>
diff --git a/frontend/modules/core/components/policy/SourceGroup.vue b/frontend/modules/core/components/policy/SourceGroup.vue
new file mode 100644
index 0000000..8ad4fa5
--- /dev/null
+++ b/frontend/modules/core/components/policy/SourceGroup.vue
@@ -0,0 +1,38 @@
+<template>
+  <v-row>
+    <v-col cols="12">
+      <v-card>
+        <v-toolbar color="primary">
+          <v-toolbar-title>{{ capilize(source.name) }}</v-toolbar-title>
+          <template #append>
+            <CollapseBtn v-model="open" />
+          </template>
+        </v-toolbar>
+        <div v-show="open">
+          <v-divider />
+          <v-card-text>
+            <ChartStatusPerCategory :source="source" />
+          </v-card-text>
+          <template  v-for="category in source.categories" :key="category.name">
+            <v-divider />
+            <policy-list :category="category.name" />
+          </template>
+        </div>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import { capilize } from "~/modules/core/layouthHelper";
+import { ResourceFilter } from "~/modules/core/provider/dashboard";
+import type { Source } from "~/modules/core/types";
+import CollapseBtn from "~/components/CollapseBtn.vue";
+
+const props = defineProps<{ source: Source; }>();
+
+const open = ref(true)
+
+provide(ResourceFilter, ref({ sources: [props.source.name]}))
+
+</script>
diff --git a/frontend/modules/core/components/policy/StatusCharts.vue b/frontend/modules/core/components/policy/StatusCharts.vue
new file mode 100644
index 0000000..9d30e0d
--- /dev/null
+++ b/frontend/modules/core/components/policy/StatusCharts.vue
@@ -0,0 +1,35 @@
+<template v-if="data">
+  <v-row>
+    <v-col cols="12" md="4">
+      <v-card>
+        <v-card-text>
+          <ChartStatusDistribution :findings="data" :title="policy" />
+        </v-card-text>
+      </v-card>
+    </v-col>
+    <v-col cols="12" md="8" v-if="source">
+      <v-card style="height: 100%">
+        <v-card-text style="height: 100%">
+          <ChartStatusPerNamespace :title="policy" :source="source" :key="source" />
+        </v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+  <template v-if="!hideCluster">
+    <v-row>
+      <v-col>
+        <v-card :title="`${policy} cluster scoped results`">
+          <ChartClusterResultCounts :source="source" />
+        </v-card>
+      </v-col>
+    </v-row>
+  </template>
+</template>
+
+<script setup lang="ts">
+import type { SourceFindings } from "~/modules/core/types";
+
+const props = defineProps<{ data: SourceFindings, hideCluster?: boolean; policy: string; }>();
+
+const source = computed(() => props.data.source)
+</script>
diff --git a/frontend/modules/core/types.ts b/frontend/modules/core/types.ts
index 96494af..8534361 100644
--- a/frontend/modules/core/types.ts
+++ b/frontend/modules/core/types.ts
@@ -64,6 +64,20 @@ export type Category = {
     skip: number;
 }
 
+export type PolicyResult = {
+    policy: string;
+    source: string;
+    category: string;
+    severity?: string;
+    results: {
+        pass?: number;
+        warn?: number;
+        fail?: number;
+        error?: number;
+        skip?: number;
+    };
+}
+
 export type CustomBoard = {
     name: string;
     id: string;
diff --git a/frontend/pages/custom-boards/[id].vue b/frontend/pages/custom-boards/[id].vue
index 6f0a453..0ea046f 100644
--- a/frontend/pages/custom-boards/[id].vue
+++ b/frontend/pages/custom-boards/[id].vue
@@ -1,22 +1,17 @@
 <template>
-  <v-container fluid v-if="data.counts.length" class="py-4 px-4 main-height">
-    <v-row>
-      <v-col>
-        <v-toolbar color="indigo" elevation="2" rounded>
-          <template #append>
-            <FormKindAutocomplete v-model="kinds" style="min-width: 300px; max-width: 100%; margin-left: 15px;" />
-          </template>
-        </v-toolbar>
-      </v-col>
-    </v-row>
+  <page-layout v-model:kinds="kinds"
+               :title="details.name"
+               :source="sources.length > 1 ? undefined : sources[0]"
+               ns-scoped
+  >
     <SourcesStatus v-if="sources.length > 1" :hide-cluster="true" :data="data as FindingCounts" />
-    <SourceStatus v-if="sources.length === 1" :hide-cluster="true" :data="data.counts[0]" />
+    <SourceStatus v-if="sources.length === 1" :hide-cluster="true" :data="findings" />
     <resource-scroller v-if="details" :list="namespaces">
       <template #default="{ item }">
         <LazyResourceResultList :namespace="item" :details="sources.length > 1" :filter="filter" />
       </template>
     </resource-scroller>
-  </v-container>
+  </page-layout>
 </template>
 
 <script setup lang="ts">
@@ -64,6 +59,11 @@ const { data, refresh } = useAPI((api) => api.countFindings(filter.value), { def
 
 watch(filter, () => refresh())
 
+const findings = computed(() => {
+  if (data.value?.counts?.length) return data.value.counts[0];
+
+  return { source: sources[0], counts: {}, total: 0 }
+})
+
 provide(ResourceFilter, filter)
-provide(NamespacedKinds, kinds)
 </script>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index aef5865..52bf875 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,17 +1,9 @@
 <template>
-  <v-container v-if="data.counts.length" fluid class="py-4 px-4 main-height">
-    <v-row>
-      <v-col>
-        <v-toolbar color="indigo" elevation="2" rounded>
-          <template #append>
-            <FormKindAutocomplete style="min-width: 300px; max-width: 100%; margin-right: 15px;" v-model="kinds" />
-            <FormClusterKindAutocomplete style="min-width: 300px;" v-model="clusterKinds" />
-          </template>
-        </v-toolbar>
-      </v-col>
-    </v-row>
+  <page-layout v-model:kinds="kinds"
+               v-model:cluster-kinds="clusterKinds"
+  >
     <SourcesStatus v-if="sources.length > 1" :data="data as FindingCounts" />
-    <SourceStatus v-if="sources.length === 1" :data="data.counts[0]" />
+    <SourceStatus v-if="sources.length === 1" :data="findings" />
     <v-row>
       <v-col>
         <LazyClusterResourceResultList :details="sources.length > 1" />
@@ -22,32 +14,35 @@
         <LazyResourceResultList :namespace="item" :details="sources.length > 1" />
       </template>
     </resource-scroller>
-  </v-container>
+  </page-layout>
 </template>
 
 <script setup lang="ts">
 import { callAPI, useAPI } from '~/modules/core/composables/api'
 import { type FindingCounts } from "~/modules/core/types";
 import ResourceScroller from "~/modules/core/components/ResourceScroller.vue";
-import { ClusterKinds, NamespacedKinds } from "~/modules/core/provider/dashboard";
 import { execOnChange } from "~/helper/compare";
 
+const kinds = ref<string[]>([])
+const clusterKinds = ref<string[]>([])
+
 const [sources, namespaces] = await Promise.all([
   callAPI((api) => api.sources().then((source) => source.map(s => s.name))),
   callAPI((api) => api.namespaces())
 ])
 
-const kinds = ref<string[]>([])
-const clusterKinds = ref<string[]>([])
-
 const filter = computed(() => ({ kinds: [...kinds.value, ...clusterKinds.value] }))
 
 const { data, refresh } = useAPI((api) => api.countFindings(filter.value), {
   default: () => ({ total: 0, counts: [] })
 });
 
+const findings = computed(() => {
+  if (data.value?.counts?.length) return data.value.counts[0];
+
+  return { source: sources[0], counts: {}, total: 0 }
+})
+
 watch(filter, (n, o) => execOnChange(n, o, refresh))
 
-provide(NamespacedKinds, kinds)
-provide(ClusterKinds, clusterKinds)
 </script>
diff --git a/frontend/pages/policies/[source]/[policy].vue b/frontend/pages/policies/[source]/[policy].vue
new file mode 100644
index 0000000..954e234
--- /dev/null
+++ b/frontend/pages/policies/[source]/[policy].vue
@@ -0,0 +1,57 @@
+<template>
+  <v-container fluid class="py-4 px-4 main-height" :key="route.params.id" v-if="data">
+    <v-row>
+      <v-col>
+        <v-card elevation="2" rounded>
+          <v-toolbar color="indigo-darken-4">
+            <v-toolbar-title>
+              {{ route.params.source }}: {{ route.params.policy }}
+            </v-toolbar-title>
+            <template #append>
+              <v-btn variant="text" color="white" prepend-icon="mdi-arrow-left" @click="router.back()">back</v-btn>
+            </template>
+          </v-toolbar>
+        </v-card>
+      </v-col>
+    </v-row>
+    <policy-status-charts v-if="findings?.counts?.length" :data="findings.counts[0]" :policy="route.params.policy" />
+    <policy-cluster-results :source="route.params.source" :policy="route.params.policy" />
+    <resource-scroller :list="data" v-if="data.length">
+      <template #default="{ item }">
+        <v-row>
+          <v-col>
+            <policy-results :namespace="item" :source="route.params.source" :policy="route.params.policy" />
+          </v-col>
+        </v-row>
+      </template>
+    </resource-scroller>
+  </v-container>
+</template>
+
+<script lang="ts" setup>
+import type { Filter } from "~/modules/core/types";
+import { execOnChange } from "~/helper/compare";
+import { useAPI } from "~/modules/core/composables/api";
+import { ResourceFilter } from "~/modules/core/provider/dashboard";
+
+const route = useRoute()
+const router = useRouter()
+
+const filter = computed<Filter>(() => ({
+  sources: [route.params.source],
+  policies: [route.params.policy],
+}))
+
+const { data: findings, refresh: findingRefresh } = useAPI((api) => api.countFindings(filter.value), {
+  default: () => ({ total: 0, counts: [] })
+});
+
+const { data, refresh } = useAPI((api) => api.namespaces(route.params.source as string, filter.value));
+
+watch(filter, (n, o) => execOnChange(n, o, () => {
+  refresh()
+  findingRefresh()
+}))
+
+provide(ResourceFilter, filter)
+</script>
diff --git a/frontend/pages/policies/index.vue b/frontend/pages/policies/index.vue
new file mode 100644
index 0000000..49a767e
--- /dev/null
+++ b/frontend/pages/policies/index.vue
@@ -0,0 +1,32 @@
+<template>
+  <page-layout v-if="sources?.length"
+               title="Policy Dashboard"
+               v-model:kinds="kinds"
+               v-model:cluster-kinds="clusterKinds"
+  >
+    <resource-scroller :list="sources">
+      <template #default="{ item }">
+        <policy-source-group :source="item" />
+      </template>
+    </resource-scroller>
+  </page-layout>
+</template>
+
+<script setup lang="ts">
+import { callAPI } from "~/modules/core/composables/api";
+import ResourceScroller from "~/modules/core/components/ResourceScroller.vue";
+import { ClusterKinds, NamespacedKinds } from "~/modules/core/provider/dashboard";
+import { execOnChange } from "~/helper/compare";
+
+const kinds = ref<string[]>([])
+const clusterKinds = ref<string[]>([])
+
+const filter = computed(() => ({ kinds: [...kinds.value, ...clusterKinds.value] }))
+
+const { data: sources, refresh } = useAPI(
+    (api) => api.sources(undefined, filter.value).then(s => s.sort((a, b) => a.name.localeCompare(b.name))),
+    { default: () => [] }
+)
+
+watch(filter, (a, b) => execOnChange(a, b, () => refresh()))
+</script>
diff --git a/frontend/pages/source/[source]/[category].vue b/frontend/pages/source/[source]/[category].vue
index 1abf921..72c533d 100644
--- a/frontend/pages/source/[source]/[category].vue
+++ b/frontend/pages/source/[source]/[category].vue
@@ -1,58 +1,51 @@
 <template>
-<v-container  v-if="data.counts.length" fluid class="py-4 px-4 main-height">
-  <v-row>
-    <v-col>
-      <v-toolbar color="indigo" elevation="2" rounded>
-        <v-toolbar-title>{{ capilize(route.params.source) }}: {{ route.params.category }}</v-toolbar-title>
-        <template #append>
-          <FormKindAutocomplete style="min-width: 300px; max-width: 100%; margin-right: 15px;" v-model="kinds" :source="route.params.source" />
-          <FormClusterKindAutocomplete style="min-width: 300px;" v-model="clusterKinds" :source="route.params.source" />
-        </template>
-      </v-toolbar>
-    </v-col>
-  </v-row>
-  <SourceStatus :data="data.counts[0]" :category="route.params.category" />
-  <v-row>
-    <v-col>
-      <LazyClusterResourceResultList :source="route.params.source" :details="false" />
-    </v-col>
-  </v-row>
-  <resource-scroller :list="namespaces">
-    <template #default="{ item }">
-      <LazyResourceResultList :namespace="item" :details="false" />
-    </template>
-  </resource-scroller>
-</v-container>
+  <page-layout v-if="data.counts.length"
+               v-model:kinds="kinds"
+               v-model:cluster-kinds="clusterKinds"
+               :source="route.params.source"
+               :title="`${capilize(route.params.source)}: ${ route.params.category }`"
+  >
+    <SourceStatus :category="route.params.category" :data="data.counts[0]"/>
+    <v-row>
+      <v-col>
+        <LazyClusterResourceResultList :details="false" :source="route.params.source"/>
+      </v-col>
+    </v-row>
+    <resource-scroller :list="namespaces">
+      <template #default="{ item }">
+        <LazyResourceResultList :details="false" :namespace="item"/>
+      </template>
+    </resource-scroller>
+  </page-layout>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { useAPI } from '~/modules/core/composables/api'
-import { clusterKinds, kinds } from '~/modules/core/store/filter';
 import { capilize } from "~/modules/core/layouthHelper";
 import ResourceScroller from "~/modules/core/components/ResourceScroller.vue";
-import { ClusterKinds, NamespacedKinds, ResourceFilter } from "~/modules/core/provider/dashboard";
+import { ResourceFilter } from "~/modules/core/provider/dashboard";
+import { execOnChange } from "~/helper/compare";
+
+const kinds = ref<string[]>([])
+const clusterKinds = ref<string[]>([])
 
 const route = useRoute()
 
-const filter = ref({
+const filter = computed(() => ({
   sources: [route.params.source],
   categories: [route.params.category],
-})
+  kinds: [...kinds.value, ...clusterKinds.value],
+}))
 
 const namespaces = await callAPI((api) => api.namespaces(route.params.source))
 
-const { data, refresh } = useAPI((api) => api.countFindings({
-      kinds: [...kinds.value, ...clusterKinds.value],
-      ...filter.value,
-    }),
+const { data, refresh } = useAPI((api) => api.countFindings(filter.value),
     {
       default: () => ({ total: 0, counts: [] }),
     }
 );
 
-watch(kinds, () => refresh())
+watch(filter, (n, o) => execOnChange(n, o, () => refresh()))
 
 provide(ResourceFilter, ref(filter))
-provide(NamespacedKinds, kinds)
-provide(ClusterKinds, clusterKinds)
 </script>
diff --git a/frontend/pages/source/[source]/index.vue b/frontend/pages/source/[source]/index.vue
index b635ed2..c3ebb4b 100644
--- a/frontend/pages/source/[source]/index.vue
+++ b/frontend/pages/source/[source]/index.vue
@@ -1,17 +1,6 @@
 <template>
-  <v-container  v-if="data.counts.length" fluid class="py-4 px-4 main-height">
-    <v-row>
-      <v-col>
-        <v-toolbar color="indigo" elevation="2" rounded>
-          <v-toolbar-title>{{ capilize(route.params.source) }}</v-toolbar-title>
-          <template #append>
-            <FormKindAutocomplete style="min-width: 300px; max-width: 100%; margin-right: 15px;" v-model="kinds" :source="route.params.source" />
-            <FormClusterKindAutocomplete style="min-width: 300px;" v-model="clusterKinds" :source="route.params.source" />
-          </template>
-        </v-toolbar>
-      </v-col>
-    </v-row>
-    <SourceStatus :data="data.counts[0]" />
+  <page-layout :title="capilize(route.params.source)" v-model:kinds="kinds" v-model:cluster-kinds="clusterKinds" :source="route.params.source">
+    <SourceStatus :data="findings" />
     <v-row>
       <v-col>
         <LazyClusterResourceResultList :source="route.params.source" :details="false" />
@@ -22,36 +11,45 @@
         <LazyResourceResultList :namespace="item" :details="false" />
       </template>
     </resource-scroller>
-  </v-container>
+  </page-layout>
 </template>
 
 <script setup lang="ts">
 import { useAPI } from '~/modules/core/composables/api'
-import { clusterKinds, kinds } from '~/modules/core/store/filter';
 import { capilize } from "~/modules/core/layouthHelper";
-import type { Filter } from "~/modules/core/types";
-import { ClusterKinds, NamespacedKinds, ResourceFilter } from "~/modules/core/provider/dashboard";
+import { type Filter } from "~/modules/core/types";
+import { ResourceFilter } from "~/modules/core/provider/dashboard";
 import ResourceScroller from "~/modules/core/components/ResourceScroller.vue";
+import { execOnChange } from "~/helper/compare";
+
+const kinds = ref<string[]>([])
+const clusterKinds = ref<string[]>([])
 
 const route = useRoute()
 
-const namespaces = await callAPI((api) => api.namespaces(route.params.source))
+const namespaces = await callAPI((api) => api.namespaces(route.params.source, {
+  kinds: kinds.value.length ? kinds.value : undefined
+}))
 
 const filter = computed<Filter>(() => ({
-  sources: [route.params.source]
+  sources: [route.params.source],
+  kinds: [...kinds.value, ...clusterKinds.value]
 }))
 
-const { data, refresh } = useAPI(
-    (api) => api.countFindings({ ...filter.value, kinds: [...kinds.value, ...clusterKinds.value] }),
+const { data, refresh, pending } = useAPI(
+    (api) => api.countFindings(filter.value),
     {
-      default: () => ({ total: 0, counts: [] }),
+      default: () => ({ total: 0, counts: [{ source: route.params.source, counts: {}}] }),
     }
 );
 
+const findings = computed(() => {
+  if (data.value?.counts?.length) return data.value.counts[0];
+
+  return { source: route.params.source, counts: {}, total: 0 }
+})
 
-watch(kinds, () => refresh())
+watch(filter, (n, o) => execOnChange(n, o, () => refresh()))
 
 provide(ResourceFilter, filter)
-provide(NamespacedKinds, kinds)
-provide(ClusterKinds, clusterKinds)
 </script>
diff --git a/frontend/plugins/02.vuetify.ts b/frontend/plugins/02.vuetify.ts
index 67dbc2e..6c8edc1 100644
--- a/frontend/plugins/02.vuetify.ts
+++ b/frontend/plugins/02.vuetify.ts
@@ -13,7 +13,14 @@ export default defineNuxtPlugin((nuxtApp) => {
     directives,
     blueprint: md3,
     theme: {
-      themes: {}
+      themes: {
+        light: {
+          colors: {
+            primary: '#01579B',
+            secondary: '#FFE0B2',
+          }
+        }
+      }
     }
   })