@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
155 lines (153 loc) • 6.66 kB
JavaScript
/**
* @file Detail page layout stories.
* @copyright IBM Security 2020 - 2021
*/
import { Filter16, Search16, View16 } from '@carbon/icons-react';
import { Row, Column, Grid } from 'carbon-components-react';
import React from 'react';
import { pageLayouts } from '../../../.storybook';
import { ActionBarModule, ActionBarModuleItems, CardAreaModule, DataTablePagination, Decorator, DescriptionModule, DescriptionListModule, ICA, ICAModule, IconButtonBar, SummaryCard as SummaryCardComponent, SummaryCardHeader, TitleBarModule, TypeLayout, TypeLayoutBody, TypeLayoutCell, TypeLayoutRow, unstable_withBackground } from '../..';
import config, { withContainer } from './stories';
var decorators = config.decorators,
parameters = config.parameters;
// TODO: Remove workaround for https://github.ibm.com/security/design-core-experience/issues/241
var RowWithContainer = withContainer(Row);
var SummaryCard = unstable_withBackground(SummaryCardComponent);
export default {
title: pageLayouts('Detail'),
parameters: parameters,
decorators: decorators
};
export var Default = function Default() {
return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(TitleBarModule, {
title: "Summary"
}), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
lg: 6
}, /*#__PURE__*/React.createElement(DescriptionModule, null, function (_ref) {
var getLayoutProps = _ref.getLayoutProps;
return /*#__PURE__*/React.createElement("p", getLayoutProps(), "BadFlick is a backdoor that is usually seen being distributed using exploited word documents. It does not have any persistence to survive reboot, but it is capable of opening a reverse shell connection to its C2 server where it can download and execute possibly other malware.");
})), /*#__PURE__*/React.createElement(Column, {
lg: {
offset: 2,
span: 8
}
}, /*#__PURE__*/React.createElement(DescriptionListModule, null, /*#__PURE__*/React.createElement(TypeLayout, null, /*#__PURE__*/React.createElement(TypeLayoutBody, null, /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Created by"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, "X-Force IRIS")), /*#__PURE__*/React.createElement(TypeLayoutRow, null, /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Last updated"), /*#__PURE__*/React.createElement(TypeLayoutCell, null, "Jul 14 2019"))))))), /*#__PURE__*/React.createElement(TitleBarModule, {
title: "Related reports"
}), /*#__PURE__*/React.createElement(ActionBarModule, null, "Supplementary details", /*#__PURE__*/React.createElement(ActionBarModuleItems, null, /*#__PURE__*/React.createElement(IconButtonBar, {
actions: [{
label: 'Search',
renderIcon: Search16
}, {
label: 'Filter',
renderIcon: Filter16
}, {
label: 'View',
renderIcon: View16
}],
size: "lg"
}))), /*#__PURE__*/React.createElement(CardAreaModule, null, function (_ref2) {
var getLayoutProps = _ref2.getLayoutProps;
return /*#__PURE__*/React.createElement(Row, {
narrow: true
}, /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(SummaryCard, getLayoutProps(), /*#__PURE__*/React.createElement(SummaryCardHeader, {
title: "Threat actor"
}))), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(SummaryCard, getLayoutProps(), /*#__PURE__*/React.createElement(SummaryCardHeader, {
title: "Threat report"
}))), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(SummaryCard, getLayoutProps(), /*#__PURE__*/React.createElement(SummaryCardHeader, {
title: "IP report"
}))), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(SummaryCard, getLayoutProps(), /*#__PURE__*/React.createElement(SummaryCardHeader, {
title: "Vulnerability report"
}))));
}), /*#__PURE__*/React.createElement(RowWithContainer, {
narrow: true
}, /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(TitleBarModule, {
element: "h4",
title: "Indicators"
}))), /*#__PURE__*/React.createElement(ICAModule, null, function (_ref3) {
var getLayoutProps = _ref3.getLayoutProps;
return /*#__PURE__*/React.createElement(RowWithContainer, {
narrow: true
}, /*#__PURE__*/React.createElement(Column, getLayoutProps({
lg: 3,
md: 2,
sm: 2
}), /*#__PURE__*/React.createElement(ICA, {
label: "Malware",
value: 11
})), /*#__PURE__*/React.createElement(Column, getLayoutProps({
lg: 3,
md: 2,
sm: 2
}), /*#__PURE__*/React.createElement(ICA, {
label: "IPs",
value: 8
})), /*#__PURE__*/React.createElement(Column, getLayoutProps({
lg: 3,
md: 2,
sm: 2
}), /*#__PURE__*/React.createElement(ICA, {
label: "URLs",
value: 9
})), /*#__PURE__*/React.createElement(Column, getLayoutProps({
lg: 3,
md: 2,
sm: 2
}), /*#__PURE__*/React.createElement(ICA, {
label: "VULs",
value: 1
})));
}), /*#__PURE__*/React.createElement(Row, {
narrow: true
}, /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(DataTablePagination, {
headers: [{
header: 'Name',
key: 'name'
}, {
header: 'Last sighted',
key: 'lastSighted'
}],
pageSize: 5,
pageSizes: [5, 10, 25, 50],
rows: [{
id: '0',
lastSighted: 'Feb 3 2019 12:00 PM EST',
name: /*#__PURE__*/React.createElement(Decorator, {
score: 7,
type: "MAL",
value: "5020c08bcc061236643293bf0d897321"
})
}, {
id: '1',
lastSighted: 'Feb 5 2019 12:00 PM EST',
name: /*#__PURE__*/React.createElement(Decorator, {
score: 7,
type: "MAL",
value: "aca7037286b64b0da05c9708d647c013"
})
}, {
id: '2',
lastSighted: 'Feb 7 2019 12:00 PM EST',
name: /*#__PURE__*/React.createElement(Decorator, {
score: 7,
type: "MAL",
value: "bd9e4c82bf12c4e7a58221fc52fed705"
})
}, {
id: '3',
lastSighted: 'Apr 1 2019 12:00 PM EST',
name: /*#__PURE__*/React.createElement(Decorator, {
score: 0,
type: "IP",
value: "103.243.175.181"
})
}, {
id: '4',
lastSighted: 'Apr 1 2019 12:00 PM EST',
name: /*#__PURE__*/React.createElement(Decorator, {
score: 7,
type: "MAL",
value: "5020c08bcc061236643293bf0d897321"
})
}]
}))));
};