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..0d356a0f27
--- /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: {
+    name: { type: String, required: true },
+    enabled: { type: Boolean, 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..18eba8a74a
--- /dev/null
+++ b/web/server/vue-cli/src/components/AnalysisInfo/CheckerGroup.vue
@@ -0,0 +1,126 @@
+<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[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'"
+            :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";
+import { CountKeys } from "@/mixins/analysis-info-handling.mixin";
+
+export default {
+  name: "CheckerGroup",
+  components: {
+    CheckerRows,
+    CountChips,
+  },
+  props: {
+    group: { type: String, required: true },
+    checkers: { type: Array, required: true },
+    counts: { type: Array, required: true }
+  },
+  computed: {
+    numEnabled() {
+      return this.counts[this.CountKeys.Enabled];
+    },
+    numDisabled() {
+      return this.counts[this.CountKeys.Disabled];
+    },
+    needDetailedCounts() {
+      return this.numEnabled > 0 && this.numDisabled > 0;
+    },
+    groupWideStatus() {
+      if (this.numEnabled > 0 && this.numDisabled === 0)
+        return "success";
+      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;
+  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..216e9517a6
--- /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].enabled"
+    />
+  </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..b1555e5b65 100644
--- a/web/server/vue-cli/src/components/AnalysisInfoDialog.vue
+++ b/web/server/vue-cli/src/components/AnalysisInfoDialog.vue
@@ -18,27 +18,177 @@
           <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 highlightedCmds"
             :key="cmd"
             class="analysis-info mb-2"
             v-html="cmd"
           />
         </v-container>
+
+        <div
+          v-if="postProcessedAnalysisInfoReady"
+        >
+          <div
+            v-if="analysisInfo.checkerInfoAvailability ===
+              CheckerInfoAvailability.Available"
+          >
+            <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.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"
+                  >
+                    <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
+          >
+            <v-alert
+              icon="mdi-alert"
+              class="mt-2"
+              color="deep-orange"
+              outlined
+            >
+              <span
+                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>
   </v-dialog>
 </template>
 
 <script>
-import { ccService, handleThriftError } from "@cc-api";
-import { AnalysisInfoFilter } from "@cc/report-server-types";
+import {
+  CheckerGroup,
+  CheckerRows
+} from "@/components/AnalysisInfo";
+import CountChips from "@/components/CountChips";
+import {
+  default as AnalysisInfoHandlingMixin,
+  CheckerInfoAvailability,
+  CountKeys,
+  GroupKeys
+} from "@/mixins/analysis-info-handling.mixin";
 
 export default {
   name: "AnalysisInfoDialog",
+  components: {
+    CheckerGroup,
+    CheckerRows,
+    CountChips
+  },
+  mixins: [ AnalysisInfoHandlingMixin ],
   props: {
     value: { type: Boolean, default: false },
     runId: { type: Object, default: () => null },
@@ -48,7 +198,9 @@ export default {
 
   data() {
     return {
-      analysisInfo: [],
+      postProcessedAnalysisInfoReady: false,
+      analysisInfo: null,
+      highlightedCmds: [],
       enabledCheckerRgx: new RegExp("^(--enable|-e[= ]*)", "i"),
       disabledCheckerRgx: new RegExp("^(--disable|-d[= ]*)", "i"),
     };
@@ -62,7 +214,10 @@ export default {
       set(val) {
         this.$emit("update:value", val);
       }
-    }
+    },
+    CheckerInfoAvailability() { return CheckerInfoAvailability; },
+    CountKeys() { return CountKeys; },
+    GroupKeys() { return GroupKeys; },
   },
 
   watch: {
@@ -82,8 +237,7 @@ export default {
   },
 
   methods: {
-    highlightOptions(analysisInfo) {
-      const cmd = analysisInfo.analyzerCommand;
+    highlightOptions(cmd) {
       return cmd.split(" ").map(param => {
         if (!param.startsWith("-")) {
           return param;
@@ -104,35 +258,24 @@ export default {
       }).join(" ").replace(/(?:\r\n|\r|\n)/g, "<br>");
     },
 
-    getAnalysisInfo() {
+    async getAnalysisInfo() {
       if (
         !this.dialog ||
         (!this.runId && !this.runHistoryId && !this.reportId)
       ) {
         return;
       }
+      this.postProcessedAnalysisInfoReady = false;
+      this.analysisInfo = null;
+
+      var analysisInfo = await this.loadAnalysisInfo(
+        this.runId, this.runHistoryId, this.reportId);
+      this.highlightedCmds = analysisInfo.cmds.map(cmd =>
+        this.highlightOptions(cmd));
+      analysisInfo.groupAndCountCheckers();
 
-      this.analysisInfo = [];
-
-      const analysisInfoFilter = new AnalysisInfoFilter({
-        runId: this.runId,
-        runHistoryId: this.runHistoryId,
-        reportId: this.reportId,
-      });
-
-      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 = analysisInfo;
+      this.postProcessedAnalysisInfoReady = true;
     }
   }
 };
@@ -161,5 +304,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/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 2574653c02..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";
@@ -6,8 +7,10 @@ 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 {
+  AnalysisInfoHandlingMixin,
   BugPathLengthColorMixin,
   ConfidentialityMixin,
   DateMixin,
@@ -15,5 +18,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..3a308cc629
--- /dev/null
+++ b/web/server/vue-cli/src/mixins/version.mixin.js
@@ -0,0 +1,14 @@
+import semver from "semver";
+
+export default {
+  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>