Added styling

2026-10-16 13:56:43 +00:00 · 2023-07-14 16:26:18 -07:00
parent 67d5f52aca
commit d69465517f
10 changed files with 227 additions and 171 deletions
@@ -0,0 +1,111 @@
+import { useEffect, useState } from "react";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+
+import {
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr} from "@app/components/v2";
+import getRisksByOrganization, { GitRisks } from "@app/pages/api/secret-scanning/getRisksByOrganization";
+import { RiskStatus } from "@app/pages/api/secret-scanning/updateRiskStatus";
+
+export const SecretScanningLogsTable = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [gitRisks, setGitRisks] = useState<GitRisks[]>([]);
+    const [selectedRiskStatus, setSelectedRiskStatus] = useState("");
+
+    const handleSelectRiskStatusUpdate = (event: any) => {
+        setSelectedRiskStatus(event.target.value);
+    };
+
+    useEffect(() => {
+        const fetchRisks = async () => {
+            setIsLoading(true);
+            const risks = await getRisksByOrganization(String(localStorage.getItem("orgData.id")))
+            setGitRisks(risks);
+            setIsLoading(false);
+        }
+
+        fetchRisks();
+    },[])
+
+
+    return (
+        <TableContainer className="mt-8">
+            <Table>
+              <THead>
+                <Tr>
+                  <Th className="flex-1">Date</Th>
+                  <Th className="flex-1">Secret Type</Th>
+                  <Th className="flex-1">View Risk</Th>
+                  <Th className="flex-1">Info</Th>
+                  <Th className="flex-1">Status</Th>
+                  <Th className="flex-1">Action</Th>
+                  <Th className="w-5" />
+                </Tr>
+              </THead>
+              <TBody>
+                {!isLoading && gitRisks && gitRisks?.map((risk) => {
+                    return (
+                        <Tr key={risk.ruleID} className="h-10">
+                            <Td>{risk.createdAt}</Td>
+                            <Td>{risk.ruleID}</Td>
+                            <Td>
+                                <a
+                                    href={`https://github.com/${risk.repositoryFullName}/blob/${risk.commit}/${risk.file}#L${risk.startLine}-L${risk.endLine}`}
+                                    target="_blank"
+                                    className="text-red-500" rel="noreferrer"
+                                >
+                                View Exposed Secret
+                                </a>
+                            </Td>
+                            <Td>
+                                <div className="font-bold">
+                                    <a href={`https://github.com/${risk.repositoryFullName}`}>
+                                        {risk.repositoryFullName}
+                                    </a>
+                                </div>
+                                <div className="text-xs">
+                                    <span>{risk.file}</span><br/>
+                                    <br/>
+                                    <span className="font-bold">{risk.author}</span><br/>
+                                    <span>{risk.email}</span>
+                                </div>    
+                            </Td>
+                            <Td>{risk.isResolved ? "Resolved" : "Needs Attention"}</Td>
+                            <Td>
+                                <select
+                                    value={selectedRiskStatus}
+                                    onChange={handleSelectRiskStatusUpdate}
+                                    className="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                                >
+                                    <option>Unresolved</option>
+                                    <option value={RiskStatus.RESOLVED_FALSE_POSITIVE}>This is a false positive</option>
+                                    <option value={RiskStatus.RESOLVED_REVOKED}>I have rotated the secret, resolve risk</option>
+                                    <option value={RiskStatus.RESOLVED_NOT_REVOKED}>No rotate needed, resolve</option>
+                                </select>
+                            </Td>
+                        </Tr>
+                    );
+                })}
+                {isLoading && <TableSkeleton columns={7} key="gitRisks" />}
+                {!isLoading && gitRisks && gitRisks?.length === 0 && (
+                    <Tr>
+                        <Td colSpan={7}>
+                            <EmptyState 
+                                title="No risks detected." 
+                                icon={faCheck}
+                            />
+                        </Td>
+                    </Tr>
+                )}
+              </TBody>
+            </Table>
+        </TableContainer>
+    );
+}