add filter

frontend/modules/core/api.ts

@@ -118,8 +118,8 @@ export class CoreAPI {
     return $fetch<ResourceStatusCount[]>('/proxy/'+this.cluster+'/core/v1/resource-status-counts', { baseURL: this.baseURL, params: { id, ...filter }})
   }
 
-  resource (id: string) {
-    return $fetch<Resource>('/proxy/'+this.cluster+'/core/v1/resource', { baseURL: this.baseURL, params: { id }})
+  resource (id: string, filter?: Filter) {
+    return $fetch<Resource>('/proxy/'+this.cluster+'/core/v1/resource', { baseURL: this.baseURL, params: { id, ...filter }})
   }
 
   results (id: string, pagination?: Pagination, filter?: Filter) {

frontend/modules/core/components/CategoryTables.vue

@@ -2,8 +2,10 @@
   <v-row>
     <v-col cols="12">
       <v-card>
-        <v-card-title class="py-3">
-          <span class="text-h4">{{ capilize(source.name) }}</span>
+        <v-card-title class="py-4">
+          <span class="text-h5">
+            {{ capilize(source.name) }}
+          </span>
         </v-card-title>
       </v-card>
     </v-col>

frontend/modules/core/components/ResourceResultItem.vue

@@ -1,6 +1,6 @@
 <template>
   <v-divider />
-  <v-list-item :to="`/resource/${item.id}`">
+  <v-list-item :to="{ name: 'resource-id', query: { source, category }, params: { id: item.id }}">
     <template v-if="details" v-slot:prepend>
       <v-btn class="mr-2" variant="text" :icon="!open ? `mdi-chevron-up` : `mdi-chevron-down`" @click.stop.prevent="open = !open"></v-btn>
     </template>
@@ -30,6 +30,8 @@ const open = ref(false)
 const props = defineProps({
   item: { type: Object as PropType<ResourceResult>, required: true },
   details: { type: Boolean, default: false },
+  source: { type: String, required: false },
+  category: { type: String, required: false },
 })
 
 </script>

frontend/modules/core/components/ResourceResultList.vue

@@ -8,7 +8,7 @@
     </template>
   </v-toolbar>
   <v-list v-if="data?.items?.length && open" lines="two">
-    <ResourceResultItem v-for="item in data.items" :key="item.id" :item="item" :details="details" />
+    <ResourceResultItem v-for="item in data.items" :key="item.id" :item="item" :details="details" :source="source" :category="category" />
   </v-list>
   <template v-if="!pending && !(data.items.length)">
       <v-divider />

frontend/modules/core/components/ResultTable.vue

@@ -14,8 +14,8 @@
           <div v-show="open">
             <v-divider />
             <v-data-table-server
-              :items="items"
-              :items-length="data.count"
+              :items="results.results"
+              :items-length="results.count"
               :headers="headers"
               item-value="id"
               show-expand
@@ -63,7 +63,7 @@
 <script lang="ts" setup>
 import { type Dictionary, Status } from "~/modules/core/types";
 import { capilize } from "~/modules/core/layouthHelper";
-import type { PropType } from "vue";
+import { mapResults } from "~/modules/core/mapper";
 
 const props = defineProps<{
   source: string;
@@ -86,11 +86,6 @@ const options = reactive({
 const open = ref(true)
 const searchText = ref('')
 
-const sortByKeys = (dic: Dictionary): Dictionary => Object.keys(dic).sort().reduce<Dictionary>((obj, key) => {
-  obj[key] = dic[key]
-  return obj
-}, {})
-
 const { data, refresh } = useAPI(
     (api) => api.results(props.resource, {
       page: options.page,
@@ -109,30 +104,7 @@ watch(() => options.page, refresh)
 watch(() => options.itemsPerPage, refresh)
 watch(searchText, refresh)
 
-const items = computed(() => {
-  return data.value.items.map(({ properties, ...result }) => {
-    const chips: Dictionary = {}
-    const cards: Dictionary = {}
-    let hasProps = false
-
-    for (const prop in properties) {
-      if (properties[prop].length > 75) {
-        cards[prop] = properties[prop]
-      } else {
-        chips[prop] = properties[prop]
-      }
-      hasProps = true
-    }
-
-    return {
-      ...result,
-      properties: {},
-      cards: sortByKeys(cards),
-      chips: sortByKeys(chips),
-      hasProps
-    }
-  })
-})
+const results = computed(() => mapResults(data.value))
 
 const headers = [
   { title: 'Policy', key: 'policy', width: '33%' },

frontend/modules/core/components/SourcesStatus.vue

@@ -86,23 +86,25 @@
           </v-tab>
         </v-tabs>
         <v-divider />
-        <wait :time="1000" :key="source">
-          <v-card-text>
-            <ChartStatusPerNamespace :source="source" />
-          </v-card-text>
-          <v-divider />
-          <v-card-title>
-            Cluster Scoped Results
-          </v-card-title>
-          <v-card-text>
-            <ChartClusterResultCounts :source="source" class="px-0 pb-0" />
-          </v-card-text>
-          <template #placeholder>
+        <template v-if="source">
+          <wait :time="1000" :key="source">
             <v-card-text>
-              <v-progress-linear indeterminate color="primary" />
+              <ChartStatusPerNamespace :source="source" />
             </v-card-text>
-          </template>
-        </wait>
+            <v-divider />
+            <v-card-title>
+              Cluster Scoped Results
+            </v-card-title>
+            <v-card-text>
+              <ChartClusterResultCounts :source="source" class="px-0 pb-0" />
+            </v-card-text>
+            <template #placeholder>
+              <v-card-text>
+                <v-progress-linear indeterminate color="primary" />
+              </v-card-text>
+            </template>
+          </wait>
+        </template>
       </v-card>
     </v-col>
   </v-row>
@@ -162,8 +164,8 @@ const items = computed(() => {
 })
 
 watch(sources, (s) => {
-  if (!s || !s.length) return
+  if (!s || !s.length || source.value) return
 
-  source.value = s.sort((a, b) => a.name.localeCompare(b.name))[0]
+  source.value = s.sort((a, b) => a.name.localeCompare(b.name))[0].name
 })
 </script>

frontend/modules/core/components/chart/Findings.vue

@@ -21,16 +21,18 @@ const dataset = ref<Dataset[]>([])
 const labels = ref<string[]>([])
 const total = ref(0)
 
+const diff = 0.80
+
 const colors = (status: Status, amount: number) => {
-  const middle = Math.floor(amount / 2)
+  const middle = Math.floor(amount / 2) - 1
   const base = chroma(mapStatus(status))
 
   return Array.from(Array(amount).keys()).map((index) => {
     if (index < middle) {
-      return base.brighten(0.33 * (middle - index)).hex()
+      return base.brighten(diff * (middle - index)).hex()
     }
 
-    return base.darken(0.33 * (index - middle)).hex()
+    return base.darken(diff * (index - middle)).hex()
   })
 }
 

frontend/modules/core/components/select/ClusterSelect.vue

@@ -10,6 +10,7 @@
     prepend-inner-icon="mdi-kubernetes"
     style="max-width: 140px;"
     @update:model-value="input"
+    v-if="clusters.length > 1"
   />
 </template>
 

frontend/modules/core/mapper.ts

@@ -15,7 +15,7 @@ const statusToColor: { [status in Status]: string } = {
   [Status.PASS]: '#43A047',
   [Status.WARN]: '#FB8C00',
   [Status.FAIL]: '#EF5350',
-  [Status.ERROR]: '#F44336'
+  [Status.ERROR]: '#950011'
 }
 
 const statusToDarkColor: { [status in Status]: string } = {
@@ -26,17 +26,8 @@ const statusToDarkColor: { [status in Status]: string } = {
   [Status.ERROR]: '#B71C1C'
 }
 
-const statusToText: { [status in Status]: string } = {
-  [Status.SKIP]: 'Skipped',
-  [Status.PASS]: 'Passing',
-  [Status.WARN]: 'Warning',
-  [Status.FAIL]: 'Failing',
-  [Status.ERROR]: 'Errored'
-}
-
 export const mapPriority = (priority: Priority): string => priorityToColor[priority] || priorityToColor[Priority.DEBUG]
 export const mapStatus = (status: Status): string => statusToColor[status] || statusToColor[Status.SKIP]
-export const mapStatusText = (status: Status): string => statusToText[status] || statusToText[Status.SKIP]
 export const mapDarkStatus = (status: Status): string => statusToDarkColor[status] || statusToDarkColor[Status.SKIP]
 
 const maxChipLength = 75

frontend/pages/index.vue

@@ -38,8 +38,6 @@ const props = defineProps({
   sources: { types: Array, default: () => [] }
 })
 
-console.log(props.sources)
-
 const { data, refresh } = useAPI(
     (api) => api.countFindings({ kinds: [...kinds.value, ...clusterKinds.value] }),
     {

frontend/pages/resource/[id].vue

@@ -33,27 +33,80 @@
         </v-card>
       </v-col>
     </v-row>
-    <category-tables v-for="source in sources" :source="source" :resource="data.resource" :key="source" />
+    <v-infinite-scroll :onLoad="load" class="no-scrollbar">
+      <template v-for="source in loaded" :key="source">
+        <category-tables :source="source" :resource="data.resource" />
+      </template>
+      <template #empty></template>
+    </v-infinite-scroll>
   </v-container>
 </template>
 
 <script lang="ts" setup>
 import ResourceStatus from "~/modules/core/components/chart/ResourceStatus.vue";
 import ResourceResultCounts from "~/modules/core/components/chart/ResourceResultCounts.vue";
-import type { Source } from "~/modules/core/types";
+import type { Filter, Resource, ResourceStatusCount, Source } from "~/modules/core/types";
 
 const route = useRoute()
 const router = useRouter()
 
+const filter = computed(() => {
+  const f: Filter = {}
+  if (route.query.source && typeof route.query.source === 'string') { f.sources = [route.query.source] }
+  if (route.query.category && typeof route.query.category === 'string') { f.categories = [route.query.category] }
+
+  return f
+})
+
 const { data } = useAPI(
-    (api) => Promise.all([
-      api.resource(route.params.id as string),
-      api.resourceStatusCount(route.params.id as string),
-      api.sources(route.params.id as string),
-    ]).then(([resource, counts, sources]) => ({ resource, counts, sources })), {
-      default: () => ({ resource: {}, counts: [], sources: [] }),
+    async (api) => {
+      let [resource, counts, sources] = await Promise.all([
+        api.resource(route.params.id as string),
+        api.resourceStatusCount(route.params.id as string, filter.value),
+        api.sources(route.params.id as string)
+      ]);
+
+      if (route.query.source) {
+        sources = sources.filter(s => s.name === route.query.source)
+      }
+
+      if (route.query.category) {
+        sources = sources.map(s => ({
+          name: s.name,
+          categories: s.categories.filter(c => c.name === route.query.category)
+        }))
+      }
+
+      return { resource, counts, sources: sources ?? [route.query.source] };
+    }, {
+      default: () => ({ resource: {} as Resource, counts: [] as ResourceStatusCount[], sources: [] as Source[] }),
     }
 );
 
 const sources = computed(() => (data.value?.sources || []).sort((a: Source, b: Source) => a.name.localeCompare(b.name)))
+
+const loaded = ref<Source[]>([])
+const index = ref(1)
+
+watch(sources, (sources: Source[] | null) => {
+  loaded.value = (sources || []).slice(0, 1)
+})
+
+const load = ({ done }: any) => {
+  const sum = (sources.value || []).length
+  if (!sum) { return done('ok') }
+
+  const last = index.value
+  const next = index.value + 1 > sum ? sum :  index.value + 1
+
+  loaded.value = [...loaded.value, ...(sources.value || []).slice(last, next)]
+
+  index.value = next
+  if (next === sum) {
+    done('empty')
+  } else {
+    done('ok')
+  }
+}
+
 </script>