Improve summary tab tile rendering; make tiles smaller and more concise

rhyskoedijk · Dec 18, 2024 · f24cfa9 · f24cfa9
1 parent 755084d
commit f24cfa9
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 33 deletions.
diff --git 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
@@ -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<Props, State> {
     return (
       <div
         className={
-          'tile text-on-communication-background flex-column flex-center flex-grow flex-gap-4 padding-16 ' +
-          (this.props.className || '')
+          'tile text-on-communication-background flex-column flex-center padding-8' + (this.props.className || '')
         }
         style={{
           backgroundColor: this.props.color ? rgbToHex(this.props.color) : undefined,
-          width: this.props.size,
-          height: this.props.size,
+          width: this.props.size || 160,
+          height: this.props.size || 160,
         }}
+        title={`${this.props.title}: ${this.props.value}`}
       >
-        {this.props.title && <h3 className="title">{this.props.title}</h3>}
-        <div className="value flex-grow" style={{ fontSize: this.props.header || this.props.footer ? '3rem' : '5rem' }}>
-          {this.props.value}
+        {this.props.title && <h2 className="title text-ellipsis">{this.props.title}</h2>}
+        <div className="flex-column flex-center flex-grow">
+          <div className="value">{this.props.value.substring(0, 5)}</div>
         </div>
-        {this.props.header && <div className="header text-center">{this.props.header}</div>}
-        {this.props.footer && <div className="footer text-center">{this.props.footer}</div>}
+        {this.props.subtitle && <div className="subtitle text-ellipsis">{this.props.subtitle}</div>}
       </div>
     );
   }

diff --git a/ui/components/sbom/SpdxSummaryCard.tsx b/ui/components/sbom/SpdxSummaryCard.tsx
@@ -245,39 +245,38 @@ export class SpdxSummaryCard extends React.Component<Props, State> {
         <ThemeProvider theme={this.state.theme}>
           <div className="flex-column flex-gap-24">
             <div className="summary-row flex-row flex-wrap flex-gap-24">
-              <Tile color={DEFAULT_SEVERITY.color} value={this.state.files?.total?.toString() || '0'} title="Files" />
               <Tile
                 color={DEFAULT_SEVERITY.color}
-                value={this.state.packages?.total?.toString() || '0'}
-                title="Packages"
-              />
-              <Tile
-                color={DEFAULT_SEVERITY.color}
-                value={this.state.licenses?.total?.toString() || '0'}
-                title="Licenses"
+                value={this.state.files?.total?.toString() || '0'}
+                title="Total Files"
               />
               <Tile
                 color={DEFAULT_SEVERITY.color}
-                value={this.state.suppliers?.total?.toString() || '0'}
-                title="Suppliers"
+                value={this.state.packages?.total?.toString() || '0'}
+                title="Total Packages"
               />
-            </div>
-            <div className="summary-row flex-row flex-wrap flex-gap-24">
               <Tile
                 color={this.state.securityAdvisories?.vulnHighestSeverity?.color}
-                value={
-                  (this.state.packages!.totalVulnerable > 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`}
               />
               <Tile
                 color={this.state.securityAdvisories?.vulnHighestSeverity?.color}
                 value={(this.state.securityAdvisories?.total || 0).toString()}
                 title="Total Vulnerabilities"
               />
+              <Tile
+                color={DEFAULT_SEVERITY.color}
+                value={this.state.licenses?.total?.toString() || '0'}
+                title="Unique Licenses"
+              />
+              <Tile
+                color={DEFAULT_SEVERITY.color}
+                value={this.state.suppliers?.total?.toString() || '0'}
+                title="Unique Suppliers"
+              />
+            </div>
+            <div className="summary-row flex-row flex-wrap flex-gap-24">
               <BarChart
                 bands={this.state.packageManagers}
                 data={this.state.securityAdvisories?.vulnByPackageManagerChartData || []}