UI drilldown modifications (#255)

## Description UI drilldown modifications ## Type of Change [ ] Bug Fix [ ] New Feature [ ] Breaking Change [x] Refactor [ ] Documentation [ ] Other (please describe)
openclarity · Apr 17, 2023 · b6cb757 · b6cb757
1 parent 0463ec8
commit b6cb757
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 21 deletions.
diff --git a/ui/src/layout/AssetScans/AssetScanDetails.js b/ui/src/layout/AssetScans/AssetScanDetails.js
@@ -56,7 +56,7 @@ const AssetScanDetails = () => (
 
             return ({
                 title: target?.targetInfo?.instanceID,
-                subTitle: `scanned by ${scanConfigSnapshot?.name} on ${formatDate(startTime)}`
+                subTitle: `scanned by '${scanConfigSnapshot?.name}' on ${formatDate(startTime)}`
             })
         }}
         detailsContent={props => <DetailsContent {...props} />}

diff --git a/ui/src/layout/AssetScans/TabAssetScanDetails.js b/ui/src/layout/AssetScans/TabAssetScanDetails.js
@@ -10,6 +10,8 @@ import { formatDate, calculateDuration } from 'utils/utils';
 import { SCANS_PATHS } from 'layout/Scans';
 import StatusIndicator from './StatusIndicator';
 
+import COLORS from 'utils/scss_variables.module.scss';
+
 const STATUS_DISPLAY_ITEMS = [
     VULNERABIITY_FINDINGS_ITEM,
     ...Object.values(FINDINGS_MAPPING).filter(({value}) => value !== FINDINGS_MAPPING.PACKAGES.value)
@@ -59,7 +61,10 @@ const TabAssetScanDetails = ({data}) => {
             rightPlaneDisplay={() => (
                 <>
                     <Title medium>Asset scan status</Title>
-                    <StatusDisplay state={state} errors={errors} />
+                    <TitleValueDisplay title="Overview">
+                        <StatusDisplay state={state} errors={errors} />
+                    </TitleValueDisplay>
+                    <div style={{borderBottom: `2px solid ${COLORS["color-grey-lighter"]}`, margin: "20px 0"}}></div>
                     {
                         STATUS_DISPLAY_ITEMS.map(({dataKey, title}) => {
                             const {state, errors} = (status || {})[dataKey] || {};

diff --git a/ui/src/layout/Findings/Exploits/ExploitDetails.js b/ui/src/layout/Findings/Exploits/ExploitDetails.js
@@ -31,13 +31,13 @@ const DetailsContent = ({data}) => {
                     id: "asset",
                     title: "Asset details",
                     path: EXPLOIT_DETAILS_PATHS.ASSET_DETAILS,
-                    component: () => <AssetDetails assetData={asset} />
+                    component: () => <AssetDetails assetData={asset} withAssetLink />
                 },
                 {
                     id: "scan",
                     title: "Scan details",
                     path: EXPLOIT_DETAILS_PATHS.SCAN_DETAILS,
-                    component: () => <ScanDetails scanData={scan} />
+                    component: () => <ScanDetails scanData={scan} withScanLink />
                 }
             ]}
             withInnerPadding={false}

diff --git a/ui/src/layout/Findings/Malware/MalwareDetails.js b/ui/src/layout/Findings/Malware/MalwareDetails.js
@@ -31,13 +31,13 @@ const DetailsContent = ({data}) => {
                     id: "asset",
                     title: "Asset details",
                     path: MALWARE_DETAILS_PATHS.ASSET_DETAILS,
-                    component: () => <AssetDetails assetData={asset} />
+                    component: () => <AssetDetails assetData={asset} withAssetLink />
                 },
                 {
                     id: "scan",
                     title: "Scan details",
                     path: MALWARE_DETAILS_PATHS.SCAN_DETAILS,
-                    component: () => <ScanDetails scanData={scan} />
+                    component: () => <ScanDetails scanData={scan} withScanLink />
                 }
             ]}
             withInnerPadding={false}

diff --git a/ui/src/layout/Findings/Misconfigurations/MisconfigurationDetails.js b/ui/src/layout/Findings/Misconfigurations/MisconfigurationDetails.js
@@ -31,13 +31,13 @@ const DetailsContent = ({data}) => {
                     id: "asset",
                     title: "Asset details",
                     path: MISCONFIGURATION_DETAILS_PATHS.ASSET_DETAILS,
-                    component: () => <AssetDetails assetData={asset} />
+                    component: () => <AssetDetails assetData={asset} withAssetLink />
                 },
                 {
                     id: "scan",
                     title: "Scan details",
                     path: MISCONFIGURATION_DETAILS_PATHS.SCAN_DETAILS,
-                    component: () => <ScanDetails scanData={scan} />
+                    component: () => <ScanDetails scanData={scan} withScanLink />
                 }
             ]}
             withInnerPadding={false}

diff --git a/ui/src/layout/Findings/Packages/PackageDetails.js b/ui/src/layout/Findings/Packages/PackageDetails.js
@@ -31,13 +31,13 @@ const DetailsContent = ({data}) => {
                     id: "asset",
                     title: "Asset details",
                     path: PACKAGE_DETAILS_PATHS.ASSET_DETAILS,
-                    component: () => <AssetDetails assetData={asset} />
+                    component: () => <AssetDetails assetData={asset} withAssetLink />
                 },
                 {
                     id: "scan",
                     title: "Scan details",
                     path: PACKAGE_DETAILS_PATHS.SCAN_DETAILS,
-                    component: () => <ScanDetails scanData={scan} />
+                    component: () => <ScanDetails scanData={scan} withScanLink />
                 }
             ]}
             withInnerPadding={false}

