Merge pull request #1710 from deepfence/ui-scroll-threat-graph

UI: Attack path graph resizes on dashboard page & link to posture from dashboard
deepfence · Nov 6, 2023 · fed37f1 · fed37f1
2 parents fb47ab4 + 5f7a169
commit fed37f1
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 37 deletions.
diff --git a/deepfence_frontend/apps/dashboard/src/features/dashboard/components/Posture.tsx b/deepfence_frontend/apps/dashboard/src/features/dashboard/components/Posture.tsx
@@ -1,9 +1,11 @@
 import { useSuspenseQuery } from '@suspensive/react-query';
 import { Suspense, useEffect, useState } from 'react';
+import { generatePath } from 'react-router-dom';
 import { useMeasure } from 'react-use';
 import { Card, CircleSpinner } from 'ui-components';
 
 import { ModelPostureProvider } from '@/api/generated';
+import { DFLink } from '@/components/DFLink';
 import { ComplianceIconByPercent, PostureLogos } from '@/components/icons/posture';
 import { PostureIcon } from '@/components/sideNavigation/icons/Posture';
 import { getColorForCompliancePercent } from '@/constants/charts';
@@ -69,40 +71,46 @@ const PostureCardContent = () => {
 const PostureCardItem = ({ provider }: { provider: ModelPostureProvider }) => {
   const isScanned = provider.scan_count && provider.scan_count >= 0;
   return (
-    <div className="dark:bg-bg-side-panel rounded-[5px] flex" key={provider.name}>
-      <div className="flex items-center justify-center p-3">
-        <div className="h-14 w-14 shrink-0 dark:bg-bg-breadcrumb-bar rounded-full flex items-center justify-center">
-          <span className="w-9 h-9 block">
-            <PostureLogos name={provider.name ?? ''} />
-          </span>
-        </div>
-      </div>
-      <div className="flex flex-col gap-1 overflow-hidden">
-        <div className="py-2 text-t5 uppercase dark:text-text-input-value truncate">
-          {providersToNameMapping[provider.name ?? '']}
+    <DFLink
+      unstyled
+      to={generatePath(`/posture/accounts/${provider.name}`)}
+      className="ring-inset dark:hover:ring-bg-hover-3 dark:hover:ring-1 dark:focus:ring-bg-hover-3 dark:hover:shadow-[0px_0px_6px_1px_#044AFF] dark:focus:shadow-[0px_0px_6px_1px_#044AFF] dark:focus:ring-1"
+    >
+      <div className="dark:bg-bg-side-panel rounded-[5px] flex" key={provider.name}>
+        <div className="flex items-center justify-center p-3">
+          <div className="h-14 w-14 shrink-0 dark:bg-bg-breadcrumb-bar rounded-full flex items-center justify-center">
+            <span className="w-9 h-9 block">
+              <PostureLogos name={provider.name ?? ''} />
+            </span>
+          </div>
         </div>
-        <div
-          className="flex items-center gap-2"
-          style={{
-            color: getColorForCompliancePercent(
-              isScanned ? provider.compliance_percentage : null,
-            ),
-          }}
-        >
-          <div className="h-6 w-6 shrink-0">
-            <ComplianceIconByPercent
-              percent={isScanned ? provider.compliance_percentage : null}
-            />
+        <div className="flex flex-col gap-1 overflow-hidden">
+          <div className="py-2 text-t5 uppercase dark:text-text-input-value truncate">
+            {providersToNameMapping[provider.name ?? '']}
           </div>
-          <div className="text-h2">
-            {isScanned
-              ? `${formatPercentage(provider.compliance_percentage ?? 0, {
-                  maximumFractionDigits: 1,
-                })}`
-              : '-'}
+          <div
+            className="flex items-center gap-2"
+            style={{
+              color: getColorForCompliancePercent(
+                isScanned ? provider.compliance_percentage : null,
+              ),
+            }}
+          >
+            <div className="h-6 w-6 shrink-0">
+              <ComplianceIconByPercent
+                percent={isScanned ? provider.compliance_percentage : null}
+              />
+            </div>
+            <div className="text-h2">
+              {isScanned
+                ? `${formatPercentage(provider.compliance_percentage ?? 0, {
+                    maximumFractionDigits: 1,
+                  })}`
+                : '-'}
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </DFLink>
   );
 };
diff --git a/deepfence_frontend/apps/dashboard/src/features/dashboard/components/TopAttackPath.tsx b/deepfence_frontend/apps/dashboard/src/features/dashboard/components/TopAttackPath.tsx
@@ -21,7 +21,20 @@ export const TopAttackPaths = () => {
         }}
       >
         <Suspense fallback={<CircleSpinner size="md" />}>
