From 6752c66411b2a172246183939ee04b601ec0ec2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rton=20Csord=C3=A1s?= <csordasmarton92@gmail.com>
Date: Thu, 14 Jan 2021 15:24:51 +0100
Subject: [PATCH] [gui] Refactoring product overview page

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.
---
 .../ComponentSeverityStatistics.vue           | 160 +++++++++++-------
 .../ComponentSeverityStatisticsChart.vue      |   4 -
 .../Overview/OutstandingReportsChart.vue      |  12 +-
 .../Statistics/Overview/Overview.vue          |  84 +++++----
 .../Statistics/Overview/Reports.vue           |  62 +++++--
 .../Statistics/Overview/SingleLineWidget.vue  |   4 +-
 .../src/components/TooltipHelpIcon.vue        |   7 +-
 7 files changed, 199 insertions(+), 134 deletions(-)

diff --git a/web/server/vue-cli/src/components/Statistics/Overview/ComponentSeverityStatistics/ComponentSeverityStatistics.vue b/web/server/vue-cli/src/components/Statistics/Overview/ComponentSeverityStatistics/ComponentSeverityStatistics.vue
index 98856a39b4..1040272644 100644
--- a/web/server/vue-cli/src/components/Statistics/Overview/ComponentSeverityStatistics/ComponentSeverityStatistics.vue
+++ b/web/server/vue-cli/src/components/Statistics/Overview/ComponentSeverityStatistics/ComponentSeverityStatistics.vue
@@ -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"
@@ -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,
@@ -120,7 +155,8 @@ export default {
     ComponentSeverityStatisticsTable,
     DetectionStatusIcon,
     ReportDiffCount,
-    SeverityIcon
+    SeverityIcon,
+    TooltipHelpIcon
   },
   mixins: [ ComponentStatistics, SeverityMixin ],
   data() {
diff --git a/web/server/vue-cli/src/components/Statistics/Overview/ComponentSeverityStatistics/ComponentSeverityStatisticsChart.vue b/web/server/vue-cli/src/components/Statistics/Overview/ComponentSeverityStatistics/ComponentSeverityStatisticsChart.vue
index b0bda83891..ca174699c4 100644
--- a/web/server/vue-cli/src/components/Statistics/Overview/ComponentSeverityStatistics/ComponentSeverityStatisticsChart.vue
+++ b/web/server/vue-cli/src/components/Statistics/Overview/ComponentSeverityStatistics/ComponentSeverityStatisticsChart.vue
@@ -30,10 +30,6 @@ export default {
           display: true,
           position: "bottom"
         },
-        title: {
-          display: true,
-          text: "Report severities"
-        },
         responsive: true,
         maintainAspectRatio: false,
         plugins: {
diff --git a/web/server/vue-cli/src/components/Statistics/Overview/OutstandingReportsChart.vue b/web/server/vue-cli/src/components/Statistics/Overview/OutstandingReportsChart.vue
index 76e576bb5c..46f4188d8e 100644
--- a/web/server/vue-cli/src/components/Statistics/Overview/OutstandingReportsChart.vue
+++ b/web/server/vue-cli/src/components/Statistics/Overview/OutstandingReportsChart.vue
@@ -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;
@@ -28,10 +28,6 @@ export default {
         },
         responsive: true,
         maintainAspectRatio: false,
-        title: {
-          display: true,
-          text: "Number of outstanding reports"
-        },
         tooltips: {
           mode: "index",
           callbacks: {
@@ -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,
diff --git a/web/server/vue-cli/src/components/Statistics/Overview/Overview.vue b/web/server/vue-cli/src/components/Statistics/Overview/Overview.vue
index ae2011d96a..5ed54047be 100644
--- a/web/server/vue-cli/src/components/Statistics/Overview/Overview.vue
+++ b/web/server/vue-cli/src/components/Statistics/Overview/Overview.vue
@@ -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 }">
@@ -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"
@@ -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";
@@ -132,7 +134,8 @@ export default {
     FailedFilesDialog,
     OutstandingReportsChart,
     Reports,
-    SingleLineWidget
+    SingleLineWidget,
+    TooltipHelpIcon
   },
   mixins: [ BaseStatistics, DateMixin ],
   data() {
@@ -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,
diff --git a/web/server/vue-cli/src/components/Statistics/Overview/Reports.vue b/web/server/vue-cli/src/components/Statistics/Overview/Reports.vue
index 5ab1cf0063..f44f38a095 100644
--- a/web/server/vue-cli/src/components/Statistics/Overview/Reports.vue
+++ b/web/server/vue-cli/src/components/Statistics/Overview/Reports.vue
@@ -13,6 +13,35 @@
               {{ reportType.icon }}
             </v-icon>
             {{ reportType.label }}
+
+            <tooltip-help-icon color="white">
+              <div v-if="reportType.id === 'new'">
+                Shows the number of reports which were active in the last
+                <i>x</i> days.<br><br>
+
+                Reports marked as <b>False positive</b> or <b>Intentional</b>
+                will be <i>excluded</i> from these numbers.<br><br>
+              </div>
+              <div v-else>
+                Shows the number of reports which were solved in the last
+                <i>x</i> days.<br><br>
+
+                For now reports marked as <b>False positive</b> or
+                <b>Intentional</b> are not considered to be resolved by these
+                numbers. A report is marked as resolved only when it disspeared
+                from a storage.<br><br>
+              </div>
+
+              <div>
+                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>
+              </div>
+            </tooltip-help-icon>
           </v-card-title>
           <v-row>
             <v-col
@@ -78,16 +107,21 @@ import {
   DateInterval,
   DiffType,
   ReportDate,
-  ReportFilter
+  ReportFilter,
+  ReviewStatus
 } from "@cc/report-server-types";
 import { DateMixin } from "@/mixins";
 
+import TooltipHelpIcon from "@/components/TooltipHelpIcon.vue";
+
 export default {
   name: "Reports",
+  components: { TooltipHelpIcon },
   mixins: [ DateMixin ],
   props: {
     bus: { type: Object, required: true },
-    getStatisticsFilters: { type: Function, required: true }
+    runIds: { type: Array, required: true },
+    reportFilter: { type: Object, required: true },
   },
   data() {
     const now = endOfToday();
@@ -105,7 +139,7 @@ export default {
       reportTypes: [
         {
           id: "new",
-          label: "New reports",
+          label: "Number of outstanding reports",
           color: "red",
           icon: "mdi-arrow-up",
           getValue: this.getNewReports,
@@ -119,7 +153,11 @@ export default {
           getValue: this.getResolvedReports,
           cols: cols.map(c => ({ ...c, value: null, loading: null }))
         },
-      ]
+      ],
+      activeReviewStatuses:
+        [ ReviewStatus.UNREVIEWED, ReviewStatus.CONFIRMED ],
+      resolvedReviewStatuses:
+        [ ReviewStatus.FALSE_POSITIVE, ReviewStatus.INTENTIONAL ],
     };
   },
   activated() {
@@ -142,10 +180,9 @@ export default {
     },
 
     getNewReports(column, date) {
-      const { runIds, reportFilter } = this.getStatisticsFilters();
-
-      const rFilter = new ReportFilter(reportFilter);
+      const rFilter = new ReportFilter(this.reportFilter);
       rFilter.detectionStatus = null;
+      rFilter.reviewStatus = this.activeReviewStatuses;
       rFilter.openReportsDate = this.getUnixTime(date[0]);
 
       const cmpData = new CompareData({
@@ -153,15 +190,13 @@ export default {
         diffType: DiffType.NEW
       });
 
-      this.getReportCount(column, runIds, rFilter, cmpData);
+      this.getReportCount(column, this.runIds, rFilter, cmpData);
     },
 
     getResolvedReports(column, date) {
-      const cmpData = null;
-      const { runIds, reportFilter } = this.getStatisticsFilters();
-
-      const rFilter = new ReportFilter(reportFilter);
+      const rFilter = new ReportFilter(this.reportFilter);
       rFilter.detectionStatus = null;
+      rFilter.reviewStatus = this.activeReviewStatuses;
       rFilter.date = new ReportDate({
         fixed: new DateInterval({
           after: this.getUnixTime(date[0]),
@@ -169,7 +204,8 @@ export default {
         })
       });
 
-      this.getReportCount(column, runIds, rFilter, cmpData);
+      const cmpData = null;
+      this.getReportCount(column, this.runIds, rFilter, cmpData);
     },
   }
 };
diff --git a/web/server/vue-cli/src/components/Statistics/Overview/SingleLineWidget.vue b/web/server/vue-cli/src/components/Statistics/Overview/SingleLineWidget.vue
index da42bad0f3..d0775c925d 100644
--- a/web/server/vue-cli/src/components/Statistics/Overview/SingleLineWidget.vue
+++ b/web/server/vue-cli/src/components/Statistics/Overview/SingleLineWidget.vue
@@ -13,8 +13,8 @@
           <div class="subtitle grey--text text-uppercase">
             {{ label }}
 
-            <tooltip-help-icon v-if="helpMessage">
-              {{ helpMessage }}
+            <tooltip-help-icon>
+              <slot name="help" />
             </tooltip-help-icon>
           </div>
           <div class="text-h3 font-weight-bold">
diff --git a/web/server/vue-cli/src/components/TooltipHelpIcon.vue b/web/server/vue-cli/src/components/TooltipHelpIcon.vue
index 29ab7c37ae..94adf526ba 100644
--- a/web/server/vue-cli/src/components/TooltipHelpIcon.vue
+++ b/web/server/vue-cli/src/components/TooltipHelpIcon.vue
@@ -7,7 +7,7 @@
     <template v-slot:activator="{ on }">
       <slot :on="on" name="activator">
         <v-icon
-          color="accent"
+          :color="color"
           class="ml-1"
           small
           v-on="on"
@@ -22,6 +22,9 @@
 
 <script>
 export default {
-  name: "TooltipHelpIcon"
+  name: "TooltipHelpIcon",
+  props: {
+    color: { type: String, default: "accent" }
+  }
 };
 </script>