Skip to content

Commit

Permalink
[gui] Refactoring product overview page
Browse files Browse the repository at this point in the history 
Add helper tooltips for each widget on the product overview page which
describes the numbers, how these numbers are calculated and what kind of
filter affects these numbers.
  • Loading branch information
@csordasmarton
csordasmarton committed Jan 28, 2021
1 parent 9dc56ea commit 6752c66
Show file tree
Hide file tree
Showing 7 changed files with 199 additions and 134 deletions.
160 changes: 98 additions & 62 deletions ...omponents/Statistics/Overview/ComponentSeverityStatistics/ComponentSeverityStatistics.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,74 +2,108 @@
<v-container fluid>
<v-row>
<v-col>
<component-severity-statistics-table
:items="statistics"
:loading="loading"
:filters="statisticsFilters"
:total-columns="totalColumns"
>
<template
v-for="item in [
['critical', Severity.CRITICAL],
['high', Severity.HIGH],
['medium', Severity.MEDIUM],
['low', Severity.LOW],
['style', Severity.STYLE],
['unspecified', Severity.UNSPECIFIED],
]"
v-slot:[`header.${item[0]}.count`]="{ header }"
>
<span :key="item[0]">
<severity-icon :status="item[1]" :size="16" />
{{ header.text }}
</span>
</template>

<template
v-for="i in [
['critical', Severity.CRITICAL],
['high', Severity.HIGH],
['medium', Severity.MEDIUM],
['low', Severity.LOW],
['style', Severity.STYLE],
['unspecified', Severity.UNSPECIFIED],
]"
v-slot:[`item.${i[0]}.count`]="{ item }"
<v-card flat>
<v-card-title class="justify-center">
Component statistics

<tooltip-help-icon>
This table shows component statistics per severity
levels.<br><br>

Each row can be expanded which will show a checker statistics
for the actual component.<br><br>

The following filters don't affect these values:
<ul>
<li><b>Severity</b> filter.</li>
<li><b>Source component</b> filter.</li>
</ul>
</tooltip-help-icon>
</v-card-title>
<component-severity-statistics-table
:items="statistics"
:loading="loading"
:filters="statisticsFilters"
:total-columns="totalColumns"
>
<span :key="i[0]">
<router-link
v-if="item[i[0]].count"
:to="{ name: 'reports', query: {
...$router.currentRoute.query,
...(item.$queryParams || {}),
'source-component': item.component,
'severity': severityFromCodeToString(i[1])
}}"
>
{{ item[i[0]].count }}
</router-link>

<report-diff-count
:num-of-new-reports="item[i[0]].new"
:num-of-resolved-reports="item[i[0]].resolved"
<template
v-for="item in [
['critical', Severity.CRITICAL],
['high', Severity.HIGH],
['medium', Severity.MEDIUM],
['low', Severity.LOW],
['style', Severity.STYLE],
['unspecified', Severity.UNSPECIFIED],
]"
v-slot:[`header.${item[0]}.count`]="{ header }"
>
<span :key="item[0]">
<severity-icon :status="item[1]" :size="16" />
{{ header.text }}
</span>
</template>

<template
v-for="i in [
['critical', Severity.CRITICAL],
['high', Severity.HIGH],
['medium', Severity.MEDIUM],
['low', Severity.LOW],
['style', Severity.STYLE],
['unspecified', Severity.UNSPECIFIED],
]"
v-slot:[`item.${i[0]}.count`]="{ item }"
>
<span :key="i[0]">
<router-link
v-if="item[i[0]].count"
:to="{ name: 'reports', query: {
...$router.currentRoute.query,
...(item.$queryParams || {}),
'source-component': item.component,
'severity': severityFromCodeToString(i[1])
}}"
>
{{ item[i[0]].count }}
</router-link>

<report-diff-count
:num-of-new-reports="item[i[0]].new"
:num-of-resolved-reports="item[i[0]].resolved"
/>
</span>
</template>

<template v-slot:header.reports.count="{ header }">
<detection-status-icon
:status="DetectionStatus.UNRESOLVED"
:size="16"
left
/>
</span>
</template>

<template v-slot:header.reports.count="{ header }">
<detection-status-icon
:status="DetectionStatus.UNRESOLVED"
:size="16"
left
/>
{{ header.text }}
</template>
</component-severity-statistics-table>
{{ header.text }}
</template>
</component-severity-statistics-table>
</v-card>
</v-col>
</v-row>
<v-row>
<v-col>
<v-card flat>
<v-card-title class="justify-center">
Report severities

<tooltip-help-icon>
This pie chart shows the checker severity distribution in the
product.<br><br>

The following filters don't affect these values:
<ul>
<li><b>Severity</b> filter.</li>
<li><b>Source component</b> filter.</li>
</ul>
</tooltip-help-icon>
</v-card-title>

