Most exploitable dashboard changes (#2327)

dashboard changes for most exploitable vulnerabilities
deepfence · Oct 4, 2024 · 7a3a3c7 · 7a3a3c7
1 parent b5f4e21
commit 7a3a3c7
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 937 deletions.
diff --git a/...ce_frontend/apps/dashboard/src/features/vulnerabilities/components/landing/CardHeader.tsx b/...ce_frontend/apps/dashboard/src/features/vulnerabilities/components/landing/CardHeader.tsx
@@ -11,20 +11,22 @@ export const CardHeader = ({
 }: {
   icon: ReactNode;
   title: string;
-  path: string;
+  path?: string;
 }) => {
   return (
     <div className="flex items-center gap-2 text-text-text-and-icon border-b dark:border-df-gray-900 border-bg-grid-border px-2 py-3">
       <span className="h-4 w-4 shrink-0">{icon}</span>
       <TruncatedText className="text-t2 uppercase truncate flex-1" text={title} />
-      <DFLink to={path}>
-        <div className="text-p4 leading-0 flex gap-x-1 items-center">
-          More
-          <div className="h-4 w-4 shrink-0 -rotate-90 justify-self-end -mr-1 hover:underline">
-            <CaretDown />
+      {path && (
+        <DFLink to={path}>
+          <div className="text-p4 leading-0 flex gap-x-1 items-center">
+            More
+            <div className="h-4 w-4 shrink-0 -rotate-90 justify-self-end -mr-1 hover:underline">
+              <CaretDown />
+            </div>
           </div>
-        </div>
-      </DFLink>
+        </DFLink>
+      )}
     </div>
   );
 };
diff --git a/...ps/dashboard/src/features/vulnerabilities/components/landing/MostExploitablePromoCard.tsx b/...ps/dashboard/src/features/vulnerabilities/components/landing/MostExploitablePromoCard.tsx
@@ -0,0 +1,34 @@
+import { Button, Card } from 'ui-components';
+
+import { DFLink } from '@/components/DFLink';
+import { ArrowLine } from '@/components/icons/common/ArrowLine';
+import { VulnerabilityIcon } from '@/components/sideNavigation/icons/Vulnerability';
+import { CardHeader } from '@/features/vulnerabilities/components/landing/CardHeader';
+
+export const MostExploitablePromoCard = () => {
+  return (
+    <Card className="rounded min-h-full flex flex-col">
+      <CardHeader
+        icon={<VulnerabilityIcon />}
+        title={'Most Exploitable Vulnerabilities'}
+      />
+      <div className="flex-1 flex flex-col items-center justify-center gap-4">
+        <div className="text-h4 text-text-input-value">Too Many Vulnerabilities?</div>
+        <DFLink
+          unstyled
+          className="my-2"
+          href="https://deepfence.io/threatstryker/"
+          target="_blank"
+        >
+          <Button
+            color="success"
+            endIcon={<ArrowLine className="rotate-90" />}
+            className="bg-[#009852] dark:bg-[#15b77e]"
+          >
+            Get ThreatStryker
+          </Button>
+        </DFLink>
+      </div>
+    </Card>
+  );
+};
diff --git a/...s/dashboard/src/features/vulnerabilities/components/landing/VulnerabilitiesCountsCard.tsx b/...s/dashboard/src/features/vulnerabilities/components/landing/VulnerabilitiesCountsCard.tsx
@@ -149,29 +149,6 @@ export const UniqueVulnerabilitiesCountsCard = () => {
   );
 };
 
-export const MostExploitableVulnerabilitiesCountsCard = () => {
-  return (
-    <Card className="rounded min-h-full flex flex-col">
-      <CardHeader
-        icon={<VulnerabilityIcon />}
-        title={'Most Exploitable Vulnerabilities'}
-        path={'/vulnerability/most-exploitable'}
-      />
-      <div className="flex-1 flex flex-col">
-        <Suspense
-          fallback={
-            <div className="flex-1 flex items-center justify-center">
-              <CircleSpinner size="md" />
-            </div>
-          }
-        >
-          <MostExploitableVulnerabilitiesCardContent />
-        </Suspense>
-      </div>
-    </Card>
-  );
-};
-
 const UniqueVulnerabilitiesCardContent = () => {
   const { data } = useSuspenseQuery({
     ...queries.vulnerability.uniqueVulnerabilitiesCount(),
@@ -180,14 +157,6 @@ const UniqueVulnerabilitiesCardContent = () => {
   return <CardContent data={data} to="/vulnerability/unique-vulnerabilities" />;
 };
 
-const MostExploitableVulnerabilitiesCardContent = () => {
-  const { data } = useSuspenseQuery({
-    ...queries.vulnerability.mostExploitableVulnerabilitiesCount(),
-  });
-
-  return <CardContent data={data} to="/vulnerability/most-exploitable" />;
-};
-
 const CardContent = ({
   data,
   to,