From f24cfa95ddd232ea8a9b1890c64f2a236a46ef7a Mon Sep 17 00:00:00 2001 From: Rhys Koedijk Date: Wed, 18 Dec 2024 18:19:35 +1300 Subject: [PATCH] Improve summary tab tile rendering; make tiles smaller and more concise --- ui/components/charts/Tile.scss | 16 +++++++++--- ui/components/charts/Tile.tsx | 22 ++++++++-------- ui/components/sbom/SpdxSummaryCard.tsx | 35 +++++++++++++------------- 3 files changed, 40 insertions(+), 33 deletions(-) diff --git a/ui/components/charts/Tile.scss b/ui/components/charts/Tile.scss index 2c4e00c..044d9ad 100644 --- a/ui/components/charts/Tile.scss +++ b/ui/components/charts/Tile.scss @@ -2,7 +2,17 @@ border: solid 1px var(--border-subtle-color); } -.tile .title { - margin-top: 4px; - margin-bottom: 4px; +.tile .value { + font-size: 3.5rem; + font-weight: 300; + text-align: center; +} + +.tile .title, +.tile .subtitle { + font-size: 1rem; + font-weight: normal; + text-align: center; + margin: 0 0 10px; + width: 100%; } diff --git a/ui/components/charts/Tile.tsx b/ui/components/charts/Tile.tsx index d796bef..0cb2c53 100644 --- a/ui/components/charts/Tile.tsx +++ b/ui/components/charts/Tile.tsx @@ -8,11 +8,10 @@ import './Tile.scss'; interface Props { className?: string; color?: IColor; + size?: number; value: string; title?: string; - header?: string; - footer?: string; - size?: number; + subtitle?: string; } interface State {} @@ -37,21 +36,20 @@ export class Tile extends React.Component { return (
- {this.props.title &&

{this.props.title}

} -
- {this.props.value} + {this.props.title &&

{this.props.title}

} +
+
{this.props.value.substring(0, 5)}
- {this.props.header &&
{this.props.header}
} - {this.props.footer &&
{this.props.footer}
} + {this.props.subtitle &&
{this.props.subtitle}
}
); } diff --git a/ui/components/sbom/SpdxSummaryCard.tsx b/ui/components/sbom/SpdxSummaryCard.tsx index b77b7ba..838e4a3 100644 --- a/ui/components/sbom/SpdxSummaryCard.tsx +++ b/ui/components/sbom/SpdxSummaryCard.tsx @@ -245,39 +245,38 @@ export class SpdxSummaryCard extends React.Component {
- - -
-
0 && this.state.packages!.total > 0 - ? ((this.state.packages!.totalVulnerable / this.state.packages!.total) * 100).toFixed(2) - : 0) + '%' - } + value={this.state.packages?.totalVulnerable?.toString() || '0'} title="Vulnerable Packages" - header={`${this.state.packages?.totalVulnerable || 0} of ${this.state.packages?.total || 0} packages are vulnerable`} /> + + +
+