diff --git a/ui/src/layout/Findings/Rootkits/RootkitDetails.js b/ui/src/layout/Findings/Rootkits/RootkitDetails.js
@@ -31,13 +31,13 @@ const DetailsContent = ({data}) => {
                     id: "asset",
                     title: "Asset details",
                     path: ROOTKIT_DETAILS_PATHS.ASSET_DETAILS,
-                    component: () => <AssetDetails assetData={asset} />
+                    component: () => <AssetDetails assetData={asset} withAssetLink />
                 },
                 {
                     id: "scan",
                     title: "Scan details",
                     path: ROOTKIT_DETAILS_PATHS.SCAN_DETAILS,
-                    component: () => <ScanDetails scanData={scan} />
+                    component: () => <ScanDetails scanData={scan} withScanLink />
                 }
             ]}
             withInnerPadding={false}

diff --git a/ui/src/layout/Findings/Secrets/SecretDetails.js b/ui/src/layout/Findings/Secrets/SecretDetails.js
@@ -31,13 +31,13 @@ const DetailsContent = ({data}) => {
                     id: "asset",
                     title: "Asset details",
                     path: SECRET_DETAILS_PATHS.ASSET_DETAILS,
-                    component: () => <AssetDetails assetData={asset} />
+                    component: () => <AssetDetails assetData={asset} withAssetLink />
                 },
                 {
                     id: "scan",
                     title: "Scan details",
                     path: SECRET_DETAILS_PATHS.SCAN_DETAILS,
-                    component: () => <ScanDetails scanData={scan} />
+                    component: () => <ScanDetails scanData={scan} withScanLink />
                 }
             ]}
             withInnerPadding={false}

diff --git a/ui/src/layout/Findings/Vulnerabilities/VulnerabilityDetails.js b/ui/src/layout/Findings/Vulnerabilities/VulnerabilityDetails.js
@@ -31,13 +31,13 @@ const DetailsContent = ({data}) => {
                     id: "asset",
                     title: "Asset details",
                     path: VULNERABILITY_DETAILS_PATHS.ASSET_DETAILS,
-                    component: () => <AssetDetails assetData={asset} />
+                    component: () => <AssetDetails assetData={asset} withAssetLink />
                 },
                 {
                     id: "scan",
                     title: "Scan details",
                     path: VULNERABILITY_DETAILS_PATHS.SCAN_DETAILS,
-                    component: () => <ScanDetails scanData={scan} />
+                    component: () => <ScanDetails scanData={scan} withScanLink />
                 }
             ]}
             withInnerPadding={false}

diff --git a/ui/src/layout/detail-displays/AssetDetails/index.js b/ui/src/layout/detail-displays/AssetDetails/index.js
@@ -47,15 +47,17 @@ const AssetScansDisplay = ({assetName, targetId}) => {
     )
 }
 
-const AssetDetails = ({assetData, withAssetScansLink=false}) => {
+const AssetDetails = ({assetData, withAssetLink=false, withAssetScansLink=false}) => {
+    const navigate = useNavigate();
+
     const {id, targetInfo} = assetData;
     const {instanceID, objectType, location} = targetInfo || {};
-
+    
     return (
         <DoublePaneDisplay
             leftPaneDisplay={() => (
                 <>
-                    <Title medium>Asset</Title>
+                    <Title medium onClick={withAssetLink ? () => navigate(`${ROUTES.ASSETS}/${id}`) : undefined}>Asset</Title>
                     <TitleValueDisplayRow>
                         <TitleValueDisplay title="Name">{instanceID}</TitleValueDisplay>
                         <TitleValueDisplay title="Type">{objectType}</TitleValueDisplay>

diff --git a/ui/src/layout/detail-displays/ScanDetails/index.js b/ui/src/layout/detail-displays/ScanDetails/index.js
@@ -5,13 +5,14 @@ import DoublePaneDisplay from 'components/DoublePaneDisplay';
 import Title from 'components/Title';
 import ScanProgressBar from 'components/ScanProgressBar';
 import Button from 'components/Button';
+import { SCANS_PATHS } from 'layout/Scans';
 import ConfigurationReadOnlyDisplay from 'layout/Scans/ConfigurationReadOnlyDisplay';
 import { formatDate, calculateDuration, formatNumber } from 'utils/utils';
 import { ROUTES } from 'utils/systemConsts';
 import { useFilterDispatch, setFilters, FILTER_TYPES } from 'context/FiltersProvider';
 import ConfigurationAlertLink from './ConfigurationAlertLink';
 
-const ScanDetails = ({scanData, withAssetScansLink=false}) => {
+const ScanDetails = ({scanData, withScanLink=false, withAssetScansLink=false}) => {
     const {pathname} = useLocation();
     const navigate = useNavigate();
     const filtersDispatch = useFilterDispatch();
@@ -46,7 +47,7 @@ const ScanDetails = ({scanData, withAssetScansLink=false}) => {
             )}
             rightPlaneDisplay={() => (
                 <>
-                    <Title medium>Status</Title>
+                    <Title medium onClick={withScanLink ? () => navigate(`${ROUTES.SCANS}/${SCANS_PATHS.SCANS}/${id}`) : undefined}>Scan</Title>
                     <div style={{marginBottom: "20px"}}>
                         <ScanProgressBar
                             state={state}