From ce4d28041d2b1b9862932cee2e527a700cf89f8a Mon Sep 17 00:00:00 2001
From: Whisperity <whisperity@gmail.com>
Date: Sun, 21 Jan 2024 13:01:04 +0100
Subject: [PATCH 1/2] feat(gui): Checker status auditing

Extend the "Analysis Info" dialog on the Web UI to be capable of
rendering the new `AnalysisInfo.checkers` data structure from the API.

If the data is available, renders an expanding widget first grouped by
analyser, then heuristically by checker "group". If the group is not
entirely enabled or disabled, shows the number of enabled, disabled, and
total checkers. Does the same for the analyser as a whole.

If the data is not available, it tries doing its best to give the user a
reason why. Likely it is because of two things: runs upgraded from older
server versions that did not collect the data, or runs done not with
`CodeChecker analyze`.
---
 web/server/vue-cli/package-lock.json          |   5 +-
 web/server/vue-cli/package.json               |   1 +
 .../src/components/AnalysisInfo/Checker.vue   |  54 +++
 .../components/AnalysisInfo/CheckerGroup.vue  | 115 ++++++
 .../components/AnalysisInfo/CheckerRows.vue   |  32 ++
 .../src/components/AnalysisInfo/index.js      |   9 +
 .../src/components/AnalysisInfoDialog.vue     | 371 +++++++++++++++++-
 .../vue-cli/src/components/CountChips.vue     | 129 ++++++
 .../Icons/AnalyzerStatisticsIcon.vue          |  12 +-
 .../Run/AnalyzerStatisticsDialog.vue          |   4 +-
 .../src/components/Run/ExpandedRun.vue        |   3 +-
 web/server/vue-cli/src/components/index.js    |   4 +-
 web/server/vue-cli/src/mixins/index.js        |   4 +-
 .../vue-cli/src/mixins/version.mixin.js       |  18 +
 web/server/vue-cli/src/views/RunList.vue      |  11 +-
 15 files changed, 738 insertions(+), 34 deletions(-)
 create mode 100644 web/server/vue-cli/src/components/AnalysisInfo/Checker.vue
 create mode 100644 web/server/vue-cli/src/components/AnalysisInfo/CheckerGroup.vue
 create mode 100644 web/server/vue-cli/src/components/AnalysisInfo/CheckerRows.vue
 create mode 100644 web/server/vue-cli/src/components/AnalysisInfo/index.js
 create mode 100644 web/server/vue-cli/src/components/CountChips.vue
 create mode 100644 web/server/vue-cli/src/mixins/version.mixin.js

diff --git a/web/server/vue-cli/package-lock.json b/web/server/vue-cli/package-lock.json
index 273e13895d..f567288e63 100644
--- a/web/server/vue-cli/package-lock.json
+++ b/web/server/vue-cli/package-lock.json
@@ -18,6 +18,7 @@
         "jsplumb": "^2.15.6",
         "lodash": "^4.17.21",
         "marked": "^4.0.10",
+        "semver": "^5.7.1",
         "splitpanes": "^2.3.8",
         "vue": "^2.6.14",
         "vue-chartjs": "^3.5.1",
@@ -13862,7 +13863,6 @@
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver"
       }
