feat: add filters per severity on vulnerabilities, misconfigurations and secrets

plugin.yaml

@@ -1,5 +1,5 @@
 name: "scan2html"
-version: "0.3.1"
+version: "0.3.2"
 maintainer: fatihtokus
 repository: github.com/fatihtokus/scan2html
 summary: A Trivy plugin that scans and outputs the results to a single page app.
@@ -10,8 +10,8 @@ description: |-
 platforms:
   - selector:
       os: windows
-    uri: https://github.com/fatihtokus/scan2html/releases/download/v0.3.1/scan2html.tar.gz
+    uri: https://github.com/fatihtokus/scan2html/releases/download/v0.3.2/scan2html.tar.gz
     bin: ./scan2html.sh
   -
-    uri: https://github.com/fatihtokus/scan2html/releases/download/v0.3.1/scan2html.tar.gz
-    bin: ./scan2html.sh
+    uri: https://github.com/fatihtokus/scan2html/releases/download/v0.3.2/scan2html.tar.gz
+    bin: ./scan2html.sh

scan2html.sh

@@ -151,7 +151,7 @@ function scan {
     fi
 
     # Using replace_text function
-   replace_text "$reportName" "{TEMP_DATA:mV}" "$result_json"
+   replace_text "$reportName" "{TEMP_DATA:pV}" "$result_json"
 
   echo "$reportName has been created!"
   trap 'rm -f $tmp_result' EXIT

src/frontend-app/src/components/shared/SeverityTag.tsx

@@ -5,25 +5,29 @@ const SeverityTag = ({ severity }: { severity: string }) => {
 
   switch (severity.toLowerCase()) {
     case "critical":
-      color = "#f50";
+      color = "#FF6666";
       break;
     case "high":
-      color = "#108ee9";
+      color = "#FF9966";
       break;
     case "medium":
-      color = "#2db7f5";
+      color = "#FFCC66";
       break;
     case "low":
-      color = "#87d068";
+      color = "#FFFF99";
       break;
     default:
-      color = "#ccc";
+      color = "#CCFFFF";
       break;
   }
 
   return (
-    <Tag color={color} key={severity}>
+    <Tag color={color} key={severity} style={{
+      backgroundColor: color,
+      color: '#000', // Set text color to black
+    }}>
       {severity}
+
     </Tag>
   );
 };

src/frontend-app/src/components/shared/SeverityToolbar.css

@@ -0,0 +1,9 @@
+/* SeverityToolbar.css */
+.ant-btn {
+    border: none;
+    margin-right: 8px;
+  }
+
+  .ant-space-item:last-child .ant-btn {
+    margin-right: 0;
+  }

src/frontend-app/src/components/shared/SeverityToolbar.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Space } from 'antd';
+import './SeverityToolbar.css';
+import { NormalizedResultForDataTable } from '../../types';
+import { SeverityCount } from '../../types/ui/index.ts';
+
+interface SeverityToolbarProps {
+  result: NormalizedResultForDataTable[];
+  onSeverityClick: (severity: string) => void;
+}
+
+const SeverityToolbar: React.FC<SeverityToolbarProps> = ({ result, onSeverityClick }) => {
+  const [resultsPerSeverity, setResultsPerSeverity] = useState<SeverityCount[]>([]);
+
+  useEffect(() => {
+    const tmpResult = {
+      critical: 0,
+      high: 0,
+      medium: 0,
+      low: 0,
+      negligible: 0
+    };
+
+    result.forEach(item => {
+      switch (item.Severity?.toLowerCase()) {
+        case 'critical':
+          tmpResult.critical += 1;
+          break;
+        case 'high':
+          tmpResult.high += 1;
+          break;
+        case 'medium':
+          tmpResult.medium += 1;
+          break;
+        case 'low':
+          tmpResult.low += 1;
+          break;
+        default:
+          tmpResult.negligible += 1;
+          break;
+      }
+    });
+
+    setResultsPerSeverity([
+      { severity: 'Critical', count: tmpResult.critical, color: '#FF6666' },
+      { severity: 'High', count: tmpResult.high, color: '#FF9966' },
+      { severity: 'Medium', count: tmpResult.medium, color: '#FFCC66' },
+      { severity: 'Low', count: tmpResult.low, color: '#FFFF99' },
+      { severity: 'Negligible', count: tmpResult.negligible, color: '#CCFFFF' },
+      { severity: 'All', count: result.length, color: '#DDEE' },
+    ]);
+  }, [result]);
+
+  return (
+    <Space>
+      {resultsPerSeverity.map(({ severity, count, color }) => (
+        <Button
+          key={severity}
+          style={{
+            backgroundColor: color,
+            color: '#000', // Set text color to black
+          }}
+          onClick={() => onSeverityClick(severity.toLowerCase())}
+        >
+          {count} {severity}
+        </Button>
+      ))}
+    </Space>
+  );
+};
+
+export default SeverityToolbar;

