Skip to content

Commit 95c18e1

Browse files
arunjaindevarunjaindev
authored
Merge pull request #524 from devtron-labs/feat/integrate-scan-tool-url
feat: integrate scan tool url according to tool
2 parents 02b4d8a + 702cb58 commit 95c18e1

File tree

17 files changed

+159
-128
lines changed

17 files changed

+159
-128
lines changed

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "1.5.8",
3+
"version": "1.5.9",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Assets/Icon/ic-scan-fallback.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/Shared/Components/ScannedByToolModal/ScannedByToolModal.tsx

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -15,33 +15,32 @@
1515
*/
1616

1717
import React from 'react'
18-
import { IMAGE_SCAN_TOOL, SCAN_TOOL_ID_TRIVY } from '../../constants'
18+
import { ReactComponent as ICScanFallback } from '@Icons/ic-scan-fallback.svg'
1919
import { ScannedByToolModalProps } from './types'
20-
import { ReactComponent as ICClair } from '../../../Assets/Icon/ic-clair.svg'
21-
import { ReactComponent as ICTrivy } from '../../../Assets/Icon/ic-trivy.svg'
20+
import { ImageWithFallback } from '../ImageWithFallback'
2221

2322
const ScannedByToolModal: React.FC<ScannedByToolModalProps> = ({
24-
scanToolId,
23+
scanToolName,
24+
scanToolUrl,
2525
fontSize = 13,
2626
spacingBetweenTextAndIcon = 6,
27-
}) => {
28-
const isTrivy = scanToolId === SCAN_TOOL_ID_TRIVY
29-
30-
return (
31-
<div className="flexbox" style={{ gap: `${spacingBetweenTextAndIcon}px` }}>
32-
<span className={`dc__italic-font-style fs-${fontSize}`}>
33-
Scanned by
34-
<span className="fw-6 ml-4" data-testid="scanned-by-tool">
35-
{isTrivy ? IMAGE_SCAN_TOOL.Trivy : IMAGE_SCAN_TOOL.Clair}
36-
</span>
27+
}) => (
28+
<div className="flexbox" style={{ gap: `${spacingBetweenTextAndIcon}px` }}>
29+
<span className={`dc__italic-font-style fs-${fontSize}`}>
30+
Scanned by
31+
<span className="fw-6 ml-4" data-testid="scanned-by-tool">
32+
{scanToolName}
3733
</span>
38-
{isTrivy ? (
39-
<ICTrivy className="icon-dim-20 dc__no-shrink" />
40-
) : (
41-
<ICClair className="icon-dim-20 dc__no-shrink" />
42-
)}
43-
</div>
44-
)
45-
}
34+
</span>
35+
<ImageWithFallback
36+
imageProps={{
37+
src: scanToolUrl,
38+
className: 'icon-dim-20-imp',
39+
alt: 'scan-tool',
40+
}}
41+
fallbackImage={<ICScanFallback className="icon-dim-20-imp dc__no-shrink" />}
42+
/>
43+
</div>
44+
)
4645

4746
export default ScannedByToolModal

‎src/Shared/Components/ScannedByToolModal/types.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
*/
1616

1717
export interface ScannedByToolModalProps {
18-
scanToolId?: number
18+
scanToolName: string
19+
scanToolUrl: string
1920
fontSize?: number
2021
spacingBetweenTextAndIcon?: number
2122
}

‎src/Shared/Components/Security/SecurityDetailsCards/SecurityDetailsCards.tsx

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ScannedByToolModal } from '@Shared/Components/ScannedByToolModal'
2-
import { EMPTY_STATE_STATUS, SCAN_TOOL_ID_CLAIR, SCAN_TOOL_ID_TRIVY } from '@Shared/constants'
2+
import { EMPTY_STATE_STATUS } from '@Shared/constants'
33
import { useState } from 'react'
44
import { GenericEmptyState } from '@Common/index'
55
import { ReactComponent as NoVulnerability } from '@Icons/ic-vulnerability-not-found.svg'
@@ -37,18 +37,18 @@ const SecurityDetailsCards = ({ scanResult, Sidebar }: SecurityDetailsCardsProps
3737
kubernetesManifest: !!kubernetesManifest,
3838
})
3939

