feat(dashboard): auditing progress for findings and policy violations

src/i18n/locales/en.json

@@ -42,8 +42,10 @@
     "inherited_risk_score": "Inherited Risk Score",
     "risk_score": "Risk Score",
     "vulnerable_projects": "Vulnerable Projects",
+    "findings": "Findings",
     "total_findings": "Total Findings",
     "findings_audited": "Findings Audited",
+    "findings_unaudited": "Findings Unaudited",
     "auditing_progress": "Auditing Progress",
     "show_suppressed_findings": "Show suppressed findings",
     "show_suppressed_violations": "Show suppressed violations",
@@ -84,6 +86,7 @@
     "license_risk": "License Risk",
     "operational_risk": "Operational Risk",
     "violations_audited": "Violations Audited",
+    "violations_unaudited": "Violations Unaudited",
     "attributed_on": "Attributed On",
     "view_details": "View Details",
     "project_details": "Project Details",

src/views/Dashboard.vue

@@ -32,8 +32,8 @@
           </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 status-failed" :precision="1" v-bind:value="auditedFindingPercent"></b-progress>
+            <strong>{{auditedFindings}} ({{auditedFindingsPercent}}%)</strong>
+            <b-progress height={} class="progress-xs mt-2 status-failed" :precision="1" v-bind:value="auditedFindingsPercent"></b-progress>
           </b-col>
         </b-row>
       </div>
@@ -71,16 +71,61 @@
           </div>
         </b-card>
       </b-col>
+    </b-row>
+
+    <b-row>
       <b-col sm="6">
         <b-card>
           <b-row>
             <b-col sm="5">
-              <h4 id="chart-auditing-progress" class="card-title mb-0">{{ $t('message.auditing_progress') }}</h4>
+              <h4 id="chart-auditing-findings-progress" class="card-title mb-0">{{ $t('message.auditing_progress') }}</h4>
+              <div class="small text-muted">{{  $t('message.findings') }}</div>
             </b-col>
             <b-col sm="7" class="d-none d-md-block">
             </b-col>
           </b-row>
-          <chart-audited-progress ref="chartAuditedProgress" chartId="chartAuditedProgress" class="chart-wrapper" style="height:200px;margin-top:40px;" :height="200"></chart-audited-progress>
+          <chart-auditing-findings-progress ref="chartAuditingFindingsProgress" chartId="chartAuditingFindingsProgress" class="chart-wrapper" style="height:200px;margin-top:40px;" :height="200"></chart-auditing-findings-progress>
+          <div slot="footer">
+            <b-row class="text-center">
+              <b-col class="mb-sm-2 mb-0">
+                <div class="text-muted">{{ $t("message.findings_unaudited") }}</div>
+                <strong>{{ unauditedFindings }} ({{ unauditedFindingsPercent }}%)</strong>
+                <b-progress height="{}" class="progress-xs mt-2 severity-unassigned" :precision="1" v-bind:value="unauditedFindingsPercent"></b-progress>
+              </b-col>
+              <b-col class="mb-sm-2 mb-0">
+                <div class="text-muted">{{ $t("message.findings_audited") }}</div>
+                <strong>{{ auditedFindings }} ({{ auditedFindingsPercent }}%)</strong>
+                <b-progress height="{}" class="progress-xs mt-2 severity-low" :precision="1" v-bind:value="auditedFindingsPercent"></b-progress>
+              </b-col>
+            </b-row>
+          </div>
+        </b-card>
+      </b-col>
+      <b-col sm="6">
+        <b-card>
+          <b-row>
+            <b-col sm="5">
+              <h4 id="chart-auditing-violations-progress" class="card-title mb-0">{{ $t('message.auditing_progress') }}</h4>
+              <div class="small text-muted">{{$t('message.policy_violations')}}</div>
+            </b-col>
+            <b-col sm="7" class="d-none d-md-block">
+            </b-col>
+          </b-row>
+          <chart-auditing-violations-progress ref="chartAuditingViolationsProgress" chartId="chartAuditingViolationsProgress" class="chart-wrapper" style="height:200px;margin-top:40px;" :height="200"></chart-auditing-violations-progress>
+          <div slot="footer">
+            <b-row class="text-center">
+              <b-col class="mb-sm-2 mb-0">
+                <div class="text-muted">{{ $t('message.violations_unaudited') }}</div>
+                <strong>{{unauditedViolations}} ({{unauditedViolationsPercent}}%)</strong>
+                <b-progress height={} class="progress-xs mt-2 severity-unassigned" :precision="1" v-bind:value="unauditedViolationsPercent"></b-progress>
+              </b-col>
+              <b-col class="mb-sm-2 mb-0">
+                <div class="text-muted">{{ $t('message.violations_audited') }}</div>
+                <strong>{{auditedViolations}} ({{auditedViolationsPercent}}%)</strong>
+                <b-progress height={} class="progress-xs mt-2 severity-low" :precision="1" v-bind:value="auditedViolationsPercent"></b-progress>
+              </b-col>
+            </b-row>
+          </div>
         </b-card>
       </b-col>
     </b-row>