-          <ThreatGraphComponent />
+          <ThreatGraphComponent
+            options={{
+              modes: {
+                default: [
+                  'drag-canvas',
+                  {
+                    type: '',
+                    maxZoom: 0,
+                    minZoom: 0,
+                  },
+                ],
+              },
+            }}
+          />
         </Suspense>
       </div>
     </Card>

diff --git a/deepfence_frontend/apps/dashboard/src/features/integrations/pages/IntegrationAdd.tsx b/deepfence_frontend/apps/dashboard/src/features/integrations/pages/IntegrationAdd.tsx
@@ -541,7 +541,7 @@ const IntegrationAdd = () => {
 
   return (
     <div className="m-4">
-      <div className="flex gapx-8">
+      <div className="flex gap-x-2">
         <Button
           variant="flat"
           startIcon={<PlusIcon />}

diff --git a/deepfence_frontend/apps/dashboard/src/features/threat-graph/components/ThreatGraph.tsx b/deepfence_frontend/apps/dashboard/src/features/threat-graph/components/ThreatGraph.tsx
@@ -1,6 +1,6 @@
 import '@/features/threat-graph/utils/threat-graph-custom-node';
 
-import { IEdge, INode } from '@antv/g6';
+import { IEdge, INode, Modes } from '@antv/g6';
 import { useSuspenseQuery } from '@suspensive/react-query';
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
@@ -10,7 +10,11 @@ import { GraphProviderThreatGraph, GraphThreatFiltersTypeEnum } from '@/api/gene
 import { ErrorStandardSolidIcon } from '@/components/icons/common/ErrorStandardSolid';
 import { useG6Graph } from '@/features/threat-graph/hooks/useG6Graph';
 import { ThreatGraphNodeModelConfig } from '@/features/threat-graph/utils/threat-graph-custom-node';
-import { G6GraphData, G6Node } from '@/features/topology/types/graph';
+import {
+  G6GraphData,
+  G6GraphOptionsWithoutContainer,
+  G6Node,
+} from '@/features/topology/types/graph';
 import { getNodeImage } from '@/features/topology/utils/graph-styles';
 import { queries } from '@/queries';
 
@@ -44,13 +48,15 @@ function highlihgtParentNodes(node: G6Node, value: boolean) {
 
 export const ThreatGraphComponent = ({
   onNodeClick,
+  options,
 }: {
   onNodeClick?: (model: ThreatGraphNodeModelConfig | undefined) => void;
+  options?: G6GraphOptionsWithoutContainer;
 }) => {
   const [measureRef, { height, width }] = useMeasure<HTMLDivElement>();
   const [container, setContainer] = useState<HTMLDivElement | null>(null);
 
-  const { graph } = useG6Graph(container);
+  const { graph } = useG6Graph(container, options);
   const { data } = useThreatGraphData();
 
   useEffect(() => {

diff --git a/deepfence_frontend/apps/dashboard/src/features/threat-graph/hooks/useG6Graph.tsx b/deepfence_frontend/apps/dashboard/src/features/threat-graph/hooks/useG6Graph.tsx
@@ -1,4 +1,5 @@
 import G6 from '@antv/g6';
+import { merge } from 'lodash-es';
 import { useEffect, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import { preset } from 'tailwind-preset';
@@ -190,8 +191,7 @@ export const useG6Graph = (
     const width = graphContainer.offsetWidth;
     const height = graphContainer.offsetHeight;
     const g6Graph = new G6.Graph({
-      ...getDefaultOptions(mode),
-      ...options,
+      ...merge(getDefaultOptions(mode), options),
       container: graphContainer,
       width,
       height,

diff --git a/...rontend/apps/dashboard/src/features/vulnerabilities/components/landing/TopAttackPaths.tsx b/...rontend/apps/dashboard/src/features/vulnerabilities/components/landing/TopAttackPaths.tsx
@@ -136,6 +136,16 @@ export const VulnerabilityThreatGraph = ({
       ranksep: 40,
       preventOverlap: true,
     },
+    modes: {
+      default: [
+        'drag-canvas',
+        {
+          type: '',
+          maxZoom: 0,
+          minZoom: 0,
+        },
+      ],
+    },
   });
   const { data } = useVulnerabilityThreatGraphData(nodeIds);