[Bug]fixed traces bug for missing MDS id

public/components/application_analytics/components/application.tsx

@@ -54,16 +54,16 @@
 } from '../../../../public/components/trace_analytics/components/common/helper_functions';
 import { SpanDetailFlyout } from '../../../../public/components/trace_analytics/components/traces/span_detail_flyout';
 import { SpanDetailTable } from '../../../../public/components/trace_analytics/components/traces/span_detail_table';
+import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_helpers/plugin_headerControl';
 import { TracesContent } from '../../../components/trace_analytics/components/traces/traces_content';
+import { coreRefs } from '../../../framework/core_refs';
 import { Explorer } from '../../event_analytics/explorer/explorer';
 import { ServicesContent } from '../../trace_analytics/components/services/services_content';
 import { fetchAppById, initializeTabData } from '../helpers/utils';
 import { AppAnalyticsComponentDeps } from '../home';
 import { Configuration } from './configuration';
 import { ServiceDetailFlyout } from './flyout_components/service_detail_flyout';
 import { TraceDetailFlyout } from './flyout_components/trace_detail_flyout';
-import { coreRefs } from '../../../framework/core_refs';
-import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_helpers/plugin_headerControl';
 
 const newNavigation = coreRefs.chrome?.navGroup.getNavGroupEnabled();
 
@@ -134,7 +134,7 @@
   const [serviceFlyoutName, setServiceFlyoutName] = useState<string>('');
   const [traceFlyoutId, setTraceFlyoutId] = useState<string>('');
   const [spanFlyoutId, setSpanFlyoutId] = useState<string>('');
   const [spanDSL, setSpanDSL] = useState<any>({});
   const [totalSpans, setTotalSpans] = useState<number>(0);
   const [editVizId, setEditVizId] = useState<string>('');
   const [visWithAvailability, setVisWithAvailability] = useState<EuiSelectOption[]>([]);
@@ -157,7 +157,7 @@
     sessionStorage.setItem(`${application.name}EndTime`, newEndTime);
   };
 
   const addSpanFilter = (field: string, value: any) => {
     const newFilters = [...filters];
     const index = newFilters.findIndex(({ field: filterField }) => field === filterField);
     if (index === -1) {
@@ -286,7 +286,7 @@
     },
   ];
 
   const nameColumnAction = (item: any) => openServiceFlyout(item);
   const traceColumnAction = () => switchToTrace();
 
   const getService = () => {
@@ -570,6 +570,7 @@
             traceId={traceFlyoutId}
             closeTraceFlyout={closeTraceFlyout}
             openSpanFlyout={openSpanFlyout}
+            dataSourceMDSId=""
           />
         )}
       </EuiPage>

public/components/application_analytics/components/flyout_components/trace_detail_flyout.tsx

@@ -12,12 +12,19 @@ interface TraceFlyoutProps extends TraceAnalyticsComponentDeps {
   traceId: string;
   closeTraceFlyout: () => void;
   openSpanFlyout: (spanId: string) => void;
+  dataSourceMDSId: string;
 }
 
 export function TraceDetailFlyout(props: TraceFlyoutProps) {
-  const { traceId, http, closeTraceFlyout, openSpanFlyout } = props;
+  const { traceId, http, closeTraceFlyout, openSpanFlyout, dataSourceMDSId } = props;
   const renderContent = (
-    <TraceDetailRender traceId={traceId} http={http} openSpanFlyout={openSpanFlyout} mode='data_prepper'/>
+    <TraceDetailRender
+      traceId={traceId}
+      http={http}
+      openSpanFlyout={openSpanFlyout}
+      mode="data_prepper"
+      dataSourceMDSId={dataSourceMDSId}
+    />
   );
   return (
     <EuiFlyout data-test-subj="traceDetailFlyout" onClose={closeTraceFlyout} size="m">

public/components/application_analytics/components/flyout_components/trace_detail_render.tsx

@@ -21,15 +21,18 @@
   http: HttpStart;
   openSpanFlyout: (spanId: string) => void;
   mode: TraceAnalyticsMode;
+  dataSourceMDSId: string;
 }
 
 export const TraceDetailRender = ({
   traceId,
   http,
   openSpanFlyout,
   mode,
+  dataSourceMDSId,
+
 }: TraceDetailRenderProps) => {
   const [fields, setFields] = useState<any>({});
   const [serviceBreakdownData, setServiceBreakdownData] = useState([]);
   const [payloadData, setPayloadData] = useState('');
   const [colorMap, setColorMap] = useState({});
@@ -74,6 +77,7 @@
           page="app"
           openSpanFlyout={openSpanFlyout}
           mode={mode}
+          dataSourceMDSId={dataSourceMDSId}
         />
         <EuiSpacer size="xs" />
         <EuiHorizontalRule margin="s" />
@@ -88,13 +92,13 @@
         ) : null}
       </>
     );
   }, [traceId, fields, serviceBreakdownData, colorMap, payloadData]);
 
   useEffect(() => {
     handleTraceViewRequest(traceId, http, fields, setFields, mode);
     handleServicesPieChartRequest(traceId, http, setServiceBreakdownData, setColorMap, mode);
     handlePayloadRequest(traceId, http, payloadData, setPayloadData, mode);
   }, [traceId]);
 
   return renderContent;
 };