Explore: Adds Live option for supported datasources (#17062)

* Wip: Initial commit

* Refactor: Adds support in Loki datasource for streaming

* Refactor: Adds Live option to RefreshInterval

* Refactor: Adds styles to logrows

* Style: Reverses the order of Explore layout on Live

* Refactor: Adds LiveLogs component

* Tests: Adds tests for epics

* Style: Adds animation to Live in RefreshPicker

* Refactor: Adds ElapsedTime and progress line to LiveLogs

* Style: Adds specific colors to each theme

* Refactor: Adds support for Lokis new API

* Fix: Adds null to resulting empty array

* Refactor: Limits the rate of incoming messages from websockets

* Refactor: Throttles messages instead for simplicity

* Refactor: Optimizes row processing performance

* Refactor: Adds stop live button

* Fix: Fixes so that RefreshPicker shows the correct value when called programmatically

* Refactor: Merges with master and removes a console.log

* Refactor: Sorts rows in correct order and fixes minor UI issues

* Refactor: Adds minor improvments to sorting and container size

packages/grafana-ui/src/components/Button/AbstractButton.tsx

@@ -75,6 +75,12 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV
       iconDistance = theme.spacing.xs;
       height = theme.height.sm;
       break;
+    case ButtonSize.Medium:
+      padding = `${theme.spacing.sm} ${theme.spacing.md}`;
+      fontSize = theme.typography.size.md;
+      iconDistance = theme.spacing.sm;
+      height = theme.height.md;
+      break;
     case ButtonSize.Large:
       padding = `${theme.spacing.md} ${theme.spacing.lg}`;
       fontSize = theme.typography.size.lg;

packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx

@@ -5,7 +5,9 @@ import { Tooltip } from '../Tooltip/Tooltip';
 import { ButtonSelect } from '../Select/ButtonSelect';
 
 export const offOption = { label: 'Off', value: '' };
+export const liveOption = { label: 'Live', value: 'LIVE' };
 export const defaultIntervals = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];
+export const isLive = (refreshInterval: string): boolean => refreshInterval === liveOption.value;
 
 export interface Props {
   intervals?: string[];
@@ -13,6 +15,7 @@ export interface Props {
   onIntervalChanged: (interval: string) => void;
   value?: string;
   tooltip: string;
+  hasLiveOption?: boolean;
 }
 
 export class RefreshPicker extends PureComponent<Props> {
@@ -36,6 +39,9 @@ export class RefreshPicker extends PureComponent<Props> {
 
   intervalsToOptions = (intervals: string[] = defaultIntervals): Array<SelectOptionItem<string>> => {
     const options = intervals.map(interval => ({ label: interval, value: interval }));
+    if (this.props.hasLiveOption) {
+      options.unshift(liveOption);
+    }
     options.unshift(offOption);
     return options;
   };
@@ -57,6 +63,7 @@ export class RefreshPicker extends PureComponent<Props> {
     const cssClasses = classNames({
       'refresh-picker': true,
       'refresh-picker--off': selectedValue.label === offOption.label,
+      'refresh-picker--live': selectedValue === liveOption,
     });
 
     return (
@@ -68,7 +75,7 @@ export class RefreshPicker extends PureComponent<Props> {
             </button>
           </Tooltip>
           <ButtonSelect
-            className="navbar-button--attached btn--radius-left-0"
+            className="navbar-button--attached btn--radius-left-0$"
             value={selectedValue}
             label={selectedValue.label}
             options={options}

packages/grafana-ui/src/components/RefreshPicker/_RefreshPicker.scss

@@ -30,7 +30,25 @@
     }
   }
 
+  &--live {
+    .select-button-value {
+      animation: liveText 2s infinite;
+    }
+  }
+
   @include media-breakpoint-up(sm) {
     display: block;
   }
 }
+
+@keyframes liveText {
+  0% {
+    color: $orange;
+  }
+  50% {
+    color: $yellow;
+  }
+  100% {
+    color: $orange;
+  }
+}

packages/grafana-ui/src/components/Select/ButtonSelect.tsx

@@ -74,7 +74,7 @@ export class ButtonSelect<T> extends PureComponent<Props<T>> {
         isSearchable={false}
         options={options}
         onChange={this.onChange}
-        defaultValue={value}
+        value={value}
         maxMenuHeight={maxMenuHeight}
         components={combinedComponents}
         className="gf-form-select-box-button-select"

packages/grafana-ui/src/components/SetInterval/SetInterval.tsx

@@ -1,8 +1,10 @@
 import { PureComponent } from 'react';
-import { interval, Subscription, empty, Subject } from 'rxjs';
+import { interval, Subscription, Subject, of, NEVER } from 'rxjs';
 import { tap, switchMap } from 'rxjs/operators';
+import _ from 'lodash';
 
 import { stringToMs } from '../../utils/string';
+import { isLive } from '../RefreshPicker/RefreshPicker';
 
 interface Props {
   func: () => any; // TODO
@@ -24,7 +26,10 @@ export class SetInterval extends PureComponent<Props> {
     this.subscription = this.propsSubject
       .pipe(
         switchMap(props => {
-          return props.loading ? empty() : interval(stringToMs(props.interval));
+          if (isLive(props.interval)) {
+            return of({});
+          }
+          return props.loading ? NEVER : interval(stringToMs(props.interval));
         }),
         tap(() => this.props.func())
       )
@@ -32,7 +37,11 @@ export class SetInterval extends PureComponent<Props> {
     this.propsSubject.next(this.props);
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: Props) {
+    if (_.isEqual(prevProps, this.props)) {
+      return;
+    }
+
     this.propsSubject.next(this.props);
   }
 

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

@@ -84,6 +84,7 @@ export interface DataSourcePluginMeta extends PluginMeta {
   category?: string;
   queryOptions?: PluginMetaQueryOptions;
   sort?: number;
+  supportsStreaming?: boolean;
 }
 
 interface PluginMetaQueryOptions {
@@ -157,6 +158,10 @@ export abstract class DataSourceApi<
    */
   abstract query(options: DataQueryRequest<TQuery>, observer?: DataStreamObserver): Promise<DataQueryResponse>;
 
+  convertToStreamTargets?(options: DataQueryRequest<TQuery>): Array<{ url: string; refId: string }>;
+
+  resultToSeriesData?(data: any, refId: string): SeriesData[];
+
   /**
    * Test & verify datasource settings & connection details
    */

packages/grafana-ui/src/utils/moment_wrapper.ts

@@ -43,6 +43,9 @@ export interface DateTimeLocale {
 
 export interface DateTimeDuration {
   asHours: () => number;
+  hours: () => number;
+  minutes: () => number;
+  seconds: () => number;
 }
 
 export interface DateTime extends Object {