Merge branch 'master' of https://github.com/grafana/grafana into piechart-react

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

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import isNil from 'lodash/isNil';
 import classNames from 'classnames';
 import Scrollbars from 'react-custom-scrollbars';
@@ -20,7 +20,7 @@ interface Props {
 /**
  * Wraps component into <Scrollbars> component from `react-custom-scrollbars`
  */
-export class CustomScrollbar extends PureComponent<Props> {
+export class CustomScrollbar extends Component<Props> {
   static defaultProps: Partial<Props> = {
     autoHide: false,
     autoHideTimeout: 200,
@@ -42,11 +42,7 @@ export class CustomScrollbar extends PureComponent<Props> {
     const ref = this.ref.current;
 
     if (ref && !isNil(this.props.scrollTop)) {
-      if (this.props.scrollTop > 10000) {
-        ref.scrollToBottom();
-      } else {
-        ref.scrollTop(this.props.scrollTop);
-      }
+      ref.scrollTop(this.props.scrollTop);
     }
   }
 

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

@@ -0,0 +1,53 @@
+import React, { PureComponent } from 'react';
+
+import { Select } from '..';
+
+import { getValueFormats } from '../../utils';
+
+interface Props {
+  onChange: (item: any) => void;
+  defaultValue?: string;
+  width?: number;
+}
+
+export class UnitPicker extends PureComponent<Props> {
+  static defaultProps = {
+    width: 12,
+  };
+
+  render() {
+    const { defaultValue, onChange, width } = this.props;
+
+    const unitGroups = getValueFormats();
+
+    // Need to transform the data structure to work well with Select
+    const groupOptions = unitGroups.map(group => {
+      const options = group.submenu.map(unit => {
+        return {
+          label: unit.text,
+          value: unit.value,
+        };
+      });
+
+      return {
+        label: group.text,
+        options,
+      };
+    });
+
+    const value = groupOptions.map(group => {
+      return group.options.find(option => option.value === defaultValue);
+    });
+
+    return (
+      <Select
+        width={width}
+        defaultValue={value}
+        isSearchable={true}
+        options={groupOptions}
+        placeholder="Choose"
+        onChange={onChange}
+      />
+    );
+  }
+}

packages/grafana-ui/src/components/index.ts

@@ -27,3 +27,4 @@ export { Gauge } from './Gauge/Gauge';
 export { Switch } from './Switch/Switch';
 export { EmptySearchResult } from './EmptySearchResult/EmptySearchResult';
 export { Piechart, PiechartDataPoint, PiechartType } from './Piechart/Piechart';
+export { UnitPicker } from './UnitPicker/UnitPicker';

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

@@ -39,6 +39,16 @@ export interface DataQueryError {
   statusText?: string;
 }
 
+export interface ScopedVar {
+  text: any;
+  value: any;
+  [key: string]: any;
+}
+
+export interface ScopedVars {
+  [key: string]: ScopedVar;
+}
+
 export interface DataQueryOptions<TQuery extends DataQuery = DataQuery> {
   timezone: string;
   range: TimeRange;
@@ -50,7 +60,7 @@ export interface DataQueryOptions<TQuery extends DataQuery = DataQuery> {
   interval: string;
   intervalMs: number;
   maxDataPoints: number;
-  scopedVars: object;
+  scopedVars: ScopedVars;
 }
 
 export interface QueryFix {

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

@@ -12,7 +12,7 @@ export interface PanelProps<T = any> {
   renderCounter: number;
   width: number;
   height: number;
-  onInterpolate: InterpolateFunction;
+  replaceVariables: InterpolateFunction;
 }
 
 export interface PanelData {
@@ -22,7 +22,7 @@ export interface PanelData {
 
 export interface PanelEditorProps<T = any> {
   options: T;
-  onChange: (options: T) => void;
+  onOptionsChange: (options: T) => void;
 }
 
 export class ReactPanelPlugin<TOptions = any> {

packages/grafana-ui/src/utils/valueFormats/categories.ts

@@ -125,7 +125,7 @@ export const getCategories = (): ValueFormatCategory[] => [
   {
     name: 'Data (Metric)',
     formats: [
-      { name: 'bits', id: 'decbits', fn: decimalSIPrefix('d') },
+      { name: 'bits', id: 'decbits', fn: decimalSIPrefix('b') },
       { name: 'bytes', id: 'decbytes', fn: decimalSIPrefix('B') },
       { name: 'kilobytes', id: 'deckbytes', fn: decimalSIPrefix('B', 1) },
       { name: 'megabytes', id: 'decmbytes', fn: decimalSIPrefix('B', 2) },