add loading status to trace view and services pages

Signed-off-by: Shenoy Pratik <[email protected]>
ps48 · Jan 31, 2025 · cae55fd · cae55fd
1 parent 95c814a
commit cae55fd
Show file tree

Hide file tree

Showing 12 changed files with 376 additions and 264 deletions.
diff --git a/public/components/trace_analytics/components/common/plots/error_rate_plt.tsx b/public/components/trace_analytics/components/common/plots/error_rate_plt.tsx
@@ -128,22 +128,22 @@ export function ErrorRatePlt(props: {
   return (
     <>
       <EuiPanel style={{ minWidth: 433, minHeight: 308, maxHeight: 560 }}>
+        <EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs">
+          <PanelTitle title={props.title ? props.title : 'Trace error rate over time'} />
+          <EuiButtonGroup
+            options={props.toggleButtons}
+            idSelected={props.idSelected}
+            onChange={(id) => props.setIdSelected(id as 'error_rate' | 'throughput')}
+            buttonSize="s"
+            color="text"
+          />
+        </EuiFlexGroup>
         {props.isErrorRateTrendLoading ? (
-          <div className="center-parent-div">
-            <EuiLoadingChart size="l" mono />
+          <div className="center-loading-div">
+            <EuiLoadingChart size="l" />
           </div>
         ) : (
           <>
-            <EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs">
-              <PanelTitle title={props.title ? props.title : 'Trace error rate over time'} />
-              <EuiButtonGroup
-                options={props.toggleButtons}
-                idSelected={props.idSelected}
-                onChange={(id) => props.setIdSelected(id as 'error_rate' | 'throughput')}
-                buttonSize="s"
-                color="text"
-              />
-            </EuiFlexGroup>
             <EuiHorizontalRule margin="m" />
             <ErrorTrendPlt items={props.items} onClick={onClick} isPanel={true} />
           </>

diff --git a/public/components/trace_analytics/components/common/plots/latency_trend_plt.tsx b/public/components/trace_analytics/components/common/plots/latency_trend_plt.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFlexGroup, EuiHorizontalRule, EuiPanel } from '@elastic/eui';
+import { EuiFlexGroup, EuiHorizontalRule, EuiLoadingChart, EuiPanel } from '@elastic/eui';
 import round from 'lodash/round';
 import React, { useMemo } from 'react';
 import { Plt } from '../../../../visualizations/plotly/plot';
@@ -100,14 +100,30 @@ export function LatencyPlt(props: { data: Plotly.Data[]; isPanel?: boolean }) {
   );
 }
 
-export function LatencyPltPanel(props: { data: Plotly.Data[]; isPanel?: boolean }) {
+export function LatencyPltPanel(props: {
+  data: Plotly.Data[];
+  isLatencyTrendLoading: boolean;
+  isPanel?: boolean;
+}) {
   return (
     <EuiPanel style={{ minWidth: 433, minHeight: 308, maxHeight: 560 }}>
       <EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs">
         <PanelTitle title="24hr latency trend" />
       </EuiFlexGroup>
-      <EuiHorizontalRule margin="m" />
-      {props.data ? <LatencyPlt data={[props.data]} isPanel={true} /> : <NoMatchMessage size="s" />}
+      {props.isLatencyTrendLoading ? (
+        <div className="center-loading-div">
+          <EuiLoadingChart size="l" />
+        </div>
+      ) : (
+        <>
+          <EuiHorizontalRule margin="m" />
+          {props.data ? (
+            <LatencyPlt data={[props.data]} isPanel={true} />
+          ) : (
+            <NoMatchMessage size="s" />
+          )}
+        </>
+      )}
     </EuiPanel>
   );
 }
diff --git a/public/components/trace_analytics/components/common/plots/throughput_plt.tsx b/public/components/trace_analytics/components/common/plots/throughput_plt.tsx
@@ -123,22 +123,22 @@ export function ThroughputPlt(props: {
   return (
     <>
       <EuiPanel style={{ minWidth: 433, minHeight: 308, maxHeight: 560 }}>
+        <EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs">
+          <PanelTitle title={props.title ? props.title : 'Traces over time'} />
+          <EuiButtonGroup
+            options={props.toggleButtons}
+            idSelected={props.idSelected}
+            onChange={(id: string) => props.setIdSelected(id as 'error_rate' | 'throughput')}
+            buttonSize="s"
+            color="text"
+          />
+        </EuiFlexGroup>
         {props.isThroughputTrendLoading ? (
-          <div className="center-parent-div">
-            <EuiLoadingChart size="l" mono />
+          <div className="center-loading-div">
+            <EuiLoadingChart size="l" />
           </div>
         ) : (
           <>
-            <EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs">
-              <PanelTitle title={props.title ? props.title : 'Traces over time'} />
-              <EuiButtonGroup
-                options={props.toggleButtons}
-                idSelected={props.idSelected}
-                onChange={(id: string) => props.setIdSelected(id as 'error_rate' | 'throughput')}
-                buttonSize="s"
-                color="text"
-              />
-            </EuiFlexGroup>
             <EuiHorizontalRule margin="m" />
             <ThroughputTrendPlt items={props.items} onClick={onClick} isPanel={true} />
           </>

diff --git a/public/components/trace_analytics/components/services/service_metrics.tsx b/public/components/trace_analytics/components/services/service_metrics.tsx
@@ -34,6 +34,7 @@ export const ServiceMetrics = ({
   serviceName,
 }: ServiceMetricsProps) => {
   const [trends, setTrends] = useState<ServiceTrends>({});
+  const [isTrendsDataLoading, setIsTrendsDataLoading] = useState(false);
   const { http } = coreRefs;
 
   const serviceFilter = [
@@ -45,14 +46,15 @@ export const ServiceMetrics = ({
   ];
 
   const fetchMetrics = async () => {
-    await handleServiceTrendsRequest(
+    setIsTrendsDataLoading(true);
+    handleServiceTrendsRequest(
       http,
       '1h',
       setTrends,
       mode,
       serviceFilter,
       dataSourceMDSId[0].id
-    );
+    ).finally(() => setIsTrendsDataLoading(false));
   };
 
   useEffect(() => {
@@ -75,6 +77,7 @@ export const ServiceMetrics = ({
                 }}
                 setStartTime={setStartTime}
                 setEndTime={setEndTime}
+                isThroughputTrendLoading={isTrendsDataLoading}
               />
             </EuiFlexItem>
             <EuiFlexItem>
@@ -86,10 +89,15 @@ export const ServiceMetrics = ({
                 }}
                 setStartTime={setStartTime}
                 setEndTime={setEndTime}
+                isErrorRateTrendLoading={isTrendsDataLoading}
               />
             </EuiFlexItem>
             <EuiFlexItem>
-              <LatencyPltPanel data={trends[serviceName]?.latency_trend} isPanel={true} />
+              <LatencyPltPanel
+                data={trends[serviceName]?.latency_trend}
+                isPanel={true}
+                isLatencyTrendLoading={isTrendsDataLoading}
+              />
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>