diff --git a/ui/src/components/DropdownSelect/index.js b/ui/src/components/DropdownSelect/index.js index 0e24f42..d88b386 100644 --- a/ui/src/components/DropdownSelect/index.js +++ b/ui/src/components/DropdownSelect/index.js @@ -27,7 +27,6 @@ const DropdownSelect = ({items, value, onChange, creatable=false, clearable=fals styles={{ control: (provided) => ({ ...provided, - height: height, minHeight: height, borderRadius: 2, borderColor: COLORS["color-grey-light"], @@ -79,7 +78,7 @@ const DropdownSelect = ({items, value, onChange, creatable=false, clearable=fals }), valueContainer: (provided) => ({ ...provided, - height: innerHeight, + minHeight: innerHeight, padding: (small && isMulti) ? "0 8px" : "2px 8px" }), singleValue: (provided) => ({ diff --git a/ui/src/layout/RuntimeScan/ScanConfiguration/scan-configuration.scss b/ui/src/layout/RuntimeScan/ScanConfiguration/scan-configuration.scss index e27f887..e683645 100644 --- a/ui/src/layout/RuntimeScan/ScanConfiguration/scan-configuration.scss +++ b/ui/src/layout/RuntimeScan/ScanConfiguration/scan-configuration.scss @@ -50,8 +50,7 @@ $inner-padding: 20px; margin-left: 6px; } .runtime-scan-select { - margin-left: $inner-padding; - margin-right: $inner-padding; + margin: 10px $inner-padding; width: 100%; } .scan-button { diff --git a/ui/src/layout/RuntimeScan/index.js b/ui/src/layout/RuntimeScan/index.js index 2826a0d..85f253d 100644 --- a/ui/src/layout/RuntimeScan/index.js +++ b/ui/src/layout/RuntimeScan/index.js @@ -3,6 +3,7 @@ import { isEmpty } from 'lodash'; import PageContainer from 'components/PageContainer'; import Loader from 'components/Loader'; import TopBarTitle from 'components/TopBarTitle'; +import Icon, { ICON_NAMES } from 'components/Icon'; import { BoldText, formatDate } from 'utils/utils'; import useProgressLoaderReducer, { PROGRESS_LOADER_ACTIONS, PROPRESS_STATUSES } from './useProgressLoaderReducer'; import ScanConfiguration from './ScanConfiguration'; @@ -22,7 +23,7 @@ const RuntimeScan = () => { const doStartScan = (namespaces) => dispatch({type: PROGRESS_LOADER_ACTIONS.DO_START_SCAN, payload: {namespaces}}); const doStopScan = () => dispatch({type: PROGRESS_LOADER_ACTIONS.DO_STOP_SCAN}); - const {failures, vulnerabilityPerSeverity, cisDockerBenchmarkCountPerLevel, cisDockerBenchmarkScanEnabled} = scanResults || {}; + const {failures, vulnerabilityPerSeverity, cisDockerBenchmarkCountPerLevel, cisDockerBenchmarkScanEnabled, endTime} = scanResults || {}; const isInProgress = [PROPRESS_STATUSES.IN_PROGRESS.value, PROPRESS_STATUSES.FINALIZING.value].includes(status); return ( @@ -39,12 +40,22 @@ const RuntimeScan = () => {
{!!scannedNamespaces && !!scanType && -
+
{`${SCAN_TYPES[scanType]} SCAN`} - {` with target namespaces: `} - {isEmpty(scannedNamespaces) ? "All" : scannedNamespaces.join(", ")} +
+ + Started{` on ${formatDate(startTime)}`} + {!!endTime && {` - `}Completed{` on ${formatDate(endTime)}`}} +
+
+
+ {`with target namespaces: `} + {isEmpty(scannedNamespaces) ? All : +
+ {scannedNamespaces.map((namespace, index) =>
{namespace}
)} +
+ }
-
{`Started on `}{formatDate(startTime)}
}
diff --git a/ui/src/layout/RuntimeScan/runtime-scan.scss b/ui/src/layout/RuntimeScan/runtime-scan.scss index add22c8..3f1d599 100644 --- a/ui/src/layout/RuntimeScan/runtime-scan.scss +++ b/ui/src/layout/RuntimeScan/runtime-scan.scss @@ -1,29 +1,60 @@ @import 'utils/scss_variables.module.scss'; -$scan-time-width: 230px; +$details-padding: 20px; .runtime-scan-page { .scan-details-container { margin: 40px; .scan-details-info { - min-height: 44px; box-sizing: border-box; - background-color: $color-grey-light; font-size: 13px; line-height: 18px; - padding: 13px 20px; - border-bottom: 1px solid $color-grey-dark; - box-shadow: 0px 0px 10px rgba(34, 43, 54, 0.12); - display: flex; - justify-content: space-between; - - .details-info-config { - width: calc(100% - #{$scan-time-width} - 10px); - word-break: break-all; + + .genreral-scan-details { + min-height: 44px; + padding: 0 $details-padding; + background-color: $color-grey-light; + border-bottom: 1px solid $color-grey; + display: flex; + justify-content: space-between; + align-items: center; + + .details-info-time { + display: flex; + align-items: center; + white-space: pre-wrap; + + .icon { + margin-right: 5px; + } + } } - .details-info-time { + .namespaces-scan-details { + box-sizing: border-box; + min-height: 40px; + padding: 0 $details-padding; + padding-top: 15px; + background-color: $color-blue; + display: flex; + align-items: baseline; white-space: nowrap; + + .namespaces-list { + display: flex; + flex-wrap: wrap; + + .namespace-item { + padding: 0 10px; + margin-bottom: 15px; + font-weight: bold; + + &:not(:last-child) { + border-right: 1px solid $color-grey; + } + } + + } } } .scan-details-steps { diff --git a/ui/src/utils/utils.js b/ui/src/utils/utils.js index 0004511..327aad3 100644 --- a/ui/src/utils/utils.js +++ b/ui/src/utils/utils.js @@ -15,4 +15,4 @@ export const getItemsString = items => { export const toCapitalized = string => string.charAt(0).toUpperCase() + string.slice(1).toLowerCase(); -export const BoldText = ({children}) => {children}; \ No newline at end of file +export const BoldText = ({children, style={}}) => {children}; \ No newline at end of file