add status filter

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

frontend/modules/core/api.ts

@@ -60,8 +60,8 @@ export class CoreAPI {
     return exec<SourceDetails[]>(`/api/config/${this.cluster}/policy-sources`, { baseURL: this.baseURL, params: applyExcludes(filter, [...this.nsExcludes, ...this.clusterExcludes]) })
   }
 
-  policyDetails (source: string, policy: string, namespace?: string) {
-    return exec<PolicyDetails>(`/api/config/${this.cluster}/${source}/policy/details`, { baseURL: this.baseURL, params: applyExcludes({ policies: [policy], namespace }, [...this.nsExcludes, ...this.clusterExcludes]) })
+  policyDetails (source: string, policy: string, namespace?: string, status?: Status[]) {
+    return exec<PolicyDetails>(`/api/config/${this.cluster}/${source}/policy/details`, { baseURL: this.baseURL, params: applyExcludes({ policies: [policy], namespace, status }, [...this.nsExcludes, ...this.clusterExcludes]) })
   }
 
   policyHTMLReport (source: string, filter: { namespaces: string[]; categories: string[]; kinds: string[]; clusterScope: boolean; }) {

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

@@ -8,17 +8,16 @@
       hide-details
       label="Status"
       closable-chips
-      :model-value="modelValue"
+      :model-value="selected"
       @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)
+        (+{{ selected.length - 2 }} others)
       </span>
     </template>
   </v-select>
@@ -27,7 +26,9 @@
 <script lang="ts" setup>
 import {Status} from "../../types";
 
-const props = defineProps<{ source?: string; modelValue: string[] }>();
+const props = defineProps<{ source?: string; modelValue?: string[] }>();
+
+const selected = ref<string[]>(props.modelValue || []);
 
 const items: Status[] = [
   Status.PASS,
@@ -36,8 +37,11 @@ const items: Status[] = [
   Status.SKIP,
 ]
 
-const emit = defineEmits<{ 'update:modelValue': [status: string[]] }>()
+const input = defineRouteQuery('status', selected);
 
-const input = (current) => emit('update:modelValue', current);
+const emit = defineEmits<{ 'update:modelValue': [status: string[]] }>()
 
+watch(selected, (current) => {
+  emit('update:modelValue', current)
+}, { immediate: true });
 </script>

frontend/modules/core/components/policy/ClusterResults.vue

@@ -1,12 +1,11 @@
 <template>
-  <app-row v-if="data.count > 0 || !!searchText || !!(status || []).length">
+  <app-row v-if="data.count > 0 || !!searchText">
     <v-card>
       <v-toolbar color="transparent">
         <template #title>
           <span>Cluster Scoped Results</span>
         </template>
         <template #append>
-          <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>
@@ -72,6 +71,7 @@ const props = defineProps<{
   source: string;
   category?: string;
   policy?: string;
+  status?: Status[];
 }>()
 
 const options = reactive({
@@ -88,15 +88,14 @@ 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>({}))
 
 const { data, refresh } = useAPI(
     (api) => api.clusterResults({
       ...filter.value,
       sources: [props.source],
-      status: status.value ? status.value : undefined,
+      status: props.status ? props.status : undefined,
       policies: props.policy ? [props.policy] : undefined,
       search: searchText.value ? searchText.value : undefined,
     }, {
@@ -110,8 +109,8 @@ const { data, refresh } = useAPI(
 
 watch(() => options.page, () => refresh())
 watch(() => options.itemsPerPage, () => refresh())
+watch(() => props.status, () => refresh())
 watch(searchText, () => refresh())
-watch(status, () => refresh())
 
 watch(filter, onChange(refresh))
 

frontend/modules/core/components/policy/Item.vue

@@ -9,10 +9,10 @@
       {{ item.title }}
     </v-list-item-title>
     <template v-slot:append>
-      <ResultChip :status="Status.PASS" :count="item.results.pass" tooltip="pass results" />
-      <ResultChip class="ml-2" :status="Status.WARN" :count="item.results.warn" tooltip="warning results" />
-      <ResultChip class="ml-2" :status="Status.FAIL" :count="item.results.fail" tooltip="fail results" />
-      <ResultChip class="ml-2" :status="Status.ERROR" :count="item.results.error" tooltip="error results" />
+      <ResultChip :to="{ name: 'policies-source-policy', params: { source: item.source, policy: item.name }, query: { status: Status.PASS }}" :status="Status.PASS" :count="item.results.pass" tooltip="pass results" />
+      <ResultChip :to="{ name: 'policies-source-policy', params: { source: item.source, policy: item.name }, query: { status: Status.WARN }}" class="ml-2" :status="Status.WARN" :count="item.results.warn" tooltip="warning results" />
+      <ResultChip :to="{ name: 'policies-source-policy', params: { source: item.source, policy: item.name }, query: { status: Status.FAIL }}" class="ml-2" :status="Status.FAIL" :count="item.results.fail" tooltip="fail results" />
+      <ResultChip :to="{ name: 'policies-source-policy', params: { source: item.source, policy: item.name }, query: { status: Status.ERROR }}" class="ml-2" :status="Status.ERROR" :count="item.results.error" tooltip="error results" />
     </template>
   </v-list-item>
   <template v-if="open">

frontend/modules/core/components/policy/NamespaceSection.vue

@@ -5,7 +5,6 @@
         <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>
@@ -24,10 +23,9 @@
 <script setup lang="ts">
 import type { Status } from "~/modules/core/types";
 
-const props = defineProps<{ namespaces: string[]; source: string; policy?: string;  }>()
+const props = defineProps<{ namespaces: string[]; source: string; policy?: string; status?: Status[];  }>()
 
 const internal = ref<string[]>([])
-const status = ref<Status[]>([])
 
 const list = computed(() => {
   if (internal.value.length > 0) return internal.value

frontend/pages/policies/[source]/[policy].vue

@@ -7,6 +7,7 @@
             {{ capilize(route.params.source) }}: {{ data.title }}
           </v-toolbar-title>
           <template #append>
+            <form-status-select style="min-width: 200px;" class="mr-2" />
             <v-btn variant="text" color="white" prepend-icon="mdi-arrow-left" @click="router.back()">back</v-btn>
           </template>
         </v-toolbar>
@@ -16,8 +17,8 @@
     <policy-details :policy="data" v-if="data.showDetails" />
 
     <policy-status-charts :data="data" :policy="route.params.policy" />
-    <policy-cluster-results :source="route.params.source" :policy="route.params.policy" />
-    <policy-namespace-section :namespaces="data.namespaces" :source="route.params.source" :policy="route.params.policy" />
+    <policy-cluster-results :source="route.params.source" :policy="route.params.policy" :status="status" />
+    <policy-namespace-section :namespaces="data.namespaces" :source="route.params.source" :policy="route.params.policy" :status="status" />
   </v-container>
 </template>
 
@@ -29,7 +30,21 @@ import { capilize } from "~/modules/core/layouthHelper";
 const route = useRoute()
 const router = useRouter()
 
-const { data, refresh } = useAPI((api) => api.policyDetails(route.params.source, route.params.policy, route.query.namespace));
+const status = computed(() => {
+  if (!route.query.status) return undefined
+
+  if (Array.isArray(route.query.status)) return route.query.status
+
+  return [route.query.status]
+})
+
+const { data, refresh } = useAPI((api) => api.policyDetails(
+    route.params.source,
+    route.params.policy,
+    route.query.namespace,
+    status.value,
+));
 
 watch(route, onChange(refresh))
+watch(status, onChange(refresh))
 </script>