From 275c5437ae54859da1285b63161fa62bada8d8f3 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 30 Jan 2024 07:10:11 -0500
Subject: [PATCH 1/4] feat(dashboard): add policy violations by state and
 classification cards

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/views/Dashboard.vue                       |  63 +++++++++--
 .../ChartPolicyViolationsClassification.vue   | 106 ++++++++++++++++++
 ...ons.vue => ChartPolicyViolationsState.vue} |   0
 .../portfolio/projects/ComponentDashboard.vue |   8 +-
 .../portfolio/projects/ProjectDashboard.vue   |   8 +-
 .../portfolio/projects/ServiceDashboard.vue   |   8 +-
 6 files changed, 174 insertions(+), 19 deletions(-)
 create mode 100644 src/views/dashboard/ChartPolicyViolationsClassification.vue
 rename src/views/dashboard/{ChartPolicyViolations.vue => ChartPolicyViolationsState.vue} (100%)

diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 06383f12e..7d6539559 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -44,15 +44,15 @@
         <b-card>
           <b-row>
             <b-col sm="5">
-              <h4 id="chart-violations" class="card-title mb-0">{{ $t('message.policy_violations') }}</h4>
+              <h4 id="chart-policy-violations-state" class="card-title mb-0">{{ $t('message.policy_violations') }}</h4>
+              <div class="small text-muted">{{$t('message.policy_violations_by_state')}}</div>
             </b-col>
             <b-col sm="7" class="d-none d-md-block">
             </b-col>
           </b-row>
-          <chart-policy-violations ref="chartPolicyViolations" chartId="chartPolicyViolations" class="chart-wrapper" style="height:200px;margin-top:40px;" :height="200"></chart-policy-violations>
-          <div slot="footer">
+          <chart-policy-violations-state ref="chartPolicyViolationsState" chartId="chartPolicyViolationsState" class="chart-wrapper" style="height:200px;margin-top:40px;" :height="200"></chart-policy-violations-state>          <div slot="footer">
             <b-row class="text-center">
-              <b-col class="mb-sm-2 mb-0 d-md-down-none">
+              <b-col class="mb-sm-2 mb-0">
                 <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>
@@ -71,6 +71,40 @@
           </div>
         </b-card>
       </b-col>
+      <b-col sm="6">
+        <b-card>
+          <b-row>
+            <b-col sm="5">
+              <h4 id="chart-policy-violations-classification" class="card-title mb-0">{{ $t('message.policy_violations') }}</h4>
+              <div class="small text-muted">{{$t('message.policy_violations_by_classification')}}</div>            </b-col>
+            <b-col sm="7" class="d-none d-md-block">
+            </b-col>
+          </b-row>
+          <chart-policy-violations-classification ref="chartPolicyViolationsClassification" chartId="chartPolicyViolationsClassification" class="chart-wrapper" style="height:200px;margin-top:40px;" :height="200"></chart-policy-violations-classification>
+          <div slot="footer">
+            <b-row class="text-center">
+              <b-col class="mb-sm-2 mb-0">
+                <div class="text-muted">{{ $t("policy_violation.security") }}</div>
+                <strong>{{ securityViolations }} ({{ securityViolationsPercent }}%)</strong>
+                <b-progress height="{}" class="progress-xs mt-2 status-failed" :precision="1" v-bind:value="securityViolationsPercent"></b-progress>
+              </b-col>
+              <b-col class="mb-sm-2 mb-0">
+                <div class="text-muted">{{ $t("policy_violation.operational") }}</div>
+                <strong>{{ operationalViolations }} ({{ operationalViolationsPercent }}%)</strong>
+                <b-progress height="{}" class="progress-xs mt-2 status-warning" :precision="1"  v-bind:value="operationalViolationsPercent"></b-progress>
+              </b-col>
+              <b-col class="mb-sm-2 mb-0">
+                <div class="text-muted">{{ $t("policy_violation.license") }}</div>
+                <strong>{{ licenseViolations }} ({{ licenseViolationsPercent }}%)</strong>
+                <b-progress height="{}" class="progress-xs mt-2 status-info" :precision="1" v-bind:value="licenseViolationsPercent"></b-progress>
+              </b-col>
+            </b-row>
+          </div>
+        </b-card>
+      </b-col>
+    </b-row>
+
+    <b-row>
       <b-col sm="6">
         <b-card>
           <b-row>
