Merge pull request #15 from rhyskoedijk/feature/summary-tab

Add SBOM summary tab

shared/models/severity/IColor.ts

@@ -3,7 +3,3 @@ export interface IColor {
   green: number;
   blue: number;
 }
-
-export function getHexStringFromColor(color: IColor): string {
-  return `#${color.red.toString(16).padStart(2, '0')}${color.green.toString(16).padStart(2, '0')}${color.blue.toString(16).padStart(2, '0')}`;
-}

shared/models/severity/Severities.ts

@@ -9,6 +9,10 @@ export const SEVERITIES: ISeverity[] = [
 ];
 
 export const DEFAULT_SEVERITY: ISeverity = SEVERITIES[0];
+export const LOW_SEVERITY: ISeverity = SEVERITIES[1];
+export const MODERATE_SEVERITY: ISeverity = SEVERITIES[2];
+export const HIGH_SEVERITY: ISeverity = SEVERITIES[3];
+export const CRITICAL_SEVERITY: ISeverity = SEVERITIES[4];
 
 export function getSeverityByName(name: string): ISeverity {
   const normalizedName = name?.toUpperCase();

shared/spdx/parseSpdxSecurityAdvisoriesLegacy.ts

@@ -16,7 +16,6 @@ import { IPackage } from '../models/spdx/2.3/IPackage';
  * @returns
  */
 export function parseSpdxSecurityAdvisoriesLegacy(pkg: IPackage): ISecurityVulnerability[] | undefined {
-  console.info('Parsing security advisories from legacy SPDX document...');
   return parseExternalRefsAs<ISecurityVulnerability>(
     pkg.externalRefs || [],
     ExternalRefCategory.Security,

ui/components/charts/BarChart.scss

@@ -0,0 +1,3 @@
+.bar-chart .title {
+  margin-bottom: 0px;
+}

ui/components/charts/BarChart.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+
+import { BarSeriesType, cheerfulFiestaPalette, BarChart as MuiBarChart } from '@mui/x-charts';
+import { MakeOptional } from '@mui/x-charts/internals';
+
+import './BarChart.scss';
+
+export interface BarChartSeries {
+  color?: string;
+  label: string;
+  data: number[];
+  stack?: string;
+}
+
+interface Props {
+  className?: string;
+  colors?: string[];
+  bands?: string[];
+  data: BarChartSeries[];
+  layout: 'horizontal' | 'vertical';
+  title?: string;
+  width?: number;
+  height?: number;
+}
+
+interface State {
+  series: MakeOptional<BarSeriesType, 'type'>[];
+}
+
+export class BarChart extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = BarChart.getDerivedStateFromProps(props);
+  }
+
+  static getDerivedStateFromProps(props: Props): State {
+    return {
+      series: props.data.map((d) => ({
+        type: 'bar',
+        layout: props.layout,
+        label: d.label,
+        data: d.data,
+        stack: d.stack,
+        ...(d.color ? { color: d.color } : {}),
+      })),
+    };
+  }
+
+  public componentDidUpdate(prevProps: Readonly<Props>): void {
+    if (prevProps.data !== this.props.data) {
+      this.setState(BarChart.getDerivedStateFromProps(this.props));
+    }
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div className={'bar-chart flex-column flex-center flex-grow ' + (this.props.className || '')}>
+        {this.props.title && <h3 className="title">{this.props.title}</h3>}
+        <MuiBarChart
+          barLabel="value"
+          colors={this.props.colors || cheerfulFiestaPalette}
+          series={this.state.series}
+          layout={this.props.layout}
+          {...(this.props.layout === 'vertical'
+            ? { xAxis: [{ scaleType: 'band', data: this.props.bands || [] }] }
+            : {})}
+          {...(this.props.layout === 'horizontal'
+            ? { yAxis: [{ scaleType: 'band', data: this.props.bands || [] }] }
+            : {})}
+          slotProps={{
+            legend: {
+              labelStyle: {
+                fill: 'var(--text-primary-color)',
+                fontSize: '0.8em',
+              },
+            },
+          }}
+          margin={{ left: 75 }}
+          width={this.props.width || 600}
+          height={this.props.height || 200}
+        />
+      </div>
+    );
+  }
+}

ui/components/charts/PieChart.scss

@@ -0,0 +1,3 @@
+.pie-chart .title {
+  margin-bottom: 4px;
+}