[pinpoint-apm#12240] Heatmap > HeatmapSetting.visualMapSuccessMax/visualMapFailMax

jihea-park · jihea-park · commit 3457c72bd98f · 2025-04-24T10:58:36.000+09:00
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/Heatmap/HeatmapFetcher.tsx b/web-frontend/src/main/v3/packages/ui/src/components/Heatmap/HeatmapFetcher.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import HeatmapChartCore, { HeatmapChartCoreProps } from './core/HeatmapChartCore';
 import {
   useServerMapSearchParameters,
-  useStoragedAxisY,
+  useStoragedSetting,
   useGetHeatmapAppData,
 } from '@pinpoint-fe/ui/src/hooks';
 import { APP_SETTING_KEYS, GetHeatmapAppData } from '@pinpoint-fe/ui/src/constants';
@@ -15,14 +15,14 @@ export type HeatmapFetcherProps = {
 
 export const HeatmapFetcher = ({ nodeData, agentId, ...props }: HeatmapFetcherProps) => {
   const { dateRange } = useServerMapSearchParameters();
-  const [y] = useStoragedAxisY(APP_SETTING_KEYS.HEATMAP_Y_AXIS_MIN_MAX, DefaultAxisY);
+  const [setting] = useStoragedSetting(APP_SETTING_KEYS.HEATMAP_SETTING);
 
   const [parameters, setParameters] = React.useState<GetHeatmapAppData.Parameters>({
     applicationName: nodeData?.applicationName,
     from: dateRange.from.getTime(),
     to: dateRange.to.getTime(),
-    minElapsedTime: Number(y?.[0]) || DefaultAxisY[0],
-    maxElapsedTime: Number(y?.[1]) || DefaultAxisY[1],
+    minElapsedTime: Number(setting?.yMin) || DefaultAxisY[0],
+    maxElapsedTime: Number(setting?.yMax) || DefaultAxisY[1],
     agentId: agentId,
   });
   const { data, isLoading } = useGetHeatmapAppData(parameters);
@@ -32,15 +32,15 @@ export const HeatmapFetcher = ({ nodeData, agentId, ...props }: HeatmapFetcherPr
       applicationName: nodeData?.applicationName,
       from: dateRange.from.getTime(),
       to: dateRange.to.getTime(),
-      minElapsedTime: Number(y?.[0]) || DefaultAxisY[0],
-      maxElapsedTime: Number(y?.[1]) || DefaultAxisY[1],
+      minElapsedTime: Number(setting?.yMin) || DefaultAxisY[0],
+      maxElapsedTime: Number(setting?.yMax) || DefaultAxisY[1],
       agentId: agentId,
     });
   }, [
     dateRange.from.getTime(),
     dateRange.to.getTime(),
-    y?.[0],
-    y?.[1],
+    setting?.yMin,
+    setting?.yMax,
     nodeData?.applicationName,
     agentId,
   ]);
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/Heatmap/HeatmapRealtimeFetcher.tsx b/web-frontend/src/main/v3/packages/ui/src/components/Heatmap/HeatmapRealtimeFetcher.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import HeatmapChartCore, { HeatmapChartCoreProps } from './core/HeatmapChartCore';
 import {
   useServerMapSearchParameters,
-  useStoragedAxisY,
+  useStoragedSetting,
   useGetHeatmapAppData,
 } from '@pinpoint-fe/ui/src/hooks';
 import {
@@ -69,14 +69,14 @@ export const HeatmapRealtimeFetcher = ({
     });
   }, [nodeData?.applicationName]);
 
-  const [y] = useStoragedAxisY(APP_SETTING_KEYS.HEATMAP_Y_AXIS_MIN_MAX, DefaultAxisY);
+  const [setting] = useStoragedSetting(APP_SETTING_KEYS.HEATMAP_SETTING);
 
   const [parameters, setParameters] = React.useState<GetHeatmapAppData.Parameters>({
     applicationName: nodeData?.applicationName,
     from: realtimeDateRange.from.getTime(),
     to: realtimeDateRange.to.getTime(),
-    minElapsedTime: Number(y?.[0]) || DefaultAxisY[0],
-    maxElapsedTime: Number(y?.[1]) || DefaultAxisY[1],
+    minElapsedTime: Number(setting?.yMin) || DefaultAxisY[0],
+    maxElapsedTime: Number(setting?.yMax) || DefaultAxisY[1],
     agentId: agentId,
   });
   const { data, isLoading } = useGetHeatmapAppData(parameters);