@@ -162,7 +196,8 @@
   import ChartPortfolioVulnerabilities from './dashboard/ChartPortfolioVulnerabilities'
   import ChartProjectVulnerabilities from "./dashboard/ChartProjectVulnerabilities";
   import ChartAuditedProgress from "./dashboard/ChartAuditingProgress";
-  import ChartPolicyViolations from "./dashboard/ChartPolicyViolations";
+  import ChartPolicyViolationsState from "./dashboard/ChartPolicyViolationsState";
+  import ChartPolicyViolationsClassification from "./dashboard/ChartPolicyViolationsClassification";
   import ChartComponentVulnerabilities from "./dashboard/ChartComponentVulnerabilities";
   import { Callout } from '@coreui/vue'
   import permissionsMixin from "../mixins/permissionsMixin";
@@ -176,7 +211,8 @@
       ChartPortfolioVulnerabilities,
       ChartProjectVulnerabilities,
       ChartAuditedProgress,
-      ChartPolicyViolations,
+      ChartPolicyViolationsState,
+      ChartPolicyViolationsClassification,
       ChartComponentVulnerabilities
     },
     data() {
@@ -202,6 +238,12 @@
         warnViolationsPercent: 0,
         infoViolations: 0,
         infoViolationsPercent: 0,
+        securityViolations: 0,
+        securityViolationsPercent: 0,
+        operationalViolations: 0,
+        operationalViolationsPercent: 0,
+        licenseViolations: 0,
+        licenseViolationsPercent: 0,
 
         vulnerabilities: 0,
         suppressed: 0,
@@ -235,6 +277,12 @@
         this.warnViolationsPercent = common.calcProgressPercent(this.totalViolations, this.warnViolations);
         this.infoViolations = common.valueWithDefault(metric.policyViolationsInfo, "0");
         this.infoViolationsPercent = common.calcProgressPercent(this.totalViolations, this.infoViolations);
+        this.securityViolations = common.valueWithDefault(metric.policyViolationsSecurityTotal, "0");
+        this.securityViolationsPercent = common.calcProgressPercent(this.totalViolations, this.securityViolations);
+        this.operationalViolations = common.valueWithDefault(metric.policyViolationsOperationalTotal, "0");
+        this.operationalViolationsPercent = common.calcProgressPercent(this.totalViolations, this.operationalViolations);
+        this.licenseViolations = common.valueWithDefault(metric.policyViolationsLicenseTotal, "0");
+        this.licenseViolationsPercent = common.calcProgressPercent(this.totalViolations, this.licenseViolations);
 
         this.vulnerabilities = common.valueWithDefault(metric.vulnerabilities, "0");
         this.suppressed = common.valueWithDefault(metric.suppressed, "0");
@@ -256,7 +304,8 @@
           this.$refs.chartPortfolioVulnerabilities.render(response.data);
           this.$refs.chartProjectVulnerabilities.render(response.data);
           this.$refs.chartAuditedProgress.render(response.data);
-          this.$refs.chartPolicyViolations.render(response.data);
+          this.$refs.chartPolicyViolationsState.render(response.data);
+          this.$refs.chartPolicyViolationsClassification.render(response.data);
           this.$refs.chartComponentVulnerabilities.render(response.data);
           this.extractStats(response.data);
         });
