Fixes span to logs redireciton, updates mds label when undefined

public/components/trace_analytics/components/services/service_view.tsx

@@ -4,6 +4,7 @@
  */
 /* eslint-disable react-hooks/exhaustive-deps */
 
+import dateMath from '@elastic/datemath';
 import {
   EuiBadge,
   EuiContextMenu,
@@ -28,6 +29,12 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { DataSourceManagementPluginSetup } from '../../../../../../../src/plugins/data_source_management/public';
 import { DataSourceOption } from '../../../../../../../src/plugins/data_source_management/public/components/data_source_menu/types';
+import {
+  DEFAULT_DATA_SOURCE_NAME,
+  DEFAULT_DATA_SOURCE_TYPE,
+} from '../../../../../common/constants/data_sources';
+import { observabilityLogsID } from '../../../../../common/constants/shared';
+import { TRACE_ANALYTICS_DATE_FORMAT } from '../../../../../common/constants/trace_analytics';
 import { setNavBreadCrumbs } from '../../../../../common/utils/set_nav_bread_crumbs';
 import { coreRefs } from '../../../../framework/core_refs';
 import { HeaderControlledComponentsWrapper } from '../../../../plugin_helpers/plugin_headerControl';
@@ -48,11 +55,6 @@
 import { SpanDetailFlyout } from '../traces/span_detail_flyout';
 import { SpanDetailTable } from '../traces/span_detail_table';
 import { ServiceMetrics } from './service_metrics';
-import {
-  DEFAULT_DATA_SOURCE_NAME,
-  DEFAULT_DATA_SOURCE_TYPE,
-} from '../../../../../common/constants/data_sources';
-import { observabilityLogsID } from '../../../../../common/constants/shared';
 
 interface ServiceViewProps extends TraceAnalyticsComponentDeps {
   serviceName: string;
@@ -66,7 +68,7 @@
 
 export function ServiceView(props: ServiceViewProps) {
   const { mode, page, setCurrentSelectedService } = props;
   const [fields, setFields] = useState<any>({});
   const [serviceMap, setServiceMap] = useState<ServiceObject>({});
   const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
     'latency' | 'error_rate' | 'throughput'
@@ -74,7 +76,6 @@
   const [redirect, setRedirect] = useState(false);
   const [actionsMenuPopover, setActionsMenuPopover] = useState(false);
 
-  const isNewNavEnabled = coreRefs?.chrome?.navGroup?.getNavGroupEnabled();
   const refresh = () => {
     const DSL = filtersToDsl(
       mode,
@@ -178,11 +179,20 @@
                 name: 'View logs',
                 'data-test-subj': 'viewLogsButton',
                 onClick: () => {
-                  if (isNewNavEnabled) {
+                  // NOTE: Discover has issue with PPL Time filter, hence adding +3/-3 days to actual timestamp
+                  const startTime =
+                    dateMath
+                      .parse(props.startTime)!
+                      .subtract(3, 'days')
+                      .format(TRACE_ANALYTICS_DATE_FORMAT) ?? 'now-3y';
+                  const endTime =
+                    dateMath
+                      .parse(props.endTime, { roundUp: true })!
+                      .add(3, 'days')
+                      .format(TRACE_ANALYTICS_DATE_FORMAT) ?? 'now';
+                  if (coreRefs?.dataSource?.dataSourceEnabled) {
                     coreRefs?.application!.navigateToApp('data-explorer', {
-                      path: `discover#?_a=(discover:(columns:!(_source),isDirty:!f,sort:!()),metadata:(view:discover))&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:${
-                        props.startTime
-                      },to:${props.endTime}))&_q=(filters:!(),query:(dataset:(dataSource:(id:'${
+                      path: `discover#?_a=(discover:(columns:!(_source),isDirty:!f,sort:!()),metadata:(view:discover))&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:'${startTime}',to:'${endTime}'))&_q=(filters:!(),query:(dataset:(dataSource:(id:'${
                         props.dataSourceMDSId[0].id ?? ''
                       }',title:'${props.dataSourceMDSId[0].label}',type:DATA_SOURCE),id:'${
                         props.dataSourceMDSId[0].id ?? ''
@@ -395,12 +405,12 @@
 
   const [currentSpan, setCurrentSpan] = useState('');
   const storedFilters = sessionStorage.getItem('TraceAnalyticsSpanFilters');
   const [spanFilters, setSpanFilters] = useState<Array<{ field: string; value: any }>>(
     storedFilters ? JSON.parse(storedFilters) : []
   );
   const [DSL, setDSL] = useState<any>({});
 
   const setSpanFiltersWithStorage = (newFilters: Array<{ field: string; value: any }>) => {
     setSpanFilters(newFilters);
     sessionStorage.setItem('TraceAnalyticsSpanFilters', JSON.stringify(newFilters));
   };
@@ -438,7 +448,7 @@
     setDSL(spanDSL);
   }, [props.startTime, props.endTime, props.serviceName, spanFilters]);
 
   const addSpanFilter = (field: string, value: any) => {
     const newFilters = [...spanFilters];
     const index = newFilters.findIndex(({ field: filterField }) => field === filterField);
     if (index === -1) {

public/components/trace_analytics/components/traces/span_detail_flyout.tsx

@@ -23,6 +23,11 @@
 import moment from 'moment';
 import React, { useEffect, useState } from 'react';
 import { HttpSetup } from '../../../../../../../src/core/public';
+import {
+  DEFAULT_DATA_SOURCE_NAME,
+  DEFAULT_DATA_SOURCE_TYPE,
+} from '../../../../../common/constants/data_sources';
+import { observabilityLogsID } from '../../../../../common/constants/shared';
 import { TRACE_ANALYTICS_DATE_FORMAT } from '../../../../../common/constants/trace_analytics';
 import { SpanField, TraceAnalyticsMode } from '../../../../../common/types/trace_analytics';
 import { coreRefs } from '../../../../framework/core_refs';
@@ -76,7 +81,7 @@
   spanId: string;
   isFlyoutVisible: boolean;
   closeFlyout: () => void;
   addSpanFilter: (field: string, value: any) => void;
   mode: TraceAnalyticsMode;
   dataSourceMDSId: string;
   dataSourceMDSLabel: string | undefined;
@@ -87,11 +92,11 @@
   setCurrentSpan?: React.Dispatch<React.SetStateAction<string>>;
 }) {
   const { mode } = props;
   const [span, setSpan] = useState<any>({});
 
   useEffect(() => {
     handleSpansFlyoutRequest(props.http, props.spanId, setSpan, mode, props.dataSourceMDSId);
   }, [props.spanId]);
 
   const getListItem = (
     fieldKey: string | undefined,
@@ -301,17 +306,34 @@
   };
 
   const redirectToExplorer = () => {
+    // NOTE: Discover has issue with PPL Time filter, hence adding +3/-3 days to actual timestamp
+    const startTime =
+      moment(span.startTime).subtract(3, 'days').format(TRACE_ANALYTICS_DATE_FORMAT) ?? 'now-3y';
+    const endTime =
+      moment(span.endTime).add(3, 'days').format(TRACE_ANALYTICS_DATE_FORMAT) ?? 'now';
     const spanId = getSpanValue(span, mode, 'SPAN_ID');
     const spanField = getSpanFieldKey(mode, 'SPAN_ID');
-    coreRefs?.application!.navigateToApp('data-explorer', {
-      path: `discover#?_a=(discover:(columns:!(_source),isDirty:!f,sort:!()),metadata:(view:discover))&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:${
-        props.startTime
-      },to:${props.endTime}))&_q=(filters:!(),query:(dataset:(dataSource:(id:'${
-        props.dataSourceMDSId ?? ''
-      }',title:${props.dataSourceMDSLabel},type:DATA_SOURCE),id:'${
-        props.dataSourceMDSId
-      }::ss4o_logs-*',timeFieldName:time,title:'ss4o_logs-*',type:INDEXES),language:PPL,query:'source%20%3D%20ss4o_logs-*%20%7C%20where%20${spanField}%20%3D%20!'${spanId}!''))`,
-    });
+
+    if (coreRefs?.dataSource?.dataSourceEnabled) {
+      coreRefs?.application!.navigateToApp('data-explorer', {
+        path: `discover#?_a=(discover:(columns:!(_source),isDirty:!f,sort:!()),metadata:(view:discover))&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:'${startTime}',to:'${endTime}'))&_q=(filters:!(),query:(dataset:(dataSource:(id:'${
+          props.dataSourceMDSId ?? ''
+        }',title:${props.dataSourceMDSLabel},type:DATA_SOURCE),id:'${
+          props.dataSourceMDSId ?? ''
+        }::ss4o_logs-*',timeFieldName:'time',title:'ss4o_logs-*',type:INDEXES),language:PPL,query:'source%20%3D%20ss4o_logs-*%20%7C%20where%20${spanField}%20%3D%20!'${spanId}!''))`,
+      });
+    } else {
+      coreRefs?.application!.navigateToApp(observabilityLogsID, {
+        path: `#/explorer`,
+        state: {
+          DEFAULT_DATA_SOURCE_NAME,
+          DEFAULT_DATA_SOURCE_TYPE,
+          queryToRun: `source = ss4o_logs-* | where ${spanField}='${spanId}'`,
+          startTimeRange: startTime,
+          endTimeRange: endTime,
+        },
+      });
+    }
   };
 
   return (

public/components/trace_analytics/home.tsx

@@ -17,9 +17,11 @@
 } from '../../../../../src/core/public';
 import {
   DataSourceManagementPluginSetup,
+  DataSourceOption,
   DataSourceSelectableConfig,
   DataSourceViewConfig,
 } from '../../../../../src/plugins/data_source_management/public';
+import { DataSourceAttributes } from '../../../../../src/plugins/data_source_management/public/types';
 import { TRACE_TABLE_TYPE_KEY } from '../../../common/constants/trace_analytics';
 import { TraceAnalyticsMode, TraceQueryMode } from '../../../common/types/trace_analytics';
 import { coreRefs } from '../../framework/core_refs';
@@ -69,7 +71,7 @@
   }: {
     spanId: string;
     isFlyoutVisible: boolean;
     addSpanFilter: (field: string, value: any) => void;
     spanMode: TraceAnalyticsMode;
     spanDataSourceMDSId: string;
   }) => void;
@@ -122,7 +124,7 @@
   const queryParamsOnLoad = new URLSearchParams(window.location.href.split('?')[1]);
   const dsFromURL = queryParamsOnLoad.get('datasourceId');
 
-  const [dataSourceMDSId, setDataSourceMDSId] = useState([
+  const [dataSourceMDSId, setDataSourceMDSId] = useState<DataSourceOption>([
     { id: dsFromURL ?? undefined, label: undefined },
   ]);
   const [currentSelectedService, setCurrentSelectedService] = useState('');
@@ -186,7 +188,7 @@
     ) : (
       <DataSourceMenuView {...sharedProps} componentType={'DataSourceView'} />
     );
   }, [
     dataSourceMDSId,
     dataSourceMenuSelectable,
     props.setActionMenu,
@@ -194,13 +196,28 @@
     props.notifications,
   ]);
 
+  // This function sets mds label given the id is set in state:dataSourceMDSId
+  const getDatasourceAttributes = async () => {
+    const dataSourceAttributes = await coreRefs?.savedObjectsClient?.get<DataSourceAttributes>(
+      'data-source',
+      dataSourceMDSId[0].id
+    );
+    setDataSourceMDSId([
+      { id: dataSourceMDSId[0].id, label: dataSourceAttributes?.attributes.title },
+    ]);
+  };
+
   useEffect(() => {
     handleDataPrepperIndicesExistRequest(
       props.http,
       setDataPrepperIndicesExist,
       dataSourceMDSId[0].id
     );
     handleJaegerIndicesExistRequest(props.http, setJaegerIndicesExist, dataSourceMDSId[0].id);
+    // When datasource is loaded form the URL, the label is set to undefined
+    if (dataSourceMDSId[0].id && dataSourceMDSId[0].label === undefined) {
+      getDatasourceAttributes();
+    }
   }, [dataSourceMDSId]);
 
   const modes = [