From b177eef86dd4cca5a2a802d88eca4c885c20b60b Mon Sep 17 00:00:00 2001
From: xb058t <xb058t@inf.elte.hu>
Date: Sun, 7 Sep 2025 21:29:10 +0200
Subject: [PATCH] Added runs page

---
 .../vue-cli/src/components/DateTimePicker.vue | 118 ++++-----
 .../src/components/Run/RunFilterToolbar.vue   |  53 ++--
 .../vue-cli/src/services/api/cc.service.js    |   2 +-
 web/server/vue-cli/src/views/RunList.vue      | 239 +++++++++---------
 4 files changed, 198 insertions(+), 214 deletions(-)

diff --git a/web/server/vue-cli/src/components/DateTimePicker.vue b/web/server/vue-cli/src/components/DateTimePicker.vue
index c3bf64d905..a4f5ad0392 100644
--- a/web/server/vue-cli/src/components/DateTimePicker.vue
+++ b/web/server/vue-cli/src/components/DateTimePicker.vue
@@ -4,17 +4,16 @@
     :content-class="dialogClass"
     width="400"
   >
-    <template v-slot:activator="{ on }">
+    <template #activator="{ props }">
       <v-text-field
+        v-bind="props"
         :label="label"
-        :value="formattedDatetime"
-        :class="[ inputClass, 'pa-0', 'ma-0' ]"
+        :class="[inputClass, 'pa-0', 'ma-0']"
         :prepend-inner-icon="prependInnerIcon"
         :outlined="outlined"
-        :dense="dense"
+        :density="dense ? 'compact' : undefined"
         hide-details
         readonly
-        v-on="on"
       >
         <template #append>
           <slot name="append" />
@@ -24,58 +23,51 @@
 
     <v-card>
       <v-card-text class="pa-0">
-        <v-tabs
-          v-model="activeTab"
-          fixed-tabs
-        >
+        <v-tabs v-model="activeTab" grow>
           <v-tab>
             <v-icon>mdi-calendar</v-icon>
           </v-tab>
-
-          <v-tab
-            :disabled="!date"
-          >
+          <v-tab :disabled="!date">
             <v-icon>mdi-clock-outline</v-icon>
           </v-tab>
+        </v-tabs>
 
-          <v-tab-item>
+        <v-window v-model="activeTab">
+          <v-window-item>
             <v-date-picker
               v-model="date"
-              full-width
-              @input="activeTab = 1"
+              show-adjacent-months
+              color="primary"
+              @update:model-value="activeTab = 1"
             />
-          </v-tab-item>
-
-          <v-tab-item>
+          </v-window-item>
+          <v-window-item>
             <v-time-picker
               v-model="time"
-              full-width
-              use-seconds
               format="24hr"
+              full-width
+              with-seconds
+              color="primary"
             />
-          </v-tab-item>
-        </v-tabs>
+          </v-window-item>
+        </v-window>
       </v-card-text>
 
       <v-card-actions>
         <v-spacer />
-
         <v-btn
           color="grey lighten-1"
-          class="clear-btn"
-          text
-          @click.native="clear"
+          variant="text"
+          @click="clear"
         >
           Clear
         </v-btn>
-
         <v-btn
-          class="ok-btn"
           color="green darken-1"
-          text
+          variant="text"
           @click="ok"
         >
