Added policy violations to component view

Author: stevespringett

src/views/portfolio/projects/ComponentDashboard.vue

@@ -65,6 +65,38 @@
         </b-row>
       </div>
     </b-card>
+    <b-row>
+      <b-col sm="6">
+        <b-card>
+          <b-row>
+            <b-col sm="5">
+              <h4 id="chart-policy-violations" 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>
+        </b-card>
+      </b-col>
+      <b-col sm="6">
+        <b-card>
+          <b-row>
+            <b-col sm="5">
+              <h4 id="chart-policy-violation-breakdown" 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-violation-breakdown ref="chartPolicyViolationBreakdown" chartId="chartPolicyViolationBreakdown" class="chart-wrapper" style="height:200px;margin-top:40px;" :height="200"></chart-policy-violation-breakdown>
+        </b-card>
+      </b-col>
+    </b-row>
   </div>
 </template>
 
@@ -73,14 +105,18 @@
   import { Callout } from '@coreui/vue'
   import ChartAuditingProgress from "../../dashboard/ChartAuditingProgress";
   import ChartComponentVulnerabilities from "../../dashboard/ChartComponentVulnerabilities";
-  import ChartPortfolioVulnerabilities from '../../dashboard/ChartPortfolioVulnerabilities'
+  import ChartPortfolioVulnerabilities from '../../dashboard/ChartPortfolioVulnerabilities';
+  import ChartPolicyViolations from "@/views/dashboard/ChartPolicyViolations";
+  import ChartPolicyViolationBreakdown from '@/views/dashboard/ChartPolicyViolationBreakdown';
 
   export default {
     name: 'ComponentDashboard',
     components: {
       ChartAuditingProgress,
       ChartComponentVulnerabilities,
       ChartPortfolioVulnerabilities,
+      ChartPolicyViolations,
+      ChartPolicyViolationBreakdown,
       Callout,
 
     },
@@ -145,6 +181,8 @@
       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.chartPolicyViolationBreakdown.render(response.data);
         this.extractStats(response.data);
       });
     }