@@ -26616,8 +26616,7 @@
     "semver": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-      "dev": true
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
     },
     "send": {
       "version": "0.17.1",
diff --git a/web/server/vue-cli/package.json b/web/server/vue-cli/package.json
index b0043acf96..68a7ca8328 100644
--- a/web/server/vue-cli/package.json
+++ b/web/server/vue-cli/package.json
@@ -36,6 +36,7 @@
     "jsplumb": "^2.15.6",
     "lodash": "^4.17.21",
     "marked": "^4.0.10",
+    "semver": "^5.7.1",
     "splitpanes": "^2.3.8",
     "vue": "^2.6.14",
     "vue-chartjs": "^3.5.1",
diff --git a/web/server/vue-cli/src/components/AnalysisInfo/Checker.vue b/web/server/vue-cli/src/components/AnalysisInfo/Checker.vue
new file mode 100644
index 0000000000..185460b482
--- /dev/null
+++ b/web/server/vue-cli/src/components/AnalysisInfo/Checker.vue
@@ -0,0 +1,54 @@
+<template>
+  <v-row
+    no-gutters
+    align="center"
+  >
+    <v-col
+      cols="auto"
+    >
+      <analyzer-statistics-icon
+        class="mr-2"
+        :value="(enabled ? 'successful' : 'failed')"
+        :title="'\'' + name + '\' ' + (enabled ? 'was' : 'was not') +
+          ' enabled in this analysis.'"
+      />
+    </v-col>
+    <v-col
+      :class="'pr-1 checker-name ' +
+        (enabled ? 'checker-enabled' : 'checker-disabled')"
+    >
+      {{ name }}
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import { AnalyzerStatisticsIcon } from "@/components/Icons";
+
+export default {
+  name: "Checker",
+  components: {
+    AnalyzerStatisticsIcon
+  },
+  props: {
+    enabled: { type: Boolean, required: true },
+    name: { type: String, required: true }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.analysis-info {
+  .checker-name {
+    font-family: monospace;
+    font-weight: normal;
+  }
+
+  .checker-name.checker-enabled {
+    color: black;
+  }
+
+  .checker-name.checker-disabled {
+    color: black;
+  }
+}
+</style>
diff --git a/web/server/vue-cli/src/components/AnalysisInfo/CheckerGroup.vue b/web/server/vue-cli/src/components/AnalysisInfo/CheckerGroup.vue
new file mode 100644
index 0000000000..7ceaa19f23
--- /dev/null
+++ b/web/server/vue-cli/src/components/AnalysisInfo/CheckerGroup.vue
@@ -0,0 +1,115 @@
+<template>
+  <v-expansion-panel>
+    <v-expansion-panel-header
+      class="pa-0 px-1"
+    >
+      <v-row
+        no-gutters
+        align="center"
+      >
+        <v-col cols="auto">
+          <v-chip
+            class="mr-1 pa-1"
+            :color="groupWideStatus"
+            :ripple="false"
+            :title="'Group \'' + group + '\' was' +
+              (needDetailedCounts ? ' partially' :
+                (groupEnabled ? '' : ' not')
+              ) +
+              ' enabled in this analysis'"
+            outlined
+            dark
+            small
+          >
+            <v-icon
+              v-if="!needDetailedCounts && groupEnabled"
+              start
+            >
+              mdi-check
+            </v-icon>
+            <v-icon
+              v-else-if="!needDetailedCounts && !groupEnabled"
+              start
+            >
+              mdi-close
+            </v-icon>
+            <v-icon
+              v-else-if="needDetailedCounts"
+              start
+            >
+              mdi-tune
+            </v-icon>
+          </v-chip>
+        </v-col>
+        <v-col
+          cols="auto"
+          class="pl-2 checker-group-name primary--text"
+        >
+          {{ group }}
+        </v-col>
+        <v-col cols="auto">
+          <count-chips
+            v-if="needDetailedCounts"
+            :num-good="counts[0]"
+            :num-bad="counts[1]"
+            :num-total="counts[2]"
+            :good-text="'Number of checkers enabled (executed)'"
+            :bad-text="'Number of checkers disabled (not executed)'"
+            :total-text="'Number of checkers available'"
+            :simplify-showing-if-all="true"
+            :show-total="true"
+            :show-dividers="false"
+            :show-zero-chips="false"
+            class="pl-4"
+          />
+        </v-col>
+      </v-row>
+    </v-expansion-panel-header>
+    <v-expansion-panel-content>
+      <checker-rows
+        :checkers="checkers"
+      />
+    </v-expansion-panel-content>
+  </v-expansion-panel>
+</template>
+
+<script>
+import CountChips from "@/components/CountChips";
+import CheckerRows from "./CheckerRows";
+
+export default {
+  name: "CheckerGroup",
+  components: {
+    CheckerRows,
+    CountChips,
+  },
+  props: {
+    group: { type: String, required: true },
+    checkers: { type: Array, required: true },
+    counts: { type: Array, required: true }
+  },
+  computed: {
+    needDetailedCounts() {
+      return this.counts[0] > 0 && this.counts[1] > 0;
+    },
+    groupWideStatus() {
+      if (this.counts[0] > 0 && this.counts[1] === 0)
+        return "success";
+      if (this.counts[0] === 0 && this.counts[1] > 0)
+        return "error";
+      return "grey darken-1";
+    },
+    groupEnabled() {
+      return this.groupWideStatus === "success";
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.analysis-info .checker-group-name {
+  font-family: monospace;
+  font-size: 112.5%;
+  font-style: italic;
+  font-weight: medium;
+}
+</style>
diff --git a/web/server/vue-cli/src/components/AnalysisInfo/CheckerRows.vue b/web/server/vue-cli/src/components/AnalysisInfo/CheckerRows.vue
new file mode 100644
index 0000000000..ee3d579b61
--- /dev/null
+++ b/web/server/vue-cli/src/components/AnalysisInfo/CheckerRows.vue
@@ -0,0 +1,32 @@
+<template>
+  <v-container
+    class="analysis-info-checker-rows-in-columns"
+  >
+    <checker
+      v-for="(checker, idx) in checkers"
+      :key="idx"
+      :name="checker[0]"
+      :enabled="checker[1]"
+    />
+  </v-container>
+</template>
+
+<script>
+import Checker from "./Checker";
+
+export default {
+  name: "CheckerRows",
+  components: {
+    Checker
+  },
+  props: {
+    checkers: { type: Array, required: true }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.analysis-info .analysis-info-checker-rows-in-columns {
+  columns: 32em auto;
+}
+</style>
diff --git a/web/server/vue-cli/src/components/AnalysisInfo/index.js b/web/server/vue-cli/src/components/AnalysisInfo/index.js
new file mode 100644
index 0000000000..383c8aab12
--- /dev/null
+++ b/web/server/vue-cli/src/components/AnalysisInfo/index.js
@@ -0,0 +1,9 @@
+import Checker from "./Checker";
+import CheckerGroup from "./CheckerGroup";
+import CheckerRows from "./CheckerRows";
+
+export {
+  Checker,
+  CheckerGroup,
+  CheckerRows
+};
diff --git a/web/server/vue-cli/src/components/AnalysisInfoDialog.vue b/web/server/vue-cli/src/components/AnalysisInfoDialog.vue
index cfba1c26be..7daa49c17c 100644
--- a/web/server/vue-cli/src/components/AnalysisInfoDialog.vue
+++ b/web/server/vue-cli/src/components/AnalysisInfoDialog.vue
@@ -18,27 +18,178 @@
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </v-card-title>
+
       <v-card-text>
         <v-container class="pa-0 pt-2">
           <!-- eslint-disable vue/no-v-html -->
           <div
-            v-for="cmd in analysisInfo"
+            v-for="cmd in analysisInfo.cmds"
             :key="cmd"
             class="analysis-info mb-2"
             v-html="cmd"
           />
         </v-container>
+
+        <div
+          v-if="analysisInfo.checkerInfoAvailable ===
+            CheckerInfoAvailability.Normal"
+        >
+          <v-container class="pa-0 pt-1">
+            <v-expansion-panels
+              multiple
+              hover
+            >
+              <v-expansion-panel
+                v-for="analyzer in analysisInfo.analyzers"
+                :key="analyzer"
+              >
+                <v-expansion-panel-header
+                  class="pa-0 px-1"
+                >
+                  <v-row
+                    no-gutters
+                    align="center"
+                  >
+                    <v-col
+                      cols="auto"
+                      class="pa-1 analyzer-name primary--text"
+                    >
+                      {{ analyzer }}
+                    </v-col>
+                    <v-col cols="auto">
+                      <count-chips
+                        class="pl-2"
+                        :num-good="analysisInfo.counts[analyzer]
+                          [GroupMeta.AnalyzerTotal][CountMeta.Enabled]"
+                        :num-bad="analysisInfo.counts[analyzer]
+                          [GroupMeta.AnalyzerTotal][CountMeta.Disabled]"
+                        :num-total="analysisInfo.counts[analyzer]
+                          [GroupMeta.AnalyzerTotal][CountMeta.Total]"
+                        :good-text="'Number of checkers enabled (executed)'"
+                        :bad-text="'Number of checkers disabled' +
+                          '(not executed)'"
+                        :total-text="'Number of checkers available'"
+                        :simplify-showing-if-all="true"
+                        :show-total="true"
+                        :show-dividers="false"
+                        :show-zero-chips="false"
+                      />
+                    </v-col>
+                  </v-row>
+                </v-expansion-panel-header>
+
+                <v-expansion-panel-content
+                  class="pa-1"
+                >
+                  <template
+                    v-for="(checkers, group) in
+                      analysisInfo.checkers[analyzer]"
+                  >
+                    <checker-group
+                      v-if="group !== GroupMeta.NoGroup"
+                      :key="group"
+                      :group="group"
+                      :checkers="checkers"
+                      :counts="analysisInfo.counts[analyzer][group]"
+                    />
+                    <checker-rows
+                      v-else
+                      :key="group"
+                      :checkers="checkers"
+                    />
+                  </template>
+                </v-expansion-panel-content>
+              </v-expansion-panel>
+            </v-expansion-panels>
+          </v-container>
+        </div>
+        <div
+          v-else
+        >
+          <v-alert
+            icon="mdi-alert"
+            class="mt-2"
+            color="deep-orange"
+            outlined
+          >
+            <span
+              v-if="analysisInfo.checkerInfoAvailable ===
+                CheckerInfoAvailability.UnknownReason"
+            >
+              The list of checkers executed during the analysis is not
+              available!<br>
+              This is likely caused by storing a run from a report directory
+              which was not created natively by
+              <span class="top-level-command">CodeChecker analyze</span>.
+              Using the
+              <span
+                class="top-level-command font-italic"
+              >report-converter</span>
+              on the results of third-party analysers can cause this, as it
+              prevents CodeChecker from knowing about the analysis
+              configuration.
+            </span>
+            <span
+              v-else-if="analysisInfo.checkerInfoAvailable ===
+                CheckerInfoAvailability.VersionTooLow"
+            >
+              The list of checkers executed during the analysis is only
+              available from CodeChecker version
+              <span class="version font-weight-bold">6.24</span>.<br>
+              The analysis was executed using an older,
+              <span class="version">{{
+                analysisInfo.codeCheckerVersion
+              }}</span>
+              client, and it was also <span class="font-italic">likely</span>
+              stored when the server ran this older version.
+            </span>
+            <span
+              v-else-if="analysisInfo.checkerInfoAvailable ===
+                CheckerInfoAvailability.ReportIdToAnalysisInfoNotTrivialOverAPI"
+            >
+              The list of checkers executed during the analysis that produced
+              this <span class="font-italic">Report</span> is not
+              available!<br>
+            </span>
+          </v-alert>
+        </div>
       </v-card-text>
     </v-card>
   </v-dialog>
 </template>
 
 <script>
+import {
+  CheckerGroup,
+  CheckerRows
+} from "@/components/AnalysisInfo";
+import CountChips from "@/components/CountChips";
 import { ccService, handleThriftError } from "@cc-api";
-import { AnalysisInfoFilter } from "@cc/report-server-types";
+import {
+  AnalysisInfoFilter,
+  RunFilter,
+  RunHistoryFilter
+} from "@cc/report-server-types";
+import { VersionMixin } from "@/mixins";
+
+const GroupMeta = Object.freeze({ NoGroup: "__N", AnalyzerTotal: "__S" });
+const CountMeta = Object.freeze({ Enabled: 0, Disabled: 1, Total: 2 });
+const CheckerInfoAvailability = Object.freeze({
+  Normal: 0,
+  Unloaded: 1,
+  UnknownReason: 2,
+  VersionTooLow: 3,
+  ReportIdToAnalysisInfoNotTrivialOverAPI: 4
+});
 
 export default {
   name: "AnalysisInfoDialog",
+  components: {
+    CheckerGroup,
+    CheckerRows,
+    CountChips
+  },
+  mixins: [ VersionMixin ],
   props: {
     value: { type: Boolean, default: false },
     runId: { type: Object, default: () => null },
@@ -48,9 +199,16 @@ export default {
 
   data() {
     return {
-      analysisInfo: [],
+      analysisInfo: {
+        cmds: [],
+        analyzers: [],
+        checkerInfoAvailable: CheckerInfoAvailability.Unloaded,
+        codeCheckerVersion: "0",
+        checkers: {},
+        checkerCounts: {},
+      },
       enabledCheckerRgx: new RegExp("^(--enable|-e[= ]*)", "i"),
-      disabledCheckerRgx: new RegExp("^(--disable|-d[= ]*)", "i"),
+      disabledCheckerRgx: new RegExp("^(--disable|-d[= ]*)", "i")
     };
   },
 
@@ -62,6 +220,15 @@ export default {
       set(val) {
         this.$emit("update:value", val);
       }
+    },
+    GroupMeta() {
+      return GroupMeta;
+    },
+    CountMeta() {
+      return CountMeta;
+    },
+    CheckerInfoAvailability() {
+      return CheckerInfoAvailability;
     }
   },
 
@@ -82,8 +249,7 @@ export default {
   },
 
   methods: {
-    highlightOptions(analysisInfo) {
-      const cmd = analysisInfo.analyzerCommand;
+    highlightOptions(cmd) {
       return cmd.split(" ").map(param => {
         if (!param.startsWith("-")) {
           return param;
@@ -104,6 +270,157 @@ export default {
       }).join(" ").replace(/(?:\r\n|\r|\n)/g, "<br>");
     },
 
+    getTopLevelCheckGroup(analyzerName, checkerName) {
+      const clangTidyClangDiagnostic = checkerName.split("clang-diagnostic-");
+      if (clangTidyClangDiagnostic.length > 1 &&
+        clangTidyClangDiagnostic[0] === "")
+      {
+        // Unfortunately, this is historically special...
+        return "clang-diagnostic";
+      }
+
+      const splitDot = checkerName.split(".");
+      if (splitDot.length > 1) {
+        return splitDot[0];
+      }
+
+      const splitHyphen = checkerName.split("-");
+      if (splitHyphen.length > 1) {
+        if (splitHyphen[0] === analyzerName) {
+          // cppcheck-PointerSize -> <NoGroup>
+          // gcc-fd-leak          -> "fd"
+          return splitHyphen.length >= 3 ? splitHyphen[1] : GroupMeta.NoGroup;
+        }
+        // bugprone-easily-swappable-parameters -> "bugprone"
+        return splitHyphen[0];
+      }
+
+      return GroupMeta.NoGroup;
+    },
+
+    reduceCheckerStatuses(accumulator, newInfo) {
+      for (const [ analyzer, checkers ] of Object.entries(newInfo)) {
+        if (!accumulator[analyzer]) {
+          accumulator[analyzer] = {};
+          accumulator[analyzer][GroupMeta.NoGroup] = {};
+        }
+        for (const [ checker, checkerInfo ] of Object.entries(checkers)) {
+          const group = this.getTopLevelCheckGroup(analyzer, checker);
+          if (!accumulator[analyzer][group]) {
+            accumulator[analyzer][group] = {};
+          }
+          accumulator[analyzer][group][checker] =
+            accumulator[analyzer][group][checker] || checkerInfo.enabled;
+        }
+      }
+
+      return accumulator;
+    },
+
+    sortAndStoreCheckerInfo(checkerStatuses) {
+      this.analysisInfo.analyzers = Object.keys(checkerStatuses).sort();
+      this.analysisInfo.checkers =
+        Object.fromEntries(Object.keys(checkerStatuses).map(
+          analyzer => [ analyzer,
+            Object.fromEntries(
+              Object.keys(checkerStatuses[analyzer]).sort().map(
+                group => [ group,
+                  Object.keys(checkerStatuses[analyzer][group]).sort().map(
+                    checker => [ checker,
+                      checkerStatuses[analyzer][group][checker]
+                    ])
+                ])
+            )
+          ]));
+
+      this.analysisInfo.counts =
+        Object.fromEntries(Object.keys(checkerStatuses).map(
+          analyzer => [ analyzer,
+            Object.fromEntries(
+              Object.keys(checkerStatuses[analyzer]).map(
+                group => [ group,
+                  [
+                    // [0]: #[Enabled checkers]
+                    Object.keys(checkerStatuses[analyzer][group])
+                      .map(checker =>
+                        checkerStatuses[analyzer][group][checker] ? 1 : 0)
+                      .reduce((a, b) => a + b, 0),
+                    // [1]: #[Disabled checkers] (Note: will be updated later)
+                    -1,
+                    // [2]: #[Total checkers]
+                    Object.keys(checkerStatuses[analyzer][group]).length
+                  ]
+                ]))
+          ]));
+      const counts = this.analysisInfo.counts;
+      Object.keys(counts).map(
+        analyzer => Object.keys(counts[analyzer]).map(
+          group => {
+            counts[analyzer][group][CountMeta.Disabled] =
+              counts[analyzer][group][CountMeta.Total] -
+              counts[analyzer][group][CountMeta.Enabled];
+          }));
+      Object.keys(counts).map(
+        analyzer => {
+          const sum = Object.values(counts[analyzer])
+            .reduce((as, bs) => [
+              as[CountMeta.Enabled]  + bs[CountMeta.Enabled],
+              as[CountMeta.Disabled] + bs[CountMeta.Disabled],
+              as[CountMeta.Total]    + bs[CountMeta.Total],
+            ]);
+          counts[analyzer][GroupMeta.AnalyzerTotal] = sum;
+        });
+    },
+
+    checkerStatusUnavailableDueToVersion(version) {
+      const normalized = this.prettifyCCVersion(version);
+      if (!normalized) return false;
+      this.analysisInfo.codeCheckerVersion = normalized;
+
+      if (this.isNewerOrEqualCCVersion(normalized, "6.24")) return false;
+      this.analysisInfo.checkerInfoAvailable =
+        CheckerInfoAvailability.VersionTooLow;
+      return true;
+    },
+
+    decideWhyCheckerStatusesUnavailable() {
+      if (!this.runId && !this.runHistoryId && !this.reportId) {
+        return;
+      }
+
+      if (this.runId && !this.runHistoryId) {
+        const filter = new RunFilter({
+          ids: [ this.runId ]
+        });
+        ccService.getClient().getRunData(filter, null, null, null,
+          handleThriftError(runDataList => {
+            if (runDataList.length !== 1) return;
+            this.checkerStatusUnavailableDueToVersion(
+              runDataList[0].codeCheckerVersion);
+          }));
+      } else if (this.runId && this.runHistoryId) {
+        const filter = new RunHistoryFilter({
+          tagNames: [],
+          tagIds: [ this.runHistoryId ]
+        });
+        ccService.getClient().getRunHistory([ this.runId ], 1, 0, filter,
+          handleThriftError(runHistoryDataList => {
+            if (runHistoryDataList.length !== 1) return;
+            this.checkerStatusUnavailableDueToVersion(
+              runHistoryDataList[0].codeCheckerVersion);
+          }));
+      } else if (this.reportId) {
+        this.analysisInfo.checkerInfoAvailable = CheckerInfoAvailability.
+          ReportIdToAnalysisInfoNotTrivialOverAPI;
+      }
+
+      if (this.analysisInfo.checkerInfoAvailable !==
+        CheckerInfoAvailability.UnknownReason) {
+        // It was decided that the version is the reason.
+        return;
+      }
+    },
+
     getAnalysisInfo() {
       if (
         !this.dialog ||
@@ -112,26 +429,36 @@ export default {
         return;
       }
 
-      this.analysisInfo = [];
-
       const analysisInfoFilter = new AnalysisInfoFilter({
-        runId: this.runId,
+        // Query a run's analysis info only if a run history ID is not explicit.
+        runId: (!this.runHistoryId ? this.runId : null),
         runHistoryId: this.runHistoryId,
         reportId: this.reportId,
       });
 
+      this.analysisInfo.checkerInfoAvailable =
+        CheckerInfoAvailability.Unloaded;
+
       const limit = null;
       const offset = 0;
       ccService.getClient().getAnalysisInfo(analysisInfoFilter, limit,
         offset, handleThriftError(analysisInfo => {
-          this.analysisInfo = analysisInfo.map(cmd =>
-            this.highlightOptions(cmd));
-
-          // FIXME: Do this more ergonomically. This is only good enough for
-          // testing the backend's stability for now...
-          console.warn("The available checkers might have been received, " +
-                       "but showing them is not supported yet!");
-          console.warn(analysisInfo.map(ai => ai.checkers));
+          this.analysisInfo.cmds = analysisInfo.map(ai =>
+            this.highlightOptions(ai.analyzerCommand));
+
+          const checkerStatuses = analysisInfo.map(ai => ai.checkers).
+            reduce(this.reduceCheckerStatuses, {});
+          if (!Object.keys(checkerStatuses).length) {
+            this.sortAndStoreCheckerInfo({}); // Zero the calculated data out.
+            this.analysisInfo.checkerInfoAvailable =
+              CheckerInfoAvailability.UnknownReason;
+
+            this.decideWhyCheckerStatusesUnavailable();
+          } else {
+            this.sortAndStoreCheckerInfo(checkerStatuses);
+            this.analysisInfo.checkerInfoAvailable =
+              CheckerInfoAvailability.Normal;
+          }
         }));
     }
   }
@@ -161,5 +488,15 @@ export default {
   .ctu, .statistics {
     background-color: rgba(0, 0, 142, 0.15);
   }
+
+  .analyzer-name {
+    font-size: 125%;
+    font-weight: bold;
+  }
+
+  .version, .top-level-command {
+    font-family: monospace;
+    font-size: smaller;
+  }
 }
 </style>
diff --git a/web/server/vue-cli/src/components/CountChips.vue b/web/server/vue-cli/src/components/CountChips.vue
new file mode 100644
index 0000000000..7210ebc7e3
--- /dev/null
+++ b/web/server/vue-cli/src/components/CountChips.vue
@@ -0,0 +1,129 @@
+<template>
+  <span
+    class="count-chips"
+  >
+    <component
+      :is="tag"
+      class="text-no-wrap"
+    >
+      <v-chip
+        v-if="showingGood"
+        color="success"
+        :ripple="false"
+        :title="goodText"
+        outlined
+        dark
+        small
+      >
+        <v-icon
+          start
+          class="mr-1"
+        >
+          mdi-check
+        </v-icon>
+        {{ numGood }}
+      </v-chip>
+
+      <v-divider
+        v-if="showDividers &&
+          ((showingGood && showingBad) || (showingGood && showingTotal))"
+        class="mx-2 d-inline"
+        inset
+        vertical
+      />
+
+      <v-chip
+        v-if="showingBad"
+        color="error"
+        :ripple="false"
+        :title="badText"
+        outlined
+        dark
+        small
+      >
+        <v-icon
+          start
+          class="mr-1"
+        >
+          mdi-close
+        </v-icon>
+        {{ numBad }}
+      </v-chip>
+
+      <v-divider
+        v-if="showDividers && showingBad && showingTotal"
+        class="mx-2 d-inline"
+        inset
+        vertical
+      />
+
+      <v-chip
+        v-if="showingTotal"
+        color="grey lighten-1"
+        :ripple="false"
+        :title="totalText"
+        elevated
+        small
+      >
+        <v-icon
+          start
+          class="mr-1"
+        >
+          mdi-sigma
+        </v-icon>
+        {{ numTotal }}
+      </v-chip>
+    </component>
+  </span>
+</template>
+
+<script>
+import { AnalyzerStatisticsIcon } from "@/components/Icons";
+
+export default {
+  name: "CountChips",
+  components: {
+    AnalyzerStatisticsIcon
+  },
+  props: {
+    tag: { type: String, default: "span" },
+    numGood: { type: Number, required: true },
+    numBad: { type: Number, default: 0 },
+    numTotal: { type: Number, default: 0 },
+    goodText: { type: String, default: "" },
+    badText: { type: String, default: "" },
+    totalText: { type: String, default: "" },
+    showDividers: { type: Boolean, default: true },
+    showZeroChips: { type: Boolean, default: false },
+    showTotal: { type: Boolean, default: false },
+    simplifyShowingIfAll: { type: Boolean, default: true }
+  },
+  computed: {
+    total() {
+      return (this.numTotal > 0
+        ? this.numTotal
+        : (this.numGood + this.numBad));
+    },
+    canSimplify() {
+      return this.simplifyShowingIfAll &&
+        (this.total === this.numGood || this.total === this.numBad);
+    },
+    needToShowBothGoodAndBad() {
+      return !this.canSimplify &&
+        (this.showZeroChips || (this.numGood > 0 && this.numBad > 0));
+    },
+    showingGood() {
+      return this.needToShowBothGoodAndBad || this.numGood > 0 ||
+        (this.canSimplify && this.total === this.numGood);
+    },
+    showingBad() {
+      return this.needToShowBothGoodAndBad || this.numBad > 0 ||
+        (this.simplifyShowingIfAll && this.total === this.numBad);
+    },
+    showingTotal() {
+      return this.showTotal && !this.canSimplify &&
+        (this.total > 0 || (this.total === 0 && this.showZeroChips));
+    }
+  }
+};
+</script>
diff --git a/web/server/vue-cli/src/components/Icons/AnalyzerStatisticsIcon.vue b/web/server/vue-cli/src/components/Icons/AnalyzerStatisticsIcon.vue
index 94520a58d8..0124c215f7 100644
--- a/web/server/vue-cli/src/components/Icons/AnalyzerStatisticsIcon.vue
+++ b/web/server/vue-cli/src/components/Icons/AnalyzerStatisticsIcon.vue
@@ -1,14 +1,14 @@
 <template>
   <v-icon
     v-if="value === 'successful'"
-    color="#587549"
+    class="analyzer-statistics-icon-successful"
   >
     mdi-check
   </v-icon>
 
   <v-icon
     v-else-if="value === 'failed'"
-    color="#964739"
+    class="analyzer-statistics-icon-failed"
   >
     mdi-close
   </v-icon>
@@ -22,3 +22,11 @@ export default {
   }
 };
 </script>
+<style lang="scss">
+.analyzer-statistics-icon-successful {
+  color: #587548 !important;
+}
+.analyzer-statistics-icon-failed {
+  color: #964739 !important;
+}
+</style>
diff --git a/web/server/vue-cli/src/components/Run/AnalyzerStatisticsDialog.vue b/web/server/vue-cli/src/components/Run/AnalyzerStatisticsDialog.vue
index 21bf1daf3c..8e77e0e96f 100644
--- a/web/server/vue-cli/src/components/Run/AnalyzerStatisticsDialog.vue
+++ b/web/server/vue-cli/src/components/Run/AnalyzerStatisticsDialog.vue
@@ -31,9 +31,9 @@
               :key="analyzer"
             >
               <v-expansion-panel-header
-                class="pa-0 px-1 primary--text"
+                class="pa-0 px-1 primary--text font-weight-bold"
               >
-                <b>{{ analyzer }}</b>
+                {{ analyzer }}
               </v-expansion-panel-header>
 
               <v-expansion-panel-content class="pa-1">
diff --git a/web/server/vue-cli/src/components/Run/ExpandedRun.vue b/web/server/vue-cli/src/components/Run/ExpandedRun.vue
index 930b4f8927..c3c8d06819 100644
--- a/web/server/vue-cli/src/components/Run/ExpandedRun.vue
+++ b/web/server/vue-cli/src/components/Run/ExpandedRun.vue
@@ -75,7 +75,8 @@
                   <v-divider class="mx-2 d-inline" inset vertical />
 
                   <analysis-info-btn
-                    @click.native="openAnalysisInfoDialog(null, history.id)"
+                    @click.native="openAnalysisInfoDialog(
+                      run.runId, history.id)"
                   />
 
                   <v-divider class="mx-2 d-inline" inset vertical />
diff --git a/web/server/vue-cli/src/components/index.js b/web/server/vue-cli/src/components/index.js
index 8ed1ff92a3..1448525ba0 100644
--- a/web/server/vue-cli/src/components/index.js
+++ b/web/server/vue-cli/src/components/index.js
@@ -1,9 +1,11 @@
 import AnalysisInfoDialog from "./AnalysisInfoDialog";
 import ConfirmDialog from "./ConfirmDialog";
 import CopyBtn from "./CopyBtn";
+import CountChips from "./CountChips";
 
 export {
   AnalysisInfoDialog,
   ConfirmDialog,
-  CopyBtn
+  CopyBtn,
+  CountChips
 };
diff --git a/web/server/vue-cli/src/mixins/index.js b/web/server/vue-cli/src/mixins/index.js
index 2574653c02..a4f36a22cd 100644
--- a/web/server/vue-cli/src/mixins/index.js
+++ b/web/server/vue-cli/src/mixins/index.js
@@ -6,6 +6,7 @@ import ReviewStatusMixin from "./review-status.mixin";
 import SeverityMixin from "./severity.mixin";
 import StrToColorMixin from "./str-to-color.mixin";
 import ToCSV from "./to-csv.mixin";
+import VersionMixin from "./version.mixin";
 
 export {
   BugPathLengthColorMixin,
@@ -15,5 +16,6 @@ export {
   ReviewStatusMixin,
   SeverityMixin,
   StrToColorMixin,
-  ToCSV
+  ToCSV,
+  VersionMixin
 };
diff --git a/web/server/vue-cli/src/mixins/version.mixin.js b/web/server/vue-cli/src/mixins/version.mixin.js
new file mode 100644
index 0000000000..8bffe8c4c8
--- /dev/null
+++ b/web/server/vue-cli/src/mixins/version.mixin.js
@@ -0,0 +1,18 @@
+import semver from "semver";
+
+export default {
+  data() {
+    return {};
+  },
+
+  methods: {
+    prettifyCCVersion(version) {
+      if (!version) return version;
+      return version.split(" ")[0];
+    },
+
+    isNewerOrEqualCCVersion(actual, expected) {
+      return semver.gte(semver.coerce(actual), semver.coerce(expected));
+    }
+  }
+};
diff --git a/web/server/vue-cli/src/views/RunList.vue b/web/server/vue-cli/src/views/RunList.vue
index 84168e999e..34969cf098 100644
--- a/web/server/vue-cli/src/views/RunList.vue
+++ b/web/server/vue-cli/src/views/RunList.vue
@@ -166,6 +166,8 @@ import {
   RunNameColumn
 } from "@/components/Run";
 
+import { VersionMixin } from "@/mixins";
+
 export default {
   name: "RunList",
   components: {
@@ -176,6 +178,7 @@ export default {
     RunNameColumn,
     RunFilterToolbar
   },
+  mixins: [ VersionMixin ],
 
   data() {
     const itemsPerPageOptions = [ 25, 50, 100 ];
@@ -532,12 +535,6 @@ export default {
       return "";
     },
 
-    prettifyCCVersion(version) {
-      if (!version) return version;
-
-      return version.split(" ")[0];
-    },
-
     getReportFilterQuery(run) {
       return {
         run: run.name
@@ -557,4 +554,4 @@ export default {
 .v-data-table ::v-deep tbody tr.v-data-table__expanded__content {
   box-shadow: none;
 }
-</style>
\ No newline at end of file
+</style>

From 3987127a5647cbf555857e8712f86aad1978c59a Mon Sep 17 00:00:00 2001
From: Whisperity <whisperity@gmail.com>
Date: Mon, 18 Mar 2024 13:29:07 +0100
Subject: [PATCH 2/2] refactor(gui): Factor out the obtaining of `AnalysisInfo`
 to a common helper

---
 .../src/components/AnalysisInfo/Checker.vue   |   4 +-
 .../components/AnalysisInfo/CheckerGroup.vue  |  23 +-
 .../components/AnalysisInfo/CheckerRows.vue   |   2 +-
 .../src/components/AnalysisInfoDialog.vue     | 476 ++++++------------
 .../mixins/analysis-info-handling.mixin.js    | 267 ++++++++++
 web/server/vue-cli/src/mixins/index.js        |   2 +
 .../vue-cli/src/mixins/version.mixin.js       |   4 -
 7 files changed, 435 insertions(+), 343 deletions(-)
 create mode 100644 web/server/vue-cli/src/mixins/analysis-info-handling.mixin.js

diff --git a/web/server/vue-cli/src/components/AnalysisInfo/Checker.vue b/web/server/vue-cli/src/components/AnalysisInfo/Checker.vue
index 185460b482..0d356a0f27 100644
--- a/web/server/vue-cli/src/components/AnalysisInfo/Checker.vue
+++ b/web/server/vue-cli/src/components/AnalysisInfo/Checker.vue
@@ -31,8 +31,8 @@ export default {
     AnalyzerStatisticsIcon
   },
   props: {
-    enabled: { type: Boolean, required: true },
-    name: { type: String, required: true }
+    name: { type: String, required: true },
+    enabled: { type: Boolean, required: true }
   }
 };
 </script>
diff --git a/web/server/vue-cli/src/components/AnalysisInfo/CheckerGroup.vue b/web/server/vue-cli/src/components/AnalysisInfo/CheckerGroup.vue
index 7ceaa19f23..18eba8a74a 100644
--- a/web/server/vue-cli/src/components/AnalysisInfo/CheckerGroup.vue
+++ b/web/server/vue-cli/src/components/AnalysisInfo/CheckerGroup.vue
@@ -50,9 +50,9 @@
         <v-col cols="auto">
           <count-chips
             v-if="needDetailedCounts"
-            :num-good="counts[0]"
-            :num-bad="counts[1]"
-            :num-total="counts[2]"
+            :num-good="counts[CountKeys.Enabled]"
+            :num-bad="counts[CountKeys.Disabled]"
+            :num-total="counts[CountKeys.Total]"
             :good-text="'Number of checkers enabled (executed)'"
             :bad-text="'Number of checkers disabled (not executed)'"
             :total-text="'Number of checkers available'"
@@ -76,6 +76,7 @@
 <script>
 import CountChips from "@/components/CountChips";
 import CheckerRows from "./CheckerRows";
+import { CountKeys } from "@/mixins/analysis-info-handling.mixin";
 
 export default {
   name: "CheckerGroup",
@@ -89,22 +90,32 @@ export default {
     counts: { type: Array, required: true }
   },
   computed: {
+    numEnabled() {
+      return this.counts[this.CountKeys.Enabled];
+    },
+    numDisabled() {
+      return this.counts[this.CountKeys.Disabled];
+    },
     needDetailedCounts() {
-      return this.counts[0] > 0 && this.counts[1] > 0;
+      return this.numEnabled > 0 && this.numDisabled > 0;
     },
     groupWideStatus() {
-      if (this.counts[0] > 0 && this.counts[1] === 0)
+      if (this.numEnabled > 0 && this.numDisabled === 0)
         return "success";
-      if (this.counts[0] === 0 && this.counts[1] > 0)
+      if (this.numEnabled === 0 && this.numDisabled > 0)
         return "error";
       return "grey darken-1";
     },
     groupEnabled() {
       return this.groupWideStatus === "success";
+    },
+    CountKeys() {
+      return CountKeys;
     }
   }
 };
 </script>
+
 <style lang="scss" scoped>
 .analysis-info .checker-group-name {
   font-family: monospace;
diff --git a/web/server/vue-cli/src/components/AnalysisInfo/CheckerRows.vue b/web/server/vue-cli/src/components/AnalysisInfo/CheckerRows.vue
index ee3d579b61..216e9517a6 100644
--- a/web/server/vue-cli/src/components/AnalysisInfo/CheckerRows.vue
+++ b/web/server/vue-cli/src/components/AnalysisInfo/CheckerRows.vue
@@ -6,7 +6,7 @@
       v-for="(checker, idx) in checkers"
       :key="idx"
       :name="checker[0]"
-      :enabled="checker[1]"
+      :enabled="checker[1].enabled"
     />
   </v-container>
 </template>
diff --git a/web/server/vue-cli/src/components/AnalysisInfoDialog.vue b/web/server/vue-cli/src/components/AnalysisInfoDialog.vue
index 7daa49c17c..b1555e5b65 100644
--- a/web/server/vue-cli/src/components/AnalysisInfoDialog.vue
+++ b/web/server/vue-cli/src/components/AnalysisInfoDialog.vue
@@ -23,7 +23,7 @@
         <v-container class="pa-0 pt-2">
           <!-- eslint-disable vue/no-v-html -->
           <div
-            v-for="cmd in analysisInfo.cmds"
+            v-for="cmd in highlightedCmds"
             :key="cmd"
             class="analysis-info mb-2"
             v-html="cmd"
@@ -31,127 +31,137 @@
         </v-container>
 
         <div
-          v-if="analysisInfo.checkerInfoAvailable ===
-            CheckerInfoAvailability.Normal"
+          v-if="postProcessedAnalysisInfoReady"
         >
-          <v-container class="pa-0 pt-1">
-            <v-expansion-panels
-              multiple
-              hover
-            >
-              <v-expansion-panel
-                v-for="analyzer in analysisInfo.analyzers"
-                :key="analyzer"
+          <div
+            v-if="analysisInfo.checkerInfoAvailability ===
+              CheckerInfoAvailability.Available"
+          >
+            <v-container class="pa-0 pt-1">
+              <v-expansion-panels
+                multiple
+                hover
               >
-                <v-expansion-panel-header
-                  class="pa-0 px-1"
+                <v-expansion-panel
+                  v-for="analyzer in analysisInfo.analyzers"
+                  :key="analyzer"
                 >
-                  <v-row
-                    no-gutters
-                    align="center"
+                  <v-expansion-panel-header
+                    class="pa-0 px-1"
                   >
-                    <v-col
-                      cols="auto"
-                      class="pa-1 analyzer-name primary--text"
+                    <v-row
+                      no-gutters
+                      align="center"
                     >
-                      {{ analyzer }}
-                    </v-col>
-                    <v-col cols="auto">
-                      <count-chips
-                        class="pl-2"
-                        :num-good="analysisInfo.counts[analyzer]
-                          [GroupMeta.AnalyzerTotal][CountMeta.Enabled]"
-                        :num-bad="analysisInfo.counts[analyzer]
-                          [GroupMeta.AnalyzerTotal][CountMeta.Disabled]"
-                        :num-total="analysisInfo.counts[analyzer]
-                          [GroupMeta.AnalyzerTotal][CountMeta.Total]"
-                        :good-text="'Number of checkers enabled (executed)'"
-                        :bad-text="'Number of checkers disabled' +
-                          '(not executed)'"
-                        :total-text="'Number of checkers available'"
-                        :simplify-showing-if-all="true"
-                        :show-total="true"
-                        :show-dividers="false"
-                        :show-zero-chips="false"
-                      />
-                    </v-col>
-                  </v-row>
-                </v-expansion-panel-header>
-
-                <v-expansion-panel-content
-                  class="pa-1"
-                >
-                  <template
-                    v-for="(checkers, group) in
-                      analysisInfo.checkers[analyzer]"
+                      <v-col
+                        cols="auto"
+                        class="pa-1 analyzer-name primary--text"
+                      >
+                        {{ analyzer }}
+                      </v-col>
+                      <v-col cols="auto">
+                        <count-chips
+                          class="pl-2"
+                          :num-good="analysisInfo.checkerGroupCounts[analyzer]
+                            [GroupKeys.AnalyzerTotal]
+                            [CountKeys.Enabled]"
+                          :num-bad="analysisInfo.checkerGroupCounts[analyzer]
+                            [GroupKeys.AnalyzerTotal]
+                            [CountKeys.Disabled]"
+                          :num-total="analysisInfo.checkerGroupCounts[analyzer]
+                            [GroupKeys.AnalyzerTotal]
+                            [CountKeys.Total]"
+                          :good-text="'Number of checkers enabled (executed)'"
+                          :bad-text="'Number of checkers disabled' +
+                            '(not executed)'"
+                          :total-text="'Number of checkers available'"
+                          :simplify-showing-if-all="true"
+                          :show-total="true"
+                          :show-dividers="false"
+                          :show-zero-chips="false"
+                        />
+                      </v-col>
+                    </v-row>
+                  </v-expansion-panel-header>
+
+                  <v-expansion-panel-content
+                    class="pa-1"
                   >
-                    <checker-group
-                      v-if="group !== GroupMeta.NoGroup"
-                      :key="group"
-                      :group="group"
-                      :checkers="checkers"
-                      :counts="analysisInfo.counts[analyzer][group]"
-                    />
-                    <checker-rows
-                      v-else
-                      :key="group"
-                      :checkers="checkers"
-                    />
-                  </template>
-                </v-expansion-panel-content>
-              </v-expansion-panel>
-            </v-expansion-panels>
-          </v-container>
-        </div>
-        <div
-          v-else
-        >
-          <v-alert
-            icon="mdi-alert"
-            class="mt-2"
-            color="deep-orange"
-            outlined
+                    <template
+                      v-for="(checkers, group) in
+                        analysisInfo.checkersGroupedAndSorted[analyzer]"
+                    >
+                      <checker-group
+                        v-if="group !== GroupKeys.NoGroup"
+                        :key="group"
+                        :group="group"
+                        :checkers="checkers"
+                        :counts="
+                          analysisInfo.checkerGroupCounts[analyzer][group]"
+                      />
+                      <checker-rows
+                        v-else
+                        :key="group"
+                        :checkers="checkers"
+                      />
+                    </template>
+                  </v-expansion-panel-content>
+                </v-expansion-panel>
+              </v-expansion-panels>
+            </v-container>
+          </div>
+          <div
+            v-else
           >
-            <span
-              v-if="analysisInfo.checkerInfoAvailable ===
-                CheckerInfoAvailability.UnknownReason"
+            <v-alert
+              icon="mdi-alert"
+              class="mt-2"
+              color="deep-orange"
+              outlined
             >
-              The list of checkers executed during the analysis is not
-              available!<br>
-              This is likely caused by storing a run from a report directory
-              which was not created natively by
-              <span class="top-level-command">CodeChecker analyze</span>.
-              Using the
               <span
-                class="top-level-command font-italic"
-              >report-converter</span>
-              on the results of third-party analysers can cause this, as it
-              prevents CodeChecker from knowing about the analysis
-              configuration.
-            </span>
-            <span
-              v-else-if="analysisInfo.checkerInfoAvailable ===
-                CheckerInfoAvailability.VersionTooLow"
-            >
-              The list of checkers executed during the analysis is only
-              available from CodeChecker version
-              <span class="version font-weight-bold">6.24</span>.<br>
-              The analysis was executed using an older,
-              <span class="version">{{
-                analysisInfo.codeCheckerVersion
-              }}</span>
-              client, and it was also <span class="font-italic">likely</span>
-              stored when the server ran this older version.
-            </span>
-            <span
-              v-else-if="analysisInfo.checkerInfoAvailable ===
-                CheckerInfoAvailability.ReportIdToAnalysisInfoNotTrivialOverAPI"
-            >
-              The list of checkers executed during the analysis that produced
-              this <span class="font-italic">Report</span> is not
-              available!<br>
-            </span>
-          </v-alert>
+                v-if="analysisInfo.checkerInfoAvailability ===
+                  CheckerInfoAvailability.UnknownReason"
+              >
+                The list of checkers executed during the analysis is not
+                available!<br>
+                This is likely caused by storing a run from a report directory
+                which was not created natively by
+                <span class="top-level-command">CodeChecker analyze</span>.
+                Using the
+                <span
+                  class="top-level-command font-italic"
+                >report-converter</span>
+                on the results of third-party analysers can cause this, as it
+                prevents CodeChecker from knowing about the analysis
+                configuration.
+              </span>
+              <span
+                v-else-if="analysisInfo.checkerInfoAvailability ===
+                  CheckerInfoAvailability.
+                    RunHistoryStoredWithOldVersionPre_v6_24"
+              >
+                The list of checkers executed during the analysis is only
+                available from CodeChecker version
+                <span class="version font-weight-bold">6.24</span>.<br>
+                The analysis was executed using an older,
+                <span class="version">{{
+                  analysisInfo.codeCheckerVersion
+                }}</span>
+                client, and it was also <span class="font-italic">likely</span>
+                stored when the server ran this older version.
+              </span>
+              <span
+                v-else-if="analysisInfo.checkerInfoAvailability ===
+                  CheckerInfoAvailability.
+                    ReportIdToAnalysisInfoIdQueryNontrivialOverAPI"
+              >
+                The list of checkers executed during the analysis that produced
+                this <span class="font-italic">Report</span> is not
+                available!<br>
+              </span>
+            </v-alert>
+          </div>
         </div>
       </v-card-text>
     </v-card>
@@ -164,23 +174,12 @@ import {
   CheckerRows
 } from "@/components/AnalysisInfo";
 import CountChips from "@/components/CountChips";
-import { ccService, handleThriftError } from "@cc-api";
 import {
-  AnalysisInfoFilter,
-  RunFilter,
-  RunHistoryFilter
-} from "@cc/report-server-types";
-import { VersionMixin } from "@/mixins";
-
-const GroupMeta = Object.freeze({ NoGroup: "__N", AnalyzerTotal: "__S" });
-const CountMeta = Object.freeze({ Enabled: 0, Disabled: 1, Total: 2 });
-const CheckerInfoAvailability = Object.freeze({
-  Normal: 0,
-  Unloaded: 1,
-  UnknownReason: 2,
-  VersionTooLow: 3,
-  ReportIdToAnalysisInfoNotTrivialOverAPI: 4
-});
+  default as AnalysisInfoHandlingMixin,
+  CheckerInfoAvailability,
+  CountKeys,
+  GroupKeys
+} from "@/mixins/analysis-info-handling.mixin";
 
 export default {
   name: "AnalysisInfoDialog",
@@ -189,7 +188,7 @@ export default {
     CheckerRows,
     CountChips
   },
-  mixins: [ VersionMixin ],
+  mixins: [ AnalysisInfoHandlingMixin ],
   props: {
     value: { type: Boolean, default: false },
     runId: { type: Object, default: () => null },
@@ -199,16 +198,11 @@ export default {
 
   data() {
     return {
-      analysisInfo: {
-        cmds: [],
-        analyzers: [],
-        checkerInfoAvailable: CheckerInfoAvailability.Unloaded,
-        codeCheckerVersion: "0",
-        checkers: {},
-        checkerCounts: {},
-      },
+      postProcessedAnalysisInfoReady: false,
+      analysisInfo: null,
+      highlightedCmds: [],
       enabledCheckerRgx: new RegExp("^(--enable|-e[= ]*)", "i"),
-      disabledCheckerRgx: new RegExp("^(--disable|-d[= ]*)", "i")
+      disabledCheckerRgx: new RegExp("^(--disable|-d[= ]*)", "i"),
     };
   },
 
@@ -221,15 +215,9 @@ export default {
         this.$emit("update:value", val);
       }
     },
-    GroupMeta() {
-      return GroupMeta;
-    },
-    CountMeta() {
-      return CountMeta;
-    },
-    CheckerInfoAvailability() {
-      return CheckerInfoAvailability;
-    }
+    CheckerInfoAvailability() { return CheckerInfoAvailability; },
+    CountKeys() { return CountKeys; },
+    GroupKeys() { return GroupKeys; },
   },
 
   watch: {
@@ -270,196 +258,24 @@ export default {
       }).join(" ").replace(/(?:\r\n|\r|\n)/g, "<br>");
     },
 
-    getTopLevelCheckGroup(analyzerName, checkerName) {
-      const clangTidyClangDiagnostic = checkerName.split("clang-diagnostic-");
-      if (clangTidyClangDiagnostic.length > 1 &&
-        clangTidyClangDiagnostic[0] === "")
-      {
-        // Unfortunately, this is historically special...
-        return "clang-diagnostic";
-      }
-
-      const splitDot = checkerName.split(".");
-      if (splitDot.length > 1) {
-        return splitDot[0];
-      }
-
-      const splitHyphen = checkerName.split("-");
-      if (splitHyphen.length > 1) {
-        if (splitHyphen[0] === analyzerName) {
-          // cppcheck-PointerSize -> <NoGroup>
-          // gcc-fd-leak          -> "fd"
-          return splitHyphen.length >= 3 ? splitHyphen[1] : GroupMeta.NoGroup;
-        }
-        // bugprone-easily-swappable-parameters -> "bugprone"
-        return splitHyphen[0];
-      }
-
-      return GroupMeta.NoGroup;
-    },
-
-    reduceCheckerStatuses(accumulator, newInfo) {
-      for (const [ analyzer, checkers ] of Object.entries(newInfo)) {
-        if (!accumulator[analyzer]) {
-          accumulator[analyzer] = {};
-          accumulator[analyzer][GroupMeta.NoGroup] = {};
-        }
-        for (const [ checker, checkerInfo ] of Object.entries(checkers)) {
-          const group = this.getTopLevelCheckGroup(analyzer, checker);
-          if (!accumulator[analyzer][group]) {
-            accumulator[analyzer][group] = {};
-          }
-          accumulator[analyzer][group][checker] =
-            accumulator[analyzer][group][checker] || checkerInfo.enabled;
-        }
-      }
-
-      return accumulator;
-    },
-
-    sortAndStoreCheckerInfo(checkerStatuses) {
-      this.analysisInfo.analyzers = Object.keys(checkerStatuses).sort();
-      this.analysisInfo.checkers =
-        Object.fromEntries(Object.keys(checkerStatuses).map(
-          analyzer => [ analyzer,
-            Object.fromEntries(
-              Object.keys(checkerStatuses[analyzer]).sort().map(
-                group => [ group,
-                  Object.keys(checkerStatuses[analyzer][group]).sort().map(
-                    checker => [ checker,
-                      checkerStatuses[analyzer][group][checker]
-                    ])
-                ])
-            )
-          ]));
-
-      this.analysisInfo.counts =
-        Object.fromEntries(Object.keys(checkerStatuses).map(
-          analyzer => [ analyzer,
-            Object.fromEntries(
-              Object.keys(checkerStatuses[analyzer]).map(
-                group => [ group,
-                  [
-                    // [0]: #[Enabled checkers]
-                    Object.keys(checkerStatuses[analyzer][group])
-                      .map(checker =>
-                        checkerStatuses[analyzer][group][checker] ? 1 : 0)
-                      .reduce((a, b) => a + b, 0),
-                    // [1]: #[Disabled checkers] (Note: will be updated later)
-                    -1,
-                    // [2]: #[Total checkers]
-                    Object.keys(checkerStatuses[analyzer][group]).length
-                  ]
-                ]))
-          ]));
-      const counts = this.analysisInfo.counts;
-      Object.keys(counts).map(
-        analyzer => Object.keys(counts[analyzer]).map(
-          group => {
-            counts[analyzer][group][CountMeta.Disabled] =
-              counts[analyzer][group][CountMeta.Total] -
-              counts[analyzer][group][CountMeta.Enabled];
-          }));
-      Object.keys(counts).map(
-        analyzer => {
-          const sum = Object.values(counts[analyzer])
-            .reduce((as, bs) => [
-              as[CountMeta.Enabled]  + bs[CountMeta.Enabled],
-              as[CountMeta.Disabled] + bs[CountMeta.Disabled],
-              as[CountMeta.Total]    + bs[CountMeta.Total],
-            ]);
-          counts[analyzer][GroupMeta.AnalyzerTotal] = sum;
-        });
-    },
-
-    checkerStatusUnavailableDueToVersion(version) {
-      const normalized = this.prettifyCCVersion(version);
-      if (!normalized) return false;
-      this.analysisInfo.codeCheckerVersion = normalized;
-
-      if (this.isNewerOrEqualCCVersion(normalized, "6.24")) return false;
-      this.analysisInfo.checkerInfoAvailable =
-        CheckerInfoAvailability.VersionTooLow;
-      return true;
-    },
-
-    decideWhyCheckerStatusesUnavailable() {
-      if (!this.runId && !this.runHistoryId && !this.reportId) {
-        return;
-      }
-
-      if (this.runId && !this.runHistoryId) {
-        const filter = new RunFilter({
-          ids: [ this.runId ]
-        });
-        ccService.getClient().getRunData(filter, null, null, null,
-          handleThriftError(runDataList => {
-            if (runDataList.length !== 1) return;
-            this.checkerStatusUnavailableDueToVersion(
-              runDataList[0].codeCheckerVersion);
-          }));
-      } else if (this.runId && this.runHistoryId) {
-        const filter = new RunHistoryFilter({
-          tagNames: [],
-          tagIds: [ this.runHistoryId ]
-        });
-        ccService.getClient().getRunHistory([ this.runId ], 1, 0, filter,
-          handleThriftError(runHistoryDataList => {
-            if (runHistoryDataList.length !== 1) return;
-            this.checkerStatusUnavailableDueToVersion(
-              runHistoryDataList[0].codeCheckerVersion);
-          }));
-      } else if (this.reportId) {
-        this.analysisInfo.checkerInfoAvailable = CheckerInfoAvailability.
-          ReportIdToAnalysisInfoNotTrivialOverAPI;
-      }
-
-      if (this.analysisInfo.checkerInfoAvailable !==
-        CheckerInfoAvailability.UnknownReason) {
-        // It was decided that the version is the reason.
-        return;
-      }
-    },
-
-    getAnalysisInfo() {
+    async getAnalysisInfo() {
       if (
         !this.dialog ||
         (!this.runId && !this.runHistoryId && !this.reportId)
       ) {
         return;
       }
+      this.postProcessedAnalysisInfoReady = false;
+      this.analysisInfo = null;
 
-      const analysisInfoFilter = new AnalysisInfoFilter({
-        // Query a run's analysis info only if a run history ID is not explicit.
-        runId: (!this.runHistoryId ? this.runId : null),
-        runHistoryId: this.runHistoryId,
-        reportId: this.reportId,
-      });
-
-      this.analysisInfo.checkerInfoAvailable =
-        CheckerInfoAvailability.Unloaded;
-
-      const limit = null;
-      const offset = 0;
-      ccService.getClient().getAnalysisInfo(analysisInfoFilter, limit,
-        offset, handleThriftError(analysisInfo => {
-          this.analysisInfo.cmds = analysisInfo.map(ai =>
-            this.highlightOptions(ai.analyzerCommand));
-
-          const checkerStatuses = analysisInfo.map(ai => ai.checkers).
-            reduce(this.reduceCheckerStatuses, {});
-          if (!Object.keys(checkerStatuses).length) {
-            this.sortAndStoreCheckerInfo({}); // Zero the calculated data out.
-            this.analysisInfo.checkerInfoAvailable =
-              CheckerInfoAvailability.UnknownReason;
+      var analysisInfo = await this.loadAnalysisInfo(
+        this.runId, this.runHistoryId, this.reportId);
+      this.highlightedCmds = analysisInfo.cmds.map(cmd =>
+        this.highlightOptions(cmd));
+      analysisInfo.groupAndCountCheckers();
 
-            this.decideWhyCheckerStatusesUnavailable();
-          } else {
-            this.sortAndStoreCheckerInfo(checkerStatuses);
-            this.analysisInfo.checkerInfoAvailable =
-              CheckerInfoAvailability.Normal;
-          }
-        }));
+      this.analysisInfo = analysisInfo;
+      this.postProcessedAnalysisInfoReady = true;
     }
   }
 };
diff --git a/web/server/vue-cli/src/mixins/analysis-info-handling.mixin.js b/web/server/vue-cli/src/mixins/analysis-info-handling.mixin.js
new file mode 100644
index 0000000000..9d71f1bba8
--- /dev/null
+++ b/web/server/vue-cli/src/mixins/analysis-info-handling.mixin.js
@@ -0,0 +1,267 @@
+import { ccService, handleThriftError } from "@cc-api";
+import {
+  AnalysisInfoFilter,
+  RunFilter,
+  RunHistoryFilter
+} from "@cc/report-server-types";
+import VersionMixin from "./version.mixin";
+
+const GroupKeys = Object.freeze({
+  NoGroup: "__N",
+  AnalyzerTotal: "__S"
+});
+
+const CountKeys = Object.freeze({
+  Enabled: 0,
+  Disabled: 1,
+  Total: 2
+});
+
+const CheckerInfoAvailability = Object.freeze({
+  Available: 0,
+  Unloaded: 1,
+  UnknownReason: 2,
+  RunHistoryStoredWithOldVersionPre_v6_24: 3,
+  ReportIdToAnalysisInfoIdQueryNontrivialOverAPI: 4,
+});
+
+function decideNegativeCheckerStatusAvailability(
+  analysisInfo, runId, runHistoryId, reportId) {
+  if (
+    (analysisInfo.checkerInfoAvailability !==
+      CheckerInfoAvailability.UnknownReason) ||
+    (!runId && !runHistoryId && !reportId)
+  ) {
+    return;
+  }
+
+  if (runId && !runHistoryId) {
+    const filter = new RunFilter({
+      ids: [ runId ]
+    });
+    ccService.getClient().getRunData(filter, null, null, null,
+      handleThriftError(runDataList => {
+        if (runDataList.length !== 1) return;
+
+        setCheckerStatusUnavailableDueToVersion(
+          analysisInfo,
+          runDataList[0].codeCheckerVersion);
+      }));
+  } else if (runId && runHistoryId) {
+    const filter = new RunHistoryFilter({
+      tagNames: [],
+      tagIds: [ runHistoryId ]
+    });
+    ccService.getClient().getRunHistory([ runId ], 1, 0,
+      filter, handleThriftError(runHistoryDataList => {
+        if (runHistoryDataList.length !== 1) return;
+
+        setCheckerStatusUnavailableDueToVersion(
+          analysisInfo,
+          runHistoryDataList[0].codeCheckerVersion);
+      }));
+  } else if (reportId) {
+    analysisInfo.checkerInfoAvailability = CheckerInfoAvailability.
+      ReportIdToAnalysisInfoIdQueryNontrivialOverAPI;
+  }
+}
+
+function setCheckerStatusUnavailableDueToVersion(analysisInfo, ccVersion) {
+  ccVersion = VersionMixin.methods.prettifyCCVersion(ccVersion);
+  if (!ccVersion) return false;
+  analysisInfo.codeCheckerVersion = ccVersion;
+
+  if (VersionMixin.methods.isNewerOrEqualCCVersion(ccVersion, "6.24")) {
+    return false;
+  }
+  analysisInfo.checkerInfoAvailability =
+    CheckerInfoAvailability.RunHistoryStoredWithOldVersionPre_v6_24;
+  return true;
+}
+
+function getTopLevelCheckGroup(analyzerName, checkerName) {
+  const clangTidyClangDiagnostic = checkerName.split("clang-diagnostic-");
+  if (
+    clangTidyClangDiagnostic.length > 1 && clangTidyClangDiagnostic[0] === ""
+  ) {
+    // Unfortunately, this is historically special...
+    return "clang-diagnostic";
+  }
+
+  const splitDot = checkerName.split(".");
+  if (splitDot.length > 1) {
+    return splitDot[0];
+  }
+
+  const splitHyphen = checkerName.split("-");
+  if (splitHyphen.length > 1) {
+    if (splitHyphen[0] === analyzerName) {
+      // cppcheck-PointerSize -> <NoGroup>
+      // gcc-fd-leak          -> "fd"
+      return splitHyphen.length >= 3 ? splitHyphen[1] : GroupKeys.NoGroup;
+    }
+    // bugprone-easily-swappable-parameters -> "bugprone"
+    return splitHyphen[0];
+  }
+
+  return GroupKeys.NoGroup;
+}
+
+function mergeReduceCheckerStatuses(accumulator, inCheckerDict) {
+  for (const [ analyzer, checkerList ] of Object.entries(inCheckerDict)) {
+    if (!accumulator[analyzer]) {
+      accumulator[analyzer] = {};
+    }
+
+    for (const [ checkerName, checkerInfo ] of Object.entries(checkerList)) {
+      if (!accumulator[analyzer][checkerName]) {
+        accumulator[analyzer][checkerName] = {
+          enabled: false
+        };
+      }
+
+      accumulator[analyzer][checkerName].enabled =
+        accumulator[analyzer][checkerName].enabled || checkerInfo.enabled;
+    }
+  }
+
+  return accumulator;
+}
+
+class AnalysisInfo {
+  constructor() {
+    this.cmds = [];
+    this.checkers = {};
+
+    this.codeCheckerVersion = "0";
+    this.checkerInfoAvailability = CheckerInfoAvailability.Unloaded;
+    this.analyzers = [];
+    this.checkersGroupedAndSorted = {};
+    this.checkerGroupCounts = {};
+  }
+
+  populateAnalyzers() {
+    this.analyzers = Object.keys(this.checkers).sort();
+  }
+
+  groupAndCountCheckers() {
+    if (Object.keys(this.checkersGroupedAndSorted).length) {
+      return this.checkersGroupedAndSorted;
+    }
+
+    var checkersGrouped = {};
+    for (const [ analyzer, checkerList ] of Object.entries(this.checkers)) {
+      if (!checkersGrouped[analyzer]) {
+        checkersGrouped[analyzer] = {};
+      }
+
+      for (const [ checkerName, checkerInfo ] of Object.entries(checkerList)) {
+        const groupForChecker = getTopLevelCheckGroup(analyzer, checkerName);
+        if (!checkersGrouped[analyzer][groupForChecker]) {
+          checkersGrouped[analyzer][groupForChecker] = {};
+        }
+
+        checkersGrouped[analyzer][groupForChecker][checkerName] = checkerInfo;
+      }
+    }
+
+    this.checkersGroupedAndSorted = Object.fromEntries(this.analyzers.map(
+      analyzer => [ analyzer,
+        Object.fromEntries(
+          Object.keys(checkersGrouped[analyzer]).sort().map(
+            group => [ group,
+              Object.keys(checkersGrouped[analyzer][group]).sort().map(
+                checkerName => [ checkerName,
+                  checkersGrouped[analyzer][group][checkerName]
+                ])
+            ])
+        )
+      ]));
+
+    this.checkerGroupCounts = Object.fromEntries(this.analyzers.map(
+      analyzer => [ analyzer,
+        Object.fromEntries(
+          Object.keys(this.checkersGroupedAndSorted[analyzer]).map(
+            group => [ group, [
+              // [CountKeys.Enabled]:
+              Object.keys(this.checkersGroupedAndSorted[analyzer][group])
+                .map(checker =>
+                  this.checkersGroupedAndSorted[analyzer][group][checker][1]
+                    .enabled ? 1 : 0)
+                .reduce((a, b) => a + b, 0),
+              /* [CountKeys.Disabled]: */ -1, // Will be updated later!
+              // [CountKeys.Total]:
+              Object.keys(
+                this.checkersGroupedAndSorted[analyzer][group]
+              ).length
+            ]
+            ]))
+      ]));
+    Object.keys(this.checkerGroupCounts).map(analyzer =>
+      Object.keys(this.checkerGroupCounts[analyzer]).map(group => {
+        this.checkerGroupCounts[analyzer][group][CountKeys.Disabled] =
+          this.checkerGroupCounts[analyzer][group][CountKeys.Total] -
+          this.checkerGroupCounts[analyzer][group][CountKeys.Enabled];
+      }));
+    Object.keys(this.checkerGroupCounts).map(analyzer => {
+      const sum = Object.values(this.checkerGroupCounts[analyzer])
+        .reduce((as, bs) => [
+          as[CountKeys.Enabled]  + bs[CountKeys.Enabled],
+          as[CountKeys.Disabled] + bs[CountKeys.Disabled],
+          as[CountKeys.Total]    + bs[CountKeys.Total]
+        ]);
+      this.checkerGroupCounts[analyzer][GroupKeys.AnalyzerTotal] = sum;
+    });
+
+    return this.checkersGroupedAndSorted;
+  }
+}
+
+const AnalysisInfoHandlingMixin = {
+  methods: {
+    loadAnalysisInfo(runId, runHistoryId, reportId) {
+      const analysisInfoFilter = new AnalysisInfoFilter({
+        // Query a run's analysis info only if a run history ID is not explicit.
+        runId: (!runHistoryId ? runId : null),
+
+        runHistoryId: runHistoryId,
+        reportId: reportId
+      });
+      const limit = null;
+      const offset = 0;
+
+      return new Promise(resolve => {
+        ccService.getClient()
+          .getAnalysisInfo(analysisInfoFilter, limit, offset,
+            handleThriftError(aiResult => {
+              var analysisInfo = new AnalysisInfo();
+              analysisInfo.cmds = aiResult.map(r => r.analyzerCommand);
+              analysisInfo.checkers = aiResult.map(r => r.checkers)
+                .reduce(mergeReduceCheckerStatuses, {});
+
+              if (Object.keys(analysisInfo.checkers).length) {
+                analysisInfo.checkerInfoAvailability =
+                  CheckerInfoAvailability.Available;
+              } else {
+                analysisInfo.checkerInfoAvailability =
+                  CheckerInfoAvailability.UnknownReason;
+                decideNegativeCheckerStatusAvailability(
+                  analysisInfo, runId, runHistoryId, reportId);
+              }
+
+              analysisInfo.populateAnalyzers();
+
+              resolve(analysisInfo);
+            }));
+      });
+    },
+  },
+};
+
+export {
+  AnalysisInfo,
+  AnalysisInfoHandlingMixin as default,
+  CheckerInfoAvailability,
+  CountKeys,
+  GroupKeys,
+};
diff --git a/web/server/vue-cli/src/mixins/index.js b/web/server/vue-cli/src/mixins/index.js
index a4f36a22cd..0a888bfe07 100644
--- a/web/server/vue-cli/src/mixins/index.js
+++ b/web/server/vue-cli/src/mixins/index.js
@@ -1,3 +1,4 @@
+import AnalysisInfoHandlingMixin from "./analysis-info-handling.mixin";
 import BugPathLengthColorMixin from "./bug-path-length-color.mixin";
 import ConfidentialityMixin from "./confidentiality.mixin";
 import DateMixin from "./date.mixin";
@@ -9,6 +10,7 @@ import ToCSV from "./to-csv.mixin";
 import VersionMixin from "./version.mixin";
 
 export {
+  AnalysisInfoHandlingMixin,
   BugPathLengthColorMixin,
   ConfidentialityMixin,
   DateMixin,
diff --git a/web/server/vue-cli/src/mixins/version.mixin.js b/web/server/vue-cli/src/mixins/version.mixin.js
index 8bffe8c4c8..3a308cc629 100644
--- a/web/server/vue-cli/src/mixins/version.mixin.js
+++ b/web/server/vue-cli/src/mixins/version.mixin.js
@@ -1,10 +1,6 @@
 import semver from "semver";
 
 export default {
-  data() {
-    return {};
-  },
-
   methods: {
     prettifyCCVersion(version) {
       if (!version) return version;