diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml new file mode 100644 index 0000000..d4f0e7a --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml index ad33268..3a832ff 100644 --- a/.github/workflows/release.yaml +++ b/.github/workflows/release.yaml @@ -1,9 +1,6 @@ name: release on: workflow_dispatch: - push: - branches: - - 'main' jobs: build: runs-on: ubuntu-latest diff --git a/CHANGELOG.md b/CHANGELOG.md index 2dbcfdf..c36c84f 100644 --- a/CHANGELOG.md +++ b/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 \ No newline at end of file diff --git a/README.md b/README.md index 897eaeb..02f7d36 100644 --- a/README.md +++ b/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/ diff --git a/package-lock.json b/package-lock.json index a574a37..9617b84 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "argocd-trivy-extension", - "version": "0.1.0", + "version": "0.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "argocd-trivy-extension", - "version": "0.1.0", + "version": "0.2.0", "dependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", diff --git a/package.json b/package.json index f698906..e920173 100644 --- a/package.json +++ b/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", diff --git a/src/components/dashboard/dashboard.js b/src/components/dashboard/dashboard.js index 5465326..eb32d7b 100644 --- a/src/components/dashboard/dashboard.js +++ b/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; diff --git a/src/components/grid/vulnerability-report.js b/src/components/grid/vulnerability-report.js index e776db3..566be3f 100644 --- a/src/components/grid/vulnerability-report.js +++ b/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 (
diff --git a/src/components/grid/vulnerability-report.scss b/src/components/grid/vulnerability-report.scss index a36d0bf..c8c59d8 100644 --- a/src/components/grid/vulnerability-report.scss +++ b/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 { diff --git a/src/index.js b/src/index.js index 66f0d40..16d1cc4 100644 --- a/src/index.js +++ b/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 ( - - - - - - {currentTabIndex === 0 && ( - - )} - {currentTabIndex === 1 && ( - - )} - +
+ + + + + + + {currentTabIndex === 0 && ( + + )} + {currentTabIndex === 1 && ( + + )} + +
); }; diff --git a/src/utils/data.js b/src/utils/data.js index db10094..16fa5aa 100644 --- a/src/utils/data.js +++ b/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 } }