started on thresholds

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

@@ -136,7 +136,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
     return (
       <div className={containerClass}>
         <div className={panelWrapperClass} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-          <PanelChrome component={plugin.exports.Panel} panel={panel} dashboard={dashboard} />
+          <PanelChrome plugin={plugin} panel={panel} dashboard={dashboard} />
         </div>
         {panel.isEditing && (
           <PanelEditor panel={panel} plugin={plugin} dashboard={dashboard} onTypeChanged={this.onPluginTypeChanged} />

public/app/features/dashboard/dashgrid/PanelChrome.tsx

 // Libraries
-import React, { ComponentClass, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { AutoSizer } from 'react-virtualized';
 
 // Services
@@ -16,12 +16,12 @@ import { PANEL_HEADER_HEIGHT } from 'app/core/constants';
 // Types
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
-import { TimeRange, PanelProps } from 'app/types';
+import { PanelPlugin, TimeRange } from 'app/types';
 
 export interface Props {
   panel: PanelModel;
   dashboard: DashboardModel;
-  component: ComponentClass<PanelProps>;
+  plugin: PanelPlugin;
 }
 
 export interface State {
@@ -80,11 +80,11 @@ export class PanelChrome extends PureComponent<Props, State> {
   }
 
   render() {
-    const { panel, dashboard } = this.props;
+    const { panel, dashboard, plugin } = this.props;
     const { refreshCounter, timeRange, timeInfo, renderCounter } = this.state;
 
     const { datasource, targets } = panel;
-    const PanelComponent = this.props.component;
+    const PanelComponent = plugin.exports.Panel;
 
     return (
       <AutoSizer>
@@ -111,7 +111,7 @@ export class PanelChrome extends PureComponent<Props, State> {
                         loading={loading}
                         timeSeries={timeSeries}
                         timeRange={timeRange}
-                        options={panel.getOptions()}
+                        options={panel.getOptions(plugin.exports.PanelDefaults)}
                         width={width}
                         height={height - PANEL_HEADER_HEIGHT}
                         renderCounter={renderCounter}

public/app/features/dashboard/dashgrid/VisualizationTab.tsx

@@ -24,7 +24,9 @@ export class VisualizationTab extends PureComponent<Props> {
     const { PanelOptions } = plugin.exports;
 
     if (PanelOptions) {
-      return <PanelOptions options={panel.getOptions()} onChange={this.onPanelOptionsChanged} />;
+      return (
+        <PanelOptions options={panel.getOptions(plugin.exports.PanelDefaults)} onChange={this.onPanelOptionsChanged} />
+      );
     } else {
       return <p>Visualization has no options</p>;
     }

public/app/features/dashboard/panel_model.ts

@@ -70,8 +70,8 @@ export class PanelModel {
     _.defaultsDeep(this, _.cloneDeep(defaults));
   }
 
-  getOptions() {
-    return this[this.getOptionsKey()] || {};
+  getOptions(panelDefaults) {
+    return _.defaultsDeep(this[this.getOptionsKey()] || {}, panelDefaults);
   }
 
   updateOptions(options: object) {

public/app/plugins/panel/gauge/GaugeOptions.tsx

 import React, { PureComponent } from 'react';
-import { OptionsProps } from './Options';
 import { Switch } from 'app/core/components/Switch/Switch';
+import { PanelOptionsProps } from 'app/types';
+import { OptionsProps } from './module';
 
-interface Props {
-  onChange: (item: any) => any;
-  options: OptionsProps;
-}
-
-export default class GaugeOptions extends PureComponent<Props> {
+export default class GaugeOptions extends PureComponent<PanelOptionsProps<OptionsProps>> {
   toggleThresholdLabels = () =>
     this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
 

public/app/plugins/panel/gauge/Options.tsx

-import React, { PureComponent } from 'react';
-import ValueOptions from './ValueOptions';
-import { PanelOptionsProps } from 'app/types';
-import GaugeOptions from './GaugeOptions';
-
-export interface OptionsProps {
-  decimals: number;
-  prefix: string;
-  showThresholdLabels: boolean;
-  showThresholdMarkers: boolean;
-  stat: string;
-  suffix: string;
-  unit: string;
-  thresholds: number[];
-  minValue: number;
-  maxValue: number;
-}
-
-export default class Options extends PureComponent<PanelOptionsProps<OptionsProps>> {
-  render() {
-    return (
-      <div>
-        <ValueOptions onChange={this.props.onChange} options={this.props.options} />
-        <GaugeOptions onChange={this.props.onChange} options={this.props.options} />
-      </div>
-    );
-  }
-}

public/app/plugins/panel/gauge/Thresholds.tsx

+import React, { PureComponent } from 'react';
+import { PanelOptionsProps, Threshold } from 'app/types';
+import { OptionsProps } from './module';
+import { Label } from '../../../core/components/Label/Label';
+
+interface State {
+  thresholds: Threshold[];
+}
+
+export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsProps>, State> {
+  state = {
+    thresholds: [{ label: 'Min', value: 0 }, { label: 'Max', value: 100 }],
+  };
+
+  onAddThreshold = () => {
+    this.setState(prevState => ({
+      thresholds: [prevState.thresholds[0], { label: '', value: 0 }, { label: 'Max', value: 100 }],
+    }));
+  };
+
+  render() {
+    const { thresholds } = this.state;
+
+    return (
+      <div className="section gf-form-group">
+        <h5 className="page-heading">Thresholds</h5>
+        <div style={{ display: 'flex', alignItems: 'flexStart' }}>
+          <div
+            style={{
+              width: '20px',
+              minHeight: '40px',
+              flex: '0 1 auto',
+              background: 'linear-gradient(to bottom, green, red)',
+            }}
+          />
+          <div style={{ flex: '1 0 auto' }}>
+            {thresholds.map((threshold, index) => {
+              return (
+                <div className="gf-form" key={`${threshold}-${index}`}>
+                  <Label width={5}>{threshold.label}</Label>
+                  <input className="gf-form-input" type="text" value={threshold.value} />
+                </div>
+              );
+            })}
+            <div className="gf-form">
+              <Label width={5}>Add</Label>
+              <span className="gf-form-input" onClick={this.onAddThreshold}>
+                +
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

public/app/plugins/panel/gauge/ValueOptions.tsx

@@ -2,7 +2,8 @@ import React, { PureComponent } from 'react';
 import { Label } from 'app/core/components/Label/Label';
 import SimplePicker from 'app/core/components/Picker/SimplePicker';
 import UnitPicker from 'app/core/components/Picker/Unit/UnitPicker';
-import { OptionsProps } from './Options';
+import { PanelOptionsProps } from 'app/types';
+import { OptionsProps } from './module';
 
 const statOptions = [
   { value: 'min', text: 'Min' },
@@ -20,12 +21,7 @@ const statOptions = [
 
 const labelWidth = 6;
 
-interface Props {
-  onChange: (arg: any) => void;
-  options: OptionsProps;
-}
-
-export default class ValueOptions extends PureComponent<Props> {
+export default class ValueOptions extends PureComponent<PanelOptionsProps<OptionsProps>> {
   onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value });
 
   onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value });

public/app/plugins/panel/gauge/module.tsx

 import React, { PureComponent } from 'react';
 import Gauge from 'app/viz/Gauge';
-import Options, { OptionsProps } from './Options';
-import { NullValueMode, PanelProps } from 'app/types';
+import { NullValueMode, PanelOptionsProps, PanelProps, Threshold } from 'app/types';
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
+import ValueOptions from './ValueOptions';
+import GaugeOptions from './GaugeOptions';
+import Thresholds from './Thresholds';
+
+export interface OptionsProps {
+  decimals: number;
+  prefix: string;
+  showThresholdLabels: boolean;
+  showThresholdMarkers: boolean;
+  stat: string;
+  suffix: string;
+  unit: string;
+  thresholds: Threshold[];
+  minValue: number;
+  maxValue: number;
+}
+
+export const defaultProps = {
+  options: {
+    minValue: 0,
+    maxValue: 100,
+    prefix: '',
+    showThresholdMarkers: true,
+    showThresholdLabels: false,
+    suffix: '',
+  },
+};
 
 interface Props extends PanelProps<OptionsProps> {}
 
@@ -19,4 +45,18 @@ class GaugePanel extends PureComponent<Props> {
   }
 }
 
-export { GaugePanel as Panel, Options as PanelOptions };
+class Options extends PureComponent<PanelOptionsProps<OptionsProps>> {
+  static defaultProps = defaultProps;
+
+  render() {
+    return (
+      <div>
+        <ValueOptions onChange={this.props.onChange} options={this.props.options} />
+        <GaugeOptions onChange={this.props.onChange} options={this.props.options} />
+        <Thresholds onChange={this.props.onChange} options={this.props.options} />
+      </div>
+    );
+  }
+}
+
+export { GaugePanel as Panel, Options as PanelOptions, defaultProps as PanelDefaults };

public/app/types/index.ts

@@ -20,7 +20,7 @@ import {
   DataQueryResponse,
   DataQueryOptions,
 } from './series';
-import { PanelProps, PanelOptionsProps } from './panel';
+import { PanelProps, PanelOptionsProps, Threshold } from './panel';
 import { PluginDashboard, PluginMeta, Plugin, PanelPlugin, PluginsState } from './plugins';
 import { Organization, OrganizationState } from './organization';
 import {
@@ -89,6 +89,7 @@ export {
   AppNotificationTimeout,
   DashboardSearchHit,
   UserState,
+  Threshold,
 };
 
 export interface StoreState {

public/app/types/panel.ts

@@ -28,3 +28,9 @@ export interface PanelMenuItem {
   shortcut?: string;
   subMenu?: PanelMenuItem[];
 }
+
+export interface Threshold {
+  label: string;
+  value: number;
+  color?: string;
+}

public/app/types/plugins.ts

@@ -13,6 +13,7 @@ export interface PluginExports {
   PanelCtrl?;
   Panel?: ComponentClass<PanelProps>;
   PanelOptions?: ComponentClass<PanelOptionsProps>;
+  PanelDefaults?: any;
 }
 
 export interface PanelPlugin {

public/app/viz/Gauge.tsx

 import React, { PureComponent } from 'react';
 import $ from 'jquery';
-import { TimeSeriesVMs } from 'app/types';
+import { Threshold, TimeSeriesVMs } from 'app/types';
 import config from '../core/config';
 import kbn from '../core/utils/kbn';
 
@@ -10,7 +10,7 @@ interface Props {
   minValue: number;
   maxValue: number;
   showThresholdMarkers: boolean;
-  thresholds: number[];
+  thresholds: Threshold[];
   showThresholdLabels: boolean;
   unit: string;
   width: number;
@@ -32,7 +32,7 @@ export class Gauge extends PureComponent<Props> {
     showThresholdMarkers: true,
     showThresholdLabels: false,
     suffix: '',
-    thresholds: [0, 100],
+    thresholds: [{ label: 'Min', value: 0 }, { label: 'Max', value: 100 }],
   };
 
   componentDidMount() {
@@ -75,7 +75,7 @@ export class Gauge extends PureComponent<Props> {
 
     const formattedThresholds = thresholds.map((threshold, index) => {
       return {
-        value: threshold,
+        value: threshold.value,
         color: colors[index],
       };
     });