fix(ui): data display (#1986)

* fix(ui): display `location` data properly for ContainerInfo and ContainerImageInfo asset types as well Signed-off-by: András Jáky <[email protected]> * fix(ui): display asset name properly on AssetScanDetails tab Signed-off-by: András Jáky <[email protected]> * fix(ui): display max parellel run number properly Signed-off-by: András Jáky <[email protected]> --------- Signed-off-by: András Jáky <[email protected]>
openclarity · Aug 9, 2024 · 9effd72 · 9effd72
1 parent cc0ebaf
commit 9effd72
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 9 deletions.
diff --git a/ui/src/layout/AssetScans/AssetScansTable.jsx b/ui/src/layout/AssetScans/AssetScansTable.jsx
@@ -52,7 +52,8 @@ const AssetScansTable = () => {
         sortIds: ["asset.assetInfo.location"],
         accessor: (assetScan) =>
           assetScan.asset.assetInfo.location ||
-          assetScan.asset.assetInfo.repoDigests?.[0],
+          assetScan.asset.assetInfo.repoDigests?.[0] ||
+          assetScan.asset.assetInfo.image.repoDigests?.[0],
       },
       {
         Header: "Scan name",

diff --git a/ui/src/layout/AssetScans/TabAssetScanDetails.jsx b/ui/src/layout/AssetScans/TabAssetScanDetails.jsx
@@ -16,6 +16,7 @@ import {
 import { formatDate, calculateDuration } from "utils/utils";
 import { SCANS_PATHS } from "layout/Scans";
 import StatusIndicator from "./StatusIndicator";
+import { getAssetName } from "utils/utils";
 
 import COLORS from "utils/scss_variables.module.scss";
 
@@ -111,7 +112,7 @@ const TabAssetScanDetails = ({ data }) => {
 
   const { scan, asset, status, stats } = data || {};
   const { id: assetId, assetInfo } = asset || {};
-  const { instanceID, objectType, location } = assetInfo || {};
+  const { objectType, location, repoDigests, image } = assetInfo || {};
   const { id: scanId, startTime, endTime } = scan || {};
   const { state, message } = status || {};
 
@@ -126,9 +127,13 @@ const TabAssetScanDetails = ({ data }) => {
             Asset
           </Title>
           <TitleValueDisplayRow>
-            <TitleValueDisplay title="Name">{instanceID}</TitleValueDisplay>
+            <TitleValueDisplay title="Name">
+              {getAssetName(assetInfo)}
+            </TitleValueDisplay>
             <TitleValueDisplay title="Type">{objectType}</TitleValueDisplay>
-            <TitleValueDisplay title="Location">{location}</TitleValueDisplay>
+            <TitleValueDisplay title="Location">
+              {location || repoDigests?.[0] || image.repoDigests?.[0]}
+            </TitleValueDisplay>
           </TitleValueDisplayRow>
           <Title
             medium

diff --git a/ui/src/layout/Assets/AssetsForFindingTable.jsx b/ui/src/layout/Assets/AssetsForFindingTable.jsx
@@ -119,7 +119,8 @@ const AssetsForFindingTable = (props) => {
         sortIds: LOCATION_SORT_IDS,
         accessor: (original) =>
           original.asset.assetInfo.location ||
-          original.asset.assetInfo.repoDigests?.[0],
+          original.asset.assetInfo.repoDigests?.[0] ||
+          original.asset.assetInfo.image.repoDigests?.[0],
       },
       {
         Header: "Last Seen",

diff --git a/ui/src/layout/Assets/AssetsTable.jsx b/ui/src/layout/Assets/AssetsTable.jsx
@@ -94,7 +94,9 @@ const AssetsTable = () => {
         id: "location",
         sortIds: LOCATION_SORT_IDS,
         accessor: (original) =>
-          original.assetInfo.location || original.assetInfo.repoDigests?.[0],
+          original.assetInfo.location ||
+          original.assetInfo.repoDigests?.[0] ||
+          original.assetInfo.image.repoDigests?.[0],
       },
       {
         Header: "Last Seen",

diff --git a/ui/src/layout/Scans/ConfigurationReadOnlyDisplay.jsx b/ui/src/layout/Scans/ConfigurationReadOnlyDisplay.jsx
@@ -8,7 +8,7 @@ import {
   getEnabledScanTypesList,
   getScanTimeTypeTag,
 } from "layout/Scans/utils";
-import { cronExpressionToHuman, formatDate } from "utils/utils";
+import { cronExpressionToHuman, formatDate, formatNumber } from "utils/utils";
 
 const FlagPropDisplay = ({ checked, label }) => (
   <div
@@ -43,7 +43,7 @@ const ConfigurationReadOnlyDisplay = ({ configData }) => {
       <TitleValueDisplayRow>
         <TitleValueDisplay title="Scope">{scope}</TitleValueDisplay>
         <TitleValueDisplay title="Maximum parallel scans">
-          {maxParallelScanners}
+          {formatNumber(maxParallelScanners)}
         </TitleValueDisplay>
       </TitleValueDisplayRow>
       <Title medium>Asset Scan Configuration</Title>
@@ -76,7 +76,7 @@ export const ScanReadOnlyDisplay = ({ scanData }) => {
       <TitleValueDisplayRow>
         <TitleValueDisplay title="Scope">{scope}</TitleValueDisplay>
         <TitleValueDisplay title="Maximum parallel scans">
-          {maxParallelScanners}
+          {formatNumber(maxParallelScanners)}
         </TitleValueDisplay>
       </TitleValueDisplayRow>
       <Title medium>Asset Scan Configuration</Title>