Skip to content

Commit 46250dd

Browse files
Elessar1802Elessar1802
committed
feat: use table in SecurityVulnerabilities
1 parent 801744c commit 46250dd

File tree

6 files changed

+103
-96
lines changed

6 files changed

+103
-96
lines changed

‎src/components/security/SecurityScansTab/SecurityScansTab.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import {
3838
ScanListUrlFiltersType,
3939
ScanTypeOptions,
4040
SecurityListSortableKeys,
41+
SecurityScansTableAdditionalProps,
4142
} from './types'
4243
import { getSecurityScansTableColumns, parseSearchParams } from './utils'
4344

@@ -76,7 +77,7 @@ const SecurityScansTab = () => {
7677

7778
return (
7879
<div className="security-scan-container bg__primary flexbox-col flex-grow-1 dc__overflow-hidden">
79-
<Table<SecurityScanType, FiltersTypeEnum.URL, ScanListUrlFiltersType>
80+
<Table<SecurityScanType, FiltersTypeEnum.URL, SecurityScansTableAdditionalProps>
8081
id="table__security-scans"
8182
columns={columns}
8283
getRows={getSecurityScans}

‎src/components/security/SecurityScansTab/SecurityScansTabCellComponents.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,5 @@ import { TableCellComponentProps } from '@devtron-labs/devtron-fe-common-lib'
1919
import { SecurityScanType } from '../security.types'
2020
import { getSeverityWithCount } from './utils'
2121

22-
export const SeverityCellComponent = ({ row }: TableCellComponentProps<SecurityScanType>) => (
22+
export const SeverityCellComponent = ({ row }: TableCellComponentProps<SecurityScanType>) =>
2323
getSeverityWithCount(row.data.severityCount)
24-
)

‎src/components/security/SecurityScansTab/SecurityScansTableWrapper.tsx‎

Lines changed: 46 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -22,49 +22,32 @@ import {
2222
GroupedFilterSelectPicker,
2323
GroupedFilterSelectPickerProps,
2424
SearchBar,
25+
SecurityModal,
2526
SegmentedControl,
2627
SegmentedControlProps,
2728
SelectPickerOptionType,
28-
SEVERITY_LABEL_MAP,
2929
Severity,
30-
TableViewWrapperProps,
30+
SEVERITY_LABEL_MAP,
3131
} from '@devtron-labs/devtron-fe-common-lib'
3232

3333
import { useGetAppSecurityDetails } from '@Components/app/details/appDetails/AppSecurity'
3434
import { importComponentFromFELibrary } from '@Components/common'
3535

36-
import { SecurityModal } from '@devtron-labs/devtron-fe-common-lib'
3736
import { VulnerabilitySummary, VulnerabilityViewTypeSelect } from '../Vulnerabilities'
38-
import { SecurityScanType } from '../security.types'
3937
import { INITIAL_SCAN_DETAILS, SCANNED_UNSCANNED_CONTROL_SEGMENTS } from './constants'
4038
import {
41-
ScanDetailsType,
4239
ScanListUrlFiltersType,
4340
ScanTypeOptions,
41+
SecurityScansTableWrapperProps,
4442
SecurityScansTabMultiFilterKeys,
4543
} from './types'
4644
import { getGroupFilterItems } from './utils'
4745

4846
const SecurityModalSidebar = importComponentFromFELibrary('SecurityModalSidebar', null, 'function')
4947

50-
interface SecurityScansTableWrapperProps extends TableViewWrapperProps<SecurityScanType> {
51-
severity: string[]
52-
cluster: string[]
53-
environment: string[]
54-
scanStatus: ScanTypeOptions
55-
clusterEnvListLoading: boolean
56-
clusterEnvListResult: Record<SecurityScansTabMultiFilterKeys, SelectPickerOptionType[]>
57-
clusterEnvListError: Error
58-
reloadClusterEnvOptions: () => void
59-
updateSearchParams: (params: Partial<ScanListUrlFiltersType>) => void
60-
clearFilters: () => void
61-
scanDetails: ScanDetailsType
62-
setScanDetails: (details: ScanDetailsType) => void
63-
}
64-
6548
const SecurityScansTableWrapper = ({
6649
searchKey,
67-
isLoading,
50+
areRowsLoading,
6851
handleSearch,
6952
severity,
7053
cluster,
@@ -198,55 +181,55 @@ const SecurityScansTableWrapper = ({
198181
return (
199182
<>
200183
<div className="flexbox-col dc__overflow-hidden">
201-
<div className="flexbox-col dc__gap-12 px-20 py-16">
202-
<div className="flex dc__content-space">
203-
<div className="flex dc__gap-8">
204-
<VulnerabilityViewTypeSelect />
205-
<SearchBar
206-
containerClassName="w-250"
207-
initialSearchText={searchKey}
208-
inputProps={{
209-
placeholder: 'Search application',
210-
disabled: isLoading,
211-
}}
212-
handleEnter={handleSearch}
213-
size={ComponentSizeType.large}
214-
keyboardShortcut="/"
215-
/>
216-
<SegmentedControl
217-
name="filter-scanned-unscanned-deployments"
218-
segments={SCANNED_UNSCANNED_CONTROL_SEGMENTS}
219-
value={scanStatus}
220-
onChange={handleSegmentControlChange}
184+
<div className="flexbox-col dc__gap-12 px-20 py-16">
185+
<div className="flex dc__content-space">
186+
<div className="flex dc__gap-8">
187+
<VulnerabilityViewTypeSelect />
188+
<SearchBar
189+
containerClassName="w-250"
190+
initialSearchText={searchKey}
191+
inputProps={{
192+
placeholder: 'Search application',
193+
disabled: areRowsLoading,
194+
}}
195+
handleEnter={handleSearch}
196+
size={ComponentSizeType.large}
197+
keyboardShortcut="/"
198+
/>
199+
<SegmentedControl
200+
name="filter-scanned-unscanned-deployments"
201+
segments={SCANNED_UNSCANNED_CONTROL_SEGMENTS}
202+
value={scanStatus}
203+
onChange={handleSegmentControlChange}
204+
/>
205+
</div>
206+
<GroupedFilterSelectPicker<SecurityScansTabMultiFilterKeys>
207+
id="grouped-scan-list-filters"
208+
options={getGroupFilterItems(scanStatus)}
209+
filterSelectPickerPropsMap={groupedFiltersPropsMap}
210+
isFilterApplied={areGroupedFiltersActive}
221211
/>
222212
</div>
223-
<GroupedFilterSelectPicker<SecurityScansTabMultiFilterKeys>
224-
id="grouped-scan-list-filters"
225-
options={getGroupFilterItems(scanStatus)}
226-
filterSelectPickerPropsMap={groupedFiltersPropsMap}
227-
isFilterApplied={areGroupedFiltersActive}
228-
/>
229-
</div>
230-
<FilterChips<Omit<ScanListUrlFiltersType, 'scanStatus'>>
231-
filterConfig={{
232-
severity,
233-
cluster,
234-
environment,
235-
}}
236-
getFormattedValue={getLabelFromValue}
237-
onRemoveFilter={updateSearchParams}
238-
clearFilters={clearFilters}
239-
clearButtonClassName="dc__no-background-imp dc__no-border-imp dc__tab-focus"
240-
/>
241-
{!isNotScannedList && (
242-
<VulnerabilitySummary
243-
filters={{
213+
<FilterChips<Omit<ScanListUrlFiltersType, 'scanStatus'>>
214+
filterConfig={{
244215
severity,
245216
cluster,
246217
environment,
247218
}}
219+
getFormattedValue={getLabelFromValue}
220+
onRemoveFilter={updateSearchParams}
221+
clearFilters={clearFilters}
222+
clearButtonClassName="dc__no-background-imp dc__no-border-imp dc__tab-focus"
248223
/>
249-
)}
224+
{!isNotScannedList && (
225+
<VulnerabilitySummary
226+
filters={{
227+
severity,
228+
cluster,
229+
environment,
230+
}}
231+
/>
232+
)}
250233
</div>
251234
{children}
252235
</div>

‎src/components/security/SecurityScansTab/service.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
import dayjs from 'dayjs'
1818

19-
import { TableProps, DATE_TIME_FORMATS, ZERO_TIME_STRING } from '@devtron-labs/devtron-fe-common-lib'
19+
import { DATE_TIME_FORMATS, TableProps, ZERO_TIME_STRING } from '@devtron-labs/devtron-fe-common-lib'
2020

2121
import { getSecurityScanList } from '../security.service'
2222
import { SecurityScanType } from '../security.types'
@@ -33,13 +33,11 @@ export const getSecurityScans: TableProps<SecurityScanType>['getRows'] = async (
3333
cluster = [],
3434
environment = [],
3535
scanStatus = ScanTypeOptions.SCANNED,
36-
isNotScannedList,
3736
}: Parameters<TableProps['getRows']>[0] & {
3837
severity: string[]
3938
cluster: string[]
4039
environment: string[]
4140
scanStatus: ScanTypeOptions
42-
isNotScannedList: boolean
4341
},
4442
signal: AbortSignal,
4543
) => {
@@ -61,10 +59,12 @@ export const getSecurityScans: TableProps<SecurityScanType>['getRows'] = async (
6159
rows: response.result.securityScans.map((scan) => ({
6260
data: {
6361
...scan,
64-
fixableVulnerabilities: `${scan.fixableVulnerabilities} out of ${scan.totalSeverities}`,
65-
lastExecution: scan.lastExecution && scan.lastExecution !== ZERO_TIME_STRING
66-
? dayjs(scan.lastExecution).format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)
67-
: '',
62+
[SecurityListSortableKeys.ENV_NAME]: scan.environment,
63+
fixableItems: `${scan.fixableVulnerabilities} out of ${scan.totalSeverities}`,
64+
[SecurityListSortableKeys.LAST_CHECKED]:
65+
scan.lastExecution && scan.lastExecution !== ZERO_TIME_STRING
66+
? dayjs(scan.lastExecution).format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)
67+
: '',
6868
[SecurityListSortableKeys.APP_NAME]: scan.name,
6969
},
7070
id: `${scan.appId}-${scan.envId}`,

‎src/components/security/SecurityScansTab/types.tsx‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,15 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { SortingOrder } from '@devtron-labs/devtron-fe-common-lib'
17+
import {
18+
FiltersTypeEnum,
19+
SelectPickerOptionType,
20+
ServerErrors,
21+
SortingOrder,
22+
TableViewWrapperProps,
23+
} from '@devtron-labs/devtron-fe-common-lib'
24+
25+
import { SecurityScanType } from '../security.types'
1826

1927
export enum ScanTypeOptions {
2028
SCANNED = 'scanned',
@@ -66,3 +74,21 @@ export enum SeverityFilterValues {
6674
'low' = 0,
6775
'unknown' = 5,
6876
}
77+
78+
export type SecurityScansTableAdditionalProps = {
79+
clusterEnvListLoading: boolean
80+
clusterEnvListResult: Record<SecurityScansTabMultiFilterKeys, SelectPickerOptionType[]>
81+
clusterEnvListError: ServerErrors
82+
reloadClusterEnvOptions: () => void
83+
scanDetails: ScanDetailsType
84+
setScanDetails: (details: ScanDetailsType) => void
85+
}
86+
87+
export type SecurityScansTableWrapperProps = TableViewWrapperProps<SecurityScanType, FiltersTypeEnum.URL> & {
88+
severity: string[]
89+
cluster: string[]
90+
environment: string[]
91+
scanStatus: ScanTypeOptions
92+
updateSearchParams: (params: Partial<ScanListUrlFiltersType>) => void
93+
clearFilters: () => void
94+
} & SecurityScansTableAdditionalProps

‎src/components/security/SecurityScansTab/utils.tsx‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
import {
1818
Badge,
1919
ComponentSizeType,
20+
FiltersTypeEnum,
2021
GroupedFilterSelectPickerProps,
2122
SeveritiesDTO,
2223
SeverityChip,
@@ -25,14 +26,13 @@ import {
2526
} from '@devtron-labs/devtron-fe-common-lib'
2627

2728
import { SecurityScanType } from '../security.types'
29+
import { SeverityCellComponent } from './SecurityScansTabCellComponents'
2830
import {
29-
AppNameCellComponent,
30-
EnvironmentCellComponent,
31-
FixableVulnerabilitiesCellComponent,
32-
ScannedOnCellComponent,
33-
SeverityCellComponent,
34-
} from './SecurityScansTabCellComponents'
35-
import { ScanTypeOptions, SecurityScansTabMultiFilterKeys, SecurityScansTabSingleFilterKeys, SecurityListSortableKeys } from './types'
31+
ScanTypeOptions,
32+
SecurityListSortableKeys,
33+
SecurityScansTabMultiFilterKeys,
34+
SecurityScansTabSingleFilterKeys,
35+
} from './types'
3636

3737
export const parseSearchParams = (searchParams: URLSearchParams) => ({
3838
[SecurityScansTabMultiFilterKeys.severity]: searchParams.getAll(SecurityScansTabMultiFilterKeys.severity) || [],
@@ -95,30 +95,28 @@ export const getGroupFilterItems: (
9595

9696
export const getSecurityScansTableColumns = (
9797
isNotScannedList: boolean,
98-
): TableProps<SecurityScanType>['columns'] => {
98+
): TableProps<SecurityScanType, FiltersTypeEnum.URL>['columns'] => {
9999
const baseColumns: TableProps<SecurityScanType>['columns'] = [
100100
{
101101
label: 'APP NAME',
102102
field: SecurityListSortableKeys.APP_NAME,
103103
isSortable: true,
104104
size: {
105105
fixed: 200,
106-
}
106+
},
107107
},
108108
{
109109
label: 'ENVIRONMENT',
110-
field: 'environment',
110+
field: SecurityListSortableKeys.ENV_NAME,
111111
isSortable: true,
112112
size: {
113113
fixed: 200,
114-
}
114+
},
115115
},
116116
{
117117
label: 'IMAGE VULNERABILITY SCAN',
118118
field: 'severityCount',
119-
CellComponent: isNotScannedList
120-
? () => <div>Not Scanned</div>
121-
: SeverityCellComponent,
119+
CellComponent: isNotScannedList ? () => <span>Not Scanned</span> : SeverityCellComponent,
122120
size: null,
123121
},
124122
]
@@ -127,18 +125,18 @@ export const getSecurityScansTableColumns = (
127125
baseColumns.push(
128126
{
129127
label: 'FIXABLE VULNERABILITIES',
130-
field: 'fixableVulnerabilities',
131-
size: {
132-
fixed: 200,
133-
}
128+
field: 'fixableItems',
129+
size: {
130+
fixed: 200,
131+
},
134132
},
135133
{
136134
label: 'SCANNED ON',
137-
field: 'lastExecution',
135+
field: SecurityListSortableKeys.LAST_CHECKED,
138136
isSortable: true,
139-
size: {
140-
fixed: 200,
141-
}
137+
size: {
138+
fixed: 200,
139+
},
142140
},
143141
)
144142
}

0 commit comments

Comments
 (0)