Update UI

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

backend/pkg/api/core/client.go

@@ -157,6 +157,16 @@ func (c *Client) ListClusterScopedResults(ctx context.Context, query url.Values)
 	return api.Decode[Paginated[PolicyResult]](resp.Body)
 }
 
+func (c *Client) ListTargets(ctx context.Context) (map[string][]Target, error) {
+	resp, err := c.Get(ctx, "/v2/targets", url.Values{})
+	if err != nil {
+		return nil, err
+	}
+	defer resp.Body.Close()
+
+	return api.DecodeMap[string, []Target](resp.Body)
+}
+
 func New(options []api.ClientOption) (*Client, error) {
 	baseClient, err := api.New(options)
 	if err != nil {

backend/pkg/api/core/model.go

@@ -74,3 +74,8 @@ type Paginated[T any] struct {
 	Items []T `json:"items"`
 	Count int `json:"count"`
 }
+
+type Target struct {
+	Name string `json:"name"`
+	Host string `json:"host"`
+}

backend/pkg/server/api/handler.go

@@ -139,7 +139,15 @@ func (h *Handler) Layout(ctx *gin.Context) {
 
 	profile, _ := ctx.Get("profile")
 
+	targets, err := endpoints.Core.ListTargets(ctx)
+	if err != nil {
+		zap.L().Error("failed to call core API", zap.Error(err))
+		ctx.AbortWithStatus(http.StatusInternalServerError)
+		return
+	}
+
 	ctx.JSON(http.StatusOK, gin.H{
+		"targets":      len(targets) > 0,
 		"sources":      MapSourceCategoryTreeToNavi(sources),
 		"policies":     MapSourcesToPolicyNavi(sources),
 		"customBoards": MapCustomBoardsToNavi(h.boards),

backend/pkg/server/api/mapper.go

@@ -14,9 +14,8 @@ func MapSourceCategoryTreeToNavi(sources []core.SourceCategoryTree) []Navigation
 	if len(sources) == 1 {
 		for _, category := range sources[0].Categories {
 			sourceBoards = append(sourceBoards, NavigationItem{
-				Title:    utils.Title(sources[0].Name),
-				Subtitle: category.Name,
-				Path:     fmt.Sprintf("/source/%s/%s", sources[0].Name, category.Name),
+				Title: category.Name,
+				Path:  fmt.Sprintf("/source/%s/%s", sources[0].Name, category.Name),
 			})
 		}
 

charts/ui/Chart.yaml

@@ -2,8 +2,8 @@ apiVersion: v2
 name: ui
 description: Policy Reporter UI
 type: application
-version: 0.0.16
-appVersion: "2.0.0-alpha.11"
+version: 0.0.17
+appVersion: "2.0.0-alpha.12"
 
 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.15](https://img.shields.io/badge/Version-0.0.15-informational?style=flat-square) ![Type: application](https://img.shields.io/badge/Type-application-informational?style=flat-square) ![AppVersion: 2.0.0-alpha.10](https://img.shields.io/badge/AppVersion-2.0.0--alpha.10-informational?style=flat-square)
+![Version: 0.0.17](https://img.shields.io/badge/Version-0.0.17-informational?style=flat-square) ![Type: application](https://img.shields.io/badge/Type-application-informational?style=flat-square) ![AppVersion: 2.0.0-alpha.12](https://img.shields.io/badge/AppVersion-2.0.0--alpha.12-informational?style=flat-square)
 
 ## Documentation
 

frontend/layouts/default.vue

@@ -12,11 +12,10 @@
 
     <v-navigation-drawer v-model="drawer">
       <v-list density="compact" nav color="header" variant="flat">
-        <template v-for="item in navigation" :key="item.title">
-          <v-list-item :title="item.title" :to="item.path" :exact="item.exact" />
-        </template>
+        <v-list-item title="Dashboard" to="/" exact />
+        <v-list-item title="Notification Targets" to="/targets" exact v-if="layout.targets" />
 
-        <v-list-group value="policies" fluid>
+        <v-list-group value="policies" fluid v-if="layout.policies.length > 1">
           <template v-slot:activator="{ props }">
             <v-list-item title="Policies" v-bind="props" base-color="header-item"></v-list-item>
           </template>
@@ -33,14 +32,15 @@
           </v-list-item>
         </v-list-group>
 
+        <v-list-item title="Policies" :to="layout.policies[0].path" exact v-if="layout.policies.length === 1" />
+
         <v-divider class="mb-1" />
-        <template v-if="layout.customBoards">
-          <v-list-subheader>Custom Boards</v-list-subheader>
-        </template>
+        <v-list-subheader v-if="layout.customBoards.length">Custom Boards</v-list-subheader>
         <template v-for="item in layout.customBoards" :key="item.title">
           <v-list-item :title="item.title" :to="item.path" :exact="item.exact"></v-list-item>
         </template>
-        <v-divider class="mb-1" />
+        <v-divider class="mb-1" v-if="layout.customBoards.length" />
+
         <template v-for="item in layout.sources" :key="item.path">
           <template v-if="item.children">
             <v-list-item
@@ -63,7 +63,7 @@
             <v-divider class="mb-1" />
           </template>
 
-          <v-list-item :to="item.path" :prepend-icon="item.icon" exact lines="two" base-color="header-item" v-else>
+          <v-list-item :to="item.path" :prepend-icon="item.icon" exact :lines="item.subtitle ? 'two' : 'one'" base-color="header-item" v-else>
             <v-list-item-title>{{ item.title }}</v-list-item-title>
             <v-list-item-subtitle v-if="item.subtitle" style="opacity: 0.75">{{ item.subtitle }}</v-list-item-subtitle>
           </v-list-item>
@@ -106,9 +106,4 @@ const bg = computed(() => {
 
   return 'bg-grey-lighten-4'
 })
-
-const navigation = [
-  { title: 'Dashboard', path: '/', exact: true },
-  { title: 'Notification Targets', path: '/targets', exact: true },
-];
 </script>

frontend/modules/core/components/resource/Results.vue

@@ -23,7 +23,7 @@
           v-model:page="options.page"
         >
           <template #item.policy="{ value }">
-            <nuxt-link :to="{ name: 'policies-source-info-policy', params: { source, policy: value }}" class="text-decoration-none text-white" target="_blank">{{ value }}</nuxt-link>
+            <nuxt-link :to="{ name: 'policies-source-info-policy', params: { source, policy: value }}" class="text-decoration-none text-primary" target="_blank">{{ value }}</nuxt-link>
           </template>
           <template #item.status="{ value }">
             <chip-status @click="searchText = value" :status="value" />

frontend/modules/core/types.ts

@@ -122,6 +122,7 @@ export type Navigation = {
 }
 
 export type LayoutConfig = {
+    targets: boolean;
     profile?: Profile;
     sources: Navigation[];
     policies: Navigation[];