Fix cleanup plan filter

gulyasgergely902 · gulyasgergely902 · commit 2abcd9946175 · 2026-04-14T11:01:47.000+02:00
diff --git a/web/server/vue-cli/src/components/Report/CleanupPlan/CleanupPlanList.vue b/web/server/vue-cli/src/components/Report/CleanupPlan/CleanupPlanList.vue
@@ -1,62 +1,54 @@
 <template>
   <v-list
-    v-if="value && value.length"
-    v-model:selected="selected"
+    v-if="cleanupPlans && cleanupPlans.length"
+    v-model:selected="internalSelectedPlans"
     select-strategy="multiple"
   >
-    <template 
-      v-for="(cleanupPlan, idx) in value"
+    <v-list-item
+      v-for="cleanupPlan in cleanupPlans"
       :key="cleanupPlan.id.toNumber()"
+      :value="cleanupPlan.id.toNumber()"
     >
-      <v-list-item
-        :value="cleanupPlan.id.toNumber()"
-      >
-        <template v-slot:prepend="{ isSelected }">
-          <v-icon v-if="isSelected">
-            mdi-checkbox-marked
-          </v-icon>
-          <v-icon v-else-if="notAllSelected[cleanupPlan.id]">
-            mdi-checkbox-intermediate
-          </v-icon>
-          <v-icon v-else>
-            mdi-checkbox-blank-outline
-          </v-icon>
-        </template>
-
-        <v-list-item-title class="font-weight-bold">
-          {{ cleanupPlan.name }}
-        </v-list-item-title>
+      <template v-slot:prepend="{ isActive }">
+        <v-icon v-if="isActive">
+          mdi-checkbox-marked
+        </v-icon>
+        <v-icon v-else-if="notAllSelected[cleanupPlan.id]">
+          mdi-checkbox-intermediate
+        </v-icon>
+        <v-icon v-else>
+          mdi-checkbox-blank-outline
+        </v-icon>
+      </template>
 
-        <v-list-item-subtitle
-          v-if="cleanupPlan.closedAt"
-        >
-          <v-icon
-            size="small"
-          >
-            mdi-calendar-blank
-          </v-icon>
-          Closed on
-          {{ fromUnixTime(cleanupPlan.closedAt, "yyyy-MM-dd") }}
-        </v-list-item-subtitle>
+      <v-list-item-title class="font-weight-bold">
+        {{ cleanupPlan.name }}
+      </v-list-item-title>
 
-        <v-list-item-subtitle
-          v-else-if="cleanupPlan.dueDate"
+      <v-list-item-subtitle
+        v-if="cleanupPlan.closedAt"
+      >
+        <v-icon
+          size="small"
         >
-          <due-date :value="cleanupPlan.dueDate" />
-        </v-list-item-subtitle>
+          mdi-calendar-blank
+        </v-icon>
+        Closed on
+        {{ fromUnixTime(cleanupPlan.closedAt, "yyyy-MM-dd") }}
+      </v-list-item-subtitle>
 
-        <v-list-item-subtitle
-          v-else
-        >
-          No due date
-        </v-list-item-subtitle>
-      </v-list-item>
+      <v-list-item-subtitle
+        v-else-if="cleanupPlan.dueDate"
+      >
+        <due-date :value="cleanupPlan.dueDate" />
+      </v-list-item-subtitle>
 
-      <v-divider
-        v-if="idx < value.length - 1"
-        :key="idx"
-      />
-    </template>
+      <v-list-item-subtitle
+        v-else
+      >
+        No due date
+      </v-list-item-subtitle>
+    </v-list-item>
   </v-list>
 
   <v-list v-else disabled>
@@ -71,15 +63,19 @@ import { computed } from "vue";
 import DueDate from "./DueDate";
 
 const props = defineProps({
-  value: { type: Array, default: null },
-  selectedItems: { type: Array, default: () => [] },
+  cleanupPlans: { type: Array, default: null },
+  selectedPlans: { type: Array, default: () => [] },
   notAllSelected: { type: Object, default: () => ({}) }
 });
 
