UI: Container scan comparison (#2397)

add support for container scan comparison with containers with other tags - Introduced the `docker_image_name_with_tag` field in both `api-spec.json` and `api-spec-original.json` to enhance API capabilities. - Updated the `ModelContainer` interface to include the new field, ensuring proper type definition and validation. - Refactored the `CompareScanInputModal` component to use more descriptive variable names for scan results, improving co de clarity.
deepfence · Dec 16, 2024 · 304b015 · 304b015
1 parent cd25945
commit 304b015
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 8 deletions.
diff --git a/deepfence_frontend/apps/dashboard/api-spec-original.json b/deepfence_frontend/apps/dashboard/api-spec-original.json
@@ -14448,6 +14448,7 @@
           "processes",
           "docker_labels",
           "host_name",
+          "docker_image_name_with_tag",
           "docker_container_command",
           "docker_container_state",
           "docker_container_state_human",
@@ -14488,6 +14489,7 @@
           "docker_container_ports": { "type": "string" },
           "docker_container_state": { "type": "string" },
           "docker_container_state_human": { "type": "string" },
+          "docker_image_name_with_tag": { "type": "string" },
           "docker_labels": {
             "type": "object",
             "additionalProperties": {},

diff --git a/deepfence_frontend/apps/dashboard/api-spec.json b/deepfence_frontend/apps/dashboard/api-spec.json
@@ -13905,6 +13905,7 @@
           "processes",
           "docker_labels",
           "host_name",
+          "docker_image_name_with_tag",
           "docker_container_command",
           "docker_container_state",
           "docker_container_state_human",
@@ -13945,6 +13946,7 @@
           "docker_container_ports": { "type": "string" },
           "docker_container_state": { "type": "string" },
           "docker_container_state_human": { "type": "string" },
+          "docker_image_name_with_tag": { "type": "string" },
           "docker_labels": {
             "type": "object",
             "additionalProperties": {},

diff --git a/deepfence_frontend/apps/dashboard/src/api/generated/models/ModelContainer.ts b/deepfence_frontend/apps/dashboard/src/api/generated/models/ModelContainer.ts
@@ -98,6 +98,12 @@ export interface ModelContainer {
      * @memberof ModelContainer
      */
     docker_container_state_human: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ModelContainer
+     */
+    docker_image_name_with_tag: string;
     /**
      * 
      * @type {{ [key: string]: any; }}
@@ -248,6 +254,7 @@ export function instanceOfModelContainer(value: object): boolean {
     isInstance = isInstance && "docker_container_ports" in value;
     isInstance = isInstance && "docker_container_state" in value;
     isInstance = isInstance && "docker_container_state_human" in value;
+    isInstance = isInstance && "docker_image_name_with_tag" in value;
     isInstance = isInstance && "docker_labels" in value;
     isInstance = isInstance && "host_name" in value;
     isInstance = isInstance && "image" in value;
@@ -295,6 +302,7 @@ export function ModelContainerFromJSONTyped(json: any, ignoreDiscriminator: bool
         'docker_container_ports': json['docker_container_ports'],
         'docker_container_state': json['docker_container_state'],
         'docker_container_state_human': json['docker_container_state_human'],
+        'docker_image_name_with_tag': json['docker_image_name_with_tag'],
         'docker_labels': json['docker_labels'],
         'host_name': json['host_name'],
         'image': ModelContainerImageFromJSON(json['image']),
@@ -340,6 +348,7 @@ export function ModelContainerToJSON(value?: ModelContainer | null): any {
         'docker_container_ports': value.docker_container_ports,
         'docker_container_state': value.docker_container_state,
         'docker_container_state_human': value.docker_container_state_human,
+        'docker_image_name_with_tag': value.docker_image_name_with_tag,
         'docker_labels': value.docker_labels,
         'host_name': value.host_name,
         'image': ModelContainerImageToJSON(value.image),

diff --git a/deepfence_frontend/apps/dashboard/src/components/forms/CompareScanInputModal.tsx b/deepfence_frontend/apps/dashboard/src/components/forms/CompareScanInputModal.tsx
@@ -4,18 +4,18 @@ import { Button, Checkbox, CircleSpinner, Modal } from 'ui-components';
 import { ModelNodeIdentifierNodeTypeEnum } from '@/api/generated';
 import { ScanTimeList } from '@/components/forms/ScanTimeList';
 import { ImageTagType, SearchableTagList } from '@/components/forms/SearchableTagList';
-import { useScanResults as malwareScanResults } from '@/features/malwares/pages/MalwareScanResults';
-import { useScanResults as secretScanResults } from '@/features/secrets/pages/SecretScanResults';
-import { useScanResults as vulnerabilityScanResults } from '@/features/vulnerabilities/pages/VulnerabilityScanResults';
+import { useScanResults as useMalwareScanResults } from '@/features/malwares/pages/MalwareScanResults';
+import { useScanResults as useSecretScanResults } from '@/features/secrets/pages/SecretScanResults';
+import { useScanResults as useVulnerabilityScanResults } from '@/features/vulnerabilities/pages/VulnerabilityScanResults';
 import { ScanTypeEnum } from '@/types/common';
 
 const useScanResults = ({ scanType }: { scanType: ScanTypeEnum }) => {
   if (scanType === ScanTypeEnum.VulnerabilityScan) {
-    return vulnerabilityScanResults().data.data?.dockerImageName;
+    return useVulnerabilityScanResults().data.data?.dockerImageName;
   } else if (scanType === ScanTypeEnum.SecretScan) {
-    return secretScanResults().data.data?.dockerImageName;
+    return useSecretScanResults().data.data?.dockerImageName;
   } else if (scanType === ScanTypeEnum.MalwareScan) {
-    return malwareScanResults().data.data?.dockerImageName;
+    return useMalwareScanResults().data.data?.dockerImageName;
   }
   return '';
 };
@@ -90,7 +90,12 @@ const InputForm = ({
   return (
     <div className="flex flex-col gap-y-6">
       <>
-        {nodeType === ModelNodeIdentifierNodeTypeEnum.Image && (
+        {(
+          [
+            ModelNodeIdentifierNodeTypeEnum.Image,
+            ModelNodeIdentifierNodeTypeEnum.Container,
+          ] as string[]
+        ).includes(nodeType) && (
           <>
             <Checkbox
               label="Compare with other tags"
@@ -124,7 +129,7 @@ const InputForm = ({
             }}
             // node id should be selected tag nodeid
             nodeId={selectedTag?.nodeId}
-            nodeType={nodeType}
+            nodeType={ModelNodeIdentifierNodeTypeEnum.Image}
             scanType={scanType as ScanTypeEnum}
             noDataText="No scan to compare"
           />