From 30c9d07958cf28024cf334c5652a258479664ac2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=8A=B9=EC=97=B0?=
 <165753731+seungyeoneeee@users.noreply.github.com>
Date: Tue, 10 Jun 2025 13:49:41 +0900
Subject: [PATCH] feat(alert-service): enhance pagination logic in service page
 (#5934)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: enhance pagination logic in service page

Signed-off-by: 이승연 <sylee1274@mz.co.kr>

* feat: apply debounced resize and move window logic out of store

Signed-off-by: 이승연 <sylee1274@mz.co.kr>

---------

Signed-off-by: 이승연 <sylee1274@mz.co.kr>
---
 .../v2/components/ServiceList.vue             | 22 ++++++++++++-
 .../v2/components/ServiceListContent.vue      | 32 +++++++++++++++++--
 .../v2/stores/service-list-page-store.ts      |  5 ++-
 3 files changed, 54 insertions(+), 5 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 09c92d1dff..b2afcce0a3 100644
--- a/apps/web/src/services/alert-manager/v2/components/ServiceList.vue
+++ b/apps/web/src/services/alert-manager/v2/components/ServiceList.vue
@@ -6,6 +6,8 @@ import {
     useRoute, useRouter,
 } from 'vue-router/composables';
 
+import { debounce } from 'lodash';
+
 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';
@@ -197,7 +199,25 @@ const handleNavigateToDetail = (serviceId: string) => {
     }).catch(() => {});
 };
 
+// ✅ event listener to change healthy page size (6 -> 8) when window width is 1920px or more
+const handleResize = debounce(async () => {
+    const width = window.innerWidth;
+    const newPageSize = width >= 1920 ? 8 : 6;
+
+    if (newPageSize !== serviceListPageStore.healthyPageSize) {
+        const oldPageSize = serviceListPageStore.healthyPageSize;
+        const oldPage = serviceListPageStore.healthyThisPage;
+        const startIndex = (oldPage - 1) * oldPageSize;
+        const newPage = Math.floor(startIndex / newPageSize) + 1;
+
+        serviceListPageStore.setHealthyPageSize(newPageSize);
+        serviceListPageStore.setHealthyPage(newPage);
+        fetchHealthyServiceList();
+    }
+}, 300);
+
 onMounted(async () => {
+    await handleResize();
     const { serviceName, unhealthyPage, healthyPage } = route.query;
 
     if (serviceName && typeof serviceName === 'string') {
@@ -254,7 +274,7 @@ watch(() => serviceListPageStore.healthyThisPage, (val) => {
     handleHealthyPageChange();
 });
 
-watch(async () => route.query.serviceName, async (newServiceName) => {
+watch(async () => route.query.serviceName, async (newServiceName: any) => {
     if (typeof newServiceName === 'string') {
         const nameValues = newServiceName.split(',').map((name) => ({
             key: { name: 'name' },
diff --git a/apps/web/src/services/alert-manager/v2/components/ServiceListContent.vue b/apps/web/src/services/alert-manager/v2/components/ServiceListContent.vue
index e2514e95af..a2c16d136c 100644
--- a/apps/web/src/services/alert-manager/v2/components/ServiceListContent.vue
+++ b/apps/web/src/services/alert-manager/v2/components/ServiceListContent.vue
@@ -121,7 +121,7 @@ const handleClickEscalationPolicy = (id: string, escalationPolicyId: string) =>
             />
             <span>{{ state.title }}</span>
         </div>
-        <div class="collapsible-contents flex flex-wrap gap-4">
+        <div class="collapsible-contents">
             <p-select-card v-for="(item, idx) in props.list"
                            :key="`service-item-${idx}`"
                            class="card"
@@ -253,7 +253,34 @@ const handleClickEscalationPolicy = (id: string, escalationPolicyId: string) =>
     .collapsible-contents {
         opacity: 1;
         transition: opacity 0.3s ease, visibility 0.3s ease;
+
+        @apply grid grid-cols-3 gap-4;
+    }
+
+    @media (min-width: 120rem) {
+        .collapsible-contents {
+            @apply grid grid-cols-4 gap-4;
+        }
+    }
+
+    @screen laptop {
+        .collapsible-contents {
+            @apply grid grid-cols-3 gap-4;
+        }
     }
+
+    @screen tablet {
+        .collapsible-contents {
+            @apply grid grid-cols-2 gap-4;
+        }
+    }
+
+    @screen mobile {
+        .collapsible-contents {
+            @apply grid grid-cols-1 gap-4;
+        }
+    }
+
     &.is-collapsed {
         .collapsible-title {
             .arrow-button {
@@ -270,8 +297,7 @@ const handleClickEscalationPolicy = (id: string, escalationPolicyId: string) =>
         }
     }
     .card {
-        width: 28rem;
-        max-width: 28rem;
+        min-width: 25rem;
         padding: 1.25rem 1.5rem 1rem 1.5rem;
         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
         .card-inner-wrapper {
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 e782976b0c..f88ad050e9 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
@@ -5,7 +5,7 @@ import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 export const useServiceListPageStore = defineStore('page-service-list', {
     state: () => ({
         unhealthyThisPage: 1,
-        unhealthyPageSize: 10,
+        unhealthyPageSize: 12,
         healthyThisPage: 1,
         healthyPageSize: 6,
         searchFilters: [] as ConsoleFilter[],
@@ -20,5 +20,8 @@ export const useServiceListPageStore = defineStore('page-service-list', {
         setSearchFilters(filters: ConsoleFilter[]) {
             this.searchFilters = filters;
         },
+        setHealthyPageSize(size: number) {
+            this.healthyPageSize = size;
+        },
     },
 });