-          Ok
+          OK
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -88,7 +80,7 @@ import { format, parse } from "date-fns";
 export default {
   name: "DateTimePicker",
   props: {
-    value: { type: [ Date, String ], default: null },
+    value: { type: [Date, String], default: null },
     label: { type: String, default: "" },
     dateFormat: { type: String, default: "yyyy-MM-dd" },
     timeFormat: { type: String, default: "HH:mm:ss" },
@@ -97,7 +89,7 @@ export default {
     dialogClass: { type: String, default: null },
     outlined: { type: Boolean, default: false },
     dense: { type: Boolean, default: false },
-    prependInnerIcon: { type: String, default: null },
+    prependInnerIcon: { type: String, default: null }
   },
   data() {
     return {
@@ -107,36 +99,31 @@ export default {
       time: this.defaultTime
     };
   },
-
   computed: {
     dateTimeFormat() {
       return `${this.dateFormat} ${this.timeFormat}`;
     },
-
     dateTime() {
-      if (this.date && this.time) {
-        const dt = this.date + " " + this.time;
-        return parse(dt, this.dateTimeFormat, new Date());
-      }
 
-      return null;
+      let hours, minutes;
+      [hours,minutes] = this.time.split(":");
+      const formatted = new Date(this.date);
+      formatted.setHours(parseInt(hours));
+      formatted.setMinutes(parseInt(minutes));
+      return formatted;
     },
-
     formattedDatetime() {
       return this.dateTime ? format(this.dateTime, this.dateTimeFormat) : null;
     }
   },
-
   watch: {
-    value() {
-      this.init();
+    value: {
+      handler() {
+        this.init();
+      },
+      immediate: true
     }
   },
-
-  mounted() {
-    this.init();
-  },
-
   methods: {
     init() {
       if (!this.value) {
@@ -147,34 +134,34 @@ export default {
       let initValue = null;
       if (this.value instanceof Date) {
         initValue = this.value;
-      } else if (typeof this.value === "string" ||
-                 this.value instanceof String
-      ) {
-        initValue = parse(this.value, this.dateTimeFormat, new Date());
+      } else if (typeof this.value === "string") {
+        try {
+          initValue = parse(this.value, this.dateTimeFormat, new Date());
+        } catch (e) {
+          initValue = null;
+        }
       }
 
-      this.date = format(initValue, this.dateFormat);
-      this.time = format(initValue, this.timeFormat);
+      if (initValue) {
+        this.date = format(initValue, this.dateFormat);
+        this.time = format(initValue, this.timeFormat);
+      } else {
+        this.resetDateTimes();
+      }
     },
-
     clear() {
       this.reset();
       this.resetDateTimes();
-
       this.$emit("input", null);
     },
-
     ok() {
       this.reset();
-
       this.$emit("input", this.dateTime);
     },
-
     reset() {
       this.dialog = false;
       this.activeTab = 0;
     },
-
     resetDateTimes() {
       this.date = null;
       this.time = this.defaultTime;
@@ -183,13 +170,8 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-::v-deep .v-picker.v-card {
+<style scoped>
+.v-picker {
   box-shadow: none;
-
-  & > .v-picker__title {
-    border-radius: 0;
-  }
 }
-
 </style>
diff --git a/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue b/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue
index c243331634..bef70b45ec 100644
--- a/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue
+++ b/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue
@@ -1,36 +1,32 @@
 <template>
   <v-toolbar flat class="run-filter-toolbar mb-4">
     <v-row>
-      <v-col align-self="center">
+      <v-col cols="12" md="2" align-self="center">
         <v-text-field
-          :value="runName"
+          :model-value="runName"
           class="run-name"
           prepend-inner-icon="mdi-magnify"
           label="Search for runs..."
           single-line
           hide-details
-          outlined
-          solo
-          flat
-          dense
-          @input="setRunName"
+          variant="outlined"
+          density="compact"
+          @update:model-value="setRunName"
         />
       </v-col>
 
-      <v-col align-self="center">
+      <v-col cols="12" md="3" align-self="center">
         <v-text-field
-          :value="runTag"
+          :model-value="runTag"
           class="run-tag"
           prepend-inner-icon="mdi-tag"
           label="Filter events by tag name..."
           clearable
           single-line
           hide-details
-          outlined
-          solo
-          flat
-          dense
-          @input="setRunTag"
+          variant="outlined"
+          density="compact"
+          @update:model-value="setRunTag"
         >
           <template #append>
             <tooltip-help-icon>
@@ -41,15 +37,15 @@
         </v-text-field>
       </v-col>
 
-      <v-col align-self="center" width="50px">
+      <v-col cols="12" md="2" align-self="center">
         <date-time-picker
           :value="storedAfter"
           input-class="stored-after"
           dialog-class="stored-after"
           label="History stored after..."
           prepend-inner-icon="mdi-calendar-arrow-right"
-          outlined
-          dense
+          variant="outlined"
+          density="compact"
           @input="setStoredAfter"
         >
           <template #append>
@@ -62,15 +58,15 @@
         </date-time-picker>
       </v-col>
 
-      <v-col align-self="center" cols="2">
+      <v-col cols="12" md="2" align-self="center">
         <date-time-picker
           :value="storedBefore"
           input-class="stored-before"
           dialog-class="stored-before"
           label="History stored before..."
           prepend-inner-icon="mdi-calendar-arrow-left"
-          outlined
-          dense
+          variant="outlined"
+          density="compact"
           @input="setStoredBefore"
         >
           <template #append>
@@ -92,13 +88,13 @@
         />
 
         <v-btn
-          outlined
+          variant="outlined"
           color="primary"
           class="diff-runs-btn mr-2"
           :to="diffTargetRoute"
           :disabled="isDiffBtnDisabled"
         >
-          <v-icon left>
+          <v-icon start>
             mdi-select-compare
           </v-icon>
           Diff
@@ -135,6 +131,7 @@
 <script>
 import _ from "lodash";
 import { mapGetters, mapMutations } from "vuex";
+import { useRoute } from "vue-router"; 
 import {
   SET_RUN_HISTORY_RUN_TAG,
   SET_RUN_HISTORY_STORED_AFTER,
@@ -162,7 +159,7 @@ export default {
     selectedComparedToRuns: { type: Array, required: true },
     selectedComparedToTags: { type: Array, required: true }
   },
-
+  
   computed: {
     ...mapGetters("run", [
       "runName",
@@ -182,7 +179,7 @@ export default {
       return {
         name: "reports",
         query: {
-          ...this.$router.currentRoute.query,
+          ...this.$route.query,
           "run": this.selectedBaselineRuns.length
             ? this.selectedBaselineRuns : undefined,
           "run-tag": this.selectedBaselineTags.length
@@ -243,19 +240,19 @@ export default {
     ]),
 
     initByUrl() {
-      const runName = this.$router.currentRoute.query["run"];
+      const runName = this.$route.query["run"];
       if (runName)
         this.setRunName(runName);
 
-      const runTag = this.$router.currentRoute.query["run-tag"];
+      const runTag = this.$route.query["run-tag"];
       if (runTag)
         this.setRunTag(runTag);
 
-      const storedAfter = this.$router.currentRoute.query["stored-after"];
+      const storedAfter = this.$route.query["stored-after"];
       if (storedAfter)
         this.setStoredAfter(new Date(storedAfter));
 
-      const storedBefore = this.$router.currentRoute.query["stored-before"];
+      const storedBefore = this.$route.query["stored-before"];
       if (storedBefore)
         this.setStoredBefore(new Date(storedBefore));
     },
diff --git a/web/server/vue-cli/src/services/api/cc.service.js b/web/server/vue-cli/src/services/api/cc.service.js
index c1276d4691..10a5825d1b 100644
--- a/web/server/vue-cli/src/services/api/cc.service.js
+++ b/web/server/vue-cli/src/services/api/cc.service.js
@@ -27,7 +27,7 @@ function extractTagWithRunName(runWithTagName) {
 
 class CodeCheckerService extends BaseService {
   constructor() {
-    super("CodeCheckerService", ServiceClient,"v6.61", true);
+    super("CodeCheckerService", ServiceClient,"6.61", true);
   }
 
   getSameReports(bugHash) {
diff --git a/web/server/vue-cli/src/views/RunList.vue b/web/server/vue-cli/src/views/RunList.vue
index 34969cf098..deda550e68 100644
--- a/web/server/vue-cli/src/views/RunList.vue
+++ b/web/server/vue-cli/src/views/RunList.vue
@@ -157,6 +157,8 @@ import {
   RunSortType
 } from "@cc/report-server-types";
 
+import { eventHub } from "@/services/api/eventHub";
+
 import { AnalysisInfoDialog } from "@/components";
 import {
   AnalyzerStatisticsBtn,
@@ -181,88 +183,96 @@ export default {
   mixins: [ VersionMixin ],
 
   data() {
-    const itemsPerPageOptions = [ 25, 50, 100 ];
-
-    const page = parseInt(this.$router.currentRoute.query["page"]) || 1;
-    const itemsPerPage =
-      parseInt(this.$router.currentRoute.query["items-per-page"]) ||
-      itemsPerPageOptions[0];
-    const sortBy = this.$router.currentRoute.query["sort-by"];
-    const sortDesc = this.$router.currentRoute.query["sort-desc"];
-
-    return {
-      initialized: false,
-      analysisInfoDialog: false,
-      pagination: {
-        page: page,
-        itemsPerPage: itemsPerPage,
-        sortBy: sortBy ? [ sortBy ] : [],
-        sortDesc: sortDesc !== undefined ? [ sortDesc === "true" ] : []
+  const itemsPerPageOptions = [ 25, 50, 100 ];
+
+  const page = parseInt(this.$route.query["page"]) || 1;
+  const itemsPerPage =
+    parseInt(this.$route.query["items-per-page"]) ||
+    itemsPerPageOptions[0];
+  const sortBy = this.$route.query["sort-by"];
+  const sortDesc = this.$route.query["sort-desc"];
+
+  return {
+    initialized: false,
+    analysisInfoDialog: false,
+    pagination: {
+      page: page,
+      itemsPerPage: itemsPerPage,
+      sortBy: sortBy ? [ sortBy ] : [],
+      sortDesc: sortDesc !== undefined ? [ sortDesc === "true" ] : []
+    },
+    footerProps: {
+      itemsPerPageOptions: itemsPerPageOptions
+    },
+    totalItems: 0,
+    loading: false,
+    selected: [],
+    selectedBaselineRuns: [],
+    selectedBaselineTags: [],
+    selectedComparedToRuns: [],
+    selectedComparedToTags: [],
+    analyzerStatisticsDialog: false,
+    selectedRunId: null,
+    selectedRunHistoryId: null,
+    expanded: [],
+    loadingMoreRunHistories: false,
+    headers: [
+      {
+        title: "",
+        value: "data-table-expand"
       },
-      footerProps: {
-        itemsPerPageOptions: itemsPerPageOptions
+      {
+        title: "Name",
+        value: "name",
+        sortable: true
       },
-      totalItems: 0,
-      loading: false,
-      selected: [],
-      selectedBaselineRuns: [],
-      selectedBaselineTags: [],
-      selectedComparedToRuns: [],
-      selectedComparedToTags: [],
-      analyzerStatisticsDialog: false,
-      selectedRunId: null,
-      selectedRunHistoryId: null,
-      expanded: [],
-      loadingMoreRunHistories: false,
-      headers: [
-        {
-          text: "",
-          value: "data-table-expand"
-        },
-        {
-          text: "Name",
-          value: "name",
-          sortable: true
-        },
-        {
-          text: "Number of unresolved reports",
-          value: "resultCount",
-          align: "center",
-          sortable: true
-        },
-        {
-          text: "Analyzer statistics",
-          value: "analyzerStatistics",
-          sortable: false
-        },
-        {
-          text: "Latest storage date",
-          value: "runDate",
-          align: "center",
-          sortable: true
-        },
-        {
-          text: "Analysis duration",
-          value: "duration",
-          align: "center",
-          sortable: true
-        },
-        {
-          text: "CodeChecker version",
-          value: "codeCheckerVersion",
-          align: "center",
-          sortable: true
-        },
-        {
-          text: "Diff",
-          value: "diff",
-          align: "center",
-          sortable: false,
-          width: "100px"
-        }
-      ],
-      runs: []
-    };
+      {
+        title: "Number of unresolved reports",
+        value: "resultCount",
+        align: "center",
+        sortable: true
+      },
+      {
+        title: "Analyzer statistics",
+        value: "analyzerStatistics",
+        sortable: false
+      },
+      {
+        title: "Latest storage date",
+        value: "runDate",
+        align: "center",
+        sortable: true
+      },
+      {
+        title: "Analysis duration",
+        value: "duration",
+        align: "center",
+        sortable: true
+      },
+      {
+        title: "CodeChecker version",
+        value: "codeCheckerVersion",
+        align: "center",
+        sortable: true
+      },
+      {
+        title: "Diff",
+        value: "diff",
+        align: "center",
+        sortable: false,
+        width: "100px"
+      }
+    ],
+    runs: [],
+    endpoint: window.__cc_endpoint || "Default"
+  };
+},
+
+
+  beforeCreate() {
+  const endpoint = this.$route.params.endpoint;
+  console.log("[RunList] using endpoint:", endpoint);
+  eventHub.emit("update", endpoint);
   },
 
   computed: {
@@ -336,7 +346,7 @@ export default {
     },
 
     async initExpandedItems() {
-      const expanded = this.$router.currentRoute.query["expanded"];
+      const expanded = this.$route.query["expanded"];
       if (!expanded)
         return;
 
@@ -406,7 +416,6 @@ export default {
 
     async runExpanded(run, limit=10, offset=0) {
       if (run.item.$history) {
-        // Use nextTick to wait while expanded array is updated.
         return this.$nextTick(this.updateExpandedUrlParam);
       }
 
@@ -471,41 +480,37 @@ export default {
     fetchRuns() {
       this.loading = true;
 
-      // Get total item count.
-      ccService.getClient().getRunCount(this.runFilter,
-        handleThriftError(totalItems => {
-          this.totalItems = totalItems.toNumber();
-        }));
-
-      // Get the runs.
-      const limit = this.pagination.itemsPerPage;
-      const offset = limit * (this.pagination.page - 1);
-      const sortMode = this.getSortMode();
-
-      return new Promise(resolve => {
-        ccService.getClient().getRunData(this.runFilter, limit, offset,
-          sortMode, handleThriftError(runs => {
-            this.runs = runs.map(r => {
-              const version = this.prettifyCCVersion(r.codeCheckerVersion);
-
-              // Init run history by the expanded array.
-              const oldRun = this.expanded.find(e =>
-                e.runId.toNumber() === r.runId.toNumber());
-
-              return {
-                ...r,
-                $history: oldRun ? oldRun.$history : null,
-                $duration: this.prettifyDuration(r.duration),
-                $codeCheckerVersion: version
-              };
-            });
-
-            this.loading = false;
+    ccService.getClient().getRunCount(this.runFilter,
+      handleThriftError(totalItems => {
+        this.totalItems = totalItems.toNumber();
+      }));
 
-            resolve(this.runs);
-          }));
-      });
-    },
+    const limit = this.pagination.itemsPerPage;
+    const offset = limit * (this.pagination.page - 1);
+    const sortMode = this.getSortMode();
+
+    return new Promise(resolve => {
+      ccService.getClient().getRunData(this.runFilter,
+        limit, offset, sortMode, handleThriftError(runs => {
+          this.runs = runs.map(r => {
+            const version = this.prettifyCCVersion(r.codeCheckerVersion);
+
+            const oldRun = this.expanded.find(e =>
+              e.runId.toNumber() === r.runId.toNumber());
+
+            return {
+              ...r,
+              $history: oldRun ? oldRun.$history : null,
+              $duration: this.prettifyDuration(r.duration),
+              $codeCheckerVersion: version
+            };
+          });
+
+          this.loading = false;
+          resolve(this.runs);
+      }));
+    });
+  },
 
     openAnalysisInfoDialog(runId, runHistoryId=null) {
       this.selectedRunId = runId;
@@ -551,7 +556,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.v-data-table ::v-deep tbody tr.v-data-table__expanded__content {
+:deep(.v-data-table tbody tr.v-data-table__expanded__content) {
   box-shadow: none;
 }
 </style>