Fixed style issues for designer review, utilized fetching secondary resource and pagination, resolved github issue #148: Feat: Column base filters on Registries overview page out of table

Author: xingzhang-suse

pkg/sbombastic-image-vulnerability-scanner/components/RecentUpdatedRegistries.vue

@@ -2,6 +2,7 @@
     <div class="chart-section">
         <div class="title">
             {{ t('imageScanner.registries.recentUpdatedRegistries.title') }}
+            <i class="icon icon-question-mark"></i>
         </div>
         <div class="status-list">
             <RegistryStatusUpdate v-for="registryStatus in registryStatusList" :registryStatus="registryStatus" />
@@ -37,12 +38,16 @@
         flex: 1 0 0;
         border-right: 1px solid #DCDEE7;
         .title {
+            display: flex;
+            align-items: center;
+            gap: 8px;
             color: #141419;
             font-family: Lato;
             font-size: 18px;
             font-style: normal;
             font-weight: 400;
             line-height: 21px; /* 116.667% */
+            margin-right: 8px;
         }
         .status-list {
             padding: 4px 8px;

pkg/sbombastic-image-vulnerability-scanner/components/StatusDistribution.vue

@@ -2,6 +2,7 @@
     <div class="chart-section">
         <div class="title">
             {{ t('imageScanner.registries.StatusDistribution.title') }}
+            <i class="icon icon-question-mark"></i>
         </div>
         <div class="severity-bar-chart">
             <BarChart :filterFn="filterFn" :chartData="chartData" colorPrefix="status" :description="t('imageScanner.registries.StatusDistribution.subTitle')" />
@@ -40,6 +41,9 @@
         gap: 12px;
         flex: 1 0 0;
         .title {
+            display: flex;
+            align-items: center;
+            gap: 8px;
             color: #141419;
             font-family: Lato;
             font-size: 18px;

pkg/sbombastic-image-vulnerability-scanner/components/common/ScanButton.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="btn role-primary"
+    class="btn role-primary scan-btn"
     :disabled="disableBtn"
     @click="startScan()"
 >
@@ -72,3 +72,11 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.scan-btn {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+</style>

pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts

@@ -3,55 +3,55 @@ export const REGISTRY_SCAN_TABLE = [
     name: "registry",
     labelKey: "imageScanner.registries.registrytable.header.registry",
     value: "metadata.name",
-    sort: "registry",
+    sort: "metadata.name",
     formatter: "RegistryNameCell",
   },
   {
     name: "namespace",
     labelKey: "imageScanner.registries.registrytable.header.namespace",
     value: "metadata.namespace",
-    sort: "namespace",
+    sort: "metadata.namespace",
   },
   {
     name: "uri",
     labelKey: "imageScanner.registries.registrytable.header.uri",
     value: "spec.uri",
-    sort: "uri",
+    sort: "spec.uri",
   },
   {
     name: "repositories",
     labelKey: "imageScanner.registries.registrytable.header.repos",
     value: "spec.repositories",
-    sort: "repositories",
+    sort: "spec.repositories",
   },
   {
     name: "scanInterval",
     labelKey: "imageScanner.registries.registrytable.header.schedule",
     value: (row: any) => `Every ${row.spec.scanInterval}`,
-    sort: "scanInterval",
+    sort: "spec.scanInterval",
   },
   {
     name: "status",
     labelKey: "imageScanner.registries.registrytable.header.status",
-    value: "currStatus",
+    value: "scanRec.currStatus",
     formatter: "RegistryStatusCellBadge",
-    sort: "status",
+    sort: "scanRec.currStatus",
     width: 100,
   },
   {
     name: "progress",
     labelKey: "imageScanner.registries.registrytable.header.progress",
-    getValue: (row: any) => row,
+    value: "scanRec.progress",
     formatter: "ProgressCell",
-    sort: "progress",
+    sort: "scanRec.progress",
     width: 120,
   },
   {
     name: "previousScan",
     labelKey: "imageScanner.registries.registrytable.header.prevScan",
-    getValue: (row: any) => row,
+    value: "scanRec.previousScan",
     formatter: "PreviousScanCell",
-    sort: "previousScan",
+    sort: "scanRec.previousScan",
     width: 200,
   },
 ];

pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue

@@ -1,6 +1,7 @@
 <script>
 import ProgressCell from "@pkg/formatters/ProgressCell";
 import TextWithPopedDetail from "@pkg/components/common/TextWithPopedDetail";
+import _ from 'lodash';
 export default {
   components: {
     ProgressCell,
@@ -9,40 +10,40 @@ export default {
   name: "PreviousScanCell",
   props: {
     value: {
-      type:    String,
+      type:    Object,
       required: true
     },
     row: {
       type: Object,
       required: true
     }
   },
-  methods: {
-    getStatusText(row) {
-      return row.prevScanStatus ? this.t(`imageScanner.enum.status.${row.prevScanStatus.toLowerCase()}`) : "";
+  computed: {
+    getStatusText() {
+      return this.value.prevScanStatus ? this.t(`imageScanner.enum.status.${this.value.prevScanStatus.toLowerCase()}`) : "";
     },
-    getStatusLabelClass(row) {
-      return row.prevScanStatus? row.prevScanStatus.toLowerCase() : "";
+    getStatusLabelClass() {
+      return this.value.prevScanStatus ? this.value.prevScanStatus.toLowerCase() : "";
     },
-    getStatusDotClass(row) {
-      return row.prevScanStatus? `dot ${row.prevScanStatus.toLowerCase()}` : "";
+    getStatusDotClass() {
+      return this.value.prevScanStatus ? `dot ${this.value.prevScanStatus.toLowerCase()}` : "";
     }
   }
 };
 </script>
 
 <template>
     <div class="previous-scan-cell">
-        <div :class="getStatusDotClass(row)"></div>
-        <div class="status" :class="getStatusLabelClass(row)">{{ getStatusText(row) }}</div> 
-        <div v-if="row.prevProgress">
-          <span>{{ t("imageScanner.general.at") }}</span><ProgressCell style="display: inline-block;" :row="{ metadata: { name: row.metadata.name }, progress: row.prevProgress, progressDetail: row.prevProgressDetail, error: null}" />
+        <div :class="getStatusDotClass"></div>
+        <div class="status" :class="getStatusLabelClass">{{ getStatusText }}</div>
+        <div v-if="value.prevProgress">
+          <span>{{ t("imageScanner.general.at") }}</span><ProgressCell style="display: inline-block;" :value="{ metadata: { name: row.metadata.name }, progress: value.prevProgress, progressDetail: value.prevProgressDetail, error: null}" />
         </div>
-        <div v-if="row.prevScanStatus?.toLowerCase() === 'failed' && row.PrevError">
+        <div v-if="value.prevScanStatus?.toLowerCase() === 'failed' && value.prevError">
           <span>|
             <TextWithPopedDetail
               :value="t('imageScanner.general.error')"
-              :detail="{ title: `${row.metadata.name} - ${t('imageScanner.registries.configuration.scanTable.header.error')}`, message: row.PrevError, type: 'error' }"
+              :detail="{ title: `${row.metadata.name} - ${t('imageScanner.registries.configuration.scanTable.header.error')}`, message: value.prevError, type: 'error' }"
             />
           </span>
         </div>

pkg/sbombastic-image-vulnerability-scanner/formatters/Progress.vue

@@ -17,7 +17,7 @@ export default {
 <template>
   <div class="progress-cell">
     <span v-if="progress" class="progress-text">{{ progress }}%</span>
-    <span v-else class="progress-text text-muted">n/a</span>
+    <span v-else class="progress-text text-muted none">n/a</span>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -29,6 +29,9 @@ export default {
   
   .progress-text {
     margin-left: 8px;
+    &.none {
+      margin-left: 12px;
+    }
   }
 }
 </style> 

pkg/sbombastic-image-vulnerability-scanner/formatters/ProgressCell.vue

@@ -2,6 +2,10 @@
 import TextWithPopedDetail from '@pkg/components/common/TextWithPopedDetail';
 export default {
   props: {
+    value: {
+      type: Object,
+      required: true
+    },
     row: {
       type: Object,
       required: true
@@ -15,19 +19,19 @@ export default {
 </script>
 <template>
   <div class="progress-cell">
-    <span v-if="row.progress">
+    <span v-if="value.progress">
       <TextWithPopedDetail
-          :value="`${row.progress}%`"
-          :detail="{ title: `${row.metadata.name} - ${row.progress}%`, message: row.progressDetail, type: 'info' }"
+          :value="`${value.progress}%`"
+          :detail="{ title: `${value.metadata?.name || value.registryName} - ${value.progress}%`, message: value.progressDetail, type: 'info' }"
       />
-      <span v-if="row.error">|
+      <span v-if="value.error">|
         <TextWithPopedDetail
           :value="t('imageScanner.general.error')"
-          :detail="{title: `${row.metadata.name} - ${t('imageScanner.registries.configuration.scanTable.header.error')}`, message: row.error, type: 'error' }"
+          :detail="{title: `${value.metadata?.name} - ${t('imageScanner.registries.configuration.scanTable.header.error')}`, message: value.error, type: 'error' }"
         />
       </span>
     </span>
-    <span v-else class="progress-text text-muted">n/a</span>
+    <span v-else class="progress-text text-muted none">n/a</span>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -36,5 +40,11 @@ export default {
   align-items: center;
   font-size: 14px;
   color: var(--text-secondary);
+  .progress-text {
+    margin-left: 8px;
+    &.none {
+      margin-left: 12px;
+    }
+  }
 }
 </style> 

pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml

@@ -52,6 +52,10 @@ imageScanner:
       title: Status distribution
       subTitle: registry scans
     registrytable:
+      filters:
+        placeholder:
+          name: Search by name
+          address: Search by address
       header:
         scan: Scan
         registry: Registry
@@ -281,6 +285,7 @@ imageScanner:
     at: at
     schedule: Every {i}
     reload: Reload
+    any: Any
 
 typeLabel:
   sbombastic.rancher.io.registry: Registries configuration

pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.registry_bak.vue

@@ -0,0 +1,78 @@
+<template>
+  
+    <PaginatedResourceTable
+      ref="registryTable"
+      :headers="headers"
+      :schema="schema"
+      :namespaced="false"
+      :table-actions="true"
+      :row-actions="true"
+      :fetchSecondaryResources="fetchSecondaryResources"
+      :fetchPageSecondaryResources="fetchPageSecondaryResources"
+      
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :overflow-x="overflowX"
+      :overflow-y="overflowY"
+      @selection="onSelectionChange"
+    >
+    </PaginatedResourceTable>
+</template>
+
+<script>
+
+  import { RESOURCE } from "@pkg/types";
+  import PaginatedResourceTable from '@shell/components/PaginatedResourceTable';
+  import SortableTable from '@shell/components/SortableTable';
+  import { REGISTRY_SCAN_TABLE } from "@pkg/config/table-headers";
+  import { FilterArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
+  
+  export default {
+    name: 'registries',
+    components: {
+      PaginatedResourceTable,
+      SortableTable,
+    },
+    data() {
+      return {
+        headers: REGISTRY_SCAN_TABLE,
+      }
+    },
+    beforeUnmount() {
+      clearInterval(this.keepAliveTimer);
+    },
+    methods: {
+      async fetchSecondaryResources({ canPaginate }) {
+        if (canPaginate) {
+          return;
+        }
+        console.log("fetchSecondaryResources");
+        return await this.$store.dispatch(`cluster/findAll`, { type: RESOURCE.SCAN_JOB });
+      },
+
+      /**
+       * PV columns need other resources in order to show data in some columns
+       *
+       * So when we have a page.... use those entries as filters when fetching the other resources
+       */
+      async fetchPageSecondaryResources({ canPaginate, force, page }) {
+          if (!page?.length) {
+              return;
+          }
+
+          const opt = {
+              force,
+              pagination: new FilterArgs({
+              filters: PaginationParamFilter.createMultipleFields(page.map((r) => new PaginationFilterField({
+                  field: 'id',
+                  value: `${r.metadata.namespace}/${r.metadata.name}`
+              }))),
+              })
+          };
+          const scanJobs = await this.$store.dispatch(`cluster/findAll`, { type: RESOURCE.SCAN_JOB, opt });
+          console.log("fetchSecondaryResources", scanJobs);
+          return scanJobs;
+      },
+    },
+  }
+
+</script>