src/frontend-app/src/components/trivy-report/Misconfigurations.tsx

@@ -3,12 +3,13 @@ import type { InputRef } from "antd";
 import { Button, Input, Space, Table } from "antd";
 import type { ColumnType, ColumnsType } from "antd/es/table";
 import type { FilterConfirmProps } from "antd/es/table/interface";
-import { useRef, useState } from "react";
+import { useRef, useState, useEffect} from "react";
 import SeverityTag from "../shared/SeverityTag";
 import { severityFilters } from "../../constants";
 import { NormalizedResultForDataTable, DataIndexForNormalizedResultForDataTable } from "../../types";
 import Highlighter from "react-highlight-words";
 import { filterDropdown, localeCompare, severityCompare } from "../../utils";
+import SeverityToolbar from '../shared/SeverityToolbar.tsx';
 
 interface MisconfigurationsProps {
   result: NormalizedResultForDataTable[];
@@ -18,8 +19,18 @@ const Misconfigurations: React.FC<MisconfigurationsProps> = ({ result }) => {
   console.log("Vulnerabilities:", result);
   const [searchText, setSearchText] = useState("");
   const [searchedColumn, setSearchedColumn] = useState("");
+  const [filteredData, setFilteredData] = useState<NormalizedResultForDataTable[]>([]);
   const searchInput = useRef<InputRef>(null);
 
+  useEffect(() => {
+    setFilteredData(result);
+  }, [result]);
+
+  const handleSeverityClick = (severity: string) => {
+    const filtered = result.filter(item => severity === 'all' || item.Severity?.toLowerCase() === severity); //doesn't work for negligible
+    setFilteredData(filtered);
+  };
+
   const handleSearch = (selectedKeys: string[], confirm: (param?: FilterConfirmProps) => void, dataIndex: DataIndexForNormalizedResultForDataTable) => {
     confirm();
     setSearchText(selectedKeys[0]);
@@ -149,8 +160,9 @@ const Misconfigurations: React.FC<MisconfigurationsProps> = ({ result }) => {
 
   return (
     <>
-      <Table columns={columns} dataSource={result} pagination={{ defaultPageSize: 20 }} size="small" sticky />
-    </>
+    <SeverityToolbar result={result} onSeverityClick={handleSeverityClick}/>
+    <Table columns={columns} dataSource={filteredData} pagination={{ defaultPageSize: 20 }} size="small" sticky />
+  </>
   );
 };
 

src/frontend-app/src/components/trivy-report/Secrets.tsx

@@ -3,9 +3,10 @@ import type { InputRef } from "antd";
 import { Button, Input, Space, Table } from "antd";
 import type { ColumnType, ColumnsType } from "antd/es/table";
 import type { FilterConfirmProps } from "antd/es/table/interface";
-import { useRef, useState } from "react";
+import { useRef, useState, useEffect } from "react";
 import { NormalizedResultForDataTable, DataIndexForNormalizedResultForDataTable } from "../../types";
 import { filterDropdown, localeCompare, severityCompare } from "../../utils";
+import SeverityToolbar from '../shared/SeverityToolbar.tsx';
 
 import SeverityTag from "../shared/SeverityTag";
 import { severityFilters } from "../../constants";
@@ -19,8 +20,18 @@ const Secrets: React.FC<SecretsProps> = ({ result }) => {
   console.log("Secrets:", result);
   const [searchText, setSearchText] = useState("");
   const [searchedColumn, setSearchedColumn] = useState("");
+  const [filteredData, setFilteredData] = useState<NormalizedResultForDataTable[]>([]);
   const searchInput = useRef<InputRef>(null);
 
+  useEffect(() => {
+    setFilteredData(result);
+  }, [result]);
+
+  const handleSeverityClick = (severity: string) => {
+    const filtered = result.filter(item => severity === 'all' || item.Severity?.toLowerCase() === severity); //doesn't work for negligible
+    setFilteredData(filtered);
+  };
+
   const handleSearch = (selectedKeys: string[], confirm: (param?: FilterConfirmProps) => void, dataIndex: DataIndexForNormalizedResultForDataTable) => {
     confirm();
     setSearchText(selectedKeys[0]);
@@ -159,7 +170,8 @@ const Secrets: React.FC<SecretsProps> = ({ result }) => {
 
   return (
     <>
-      <Table columns={columns} dataSource={result} pagination={{ defaultPageSize: 20 }} size="small" sticky />
+      <SeverityToolbar result={result} onSeverityClick={handleSeverityClick}/>
+      <Table columns={columns} dataSource={filteredData} pagination={{ defaultPageSize: 20 }} size="small" sticky />
     </>
   );
 };