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>

packages/grafana-data/src/datetime/datemath.ts

@@ -26,7 +26,11 @@ export namespace dateMath {
    * @param roundUp See parseDateMath function.
    * @param timezone Only string 'utc' is acceptable here, for anything else, local timezone is used.
    */
-  export function parse(text: string | DateTime | Date, roundUp?: boolean, timezone?: TimeZone): DateTime | undefined {
+  export function parse(
+    text?: string | DateTime | Date | null,
+    roundUp?: boolean,
+    timezone?: TimeZone
+  ): DateTime | undefined {
     if (!text) {
       return undefined;
     }

packages/grafana-data/src/types/dataLink.ts

@@ -27,6 +27,9 @@ export interface DataLink {
   // 1: If exists, handle click directly
   // Not saved in JSON/DTO
   onClick?: (event: DataLinkClickEvent) => void;
+
+  // At the moment this is used for derived fields for metadata about internal linking.
+  meta?: any;
 }
 
 export type LinkTarget = '_blank' | '_self';

packages/grafana-data/src/types/datasource.ts

@@ -115,6 +115,7 @@ export interface DataSourcePluginMeta<T extends KeyValue = {}> extends PluginMet
   logs?: boolean;
   annotations?: boolean;
   alerting?: boolean;
+  tracing?: boolean;
   mixed?: boolean;
   hasQueryHelp?: boolean;
   category?: string;
@@ -316,6 +317,7 @@ export enum DataSourceStatus {
 export enum ExploreMode {
   Logs = 'Logs',
   Metrics = 'Metrics',
+  Tracing = 'Tracing',
 }
 
 export interface ExploreQueryFieldProps<

packages/grafana-runtime/src/config.ts

@@ -19,6 +19,7 @@ interface FeatureToggles {
   newEdit: boolean;
   meta: boolean;
   newVariables: boolean;
+  tracingIntegration: boolean;
 }
 
 interface LicenseInfo {
@@ -71,6 +72,7 @@ export class GrafanaBootConfig {
     newEdit: false,
     meta: false,
     newVariables: false,
+    tracingIntegration: false,
   };
   licenseInfo: LicenseInfo = {} as LicenseInfo;
   phantomJSRenderer = false;

packages/grafana-ui/src/components/Logs/LogDetails.tsx

@@ -24,7 +24,7 @@ import { LogDetailsRow } from './LogDetailsRow';
 type FieldDef = {
   key: string;
   value: string;
-  links?: string[];
+  links?: Array<LinkModel<Field>>;
   fieldIndex?: number;
 };
 
@@ -99,7 +99,7 @@ class UnThemedLogDetails extends PureComponent<Props> {
           return {
             key: field.name,
             value: field.values.get(row.rowIndex).toString(),
-            links: links.map(link => link.href),
+            links: links,
             fieldIndex: field.index,
           };
         })

packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { css, cx } from 'emotion';
-import { LogLabelStatsModel, GrafanaTheme } from '@grafana/data';
+import { Field, LinkModel, LogLabelStatsModel, GrafanaTheme } from '@grafana/data';
 
 import { Themeable } from '../../types/theme';
 import { withTheme } from '../../themes/index';
@@ -9,6 +9,7 @@ import { stylesFactory } from '../../themes/stylesFactory';
 
 //Components
 import { LogLabelStats } from './LogLabelStats';
+import { LinkButton } from '../Button/Button';
 
 export interface Props extends Themeable {
   parsedValue: string;
@@ -16,7 +17,7 @@ export interface Props extends Themeable {
   isLabel?: boolean;
   onClickFilterLabel?: (key: string, value: string) => void;
   onClickFilterOutLabel?: (key: string, value: string) => void;
-  links?: string[];
+  links?: Array<LinkModel<Field>>;
   getStats: () => LogLabelStatsModel[] | null;
 }
 
@@ -122,11 +123,27 @@ class UnThemedLogDetailsRow extends PureComponent<Props, State> {
           {links &&
             links.map(link => {
               return (
-                <span key={link}>
-                  &nbsp;
-                  <a href={link} target={'_blank'}>
-                    <i className={'fa fa-external-link'} />
-                  </a>
+                <span key={link.href}>
+                  <>
+                    &nbsp;
+                    <LinkButton
+                      variant={'transparent'}
+                      size={'sm'}
+                      icon={cx('fa', link.onClick ? 'fa-list' : 'fa-external-link')}
+                      href={link.href}
+                      target={'_blank'}
+                      onClick={
+                        link.onClick
+                          ? event => {
+                              if (!(event.ctrlKey || event.metaKey || event.shiftKey) && link.onClick) {
+                                event.preventDefault();
+                                link.onClick(event);
+                              }
+                            }
+                          : undefined
+                      }
+                    />
+                  </>
                 </span>
               );
             })}