added support for header with loading state in trace details page (#10753)

* added support for header with loading state

Signed-off-by: Kakshak Pravin Porwal <[email protected]>

* Changeset file for PR #10753 created/updated

---------

Signed-off-by: Kakshak Pravin Porwal <[email protected]>
Co-authored-by: Kakshak Pravin Porwal <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Co-authored-by: Adam Tackett <[email protected]>

Author: 4 people

changelogs/fragments/10753.yml

@@ -0,0 +1,2 @@
+fix:
+- Added support for loading state in the header ([#10753](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10753))

src/plugins/explore/public/application/pages/traces/trace_details/public/utils/helper_functions.tsx

@@ -45,7 +45,13 @@ export function round(value: number, precision: number = 0): number {
   return Math.round(value * multiplier) / multiplier;
 }
 
-export function getServiceInfo(selectedSpan: any, traceId?: string): string {
+export function getServiceInfo(selectedSpan: any, traceId?: string, isLoading?: boolean): string {
+  if (isLoading) {
+    return i18n.translate('explore.traceDetails.header.loading', {
+      defaultMessage: 'Loading trace...',
+    });
+  }
+
   if (selectedSpan) {
     const serviceName =
       resolveServiceNameFromSpan(selectedSpan) ||

src/plugins/explore/public/application/pages/traces/trace_details/trace_view.test.tsx

@@ -426,6 +426,11 @@ describe('TraceDetails', () => {
     expect(result).toBe('');
   });
 
+  it('getServiceInfo function returns loading message when isLoading is true', () => {
+    const result = getServiceInfo(null, undefined, true);
+    expect(result).toBe('Loading trace...');
+  });
+
   it('NoMatchMessage component renders correctly', () => {
     const testTraceId = 'test-trace-123';
     const { container } = render(<NoMatchMessage traceId={testTraceId} />);

src/plugins/explore/public/application/pages/traces/trace_details/trace_view.tsx

@@ -625,7 +625,7 @@ export const TraceDetails: React.FC<TraceDetailsProps> = ({
       setMenuMountPoint={setMenuMountPoint}
       traceId={traceId}
       isFlyout={isFlyout}
-      title={getServiceInfo(rootSpan, traceId)}
+      title={getServiceInfo(rootSpan, traceId, isLoading)}
       traceDetailsLink={traceDetailsLink}
     />
   );