From ffff5e3cf597dfb8173bc416c97ad1367e3c3fd3 Mon Sep 17 00:00:00 2001
From: jihea-park <jihea.park@navercorp.com>
Date: Tue, 8 Oct 2024 14:02:53 +0900
Subject: [PATCH] [#10776] Make "ALL" bold & Remove total if stack is false

---
 .../charts/OpenTelemetryChartCommon.tsx           |  2 +-
 .../charts/OpenTelemetryMetricFetcher.tsx         |  4 ++--
 .../definition/MeticDefinitionFormFetcher.tsx     |  2 +-
 .../v3/packages/ui/src/components/ui/chart.tsx    | 15 ++++-----------
 4 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryChartCommon.tsx b/web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryChartCommon.tsx
index 4f195b48c99d..f67aa7a3459a 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryChartCommon.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryChartCommon.tsx
@@ -53,7 +53,7 @@ export const OpenTelemetryChartCommon = ({
         }
         {...restTooltipConfig}
       />
-      <ChartLegend className="block overflow-hidden" content={<ChartLegendContent />} />
+      <ChartLegend content={<ChartLegendContent />} />
     </>
   );
 };
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryMetricFetcher.tsx b/web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryMetricFetcher.tsx
index 12b989fa8aa0..45c034e9c833 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryMetricFetcher.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryMetricFetcher.tsx
@@ -45,7 +45,7 @@ export const OpenTelemetryMetricFetcher = ({
     });
   }, [metricDefinition]);
 
-  const { stack, showTotal = true } = metricDefinition;
+  const { stack, showTotal = false } = metricDefinition;
 
   const dataSets =
     data?.metricValues.reduce(
@@ -101,7 +101,7 @@ export const OpenTelemetryMetricFetcher = ({
           },
         }}
         tooltipConfig={{
-          showTotal,
+          showTotal: showTotal || stack,
         }}
       />
     )
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/definition/MeticDefinitionFormFetcher.tsx b/web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/definition/MeticDefinitionFormFetcher.tsx
index 4c47d0727134..80bc607080f1 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/definition/MeticDefinitionFormFetcher.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/definition/MeticDefinitionFormFetcher.tsx
@@ -508,7 +508,7 @@ export const MetricDefinitionFormFetcher = ({
                           }}
                         />
                         <FormLabel className="text-sm font-normal" htmlFor="all">
-                          ALL{' '}
+                          <span className="font-bold">ALL</span>
                           <span className="text-muted-foreground">{`(Select all ${primaryForFieldAndTagRelation === 'tag' ? 'field' : 'tag'})`}</span>
                         </FormLabel>
                       </FormItem>
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/ui/chart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/ui/chart.tsx
index 1f8631ac27e9..26b0a3968b41 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/ui/chart.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/ui/chart.tsx
@@ -261,8 +261,7 @@ const ChartLegendContent = React.forwardRef<
         <div
           ref={ref}
           className={cn(
-            'flex items-center justify-center gap-4',
-            verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+            `flex justify-center gap-1 flex-wrap ${verticalAlign === 'top' ? 'pb-3' : 'pt-3'}`,
             className,
           )}
         >
@@ -273,13 +272,7 @@ const ChartLegendContent = React.forwardRef<
             return (
               <React.Fragment key={item.value}>
                 <TooltipTrigger asChild>
-                  <div
-                    key={item.value}
-                    className={cn(
-                      'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground',
-                      'justify-center',
-                    )}
-                  >
+                  <div key={item.value} className={cn('inline-flex max-w-full items-center gap-1')}>
                     <>
                       {itemConfig?.icon && !hideIcon ? (
                         <itemConfig.icon />
@@ -291,9 +284,9 @@ const ChartLegendContent = React.forwardRef<
                           }}
                         />
                       )}
-                      <span className="text-ellipsis overflow-hidden whitespace-nowrap">
+                      <div className="text-ellipsis overflow-hidden whitespace-nowrap">
                         {itemConfig?.label}
-                      </span>
+                      </div>
                     </>
                   </div>
                 </TooltipTrigger>