From 8e27f99d58f8eb8dcbdbfd235e87b71898584657 Mon Sep 17 00:00:00 2001
From: Frank Jogeleit <frank.jogeleit@lovoo.com>
Date: Tue, 12 Mar 2024 09:25:14 +0100
Subject: [PATCH] result filter for policy detail results

Signed-off-by: Frank Jogeleit <frank.jogeleit@lovoo.com>
---
 .../core/components/form/StatusSelect.vue     |  43 +++++++
 .../core/components/policy/ClusterResults.vue |  10 +-
 .../components/policy/NamespaceSection.vue    |  12 +-
 .../core/components/policy/Results.vue        | 119 +++++++++---------
 .../core/components/policy/Scroller.vue       |  20 +++
 .../core/components/policy/StatusCharts.vue   |   2 -
 frontend/pages/resource/[id].vue              |   2 +-
 7 files changed, 140 insertions(+), 68 deletions(-)
 create mode 100644 frontend/modules/core/components/form/StatusSelect.vue
 create mode 100644 frontend/modules/core/components/policy/Scroller.vue

diff --git a/frontend/modules/core/components/form/StatusSelect.vue b/frontend/modules/core/components/form/StatusSelect.vue
new file mode 100644
index 00000000..2e3601c6
--- /dev/null
+++ b/frontend/modules/core/components/form/StatusSelect.vue
@@ -0,0 +1,43 @@
+<template>
+  <v-select
+      multiple
+      clearable
+      density="compact"
+      :items="items"
+      variant="outlined"
+      hide-details
+      label="Results"
+      closable-chips
+      :model-value="modelValue"
+      @update:model-value="input"
+      v-bind="$attrs"
+      style="min-width: 200px;"
+  >
+    <template v-slot:selection="{ item, index }">
+      <v-chip v-if="index < 2">
+        <span>{{ item.title }}</span>
+      </v-chip>
+      <span v-if="index === 2" class="text-caption align-self-center">
+        (+{{ modelValue.length - 2 }} others)
+      </span>
+    </template>
+  </v-select>
+</template>
+
+<script lang="ts" setup>
+import {Status} from "../../types";
+
+const props = defineProps<{ source?: string; modelValue: string[] }>();
+
+const items: Status[] = [
+  Status.PASS,
+  Status.FAIL,
+  Status.WARN,
+  Status.SKIP,
+]
+
+const emit = defineEmits<{ 'update:modelValue': [status: string[]] }>()
+
+const input = (current) => emit('update:modelValue', current);
+
+</script>
diff --git a/frontend/modules/core/components/policy/ClusterResults.vue b/frontend/modules/core/components/policy/ClusterResults.vue
index bab941c9..9dd61cee 100644
--- a/frontend/modules/core/components/policy/ClusterResults.vue
+++ b/frontend/modules/core/components/policy/ClusterResults.vue
@@ -1,12 +1,13 @@
 <template>
-  <app-row v-if="data.count > 0 || !!searchText">
+  <app-row v-if="data.count > 0 || !!searchText || !!(status || []).length">
     <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;" />
+          <form-status-select v-model="status" class="mr-4" />
+          <search v-model="searchText" class="mr-4" style="min-width: 300px; float: left;" />
           <v-btn :icon="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" @click="open = !open" variant="text" />
         </template>
       </v-toolbar>
@@ -63,7 +64,7 @@
 <script lang="ts" setup>
 import { mapResults } from "~/modules/core/mapper";
 import type { Ref } from "vue";
-import type { Filter } from "~/modules/core/types";
+import type {Filter, Status} from "~/modules/core/types";
 import { APIFilter } from "~/modules/core/provider/dashboard";
 import { onChange } from "~/helper/compare";
 