@@ -161,7 +206,8 @@
   import PortfolioWidgetRow from './dashboard/PortfolioWidgetRow'
   import ChartPortfolioVulnerabilities from './dashboard/ChartPortfolioVulnerabilities'
   import ChartProjectVulnerabilities from "./dashboard/ChartProjectVulnerabilities";
-  import ChartAuditedProgress from "./dashboard/ChartAuditingProgress";
+  import ChartAuditingFindingsProgress from "./dashboard/ChartAuditingFindingsProgress";
+  import ChartAuditingViolationsProgress from "./dashboard/ChartAuditingViolationsProgress";
   import ChartPolicyViolations from "./dashboard/ChartPolicyViolations";
   import ChartComponentVulnerabilities from "./dashboard/ChartComponentVulnerabilities";
   import { Callout } from '@coreui/vue'
@@ -175,7 +221,8 @@
       PortfolioWidgetRow,
       ChartPortfolioVulnerabilities,
       ChartProjectVulnerabilities,
-      ChartAuditedProgress,
+      ChartAuditingFindingsProgress,
+      ChartAuditingViolationsProgress,
       ChartPolicyViolations,
       ChartComponentVulnerabilities
     },
@@ -191,11 +238,15 @@
 
         totalFindings: 0,
         auditedFindings: 0,
-        auditedFindingPercent: 0,
+        auditedFindingsPercent: 0,
+        unauditedFindings: 0,
+        unauditedFindingsPercent: 0,
 
         totalViolations: 0,
         auditedViolations: 0,
         auditedViolationsPercent: 0,
+        unauditedViolations: 0,
+        unauditedViolationsPercent: 0,
         failViolations: 0,
         failViolationsPercent: 0,
         warnViolations: 0,
@@ -224,11 +275,15 @@
 
         this.totalFindings = common.valueWithDefault(metric.findingsTotal, "0");
         this.auditedFindings = common.valueWithDefault(metric.findingsAudited, "0");
-        this.auditedFindingPercent = common.calcProgressPercent(this.totalFindings, this.auditedFindings);
+        this.auditedFindingsPercent = common.calcProgressPercent(this.totalFindings, this.auditedFindings);
+        this.unauditedFindings = common.valueWithDefault(metric.findingsUnaudited, "0");
+        this.unauditedFindingsPercent = common.calcProgressPercent(this.totalFindings, this.unauditedFindings);
 
         this.totalViolations = common.valueWithDefault(metric.policyViolationsTotal, "0");
         this.auditedViolations = common.valueWithDefault(metric.policyViolationsAudited, "0");
         this.auditedViolationsPercent = common.calcProgressPercent(this.totalViolations, this.auditedViolations);
+        this.unauditedViolations = this.totalViolations - this.auditedViolations;
+        this.unauditedViolationsPercent = common.calcProgressPercent(this.totalViolations, this.unauditedViolations);
         this.failViolations = common.valueWithDefault(metric.policyViolationsFail, "0");
         this.failViolationsPercent = common.calcProgressPercent(this.totalViolations, this.failViolations);
         this.warnViolations = common.valueWithDefault(metric.policyViolationsWarn, "0");
@@ -255,7 +310,8 @@
           this.$refs.portfolioWidgetRow.render(response.data)
           this.$refs.chartPortfolioVulnerabilities.render(response.data);
           this.$refs.chartProjectVulnerabilities.render(response.data);
