Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[gui] Refactoring product overview page #3147

Merged
merged 1 commit into from
Jan 28, 2021
Merged

[gui] Refactoring product overview page #3147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 98 additions & 62 deletions ...omponents/Statistics/Overview/ComponentSeverityStatistics/ComponentSeverityStatistics.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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