Explore:Traces Empty state

changelogs/fragments/10724.yml

@@ -0,0 +1,2 @@
+fix:
+- Explore:Traces Empty state error handling ([#10724](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10724))

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

@@ -4,9 +4,11 @@
  */
 
 import React from 'react';
-import { EuiCallOut } from '@elastic/eui';
+import { EuiCallOut, EuiSpacer, EuiText, EuiLink } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { resolveServiceNameFromSpan } from '../traces/ppl_resolve_helpers';
+import { Dataset } from '../../../../../../../../data/common';
+import { getMissingFieldsDescription } from '../../../../../../utils/trace_field_validation';
 
 export function microToMilliSec(micro: number) {
   if (typeof micro !== 'number' || isNaN(micro)) return 0;
@@ -87,3 +89,73 @@ export function NoMatchMessage({ traceId }: NoMatchMessageProps) {
     </EuiCallOut>
   );
 }
+
+interface MissingFieldsEmptyStateProps {
+  missingFields: string[];
+  dataset?: Dataset;
+  workspaceId?: string;
+}
+
+export function MissingFieldsEmptyState({
+  missingFields,
+  dataset,
+  workspaceId,
+}: MissingFieldsEmptyStateProps) {
+  return (
+    <div style={{ padding: '24px' }}>
+      <EuiCallOut
+        title={i18n.translate('explore.traceDetails.missingFields.title', {
+          defaultMessage: 'Unable to display trace detail',
+        })}
+        color="warning"
+        iconType="iInCircle"
+      >
+        <EuiText size="s">
+          <p>
+            {i18n.translate('explore.traceDetails.missingFields.description', {
+              defaultMessage:
+                'The trace detail page cannot be displayed due to missing fields from the ',
+            })}
+            <EuiLink
+              href="https://github.com/opensearch-project/data-prepper/blob/main/data-prepper-plugins/opensearch/src/main/resources/index-template/otel-v1-apm-span-index-standard-template.json"
+              target="_blank"
+              external
+            >
+              {i18n.translate('explore.traceDetails.missingFields.schemaLink', {
+                defaultMessage: 'Data-Prepper OTel schema',
+              })}
+            </EuiLink>
+            {i18n.translate('explore.traceDetails.missingFields.descriptionContinued', {
+              defaultMessage:
+                '. We recommend checking the source data or dataset for missing or improperly mapped fields.',
+            })}
+          </p>
+        </EuiText>
+
+        <EuiSpacer size="m" />
+
+        <EuiText size="s">
+          <p>
+            <strong>
+              {i18n.translate('explore.traceDetails.missingFields.missingFieldsLabel', {
+                defaultMessage: 'Missing fields:',
+              })}
+            </strong>
+          </p>
+        </EuiText>
+
+        <EuiSpacer size="s" />
+
+        <EuiText size="s">
+          <div>
+            {getMissingFieldsDescription(missingFields).map((field, index) => (
+              <div key={index} style={{ marginBottom: '8px' }}>
+                <strong>{field.name}</strong> - {field.description}
+              </div>
+            ))}
+          </div>
+        </EuiText>
+      </EuiCallOut>
+    </div>
+  );
+}

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

@@ -180,6 +180,8 @@ describe('TraceDetails', () => {
       startTimeUnixNano: '2023-01-01T00:00:00.000000000Z',
       endTimeUnixNano: '2023-01-01T00:00:01.000000000Z',
       durationInNanos: 1000000000,
+      parentSpanId: '',
+      status: { code: 0 },
     },
     {
       spanId: 'span-2',
@@ -191,6 +193,8 @@ describe('TraceDetails', () => {
       startTimeUnixNano: '2023-01-01T00:00:01.000000000Z',
       endTimeUnixNano: '2023-01-01T00:00:02.000000000Z',
       durationInNanos: 1000000000,
+      parentSpanId: 'span-1',
+      status: { code: 0 },
     },
   ];
 
@@ -731,6 +735,7 @@ describe('TraceDetails', () => {
         status: { code: 2 }, // Error
         startTimeUnixNano: '2023-01-01T00:00:00.000000000Z',
         endTimeUnixNano: '2023-01-01T00:00:01.000000000Z',
+        parentSpanId: '',
       },
       {
         spanId: 'span-2',
@@ -740,6 +745,7 @@ describe('TraceDetails', () => {
         status: { code: 0 }, // No error
         startTimeUnixNano: '2023-01-01T00:00:01.000000000Z',
         endTimeUnixNano: '2023-01-01T00:00:02.000000000Z',
+        parentSpanId: 'span-1',
       },
     ];