Trace UI demo (#20297)

* Add integration with Jeager
Add Jaeger datasource and modify derived fields in loki to allow for opening a trace in Jager in separate split.
Modifies build so that this branch docker images are pushed to docker hub
Add a traceui dir with docker-compose and provision files for demoing.:wq

* Enable docker logger plugin to send logs to loki

* Add placeholder zipkin datasource

* Fixed rebase issues, added enhanceDataFrame to non-legacy code path

* Trace selector for jaeger query field

* Fix logs default mode for Loki

* Fix loading jaeger query field services on split

* Updated grafana image in traceui/compose file

* Fix prettier error

* Hide behind feature flag, clean up unused code.

* Fix tests

* Fix tests

* Cleanup code and review feedback

* Remove traceui directory

* Remove circle build changes

* Fix feature toggles object

* Fix merge issues

* Fix some null errors

* Fix test after strict null changes

* Review feedback fixes

* Fix toggle name

Co-authored-by: David Kaltschmidt <david.kaltschmidt@gmail.com>

public/app/features/explore/LogsContainer.tsx

@@ -14,12 +14,13 @@ import {
   TimeRange,
   LogsMetaItem,
   GraphSeriesXY,
+  Field,
 } from '@grafana/data';
 
 import { ExploreId, ExploreItemState } from 'app/types/explore';
 import { StoreState } from 'app/types';
 
-import { changeDedupStrategy, updateTimeRange } from './state/actions';
+import { changeDedupStrategy, updateTimeRange, splitOpen } from './state/actions';
 import { toggleLogLevelAction } from 'app/features/explore/state/actionTypes';
 import { deduplicatedRowsSelector } from 'app/features/explore/state/selectors';
 import { getTimeZone } from '../profile/state/selectors';
@@ -57,6 +58,7 @@ interface LogsContainerProps {
   syncedTimes: boolean;
   absoluteRange: AbsoluteTimeRange;
   isPaused: boolean;
+  splitOpen: typeof splitOpen;
 }
 
 export class LogsContainer extends PureComponent<LogsContainerProps> {
@@ -87,6 +89,30 @@ export class LogsContainer extends PureComponent<LogsContainerProps> {
     return [];
   };
 
+  /**
+   * Get links from the filed of a dataframe that was given to as and in addition check if there is associated
+   * metadata with datasource in which case we will add onClick to open the link in new split window. This assumes
+   * that we just supply datasource name and field value and Explore split window will know how to render that
+   * appropriately. This is for example used for transition from log with traceId to trace datasource to show that
+   * trace.
+   * @param field
+   * @param rowIndex
+   */
+  getFieldLinks = (field: Field, rowIndex: number) => {
+    const data = getLinksFromLogsField(field, rowIndex);
+    return data.map(d => {
+      if (d.link.meta?.datasourceName) {
+        return {
+          ...d.linkModel,
+          onClick: () => {
+            this.props.splitOpen(d.link.meta.datasourceName, field.values.get(rowIndex));
+          },
+        };
+      }
+      return d.linkModel;
+    });
+  };
+
   render() {
     const {
       loading,
@@ -149,7 +175,7 @@ export class LogsContainer extends PureComponent<LogsContainerProps> {
               scanRange={range.raw}
               width={width}
               getRowContext={this.getLogRowContext}
-              getFieldLinks={getLinksFromLogsField}
+              getFieldLinks={this.getFieldLinks}
             />
           </Collapse>
         </LogsCrossFadeTransition>
@@ -199,6 +225,7 @@ const mapDispatchToProps = {
   changeDedupStrategy,
   toggleLogLevelAction,
   updateTimeRange,
+  splitOpen,
 };
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(LogsContainer));