-const emit = defineEmits([ "update:selected-items" ]);
+const emit = defineEmits([ "update:selectedPlans" ]);
 
-const selected = computed({
-  get: () => props.selectedItems,
-  set: val => emit("update:selected-items", val)
+const internalSelectedPlans = computed({
+  get() {
+    return props.selectedPlans;
+  },
+  set(value) {
+    emit("update:selectedPlans", value);
+  }
 });
 </script>
diff --git a/web/server/vue-cli/src/components/Report/CleanupPlan/SetCleanupPlanBtn.vue b/web/server/vue-cli/src/components/Report/CleanupPlan/SetCleanupPlanBtn.vue
@@ -5,10 +5,10 @@
     :close-on-content-click="false"
     :nudge-width="100"
   >
-    <template v-slot:activator="{ props: bindProps }">
+    <template v-slot:activator="{ props: activatorProps }">
       <div class="d-flex align-center">
         <v-btn
-          v-bind="bindProps"
+          v-bind="activatorProps"
           color="primary"
           class="set-cleanup-plan-btn"
           variant="outlined"
@@ -53,19 +53,19 @@
       >
         <template v-slot:open>
           <cleanup-plan-list
-            :value="cleanupPlan.openCleanupPlans.value"
-            :selected-items="changedSelectedItems"
+            :cleanup-plans="cleanupPlan.openCleanupPlans.value"
+            :selected-plans="changedSelectedItems"
             :not-all-selected="changedNotAllSelected"
-            @update:selected-items="updateSelectedCleanupPlans"
+            @update:selected-plans="updateSelectedCleanupPlans"
           />
         </template>
 
         <template v-slot:closed>
           <cleanup-plan-list
-            :value="cleanupPlan.closedCleanupPlans.value"
-            :selected-items="changedSelectedItems"
+            :cleanup-plans="cleanupPlan.closedCleanupPlans.value"
+            :selected-plans="changedSelectedItems"
             :not-all-selected="changedNotAllSelected"
-            @update:selected-items="updateSelectedCleanupPlans"
+            @update:selected-plans="updateSelectedCleanupPlans"
           />
         </template>
       </cleanup-plan-tab>
@@ -95,7 +95,8 @@ const cleanupPlan = useCleanupPlan();
 const selectedTab = ref(0);
 
 const selectedReportHashes = computed(() => {
-  return [ ...new Set(props.value.map(v => v.bugHash)) ];
+  const hashes = Array.from(new Set(props.value));
+  return hashes;
 });
 
 watch(menu, () => {
@@ -122,13 +123,19 @@ function reset() {
 
 function save() {
   getCheckedCleanups().forEach(cleanupPlanId => {
-    ccService.getClient().setCleanupPlan(cleanupPlanId,
-      selectedReportHashes.value, handleThriftError());
+    ccService.getClient().setCleanupPlan(
+      cleanupPlanId,
+      selectedReportHashes.value,
+      handleThriftError()
+    );
   });
 
   getUncheckedCleanups().forEach(cleanupPlanId => {
-    ccService.getClient().unsetCleanupPlan(cleanupPlanId,
-      selectedReportHashes.value, handleThriftError());
+    ccService.getClient().unsetCleanupPlan(
+      cleanupPlanId,
+      selectedReportHashes.value,
+      handleThriftError()
+    );
   });
 }
 
@@ -157,36 +164,36 @@ function getUncheckedCleanups() {
   return _removeFromCleanups;
 }
 
-// Initialize selected items.
-function onFetchFinished(_cleanupPlans) {
-  _cleanupPlans.forEach(_cleanupPlan => {
-    const _id = _cleanupPlan.id.toNumber();
+function onFetchFinished(cleanupPlans) {
+  cleanupPlans.forEach(plan => {
+    const planId = plan.id.toNumber();
 
-    const _commonReportHashes = selectedReportHashes.value.filter(
-      _reportHash => _cleanupPlan.reportHashes.includes(_reportHash));
+    const planHashes = new Set(plan.reportHashes);
+    const commonReportHashes = selectedReportHashes.value.filter(
+      reportHash => planHashes.has(reportHash));
 
     if (
-      _commonReportHashes.length === selectedReportHashes.value.length
+      commonReportHashes.length === selectedReportHashes.value.length
     ) {
       // Every selected report hashes are in the current cleanup plan so
       // mark it as active.
-      if (!origSelectedItems.value.includes(_id)) {
-        origSelectedItems.value.push(_id);
-        changedSelectedItems.value.push(_id);
+      if (!origSelectedItems.value.includes(planId)) {
+        origSelectedItems.value.push(planId);
+        changedSelectedItems.value.push(planId);
       }
-    } else if (_commonReportHashes.length !== 0) {
+    } else if (commonReportHashes.length !== 0) {
       // Not all selected report hashes are in the cleanup plan, so mark
       // it differently.
-      origNotAllSelected.value[_id] = true;
-      changedNotAllSelected.value[_id] = true;
+      origNotAllSelected.value[planId] = true;
+      changedNotAllSelected.value[planId] = true;
     }
   });
 }
 
 function updateSelectedCleanupPlans(_cleanupPlanIds) {
-  _cleanupPlanIds.forEach(_id => {
-    if (!changedSelectedItems.value.includes(_id)) {
-      delete changedNotAllSelected.value[_id];
+  _cleanupPlanIds.forEach(id => {
+    if (!changedSelectedItems.value.includes(id)) {
+      delete changedNotAllSelected.value[id];
     }
   });
 
diff --git a/web/server/vue-cli/src/components/Report/ReportFilter/Filters/CleanupPlanFilter.vue b/web/server/vue-cli/src/components/Report/ReportFilter/Filters/CleanupPlanFilter.vue
@@ -3,7 +3,7 @@
     v-model="dialog"
   >
     <select-option
-      :id="id.value"
+      :id="id"
       title="Cleanup plan"
       :bus="baseSelectOptionFilter.bus"
       :fetch-items="fetchItems"
@@ -60,16 +60,16 @@ const baseSelectOptionFilter =
 baseSelectOptionFilter.fetchItems.value = fetchItems;
 baseSelectOptionFilter.updateReportFilter.value = updateReportFilter;
 
-const id = ref("cleanup-plan");
-// eslint-disable-next-line vue/no-ref-object-reactivity-loss
-baseSelectOptionFilter.id.value = id.value;
+baseSelectOptionFilter.bus.on("update:url", () => {
+  emit("update:url");
+});
 
-const dialog = ref(false);
+const id = "cleanup-plan";
+baseSelectOptionFilter.id.value = id;
 
+const dialog = ref(false);
 const store = useStore();
-
 const currentProduct = computed(() => store.getters.currentProduct);
-
 const administrating = computed(() => {
   return currentProduct.value?.administrating;
 });
@@ -82,10 +82,6 @@ watch(dialog, value => {
   baseSelectOptionFilter.bus.emit("update");
 });
 
-baseSelectOptionFilter.bus.on("update:url", () => {
-  emit("update:url");
-});
-
 function updateReportFilter() {
   baseSelectOptionFilter.setReportFilter({
     cleanupPlanNames: 
diff --git a/web/server/vue-cli/src/views/Reports.vue b/web/server/vue-cli/src/views/Reports.vue
@@ -27,7 +27,7 @@
         :must-sort="true"
         show-select
         :mobile-breakpoint="1100"
-        item-value="$id"
+        item-value="bugHash"
         @update:expanded="itemExpanded"
       >
         <template v-slot:top>
@@ -375,7 +375,7 @@ const formattedReports = computed(function() {
     return {
       ..._report,
       "$detectionStatusTitle": _detectionStatusTitle,
-      "$id": _id,
+      "id": _id,
       "sameReports": _report.sameReports,
       "timestamp": _report.annotations["timestamp"],
       "testcase": _report.annotations["testcase"],
