Merge pull request #713 from setchy/refactor/dashboard-progress-styling

refactor(dashboard): set progress colors via scss
DependencyTrack · Jan 28, 2024 · bd4467a · bd4467a
2 parents 1db1e96 + dd14a61
commit bd4467a
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 45 deletions.
diff --git a/src/assets/scss/_custom.scss b/src/assets/scss/_custom.scss
@@ -11,21 +11,39 @@ html {
 }
 .severity-critical, .status-failed {
   color: $severity-critical;
+  .progress-bar {
+    background-color: $severity-critical;
+  }
 }
 .severity-high {
   color:$severity-high;
+  .progress-bar {
+    background-color: $severity-high;
+  }
 }
 .severity-medium, .status-warning {
   color: $severity-medium;
+  .progress-bar {
+    background-color: $severity-medium;
+  }
 }
 .severity-low, .status-passed {
   color: $severity-low;
+  .progress-bar {
+    background-color: $severity-low;
+  }
 }
-.severity-info {
+.severity-info, .status-info {
   color: $severity-info;
+  .progress-bar {
+    background-color: $severity-info;
+  }
 }
 .severity-unassigned {
   color: $severity-unassigned;
+  .progress-bar {
+    background-color: $severity-unassigned;
+  }
 }
 // Fixes the width for the bootstrap progress bar in tables
 .table-progress {
@@ -469,4 +487,4 @@ td a.detail-icon {
 .keep-together {
   display: inline;
   white-space: nowrap;
-}
+}
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
@@ -18,22 +18,22 @@
           <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" :precision="1" variant="success" v-bind:value="vulnerableProjectPercent"></b-progress>
+            <b-progress height={} class="progress-xs mt-2 status-passed" :precision="1" v-bind:value="vulnerableProjectPercent"></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>
             <strong>{{auditedViolations}} ({{auditedViolationsPercent}}%)</strong>
-            <b-progress height={} class="progress-xs mt-2" :precision="1" variant="info" v-bind:value="auditedViolationsPercent"></b-progress>
+            <b-progress height={} class="progress-xs mt-2 status-info" :precision="1" v-bind:value="auditedViolationsPercent"></b-progress>
           </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" :precision="1" variant="warning" v-bind:value="vulnerableComponentPercent"></b-progress>
+            <b-progress height={} class="progress-xs mt-2 status-warning" :precision="1" v-bind:value="vulnerableComponentPercent"></b-progress>
           </b-col>
           <b-col class="mb-sm-2 mb-0">
             <div class="text-muted">{{ $t('message.findings_audited') }}</div>
             <strong>{{auditedFindings}} ({{auditedFindingPercent}}%)</strong>
-            <b-progress height={} class="progress-xs mt-2" :precision="1" variant="danger" v-bind:value="auditedFindingPercent"></b-progress>
+            <b-progress height={} class="progress-xs mt-2 status-failed" :precision="1" v-bind:value="auditedFindingPercent"></b-progress>
           </b-col>
         </b-row>
       </div>
@@ -53,49 +53,19 @@
           <div slot="footer">
             <b-row class="text-center">
               <b-col class="mb-sm-2 mb-0 d-md-down-none">
-                <div class="text-muted">
-                  {{ $t("policy_violation.fails") }}
-                </div>
-                <strong
-                  >{{ failViolations }} ({{ failViolationsPercent }}%)</strong
-                >
-                <b-progress
-                  height="{}"
-                  class="progress-xs mt-2"
-                  :precision="1"
-                  variant="danger"
-                  v-bind:value="failViolationsPercent"
-                ></b-progress>
+                <div class="text-muted">{{ $t("policy_violation.fails") }}</div>
+                <strong>{{ failViolations }} ({{ failViolationsPercent }}%)</strong>
+                <b-progress height="{}" class="progress-xs mt-2 status-failed" :precision="1" v-bind:value="failViolationsPercent"></b-progress>
               </b-col>
               <b-col class="mb-sm-2 mb-0">
-                <div class="text-muted">
-                  {{ $t("policy_violation.warns") }}
-                </div>
-                <strong
-                  >{{ warnViolations }} ({{ warnViolationsPercent }}%)</strong
-                >
-                <b-progress
-                  height="{}"
-                  class="progress-xs mt-2"
-                  :precision="1"
-                  variant="warning"
-                  v-bind:value="warnViolationsPercent"
-                ></b-progress>
+                <div class="text-muted">{{ $t("policy_violation.warns") }}</div>
+                <strong>{{ warnViolations }} ({{ warnViolationsPercent }}%)</strong>
+                <b-progress height="{}" class="progress-xs mt-2 status-warning" :precision="1" v-bind:value="warnViolationsPercent"></b-progress>
               </b-col>
               <b-col class="mb-sm-2 mb-0">
-                <div class="text-muted">
-                  {{ $t("policy_violation.infos") }}
-                </div>
-                <strong
-                  >{{ infoViolations }} ({{ infoViolationsPercent }}%)</strong
-                >
-                <b-progress
-                  height="{}"
-                  class="progress-xs mt-2"
-                  :precision="1"
-                  variant="info"
-                  v-bind:value="infoViolationsPercent"
-                ></b-progress>
+                <div class="text-muted">{{ $t("policy_violation.infos") }}</div>
+                <strong>{{ infoViolations }} ({{ infoViolationsPercent }}%)</strong>
+                <b-progress height="{}" class="progress-xs mt-2 status-info" :precision="1" v-bind:value="infoViolationsPercent"></b-progress>
               </b-col>
             </b-row>
           </div>