fix custom board filter

Signed-off-by: Frank Jogeleit <frank.jogeleit@lovoo.com>

backend/pkg/config/resolver.go

@@ -121,7 +121,7 @@ func (r *Resolver) LoadPluginSecret(ctx context.Context, plugin Plugin) (Plugin,
 	return plugin, nil
 }
 
-func (r *Resolver) Proxies(cluster Cluster) (*httputil.ReverseProxy, error) {
+func (r *Resolver) Proxy(cluster Cluster) (*httputil.ReverseProxy, error) {
 	if cluster.Host == "" {
 		return nil, ErrMissingAPI
 	}
@@ -330,7 +330,7 @@ func (r *Resolver) Server(ctx context.Context) (*server.Server, error) {
 			continue
 		}
 
-		proxy, err := r.Proxies(cluster)
+		proxy, err := r.Proxy(cluster)
 		if err != nil {
 			zap.L().Error("failed to resolve proxies", zap.Error(err), zap.String("cluser", cluster.Name), zap.String("host", cluster.Host))
 			continue

charts/ui/Chart.yaml

@@ -2,8 +2,8 @@ apiVersion: v2
 name: ui
 description: Policy Reporter UI
 type: application
-version: 0.0.22
-appVersion: "2.0.0-alpha.16"
+version: 0.0.23
+appVersion: "2.0.0-alpha.17"
 
 icon: https://github.com/kyverno/kyverno/raw/main/img/logo.png
 home: https://kyverno.github.io/policy-reporter-ui

charts/ui/README.md

@@ -2,7 +2,7 @@
 
 Policy Reporter UI
 
-![Version: 0.0.20](https://img.shields.io/badge/Version-0.0.20-informational?style=flat-square) ![Type: application](https://img.shields.io/badge/Type-application-informational?style=flat-square) ![AppVersion: 2.0.0-alpha.14](https://img.shields.io/badge/AppVersion-2.0.0--alpha.14-informational?style=flat-square)
+![Version: 0.0.23](https://img.shields.io/badge/Version-0.0.23-informational?style=flat-square) ![Type: application](https://img.shields.io/badge/Type-application-informational?style=flat-square) ![AppVersion: 2.0.0-alpha.17](https://img.shields.io/badge/AppVersion-2.0.0--alpha.17-informational?style=flat-square)
 
 ## Documentation
 

frontend/components/PageLayout.vue

@@ -6,8 +6,8 @@
           <v-toolbar-title v-if="title">{{ title }}</v-toolbar-title>
           <template #append>
             <policy-report-dialog :source="source" :category="category" v-if="source" />
-            <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" />
+            <FormKindAutocomplete style="min-width: 300px; max-width: 100%; margin-right: 15px;" v-model="kinds" :source="store || source" />
+            <FormClusterKindAutocomplete v-if="!nsScoped" style="min-width: 300px;" v-model="clusterKinds" :source="store || source" />
           </template>
         </v-toolbar>
       </v-card>
@@ -19,7 +19,7 @@
 <script setup lang="ts">
 import { ClusterKinds, NamespacedKinds } from "~/modules/core/provider/dashboard";
 
-const props = defineProps<{ title?: string; category?: string; source?: string; nsScoped?: boolean; kinds?: string[]; clusterKinds?: string[] }>()
+const props = defineProps<{ title?: string; category?: string; source?: string; store?: string; nsScoped?: boolean; kinds?: string[]; clusterKinds?: string[] }>()
 
 const kinds = ref<string[]>(props.kinds ?? [])
 const clusterKinds = ref<string[]>(props.clusterKinds ?? [])

frontend/composables/source.ts

@@ -4,33 +4,39 @@ type Store = {
     categories: string[]
 }
 
-const sources: { [source: string]: Store } = {}
+const sources: { [source: string]: Store } = reactive({})
 
-export const useSourceStore = (source?: string) => {
-    const key = source || 'global'
+export const useSourceStore = (key?: string) => {
+    if (!key) { key = 'global' }
 
     if (!sources[key]) {
-        sources[key] = reactive({
+        sources[key] = {
             kinds: { namespaced: [], cluster: [] },
             namespaces: [],
             categories: [],
-        })
+        }
     }
 
     const store = sources[key]
 
     const loading = ref(false)
     const error = ref<Error | null>(null)
 
-    const load = () => {
+    const load = (source?: string[] | string) => {
         loading.value = true
         error.value = null
 
+        if (typeof source === 'string') {
+            source = [source]
+        } else if (Array.isArray(source) && !source.length) {
+            source = undefined
+        }
+
         return Promise.all([
-            callAPI(api => api.namespaces({ sources: source ? [source] : undefined })),
-            callAPI(api => api.namespacedKinds(source)),
-            callAPI(api => api.clusterKinds(source)),
-            callAPI(api => api.categoryTree(undefined, { sources: source ? [source] : undefined })),
+            callAPI(api => api.namespaces({ sources: source as string[] })),
+            callAPI(api => api.namespacedKinds(source as string[])),
+            callAPI(api => api.clusterKinds(source as string[])),
+            callAPI(api => api.categoryTree(undefined, { sources: source as string[] })),
         ]).then(([namespaces, nsKinds, clusterKinds, categoryTrees]) => {
             store.kinds.namespaced = nsKinds || []
             store.kinds.cluster = clusterKinds || []

frontend/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-layout>
+  <v-layout v-if="layout">
     <v-app-bar elevation="1" prominent>
       <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>
@@ -36,7 +36,7 @@
             <v-divider class="mb-1" />
           </template>
 
-          <v-list-item :to="item.path" :prepend-icon="item.icon" exact lines="one" base-color="header-item" v-else>
+          <v-list-item :to="item.path" exact lines="one" base-color="header-item" v-else>
             <v-list-item-title>{{ item.title }}</v-list-item-title>
           </v-list-item>
         </template>
@@ -45,7 +45,7 @@
 
           <v-list-item base-color="header" title="Policy Dashboard" to="/policies" exact />
           <template v-for="item in layout.policies" :key="item.path">
-            <v-list-item :to="item.path" :prepend-icon="item.icon" exact lines="one" base-color="header-item">
+            <v-list-item :to="item.path" exact lines="one" base-color="header-item">
               <v-list-item-title>{{ item.title }}</v-list-item-title>
             </v-list-item>
           </template>

frontend/modules/core/api.ts

@@ -44,12 +44,12 @@ export class CoreAPI {
     return exec<LayoutConfig>(`/api/config/${this.cluster}/layout`, { baseURL: this.baseURL })
   }
 
-  dashboard <T extends boolean>(filter?: Filter) {
-    return exec<Dashboard<T>>(`/api/config/${this.cluster}/dashboard`, { baseURL: this.baseURL, params: applyExcludes(filter, [...this.nsExcludes, ...this.clusterExcludes]) })
+  dashboard (filter?: Filter) {
+    return exec<Dashboard>(`/api/config/${this.cluster}/dashboard`, { baseURL: this.baseURL, params: applyExcludes(filter, [...this.nsExcludes, ...this.clusterExcludes]) })
   }
 
-  customBoard <T extends boolean>(id: string, filter?: Filter) {
-    return exec<Dashboard<T>>(`/api/config/${this.cluster}/custom-board/${id}`, { baseURL: this.baseURL, params: applyExcludes(filter, [...this.nsExcludes, ...this.clusterExcludes]) })
+  customBoard (id: string, filter?: Filter) {
+    return exec<Dashboard>(`/api/config/${this.cluster}/custom-board/${id}`, { baseURL: this.baseURL, params: applyExcludes(filter, [...this.nsExcludes, ...this.clusterExcludes]) })
   }
 
   resource (id: string, filter?: Filter) {
@@ -88,8 +88,8 @@ export class CoreAPI {
     return exec<string[]>(`/proxy/${this.cluster}/core/v1/namespaces`, { baseURL: this.baseURL, params: { ...filter } })
   }
 
-  namespacedKinds (source?: string) {
-    return exec<string[]>('/proxy/'+this.cluster+'/core/v1/namespaced-resources/kinds', { baseURL: this.baseURL, params: { sources: source ? [source] : undefined } })
+  namespacedKinds (sources?: string[]) {
+    return exec<string[]>('/proxy/'+this.cluster+'/core/v1/namespaced-resources/kinds', { baseURL: this.baseURL, params: { sources } })
   }
 
   namespacedStatusCount (source: string, filter?: Filter) {
@@ -104,8 +104,8 @@ export class CoreAPI {
     return exec<{ [status in Status]: number }>(`/proxy/${this.cluster}/core/v2/namespace-scoped/${source}/status-counts`, { baseURL: this.baseURL, params: { ...applyExcludes(filter, this.clusterExcludes) } })
   }
 
-  clusterKinds (source?: string) {
-    return exec<string[]>('/proxy/'+this.cluster+'/core/v1/cluster-resources/kinds', { baseURL: this.baseURL, params: { sources: source ? [source] : undefined } })
+  clusterKinds (sources?: string[]) {
+    return exec<string[]>('/proxy/'+this.cluster+'/core/v1/cluster-resources/kinds', { baseURL: this.baseURL, params: { sources } })
   }
 
   clusterResults (filter?: Filter, pagination?: Pagination) {

frontend/modules/core/components/form/NamespaceSelect.vue

@@ -3,7 +3,6 @@
       multiple
       clearable
       :items="store.namespaces"
-      :loading="loading"
       variant="outlined"
       hide-details
       label="Namespaces"
@@ -27,7 +26,7 @@ const props = defineProps<{ source: string; modelValue: string[] }>();
 
 const selected = ref<string[]>(props.modelValue);
 
-const { store, loading } = useSourceStore(props.source)
+const { store } = useSourceStore(props.source)
 
 const emit = defineEmits<{ 'update:modelValue': [kinds: string[]] }>()
 

frontend/modules/core/components/graph/SourceStatus.vue

@@ -28,5 +28,5 @@
 import { capilize } from "~/modules/core/layouthHelper";
 import type { Dashboard } from "~/modules/core/types";
 
-const props = defineProps<{ data: Dashboard<false>, source: string; category?: string; }>();
+const props = defineProps<{ data: Dashboard; source: string; category?: string; }>();
 </script>

frontend/modules/core/components/graph/SourcesStatus.vue

@@ -3,7 +3,7 @@
     <v-col cols="12" md="6">
       <v-card>
         <v-card-text class="mb-0 pb-0">
-          <GraphFindings :data="data.charts.findings[status1]" :status="status1" :key="status1" />
+          <GraphFindings :data="(data.charts.findings[status1] as Findings)" :status="status1" :key="status1" />
         </v-card-text>
         <v-card-actions style="margin-top: -40px">
           <v-btn-toggle
@@ -23,7 +23,7 @@
     <v-col cols="12" md="6">
       <v-card>
         <v-card-text class="mb-0 pb-0">
-          <GraphFindings :data="data.charts.findings[status2]" :status="status2" :key="status2" :time="1200" />
+          <GraphFindings :data="(data.charts.findings[status2] as Findings)" :status="status2" :key="status2" :time="1200" />
         </v-card-text>
         <v-card-actions style="margin-top: -40px">
           <v-btn-toggle
@@ -70,9 +70,9 @@
 
 <script setup lang="ts">
 import StatusBtn from "~/components/StatusBtn.vue";
-import { type Dashboard, Status } from "~/modules/core/types";
+import { type Dashboard, Status, Findings } from "~/modules/core/types";
 
-const props = defineProps<{ data: Dashboard<true>; hideCluster?: boolean }>();
+const props = defineProps<{ data: Dashboard; hideCluster?: boolean }>();
 
 const status1 = ref(Status.PASS);
 const status2 = ref(Status.FAIL);

frontend/modules/core/types.ts

@@ -119,6 +119,7 @@ export type Navigation = {
     subtitle: string;
     path: string;
     children?: Navigation[];
+    exact?: boolean;
 }
 
 export type LayoutConfig = {
@@ -153,17 +154,17 @@ export type NamespaceScope = {
 
 export type Findings = Chart
 
-export type Dashboard<T extends boolean> = {
+export type Dashboard = {
     title?: string;
     clusterScope: boolean;
     filterSources: string[];
-    multiSource: T;
+    multiSource: boolean;
     showResults: string[];
-    singleSource: T extends true ? false : true;
+    singleSource: boolean;
     charts: {
         clusterScope: ClusterScope;
         namespaceScope: NamespaceScope;
-        findings: T extends true ? { [key in Status]: Findings } : Findings
+        findings: { [key in Status]: Findings } | Findings
     };
     namespaces: string[];
     sources: string[];

frontend/package.json

@@ -14,7 +14,7 @@
     "@nuxt/devtools": "latest",
     "@types/chroma-js": "^2.4.3",
     "@types/lodash.debounce": "^4.0.9",
-    "nuxt": "^3.10.2",
+    "nuxt": "^3.10.3",
     "sass": "^1.69.5",
     "vite-plugin-vuetify": "^2.0.1",
     "vue": "^3.3.8",

frontend/pages/custom-boards/[id].vue

@@ -3,6 +3,9 @@
                v-model:cluster-kinds="clusterKinds"
                :title="data.title"
                v-if="data"
+               :source="data.singleSource ? data.sources[0] : undefined"
+               :ns-scoped="!data.clusterScope"
+               :store="route.params.id"
   >
     <template v-if="data.namespaces.length">
       <GraphSourceStatus v-if="data.singleSource" :data="data" :source="data.sources[0]" />
@@ -49,6 +52,14 @@ const filter = computed(() => ({
 
 const { data, refresh } = useAPI((api) => api.customBoard(route.params.id, filter.value))
 
+const store = useSourceStore(route.params.id)
+
+watchEffect(() => {
+  if (!data.value) return;
+
+  store.load(data.value.sources)
+})
+
 watch(filter, onChange(refresh))
 
 provide(APIFilter, computed(() => ({

frontend/pages/source/[source]/[category].vue

@@ -28,7 +28,7 @@ import { onChange } from "~/helper/compare";
 const route = useRoute()
 
 const store = useSourceStore(route.params.source)
-await store.load()
+await store.load(route.params.source)
 
 const kinds = ref<string[]>([])
 const clusterKinds = ref<string[]>([])

frontend/pages/source/[source]/index.vue

@@ -25,7 +25,7 @@ import { onChange } from "~/helper/compare";
 const route = useRoute()
 
 const store = useSourceStore(route.params.source)
-await store.load()
+await store.load(route.params.source)
 
 const kinds = ref<string[]>([])
 const clusterKinds = ref<string[]>([])