[#10776] Field and tag can be selected as 1:N

pinpoint-apm · Oct 8, 2024 · 34527c4 · 34527c4
1 parent 475503b
commit 34527c4
Show file tree

Hide file tree

Showing 22 changed files with 507 additions and 228 deletions.
diff --git a/web-frontend/src/main/v3/packages/constants/src/locales/en.json b/web-frontend/src/main/v3/packages/constants/src/locales/en.json
@@ -66,7 +66,8 @@
     "CREATE_METRIC_DESC": "Create a new metric",
     "SAVE_DASHBOARD": "Save Dashboard",
     "SAVE_DASHBOARD_SUCCESS": "The current dashboard status has been saved.",
-    "SAVE_DASHBOARD_FAIL": "Saving the current dashboard status failed."
+    "SAVE_DASHBOARD_FAIL": "Saving the current dashboard status failed.",
+    "FIELD_OR_TAG_SELECTBOX_DESC": "Field, tag have the relationships 1(field):N(tag), 1(tag):N(field).\nIf you first select the attribute that results in '1' in 1:N, the 'N' attribute is determined automatically."
   },
   "CONFIGURATION": {
     "GENERAL": {

diff --git a/web-frontend/src/main/v3/packages/constants/src/locales/ko.json b/web-frontend/src/main/v3/packages/constants/src/locales/ko.json
@@ -66,7 +66,8 @@
     "CREATE_METRIC_DESC": "새로운 메트릭을 생성합니다.",
     "SAVE_DASHBOARD": "대시보드 저장",
     "SAVE_DASHBOARD_SUCCESS": "현재 대시보드 상태를 저장했습니다.",
-    "SAVE_DASHBOARD_FAIL": "현재 대시보드 상태 저장에 실패했습니다."
+    "SAVE_DASHBOARD_FAIL": "현재 대시보드 상태 저장에 실패했습니다.",
+    "FIELD_OR_TAG_SELECTBOX_DESC": "Field, tag는 1(field):N(tag), 1(tag):N(field) 관계를 갖습니다.\n1:N 에서 '1'이 되는 속성을 먼저 선택하시면 'N' 속성은 자동으로 결정됩니다."
   },
   "CONFIGURATION": {
     "GENERAL": {

diff --git a/web-frontend/src/main/v3/packages/constants/src/types/OtlpMetricData.ts b/web-frontend/src/main/v3/packages/constants/src/types/OtlpMetricData.ts
@@ -1,4 +1,18 @@
 export namespace OtlpMetricData {
+  export interface Body {
+    applicationName: string;
+    metricGroupName: string;
+    agentId?: string;
+    metricName: string;
+    tagGroupList: string[];
+    from: number;
+    to: number;
+    chartType?: string;
+    aggregationFunction?: string;
+    fieldNameList: string[];
+    primaryForFieldAndTagRelation: 'tag' | 'field';
+  }
+
   export interface Parameters {
     applicationName: string;
     metricGroupName: string;

diff --git a/web-frontend/src/main/v3/packages/constants/src/types/OtlpMetricDefProperty.ts b/web-frontend/src/main/v3/packages/constants/src/types/OtlpMetricDefProperty.ts
@@ -17,15 +17,22 @@ export namespace OtlpMetricDefProperty {
   export interface MetricList {
     metricName: string;
     tagClusterList: TagCluster[];
+    fieldClusterList: FieldCluster[];
   }
 
   export interface TagCluster {
-    tags: string;
+    tagGroup: string;
     fieldAndUnitList: FieldAndUnit[];
   }
 
   export interface FieldAndUnit {
     fieldName: string;
     unit: string;
   }
+
+  export interface FieldCluster {
+    fieldName: string;
+    unit: string;
+    tagGroupList: string[];
+  }
 }
diff --git a/web-frontend/src/main/v3/packages/constants/src/types/OtlpMetricDefUserDefined.ts b/web-frontend/src/main/v3/packages/constants/src/types/OtlpMetricDefUserDefined.ts
@@ -23,13 +23,15 @@ export namespace OtlpMetricDefUserDefined {
     title: string;
     metricGroupName: string;
     metricName: string;
+    primaryForFieldAndTagRelation: 'tag' | 'field';
     fieldNameList: string[];
-    tags: string;
+    tagGroupList: string[];
     unit?: string;
     stack: boolean;
     chartType: string;
     layout: Layout;
     aggregationFunction: string;
+    schemaVersion?: number;
   }
 
   export interface Layout {

diff --git a/web-frontend/src/main/v3/packages/hooks/src/api/index.ts b/web-frontend/src/main/v3/packages/hooks/src/api/index.ts
@@ -56,6 +56,7 @@ export * from './usePostConfigGroupMember';
 export * from './usePostConfigUserGroup';
 export * from './usePostConfigUsers';
 export * from './usePostTransactionMetaData';
+export * from './usePostOtlpMetricData';
 export * from './usePutConfigUsers';
 export * from './useWebhookIncludeMutaion';
 export * from './useWebhookMutation';
diff --git a/web-frontend/src/main/v3/packages/hooks/src/api/useGetOtlpMetricData.ts b/web-frontend/src/main/v3/packages/hooks/src/api/useGetOtlpMetricData.ts
@@ -16,9 +16,10 @@ export const useGetOtlpMetricData = ({
   metricGroupName,
   metricName,
   chartType,
-  tags,
-  aggregationFunction,
+  primaryForFieldAndTagRelation,
+  tagGroupList,
   fieldNameList,
+  aggregationFunction,
 }: OtlpMetricDefUserDefined.Metric) => {
   const { application, dateRange } = useOpenTelemetrySearchParameters();
   const queryParams = {
@@ -28,9 +29,10 @@ export const useGetOtlpMetricData = ({
     metricGroupName,
     metricName,
     chartType,
-    tags,
+    primaryForFieldAndTagRelation,
+    tagGroupList: tagGroupList?.join('&tagGroupList='),
     aggregationFunction,
-    fieldNameList: fieldNameList.join(','),
+    fieldNameList: fieldNameList?.join('&fieldNameList='),
   };
   const queryString = getQueryString(queryParams);
 

diff --git a/web-frontend/src/main/v3/packages/hooks/src/api/usePostOtlpMetricData.ts b/web-frontend/src/main/v3/packages/hooks/src/api/usePostOtlpMetricData.ts
@@ -0,0 +1,36 @@
+import { END_POINTS, OtlpMetricData, OtlpMetricDefUserDefined } from '@pinpoint-fe/constants';
+import { UseMutationOptions, useMutation } from '@tanstack/react-query';
+import { useOpenTelemetrySearchParameters } from '../searchParameters';
+
+export const usePostOtlpMetricData = (
+  options?: UseMutationOptions<OtlpMetricData.Response, unknown, OtlpMetricData.Body, unknown>,
+) => {
+  const { application, dateRange } = useOpenTelemetrySearchParameters();
+
+  const postData = async (bodyData: OtlpMetricData.Body) => {
+    try {
+      // Fetch를 사용하여 POST 요청을 보냅니다.
+      const response = await fetch(`${END_POINTS.OTLP_METRIC_DATA}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          ...bodyData,
+          from: dateRange.from.getTime(),
+          to: dateRange.to.getTime(),
+        }),
+      });
+      const data = await response.json();
+
+      return data;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  return useMutation({
+    mutationFn: postData,
+    ...options,
+  });
+};
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/Agent/AgentListFetcher.tsx b/web-frontend/src/main/v3/packages/ui/src/components/Agent/AgentListFetcher.tsx
@@ -90,7 +90,7 @@ export const AgentListFetcher = ({
                   })}
                 >
                   <Tooltip>
-                    <TooltipTrigger className="w-full">
+                    <TooltipTrigger className="w-full" asChild>
                       <div className="flex items-center">
                         <div className="truncate">{group.groupName}</div>
                         {isCollapsible && (
@@ -120,7 +120,7 @@ export const AgentListFetcher = ({
                           agentRenderer(instance)
                         ) : (
                           <Tooltip>
-                            <TooltipTrigger>
+                            <TooltipTrigger asChild>
                               <div className="grid grid-cols-[1rem_auto] items-center">
                                 {selectedAgentId === instance.agentId ? <RxCheck /> : <span />}
                                 <div className="truncate">{instance.agentId}</div>

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/Dashboard/Widget.tsx b/web-frontend/src/main/v3/packages/ui/src/components/Dashboard/Widget.tsx
@@ -37,7 +37,7 @@ export const Widget = ({ title, children, onClickEdit, onClickDelete }: WidgetPr
       >
         <h3 className="flex-1 pl-1 text-sm truncate">{title}</h3>
         <DropdownMenu>
-          <DropdownMenuTrigger className="@md:hidden">
+          <DropdownMenuTrigger className="@md:hidden" asChild>
             <Button variant="ghost" className="px-2 py-1 rounded-sm h-7">
               <RxDotsVertical />
             </Button>

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/HelpPopover/HelpPopover.tsx b/web-frontend/src/main/v3/packages/ui/src/components/HelpPopover/HelpPopover.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
+import { MdHelp } from 'react-icons/md';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+export const HelpPopover = ({
+  title,
+  content,
+}: {
+  title?: React.ReactNode;
+  content?: React.ReactNode;
+}) => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <MdHelp />
+      </PopoverTrigger>
+      <PopoverPrimitive.Portal>
+        <PopoverContent className="z-[9999]">
+          {title && <h4 className="mb-4 font-medium leading-none">{title}</h4>}
+          {content}
+        </PopoverContent>
+      </PopoverPrimitive.Portal>
+    </Popover>
+  );
+};
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/HelpPopover/index.tsx b/web-frontend/src/main/v3/packages/ui/src/components/HelpPopover/index.tsx
@@ -0,0 +1 @@
+export * from './HelpPopover';
diff --git a/...ontend/src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryChart.tsx b/...ontend/src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryChart.tsx
@@ -15,6 +15,7 @@ import {
   OpenTelemetryChartCommon,
   OpenTelemetryChartCommonProps,
 } from './OpenTelemetryChartCommon';
+import { toCssVariable } from '../../../lib/charts/util';
 
 const CHART_DEFINITION = {
   line: {
@@ -78,8 +79,8 @@ export const OpenTelemetryChart = ({
             key={key}
             dataKey={key}
             stackId={getStackId(key)}
-            fill={`var(--color-${key})`}
-            stroke={`var(--color-${key})`}
+            fill={`var(--color-${toCssVariable(key)})`}
+            stroke={`var(--color-${toCssVariable(key)})`}
             {...chartChildProps}
           />
         ))}

diff --git a/.../src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryChartCommon.tsx b/.../src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryChartCommon.tsx
@@ -53,7 +53,7 @@ export const OpenTelemetryChartCommon = ({
         }
         {...restTooltipConfig}
       />
-      <ChartLegend content={<ChartLegendContent />} />
+      <ChartLegend className="block overflow-hidden" content={<ChartLegendContent />} />
     </>
   );
 };
diff --git a/...n/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryChartTooltipContent.tsx b/...n/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryChartTooltipContent.tsx
@@ -54,7 +54,7 @@ export const OpenTelemetryChartTooltipContent = ({
 
   return (
     active && (
-      <div className="grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl">
+      <div className="grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl w-max">
         {renderTooltipLabel()}
         <div className="grid gap-1.5">
           {tooltipPayload?.map((item, index) => {
@@ -70,25 +70,23 @@ export const OpenTelemetryChartTooltipContent = ({
                 )}
               >
                 <>
-                  {
-                    <div
-                      className={cn(
-                        'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
-                        {
-                          'h-2.5 w-2.5': indicator === 'dot',
-                          'w-1': indicator === 'line',
-                          'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
-                          'my-0.5': indicator === 'dashed',
-                        },
-                      )}
-                      style={
-                        {
-                          '--color-bg': indicatorColor,
-                          '--color-border': indicatorColor,
-                        } as React.CSSProperties
-                      }
-                    />
-                  }
+                  <div
+                    className={cn(
+                      'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
+                      {
+                        'h-2.5 w-2.5': indicator === 'dot',
+                        'w-1': indicator === 'line',
+                        'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
+                        'my-0.5': indicator === 'dashed',
+                      },
+                    )}
+                    style={
+                      {
+                        '--color-bg': indicatorColor,
+                        '--color-border': indicatorColor,
+                      } as React.CSSProperties
+                    }
+                  />
                   <div
                     className={cn(
                       'flex flex-1 justify-between leading-none',

diff --git a/...rc/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryMetricFetcher.tsx b/...rc/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryMetricFetcher.tsx
@@ -1,10 +1,11 @@
 import { format } from 'date-fns';
 import { OtlpMetricDefUserDefined } from '@pinpoint-fe/constants';
-import { useGetOtlpMetricData } from '@pinpoint-fe/hooks';
+import { usePostOtlpMetricData } from '@pinpoint-fe/hooks';
 import { getFormat } from '@pinpoint-fe/utils';
 import { COLORS } from './constant';
 import { ChartDataConfig, OpenTelemetryChart } from './OpenTelemetryChart';
 import { getRandomColorInHSL } from '../../../lib/colors';
+import React from 'react';
 
 export interface OpenTelemetryMetricFetcherProps {
   metricDefinition: OtlpMetricDefUserDefined.Metric & {
@@ -17,7 +18,33 @@ export const OpenTelemetryMetricFetcher = ({
   metricDefinition,
   dashboardId,
 }: OpenTelemetryMetricFetcherProps) => {
-  const { data } = useGetOtlpMetricData(metricDefinition);
+  const { mutate, data } = usePostOtlpMetricData();
+
+  React.useEffect(() => {
+    const {
+      applicationName,
+      metricGroupName,
+      metricName,
+      tagGroupList,
+      chartType,
+      aggregationFunction,
+      fieldNameList,
+      primaryForFieldAndTagRelation,
+    } = metricDefinition;
+    mutate({
+      applicationName,
+      metricGroupName,
+      metricName,
+      tagGroupList,
+      chartType,
+      aggregationFunction,
+      fieldNameList,
+      primaryForFieldAndTagRelation,
+      from: 0,
+      to: 0,
+    });
+  }, [metricDefinition]);
+
   const { stack, showTotal = true } = metricDefinition;
 
   const dataSets =