<v-row justify="center">
<v-overlay
:value="loading"
Expand Down Expand Up @@ -102,6 +136,7 @@ import {
} from "@cc/report-server-types";
import { SeverityMixin } from "@/mixins";
import { DetectionStatusIcon, SeverityIcon } from "@/components/Icons";
import TooltipHelpIcon from "@/components/TooltipHelpIcon";
import {
ComponentStatistics,
ReportDiffCount,
Expand All @@ -120,7 +155,8 @@ export default {
ComponentSeverityStatisticsTable,
DetectionStatusIcon,
ReportDiffCount,
SeverityIcon
SeverityIcon,
TooltipHelpIcon
},
mixins: [ ComponentStatistics, SeverityMixin ],
data() {
Expand Down
4 changes: 0 additions & 4 deletions ...ents/Statistics/Overview/ComponentSeverityStatistics/ComponentSeverityStatisticsChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,6 @@ export default {
display: true,
position: "bottom"
},
title: {
display: true,
text: "Report severities"
},
responsive: true,
maintainAspectRatio: false,
plugins: {
Expand Down
12 changes: 6 additions & 6 deletions web/server/vue-cli/src/components/Statistics/Overview/OutstandingReportsChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Line, mixins } from "vue-chartjs";
import ChartDataLabels from "chartjs-plugin-datalabels";
import { ccService, handleThriftError } from "@cc-api";
import { ReportFilter, Severity } from "@cc/report-server-types";
import { ReportFilter, ReviewStatus, Severity } from "@cc/report-server-types";
import { DateMixin, SeverityMixin } from "@/mixins";
const { reactiveData } = mixins;
Expand All @@ -28,10 +28,6 @@ export default {
},
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: "Number of outstanding reports"
},
tooltips: {
mode: "index",
callbacks: {
Expand Down Expand Up @@ -174,10 +170,14 @@ export default {
fetchOutstandingReports(date) {
const { runIds, reportFilter } = this.getStatisticsFilters();
const cmpData = null;
const rFilter = new ReportFilter(reportFilter);
rFilter.openReportsDate = this.getUnixTime(date);
rFilter.detectionStatus = null;
rFilter.reviewStatus =
[ ReviewStatus.UNREVIEWED, ReviewStatus.CONFIRMED ];
const cmpData = null;
return new Promise(resolve => {
ccService.getClient().getSeverityCounts(runIds, rFilter, cmpData,
Expand Down
84 changes: 39 additions & 45 deletions web/server/vue-cli/src/components/Statistics/Overview/Overview.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,24 @@
<v-container fluid>
<reports
:bus="bus"
:get-statistics-filters="getStatisticsFilters"
:run-ids="runIds"
:report-filter="reportFilter"
/>

<v-row>
<v-col>
<single-line-widget
icon="mdi-bell-ring"
color="red"
label="Outstanding reports"
help-message="Number of reports which are not fixed yet."
:bus="bus"
:get-value="getNumberOfOutstandingReports"
>
<template #value="{ value }">
<router-link
:to="{
name: 'reports',
query: {
...$router.currentRoute.query,
...{
'open-reports-date': dateTimeToStr(new Date),
}
}
}"
class="link"
color="inherit"
>
{{ value }}
</router-link>
</template>
</single-line-widget>
</v-col>

<v-col>
<single-line-widget
icon="mdi-close"
color="red"
label="Number of failed files"
help-message="Number of failed files in the current product."
:bus="bus"
:get-value="getNumberOfFailedFiles"
>
<template #help>
Number of failed files in the current product.<br><br>
Only the Run filter will affect this value.
</template>

<template #value="{ value }">
<failed-files-dialog>
<template #default="{ on }">
Expand All @@ -61,17 +37,42 @@
icon="mdi-card-account-details"
color="grey"
label="Number of checkers reporting faults"
help-message="Number of checkers which found some report in the
current product."
:bus="bus"
:get-value="getNumberOfActiveCheckers"
/>
>
<template #help>
Number of checkers which found some report in the current
product.<br><br>

Every filter will affect this value.
</template>
</single-line-widget>
</v-col>
</v-row>

<v-row class="my-4">
<v-col>
<v-card flat>
<v-card-title class="justify-center">
Number of outstanding reports

<tooltip-help-icon>
Shows the number of reports which were active in the last
<i>x</i> months/days.<br><br>

Reports marked as <b>False positive</b> or <b>Intentional</b>
will be <i>excluded</i> from these numbers.<br><br>

The following filters don't affect these values:
<ul>
<li><b>Outstanding reports on a given date</b> filter.</li>
<li>All filters in the <b>COMPARE TO</b> section.</li>
<li><b>Latest Review Status</b> filter.</li>
<li><b>Latest Detection Status</b> filter.</li>
</ul>
</tooltip-help-icon>
</v-card-title>

<div class="last-month-selector">
<v-text-field
v-model="lastMonth"
Expand Down Expand Up @@ -116,9 +117,10 @@

<script>
import { ccService, handleThriftError } from "@cc-api";
import { ReportFilter } from "@cc/report-server-types";
import { DateMixin } from "@/mixins";
import { BaseStatistics } from "@/components/Statistics";
import TooltipHelpIcon from "@/components/TooltipHelpIcon";
import Reports from "./Reports";
import { ComponentSeverityStatistics } from "./ComponentSeverityStatistics";
import FailedFilesDialog from "./FailedFilesDialog";
Expand All @@ -132,7 +134,8 @@ export default {
FailedFilesDialog,
OutstandingReportsChart,
Reports,
SingleLineWidget
SingleLineWidget,
TooltipHelpIcon
},
mixins: [ BaseStatistics, DateMixin ],
data() {
Expand All @@ -150,15 +153,6 @@ export default {
});
},
getNumberOfOutstandingReports() {
const { runIds, reportFilter, cmpData } = this.getStatisticsFilters();
const repFilter = new ReportFilter(reportFilter);
repFilter.openReportsDate = this.getUnixTime(new Date);
return this.getNumberOfReports(runIds, repFilter, cmpData);
},
getNumberOfFailedFiles() {
return new Promise(resolve => {
ccService.getClient().getFailedFilesCount(this.runIds,
Expand Down
Loading

0 comments on commit 6752c66

Please sign in to comment.