---

yaml
---
r: 170359
b: refs/heads/chore/arve-oauth-orgs
c: 85a0479
h: refs/heads/master
i:
  170357: d8f1fff
  170355: d85872f
  170351: 5b1d635

[refs]

@@ -562,7 +562,7 @@ refs/heads/sub-400-fixes: 2e94cff18bc022b66839ba9d66fe937112efdaff
 refs/heads/webpack-perf-improvements: 16fc8e415e6c2310d1166388bd8776f67cd07883
 refs/tags/v7.0.6: e8c57c79d3c6922bee1118ce3da10be3ac8fa35e
 refs/tags/v7.1.0-beta3: f3bef580fe8539bf5e8227e79af6ac7eaa04d20a
-refs/heads/chore/arve-oauth-orgs: 1bff2fdeea613fdcbe7b6dd0842d781550b859d8
+refs/heads/chore/arve-oauth-orgs: 85a04794aca05b9d591c60eafdd60a4745b622bc
 refs/heads/chore/cloudwatch-dataframes: 68af58f75a192e53fd775889f9e9144e011b8a8c
 refs/heads/chore/cloudwatch-tests: c0d121e2aee43970b6fe037ef099063cbd601174
 refs/heads/chore/dashboardErr: f6386bf405bafe3f2239b43497bcd8ac314609f0

branches/chore/arve-oauth-orgs/packages/grafana-data/src/field/overrides/processors.ts

@@ -24,6 +24,12 @@ export const numberOverrideProcessor = (
   return parseFloat(value);
 };
 