@@ -86,15 +86,15 @@ export const HeatmapRealtimeFetcher = ({
       applicationName: nodeData?.applicationName,
       from: realtimeDateRange.from.getTime(),
       to: realtimeDateRange.to.getTime(),
-      minElapsedTime: Number(y?.[0]) || DefaultAxisY[0],
-      maxElapsedTime: Number(y?.[1]) || DefaultAxisY[1],
+      minElapsedTime: Number(setting?.yMin) || DefaultAxisY[0],
+      maxElapsedTime: Number(setting?.yMax) || DefaultAxisY[1],
       agentId: agentId,
     });
   }, [
     realtimeDateRange.from.getTime(),
     realtimeDateRange.to.getTime(),
-    y?.[0],
-    y?.[1],
+    setting?.yMin,
+    setting?.yMax,
     nodeData?.applicationName,
     agentId,
   ]);
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/Heatmap/core/HeatmapChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/Heatmap/core/HeatmapChart.tsx
@@ -208,7 +208,7 @@ const HeatmapChart = React.forwardRef(
           {
             id: 'success',
             min: 0,
-            max: isRealtime ? 5000 : successMaxCount,
+            max: isRealtime ? setting?.visualMapSuccessMax : successMaxCount,
             calculable: true,
             seriesIndex: 0,
             orient: 'horizontal',
@@ -231,7 +231,7 @@ const HeatmapChart = React.forwardRef(
           {
             id: 'fail',
             min: 0,
-            max: isRealtime ? 100 : failMaxCount,
+            max: isRealtime ? setting?.visualMapFailMax : failMaxCount,
             calculable: true,
             seriesIndex: 1,
             orient: 'horizontal',
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/Heatmap/core/HeatmapChartCore.tsx b/web-frontend/src/main/v3/packages/ui/src/components/Heatmap/core/HeatmapChartCore.tsx
@@ -20,12 +20,12 @@ import {
   getTransactionListPath,
   getTranscationListQueryString,
   useServerMapSearchParameters,
-  useStoragedAxisY,
+  useStoragedSetting,
 } from '@pinpoint-fe/ui';
 import { FaDownload, FaExpandArrowsAlt } from 'react-icons/fa';
 import { BsGearFill } from 'react-icons/bs';
 import { CgSpinner } from 'react-icons/cg';
-import { HeatmapSetting } from './HeatmapSetting';
+import { HeatmapSetting, HeatmapSettingType } from './HeatmapSetting';
 import { HeatmapSkeleton } from '../HeatmapSkeleton';
 
 const colorSteps = 10;
@@ -66,7 +66,7 @@ const HeatmapChartCore = ({
   const [showSetting, setShowSetting] = React.useState(false);
   const [isCapturingImage, setIsCapturingImage] = React.useState(false);
 
-  const [y, setY] = useStoragedAxisY(APP_SETTING_KEYS.HEATMAP_Y_AXIS_MIN_MAX, [0, 10000]);
+  const [setting, setSetting] = useStoragedSetting(APP_SETTING_KEYS.HEATMAP_SETTING);
 
   const handleExpand = () => {
     if (isRealtime) {
@@ -88,7 +88,6 @@ const HeatmapChartCore = ({
   };
 
   const handleCaptureImage = async () => {
-    console.log('??', chartContainerRef?.current);
     if (!chartContainerRef.current) {
       return;
     }
@@ -110,8 +109,8 @@ const HeatmapChartCore = ({
     await setIsCapturingImage(false);
   };
 
-  const handleSettingApply = (newSetting: { yMin: number; yMax: number }) => {
-    setY([newSetting.yMin, newSetting.yMax]);
+  const handleSettingApply = (newSetting: HeatmapSettingType) => {
+    setSetting(newSetting);
   };
 
   const onDragEnd = (data: any, checkedLegends: any) => {
@@ -151,10 +150,7 @@ const HeatmapChartCore = ({
         ref={chartContainerRef}
         data={data}
         isRealtime={isRealtime}
-        setting={{
-          yMin: y[0],
-          yMax: y[1],
-        }}
+        setting={setting}
         onDragEnd={onDragEnd}
       />
       {(showSetting || isCapturingImage) && (
@@ -163,10 +159,8 @@ const HeatmapChartCore = ({
           {showSetting && (
             <HeatmapSetting
               className="z-10"
-              defaultValues={{
-                yMin: y?.[0],
-                yMax: y?.[1],
-              }}
+              isRealtime={isRealtime}
+              defaultValues={setting}
               onClose={() => setShowSetting(false)}
               onApply={(newSetting) => {
                 handleSettingApply(newSetting);
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/Heatmap/core/HeatmapSetting.tsx b/web-frontend/src/main/v3/packages/ui/src/components/Heatmap/core/HeatmapSetting.tsx
@@ -16,22 +16,31 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 
 export interface HeatmapSettingProps {
+  isRealtime?: boolean;
   className?: string;
   onApply?: (value: HeatmapSettingType) => void;
   onClose?: () => void;
   defaultValues?: HeatmapSettingType;
 }
 
-export const DefaultValue = { yMin: 0, yMax: 10000 };
+export const DefaultValue = {
+  yMin: 0,
+  yMax: 10000,
+  visualMapSuccessMax: 5000,
+  visualMapFailMax: 100,
+};
 
 const FormSchema = z.object({
   yMin: z.coerce.number().min(0),
   yMax: z.coerce.number().min(1),
+  visualMapSuccessMax: z.coerce.number().min(1).optional(),
+  visualMapFailMax: z.coerce.number().min(1).optional(),
 });
 
 export type HeatmapSettingType = z.infer<typeof FormSchema>;
 
 export const HeatmapSetting = ({
+  isRealtime,
   className,
   onApply,
   onClose,
@@ -50,6 +59,8 @@ export const HeatmapSetting = ({
     defaultValues: {
       yMin: defaultValues?.yMin,
       yMax: defaultValues?.yMax,
+      visualMapSuccessMax: defaultValues?.visualMapSuccessMax || DefaultValue.visualMapSuccessMax,
+      visualMapFailMax: defaultValues?.visualMapFailMax || DefaultValue.visualMapFailMax,
     },
   });
 
@@ -113,6 +124,52 @@ export const HeatmapSetting = ({
               </FormItem>
             )}
           />
+          {isRealtime && (
+            <>
+              <FormField
+                control={form.control}
+                name="visualMapSuccessMax"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-xs text-muted-foreground">
+                      VisualMap success max
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        className="w-24 h-7"
+                        onKeyDown={handleKeyDown}
+                        min={1}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="visualMapFailMax"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-xs text-muted-foreground">
+                      VisualMap fail max
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        className="w-24 h-7"
+                        onKeyDown={handleKeyDown}
+                        min={1}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </>
+          )}
           <div className="flex justify-end gap-1 mt-6">
             <Button className="text-xs h-7" variant="outline" onClick={handleClickClose}>
               Cancel
diff --git a/web-frontend/src/main/v3/packages/ui/src/constants/appSettingKeys.ts b/web-frontend/src/main/v3/packages/ui/src/constants/appSettingKeys.ts
@@ -19,7 +19,7 @@ export enum APP_SETTING_KEYS {
   TRANSACTION_LIST_RESIZABLE = 'transactionListResizable',
   TRANSACTION_DETAIL_RESIZABLE = 'transactionDetailResizable',
   SCATTER_Y_AXIS_MIN_MAX = 'scatterYAxisMinMax',
-  HEATMAP_Y_AXIS_MIN_MAX = 'heatmapYAxisMinMax',
+  HEATMAP_SETTING = 'heatmapSetting',
   SERVER_MAP_HORIZONTAL_RESIZABLE = 'serverMapHorizontalResizable',
   REALTIME_ACTIVE_REQUEST_RESIZABLE = 'realtimeActiveRequestResizable',
   CONFIG_LAST_SELECTED_APPLICATION = 'configLastSelectedApplication',
diff --git a/web-frontend/src/main/v3/packages/ui/src/hooks/utility/index.ts b/web-frontend/src/main/v3/packages/ui/src/hooks/utility/index.ts
@@ -6,6 +6,6 @@ export * from './useHeightToBottom';
 export * from './useLanguage';
 export * from './useLocalStorage';
 export * from './useServerMapLinkedData';
-export * from './useStoragedAxisY';
+export * from './useStoragedSetting';
 export * from './useTabFocus';
 // export * from './useSearchParameters';
diff --git a/web-frontend/src/main/v3/packages/ui/src/hooks/utility/useStoragedAxisY.ts b/web-frontend/src/main/v3/packages/ui/src/hooks/utility/useStoragedAxisY.ts
diff --git a/web-frontend/src/main/v3/packages/ui/src/hooks/utility/useStoragedSetting.ts b/web-frontend/src/main/v3/packages/ui/src/hooks/utility/useStoragedSetting.ts
@@ -0,0 +1,22 @@
+import React from 'react';
+import { useLocalStorage } from '@pinpoint-fe/ui/src/hooks';
+import { DefaultValue } from '@pinpoint-fe/ui/src/components/Heatmap/core/HeatmapSetting';
+
+export type HeatmapSettingType = {
+  yMin: number;
+  yMax: number;
+  visualMapSuccessMax?: number;
+  visualMapFailMax?: number;
+};
+
+export const useStoragedSetting = (
+  storageKey: string,
+  initialValue = DefaultValue,
+): [HeatmapSettingType, React.Dispatch<React.SetStateAction<HeatmapSettingType>>] => {
+  const storagedAxisY = useLocalStorage<HeatmapSettingType>(
+    storageKey,
+    initialValue as HeatmapSettingType,
+  );
+
+  return storagedAxisY;
+};