-          this.$refs.chartAuditedProgress.render(response.data);
+          this.$refs.chartAuditingFindingsProgress.render(response.data);
+          this.$refs.chartAuditingViolationsProgress.render(response.data);
           this.$refs.chartPolicyViolations.render(response.data);
           this.$refs.chartComponentVulnerabilities.render(response.data);
           this.extractStats(response.data);

src/views/dashboard/ChartAuditingViolationsProgress.vue

@@ -0,0 +1,100 @@
+<script>
+  import common from "../../shared/common"
+  import { Line } from 'vue-chartjs'
+  import { getStyle, hexToRgba } 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 totalStyle = getStyle('--severity-unassigned');
+        const auditedStyle = getStyle('--severity-low');
+
+        let labels = [];
+        let totalData = [];
+        let auditedData = [];
+
+        for (let i = 0; i < metrics.length; i++) {
+          labels.push(common.formatTimestamp(metrics[i].firstOccurrence));
+          totalData.push(metrics[i].policyViolationsTotal);
+          auditedData.push(metrics[i].policyViolationsAudited);
+
+          if (i === metrics.length - 1) {
+            labels.push(common.formatTimestamp(metrics[i].lastOccurrence));
+            totalData.push(metrics[i].policyViolationsTotal);
+            auditedData.push(metrics[i].policyViolationsAudited);
+          }
+        }
+
+        this.renderChart({
+          labels: labels,
+          datasets: [
+            {
+              label: this.$t('message.policy_violations'),
+              backgroundColor: 'transparent',
+              borderColor: totalStyle,
+              pointHoverBackgroundColor: '#fff',
+              data: totalData
+            },
+            {
+              label: this.$t('message.violations_audited'),
+              backgroundColor: hexToRgba(auditedStyle, 10),
+              borderColor: auditedStyle,
+              pointHoverBackgroundColor: '#fff',
+              data: auditedData
+            }
+          ]
+        }, {
+          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>

src/views/portfolio/projects/ComponentDashboard.vue

@@ -103,7 +103,6 @@
 <script>
   import common from "../../../shared/common"
   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";
@@ -112,7 +111,6 @@
   export default {
     name: 'ComponentDashboard',
     components: {
-      ChartAuditingProgress,
       ChartComponentVulnerabilities,
       ChartPortfolioVulnerabilities,
       ChartPolicyViolations,
@@ -133,10 +131,6 @@
         vulnerableComponents: 0,
         vulnerableComponentPercent: 0,
 
-        totalFindings: 0,
-        auditedFindings: 0,
-        auditedFindingPercent: 0,
-
         vulnerabilities: 0,
         suppressed: 0,
         lastMeasurement: ""
@@ -159,10 +153,6 @@
         this.vulnerableComponents = common.valueWithDefault(metric.vulnerableComponents, "0");
         this.vulnerableComponentPercent = common.calcProgressPercent(this.totalComponents, this.vulnerableComponents);
 
-        this.totalFindings = common.valueWithDefault(metric.findingsTotal, "0");
-        this.auditedFindings = common.valueWithDefault(metric.findingsAudited, "0");
-        this.auditedFindingPercent = common.calcProgressPercent(this.findingsTotal, this.findingsAudited);
-
         this.vulnerabilities = common.valueWithDefault(metric.vulnerabilities, "0");
         this.suppressed = common.valueWithDefault(metric.suppressed, "0");
         this.lastMeasurement = common.formatTimestamp(metric.lastOccurrence, true);

src/views/portfolio/projects/ProjectDashboard.vue

@@ -131,7 +131,7 @@
             <b-col sm="7" class="d-none d-md-block">
             </b-col>
           </b-row>
-          <chart-auditing-progress ref="chartAuditedProgress" chartId="chartAuditedProgress" class="chart-wrapper" style="height:200px;margin-top:40px;" :height="200"></chart-auditing-progress>
+          <chart-auditing-findings-progress ref="chartAuditingFindingsProgress" chartId="chartAuditingFindingsProgress" class="chart-wrapper" style="height:200px;margin-top:40px;" :height="200"></chart-auditing-findings-progress>
         </b-card>
       </b-col>
     </b-row>
@@ -141,7 +141,7 @@
 <script>
   import common from "../../../shared/common"
   import { Callout } from '@coreui/vue'
-  import ChartAuditingProgress from "../../dashboard/ChartAuditingProgress";
+  import ChartAuditingFindingsProgress from "../../dashboard/ChartAuditingFindingsProgress";
   import ChartComponentVulnerabilities from "../../dashboard/ChartComponentVulnerabilities";
   import ChartPortfolioVulnerabilities from '../../dashboard/ChartPortfolioVulnerabilities'
   import ChartPolicyViolations from "@/views/dashboard/ChartPolicyViolations";
@@ -152,7 +152,7 @@
     components: {
       ChartPolicyViolations,
       ChartPolicyViolationBreakdown,
-      ChartAuditingProgress,
+      ChartAuditingFindingsProgress,
       ChartComponentVulnerabilities,
       ChartPortfolioVulnerabilities,
       Callout
@@ -174,10 +174,6 @@
         vulnerableComponents: 0,
         vulnerableComponentPercent: 0,
 
-        totalFindings: 0,
-        auditedFindings: 0,
-        auditedFindingPercent: 0,
-
         vulnerabilities: 0,
         suppressed: 0,
         lastMeasurement: "n/a",
@@ -201,10 +197,6 @@
         this.vulnerableComponents = common.valueWithDefault(metric.vulnerableComponents, "0");
         this.vulnerableComponentPercent = common.calcProgressPercent(this.totalComponents, this.vulnerableComponents);
 
-        this.totalFindings = common.valueWithDefault(metric.findingsTotal, "0");
-        this.auditedFindings = common.valueWithDefault(metric.findingsAudited, "0");
-        this.auditedFindingPercent = common.calcProgressPercent(this.findingsTotal, this.findingsAudited);
-
         this.vulnerabilities = common.valueWithDefault(metric.vulnerabilities, "0");
         this.suppressed = common.valueWithDefault(metric.suppressed, "0");
         this.lastMeasurement = common.formatTimestamp(metric.lastOccurrence, true);
@@ -223,7 +215,7 @@
         this.$refs.chartProjectVulnerabilities.render(response.data);
         this.$refs.chartPolicyViolations.render(response.data);
         this.$refs.chartPolicyViolationBreakdown.render(response.data);
-        this.$refs.chartAuditedProgress.render(response.data);
+        this.$refs.chartAuditingFindingsProgress.render(response.data);
         this.$refs.chartComponentVulnerabilities.render(response.data);
         this.extractStats(response.data);
       });

src/views/portfolio/projects/ServiceDashboard.vue

@@ -103,7 +103,6 @@
 <script>
 import common from "../../../shared/common"
 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";
@@ -112,7 +111,6 @@ import ChartPolicyViolationBreakdown from '@/views/dashboard/ChartPolicyViolatio
 export default {
   name: 'ServiceDashboard',
   components: {
-    ChartAuditingProgress,
     ChartComponentVulnerabilities,
     ChartPortfolioVulnerabilities,
     ChartPolicyViolations,
@@ -133,10 +131,6 @@ export default {
       vulnerableComponents: 0,
       vulnerableComponentPercent: 0,
 
-      totalFindings: 0,
-      auditedFindings: 0,
-      auditedFindingPercent: 0,
-
       vulnerabilities: 0,
       suppressed: 0,
       lastMeasurement: ""
@@ -159,10 +153,6 @@ export default {
       this.vulnerableComponents = common.valueWithDefault(metric.vulnerableComponents, "0");
       this.vulnerableComponentPercent = common.calcProgressPercent(this.totalComponents, this.vulnerableComponents);
 
-      this.totalFindings = common.valueWithDefault(metric.findingsTotal, "0");
-      this.auditedFindings = common.valueWithDefault(metric.findingsAudited, "0");
-      this.auditedFindingPercent = common.calcProgressPercent(this.findingsTotal, this.findingsAudited);
-
       this.vulnerabilities = common.valueWithDefault(metric.vulnerabilities, "0");
       this.suppressed = common.valueWithDefault(metric.suppressed, "0");
       this.lastMeasurement = common.formatTimestamp(metric.lastOccurrence, true);