Skip to content
This repository has been archived by the owner on Oct 14, 2024. It is now read-only.

Commit

Permalink
feat: display scan end time (#194)
Browse files Browse the repository at this point in the history
  • Loading branch information
@galiail
galiail authored Jun 9, 2022
1 parent b1ae91f commit 453bf89
Show file tree
Hide file tree
Showing 5 changed files with 63 additions and 23 deletions.
3 changes: 1 addition & 2 deletions ui/src/components/DropdownSelect/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"],
Expand Down Expand Up @@ -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) => ({
Expand Down
3 changes: 1 addition & 2 deletions ui/src/layout/RuntimeScan/ScanConfiguration/scan-configuration.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
21 changes: 16 additions & 5 deletions ui/src/layout/RuntimeScan/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 (
Expand All @@ -39,12 +40,22 @@ const RuntimeScan = () => {
<div className="scan-details-info">
{!!scannedNamespaces && !!scanType &&
<React.Fragment>
<div className="details-info-config">
<div className="genreral-scan-details">
<BoldText>{`${SCAN_TYPES[scanType]} SCAN`}</BoldText>
<span>{` with target namespaces: `}</span>
<BoldText>{isEmpty(scannedNamespaces) ? "All" : scannedNamespaces.join(", ")}</BoldText>
<div className="details-info-time">
<Icon name={ICON_NAMES.CLOCK} />
<span><BoldText>Started</BoldText>{` on ${formatDate(startTime)}`}</span>
{!!endTime && <span>{` - `}<BoldText>Completed</BoldText>{` on ${formatDate(endTime)}`}</span>}
</div>
</div>
<div className="namespaces-scan-details">
<span>{`with target namespaces: `}</span>
{isEmpty(scannedNamespaces) ? <BoldText style={{marginLeft: "10px"}}>All</BoldText> :
<div className="namespaces-list">
{scannedNamespaces.map((namespace, index) => <div key={index} className="namespace-item">{namespace}</div>)}
</div>
}
</div>
<div className="details-info-time">{`Started on `}<BoldText>{formatDate(startTime)}</BoldText></div>
</React.Fragment>
}
</div>
Expand Down
57 changes: 44 additions & 13 deletions ui/src/layout/RuntimeScan/runtime-scan.scss
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion ui/src/utils/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,4 @@ export const getItemsString = items => {

export const toCapitalized = string => string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();

export const BoldText = ({children}) => <span style={{fontWeight: "bold"}}>{children}</span>;
export const BoldText = ({children, style={}}) => <span style={{fontWeight: "bold", ...style}}>{children}</span>;

0 comments on commit 453bf89

Please sign in to comment.