@@ -87,6 +88,7 @@ const options = reactive({
 const open = ref(true)
 const searchText = ref('')
 const bg = useBGColor()
+const status = ref<Status[]>([])
 
 const filter = inject<Ref<Filter>>(APIFilter, ref<Filter>({}))
 
@@ -94,6 +96,7 @@ const { data, refresh } = useAPI(
     (api) => api.clusterResults({
       ...filter.value,
       sources: [props.source],
+      status: status.value ? status.value : undefined,
       policies: props.policy ? [props.policy] : undefined,
       search: searchText.value ? searchText.value : undefined,
     }, {
@@ -108,6 +111,7 @@ const { data, refresh } = useAPI(
 watch(() => options.page, () => refresh())
 watch(() => options.itemsPerPage, () => refresh())
 watch(searchText, () => refresh())
+watch(status, () => refresh())
 
 watch(filter, onChange(refresh))
 
diff --git a/frontend/modules/core/components/policy/NamespaceSection.vue b/frontend/modules/core/components/policy/NamespaceSection.vue
index b05a541d..622a2c45 100644
--- a/frontend/modules/core/components/policy/NamespaceSection.vue
+++ b/frontend/modules/core/components/policy/NamespaceSection.vue
@@ -5,6 +5,7 @@
         <v-toolbar color="header">
           <v-toolbar-title>Namespace Scoped Results</v-toolbar-title>
           <template #append>
+            <form-status-select v-model="status" class="mr-2" />
             <form-namespace-autocomplete v-model="internal" :items="props.namespaces" />
           </template>
         </v-toolbar>
@@ -12,20 +13,21 @@
     </v-col>
   </v-row>
   <slot :namespaces="list">
-    <resource-scroller :list="list">
+    <policy-scroller :list="list">
       <template #default="{ item }">
-        <app-row>
-          <policy-results :namespace="item" :source="source" :policy="policy" />
-        </app-row>
+        <policy-results :namespace="item" :source="source" :policy="policy" :status="status" />
       </template>
-    </resource-scroller>
+    </policy-scroller>
   </slot>
 </template>
 
 <script setup lang="ts">
+import type { Status } from "~/modules/core/types";
+
 const props = defineProps<{ namespaces: string[]; source: string; policy?: string;  }>()
 
 const internal = ref<string[]>([])
+const status = ref<Status[]>([])
 
 const list = computed(() => {
   if (internal.value.length > 0) return internal.value
diff --git a/frontend/modules/core/components/policy/Results.vue b/frontend/modules/core/components/policy/Results.vue
index c2d85e66..59c61e7c 100644
--- a/frontend/modules/core/components/policy/Results.vue
+++ b/frontend/modules/core/components/policy/Results.vue
@@ -1,73 +1,76 @@
 <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="bg">
-              <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>
+  <app-row v-if="data.count > 0 || !!searchText">
+    <v-card>
+      <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="bg">
+                <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>
-                <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>
+                  <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>
+  </app-row>
 </template>
 
 <script lang="ts" setup>
 import { mapResults } from "~/modules/core/mapper";
 import type { Ref } from "vue";
-import type { Filter } from "~/modules/core/types";
+import { type Filter, Status } from "~/modules/core/types";
 import { APIFilter } from "~/modules/core/provider/dashboard";
 import { onChange } from "~/helper/compare";
 
 const props = defineProps<{
   source: string;
   namespace: string;
+  status?: Status[];
   policy?: string;
 }>()
 
@@ -93,6 +96,7 @@ const { data, refresh } = useAPI(
       ...filter.value,
       sources: [props.source],
       policies: props.policy ? [props.policy] : undefined,
+      status: props.status ? props.status : undefined,
       namespaces: [props.namespace],
       search: searchText.value ? searchText.value : undefined,
     }, {
@@ -106,6 +110,7 @@ const { data, refresh } = useAPI(
 
 watch(() => options.page, () => refresh())
 watch(() => options.itemsPerPage, () => refresh())
+watch(() => props.status, () => refresh())
 watch(searchText, () => refresh())
 
 watch(filter, onChange(refresh))
diff --git a/frontend/modules/core/components/policy/Scroller.vue b/frontend/modules/core/components/policy/Scroller.vue
new file mode 100644
index 00000000..dcc986e0
--- /dev/null
+++ b/frontend/modules/core/components/policy/Scroller.vue
@@ -0,0 +1,20 @@
+<template>
+  <v-infinite-scroll :onLoad="load" class="no-scrollbar pb-0 mb-0" v-if="loaded.length">
+    <template v-for="item in loaded" :key="item">
+      <slot :item="item" />
+    </template>
+    <template #empty></template>
+  </v-infinite-scroll>
+</template>
+
+<script setup lang="ts">
+import { useInfinite } from "~/composables/infinite";
+
+const props = defineProps<{ list: any[]; defaultLoadings?: number }>()
+
+const list = ref<any[]>(props.list)
+
+watch(() => props.list, () => { list.value = props.list }, { immediate: true })
+
+const { load, loaded } = useInfinite(list, props.defaultLoadings)
+</script>
diff --git a/frontend/modules/core/components/policy/StatusCharts.vue b/frontend/modules/core/components/policy/StatusCharts.vue
index 197b116a..33c91ebc 100644
--- a/frontend/modules/core/components/policy/StatusCharts.vue
+++ b/frontend/modules/core/components/policy/StatusCharts.vue
@@ -34,6 +34,4 @@ const clusterScope = computed(() => {
 
   return Object.values(props.data.charts.clusterScope || {}).reduce((acc, res) => acc + res, 0) > 0
 })
-
-const source = computed(() => props.data.source)
 </script>
diff --git a/frontend/pages/resource/[id].vue b/frontend/pages/resource/[id].vue
index 0ab2c382..d033d16f 100644
--- a/frontend/pages/resource/[id].vue
+++ b/frontend/pages/resource/[id].vue
@@ -18,7 +18,7 @@
           <v-card-subtitle class="pb-4 text-grey-lighten-2" style="opacity: 1">{{ data.resource.apiVersion }} {{ data.resource.kind }}</v-card-subtitle>
         </div>
         <v-card-text>
-          <graph-resource-result-counts :data="data.results as any" />
+          <graph-resource-result-counts :data="data.results" />
         </v-card-text>
       </v-card>
     </app-row>