Skip to content

Commit

Permalink
Merge pull request #715 from setchy/feature/dashboard-auditing-progress
Browse files Browse the repository at this point in the history
feat(dashboard): auditing progress for findings and policy violations
  • Loading branch information
nscuro authored Jan 30, 2024
2 parents 10ab007 + 675116a commit fc78cf7
Show file tree
Hide file tree
Showing 7 changed files with 172 additions and 41 deletions.
3 changes: 3 additions & 0 deletions src/i18n/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -85,6 +87,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",
Expand Down
74 changes: 65 additions & 9 deletions src/views/Dashboard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -239,7 +284,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'
Expand All @@ -253,7 +299,8 @@
PortfolioWidgetRow,
ChartPortfolioVulnerabilities,
ChartProjectVulnerabilities,
ChartAuditedProgress,
ChartAuditingFindingsProgress,
ChartAuditingViolationsProgress,
ChartPolicyViolations,
ChartComponentVulnerabilities
},
Expand All @@ -273,11 +320,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,
Expand Down Expand Up @@ -313,11 +364,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");
Expand Down Expand Up @@ -347,7 +402,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);
Expand Down
100 changes: 100 additions & 0 deletions src/views/dashboard/ChartAuditingViolationsProgress.vue
Original file line number Diff line number Diff line change
@@ -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>
10 changes: 0 additions & 10 deletions src/views/portfolio/projects/ComponentDashboard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -112,7 +111,6 @@
export default {
name: 'ComponentDashboard',
components: {
ChartAuditingProgress,
ChartComponentVulnerabilities,
ChartPortfolioVulnerabilities,
ChartPolicyViolations,
Expand All @@ -133,10 +131,6 @@
vulnerableComponents: 0,
vulnerableComponentPercent: 0,
totalFindings: 0,
auditedFindings: 0,
auditedFindingPercent: 0,
vulnerabilities: 0,
suppressed: 0,
lastMeasurement: ""
Expand All @@ -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);
Expand Down
16 changes: 4 additions & 12 deletions src/views/portfolio/projects/ProjectDashboard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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";
Expand All @@ -152,7 +152,7 @@
components: {
ChartPolicyViolations,
ChartPolicyViolationBreakdown,
ChartAuditingProgress,
ChartAuditingFindingsProgress,
ChartComponentVulnerabilities,
ChartPortfolioVulnerabilities,
Callout
Expand All @@ -174,10 +174,6 @@
vulnerableComponents: 0,
vulnerableComponentPercent: 0,
totalFindings: 0,
auditedFindings: 0,
auditedFindingPercent: 0,
vulnerabilities: 0,
suppressed: 0,
lastMeasurement: "n/a",
Expand All @@ -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);
Expand All @@ -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);
});
Expand Down
10 changes: 0 additions & 10 deletions src/views/portfolio/projects/ServiceDashboard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -112,7 +111,6 @@ import ChartPolicyViolationBreakdown from '@/views/dashboard/ChartPolicyViolatio
export default {
name: 'ServiceDashboard',
components: {
ChartAuditingProgress,
ChartComponentVulnerabilities,
ChartPortfolioVulnerabilities,
ChartPolicyViolations,
Expand All @@ -133,10 +131,6 @@ export default {
vulnerableComponents: 0,
vulnerableComponentPercent: 0,
totalFindings: 0,
auditedFindings: 0,
auditedFindingPercent: 0,
vulnerabilities: 0,
suppressed: 0,
lastMeasurement: ""
Expand All @@ -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);
Expand Down

0 comments on commit fc78cf7

Please sign in to comment.