diff --git a/src/views/dashboard/ChartPolicyViolationsClassification.vue b/src/views/dashboard/ChartPolicyViolationsClassification.vue
new file mode 100644
index 000000000..340521287
--- /dev/null
+++ b/src/views/dashboard/ChartPolicyViolationsClassification.vue
@@ -0,0 +1,106 @@
+<script>
+import common from "../../shared/common"
+import { Line } from 'vue-chartjs'
+import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+export default {
+  extends: Line,
+  props: {
+    height: Number
+  },
+  methods: {
+    render: function(metrics) {
+      const securityStyle = getStyle('--notification-fail');
+      const operationalStyle = getStyle('--notification-warn');
+      const licenseStyle = getStyle('--notification-info');
+      let labels = [];
+      let securityData = [];
+      let operationalData = [];
+      let licenseData = [];
+      for (let i = 0; i < metrics.length; i++) {
+        labels.push(common.formatTimestamp(metrics[i].firstOccurrence));
+        securityData.push(metrics[i].policyViolationsFail);
+        operationalData.push(metrics[i].policyViolationsWarn);
+        licenseData.push(metrics[i].policyViolationsInfo);
+        if (i === metrics.length - 1) {
+          labels.push(common.formatTimestamp(metrics[i].lastOccurrence));
+          securityData.push(metrics[i].policyViolationsSecurityTotal);
+          operationalData.push(metrics[i].policyViolationsOperationalTotal);
+          licenseData.push(metrics[i].policyViolationsLicenseTotal);
+        }
+      }
+      this.renderChart({
+        labels: labels,
+        datasets: [
+          {
+            label: this.$t('policy_violation.security'),
+            backgroundColor: 'transparent',
+            borderColor: securityStyle,
+            pointHoverBackgroundColor: '#fff',
+            data: securityData
+          },
+          {
+            label: this.$t('policy_violation.operational'),
+            backgroundColor: 'transparent',
+            borderColor: operationalStyle,
+            pointHoverBackgroundColor: '#fff',
+            data: operationalData
+          },
+          {
+            label: this.$t('policy_violation.license'),
+            backgroundColor: 'transparent',
+            borderColor: licenseStyle,
+            pointHoverBackgroundColor: '#fff',
+            data: licenseData
+          }
+        ]
+      }, {
+        tooltips: {
+          enabled: false,
+          custom: CustomTooltips,
+          intersect: true,
+          mode: 'index',
+          position: 'nearest',
+          callbacks: {
+            labelColor: function (tooltipItem, chart) {
+              return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
+            }
+          }
+        },
+        maintainAspectRatio: false,
+        legend: {
+          display: false
+        },
+        scales: {
+          xAxes: [{
+            gridLines: {
+              drawOnChartArea: false
+            }
+          }],
+          yAxes: [{
+            ticks: {
+              beginAtZero: true,
+              maxTicksLimit: 1
+            },
+            gridLines: {
+              display: true
+            }
+          }]
+        },
+        elements: {
+          line: {
+            tension: 0.1,
+            borderWidth: 2
+          },
+          point: {
+            radius: 0,
+            hitRadius: 20,
+            hoverRadius: 4,
+            hoverBorderWidth: 3
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/ChartPolicyViolations.vue b/src/views/dashboard/ChartPolicyViolationsState.vue
similarity index 100%
rename from src/views/dashboard/ChartPolicyViolations.vue
rename to src/views/dashboard/ChartPolicyViolationsState.vue
diff --git a/src/views/portfolio/projects/ComponentDashboard.vue b/src/views/portfolio/projects/ComponentDashboard.vue
index 2641a9b63..5d5f2f531 100644
--- a/src/views/portfolio/projects/ComponentDashboard.vue
+++ b/src/views/portfolio/projects/ComponentDashboard.vue
@@ -78,7 +78,7 @@
             <b-col sm="7" class="d-none d-md-block">
             </b-col>
           </b-row>
-          <chart-policy-violations ref="chartPolicyViolations" chartId="chartPolicyViolations" class="chart-wrapper" style="height:200px;margin-top:40px;" :height="200"></chart-policy-violations>
+          <chart-policy-violations-state ref="chartPolicyViolationsState" chartId="chartPolicyViolationsState" class="chart-wrapper" style="height:200px;margin-top:40px;" :height="200"></chart-policy-violations-state>
         </b-card>
       </b-col>
       <b-col sm="6">
@@ -106,7 +106,7 @@
   import ChartAuditingProgress from "../../dashboard/ChartAuditingProgress";
   import ChartComponentVulnerabilities from "../../dashboard/ChartComponentVulnerabilities";
   import ChartPortfolioVulnerabilities from '../../dashboard/ChartPortfolioVulnerabilities';
-  import ChartPolicyViolations from "@/views/dashboard/ChartPolicyViolations";
+  import ChartPolicyViolationsState from "@/views/dashboard/ChartPolicyViolationsState";
   import ChartPolicyViolationBreakdown from '@/views/dashboard/ChartPolicyViolationBreakdown';
 
   export default {
@@ -115,7 +115,7 @@
       ChartAuditingProgress,
       ChartComponentVulnerabilities,
       ChartPortfolioVulnerabilities,
-      ChartPolicyViolations,
+      ChartPolicyViolationsState,
       ChartPolicyViolationBreakdown,
       Callout,
 
@@ -181,7 +181,7 @@
       let url = `${this.$api.BASE_URL}/${this.$api.URL_METRICS}/component/${uuid}/days/${daysBack}`;
       this.axios.get(url).then((response) => {
         this.$refs.chartComponentVulnerabilities.render(response.data);
-        this.$refs.chartPolicyViolations.render(response.data);
+        this.$refs.chartPolicyViolationsState.render(response.data);
         this.$refs.chartPolicyViolationBreakdown.render(response.data);
         this.extractStats(response.data);
       });
diff --git a/src/views/portfolio/projects/ProjectDashboard.vue b/src/views/portfolio/projects/ProjectDashboard.vue
index f0e611f84..09d622b58 100644
--- a/src/views/portfolio/projects/ProjectDashboard.vue
+++ b/src/views/portfolio/projects/ProjectDashboard.vue
@@ -90,7 +90,7 @@
             <b-col sm="7" class="d-none d-md-block">
             </b-col>
           </b-row>
-          <chart-policy-violations ref="chartPolicyViolations" chartId="chartPolicyViolations" class="chart-wrapper" style="height:200px;margin-top:40px;" :height="200"></chart-policy-violations>
+          <chart-policy-violations-state ref="chartPolicyViolationsState" chartId="chartPolicyViolationsState" class="chart-wrapper" style="height:200px;margin-top:40px;" :height="200"></chart-policy-violations-state>
         </b-card>
       </b-col>
       <b-col sm="6">
@@ -144,13 +144,13 @@
   import ChartAuditingProgress from "../../dashboard/ChartAuditingProgress";
   import ChartComponentVulnerabilities from "../../dashboard/ChartComponentVulnerabilities";
   import ChartPortfolioVulnerabilities from '../../dashboard/ChartPortfolioVulnerabilities'
-  import ChartPolicyViolations from "@/views/dashboard/ChartPolicyViolations";
+  import ChartPolicyViolationsState from "@/views/dashboard/ChartPolicyViolationsState";
   import ChartPolicyViolationBreakdown from '@/views/dashboard/ChartPolicyViolationBreakdown';
 
   export default {
     name: 'project-dashboard',
     components: {
-      ChartPolicyViolations,
+      ChartPolicyViolationsState,
       ChartPolicyViolationBreakdown,
       ChartAuditingProgress,
       ChartComponentVulnerabilities,
@@ -221,7 +221,7 @@
       let url = `${this.$api.BASE_URL}/${this.$api.URL_METRICS}/project/${this.uuid}/days/${daysBack}`;
       this.axios.get(url).then((response) => {
         this.$refs.chartProjectVulnerabilities.render(response.data);
-        this.$refs.chartPolicyViolations.render(response.data);
+        this.$refs.chartPolicyViolationsState.render(response.data);
         this.$refs.chartPolicyViolationBreakdown.render(response.data);
         this.$refs.chartAuditedProgress.render(response.data);
         this.$refs.chartComponentVulnerabilities.render(response.data);
diff --git a/src/views/portfolio/projects/ServiceDashboard.vue b/src/views/portfolio/projects/ServiceDashboard.vue
index 69257a63f..c1f5c57f1 100644
--- a/src/views/portfolio/projects/ServiceDashboard.vue
+++ b/src/views/portfolio/projects/ServiceDashboard.vue
@@ -78,7 +78,7 @@
             <b-col sm="7" class="d-none d-md-block">
             </b-col>
           </b-row>
-          <chart-policy-violations ref="chartPolicyViolations" chartId="chartPolicyViolations" class="chart-wrapper" style="height:200px;margin-top:40px;" :height="200"></chart-policy-violations>
+          <chart-policy-violations-state ref="chartPolicyViolationsState" chartId="chartPolicyViolationsState" class="chart-wrapper" style="height:200px;margin-top:40px;" :height="200"></chart-policy-violations-state>
         </b-card>
       </b-col>
       <b-col sm="6">
@@ -106,7 +106,7 @@ import { Callout } from '@coreui/vue'
 import ChartAuditingProgress from "../../dashboard/ChartAuditingProgress";
 import ChartComponentVulnerabilities from "../../dashboard/ChartComponentVulnerabilities";
 import ChartPortfolioVulnerabilities from '../../dashboard/ChartPortfolioVulnerabilities';
-import ChartPolicyViolations from "@/views/dashboard/ChartPolicyViolations";
+import ChartPolicyViolationsState from "@/views/dashboard/ChartPolicyViolationsState";
 import ChartPolicyViolationBreakdown from '@/views/dashboard/ChartPolicyViolationBreakdown';
 
 export default {
@@ -115,7 +115,7 @@ export default {
     ChartAuditingProgress,
     ChartComponentVulnerabilities,
     ChartPortfolioVulnerabilities,
-    ChartPolicyViolations,
+    ChartPolicyViolationsState,
     ChartPolicyViolationBreakdown,
     Callout,
 
@@ -184,7 +184,7 @@ export default {
     let url = `${this.$api.BASE_URL}/${this.$api.URL_METRICS}/service/${uuid}/days/${daysBack}`;
     this.axios.get(url).then((response) => {
       this.$refs.chartServiceVulnerabilities.render(response.data);
-      this.$refs.chartPolicyViolations.render(response.data);
+      this.$refs.chartPolicyViolationsState.render(response.data);
       this.$refs.chartPolicyViolationBreakdown.render(response.data);
       this.extractStats(response.data);
     });

From 362896c52f661307bbe428ea70afff0333db935e Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 30 Jan 2024 07:12:56 -0500
Subject: [PATCH 2/4] feat(dashboard): add policy violations by state and
 classification cards

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/views/dashboard/ChartPolicyViolationsClassification.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/dashboard/ChartPolicyViolationsClassification.vue b/src/views/dashboard/ChartPolicyViolationsClassification.vue
index 340521287..3ccc0f4a2 100644
--- a/src/views/dashboard/ChartPolicyViolationsClassification.vue
+++ b/src/views/dashboard/ChartPolicyViolationsClassification.vue
@@ -19,9 +19,9 @@ export default {
       let licenseData = [];
       for (let i = 0; i < metrics.length; i++) {
         labels.push(common.formatTimestamp(metrics[i].firstOccurrence));
-        securityData.push(metrics[i].policyViolationsFail);
-        operationalData.push(metrics[i].policyViolationsWarn);
-        licenseData.push(metrics[i].policyViolationsInfo);
+        securityData.push(metrics[i].policyViolationsSecurityTotal);
+        operationalData.push(metrics[i].policyViolationsOperationalTotal);
+        licenseData.push(metrics[i].policyViolationsLicenseTotal);
         if (i === metrics.length - 1) {
           labels.push(common.formatTimestamp(metrics[i].lastOccurrence));
           securityData.push(metrics[i].policyViolationsSecurityTotal);

From 35d644f3a383197ed3c0a21728995e6a094ef3d0 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 30 Jan 2024 12:54:51 -0500
Subject: [PATCH 3/4] feat(dashboard): add policy violations by state and
 classification cards

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/views/Dashboard.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 493d08b60..0d1a59f60 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -418,6 +418,12 @@
         this.warnViolationsPercent = common.calcProgressPercent(this.totalViolations, this.warnViolations);
         this.infoViolations = common.valueWithDefault(metric.policyViolationsInfo, "0");
         this.infoViolationsPercent = common.calcProgressPercent(this.totalViolations, this.infoViolations);
+        this.securityViolations = common.valueWithDefault(metric.policyViolationsSecurityTotal, "0");
+        this.securityViolationsPercent = common.calcProgressPercent(this.totalViolations, this.securityViolations);
+        this.operationalViolations = common.valueWithDefault(metric.policyViolationsOperationalTotal, "0");
+        this.operationalViolationsPercent = common.calcProgressPercent(this.totalViolations, this.operationalViolations);
+        this.licenseViolations = common.valueWithDefault(metric.policyViolationsLicenseTotal, "0");
+        this.licenseViolationsPercent = common.calcProgressPercent(this.totalViolations, this.licenseViolations);
 
         this.vulnerabilities = common.valueWithDefault(metric.vulnerabilities, "0");
         this.suppressed = common.valueWithDefault(metric.suppressed, "0");

From b6c9846ad6f90179e0ceccd2da19d78891cceebf Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 30 Jan 2024 12:56:53 -0500
Subject: [PATCH 4/4] feat(dashboard): add policy violations by state and
 classification cards

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/views/Dashboard.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 0d1a59f60..d7247c91e 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -104,9 +104,6 @@
       </b-col>
     </b-row>
 
-    <b-row>
-    </b-row>
-
     <b-row>
       <b-col sm="6">
         <b-card>