dependency updates

Signed-off-by: Frank Jogeleit <[email protected]>

backend/pkg/server/api/handler.go

@@ -106,10 +106,25 @@ func (h *Handler) GetCustomBoard(ctx *gin.Context) {
 		namespaces = config.Namespaces.List
 	}
 
-	if len(namespaces) > 0 {
-		query["namespaces"] = namespaces
+	if len(namespaces) == 0 {
+		ctx.JSON(http.StatusOK, service.Dashboard{
+			Title:          config.Name,
+			ClusterScope:   config.ClusterScope,
+			Sources:        sources,
+			SingleSource:   len(sources) == 1,
+			MultipleSource: len(sources) > 1,
+			Namespaces:     make([]string, 0),
+			Charts: service.Charts{
+				ClusterScope:   make(map[string]map[string]int),
+				NamespaceScope: make(map[string]*service.Chart),
+				Findings:       &service.Chart{},
+			},
+		})
+		return
 	}
 
+	query["namespaces"] = namespaces
+
 	dashboard, err := h.service.Dashboard(ctx, ctx.Param("cluster"), sources, namespaces, config.ClusterScope, query)
 	if err != nil {
 		zap.L().Error("failed to generate dashboard", zap.Error(err))

backend/pkg/service/service.go

@@ -304,6 +304,10 @@ func (s *Service) Dashboard(ctx context.Context, cluster string, sources []strin
 		findingChart = MapFindingsToSourceStatusChart(sources[0], findings)
 	}
 
+	if namespaces == nil {
+		namespaces = make([]string, 0)
+	}
+
 	return &Dashboard{
 		FilterSources:  make([]string, 0),
 		ClusterScope:   clusterScope,

charts/ui/Chart.yaml

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

frontend/layouts/default.vue

@@ -6,7 +6,7 @@
       <template #append>
         <form-cluster-select />
         <form-display-mode-select style="width: 150px;" />
-        <user-menu class="ml-4" />
+        <user-menu />
       </template>
     </v-app-bar>
 
@@ -80,12 +80,11 @@
 <script setup lang="ts">
 import { useTheme } from "vuetify";
 import type { LayoutConfig } from "~/modules/core/types";
-import {use} from "h3";
-import {useConfigStore} from "~/store/config";
+import { useConfigStore } from "~/store/config";
 
 const drawer = ref(true)
 
-const { data: layout } = useAPI((api) => api.layout(), { default: (): LayoutConfig => ({ sources: [], customBoards: [], policies: [] }) })
+const { data: layout } = useAPI((api) => api.layout(), { default: (): LayoutConfig => ({ sources: [], customBoards: [], policies: [], targets: false }) })
 
 const theme = useTheme()
 

frontend/modules/core/api.ts

@@ -44,11 +44,11 @@ export class CoreAPI {
     return exec<LayoutConfig>(`/api/config/${this.cluster}/layout`, { baseURL: this.baseURL })
   }
 
-  dashboard <T extends Boolean>(filter?: Filter) {
+  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]) })
   }
 
-  customBoard <T extends Boolean>(id: string, filter?: Filter) {
+  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]) })
   }
 

frontend/modules/core/components/UserMenu.vue

@@ -15,9 +15,10 @@
 <script setup lang="ts">
 const logout = () => {
   document.cookie.split(";").forEach((c) => { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); });
+  // @ts-ignore
   window.location = '/logout'
 }
 
-const { data: profile } = useAPI(api => api.profile(), { default: () => ({ name: 'Frank Jogeleit' } )})
+const { data: profile } = useAPI(api => api.profile(), { default: () => ({ name: 'Frank Jogeleit', id: undefined } )})
 
 </script>

frontend/modules/core/types.ts

@@ -153,7 +153,7 @@ export type NamespaceScope = {
 
 export type Findings = Chart
 
-export type Dashboard<T extends Boolean> = {
+export type Dashboard<T extends boolean> = {
     title?: string;
     clusterScope: boolean;
     filterSources: string[];

frontend/nuxt.config.ts

@@ -1,4 +1,4 @@
-import vuetify from "vite-plugin-vuetify";
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 import { join } from 'node:path'
 
 export default defineNuxtConfig({
@@ -31,6 +31,13 @@ export default defineNuxtConfig({
       publicDir: join(__dirname, 'dist')
     }
   },
+  vite: {
+    vue: {
+      template: {
+        transformAssetUrls,
+      },
+    },
+  },
   app: {
     head: {
       title: 'Policy Reporter UI',

frontend/package.json

@@ -14,9 +14,9 @@
     "@nuxt/devtools": "latest",
     "@types/chroma-js": "^2.4.3",
     "@types/lodash.debounce": "^4.0.9",
-    "nuxt": "^3.10.1",
+    "nuxt": "^3.10.2",
     "sass": "^1.69.5",
-    "vite-plugin-vuetify": "^1.0.2",
+    "vite-plugin-vuetify": "^2.0.1",
     "vue": "^3.3.8",
     "vue-router": "^4.2.5"
   },

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

@@ -4,22 +4,31 @@
                :title="data.title"
                v-if="data"
   >
-    <GraphSourceStatus v-if="data.singleSource" :data="data" :source="data.sources[0]" />
-    <GraphSourcesStatus v-else :data="data" :hide-cluster="!data.clusterScope" />
-    <v-row v-if="data.clusterScope">
-      <v-col>
-        <resource-cluster-list :details="data.multiSource" />
-      </v-col>
-    </v-row>
-    <resource-namespace-section v-if="data.namespaces.length" :namespaces="data.namespaces">
-      <template #default="{ namespaces }">
-        <resource-scroller :list="namespaces" :default-loadings="3">
-          <template #default="{ item }">
-            <resource-list :namespace="item" :details="data.multiSource" />
-          </template>
-        </resource-scroller>
-      </template>
-    </resource-namespace-section>
+    <template v-if="data.namespaces.length">
+      <GraphSourceStatus v-if="data.singleSource" :data="data" :source="data.sources[0]" />
+      <GraphSourcesStatus v-else :data="data" :hide-cluster="!data.clusterScope" />
+      <v-row v-if="data.clusterScope">
+        <v-col>
+          <resource-cluster-list :details="data.multiSource" />
+        </v-col>
+      </v-row>
+      <resource-namespace-section v-if="data.namespaces.length" :namespaces="data.namespaces">
+        <template #default="{ namespaces }">
+          <resource-scroller :list="namespaces" :default-loadings="3">
+            <template #default="{ item }">
+              <resource-list :namespace="item" :details="data.multiSource" />
+            </template>
+          </resource-scroller>
+        </template>
+      </resource-namespace-section>
+    </template>
+    <v-card class="mt-4" v-else>
+      <v-card-text>
+        <v-alert variant="outlined" type="error">
+          No configured namespaces are found
+        </v-alert>
+      </v-card-text>
+    </v-card>
   </page-layout>
 </template>
 

frontend/plugins/02.vuetify.ts

@@ -3,6 +3,7 @@ import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 import { md3 } from 'vuetify/blueprints'
 import { useConfigStore } from "~/store/config";
+import 'vuetify/styles'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const config = useConfigStore()