40-
const getScanToolId = (category: string) => {
40+
const getScanToolInfo = (category: string): { scanToolName: string; scanToolUrl: string } => {
41+
const image = imageScan?.vulnerability?.list?.[0]
4142
switch (category) {
4243
case CATEGORIES.CODE_SCAN:
43-
return codeScan?.scanToolName === 'TRIVY' ? SCAN_TOOL_ID_TRIVY : SCAN_TOOL_ID_CLAIR
44+
return { scanToolName: codeScan?.scanToolName, scanToolUrl: codeScan?.scanToolUrl }
4445
case CATEGORIES.KUBERNETES_MANIFEST:
45-
return kubernetesManifest?.scanToolName === 'TRIVY' ? SCAN_TOOL_ID_TRIVY : SCAN_TOOL_ID_CLAIR
46-
case CATEGORIES.IMAGE_SCAN:
47-
return imageScan?.vulnerability?.list?.[0].scanToolName === 'TRIVY'
48-
? SCAN_TOOL_ID_TRIVY
49-
: SCAN_TOOL_ID_CLAIR
46+
return { scanToolName: kubernetesManifest?.scanToolName, scanToolUrl: kubernetesManifest?.scanToolUrl }
5047
default:
51-
return SCAN_TOOL_ID_TRIVY
48+
return {
49+
scanToolName: image?.scanToolName,
50+
scanToolUrl: image?.scanToolUrl,
51+
}
5252
}
5353
}
5454

@@ -80,11 +80,13 @@ const SecurityDetailsCards = ({ scanResult, Sidebar }: SecurityDetailsCardsProps
8080
category !== CATEGORIES.IMAGE_SCAN &&
8181
(scanResult.codeScan?.status === 'Failed' || scanResult.kubernetesManifest?.status === 'Failed')
8282

83+
const { scanToolName, scanToolUrl } = getScanToolInfo(category)
84+
8385
return (
8486
<div className="flexbox-col dc__gap-12" key={category}>
8587
<div className="flexbox dc__content-space pb-8 dc__border-bottom-n1">
8688
<span className="fs-13 fw-6 lh-1-5 cn-9">{SECURITY_CONFIG[category].label}</span>
87-
<ScannedByToolModal scanToolId={getScanToolId(category)} />
89+
<ScannedByToolModal scanToolName={scanToolName} scanToolUrl={scanToolUrl} />
8890
</div>
8991
{categoryFailed ? (
9092
<div className="dc__border br-8">

‎src/Shared/Components/Security/SecurityModal/SecurityModal.tsx

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { ComponentSizeType } from '@Shared/constants'
1919
import { Table, InfoCard } from './components'
2020
import { getDefaultSecurityModalState } from './constants'
2121
import { getTableData, getInfoCardData } from './config'
22-
import { SecurityModalPropsType, SecurityModalStateType, DetailViewDataType, SidebarPropsType } from './types'
22+
import { SecurityModalPropsType, SecurityModalStateType, DetailViewDataType } from './types'
2323
import { getEmptyStateValues } from './config/EmptyState'
2424
import './styles.scss'
2525

@@ -44,15 +44,14 @@ const SecurityModal: React.FC<SecurityModalPropsType> = ({
4444
}) => {
4545
const data = responseData ?? null
4646

47-
const categoriesConfig: SidebarPropsType['categoriesConfig'] = {
48-
imageScan: !!data?.imageScan,
49-
imageScanLicenseRisks: !!data?.imageScan?.license,
50-
codeScan: !!data?.codeScan,
51-
kubernetesManifest: !!data?.kubernetesManifest,
52-
}
53-
5447
const [state, setState] = useState<SecurityModalStateType>(
55-
defaultState ?? getDefaultSecurityModalState(categoriesConfig),
48+
defaultState ??
49+
getDefaultSecurityModalState({
50+
imageScan: !!data?.imageScan,
51+
imageScanLicenseRisks: !!data?.imageScan?.license,
52+
codeScan: !!data?.codeScan,
53+
kubernetesManifest: !!data?.kubernetesManifest,
54+
}),
5655
)
5756

5857
const setDetailViewData = (detailViewData: DetailViewDataType) => {
@@ -120,13 +119,18 @@ const SecurityModal: React.FC<SecurityModalPropsType> = ({
120119
selectedDetailViewData ||
121120
getTableData(data, state.category, state.subCategory, setDetailViewData, hidePolicy)
122121

123-
const { entities, lastScanTimeString, scanToolId } =
122+
const { entities, lastScanTimeString, scanToolName, scanToolUrl } =
124123
selectedDetailViewData || getInfoCardData(data, state.category, state.subCategory)
125124

126125
return (
127126
<div className="flexbox-col p-20 dc__gap-16">
128127
{!entities?.length ? null : (
129-
<InfoCard entities={entities} lastScanTimeString={lastScanTimeString} scanToolId={scanToolId} />
128+
<InfoCard
129+
entities={entities}
130+
lastScanTimeString={lastScanTimeString}
131+
scanToolName={scanToolName}
132+
scanToolUrl={scanToolUrl}
133+
/>
130134
)}
131135
<Table
132136
// NOTE: this key is important. Whenever data changes the table should be remounted
@@ -162,7 +166,7 @@ const SecurityModal: React.FC<SecurityModalPropsType> = ({
162166
/* NOTE: the height is restricted to (viewport - header) height since we need overflow-scroll */
163167
<div className="flexbox" style={{ height: 'calc(100vh - 49px)' }}>
164168
{/* NOTE: only show sidebar in AppDetails */}
165-
{Sidebar && <Sidebar modalState={state} setModalState={setState} categoriesConfig={categoriesConfig} />}
169+
{Sidebar && <Sidebar modalState={state} setModalState={setState} scanResult={responseData} />}
166170
<div className="dc__border-right-n1 h-100" />
167171
<div className="dc__overflow-auto flex-grow-1" style={{ width: '744px' }}>
168172
{selectedDetailViewData && renderDetailViewSubHeader()}

‎src/Shared/Components/Security/SecurityModal/components/InfoCard.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import { ReactComponent as ICClock } from '@Icons/ic-clock.svg'
1010
import { ZERO_TIME_STRING, DATE_TIME_FORMATS } from '../../../../../Common/Constants'
1111
import { InfoCardPropsType } from '../types'
1212

13-
const InfoCard: React.FC<InfoCardPropsType> = ({ entities, lastScanTimeString, scanToolId }) => (
13+
const InfoCard: React.FC<InfoCardPropsType> = ({ entities, lastScanTimeString, scanToolName, scanToolUrl }) => (
1414
<div className="info-card">
1515
<SegmentedBarChart entities={entities} rootClassName="p-16 fs-13" countClassName="fw-6" />
1616

17-
{(lastScanTimeString || scanToolId) && (
17+
{(lastScanTimeString || scanToolName) && (
1818
<>
1919
<div className="dc__border-bottom-n1 w-100 h-1" />
2020

@@ -28,8 +28,13 @@ const InfoCard: React.FC<InfoCardPropsType> = ({ entities, lastScanTimeString, s
2828
>{`Scanned on ${dayjs(lastScanTimeString).format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)}`}</span>
2929
</div>
3030
)}
31-
{scanToolId && (
32-
<ScannedByToolModal scanToolId={scanToolId} fontSize={12} spacingBetweenTextAndIcon={8} />
31+
{scanToolName && (
32+
<ScannedByToolModal
33+
scanToolName={scanToolName}
34+
scanToolUrl={scanToolUrl}
35+
fontSize={12}
36+
spacingBetweenTextAndIcon={8}
37+
/>
3338
)}
3439
</div>
3540
</>

0 commit comments

Comments
 (0)