From 312f4bbe849c3c4f41b300f9b0b5ae343bbbef44 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: Thu, 8 May 2025 20:02:39 +0900
Subject: [PATCH] feat: update service landing page - pagination as
 service_healthy (#5836)

* feat: update service schema model

Signed-off-by: seungyeoneeee <sylee1274@mz.co.kr>

* feat: update service landing page - pagination as service_healthy

Signed-off-by: seungyeoneeee <sylee1274@mz.co.kr>

---------

Signed-off-by: seungyeoneeee <sylee1274@mz.co.kr>
---
 .../schema/alert-manager/service/constants.ts |   5 +
 .../src/schema/alert-manager/service/model.ts |   3 +-
 .../src/schema/alert-manager/service/type.ts  |   2 +
 .../v2/components/ServiceDetailHeader.vue     |  17 +-
 .../v2/components/ServiceList.vue             | 249 +++++++++++++-----
 .../v2/stores/service-list-page-store.ts      |  18 ++
 6 files changed, 224 insertions(+), 70 deletions(-)
 create mode 100644 apps/web/src/services/alert-manager/v2/stores/service-list-page-store.ts

diff --git a/apps/web/src/schema/alert-manager/service/constants.ts b/apps/web/src/schema/alert-manager/service/constants.ts
index 646b22b57c..a0afd1eb66 100644
--- a/apps/web/src/schema/alert-manager/service/constants.ts
+++ b/apps/web/src/schema/alert-manager/service/constants.ts
@@ -19,3 +19,8 @@ export const SERVICE_ALERTS_TYPE = {
     ACKNOWLEDGED: 'ACKNOWLEDGED',
     RESOLVED: 'RESOLVED',
 } as const;
+
+export const SERVICE_HEALTHY_TYPE = {
+    HEALTHY: 'HEALTHY',
+    UNHEALTHY: 'UNHEALTHY',
+};
diff --git a/apps/web/src/schema/alert-manager/service/model.ts b/apps/web/src/schema/alert-manager/service/model.ts
index 9abedbd232..bad20bc731 100644
--- a/apps/web/src/schema/alert-manager/service/model.ts
+++ b/apps/web/src/schema/alert-manager/service/model.ts
@@ -1,6 +1,6 @@
 import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
-    AlertsInfoType, AlertsType, MembersType, ServiceOptionsType,
+    AlertsInfoType, AlertsType, HealthyType, MembersType, ServiceOptionsType,
 } from '@/schema/alert-manager/service/type';
 
 export interface ServiceModel {
@@ -9,6 +9,7 @@ export interface ServiceModel {
     service_key: string;
     description: string;
     members: Record<MembersType, string[]>;
+    service_healthy: HealthyType;
     options: ServiceOptionsType;
     channels?: string[];
     webhooks?: string[];
diff --git a/apps/web/src/schema/alert-manager/service/type.ts b/apps/web/src/schema/alert-manager/service/type.ts
index e1e93dd0c5..67cc5867ec 100644
--- a/apps/web/src/schema/alert-manager/service/type.ts
+++ b/apps/web/src/schema/alert-manager/service/type.ts
@@ -1,11 +1,13 @@
 import type {
     NOTIFICATION_URGENCY, RECOVERY_MODE, MEMBERS_TYPE, SERVICE_ALERTS_TYPE,
+    SERVICE_HEALTHY_TYPE,
 } from '@/schema/alert-manager/service/constants';
 
 export type NotificationUrgencyType = typeof NOTIFICATION_URGENCY[keyof typeof NOTIFICATION_URGENCY];
 export type RecoveryModeType = typeof RECOVERY_MODE[keyof typeof RECOVERY_MODE];
 export type MembersType = typeof MEMBERS_TYPE[keyof typeof MEMBERS_TYPE];
 export type AlertsType = typeof SERVICE_ALERTS_TYPE[keyof typeof SERVICE_ALERTS_TYPE];
+export type HealthyType = typeof SERVICE_HEALTHY_TYPE[keyof typeof SERVICE_HEALTHY_TYPE];
 
 export type ServiceOptionsType = {
     notification_urgency: NotificationUrgencyType;
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 b377f02207..245f93d81e 100644
--- a/apps/web/src/services/alert-manager/v2/components/ServiceDetailHeader.vue
+++ b/apps/web/src/services/alert-manager/v2/components/ServiceDetailHeader.vue
@@ -22,6 +22,7 @@ import ServiceDetailEditModal from '@/services/alert-manager/v2/components/Servi
 import ServiceDetailMemberModal from '@/services/alert-manager/v2/components/ServiceDetailMemberModal.vue';
 import { ALERT_MANAGER_ROUTE } from '@/services/alert-manager/v2/routes/route-constant';
 import { useServiceDetailPageStore } from '@/services/alert-manager/v2/stores/service-detail-page-store';
+import { useServiceListPageStore } from '@/services/alert-manager/v2/stores/service-list-page-store';
 import type { Service } from '@/services/alert-manager/v2/types/alert-manager-type';
 
 type ModalType = 'edit' | 'delete' | 'member' | 'alert';
@@ -30,6 +31,8 @@ const serviceDetailPageStore = useServiceDetailPageStore();
 const serviceDetailPageState = serviceDetailPageStore.state;
 const serviceDetailPageGetters = serviceDetailPageStore.getters;
 
+const serviceListPageStore = useServiceListPageStore();
+
 const router = useRouter();
 const route = useRoute();
 
@@ -75,7 +78,19 @@ const handleActionModal = (type: ModalType) => {
 };
 const handleGoBackButton = () => {
     if (state.isSettingMode) {
-        router.push({ name: ALERT_MANAGER_ROUTE.SERVICE._NAME }).catch(() => {});
+        const validUnhealthyPage = (!Number.isNaN(serviceListPageStore.unhealthyThisPage) && serviceListPageStore.unhealthyThisPage > 0)
+            ? serviceListPageStore.unhealthyThisPage
+            : 1;
+        const validHealthyPage = (!Number.isNaN(serviceListPageStore.healthyThisPage) && serviceListPageStore.healthyThisPage > 0)
+            ? serviceListPageStore.healthyThisPage
+            : 1;
+        router.push({
+            name: ALERT_MANAGER_ROUTE.SERVICE._NAME,
+            query: {
+                unhealthyPage: validUnhealthyPage.toString(),
+                healthyPage: validHealthyPage.toString(),
+            },
+        }).catch(() => {});
         return;
     }
     replaceUrlQuery({
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 ff2982e235..c837126e70 100644
--- a/apps/web/src/services/alert-manager/v2/components/ServiceList.vue
+++ b/apps/web/src/services/alert-manager/v2/components/ServiceList.vue
@@ -1,36 +1,36 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive } from 'vue';
-import { useRouter } from 'vue-router/composables';
-
-import isEmpty from 'lodash/isEmpty';
+import { onMounted, reactive, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router/composables';
 
 import { makeDistinctValueHandler } from '@cloudforet/core-lib/component-util/query-search';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import {
-    PToolbox, PDataLoader, PEmpty, PButton,
+    PToolbox, PDataLoader, PEmpty, PButton, PPagination,
 } from '@cloudforet/mirinae';
 import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/type';
 
 import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ServiceListParameters } from '@/schema/alert-manager/service/api-verbs/list';
+import { SERVICE_HEALTHY_TYPE } from '@/schema/alert-manager/service/constants';
 import type { ServiceModel } from '@/schema/alert-manager/service/model';
 
+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';
-import type { AlertManagementTableHandlerType } from '@/services/alert-manager/v2/types/alert-manager-type';
-
-const pageSizeOptions = [15, 30, 45];
+import { useServiceListPageStore } from '@/services/alert-manager/v2/stores/service-list-page-store';
 
 const { hasReadWriteAccess } = usePageEditableStatus();
 
 const router = useRouter();
+const route = useRoute();
 
-const SERVICE_SEARCH_HANDLER: AlertManagementTableHandlerType = {
+const SERVICE_SEARCH_HANDLER = {
     keyItemSets: [{
         title: 'Properties',
         items: [
@@ -44,108 +44,221 @@ const SERVICE_SEARCH_HANDLER: AlertManagementTableHandlerType = {
 
 const state = reactive({
     loading: true,
+    healthyLoading: true,
     totalCount: 0,
-    serviceList: [] as ServiceModel[],
-    alertServiceList: computed<ServiceModel[]>(() => state.serviceList.filter((item) => !isEmpty(item?.alerts.TRIGGERED) || !isEmpty(item?.alerts.ACKNOWLEDGED))),
-    healthyServiceList: computed<ServiceModel[]>(() => state.serviceList.filter((item) => isEmpty(item?.alerts.TRIGGERED) && isEmpty(item?.alerts.ACKNOWLEDGED))),
+    healthyTotalCount: 0,
+    alertServiceList: [] as ServiceModel[],
+    healthyServiceList: [] as ServiceModel[],
 });
 
-const serviceListApiQueryHelper = new ApiQueryHelper().setSort('created_at', true)
-    .setPage(1, 15);
+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 handleChangeToolbox = async (options: ToolboxOptions) => {
+const handleToolbox = async (options: ToolboxOptions) => {
     if (options.queryTags !== undefined) queryTagHelper.setQueryTags(options.queryTags);
-    if (options.pageStart !== undefined) serviceListApiQueryHelper.setPageStart(options.pageStart);
-    if (options.pageLimit !== undefined) serviceListApiQueryHelper.setPageLimit(options.pageLimit);
+    await fetchBothLists();
+};
+
+const fetchBothLists = async () => {
+    await Promise.all([
+        fetchServiceList(),
+        fetchHealthyServiceList(),
+    ]);
+};
+
+const handleUnhealthyPageChange = async () => {
     await fetchServiceList();
 };
-const handleClickCreateButton = () => {
-    router.push({
-        name: ALERT_MANAGER_ROUTE.SERVICE.CREATE._NAME,
-    }).catch(() => {});
+
+const handleHealthyPageChange = async () => {
+    await fetchHealthyServiceList();
 };
 
 const fetchServiceList = async () => {
     state.loading = true;
     try {
-        serviceListApiQueryHelper.setFilters([
+        const validPage = Math.max(1, serviceListPageStore.unhealthyThisPage);
+        const pageStart = (validPage - 1) * serviceListPageStore.unhealthyPageSize + 1;
+
+        serviceListApiQueryHelper.setPage(pageStart, serviceListPageStore.unhealthyPageSize).setFilters([
             ...queryTagHelper.filters.value,
+            { k: 'service_healthy', v: SERVICE_HEALTHY_TYPE.UNHEALTHY, o: '=' },
         ]);
         const { results, total_count } = await SpaceConnector.clientV2.alertManager.service.list<ServiceListParameters, ListResponse<ServiceModel>>({
             query: serviceListApiQueryHelper.data,
             details: true,
         });
-        state.serviceList = results || [];
+        state.alertServiceList = results || [];
         state.totalCount = total_count || 0;
     } catch (e) {
         ErrorHandler.handleError(e);
-        state.serviceList = [];
+        state.alertServiceList = [];
         state.totalCount = 0;
     } finally {
         state.loading = false;
     }
 };
 
+const fetchHealthyServiceList = async () => {
+    state.healthyLoading = true;
+    try {
+        const validPage = Math.max(1, serviceListPageStore.healthyThisPage);
+        const pageStart = (validPage - 1) * serviceListPageStore.healthyPageSize + 1;
+
+        healthyServiceListApiQueryHelper.setPage(pageStart, serviceListPageStore.healthyPageSize).setFilters([
+            ...queryTagHelper.filters.value,
+            { k: 'service_healthy', v: SERVICE_HEALTHY_TYPE.HEALTHY, o: '=' },
+        ]);
+        const { results, total_count } = await SpaceConnector.clientV2.alertManager.service.list<ServiceListParameters, ListResponse<ServiceModel>>({
+            query: healthyServiceListApiQueryHelper.data,
+            details: true,
+        });
+        state.healthyServiceList = results || [];
+        state.healthyTotalCount = total_count || 0;
+    } catch (e) {
+        ErrorHandler.handleError(e);
+        state.healthyServiceList = [];
+        state.healthyTotalCount = 0;
+    } finally {
+        state.healthyLoading = false;
+    }
+};
+
+const handleClickCreateButton = () => {
+    router.push({
+        name: ALERT_MANAGER_ROUTE.SERVICE.CREATE._NAME,
+    }).catch(() => {});
+};
+
+const handleNavigateToDetail = (serviceId: string) => {
+    const validUnhealthyPage = (!Number.isNaN(serviceListPageStore.unhealthyThisPage) && serviceListPageStore.unhealthyThisPage > 0)
+        ? serviceListPageStore.unhealthyThisPage
+        : 1;
+    const validHealthyPage = (!Number.isNaN(serviceListPageStore.healthyThisPage) && serviceListPageStore.healthyThisPage > 0)
+        ? serviceListPageStore.healthyThisPage
+        : 1;
+
+    router.push({
+        name: ALERT_MANAGER_ROUTE.SERVICE.DETAIL._NAME,
+        params: { serviceId },
+        query: {
+            unhealthyPage: validUnhealthyPage.toString(),
+            healthyPage: validHealthyPage.toString(),
+        },
+    }).catch(() => {});
+};
+
 onMounted(async () => {
-    await fetchServiceList();
+    const { 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);
+
+    await fetchBothLists();
+});
+
+watch(() => serviceListPageStore.unhealthyThisPage, (val) => {
+    replaceUrlQuery({
+        unhealthyPage: String(val),
+        healthyPage: String(serviceListPageStore.healthyThisPage),
+    });
+    handleUnhealthyPageChange();
+});
+
+watch(() => serviceListPageStore.healthyThisPage, (val) => {
+    replaceUrlQuery({
+        unhealthyPage: String(serviceListPageStore.unhealthyThisPage),
+        healthyPage: String(val),
+    });
+    handleHealthyPageChange();
 });
 </script>
 
 <template>
-    <div class="service-list flex flex-col gap-2">
+    <div class="service-list flex flex-col gap-6">
         <p-toolbox search-type="query"
                    searchable
                    filters-visible
-                   :page-size-options="pageSizeOptions"
-                   :page-size="15"
+                   :page-size-changeable="false"
+                   :pagination-visible="false"
                    :query-tags="queryTags"
                    :key-item-sets="SERVICE_SEARCH_HANDLER.keyItemSets"
                    :value-handler-map="SERVICE_SEARCH_HANDLER.valueHandlerMap"
-                   :total-count="state.totalCount"
-                   @change="handleChangeToolbox"
-                   @refresh="fetchServiceList"
+                   @change="handleToolbox"
+                   @refresh="fetchBothLists"
         />
-        <p-data-loader :loading="state.loading"
-                       :data="state.serviceList"
-                       loader-backdrop-color="transparent"
-                       class="loader-wrapper"
-        >
-            <div class="flex flex-col gap-4">
-                <service-list-content v-if="state.alertServiceList.length > 0"
-                                      :list="state.alertServiceList"
-                                      type="alert"
-                />
-                <service-list-content v-if="state.healthyServiceList.length > 0"
-                                      :list="state.healthyServiceList"
-                                      type="healthy"
-                />
-            </div>
-            <template #no-data>
-                <div class="pt-12">
-                    <p-empty show-image
-                             :show-button="hasReadWriteAccess"
-                    >
-                        <template #image>
-                            <img src="../../../../assets/images/img_jellyocto-with-a-telescope.png"
-                                 alt="empty-image"
-                            >
-                        </template>
-                        <template v-if="hasReadWriteAccess"
-                                  #button
+
+        <section>
+            <p-data-loader :loading="state.loading"
+                           :data="state.alertServiceList"
+                           loader-backdrop-color="transparent"
+                           class="loader-wrapper"
+            >
+                <div>
+                    <service-list-content v-if="state.alertServiceList.length > 0"
+                                          :list="state.alertServiceList"
+                                          type="alert"
+                                          @navigate-to-detail="handleNavigateToDetail"
+                    />
+                    <div class="flex justify-center mt-4">
+                        <p-pagination
+                            :total-count="state.totalCount"
+                            :this-page.sync="serviceListPageStore.unhealthyThisPage"
+                            :page-size.sync="serviceListPageStore.unhealthyPageSize"
+                            @change="handleUnhealthyPageChange"
+                        />
+                    </div>
+                </div>
+                <div>
+                    <service-list-content v-if="state.healthyServiceList.length > 0"
+                                          :list="state.healthyServiceList"
+                                          type="healthy"
+                                          @navigate-to-detail="handleNavigateToDetail"
+                    />
+                    <div class="flex justify-center mt-4">
+                        <p-pagination v-if="state.healthyTotalCount > serviceListPageStore.healthyPageSize"
+                                      :total-count="state.healthyTotalCount"
+                                      :this-page.sync="serviceListPageStore.healthyThisPage"
+                                      :page-size.sync="serviceListPageStore.healthyPageSize"
+                                      @change="handleHealthyPageChange"
+                        />
+                    </div>
+                </div>
+                <template #no-data>
+                    <div class="pt-12">
+                        <p-empty show-image
+                                 :show-button="hasReadWriteAccess"
                         >
-                            <p-button icon-left="ic_plus_bold"
-                                      @click="handleClickCreateButton"
+                            <template #image>
+                                <img src="../../../../assets/images/img_jellyocto-with-a-telescope.png"
+                                     alt="empty-image"
+                                >
+                            </template>
+                            <template v-if="hasReadWriteAccess"
+                                      #button
                             >
-                                {{ $t('ALERT_MANAGER.SERVICE.NO_DATA') }}
-                            </p-button>
-                        </template>
-                        {{ $t('ALERT_MANAGER.SERVICE.NO_DATA_DESC') }}
-                    </p-empty>
-                </div>
-            </template>
-        </p-data-loader>
+                                <p-button icon-left="ic_plus_bold"
+                                          @click="handleClickCreateButton"
+                                >
+                                    {{ $t('ALERT_MANAGER.SERVICE.NO_DATA') }}
+                                </p-button>
+                            </template>
+                            {{ $t('ALERT_MANAGER.SERVICE.NO_DATA_DESC') }}
+                        </p-empty>
+                    </div>
+                </template>
+            </p-data-loader>
+        </section>
     </div>
 </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
new file mode 100644
index 0000000000..b63fda6296
--- /dev/null
+++ b/apps/web/src/services/alert-manager/v2/stores/service-list-page-store.ts
@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia';
+
+export const useServiceListPageStore = defineStore('serviceListPage', {
+    state: () => ({
+        unhealthyThisPage: 1,
+        unhealthyPageSize: 10,
+        healthyThisPage: 1,
+        healthyPageSize: 6,
+    }),
+    actions: {
+        setUnhealthyPage(page: number) {
+            this.unhealthyThisPage = page;
+        },
+        setHealthyPage(page: number) {
+            this.healthyThisPage = page;
+        },
+    },
+});