Merge pull request #714 from setchy/feature/footer-project-components

feat(dashboard): add vuln / non-vuln footer to projects and components cards
DependencyTrack · Jan 30, 2024 · 10ab007 · 10ab007
2 parents e18c7ee + 2b4b4f2
commit 10ab007
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 12 deletions.
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
@@ -41,6 +41,8 @@ $severity-label-bg: $grey-900 !default;
 $notification-fail: $red;
 $notification-warn: $yellow;
 $notification-info: $blue;
+$notification-pass: $green;
+$notification-note: #777777;
 
 // Components
 //
@@ -231,6 +233,8 @@ $recessed: $grey-850;
   --notification-fail: #{$notification-fail};
   --notification-warn: #{$notification-warn};
   --notification-info: #{$notification-info};
+  --notification-pass: #{$notification-pass};
+  --notification-note: #{$notification-note};
 
   --component-active-color: #{$component-active-color};
 

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -69,6 +69,7 @@
     "fsf_libre": "FSF Libre",
     "total": "Total",
     "vulnerable": "Vulnerable",
+    "non_vulnerable": "Non Vulnerable",
     "portfolio_statistics": "Portfolio Statistics",
     "suppress": "Suppress",
     "suppressed": "Suppressed",

diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
@@ -17,8 +17,8 @@
         <b-row class="text-center">
           <b-col class="mb-sm-2 mb-0">
             <div class="text-muted">{{ $t('message.vulnerable_projects') }}</div>
-            <strong>{{vulnerableProjects}} ({{vulnerableProjectPercent}}%)</strong>
-            <b-progress height={} class="progress-xs mt-2 status-passed" :precision="1" v-bind:value="vulnerableProjectPercent"></b-progress>
+            <strong>{{vulnerableProjects}} ({{vulnerableProjectsPercent}}%)</strong>
+            <b-progress height={} class="progress-xs mt-2 status-passed" :precision="1" v-bind:value="vulnerableProjectsPercent"></b-progress>
           </b-col>
           <b-col class="mb-sm-2 mb-0 d-md-down-none">
             <div class="text-muted">{{ $t('message.violations_audited') }}</div>
@@ -27,8 +27,8 @@
           </b-col>
           <b-col class="mb-sm-2 mb-0">
             <div class="text-muted">{{ $t('message.vulnerable_components') }}</div>
-            <strong>{{vulnerableComponents}} ({{vulnerableComponentPercent}}%)</strong>
-            <b-progress height={} class="progress-xs mt-2 status-warning" :precision="1" v-bind:value="vulnerableComponentPercent"></b-progress>
+            <strong>{{vulnerableComponents}} ({{vulnerableComponentsPercent}}%)</strong>
+            <b-progress height={} class="progress-xs mt-2 status-warning" :precision="1" v-bind:value="vulnerableComponentsPercent"></b-progress>
           </b-col>
           <b-col class="mb-sm-2 mb-0">
             <div class="text-muted">{{ $t('message.findings_audited') }}</div>
@@ -96,6 +96,20 @@
             </b-col>
           </b-row>
           <chart-project-vulnerabilities ref="chartProjectVulnerabilities" chartId="chartProjectVulnerabilities" class="chart-wrapper" style="height:200px;margin-top:40px;" :height="200"></chart-project-vulnerabilities>
+          <div slot="footer">
+            <b-row class="text-center">
+              <b-col class="mb-sm-2 mb-0">
+                <div class="text-muted">{{ $t("message.non_vulnerable") }}</div>
+                <strong>{{ nonVulnerableProjects }} ({{ nonVulnerableProjectsPercent }}%)</strong>
+                <b-progress height="{}" class="progress-xs mt-2 status-passed" :precision="1" v-bind:value="nonVulnerableProjectsPercent"></b-progress>
+              </b-col>
+              <b-col class="mb-sm-2 mb-0">
+                <div class="text-muted">{{ $t("message.vulnerable") }}</div>
+                <strong>{{ vulnerableProjects }} ({{ vulnerableProjectsPercent }}%)</strong>
+                <b-progress height="{}" class="progress-xs mt-2 status-warning" :precision="1" v-bind:value="vulnerableProjectsPercent"></b-progress>
+              </b-col>
+            </b-row>
+          </div>
         </b-card>
       </b-col>
       <b-col sm="6">
@@ -108,6 +122,20 @@
             </b-col>
           </b-row>
           <chart-component-vulnerabilities ref="chartComponentVulnerabilities" chartId="chartComponentVulnerabilities" class="chart-wrapper" style="height:200px;margin-top:40px;" :height="200"></chart-component-vulnerabilities>
+          <div slot="footer">
+            <b-row class="text-center">
+              <b-col class="mb-sm-2 mb-0">
+                <div class="text-muted">{{ $t("message.non_vulnerable") }}</div>
+                <strong>{{ nonVulnerableComponents }} ({{ nonVulnerableComponentsPercent }}%)</strong>
+                <b-progress height="{}" class="progress-xs mt-2 status-passed" :precision="1" v-bind:value="nonVulnerableComponentsPercent"></b-progress>
+              </b-col>
+              <b-col class="mb-sm-2 mb-0">
+                <div class="text-muted">{{ $t("message.vulnerable") }}</div>
+                <strong>{{ vulnerableComponents }} ({{ vulnerableComponentsPercent }}%)</strong>
+                <b-progress height="{}" class="progress-xs mt-2 status-warning" :precision="1" v-bind:value="vulnerableComponentsPercent"></b-progress>
+              </b-col>
+            </b-row>
+          </div>
         </b-card>
       </b-col>
     </b-row>
