[#7758] Apply lazy loading to OpenTelemetryMetricFetcher

pinpoint-apm · Dec 9, 2024 · a8885b1 · a8885b1
1 parent dd49d15
commit a8885b1
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 87 deletions.
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
@@ -3,6 +3,7 @@ import { useOpenTelemetrySearchParameters, usePostOtlpMetricData } from '@pinpoi
 import React from 'react';
 import { assign } from 'lodash';
 import { ReChart } from '../../../components/ReChart';
+import { useInView } from 'react-intersection-observer';
 
 export interface OpenTelemetryMetricFetcherProps {
   metricDefinition: OtlpMetricDefUserDefined.Metric;
@@ -13,12 +14,15 @@ export interface OpenTelemetryMetricFetcherProps {
 export const OpenTelemetryMetricFetcher = ({
   metricDefinition,
   dashboardId,
-  inView,
 }: OpenTelemetryMetricFetcherProps) => {
   const { mutate, data } = usePostOtlpMetricData();
   const { dateRange, agentId } = useOpenTelemetrySearchParameters();
   const prevDateRange = React.useRef<{ from: Date; to: Date }>();
   const prevAgentId = React.useRef<string>();
+  const { ref, inView } = useInView({
+    initialInView: false,
+    threshold: 0.1,
+  });
 
   React.useEffect(() => {
     if (!inView) {
@@ -71,29 +75,31 @@ export const OpenTelemetryMetricFetcher = ({
   const { stack, stackDetails } = metricDefinition;
 
   return (
-    <ReChart
-      syncId={dashboardId}
-      chartData={{
-        title: '',
-        timestamp: data?.timestamp || [],
-        metricValueGroups: [
-          {
-            groupName: '',
-            chartType: data?.chartType || '',
-            unit: data?.unit || '',
-            metricValues: (data?.metricValues || [])?.map((mv) => {
-              return {
-                fieldName: mv?.legendName,
-                values: mv?.values,
-              };
-            }),
-          },
-        ],
-      }}
-      unit={data?.unit}
-      tooltipConfig={{
-        showTotal: stack && stackDetails?.showTotal,
-      }}
-    />
+    <div ref={ref} className="w-full h-full">
+      <ReChart
+        syncId={dashboardId}
+        chartData={{
+          title: '',
+          timestamp: data?.timestamp || [],
+          metricValueGroups: [
+            {
+              groupName: '',
+              chartType: data?.chartType || '',
+              unit: data?.unit || '',
+              metricValues: (data?.metricValues || [])?.map((mv) => {
+                return {
+                  fieldName: mv?.legendName,
+                  values: mv?.values,
+                };
+              }),
+            },
+          ],
+        }}
+        unit={data?.unit}
+        tooltipConfig={{
+          showTotal: stack && stackDetails?.showTotal,
+        }}
+      />
+    </div>
   );
 };
diff --git a/...nd/src/main/v3/packages/ui/src/components/OpenTelemetry/dashboard/OpenTelemetryWidget.tsx b/...nd/src/main/v3/packages/ui/src/components/OpenTelemetry/dashboard/OpenTelemetryWidget.tsx
diff --git a/...n/v3/packages/ui/src/components/OpenTelemetry/dashboard/OpenTelemteryDashboardFetcher.tsx b/...n/v3/packages/ui/src/components/OpenTelemetry/dashboard/OpenTelemteryDashboardFetcher.tsx
@@ -224,27 +224,28 @@ export const OpenTelemetryDashboardFetcher = () => {
               </div>
             </div>
             <DashBoard layouts={state.layouts} onLayoutChange={onLayoutChange}>
-              {metrics.map((metric) => {
-                return (
-                  <div key={metric?.id}>
-                    <Widget
-                      title={metric.title}
-                      onClickDelete={() => {
-                        setCurrentDeletingTarget(metric);
-                      }}
-                      onClickEdit={() => {
-                        setCurrentEditingTarget(metric);
-                      }}
-                    >
-                      <OpenTelemetryMetric
-                        inView={true}
-                        metricDefinition={metric}
-                        dashboardId={applicationName}
-                      />
-                    </Widget>
-                  </div>
-                );
-              })}
+              {state.layouts.sm.length > 0 &&
+                metrics.map((metric) => {
+                  return (
+                    <div key={metric?.id}>
+                      <Widget
+                        title={metric.title}
+                        onClickDelete={() => {
+                          setCurrentDeletingTarget(metric);
+                        }}
+                        onClickEdit={() => {
+                          setCurrentEditingTarget(metric);
+                        }}
+                      >
+                        <OpenTelemetryMetric
+                          inView={true}
+                          metricDefinition={metric}
+                          dashboardId={applicationName}
+                        />
+                      </Widget>
+                    </div>
+                  );
+                })}
             </DashBoard>
           </div>
         ) : (