feat: support multi-container

.github/workflows/build.yaml

@@ -0,0 +1,17 @@
+name: release
+on: 
+    workflow_dispatch:
+    push:
+        branches:
+            - 'main'
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+      - run: npm ci
+      - run: npm run build

.github/workflows/release.yaml

@@ -1,9 +1,6 @@
 name: release
 on: 
     workflow_dispatch:
-    push:
-        branches:
-            - 'main'
 jobs:
   build:
     runs-on: ubuntu-latest

CHANGELOG.md

@@ -1,2 +1,6 @@
+## v0.2.0 2024-04-13
+- `Enhancement`: Allow reports display for pods with multiple containers
+- Minor styling updates to improve dark theme visibility
+
 ## v0.1.0 2024-04-07
 - Initial release

README.md

@@ -27,9 +27,9 @@ server:
       - name: extension-trivy
         env:
           - name: EXTENSION_URL
-            value: https://github.com/mziyabo/argocd-trivy-extension/releases/download/v0.1.0/extension-trivy.tar
+            value: https://github.com/mziyabo/argocd-trivy-extension/releases/download/v0.2.0/extension-trivy.tar
           - name: EXTENSION_CHECKSUM_URL
-            value: https://github.com/mziyabo/argocd-trivy-extension/releases/download/v0.1.0/extension-trivy_checksums.txt
+            value: https://github.com/mziyabo/argocd-trivy-extension/releases/download/v0.2.0/extension-trivy_checksums.txt
 ```
 
 ### Kustomize
@@ -49,9 +49,9 @@ spec:
           image: quay.io/argoprojlabs/argocd-extension-installer:v0.0.1
           env:
           - name: EXTENSION_URL
-            value: https://github.com/mziyabo/argocd-trivy-extension/releases/download/v0.1.0/extension-trivy.tar
+            value: https://github.com/mziyabo/argocd-trivy-extension/releases/download/v0.2.0/extension-trivy.tar
           - name: EXTENSION_CHECKSUM_URL
-            value: https://github.com/mziyabo/argocd-trivy-extension/releases/download/v0.1.0/extension-trivy_checksums.txt
+            value: https://github.com/mziyabo/argocd-trivy-extension/releases/download/v0.2.0/extension-trivy_checksums.txt
           volumeMounts:
             - name: extensions
               mountPath: /tmp/extensions/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "argocd-trivy-extension",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.11.4",

src/components/dashboard/dashboard.js

@@ -16,6 +16,18 @@ class Dashboard extends Component {
         fetchData();
     }
 
+    componentDidUpdate(prevProp, prevState){
+        if (prevProp.reportUrl !== this.props.reportUrl) {
+            const fetchData = async () => {
+                const res = await DashboardData(this.props.reportUrl).then(data => {
+                    return data;
+                })
+                this.setState(res);
+            }
+            fetchData();
+        }
+    }
+
     render() {
         const { severityData, patchSummaryData, topVulnerableResourcesData, vulnerabilitiesByType, vulnerabilityAgeDistribution, noVulnerabilityData } = this.state;
 

src/components/grid/vulnerability-report.js

@@ -1,10 +1,10 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { Grid, html } from 'gridjs';
 import { GridData } from '../../utils/data';
 import "./vulnerability-report.scss";
 
 function DataGrid({ reportUrl }) {
-    const tableRef = useRef(null);
+    let tableRef = useRef(null);
 
     const c = [
         "Resource",
@@ -44,20 +44,34 @@ function DataGrid({ reportUrl }) {
         }
     ];
 
+    const [grid] = useState(new Grid({
+        columns: c,
+        data: [],
+        sort: true,
+        search: true,
+        pagination: {
+            limit: 25,
+            summary: false
+        }
+    }))
+
     useEffect(() => {
-        new Grid({
-            columns: c,
-            data: () => {
-                return GridData(reportUrl) != null ? GridData(reportUrl) : []
-            },
-            sort: true,
-            search: true,
-            pagination: {
-                limit: 25,
-                summary: false
-            }
-        }).render(tableRef.current);
-    });
+        if (tableRef.current.childNodes.length === 0) {
+            grid.updateConfig({
+                data: () => {
+                    return GridData(reportUrl)
+                },
+            }).render(tableRef.current)
+        }
+        else {
+            grid.updateConfig({
+                data: () => {
+                    return GridData(reportUrl)
+                },
+            }).forceRender()
+        }
+    }
+    );
 
     return (
         <div className="vulnerability-report__wrapper" ref={tableRef} />

src/components/grid/vulnerability-report.scss

@@ -28,6 +28,55 @@
         border-radius: 7px;
         box-shadow: 1px 2px 3px rgba(0, 0, 0, .1)
     }
+
+    &__container_dropdown {
+        background-color: transparent;
+        border-left: none;
+        border-right: none;
+        border-top: none;
+        color: #363c4a;
+        font-size: 15px;
+        padding: 8px 0;
+        position: absolute;
+        right: 10px;
+        top: 15px;
+        width: 170px;
+        z-index: 1;
+    }
+
+    .theme-light &__container_dropdown {
+        color: #363c4a;
+        border-bottom: 2px solid #dee6eb
+    }
+
+    .theme-dark &__container_dropdown {
+        color: #fff;
+        border-bottom: 2px solid #495763
+    }
+
+    .theme-light &__container_dropdown:focus {
+        outline: 0;
+        border-color: #00a2b3
+    }
+
+    .theme-dark &__container_dropdown:focus {
+        outline: 0;
+        border-color: #33BDD0
+    }
+}
+
+.Mui-selected .theme-dark {
+    color: #fff;
+    border-color: #33BDD0
+}
+
+.Mui-selected .theme-light {
+    color: #363c4a;
+    border-color: #00a2b3
+}
+
+.theme-dark .MuiTab-textColorPrimary {
+    color: #1fbdd0;
 }
 
 .gridjs-sort {
@@ -80,12 +129,12 @@
 }
 
 .gridjs-pagination .gridjs-pages button {
-    padding: 0px 3px;
+    padding: 0 3px;
 }
 
 table {
     border-collapse: collapse;
-    min-width: 1000px;
+    min-width: 100%;
 }
 
 tr {

src/index.js

@@ -8,39 +8,48 @@ const Extension = (props) => {
 
   const { resource, application } = props;
   const appName = application?.metadata?.name || "";
-  let container = resource?.spec?.template?.spec?.containers[0]?.name || "";
-  let resourceName = resource?.metadata?.name || "";
-  let resourceNamespace = resource?.metadata?.namespace || "";
-  let resourceKind = resource?.kind?.toLowerCase() || "";
+  const resourceNamespace = resource?.metadata?.namespace || "";
+  const isPod = resource?.kind === "Pod"
+  const resourceName = isPod ? resource?.metadata?.ownerReferences[0].name.toLowerCase() : resource?.metadata?.name;
+  const resourceKind = isPod ? resource?.metadata?.ownerReferences[0].kind.toLowerCase() : resource?.kind?.toLowerCase();
 
+  let [container] = useState(isPod ? resource?.spec?.containers[0]?.name : resource?.spec?.template?.spec?.containers[0]?.name);
 
-  if (resource?.kind === "Pod") {
-    container = resource?.spec?.containers[0]?.name
-    resourceName = resource?.metadata?.ownerReferences[0].name.toLowerCase()
-    resourceKind = resource?.metadata?.ownerReferences[0].kind.toLowerCase()
-  }
+  const baseURI = `${window.location.origin}/api/v1/applications/${appName}/resource`
+  let [reportUrl, setReportUrl] = useState(`${baseURI}?name=${resourceKind}-${resourceName}-${container}&namespace=${resourceNamespace}&resourceName=${resourceKind}-${resourceName}-${container}&version=v1alpha1&kind=VulnerabilityReport&group=aquasecurity.github.io`);
 
-  const reportUrl = `${window.location.origin}/api/v1/applications/${appName}/resource?name=${resourceKind}-${resourceName}-${container}&namespace=${resourceNamespace}&resourceName=${resourceKind}-${resourceName}-${container}&version=v1alpha1&kind=VulnerabilityReport&group=aquasecurity.github.io`
+  const containers = isPod ? resource?.spec?.containers.map(c => c.name) : resource?.spec?.template?.spec?.containers.map(c => c.name)
 
   const [currentTabIndex, setCurrentTabIndex] = useState(0);
   const handleTabChange = (e, tabIndex) => {
-    console.log(tabIndex);
     setCurrentTabIndex(tabIndex);
   };
 
+  const onOptionChangeHandler = (event) => {
+    container = event.target.value
+    setReportUrl(`${baseURI}?name=${resourceKind}-${resourceName}-${container}&namespace=${resourceNamespace}&resourceName=${resourceKind}-${resourceName}-${container}&version=v1alpha1&kind=VulnerabilityReport&group=aquasecurity.github.io`)
+  };
+
   return (
-    <React.Fragment>
-      <Tabs value={currentTabIndex} onChange={handleTabChange}>
-        <Tab label='Table' />
-        <Tab label='Dashboard' />
-      </Tabs>
-      {currentTabIndex === 0 && (
-        <DataGrid reportUrl={reportUrl} />
-      )}
-      {currentTabIndex === 1 && (
-        <Dashboard reportUrl={reportUrl} />
-      )}
-    </React.Fragment>
+    <div>
+      <React.Fragment>
+        <select class="vulnerability-report__container_dropdown" onChange={onOptionChangeHandler}>
+          {containers.map((container, index) => {
+            return (<option key={index} value={container}>{container}</option>)
+          })}
+        </select>
+        <Tabs value={currentTabIndex} onChange={handleTabChange}>
+          <Tab label='Table' />
+          <Tab label='Dashboard' />
+        </Tabs>
+        {currentTabIndex === 0 && (
+          <DataGrid reportUrl={reportUrl} />
+        )}
+        {currentTabIndex === 1 && (
+          <Dashboard reportUrl={reportUrl} />
+        )}
+      </React.Fragment>
+    </div>
   );
 };
 

src/utils/data.js

@@ -47,7 +47,8 @@ export async function DashboardData(reportUrl) {
     patchSummaryData: patchSummaryData(),
     topVulnerableResourcesData: topVulnerableResourcesData(15),
     vulnerabilityAgeDistribution: vulnerabilityAgeDistribution(),
-    vulnerabilitiesByType: vulnerabilitiesByType()
+    vulnerabilitiesByType: vulnerabilitiesByType(),
+    noVulnerabilityData: false
   }
 }