Skip to content

Commit

Permalink
Changed Summary look. (#165)
Browse files Browse the repository at this point in the history 
Signed-off-by: Olga Lavtar <[email protected]>
  • Loading branch information
@olavtar
olavtar authored Oct 4, 2023
1 parent 076a5ab commit 70f3e26
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 86 deletions.
54 changes: 29 additions & 25 deletions ui/src/components/ChartCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,41 @@
import React from 'react';
import { Bullseye, Card, CardBody, CardHeader, CardTitle, Divider } from '@patternfly/react-core';
import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts';
import {Provider} from '../api/report';
import { Provider } from '../api/report';

const customColors = ['#800000', '#FF0000', '#FFA500', '#808000'];

export const ChartCard = ({ provider }: { provider: Provider }) => {
const customColors = ['#800000', '#FF0000', '#FFA500', '#808000'];
return (
// <Card isFlat isFullHeight>
// <CardHeader>
// <CardTitle>{`${provider.summary.vulnerabilities.total} vulnerabilities in ${provider.dependencies.length} dependencies`}</CardTitle>
// </CardHeader>
// <Divider />
// <CardBody>
<div>
<span>{provider.dependencies.length} dependencies</span>
<Bullseye>

const legendData = [
{ name: `Critical: ${provider.summary.vulnerabilities.critical}`,symbol: { type: 'square', fill: customColors[0] } },
{ name: `High: ${provider.summary.vulnerabilities.high}`, symbol: { type: 'square', fill: customColors[1] } },
{ name: `Medium: ${provider.summary.vulnerabilities.medium}`, symbol: { type: 'square', fill: customColors[2] } },
{ name: `Low: ${provider.summary.vulnerabilities.low}`, symbol: { type: 'square', fill: customColors[3] } },
];

return (
<div>
{/* CardHeader */}
<CardHeader>
<CardTitle>{`${provider.summary.vulnerabilities.total} vulnerabilities in ${provider.dependencies.length} dependencies`}</CardTitle>
</CardHeader>
<Divider />

{/* Chart */}
<CardBody style={{paddingBottom: "inherit"}}>
<Bullseye>
<div style={{ height: '230px', width: '350px' }}>
<ChartDonut
constrainToVisibleArea
data={[
{ x: 'Critical', y: provider.summary.vulnerabilities.critical },
{ x: 'High', y: provider.summary.vulnerabilities.high },
{ x: 'Medium', y: provider.summary.vulnerabilities.medium,},
{ x: 'Low', y: provider.summary.vulnerabilities.low },
{ x: 'Critical', y: provider.summary.vulnerabilities.critical },
{ x: 'High', y: provider.summary.vulnerabilities.high },
{ x: 'Medium', y: provider.summary.vulnerabilities.medium },
{ x: 'Low', y: provider.summary.vulnerabilities.low },
]}
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
legendData={[
{ name: `Critical: ${provider.summary.vulnerabilities.critical}` },
{ name: `High: ${provider.summary.vulnerabilities.high}` },
{name: `Medium: ${provider.summary.vulnerabilities.medium}`},
{ name: `Low: ${provider.summary.vulnerabilities.low}` },
]}
legendData={legendData}
legendOrientation="vertical"
legendPosition="right"
padding={{
Expand All @@ -46,8 +51,7 @@ export const ChartCard = ({ provider }: { provider: Provider }) => {
/>
</div>
</Bullseye>
</div>
// </CardBody>
// </Card>
</CardBody>
</div>
);
};
157 changes: 96 additions & 61 deletions ui/src/components/SummaryCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import {
DescriptionListDescription,
DescriptionListGroup,
DescriptionListTerm,
Divider,
Divider, Grid, GridItem,
Icon,
List,
ListItem,
ListItem, Title, TitleSizes,
} from '@patternfly/react-core';
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
import RedhatIcon from '@patternfly/react-icons/dist/esm/icons/redhat-icon';
Expand All @@ -26,83 +26,118 @@ import React from "react";
export const SummaryCard = () => {
const appContext = useAppContext();
const providers = Object.keys(appContext.report);
return (
return (
<Grid hasGutter>
<Title headingLevel="h3" size={TitleSizes['2xl']} style={{paddingLeft: '15px'}}>
<Icon isInline status="info">
<ExclamationTriangleIcon style={{fill: "#f0ab00"}}/>
</Icon>&nbsp;Red Hat Overview of security Issues
</Title>
<Divider />
<GridItem md={6}>
<Card isFlat isFullHeight>
<CardHeader>
<CardTitle>
<Icon isInline status="info">
<ExclamationTriangleIcon style={{fill: "#f0ab00"}}/>
</Icon>&nbsp;Red Hat Overview of security Issues</CardTitle>
<DescriptionListTerm style={{fontSize: "large"}}>
Below is a list of dependencies affected with CVE.
</DescriptionListTerm>
</CardTitle>
</CardHeader>
<Divider />
{/*<Divider/>*/}
<CardBody>
<DescriptionListGroup>
<DescriptionListDescription>
<DescriptionListTerm>
Below is a list of dependencies affected with CVE.
</DescriptionListTerm>
Below is a list of dependencies affected with CVE.
</DescriptionListTerm>
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionList isAutoFit>
{providers?.map((name, index) => {
const provider = appContext.report[name];
return (
<DescriptionListGroup key={index}>
<DescriptionListTerm>{name}</DescriptionListTerm>
<DescriptionListDescription>
<ChartCard provider={provider} />
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup key={index}>
<DescriptionListTerm>{name}</DescriptionListTerm>
<DescriptionListDescription>
<ChartCard provider={provider}/>
</DescriptionListDescription>
</DescriptionListGroup>
)
})
}
</DescriptionList>
</CardBody>
<Divider/>
<CardFooter>
<DescriptionList
columnModifier={{
default: '2Col',
}}
>
<DescriptionListGroup>
<DescriptionListTerm style={{fontSize: "large"}}>
<Icon isInline status="info">
<RedhatIcon style={{fill: "#cc0000"}}/>
<Divider/>
</Card>
</GridItem>
<GridItem md={6}>
<Card isFlat>
<DescriptionListGroup>
<CardTitle component="h4">
<DescriptionListTerm style={{fontSize: "large"}}>
<Icon isInline status="info">
<RedhatIcon style={{fill: "#cc0000"}}/>
</Icon>&nbsp;
Red Hat Remediations
</DescriptionListTerm>
</CardTitle>
<CardBody>
<DescriptionListDescription>
<List isPlain>
<ListItem>
<Icon isInline status="success">
<img src={SecurityCheckIcon} alt="Security Check Icon"/>
</Icon>&nbsp;
Red Hat Remediations
</DescriptionListTerm>
<DescriptionListDescription>
<List isPlain>
<ListItem>
<Icon isInline status="success">
<img src={SecurityCheckIcon} alt="Security Check Icon" />
</Icon>&nbsp;
10+ vulnerable packages
</ListItem>
</List>
</DescriptionListDescription>
</DescriptionListGroup>

<DescriptionListGroup>
<DescriptionListTerm style={{fontSize: "large"}}>
Subscribe to stay updated
</DescriptionListTerm>
<DescriptionListDescription>
<List isPlain>
<ListItem>
Do you want to subscribe for Red Hat Trusted Content Service to keep your projects risk profile updated?
</ListItem>
<ListItem>
<Button variant="primary" size="sm">
Sign up
</Button>
</ListItem>
</List>
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
</CardFooter>
10+ vulnerable packages
</ListItem>
</List>
</DescriptionListDescription>
</CardBody>
</DescriptionListGroup>
</Card>&nbsp;
<Card isFlat>
<DescriptionListGroup>
<CardTitle component="h4">
<DescriptionListTerm style={{fontSize: "large"}}>
Subscribe to stay updated
</DescriptionListTerm>
</CardTitle>
<CardBody>
<DescriptionListDescription>
<List isPlain>
<ListItem>
Do you want to subscribe for Red Hat Trusted Content Service to keep your
projects risk profile updated?
</ListItem>
<ListItem>
<Button variant="primary" size="sm">
Sign up
</Button>
</ListItem>
</List>
</DescriptionListDescription>
</CardBody>
</DescriptionListGroup>
</Card>&nbsp;
<Card isFlat>
<DescriptionListGroup>
<CardTitle component="h4">
<DescriptionListTerm style={{fontSize: "large"}}>
Licenses
</DescriptionListTerm>
</CardTitle>
<CardBody>
<DescriptionListDescription>
<List isPlain>
<ListItem>
Some info here
</ListItem>
</List>
</DescriptionListDescription>
</CardBody>
</DescriptionListGroup>
</Card>
);
};
</GridItem>
</Grid>
);
};

0 comments on commit 70f3e26

Please sign in to comment.