[pinpoint-apm#10776] OpenTelemetry > Leave confirm alert

web-frontend/src/main/v3/packages/constants/src/locales/en.json

@@ -36,7 +36,9 @@
     "SUBMIT_FAIL": "Failed to submit.",
     "REMOVE_SUCCESS": "Successfully removed.",
     "TARGET_REMOVE_SUCCESS": "\"{{target}}\" has been deleted.",
-    "REMOVE_FAIL": "Failed to remove."
+    "REMOVE_FAIL": "Failed to remove.",
+    "CONFIRM_LEAVE_PAGE": "Are you sure you want to leave this page?",
+    "CHANGE_NOT_SAVED": "Changes may not be saved if you leave this page."
   },
   "APP_SELECT": {
     "FAVORITE_APP_LIST": "Favorite List",

web-frontend/src/main/v3/packages/constants/src/locales/ko.json

@@ -36,7 +36,9 @@
     "SUBMIT_FAIL": "등록에 실패하였습니다.",
     "REMOVE_SUCCESS": "삭제되었습니다.",
     "TARGET_REMOVE_SUCCESS": "\"{{target}}\"이(가) 삭제되었습니다.",
-    "REMOVE_FAIL": "삭제에 실패하였습니다."
+    "REMOVE_FAIL": "삭제에 실패하였습니다.",
+    "CONFIRM_LEAVE_PAGE": "정말로 이 페이지를 떠나시겠습니까?",
+    "CHANGE_NOT_SAVED": "이 페이지를 벗어나면 변경사항이 저장되지 않을 수 있습니다."
   },
   "APP_SELECT": {
     "FAVORITE_APP_LIST": "즐겨찾기 목록",

web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/dashboard/OpenTelemetryAlertDialog.tsx

@@ -0,0 +1,45 @@
+import { useTranslation } from 'react-i18next';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '../../../components/ui/alert-dialog';
+
+export function OpenTelemetryAlertDialog({
+  open,
+  onCancel,
+  onContinue,
+}: {
+  open?: boolean;
+  onCancel?: () => void;
+  onContinue?: () => void;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <AlertDialog open={open} onOpenChange={onCancel}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{t('COMMON.CONFIRM_LEAVE_PAGE')}</AlertDialogTitle>
+          <AlertDialogDescription>{t('COMMON.CHANGE_NOT_SAVED')}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={onCancel}>{t('COMMON.CANCEL')}</AlertDialogCancel>
+          <AlertDialogAction
+            buttonVariant={{
+              variant: 'destructive',
+            }}
+            onClick={onContinue}
+          >
+            {t('COMMON.CONTINUE')}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/dashboard/OpenTelemteryDashboardFetcher.tsx

@@ -1,6 +1,7 @@
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 import React from 'react';
+import { useBlocker } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
   AlertDialog,
@@ -32,6 +33,8 @@ import { OtlpMetricDefUserDefined } from '@pinpoint-fe/constants';
 import { DashBoard } from '../../Dashboard/DashBoard';
 import { MetricDefinitionSheet } from '../definition/MetricDefinitionSheet';
 import { OpenTelemetryMetric } from '../charts/OpenTelemetryMetric';
+import { OpenTelemetryAlertDialog } from './OpenTelemetryAlertDialog';
+import { isEqual, sortBy } from 'lodash';
 
 export interface OpenTelemetryDashboardFetcherProps {}
 
@@ -40,7 +43,10 @@ export const OpenTelemetryDashboardFetcher = () => {
   const applicationName = application?.applicationName || '';
   const { t } = useTranslation();
   const { data, refetch } = useGetOtlpMetricDefUserDefined();
-  const metrics = data?.appMetricDefinitionList;
+  const metrics = React.useMemo(
+    () => sortBy(data?.appMetricDefinitionList, ['layout.y', 'layout.x']),
+    [data],
+  );
   const { mutate: updateMetrics, isPending } = usePatchOtlpMetricDefUserDefined({
     onSuccess: (res) => {
       if (res.result === 'SUCCESS') {
@@ -58,8 +64,10 @@ export const OpenTelemetryDashboardFetcher = () => {
   const [state, setState] = React.useState<{
     layouts: ReactGridLayout.Layouts;
   }>({
-    layouts: { sm: [] },
+    layouts: { sm: [], xxs: [] },
   });
+  const prevLayouts = React.useRef<ReactGridLayout.Layouts>();
+  const [isChanged, setIsChanged] = React.useState(false);
 
   const updateMetricsWithToastMessage = (
     props: Parameters<typeof updateMetrics>[0],
@@ -82,29 +90,72 @@ export const OpenTelemetryDashboardFetcher = () => {
   };
 
   // grid-layout 변경 시 사용
-  const onLayoutChange = (layouts: ReactGridLayout.Layout[], layout: ReactGridLayout.Layouts) => {
-    console.log('layouts', layouts, layout);
+  const onLayoutChange = (
+    currentLayout: ReactGridLayout.Layout[],
+    allLayouts: ReactGridLayout.Layouts,
+  ) => {
+    console.log('layouts', currentLayout, allLayouts);
     setState((prev) => ({
       ...prev,
-      layouts: layout,
+      layouts: allLayouts,
     }));
   };
 
+  let blocker = useBlocker(
+    ({ currentLocation, nextLocation }) =>
+      isChanged && currentLocation.pathname !== nextLocation.pathname,
+  );
+
+  React.useEffect(() => {
+    const layoutForCompare = state?.layouts?.sm?.map((l) => {
+      return {
+        i: l?.i,
+        x: l?.x,
+        y: l?.y,
+        w: l?.w,
+        h: l?.h,
+      };
+    });
+    setIsChanged(!isEqual(layoutForCompare, prevLayouts.current?.sm));
+  }, [state]);
+
+  React.useEffect(() => {
+    const handleBeforeUnload = (event: Event) => {
+      event.preventDefault();
+      event.returnValue = false; // Chrome requires returnValue to be set.
+    };
+    const onPreventLeave = () => {
+      window.addEventListener('beforeunload', handleBeforeUnload);
+    };
+    const offPreventLeave = () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+    const fn = isChanged ? onPreventLeave : offPreventLeave;
+    fn();
+    return () => {
+      offPreventLeave();
+    };
+  }, [isChanged]);
+
   React.useEffect(() => {
     if (metrics && metrics?.length > 0) {
+      const newLayouts = {
+        sm: metrics?.map((metric) => {
+          const metricLayout = metric.layout;
+          return {
+            i: metric.id || '',
+            x: metricLayout.x,
+            y: metricLayout.y,
+            w: metricLayout.w,
+            h: metricLayout.h,
+          };
+        }),
+      };
+
+      prevLayouts.current = newLayouts;
+
       setState({
-        layouts: {
-          sm: metrics.map((metric) => {
-            const metricLayout = metric.layout;
-            return {
-              i: metric.id || '',
-              x: metricLayout.x,
-              y: metricLayout.y,
-              w: metricLayout.w,
-              h: metricLayout.h,
-            };
-          }),
-        },
+        layouts: newLayouts,
       });
     }
   }, [metrics]);
@@ -267,6 +318,11 @@ export const OpenTelemetryDashboardFetcher = () => {
           setCurrentEditingTarget(undefined);
         }}
       />
+      <OpenTelemetryAlertDialog
+        open={isChanged && blocker?.state === 'blocked'}
+        onCancel={() => blocker?.reset?.()}
+        onContinue={() => blocker?.proceed?.()}
+      />
     </div>
   );
 };

web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/definition/MeticDefinitionFormFetcher.tsx

@@ -515,7 +515,7 @@ export const MetricDefinitionFormFetcher = ({
                       <Separator className="my-1" />
                     </>
                   )}
-                  <div className="overflow-y-scroll flex flex-col gap-1 py-1">
+                  <div className="flex flex-col gap-1 py-1 overflow-y-scroll">
                     {propertyLegendList?.map((legendItem, i) => {
                       return (
                         <FormField
@@ -547,7 +547,7 @@ export const MetricDefinitionFormFetcher = ({
                                     }}
                                   />
                                 </FormControl>
-                                <FormLabel className="text-sm font-normal w-auto break-all">
+                                <FormLabel className="w-auto text-sm font-normal break-all">
                                   {legendItem?.name}
                                 </FormLabel>
                               </FormItem>