fix(ui): separate asset drilldown types (#860)

* chore(ui): add pretty-bytes dependency

* refactor(ui): move AssetScansDisplay to a separate file

* refactor(ui): create CommonAssetMetadata component

* refactor(ui): display asset metadata by type

* fix(ui): revert proxy config

* fix(ui): improve Container(Image)Info presentation

* refactor(ui): destructure params inline

ui/package.json

@@ -10,6 +10,7 @@
     "formik": "^2.2.9",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
+    "pretty-bytes": "^6.1.1",
     "react": "^18.2.0",
     "react-datetime-picker": "^4.2.0",
     "react-dom": "^18.2.0",

ui/src/components/FieldSet/field-set.scss

@@ -0,0 +1,7 @@
+@import 'utils/scss_variables.module.scss';
+
+fieldset {   
+    border-radius: 5px;
+    padding: 12px;
+    border: solid 1px $color-grey;
+}  

ui/src/components/FieldSet/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import './field-set.scss';
+
+export const FieldSet = ({ legend, children}) =>
+    <fieldset>
+        <legend>{legend}</legend>
+        {children}
+    </fieldset>

ui/src/components/TitleValueDisplay/index.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import classnames from 'classnames';
 import Arrow, { ARROW_NAMES } from 'components/Arrow';
+import { isEmpty } from 'lodash';
 
 import './title-value-display.scss';
 
@@ -27,7 +28,11 @@ const TitleValueDisplay = ({title, children, className, withOpen=false, defaultO
                 <div className={classnames("title-value-display-title", {"large": isLargeTitle})}>{title}</div>
                 {withOpen && <Arrow name={isOpen ? ARROW_NAMES.TOP : ARROW_NAMES.BOTTOM} small />}
             </div>
-            {(!withOpen || isOpen) && <div className="title-value-display-content">{children}</div>}
+            {(!withOpen || isOpen) && <div className="title-value-display-content">
+                {isEmpty(children)
+                    ? <span className="empty">-</span>
+                    : children}
+            </div>}
         </div>
     );
 }

ui/src/components/TitleValueDisplay/title-value-display.scss

@@ -52,6 +52,10 @@ $open-icon-size: 14px;
                 text-decoration: underline;
             }
         }
+
+        .empty {
+            color: $color-grey;
+        }
     }
 }
 
@@ -84,4 +88,4 @@ $open-icon-size: 14px;
     .title-value-values-list-item:not(:last-child) {
         margin-bottom: 10px;
     }
-}
+}

ui/src/layout/detail-displays/AssetDetails/AssetScansDisplay.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useFetch } from 'hooks';
+import Title from 'components/Title';
+import Button from 'components/Button';
+import Loader from 'components/Loader';
+import { ROUTES, APIS } from 'utils/systemConsts';
+import { formatNumber } from 'utils/utils';
+import { useFilterDispatch, setFilters, FILTER_TYPES } from 'context/FiltersProvider';
+
+export const AssetScansDisplay = ({assetName, assetId}) => {
+    const {pathname} = useLocation();
+    const navigate = useNavigate();
+    const filtersDispatch = useFilterDispatch();
+
+    const filter = `asset/id eq '${assetId}'`;
+
+    const onAssetScansClick = () => {
+        setFilters(filtersDispatch, {
+            type: FILTER_TYPES.ASSET_SCANS,
+            filters: {filter, name: assetName, suffix: "asset", backPath: pathname},
+            isSystem: true
+        });
+
+        navigate(ROUTES.ASSET_SCANS);
+    }
+
+    const [{loading, data, error}] = useFetch(APIS.ASSET_SCANS, {
+        queryParams: {"$filter": filter, "$count": true, "$select": "id,asset,summary,scan"}
+    });
+
+    if (error) {
+        return null;
+    }
+
+    if (loading) {
+        return <Loader absolute={false} small />
+    }
+
+    return (
+        <>
+            <Title medium>Asset scans</Title>
+            <Button onClick={onAssetScansClick} >{`See all asset scans (${formatNumber(data?.count || 0)})`}</Button>
+        </>
+    )
+}

ui/src/layout/detail-displays/AssetDetails/CommonAssetMetadata.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import TitleValueDisplay, { TitleValueDisplayRow } from 'components/TitleValueDisplay';
+import { formatDate } from 'utils/utils';
+
+
+export const CommonAssetMetadata = ({assetData: {firstSeen, lastSeen, terminatedOn, assetInfo}}) =>
+    <>
+        <TitleValueDisplayRow>
+            <TitleValueDisplay title="Type">{assetInfo.objectType}</TitleValueDisplay>
+            <TitleValueDisplay title="First Seen">{formatDate(firstSeen)}</TitleValueDisplay>
+        </TitleValueDisplayRow>
+        <TitleValueDisplayRow>
+            <TitleValueDisplay title="Last Seen">{formatDate(lastSeen)}</TitleValueDisplay>
+            <TitleValueDisplay title="Terminated On">{formatDate(terminatedOn)}</TitleValueDisplay>
+        </TitleValueDisplayRow>
+    </>

