From 8a40c4f9f3b856fccd3a55fb0241100ee15a4373 Mon Sep 17 00:00:00 2001
From: seungyeoneeee <sylee1274@mz.co.kr>
Date: Tue, 20 May 2025 16:38:26 +0900
Subject: [PATCH 1/4] fix: fix bug about queryTag with pagination

Signed-off-by: seungyeoneeee <sylee1274@mz.co.kr>
---
 .../v2/components/ServiceDetailHeader.vue     |  8 +-
 .../v2/components/ServiceList.vue             | 93 ++++++++++++++-----
 .../v2/stores/service-list-page-store.ts      |  6 ++
 3 files changed, 80 insertions(+), 27 deletions(-)

diff --git a/apps/web/src/services/alert-manager/v2/components/ServiceDetailHeader.vue b/apps/web/src/services/alert-manager/v2/components/ServiceDetailHeader.vue
index 87f8d57211..ef97580343 100644
--- a/apps/web/src/services/alert-manager/v2/components/ServiceDetailHeader.vue
+++ b/apps/web/src/services/alert-manager/v2/components/ServiceDetailHeader.vue
@@ -78,11 +78,11 @@ const handleActionModal = (type: ModalType) => {
 };
 const handleGoBackButton = () => {
     if (state.isSettingMode) {
-        const validUnhealthyPage = (!Number.isNaN(serviceListPageStore.unhealthyThisPage) && serviceListPageStore.unhealthyThisPage > 0)
-            ? serviceListPageStore.unhealthyThisPage
+        const validUnhealthyPage = (!Number.isNaN(serviceListPageStore.$state.unhealthyThisPage) && serviceListPageStore.unhealthyThisPage > 0)
+            ? serviceListPageStore.$state.unhealthyThisPage
             : 1;
-        const validHealthyPage = (!Number.isNaN(serviceListPageStore.healthyThisPage) && serviceListPageStore.healthyThisPage > 0)
-            ? serviceListPageStore.healthyThisPage
+        const validHealthyPage = (!Number.isNaN(serviceListPageStore.$state.healthyThisPage) && serviceListPageStore.$state.healthyThisPage > 0)
+            ? serviceListPageStore.$state.healthyThisPage
             : 1;
 
         router.push({
diff --git a/apps/web/src/services/alert-manager/v2/components/ServiceList.vue b/apps/web/src/services/alert-manager/v2/components/ServiceList.vue
index 1c398eacf6..3d62e8025f 100644
--- a/apps/web/src/services/alert-manager/v2/components/ServiceList.vue
+++ b/apps/web/src/services/alert-manager/v2/components/ServiceList.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
-import { onMounted, reactive, watch } from 'vue';
+import {
+    onMounted, reactive, watch, computed,
+} from 'vue';
 import {
     useRoute, useRouter,
 } from 'vue-router/composables';
 
 import { makeDistinctValueHandler } from '@cloudforet/core-lib/component-util/query-search';
+import { QueryHelper } from '@cloudforet/core-lib/query';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import {
     PToolbox, PDataLoader, PEmpty, PButton, PPagination,
 } from '@cloudforet/mirinae';
+import type { QueryTag } from '@cloudforet/mirinae/types/controls/search/query-search-tags/type';
 import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/type';
 
 import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
@@ -21,7 +25,6 @@ import { replaceUrlQuery } from '@/lib/router-query-string';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { usePageEditableStatus } from '@/common/composables/page-editable-status';
-import { useQueryTags } from '@/common/composables/query-tags';
 
 import ServiceListContent from '@/services/alert-manager/v2/components/ServiceListContent.vue';
 import { ALERT_MANAGER_ROUTE } from '@/services/alert-manager/v2/routes/route-constant';
@@ -57,12 +60,18 @@ const serviceListPageStore = useServiceListPageStore();
 
 const serviceListApiQueryHelper = new ApiQueryHelper().setSort('created_at', true);
 const healthyServiceListApiQueryHelper = new ApiQueryHelper().setSort('created_at', true);
-const queryTagHelper = useQueryTags({ keyItemSets: SERVICE_SEARCH_HANDLER.keyItemSets });
-const { queryTags } = queryTagHelper;
+const searchQueryHelper = new QueryHelper();
+
+const queryTags = computed(() => searchQueryHelper.setFilters(serviceListPageStore.searchFilters).queryTags);
 
-const handleToolbox = async (options: ToolboxOptions) => {
+const handleToolbox = async (options: ToolboxOptions = {}) => {
     if (options.queryTags !== undefined) {
-        queryTagHelper.setQueryTags(options.queryTags);
+        // queryTagHelper.setQueryTags(options.queryTags);
+        searchQueryHelper.setFiltersAsQueryTag(options.queryTags);
+
+        serviceListPageStore.$patch((_state) => {
+            _state.searchFilters = searchQueryHelper.filters;
+        });
 
         const nameTags = options.queryTags.filter((tag) => tag.key?.name === 'name');
         const nameValues = nameTags.map((tag) => tag.value.name).filter(Boolean);
@@ -79,9 +88,6 @@ const handleToolbox = async (options: ToolboxOptions) => {
         }
 
         replaceUrlQuery(newQuery);
-
-        serviceListPageStore.setUnhealthyPage(1);
-        serviceListPageStore.setHealthyPage(1);
     }
 
     await fetchBothLists();
@@ -109,7 +115,7 @@ const fetchServiceList = async () => {
         const pageStart = (validPage - 1) * serviceListPageStore.unhealthyPageSize + 1;
 
         serviceListApiQueryHelper.setPage(pageStart, serviceListPageStore.unhealthyPageSize).setFilters([
-            ...queryTagHelper.filters.value,
+            ...searchQueryHelper.filters,
             { k: 'service_healthy', v: SERVICE_HEALTHY_TYPE.UNHEALTHY, o: '=' },
         ]);
         const { results, total_count } = await SpaceConnector.clientV2.alertManager.service.list<ServiceListParameters, ListResponse<ServiceModel>>({
@@ -134,7 +140,7 @@ const fetchHealthyServiceList = async () => {
         const pageStart = (validPage - 1) * serviceListPageStore.healthyPageSize + 1;
 
         healthyServiceListApiQueryHelper.setPage(pageStart, serviceListPageStore.healthyPageSize).setFilters([
-            ...queryTagHelper.filters.value,
+            ...searchQueryHelper.filters,
             { k: 'service_healthy', v: SERVICE_HEALTHY_TYPE.HEALTHY, o: '=' },
         ]);
         const { results, total_count } = await SpaceConnector.clientV2.alertManager.service.list<ServiceListParameters, ListResponse<ServiceModel>>({
@@ -177,24 +183,36 @@ const handleNavigateToDetail = (serviceId: string) => {
 };
 
 onMounted(async () => {
-    const { unhealthyPage, healthyPage } = route.query;
+    const { serviceName, unhealthyPage, healthyPage } = route.query;
 
-    let parsedUnhealthy = parseInt(unhealthyPage as string);
-    let parsedHealthy = parseInt(healthyPage as string);
-
-    parsedUnhealthy = (!Number.isNaN(parsedUnhealthy) && parsedUnhealthy > 0) ? parsedUnhealthy : 1;
-    parsedHealthy = (!Number.isNaN(parsedHealthy) && parsedHealthy > 0) ? parsedHealthy : 1;
-
-    serviceListPageStore.setUnhealthyPage(parsedUnhealthy);
-    serviceListPageStore.setHealthyPage(parsedHealthy);
-
-    const { serviceName } = route.query;
     if (serviceName && typeof serviceName === 'string') {
         const nameValues = serviceName.split(',').map((name) => ({
             key: { name: 'name' },
             value: { label: name, name },
         }));
-        queryTagHelper.setQueryTags(nameValues);
+        searchQueryHelper.setFiltersAsQueryTag(nameValues);
+
+        const splitNameFilters = searchQueryHelper.filters.flatMap((f) => {
+            if (f.k === 'name' && Array.isArray(f.v) && f.v.length > 1) {
+                return f.v.map((val, idx) => ({
+                    k: 'name',
+                    v: [val],
+                    o: idx === 0 ? '' : '=',
+                }));
+            }
+            return f;
+        });
+        searchQueryHelper.setFilters(splitNameFilters);
+
+        serviceListPageStore.setSearchFilters(searchQueryHelper.filters);
+    } else {
+        const parsedUnhealthy = (!Number.isNaN(parseInt(unhealthyPage as string)) && parseInt(unhealthyPage as string) > 0)
+            ? parseInt(unhealthyPage as string) : 1;
+        const parsedHealthy = (!Number.isNaN(parseInt(healthyPage as string)) && parseInt(healthyPage as string) > 0)
+            ? parseInt(healthyPage as string) : 1;
+
+        serviceListPageStore.setUnhealthyPage(parsedUnhealthy);
+        serviceListPageStore.setHealthyPage(parsedHealthy);
     }
 
     await fetchBothLists();
@@ -219,6 +237,35 @@ watch(() => serviceListPageStore.healthyThisPage, (val) => {
     }
     handleHealthyPageChange();
 });
+
+watch(() => route.query.serviceName, async (newServiceName) => {
+    if (typeof newServiceName === 'string') {
+        const nameValues = newServiceName.split(',').map((name) => ({
+            key: { name: 'name' },
+            value: { label: name, name: [name] as string[] },
+        }));
+        searchQueryHelper.setFiltersAsQueryTag(nameValues as QueryTag[]);
+        const splitNameFilters = searchQueryHelper.filters.flatMap((f: any) => {
+            if (f.k === 'name' && Array.isArray(f.v) && f.v.length > 1) {
+                return f.v.map((val, idx) => ({
+                    k: 'name',
+                    v: [val],
+                    o: idx === 0 ? '=' : '',
+                }));
+            }
+            return f;
+        });
+        searchQueryHelper.setFilters(splitNameFilters);
+
+        serviceListPageStore.setSearchFilters(searchQueryHelper.filters);
+        await fetchBothLists();
+    } else if (!newServiceName) {
+        searchQueryHelper.setFiltersAsQueryTag([]);
+        serviceListPageStore.$patch((_state) => {
+            _state.searchFilters = [];
+        });
+    }
+});
 </script>
 
 <template>
diff --git a/apps/web/src/services/alert-manager/v2/stores/service-list-page-store.ts b/apps/web/src/services/alert-manager/v2/stores/service-list-page-store.ts
index b63fda6296..a91c200453 100644
--- a/apps/web/src/services/alert-manager/v2/stores/service-list-page-store.ts
+++ b/apps/web/src/services/alert-manager/v2/stores/service-list-page-store.ts
@@ -1,11 +1,14 @@
 import { defineStore } from 'pinia';
 
+import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
+
 export const useServiceListPageStore = defineStore('serviceListPage', {
     state: () => ({
         unhealthyThisPage: 1,
         unhealthyPageSize: 10,
         healthyThisPage: 1,
         healthyPageSize: 6,
+        searchFilters: [] as ConsoleFilter[],
     }),
     actions: {
         setUnhealthyPage(page: number) {
@@ -14,5 +17,8 @@ export const useServiceListPageStore = defineStore('serviceListPage', {
         setHealthyPage(page: number) {
             this.healthyThisPage = page;
         },
+        setSearchFilters(filters: ConsoleFilter[]) {
+            this.searchFilters = filters;
+        },
     },
 });

From ce5d950a35bd5daa3456dffdb404df7efe04c4a4 Mon Sep 17 00:00:00 2001
From: seungyeoneeee <sylee1274@mz.co.kr>
Date: Tue, 20 May 2025 21:07:47 +0900
Subject: [PATCH 2/4] fix: add conditions about filters of query

Signed-off-by: seungyeoneeee <sylee1274@mz.co.kr>
---
 .../v2/components/ServiceList.vue             | 86 ++++++++++++-------
 1 file changed, 57 insertions(+), 29 deletions(-)

diff --git a/apps/web/src/services/alert-manager/v2/components/ServiceList.vue b/apps/web/src/services/alert-manager/v2/components/ServiceList.vue
index 3d62e8025f..3e012b0e1d 100644
--- a/apps/web/src/services/alert-manager/v2/components/ServiceList.vue
+++ b/apps/web/src/services/alert-manager/v2/components/ServiceList.vue
@@ -13,7 +13,6 @@ import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import {
     PToolbox, PDataLoader, PEmpty, PButton, PPagination,
 } from '@cloudforet/mirinae';
-import type { QueryTag } from '@cloudforet/mirinae/types/controls/search/query-search-tags/type';
 import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/type';
 
 import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
@@ -66,7 +65,6 @@ const queryTags = computed(() => searchQueryHelper.setFilters(serviceListPageSto
 
 const handleToolbox = async (options: ToolboxOptions = {}) => {
     if (options.queryTags !== undefined) {
-        // queryTagHelper.setQueryTags(options.queryTags);
         searchQueryHelper.setFiltersAsQueryTag(options.queryTags);
 
         serviceListPageStore.$patch((_state) => {
@@ -77,8 +75,8 @@ const handleToolbox = async (options: ToolboxOptions = {}) => {
         const nameValues = nameTags.map((tag) => tag.value.name).filter(Boolean);
 
         const newQuery: Record<string, any> = {
-            unhealthyPage: String(serviceListPageStore.unhealthyThisPage),
-            healthyPage: String(serviceListPageStore.healthyThisPage),
+            unhealthyPage: '1',
+            healthyPage: '1',
         };
 
         if (nameValues.length > 0) {
@@ -87,6 +85,19 @@ const handleToolbox = async (options: ToolboxOptions = {}) => {
             newQuery.serviceName = undefined;
         }
 
+        const isFullNameOnly = searchQueryHelper.filters.some((f) => f.k === 'name'
+            && Array.isArray(f.v)
+            && f.v.length === 1
+            && typeof f.v[0] === 'string'
+            && f.v[0].length > 2);
+
+        if (isFullNameOnly) {
+            serviceListPageStore.setUnhealthyPage(1);
+            serviceListPageStore.setHealthyPage(1);
+            newQuery.unhealthyPage = '1';
+            newQuery.healthyPage = '1';
+        }
+
         replaceUrlQuery(newQuery);
     }
 
@@ -111,10 +122,17 @@ const handleHealthyPageChange = async () => {
 const fetchServiceList = async () => {
     state.loading = true;
     try {
-        const validPage = Math.max(1, serviceListPageStore.unhealthyThisPage);
-        const pageStart = (validPage - 1) * serviceListPageStore.unhealthyPageSize + 1;
+        const isFullNameOnly = searchQueryHelper.filters.length === 1
+            && searchQueryHelper.filters[0].k === 'name'
+            && Array.isArray(searchQueryHelper.filters[0].v)
+            && searchQueryHelper.filters[0].v.length === 1
+            && typeof searchQueryHelper.filters[0].v[0] === 'string'
+            && searchQueryHelper.filters[0].v[0].length > 2;
+
+        const pageSize = isFullNameOnly ? 1000 : serviceListPageStore.unhealthyPageSize;
+        const pageStart = isFullNameOnly ? 1 : ((Math.max(1, serviceListPageStore.unhealthyThisPage) - 1) * pageSize + 1);
 
-        serviceListApiQueryHelper.setPage(pageStart, serviceListPageStore.unhealthyPageSize).setFilters([
+        serviceListApiQueryHelper.setPage(pageStart, pageSize).setFilters([
             ...searchQueryHelper.filters,
             { k: 'service_healthy', v: SERVICE_HEALTHY_TYPE.UNHEALTHY, o: '=' },
         ]);
@@ -136,10 +154,17 @@ const fetchServiceList = async () => {
 const fetchHealthyServiceList = async () => {
     state.healthyLoading = true;
     try {
-        const validPage = Math.max(1, serviceListPageStore.healthyThisPage);
-        const pageStart = (validPage - 1) * serviceListPageStore.healthyPageSize + 1;
+        const isFullNameOnly = searchQueryHelper.filters.length === 1
+            && searchQueryHelper.filters[0].k === 'name'
+            && Array.isArray(searchQueryHelper.filters[0].v)
+            && searchQueryHelper.filters[0].v.length === 1
+            && typeof searchQueryHelper.filters[0].v[0] === 'string'
+            && searchQueryHelper.filters[0].v[0].length > 2;
+
+        const pageSize = isFullNameOnly ? 1000 : serviceListPageStore.healthyPageSize;
+        const pageStart = isFullNameOnly ? 1 : ((Math.max(1, serviceListPageStore.healthyThisPage) - 1) * pageSize + 1);
 
-        healthyServiceListApiQueryHelper.setPage(pageStart, serviceListPageStore.healthyPageSize).setFilters([
+        healthyServiceListApiQueryHelper.setPage(pageStart, pageSize).setFilters([
             ...searchQueryHelper.filters,
             { k: 'service_healthy', v: SERVICE_HEALTHY_TYPE.HEALTHY, o: '=' },
         ]);
@@ -192,16 +217,17 @@ onMounted(async () => {
         }));
         searchQueryHelper.setFiltersAsQueryTag(nameValues);
 
-        const splitNameFilters = searchQueryHelper.filters.flatMap((f) => {
-            if (f.k === 'name' && Array.isArray(f.v) && f.v.length > 1) {
-                return f.v.map((val, idx) => ({
-                    k: 'name',
-                    v: [val],
-                    o: idx === 0 ? '' : '=',
-                }));
+        const splitNameFilters = searchQueryHelper.filters.map((f) => {
+            if (f.k === 'name' && Array.isArray(f.v)) {
+                const fullNames = f.v.filter((val) => typeof val === 'string' && val.length > 2);
+                const partials = f.v.filter((val) => typeof val === 'string' && val.length <= 2);
+                return [
+                    ...(fullNames.length > 0 ? [{ k: 'name', v: fullNames, o: '=' }] : []),
+                    ...(partials.map((val) => ({ k: 'name', v: [val], o: '' }))),
+                ];
             }
             return f;
-        });
+        }).flat();
         searchQueryHelper.setFilters(splitNameFilters);
 
         serviceListPageStore.setSearchFilters(searchQueryHelper.filters);
@@ -238,23 +264,25 @@ watch(() => serviceListPageStore.healthyThisPage, (val) => {
     handleHealthyPageChange();
 });
 
-watch(() => route.query.serviceName, async (newServiceName) => {
+watch(async () => route.query.serviceName, async (newServiceName) => {
     if (typeof newServiceName === 'string') {
         const nameValues = newServiceName.split(',').map((name) => ({
             key: { name: 'name' },
-            value: { label: name, name: [name] as string[] },
+            value: { label: name, name },
         }));
-        searchQueryHelper.setFiltersAsQueryTag(nameValues as QueryTag[]);
-        const splitNameFilters = searchQueryHelper.filters.flatMap((f: any) => {
-            if (f.k === 'name' && Array.isArray(f.v) && f.v.length > 1) {
-                return f.v.map((val, idx) => ({
-                    k: 'name',
-                    v: [val],
-                    o: idx === 0 ? '=' : '',
-                }));
+        searchQueryHelper.setFiltersAsQueryTag(nameValues);
+
+        const splitNameFilters = searchQueryHelper.filters.map((f) => {
+            if (f.k === 'name' && Array.isArray(f.v)) {
+                const fullNames = f.v.filter((val) => typeof val === 'string' && val.length > 2);
+                const partials = f.v.filter((val) => typeof val === 'string' && val.length <= 2);
+                return [
+                    ...(fullNames.length > 0 ? [{ k: 'name', v: fullNames, o: '=' }] : []),
+                    ...(partials.map((val) => ({ k: 'name', v: [val], o: '' }))),
+                ];
             }
             return f;
-        });
+        }).flat();
         searchQueryHelper.setFilters(splitNameFilters);
 
         serviceListPageStore.setSearchFilters(searchQueryHelper.filters);

From 14339120d3656e48738b03befd19a81d8bb99817 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=89=E1=85=B3=E1=86=BC=E1=84=8B?=
 =?UTF-8?q?=E1=85=A7=E1=86=AB?= <sylee1274@mz.co.kr>
Date: Wed, 21 May 2025 10:35:09 +0900
Subject: [PATCH 3/4] fix: delete unnecessary code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 이승연 <sylee1274@mz.co.kr>
---
 .../services/alert-manager/v2/components/ServiceList.vue    | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/services/alert-manager/v2/components/ServiceList.vue b/apps/web/src/services/alert-manager/v2/components/ServiceList.vue
index 3e012b0e1d..7a594a8aa9 100644
--- a/apps/web/src/services/alert-manager/v2/components/ServiceList.vue
+++ b/apps/web/src/services/alert-manager/v2/components/ServiceList.vue
@@ -94,8 +94,6 @@ const handleToolbox = async (options: ToolboxOptions = {}) => {
         if (isFullNameOnly) {
             serviceListPageStore.setUnhealthyPage(1);
             serviceListPageStore.setHealthyPage(1);
-            newQuery.unhealthyPage = '1';
-            newQuery.healthyPage = '1';
         }
 
         replaceUrlQuery(newQuery);
@@ -129,7 +127,7 @@ const fetchServiceList = async () => {
             && typeof searchQueryHelper.filters[0].v[0] === 'string'
             && searchQueryHelper.filters[0].v[0].length > 2;
 
-        const pageSize = isFullNameOnly ? 1000 : serviceListPageStore.unhealthyPageSize;
+        const pageSize = serviceListPageStore.unhealthyPageSize;
         const pageStart = isFullNameOnly ? 1 : ((Math.max(1, serviceListPageStore.unhealthyThisPage) - 1) * pageSize + 1);
 
         serviceListApiQueryHelper.setPage(pageStart, pageSize).setFilters([
@@ -161,7 +159,7 @@ const fetchHealthyServiceList = async () => {
             && typeof searchQueryHelper.filters[0].v[0] === 'string'
             && searchQueryHelper.filters[0].v[0].length > 2;
 
-        const pageSize = isFullNameOnly ? 1000 : serviceListPageStore.healthyPageSize;
+        const pageSize = serviceListPageStore.healthyPageSize;
         const pageStart = isFullNameOnly ? 1 : ((Math.max(1, serviceListPageStore.healthyThisPage) - 1) * pageSize + 1);
 
         healthyServiceListApiQueryHelper.setPage(pageStart, pageSize).setFilters([

From a10257567b5049e0d6b066ea02fa7224b7c60225 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=89=E1=85=B3=E1=86=BC=E1=84=8B?=
 =?UTF-8?q?=E1=85=A7=E1=86=AB?= <sylee1274@mz.co.kr>
Date: Wed, 21 May 2025 13:11:58 +0900
Subject: [PATCH 4/4] fix: fix store name as other stores
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 이승연 <sylee1274@mz.co.kr>
---
 .../services/alert-manager/v2/stores/service-list-page-store.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/services/alert-manager/v2/stores/service-list-page-store.ts b/apps/web/src/services/alert-manager/v2/stores/service-list-page-store.ts
index a91c200453..e782976b0c 100644
--- a/apps/web/src/services/alert-manager/v2/stores/service-list-page-store.ts
+++ b/apps/web/src/services/alert-manager/v2/stores/service-list-page-store.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 
-export const useServiceListPageStore = defineStore('serviceListPage', {
+export const useServiceListPageStore = defineStore('page-service-list', {
     state: () => ({
         unhealthyThisPage: 1,
         unhealthyPageSize: 10,