Skip to content

Commit

Permalink
feat: Support Mitigation Candidates for Threat Packs (awslabs#136)
Browse files Browse the repository at this point in the history
* feat: Support Mitigation Candidates for Threat Packs

* chore: Update MitigationCandidate

* chore: Show the comments instead of description for MitigationPack mitigation and ThreatPacks Mitigation Candidate

* chore: Adjust the min width
  • Loading branch information
jessieweiyi authored Sep 17, 2024
1 parent b493179 commit 68fb893
Show file tree
Hide file tree
Showing 18 changed files with 1,723 additions and 89 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,11 @@ const ThreatStatementEditor = () => {
setEditingStatement(editingStatement);
}, [editingStatement]);

return <ThreatStatementEditorComponent onThreatListView={() => handleNavigateView(ROUTE_THREAT_LIST)} />;
return <ThreatStatementEditorComponent
onThreatListView={() => handleNavigateView(ROUTE_THREAT_LIST)}
threatPackId={threatPackId}
threatPackThreatId={threatPackThreatId}
/>;
};

export default ThreatStatementEditor;
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ const Table: FC<TableProps> = ({ disableSettings, preferences: collectionPrefere
const [preferences, setPreferences] = useState<CollectionPreferencesProps.Preferences>({
pageSize: props.defaultPageSize,
visibleContent: props.columnDefinitions.map((cd) => cd.id || ''),
wrapLines: true,
stripedRows: true,
});

const visibleContentOptions = useMemo(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,11 @@
See the License for the specific language governing permissions and
limitations under the License.
******************************************************************************************************************** */
import { SpaceBetween } from '@cloudscape-design/components';
import Autosuggest from '@cloudscape-design/components/autosuggest';
import ExpandableSection, { ExpandableSectionProps } from '@cloudscape-design/components/expandable-section';
import TokenGroup from '@cloudscape-design/components/token-group';
import React, { FC, useMemo } from 'react';
import React, { FC, PropsWithChildren, useMemo } from 'react';
import { Mitigation } from '../../../customTypes';

export interface MitigationLinkProps {
Expand All @@ -27,12 +28,13 @@ export interface MitigationLinkProps {
onRemoveMitigationLink: (mitigationId: string) => void;
}

const MitigationLinkComponent: FC<MitigationLinkProps> = ({
const MitigationLinkComponent: FC<PropsWithChildren<MitigationLinkProps>> = ({
variant,
linkedMitigationIds,
mitigationList,
onAddMitigationLink,
onRemoveMitigationLink,
children,
}) => {
const [searchValue, setSearchValue] = React.useState('');

Expand All @@ -54,39 +56,44 @@ const MitigationLinkComponent: FC<MitigationLinkProps> = ({
variant={variant}
headingTagOverride={variant === 'container' ? 'h3' : undefined}
headerText={`Linked mitigations (${linkedMitigations.length})`}>
<Autosuggest
onChange={({ detail }) => setSearchValue(detail.value)}
value={searchValue}
options={filteredMitigations.map(x => ({
value: x.id,
label: x.content,
}))}
onSelect={({ detail }) => {
onAddMitigationLink(detail.value);
setSearchValue('');
}}
filteringType='manual'
enteredTextLabel={value => `Add new mitigation: "${value}"`}
placeholder="Search mitigation"
empty="No matches found"
/>
<div
style={{
display: 'flex',
}}
>
<TokenGroup
items={
linkedMitigations.map(x => ({
<SpaceBetween direction='vertical' size="l">
<div>
<Autosuggest
onChange={({ detail }) => setSearchValue(detail.value)}
value={searchValue}
options={filteredMitigations.map(x => ({
value: x.id,
label: x.content,
dismissLabel: `Unlink mitigation ${x.numericId}`,
}))
}
onDismiss={({ detail: { itemIndex } }) => {
onRemoveMitigationLink(linkedMitigations[itemIndex].id);
}}
/>
</div>
}))}
onSelect={({ detail }) => {
onAddMitigationLink(detail.value);
setSearchValue('');
}}
filteringType='manual'
enteredTextLabel={value => `Add new mitigation: "${value}"`}
placeholder="Search mitigation"
empty="No matches found"
/>
<div
style={{
display: 'flex',
}}
>
<TokenGroup
items={
linkedMitigations.map(x => ({
label: x.content,
dismissLabel: `Unlink mitigation ${x.numericId}`,
}))
}
onDismiss={({ detail: { itemIndex } }) => {
onRemoveMitigationLink(linkedMitigations[itemIndex].id);
}}
/>
</div>
</div>
{children}
</SpaceBetween>
</ExpandableSection>);
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export interface FieldSelectorProps {
setEditor: (type: ThreatFieldTypes) => void;
statement: TemplateThreatStatement;
suggestions?: string[];
onGiveExampleClick: () => void;
onGiveExampleClick?: () => void;
setCustomTemplateEditorVisible: (visible: boolean) => void;
onStartOver?: () => void;
}
Expand Down Expand Up @@ -153,7 +153,7 @@ const FieldSelector: FC<FieldSelectorProps> = ({
info={composerMode === 'Full' ? undefined : <Button variant='icon' iconName='status-info' onClick={showInfoModal} />}
actions={<SpaceBetween direction='horizontal' size='s'>
{composerMode === 'EditorOnly' && <Button onClick={onStartOver}>Start over</Button>}
<Button onClick={onGiveExampleClick}>Give me a random example</Button>
{onGiveExampleClick && <Button onClick={onGiveExampleClick}>Give me a random example</Button>}
<ButtonDropdown items={[
{ id: 'customTemplate', text: 'Custom Template' },
]}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const Header: FC<HeaderProps> = ({
return (
<SpaceBetween direction="horizontal" size="xs">
<Button onClick={onCancel}>Threat list</Button>
<Button onClick={onStartOver}>Start over</Button>
{onStartOver && <Button onClick={onStartOver}>Start over</Button>}
<Button variant="primary" onClick={onComplete} disabled={!statement.statement}>
{saveButtonText}
</Button>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
/** *******************************************************************************************************************
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License").
You may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
******************************************************************************************************************** */
import Button from '@cloudscape-design/components/button';
import SpaceBetween from '@cloudscape-design/components/space-between';
import { useMemo, FC, useState, useEffect } from 'react';
import { METADATA_KEY_SOURCE_THREAT_PACK, METADATA_KEY_SOURCE_THREAT_PACK_MITIGATION_CANDIDATE } from '../../../configs';
import { useThreatPacksContext } from '../../../contexts';
import { Mitigation } from '../../../customTypes/mitigations';
import getMetadata from '../../../utils/getMetadata';
import Table, { ColumnDefinition } from '../../generic/Table';

export interface MitigationCandidatesProp {
threatPackId: string;
threatPackThreatId: string;
linkedMitigationIds: string[];
mitigationList: Mitigation[];
onAddMitigationsFromMitigationCandidates: (mitigationCandidates: Mitigation[], threatPackId: string) => void;
}

const MitigationCandidates: FC<MitigationCandidatesProp> = ({
threatPackId,
threatPackThreatId,
linkedMitigationIds,
mitigationList,
onAddMitigationsFromMitigationCandidates,
}) => {
const [selectedItems, setSelectedItems] = useState<Mitigation[]>([]);
const { getMitigationCandidates } = useThreatPacksContext();
const [mitigations, setMitigations] = useState<Mitigation[]>([]);

const linkedMitigationsFromThreakpack = useMemo(() => {
return mitigationList.map(x => {
if (linkedMitigationIds.includes(x.id)) {
const metadata = getMetadata(x.metadata);
if (metadata[METADATA_KEY_SOURCE_THREAT_PACK] == threatPackId) {
return metadata[METADATA_KEY_SOURCE_THREAT_PACK_MITIGATION_CANDIDATE];
}
}

return undefined;
}).filter(x => !!x);
}, [mitigationList, linkedMitigationIds, threatPackId]);

useEffect(() => {
const setupMitigations = async () => {
if (threatPackId && threatPackThreatId) {
const mitigationCandidates = await getMitigationCandidates(threatPackId, threatPackThreatId);
setMitigations(mitigationCandidates);
} else {
setMitigations([]);
}
};

setupMitigations().catch(err => console.log('Error', err));
}, [threatPackId, threatPackThreatId, getMitigationCandidates]);

const items = useMemo(() => {
return mitigations.map(x => {
const metadata = getMetadata(x.metadata);
return {
...x,
comments: metadata.Comments || '',
};
});
}, [mitigations]);

const colDef: ColumnDefinition<{
content: string;
comments: string;
}>[] = useMemo(() => [
{
id: 'content',
header: 'Mitigation',
cell: (data) => data.content,
minWidth: 400,
sortingField: 'content',
},
{
id: 'comments',
header: 'Comments',
cell: (data) => data.comments,
sortingField: 'comments',
},
], []);

if (items.length === 0) {
return (<></>);
}

return (<Table
columnDefinitions={colDef}
actions={<SpaceBetween direction='horizontal' size='s'>
<Button
variant='primary'
disabled={selectedItems.length === 0}
onClick={() => onAddMitigationsFromMitigationCandidates(selectedItems, threatPackId)}
>
Add as mitigations
</Button>
</SpaceBetween>}
header="Mitigation Candidates"
headerVariant='h3'
variant='embedded'
items={items || []}
selectedItems={selectedItems}
onSelectionChange={({ detail }) => setSelectedItems([...detail.selectedItems])}
isItemDisabled={(item) => linkedMitigationsFromThreakpack.includes(item.id)}
/>);
};

export default MitigationCandidates;
Loading

0 comments on commit 68fb893

Please sign in to comment.