+export interface SliderFieldConfigSettings {
+  min: number;
+  max: number;
+  step?: number;
+}
+
 export interface DataLinksFieldConfigSettings {}
 
 export const dataLinksOverrideProcessor = (

branches/chore/arve-oauth-orgs/packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts

@@ -1,6 +1,11 @@
 import { ComponentType } from 'react';
 import { RegistryItem, Registry } from '../utils/Registry';
-import { NumberFieldConfigSettings, SelectFieldConfigSettings, StringFieldConfigSettings } from '../field';
+import {
+  NumberFieldConfigSettings,
+  SliderFieldConfigSettings,
+  SelectFieldConfigSettings,
+  StringFieldConfigSettings,
+} from '../field';
 
 /**
  * Option editor registry item
@@ -71,6 +76,10 @@ export interface OptionsUIRegistryBuilderAPI<
     config: OptionEditorConfig<TOptions, TSettings, number>
   ): this;
 
+  addSliderInput?<TSettings extends SliderFieldConfigSettings = SliderFieldConfigSettings>(
+    config: OptionEditorConfig<TOptions, TSettings, number>
+  ): this;
+
   addTextInput?<TSettings extends StringFieldConfigSettings = StringFieldConfigSettings>(
     config: OptionEditorConfig<TOptions, TSettings, string>
   ): this;

branches/chore/arve-oauth-orgs/packages/grafana-data/src/utils/OptionsUIBuilders.ts

@@ -12,6 +12,7 @@ import {
   StandardEditorProps,
   StringFieldConfigSettings,
   NumberFieldConfigSettings,
+  SliderFieldConfigSettings,
   ColorFieldConfigSettings,
   identityOverrideProcessor,
   UnitFieldConfigSettings,
@@ -39,6 +40,18 @@ export class FieldConfigEditorBuilder<TOptions> extends OptionsUIRegistryBuilder
     });
   }
 
+  addSliderInput<TSettings>(config: FieldConfigEditorConfig<TOptions, TSettings & SliderFieldConfigSettings, number>) {
+    return this.addCustomEditor({
+      ...config,
+      id: config.path,
+      override: standardEditorsRegistry.get('slider').editor as any,
+      editor: standardEditorsRegistry.get('slider').editor as any,
+      process: numberOverrideProcessor,
+      shouldApply: config.shouldApply ? config.shouldApply : field => field.type === FieldType.number,
+      settings: config.settings || {},
+    });
+  }
+
   addTextInput<TSettings>(config: FieldConfigEditorConfig<TOptions, TSettings & StringFieldConfigSettings, string>) {
     return this.addCustomEditor({
       ...config,
@@ -136,6 +149,14 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
     });
   }
 
+  addSliderInput<TSettings>(config: PanelOptionsEditorConfig<TOptions, TSettings & SliderFieldConfigSettings, number>) {
+    return this.addCustomEditor({
+      ...config,
+      id: config.path,
+      editor: standardEditorsRegistry.get('slider').editor as any,
+    });
+  }
+
   addTextInput<TSettings>(config: PanelOptionsEditorConfig<TOptions, TSettings & StringFieldConfigSettings, string>) {
     return this.addCustomEditor({
       ...config,

branches/chore/arve-oauth-orgs/packages/grafana-ui/src/components/OptionsUI/slider.tsx

@@ -0,0 +1,27 @@
+import React, { useCallback } from 'react';
+import { FieldConfigEditorProps, SliderFieldConfigSettings } from '@grafana/data';
+import { Slider } from '../Slider/Slider';
+
+export const SliderValueEditor: React.FC<FieldConfigEditorProps<number, SliderFieldConfigSettings>> = ({
+  value,
+  onChange,
+  item,
+}) => {
+  const { settings } = item;
+  const onValueAfterChange = useCallback(
+    (value?: number) => {
+      onChange(value);
+    },
+    [onChange]
+  );
+  const initialValue = typeof value === 'number' ? value : typeof value === 'string' ? +value : 0;
+  return (
+    <Slider
+      value={initialValue}
+      min={settings?.min || 0}
+      max={settings?.max || 100}
+      step={settings?.step}
+      onAfterChange={onValueAfterChange}
+    />
+  );
+};

branches/chore/arve-oauth-orgs/packages/grafana-ui/src/components/Slider/RangeSlider.mdx

@@ -0,0 +1,12 @@
+import { Meta, Props } from '@storybook/addon-docs/blocks';
+import { RangeSliderProps } from './types';
+
+<Meta title="MDX|RangeSlider" />
+
+# Range-slider
+
+The `Range-slider` component is an input element where users can manipulate two values on a one-dimensional axis.
+
+`Range-slider` can be implemented in horizontal or vertical orientation. You can set the default starting values for the slider with the `value` prop.
+
+<Props of={RangeSliderProps} />

branches/chore/arve-oauth-orgs/packages/grafana-ui/src/components/Slider/RangeSlider.story.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { RangeSlider } from '@grafana/ui';
+import { select, number, boolean } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Forms/Slider/Range',
+  component: RangeSlider,
+};
+
+const getKnobs = () => {
+  return {
+    min: number('min', 0),
+    max: number('max', 100),
+    step: boolean('enable step', false),
+    orientation: select('orientation', ['horizontal', 'vertical'], 'horizontal'),
+    reverse: boolean('reverse', false),
+  };
+};
+
+const SliderWrapper = () => {
+  const { min, max, orientation, reverse, step } = getKnobs();
+  const stepValue = step ? 10 : undefined;
+  return (
+    <div style={{ width: '200px', height: '200px' }}>
+      <RangeSlider min={min} max={max} step={stepValue} orientation={orientation} value={[10, 20]} reverse={reverse} />
+    </div>
+  );
+};
+
+export const basic = () => <SliderWrapper />;

branches/chore/arve-oauth-orgs/packages/grafana-ui/src/components/Slider/RangeSlider.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { RangeSlider } from './RangeSlider';
+import { RangeSliderProps } from './types';
+import { render } from '@testing-library/react';
+
+const sliderProps: RangeSliderProps = {
+  min: 10,
+  max: 20,
+};
+
+describe('RangeSlider', () => {
+  it('renders without error', () => {
+    expect(() => {
+      render(<RangeSlider {...sliderProps} />);
+    });
+  });
+});

branches/chore/arve-oauth-orgs/packages/grafana-ui/src/components/Slider/RangeSlider.tsx

@@ -0,0 +1,53 @@
+import React, { FunctionComponent } from 'react';
+import { Range as RangeComponent, createSliderWithTooltip } from 'rc-slider';
+import { cx } from 'emotion';
+import { Global } from '@emotion/core';
+import { useTheme } from '../../themes/ThemeContext';
+import { getStyles } from './styles';
+import { RangeSliderProps } from './types';
+
+/**
+ * @public
+ *
+ * RichHistoryQueriesTab uses this Range Component
+ */
+export const RangeSlider: FunctionComponent<RangeSliderProps> = ({
+  min,
+  max,
+  onChange,
+  onAfterChange,
+  orientation = 'horizontal',
+  reverse,
+  step,
+  formatTooltipResult,
+  value,
+  tooltipAlwaysVisible = true,
+}) => {
+  const isHorizontal = orientation === 'horizontal';
+  const theme = useTheme();
+  const styles = getStyles(theme, isHorizontal);
+  const RangeWithTooltip = createSliderWithTooltip(RangeComponent);
+  return (
+    <div className={cx(styles.container, styles.slider)}>
+      {/** Slider tooltip's parent component is body and therefore we need Global component to do css overrides for it. */}
+      <Global styles={styles.tooltip} />
+      <RangeWithTooltip
+        tipProps={{
+          visible: tooltipAlwaysVisible,
+          placement: isHorizontal ? 'top' : 'right',
+        }}
+        min={min}
+        max={max}
+        step={step}
+        defaultValue={value}
+        tipFormatter={(value: number) => (formatTooltipResult ? formatTooltipResult(value) : value)}
+        onChange={onChange}
+        onAfterChange={onAfterChange}
+        vertical={!isHorizontal}
+        reverse={reverse}
+      />
+    </div>
+  );
+};
+
+RangeSlider.displayName = 'Range';

branches/chore/arve-oauth-orgs/packages/grafana-ui/src/components/Slider/Slider.mdx

@@ -1,12 +1,12 @@
 import { Meta, Props } from '@storybook/addon-docs/blocks';
-import { Slider } from './Slider';
+import { SliderProps } from './types';
 
 <Meta title="MDX|Slider" />
 
 # Slider
 
-The `Slider` component is an input element where users can manipulate one or two values on a one-dimensional axis. 
+The `Slider` component is an input element where users can manipulate one value on a one-dimensional axis.
 
-`Slider` can be implemented in horizontal or vertical orientation. You can set the default starting value(s) for the slider with the `value` prop. 
+`Slider` can be implemented in horizontal or vertical orientation. You can set the default starting value(s) for the slider with the `value` prop.
 
-<Props of={Slider} />
+<Props of={SliderProps} />

branches/chore/arve-oauth-orgs/packages/grafana-ui/src/components/Slider/Slider.story.tsx

@@ -13,24 +13,16 @@ const getKnobs = () => {
     max: number('max', 100),
     step: boolean('enable step', false),
     orientation: select('orientation', ['horizontal', 'vertical'], 'horizontal'),
-    reverse: boolean('reverse', true),
-    singleValue: boolean('single value', false),
+    reverse: boolean('reverse', false),
   };
 };
 
 const SliderWrapper = () => {
-  const { min, max, orientation, reverse, singleValue, step } = getKnobs();
+  const { min, max, orientation, reverse, step } = getKnobs();
   const stepValue = step ? 10 : undefined;
   return (
     <div style={{ width: '200px', height: '200px' }}>
-      <Slider
-        min={min}
-        max={max}
-        step={stepValue}
-        orientation={orientation}
-        value={singleValue ? [10] : undefined}
-        reverse={reverse}
-      />
+      <Slider min={min} max={max} step={stepValue} orientation={orientation} value={10} reverse={reverse} />
     </div>
   );
 };

branches/chore/arve-oauth-orgs/packages/grafana-ui/src/components/Slider/Slider.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Slider, Props } from './Slider';
+import { Slider } from './Slider';
+import { SliderProps } from './types';
 import { mount } from 'enzyme';
 
-const sliderProps: Props = {
+const sliderProps: SliderProps = {
   min: 10,
   max: 20,
 };
@@ -17,11 +18,10 @@ describe('Slider', () => {
     expect(wrapper.html()).toContain('aria-valuemin="10"');
     expect(wrapper.html()).toContain('aria-valuemax="20"');
     expect(wrapper.html()).toContain('aria-valuenow="10"');
-    expect(wrapper.html()).toContain('aria-valuenow="20"');
   });
 
   it('renders correct contents with a value', () => {
-    const wrapper = mount(<Slider {...sliderProps} value={[15]} />);
+    const wrapper = mount(<Slider {...sliderProps} value={15} />);
     expect(wrapper.html()).toContain('aria-valuenow="15"');
     expect(wrapper.html()).not.toContain('aria-valuenow="20"');
     expect(wrapper.html()).not.toContain('aria-valuenow="10"');