From ec144fad93683399be169e3e4487e55ce9b2a397 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Mon, 13 Feb 2023 16:44:52 -0500
Subject: [PATCH] quick fix for traces and services indiviudal page (#270)

* quick fix for traces and services indiviudal page

Signed-off-by: Derek Ho <dxho@amazon.com>

* remove unecessary import

-off-by: Derek Ho <dxho@amazon.com>
Signed-off-by: Derek Ho <dxho@amazon.com>

---------

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../components/services/service_view.tsx      | 46 +++++++++++++------
 .../components/traces/trace_view.tsx          | 35 ++++++++++----
 2 files changed, 58 insertions(+), 23 deletions(-)

diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx
index db4c0702b..0121af258 100644
--- a/public/components/trace_analytics/components/services/service_view.tsx
+++ b/public/components/trace_analytics/components/services/service_view.tsx
@@ -47,7 +47,13 @@ export function ServiceView(props: ServiceViewProps) {
   const [redirect, setRedirect] = useState(false);
 
   const refresh = () => {
-    const DSL = filtersToDsl(mode, props.filters, props.query, processTimeStamp(props.startTime, mode), processTimeStamp(props.endTime, mode));
+    const DSL = filtersToDsl(
+      mode,
+      props.filters,
+      props.query,
+      processTimeStamp(props.startTime, mode),
+      processTimeStamp(props.endTime, mode)
+    );
     handleServiceViewRequest(props.serviceName, props.http, DSL, setFields, mode);
     if (mode === 'data_prepper') {
       handleServiceMapRequest(props.http, DSL, mode, setServiceMap, props.serviceName);
@@ -74,7 +80,7 @@ export function ServiceView(props: ServiceViewProps) {
 
   useEffect(() => {
     if (!redirect) refresh();
-  }, [props.startTime, props.endTime, props.serviceName]);
+  }, [props.startTime, props.endTime, props.serviceName, props.mode]);
 
   const renderTitle = (
     serviceName: string,
@@ -113,7 +119,7 @@ export function ServiceView(props: ServiceViewProps) {
                   {props.serviceName || '-'}
                 </EuiText>
               </EuiFlexItem>
-              { mode === 'data_prepper' ? 
+              {mode === 'data_prepper' ? (
                 <EuiFlexItem grow={false}>
                   <EuiText className="overview-title">Number of connected services</EuiText>
                   <EuiText size="s" className="overview-content">
@@ -121,9 +127,11 @@ export function ServiceView(props: ServiceViewProps) {
                       ? fields.number_of_connected_services
                       : 0}
                   </EuiText>
-                </EuiFlexItem> : <EuiFlexItem/>
-              }
-              { mode === 'data_prepper' ? 
+                </EuiFlexItem>
+              ) : (
+                <EuiFlexItem />
+              )}
+              {mode === 'data_prepper' ? (
                 <EuiFlexItem grow={false}>
                   <EuiText className="overview-title">Connected services</EuiText>
                   <EuiText size="s" className="overview-content">
@@ -139,8 +147,10 @@ export function ServiceView(props: ServiceViewProps) {
                           })
                       : '-'}
                   </EuiText>
-                </EuiFlexItem> : <EuiFlexItem/>
-              }
+                </EuiFlexItem>
+              ) : (
+                <EuiFlexItem />
+              )}
             </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem>
@@ -234,17 +244,23 @@ export function ServiceView(props: ServiceViewProps) {
   };
 
   useEffect(() => {
-    const spanDSL = filtersToDsl(mode, props.filters, props.query, processTimeStamp(props.startTime, mode), processTimeStamp(props.endTime, mode));
+    const spanDSL = filtersToDsl(
+      mode,
+      props.filters,
+      props.query,
+      processTimeStamp(props.startTime, mode),
+      processTimeStamp(props.endTime, mode)
+    );
     if (mode === 'data_prepper') {
       spanDSL.query.bool.must.push({
         term: {
-          "serviceName": props.serviceName,
+          serviceName: props.serviceName,
         },
       });
     } else if (mode === 'jaeger') {
       spanDSL.query.bool.must.push({
         term: {
-          "process.serviceName": props.serviceName,
+          'process.serviceName': props.serviceName,
         },
       });
     }
@@ -325,15 +341,17 @@ export function ServiceView(props: ServiceViewProps) {
           <EuiSpacer size="xl" />
           {overview}
           <EuiSpacer />
-          { mode === 'data_prepper' ? 
+          {mode === 'data_prepper' ? (
             <ServiceMap
               serviceMap={serviceMap}
               idSelected={serviceMapIdSelected}
               setIdSelected={setServiceMapIdSelected}
               currService={props.serviceName}
               page="serviceView"
-            /> : <div/>
-          }   
+            />
+          ) : (
+            <div />
+          )}
           <EuiSpacer />
           <EuiPanel>
             <PanelTitle title="Spans" totalItems={total} />
diff --git a/public/components/trace_analytics/components/traces/trace_view.tsx b/public/components/trace_analytics/components/traces/trace_view.tsx
index fe0877e0d..46fd00325 100644
--- a/public/components/trace_analytics/components/traces/trace_view.tsx
+++ b/public/components/trace_analytics/components/traces/trace_view.tsx
@@ -85,14 +85,16 @@ export function TraceView(props: TraceViewProps) {
                   </EuiFlexGroup>
                 )}
               </EuiFlexItem>
-              { mode === 'data_prepper' ? (
+              {mode === 'data_prepper' ? (
                 <EuiFlexItem grow={false}>
                   <EuiText className="overview-title">Trace group name</EuiText>
                   <EuiText size="s" className="overview-content">
                     {fields.trace_group || '-'}
                   </EuiText>
-                </EuiFlexItem> ) : (<div/>)
-              }
+                </EuiFlexItem>
+              ) : (
+                <div />
+              )}
             </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem>
@@ -150,10 +152,23 @@ export function TraceView(props: TraceViewProps) {
   >('latency');
 
   const refresh = async () => {
-    const DSL = filtersToDsl(mode, [], '', processTimeStamp('now', mode), processTimeStamp('now', mode), page);
+    const DSL = filtersToDsl(
+      mode,
+      [],
+      '',
+      processTimeStamp('now', mode),
+      processTimeStamp('now', mode),
+      page
+    );
     handleTraceViewRequest(props.traceId, props.http, fields, setFields, mode);
     handlePayloadRequest(props.traceId, props.http, payloadData, setPayloadData, mode);
-    handleServicesPieChartRequest(props.traceId, props.http, setServiceBreakdownData, setColorMap, mode);
+    handleServicesPieChartRequest(
+      props.traceId,
+      props.http,
+      setServiceBreakdownData,
+      setColorMap,
+      mode
+    );
     handleServiceMapRequest(props.http, DSL, mode, setServiceMap);
   };
 
@@ -206,7 +221,7 @@ export function TraceView(props: TraceViewProps) {
       },
     ]);
     refresh();
-  }, []);
+  }, [props.mode]);
 
   return (
     <>
@@ -250,15 +265,17 @@ export function TraceView(props: TraceViewProps) {
             ) : null}
           </EuiPanel>
           <EuiSpacer />
-          { mode === 'data_prepper' ? 
+          {mode === 'data_prepper' ? (
             <ServiceMap
               addFilter={undefined}
               serviceMap={traceFilteredServiceMap}
               idSelected={serviceMapIdSelected}
               setIdSelected={setServiceMapIdSelected}
               page={page}
-            /> : (<div/>)
-          }
+            />
+          ) : (
+            <div />
+          )}
         </EuiPageBody>
       </EuiPage>
     </>