ui/src/layout/detail-displays/AssetDetails/ContainerImageInfoDetails.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import TitleValueDisplay, { TitleValueDisplayRow } from 'components/TitleValueDisplay';
+import { TagsList } from 'components/Tag';
+import { formatTagsToStringsList } from 'utils/utils';
+import prettyBytes from 'pretty-bytes';
+
+
+export const ContainerImageInfoDetails = ({assetData}) => {
+    const {imageID, repoDigests, repoTags, labels, architecture, os, size} = assetData.assetInfo || {};
+
+    return (
+        <>
+            <TitleValueDisplayRow>
+                <TitleValueDisplay title="Image ID">{imageID}</TitleValueDisplay>
+                <TitleValueDisplay title="Size">{prettyBytes(size)}</TitleValueDisplay>
+            </TitleValueDisplayRow>
+
+            <TitleValueDisplayRow>
+                <TitleValueDisplay title="Repo digests">{(repoDigests ?? []).map(digest => <div>{digest}</div>)}</TitleValueDisplay>
+            </TitleValueDisplayRow>
+
+            <TitleValueDisplayRow>
+                <TitleValueDisplay title="Repo tags">{(repoTags ?? []).map(tag => <div>{tag}</div>)}</TitleValueDisplay>
+            </TitleValueDisplayRow>
+
+            <TitleValueDisplayRow>
+                <TitleValueDisplay title="Architecture">{architecture}</TitleValueDisplay>
+                <TitleValueDisplay title="OS">{os}</TitleValueDisplay>
+            </TitleValueDisplayRow>
+
+            <TitleValueDisplayRow>
+                <TitleValueDisplay title="Labels"><TagsList items={formatTagsToStringsList(labels)} /></TitleValueDisplay>
+            </TitleValueDisplayRow>
+        </>
+    )
+}

ui/src/layout/detail-displays/AssetDetails/ContainerInfoDetails.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import TitleValueDisplay, { TitleValueDisplayRow } from 'components/TitleValueDisplay';
+import { ContainerImageInfoDetails } from './ContainerImageInfoDetails';
+import { FieldSet } from 'components/FieldSet';
+
+
+export const ContainerInfoDetails = ({assetData}) => {
+    const {containerName, containerID, image} = assetData.assetInfo || {};
+
+
+    return (
+        <>
+            <TitleValueDisplayRow>
+                <TitleValueDisplay title="Container Name">{containerName}</TitleValueDisplay>
+                <TitleValueDisplay title="Container ID">{containerID}</TitleValueDisplay>
+            </TitleValueDisplayRow>
+
+            <FieldSet legend="Image">
+                <ContainerImageInfoDetails assetData={{assetInfo: image}} />
+            </FieldSet>
+        </>
+    )
+}

ui/src/layout/detail-displays/AssetDetails/DirInfoDetails.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import TitleValueDisplay, { TitleValueDisplayRow } from 'components/TitleValueDisplay';
+
+
+export const DirInfoDetails = ({assetData}) => {
+    const {dirName, location} = assetData.assetInfo || {};
+
+    return (
+        <TitleValueDisplayRow>
+            <TitleValueDisplay title="Dir Name">{dirName}</TitleValueDisplay>
+            <TitleValueDisplay title="Location">{location}</TitleValueDisplay>
+        </TitleValueDisplayRow>
+    )
+}

ui/src/layout/detail-displays/AssetDetails/PodInfoDetails.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import TitleValueDisplay, { TitleValueDisplayRow } from 'components/TitleValueDisplay';
+
+
+export const PodInfoDetails = ({assetData}) => {
+    const {podName, location} = assetData.assetInfo || {};
+
+    return (
+        <TitleValueDisplayRow>
+            <TitleValueDisplay title="Pod Name">{podName}</TitleValueDisplay>
+            <TitleValueDisplay title="Location">{location}</TitleValueDisplay>
+        </TitleValueDisplayRow>
+    )
+}

ui/src/layout/detail-displays/AssetDetails/VMInfoDetails.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import TitleValueDisplay, { TitleValueDisplayRow } from 'components/TitleValueDisplay';
+import { TagsList } from 'components/Tag';
+import { formatDate, formatTagsToStringsList } from 'utils/utils';
+
+export const VMInfoDetails = ({assetData}) => {
+    const {instanceID, location, tags, image, instanceType, platform, launchTime, rootVolume} = assetData.assetInfo || {};
+    const {sizeGB, encrypted} = rootVolume || {};
+
+    return (
+        <>
+            <TitleValueDisplayRow>
+                <TitleValueDisplay title="Instance ID">{instanceID}</TitleValueDisplay>
+                <TitleValueDisplay title="Location">{location}</TitleValueDisplay>
+            </TitleValueDisplayRow>
+
+            <TitleValueDisplayRow>
+                <TitleValueDisplay title="Tags"><TagsList items={formatTagsToStringsList(tags)} /></TitleValueDisplay>
+            </TitleValueDisplayRow>
+
+            <TitleValueDisplayRow>
+                <TitleValueDisplay title="Image">{image}</TitleValueDisplay>
+                <TitleValueDisplay title="Instance type">{instanceType}</TitleValueDisplay>
+            </TitleValueDisplayRow>
+
+            <TitleValueDisplayRow>
+                <TitleValueDisplay title="Platform">{platform}</TitleValueDisplay>
+                <TitleValueDisplay title="Launch time">{formatDate(launchTime)}</TitleValueDisplay>
+            </TitleValueDisplayRow>
+
+            <TitleValueDisplayRow>
+                <TitleValueDisplay title="Root Volume Size">{sizeGB} GB</TitleValueDisplay>
+                <TitleValueDisplay title="Encrypted Root Volume">{encrypted}</TitleValueDisplay>
+            </TitleValueDisplayRow>
+        </>
+    )
+}