@@ -233,11 +261,15 @@
       return {
         totalProjects: 0,
         vulnerableProjects: 0,
-        vulnerableProjectPercent: 0,
+        vulnerableProjectsPercent: 0,
+        nonVulnerableProjects: 0,
+        nonVulnerableProjectsPercent: 0,
 
         totalComponents: 0,
         vulnerableComponents: 0,
-        vulnerableComponentPercent: 0,
+        vulnerableComponentsPercent: 0,
+        nonVulnerableComponents: 0,
+        nonVulnerableComponentsPercent: 0,
 
         totalFindings: 0,
         auditedFindings: 0,
@@ -269,11 +301,15 @@
         let metric = metrics[metrics.length - 1]; //Use the most recent metric
         this.totalProjects = common.valueWithDefault(metric.projects, "0");
         this.vulnerableProjects = common.valueWithDefault(metric.vulnerableProjects, "0");
-        this.vulnerableProjectPercent = common.calcProgressPercent(this.totalProjects, this.vulnerableProjects);
+        this.vulnerableProjectsPercent = common.calcProgressPercent(this.totalProjects, this.vulnerableProjects);
+        this.nonVulnerableProjects = this.totalProjects - this.vulnerableProjects;
+        this.nonVulnerableProjectsPercent = common.calcProgressPercent(this.totalProjects, this.nonVulnerableProjects);
 
         this.totalComponents = common.valueWithDefault(metric.components, "0");
         this.vulnerableComponents = common.valueWithDefault(metric.vulnerableComponents, "0");
-        this.vulnerableComponentPercent = common.calcProgressPercent(this.totalComponents, this.vulnerableComponents);
+        this.vulnerableComponentsPercent = common.calcProgressPercent(this.totalComponents, this.vulnerableComponents);
+        this.nonVulnerableComponents = this.totalComponents - this.vulnerableComponents;
+        this.nonVulnerableComponentsPercent = common.calcProgressPercent(this.totalComponents, this.nonVulnerableComponents);
 
         this.totalFindings = common.valueWithDefault(metric.findingsTotal, "0");
         this.auditedFindings = common.valueWithDefault(metric.findingsAudited, "0");

diff --git a/src/views/dashboard/ChartComponentVulnerabilities.vue b/src/views/dashboard/ChartComponentVulnerabilities.vue
@@ -11,22 +11,26 @@
     },
     methods: {
       render: function(metrics) {
-        const totalStyle = getStyle('--severity-unassigned');
-        const affectedStyle = getStyle('--severity-info');
+        const totalStyle = getStyle('--notification-note');
+        const affectedStyle = getStyle('--notification-warn');
+        const nonAffectedStyle = getStyle('--notification-pass');
 
         let labels = [];
         let totalData = [];
         let affectedData = [];
+        let nonAffectedData = [];
 
         for (let i = 0; i < metrics.length; i++) {
           labels.push(common.formatTimestamp(metrics[i].firstOccurrence));
           totalData.push(metrics[i].components);
           affectedData.push(metrics[i].vulnerableComponents);
+          nonAffectedData.push(metrics[i].components - metrics[i].vulnerableComponents)
 
           if (i === metrics.length - 1) {
             labels.push(common.formatTimestamp(metrics[i].lastOccurrence));
             totalData.push(metrics[i].components);
             affectedData.push(metrics[i].vulnerableComponents);
+            nonAffectedData.push(metrics[i].components - metrics[i].vulnerableComponents)
           }
         }
 
@@ -40,6 +44,13 @@
               pointHoverBackgroundColor: '#fff',
               data: totalData
             },
+            {
+              label: this.$t('message.non_vulnerable'),
+              backgroundColor: hexToRgba(nonAffectedStyle, 10),
+              borderColor: nonAffectedStyle,
+              pointHoverBackgroundColor: '#fff',
+              data: nonAffectedData
+            },
             {
               label: this.$t('message.vulnerable'),
               backgroundColor: hexToRgba(affectedStyle, 10),

diff --git a/src/views/dashboard/ChartProjectVulnerabilities.vue b/src/views/dashboard/ChartProjectVulnerabilities.vue
@@ -11,22 +11,26 @@
     },
     methods: {
       render: function(metrics) {
-        const totalStyle = getStyle('--severity-unassigned');
-        const affectedStyle = getStyle('--severity-info');
+        const totalStyle = getStyle('--notification-note');
+        const affectedStyle = getStyle('--notification-warn');
+        const nonAffectedStyle = getStyle('--notification-pass');
 
         let labels = [];
         let totalData = [];
         let affectedData = [];
+        let nonAffectedData = [];
 
         for (let i = 0; i < metrics.length; i++) {
           labels.push(common.formatTimestamp(metrics[i].firstOccurrence));
           totalData.push(metrics[i].projects);
           affectedData.push(metrics[i].vulnerableProjects);
+          nonAffectedData.push(metrics[i].projects - metrics[i].vulnerableProjects)
 
           if (i === metrics.length - 1) {
             labels.push(common.formatTimestamp(metrics[i].lastOccurrence));
             totalData.push(metrics[i].projects);
             affectedData.push(metrics[i].vulnerableProjects);
+            nonAffectedData.push(metrics[i].projects - metrics[i].vulnerableProjects)
           }
         }
 
@@ -40,6 +44,13 @@
               pointHoverBackgroundColor: '#fff',
               data: totalData
             },
+            {
+              label: this.$t('message.non_vulnerable'),
+              backgroundColor: hexToRgba(nonAffectedStyle, 10),
+              borderColor: nonAffectedStyle,
+              pointHoverBackgroundColor: '#fff',
+              data: nonAffectedData
+            },
             {
               label: this.$t('message.vulnerable'),
               backgroundColor: hexToRgba(affectedStyle, 10),