improve result expand UX

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

Author: fjogeleit

backend/pkg/service/model.go

@@ -88,6 +88,7 @@ type Source struct {
 	Status     []string `json:"status"`
 	Chart      *Chart   `json:"chart"`
 	Exceptions bool     `json:"exceptions"`
+	Plugin     bool     `json:"plugin"`
 }
 
 type PolicyCharts struct {

backend/pkg/service/service.go

@@ -344,12 +344,18 @@ func (s *Service) ResourceDetails(ctx context.Context, cluster, id string, query
 			severityMap[r] = true
 		}
 
+		var plugin bool
+		if _, ok := s.plugin(cluster, source.Name); ok {
+			plugin = true
+		}
+
 		list = append(list, Source{
 			Name:       source.Name,
 			Title:      title,
 			Categories: categories,
 			Status:     status,
 			Exceptions: config.Exceptions,
+			Plugin:     plugin,
 			Chart:      MapCategoryStatusToChart(title, source.Categories, config.EnabledResults()),
 		})
 	}

frontend/modules/core/components/Search.vue

@@ -8,6 +8,7 @@
       variant="outlined"
       density="compact"
       v-bind="$attrs"
+      clearable
   />
 </template>
 

frontend/modules/core/components/chip/Severity.vue

@@ -7,5 +7,5 @@
 <script lang="ts" setup>
 import type { Severity } from "~/modules/core/types";
 
-const props = defineProps<{ severity: Severity }>()
+defineProps<{ severity: Severity }>()
 </script>

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

@@ -10,11 +10,11 @@
       <div v-show="open">
         <v-divider />
         <v-card-text>
-          <GraphStatusPerCategory :source="source.chart" />
+          <GraphBarPerCategory :source="source.chart" />
         </v-card-text>
         <scroller :list="source.categories">
           <template #default="{ item }">
-            <resource-results :source="source.name" :resource="resource.id" :category="item" :exceptions="source.exceptions" />
+            <resource-results :source="source.name" :resource="resource.id" :category="item" :exceptions="source.exceptions" :plugin="source.plugin" />
           </template>
         </scroller>
       </div>
@@ -28,7 +28,7 @@ import CollapseBtn from "../../../../components/CollapseBtn.vue";
 
 const open = ref(true)
 
-const props = defineProps<{
+defineProps<{
   source: SourceDetails;
   resource: Resource;
 }>();

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

@@ -21,18 +21,25 @@
           show-expand
           v-model:items-per-page="options.itemsPerPage"
           v-model:page="options.page"
+          hover
         >
-          <template #item.policy="{ value }">
-            <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" />
-          </template>
-          <template #item.severity="{ value }">
-            <chip-severity v-if="value" @click="searchText = value" :severity="value" />
-          </template>
-          <template #item.exception="{ item }" v-if="props.exceptions">
-            <resource-exception-dialog :resource="props.resource" :source="props.source" :policies="[{ name: item.policy, rules: [{ name: item.rule, props: item.properties }]}]" />
+          <template #item="{ item, ...props }">
+            <tr @click="() => props.toggleExpand(props.internalItem)" class="cursor-pointer">
+              <td>
+                <nuxt-link v-if="plugin" :to="{ name: 'policies-source-info-policy', params: { source, policy: item.policy }}" class="text-decoration-none text-primary" target="_blank">{{ item.policy }}</nuxt-link>
+                <template v-else>{{ item.policy }}</template>
+              </td>
+              <td>{{ item.rule }}</td>
+              <td>
+                <chip-severity v-if="item.severity" @click.prevent.stop="searchText = item.severity" :severity="item.severity" />
+              </td>
+              <td>
+                <chip-status @click.prevent.stop="searchText = item.status" :status="item.status" />
+              </td>
+              <td>
+                <resource-exception-dialog v-if="exceptions" :resource="resource" :source="source" :policies="[{ name: item.policy, rules: [{ name: item.rule, props: item.properties }]}]" />
+              </td>
+            </tr>
           </template>
           <template #expanded-row="{ columns, item }">
             <tr :class="bg">
@@ -70,6 +77,7 @@ import { capilize } from "~/modules/core/layouthHelper";
 import { mapResults } from "~/modules/core/mapper";
 
 const props = defineProps<{
+  plugin?: boolean;
   source: string;
   category?: string;
   exceptions?: boolean;

frontend/modules/core/mapper.ts

@@ -11,6 +11,7 @@ const priorityToColor: { [key in Priority]: string } = {
 }
 
 const statusToColor: { [status in Status]: string } = {
+  [Status.SUMMARY]: '#E0E0E0',
   [Status.SKIP]: '#E0E0E0',
   [Status.PASS]: '#43A047',
   [Status.WARN]: '#FB8C00',
@@ -19,6 +20,7 @@ const statusToColor: { [status in Status]: string } = {
 }
 
 const statusToDarkColor: { [status in Status]: string } = {
+  [Status.SUMMARY]: '#424242',
   [Status.SKIP]: '#424242',
   [Status.PASS]: '#1B5E20',
   [Status.WARN]: '#FF6F00',

frontend/modules/core/types.ts

@@ -200,6 +200,7 @@ export type SourceDetails = {
     categories: string[];
     chart: Chart;
     exceptions: boolean;
+    plugin: boolean;
 }
 
 export type ResourceDetails = {
@@ -273,7 +274,8 @@ export type ListResult = {
     policy: string;
     rule: string;
     status: Status;
-    timestamp: number
+    severity: Severity;
+    timestamp: number;
     properties: { [key: string]: string };
 }