feat: show policy violation badges by state

Signed-off-by: Adam Setch <[email protected]>
DependencyTrack · Feb 7, 2024 · e2d8a3f · e2d8a3f
1 parent b692f7e
commit e2d8a3f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/src/assets/scss/_custom.scss b/src/assets/scss/_custom.scss
@@ -341,6 +341,21 @@ button:focus {
   margin-left: 0.6em !important;
   color: #21D983 !important;
 }
+.badge-tab-fail {
+  border: 1px solid #60768c !important;
+  background-color: $grey-900 !important;
+  color: $notification-fail !important;
+}
+.badge-tab-warn {
+  border: 1px solid #60768c !important;
+  background-color: $grey-900 !important;
+  color: $notification-warn !important;
+}
+.badge-tab-info {
+  border: 1px solid #60768c !important;
+  background-color: $grey-900 !important;
+  color: $notification-info !important;
+}
 .badge-tag {
   color: $primary;
   background-color: transparent;

diff --git a/src/views/portfolio/projects/Project.vue b/src/views/portfolio/projects/Project.vue
@@ -139,7 +139,12 @@
         <project-epss :key="this.uuid" :uuid="this.uuid" v-on:total="totalEpss = $event" />
       </b-tab>
       <b-tab ref="policyviolations" v-if="isPermitted(PERMISSIONS.VIEW_POLICY_VIOLATION)" @click="routeTo('policyViolations')">
-        <template v-slot:title><i class="fa fa-fire"></i> {{ $t('message.policy_violations') }} <b-badge variant="tab-total">{{ totalViolations }}</b-badge></template>
+        <template v-slot:title><i class="fa fa-fire"></i> {{ $t('message.policy_violations') }}
+          <b-badge variant="tab-total" v-b-tooltip.hover :title="$t('message.total')">{{ totalViolations }}</b-badge>
+          <b-badge variant="tab-info" v-b-tooltip.hover :title="$t('policy_violation.infos')">{{ infoViolations }}</b-badge>
+          <b-badge variant="tab-warn" v-b-tooltip.hover :title="$t('policy_violation.warns')">{{ warnViolations }}</b-badge>
+          <b-badge variant="tab-fail" v-b-tooltip.hover :title="$t('policy_violation.fails')">{{ failViolations }}</b-badge>
+        </template>
         <project-policy-violations :key="this.uuid" :uuid="this.uuid" v-on:total="totalViolations = $event" />
       </b-tab>
     </b-tabs>
@@ -210,6 +215,9 @@
         severityUnassigned: this.getStyle('--severity-unassigned'),
         severityInfo: this.getStyle('--severity-info'),
         trackColor: this.getStyle('--component-active-color'),
+        infoViolation: this.getStyle('--notification-info'),
+        warnViolation: this.getStyle('--notification-warn'),
+        failViolation: this.getStyle('--notification-fail'),
         uuid: null,
         project: {},
         currentCritical: 0,
@@ -224,6 +232,9 @@
         totalFindings: 0,
         totalEpss: 0,
         totalViolations: 0,
+        infoViolations: 0,
+        warnViolations: 0,
+        failViolations: 0,
         tabIndex: 0
       }
     },
@@ -253,6 +264,9 @@
           this.currentLow = common.valueWithDefault(this.project.metrics.low, 0);
           this.currentUnassigned = common.valueWithDefault(this.project.metrics.unassigned, 0);
           this.currentRiskScore = common.valueWithDefault(this.project.metrics.inheritedRiskScore, 0);
+          this.infoViolations = common.valueWithDefault(this.project.metrics.policyViolationsInfo, 0);
+          this.warnViolations = common.valueWithDefault(this.project.metrics.policyViolationsWarn, 0);
+          this.failViolations = common.valueWithDefault(this.project.metrics.policyViolationsFail, 0);
           EventBus.$emit('addCrumb', this.projectLabel);
           this.$title = this.projectLabel;
         });