Feat: update service landing page - pagination as service_healthy

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',
+};

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[];

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;

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({