Merge remote-tracking branch 'origin/master' into reactify-stackdriver

package.json

@@ -64,6 +64,7 @@
     "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",
     "jest": "^23.6.0",
+    "jest-date-mock": "^1.0.6",
     "lint-staged": "^6.0.0",
     "load-grunt-tasks": "3.5.2",
     "mini-css-extract-plugin": "^0.4.0",

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

+import React, { SFC } from 'react';
+
+interface Props {
+  cols?: number;
+  children: JSX.Element[] | JSX.Element;
+}
+
+export const PanelOptionsGrid: SFC<Props> = ({ children }) => {
+
+  return (
+    <div className="panel-options-grid">
+      {children}
+    </div>
+  );
+};

packages/grafana-ui/src/components/PanelOptionsGrid/_PanelOptionsGrid.scss

+.panel-options-grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+
+  @include media-breakpoint-up(lg) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}

public/app/features/dashboard/dashgrid/PanelOptionSection.tsx → packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx

@@ -7,11 +7,11 @@ interface Props {
   children: JSX.Element | JSX.Element[];
 }
 
-export const PanelOptionSection: SFC<Props> = props => {
+export const PanelOptionsGroup: SFC<Props> = props => {
   return (
-    <div className="panel-option-section">
+    <div className="panel-options-group">
       {props.title && (
-        <div className="panel-option-section__header">
+        <div className="panel-options-group__header">
           {props.title}
           {props.onClose && (
             <button className="btn btn-link" onClick={props.onClose}>
@@ -20,7 +20,7 @@ export const PanelOptionSection: SFC<Props> = props => {
           )}
         </div>
       )}
-      <div className="panel-option-section__body">{props.children}</div>
+      <div className="panel-options-group__body">{props.children}</div>
     </div>
   );
 };

packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss

+.panel-options-group {
+  margin-bottom: 10px;
+  border: $panel-options-group-border;
+  border-radius: $border-radius;
+  background: $page-bg;
+}
+
+.panel-options-group__header {
+  padding: 4px 20px;
+  font-size: 1.1rem;
+  background: $panel-options-group-header-bg;
+  position: relative;
+
+  .btn {
+    position: absolute;
+    right: 0;
+    top: 0px;
+  }
+}
+
+.panel-options-group__body {
+  padding: 20px;
+
+  &--queries {
+    min-height: 200px;
+  }
+}

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

@@ -3,6 +3,7 @@ import tinycolor, { ColorInput } from 'tinycolor2';
 
 import { Threshold, BasicGaugeColor } from '../../types';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
+import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
 
 export interface Props {
   thresholds: Threshold[];
@@ -204,8 +205,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
 
   render() {
     return (
-      <div className="section gf-form-group">
-        <h5 className="section-heading">Thresholds</h5>
+      <PanelOptionsGroup title="Thresholds">
         <div className="thresholds">
           <div className="color-indicators">
             {this.renderIndicator()}
@@ -216,7 +216,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
             {this.renderBase()}
           </div>
         </div>
-      </div>
+      </PanelOptionsGroup>
     );
   }
 }

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

@@ -3,3 +3,5 @@
 @import 'ThresholdsEditor/ThresholdsEditor';
 @import 'Tooltip/Tooltip';
 @import 'Select/Select';
+@import 'PanelOptionsGroup/PanelOptionsGroup';
+@import 'PanelOptionsGrid/PanelOptionsGrid';

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

@@ -14,3 +14,7 @@ export { ColorPicker } from './ColorPicker/ColorPicker';
 export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover';
 export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker';
 export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor';
+export { GfFormLabel } from './GfFormLabel/GfFormLabel';
+export { Graph } from './Graph/Graph';
+export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup';
+export { PanelOptionsGrid } from './PanelOptionsGrid/PanelOptionsGrid';

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

-export { GfFormLabel } from './GfFormLabel/GfFormLabel';

packages/grafana-ui/src/index.ts

 export * from './components';
-export * from './visualizations';
 export * from './types';
 export * from './utils';
-export * from './forms';

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

 export * from './processTimeSeries';
+export * from './valueFormats/valueFormats';
 export * from './colors';

packages/grafana-ui/src/utils/valueFormats/arithmeticFormatters.test.ts

+import { toHex, toHex0x } from './arithmeticFormatters';
+
+describe('hex', () => {
+  it('positive integer', () => {
+    const str = toHex(100, 0);
+    expect(str).toBe('64');
+  });
+  it('negative integer', () => {
+    const str = toHex(-100, 0);
+    expect(str).toBe('-64');
+  });
+  it('positive float', () => {
+    const str = toHex(50.52, 1);
+    expect(str).toBe('32.8');
+  });
+  it('negative float', () => {
+    const str = toHex(-50.333, 2);
+    expect(str).toBe('-32.547AE147AE14');
+  });
+});
+
+describe('hex 0x', () => {
+  it('positive integeter', () => {
+    const str = toHex0x(7999, 0);
+    expect(str).toBe('0x1F3F');
+  });
+  it('negative integer', () => {
+    const str = toHex0x(-584, 0);
+    expect(str).toBe('-0x248');
+  });
+
+  it('positive float', () => {
+    const str = toHex0x(74.443, 3);
+    expect(str).toBe('0x4A.716872B020C4');
+  });
+  it('negative float', () => {
+    const str = toHex0x(-65.458, 1);
+    expect(str).toBe('-0x41.8');
+  });
+});

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

+import { toFixed } from './valueFormats';
+
+export function toPercent(size: number, decimals: number) {
+  if (size === null) {
+    return '';
+  }
+  return toFixed(size, decimals) + '%';
+}
+
+export function toPercentUnit(size: number, decimals: number) {
+  if (size === null) {
+    return '';
+  }
+  return toFixed(100 * size, decimals) + '%';
+}
+
+export function toHex0x(value: number, decimals: number) {
+  if (value == null) {
+    return '';
+  }
+  const hexString = toHex(value, decimals);
+  if (hexString.substring(0, 1) === '-') {
+    return '-0x' + hexString.substring(1);
+  }
+  return '0x' + hexString;
+}
+
+export function toHex(value: number, decimals: number) {
+  if (value == null) {
+    return '';
+  }
+  return parseFloat(toFixed(value, decimals))
+    .toString(16)
+    .toUpperCase();
+}
+
+export function sci(value: number, decimals: number) {
+  if (value == null) {
+    return '';
+  }
+  return value.toExponential(decimals);
+}

packages/grafana-ui/src/utils/valueFormats/dateTimeFormatters.test.ts

+import moment from 'moment';
+import {
+  dateTimeAsIso,
+  dateTimeAsUS,
+  dateTimeFromNow,
+  Interval,
+  toClock,
+  toDuration,
+  toDurationInMilliseconds,
+  toDurationInSeconds,
+} from './dateTimeFormatters';
+
+describe('date time formats', () => {
+  const epoch = 1505634997920;
+  const utcTime = moment.utc(epoch);
+  const browserTime = moment(epoch);
+
+  it('should format as iso date', () => {
+    const expected = browserTime.format('YYYY-MM-DD HH:mm:ss');
+    const actual = dateTimeAsIso(epoch, 0, 0, false);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as iso date (in UTC)', () => {
+    const expected = utcTime.format('YYYY-MM-DD HH:mm:ss');
+    const actual = dateTimeAsIso(epoch, 0, 0, true);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as iso date and skip date when today', () => {
+    const now = moment();
+    const expected = now.format('HH:mm:ss');
+    const actual = dateTimeAsIso(now.valueOf(), 0, 0, false);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as iso date (in UTC) and skip date when today', () => {
+    const now = moment.utc();
+    const expected = now.format('HH:mm:ss');
+    const actual = dateTimeAsIso(now.valueOf(), 0, 0, true);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as US date', () => {
+    const expected = browserTime.format('MM/DD/YYYY h:mm:ss a');
+    const actual = dateTimeAsUS(epoch, 0, 0, false);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as US date (in UTC)', () => {
+    const expected = utcTime.format('MM/DD/YYYY h:mm:ss a');
+    const actual = dateTimeAsUS(epoch, 0, 0, true);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as US date and skip date when today', () => {
+    const now = moment();
+    const expected = now.format('h:mm:ss a');
+    const actual = dateTimeAsUS(now.valueOf(), 0, 0, false);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as US date (in UTC) and skip date when today', () => {
+    const now = moment.utc();
+    const expected = now.format('h:mm:ss a');
+    const actual = dateTimeAsUS(now.valueOf(), 0, 0, true);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as from now with days', () => {
+    const daysAgo = moment().add(-7, 'd');
+    const expected = '7 days ago';
+    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0, false);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as from now with days (in UTC)', () => {
+    const daysAgo = moment.utc().add(-7, 'd');
+    const expected = '7 days ago';
+    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0, true);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as from now with minutes', () => {
+    const daysAgo = moment().add(-2, 'm');
+    const expected = '2 minutes ago';
+    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0, false);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as from now with minutes (in UTC)', () => {
+    const daysAgo = moment.utc().add(-2, 'm');
+    const expected = '2 minutes ago';
+    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0, true);
+    expect(actual).toBe(expected);
+  });
+});
+
+describe('duration', () => {
+  it('0 milliseconds', () => {
+    const str = toDurationInMilliseconds(0, 0);
+    expect(str).toBe('0 milliseconds');
+  });
+  it('1 millisecond', () => {
+    const str = toDurationInMilliseconds(1, 0);
+    expect(str).toBe('1 millisecond');
+  });
+  it('-1 millisecond', () => {
+    const str = toDurationInMilliseconds(-1, 0);
+    expect(str).toBe('1 millisecond ago');
+  });
+  it('seconds', () => {
+    const str = toDurationInSeconds(1, 0);
+    expect(str).toBe('1 second');
+  });
+  it('minutes', () => {
+    const str = toDuration(1, 0, Interval.Minute);
+    expect(str).toBe('1 minute');
+  });
+  it('hours', () => {
+    const str = toDuration(1, 0, Interval.Hour);
+    expect(str).toBe('1 hour');
+  });
+  it('days', () => {
+    const str = toDuration(1, 0, Interval.Day);
+    expect(str).toBe('1 day');
+  });
+  it('weeks', () => {
+    const str = toDuration(1, 0, Interval.Week);
+    expect(str).toBe('1 week');
+  });
+  it('months', () => {
+    const str = toDuration(1, 0, Interval.Month);
+    expect(str).toBe('1 month');
+  });
+  it('years', () => {
+    const str = toDuration(1, 0, Interval.Year);
+    expect(str).toBe('1 year');
+  });
+  it('decimal days', () => {
+    const str = toDuration(1.5, 2, Interval.Day);
+    expect(str).toBe('1 day, 12 hours, 0 minutes');
+  });
+  it('decimal months', () => {
+    const str = toDuration(1.5, 3, Interval.Month);
+    expect(str).toBe('1 month, 2 weeks, 1 day, 0 hours');
+  });
+  it('no decimals', () => {
+    const str = toDuration(38898367008, 0, Interval.Millisecond);
+    expect(str).toBe('1 year');
+  });
+  it('1 decimal', () => {
+    const str = toDuration(38898367008, 1, Interval.Millisecond);
+    expect(str).toBe('1 year, 2 months');
+  });
+  it('too many decimals', () => {
+    const str = toDuration(38898367008, 20, Interval.Millisecond);
+    expect(str).toBe('1 year, 2 months, 3 weeks, 4 days, 5 hours, 6 minutes, 7 seconds, 8 milliseconds');
+  });
+  it('floating point error', () => {
+    const str = toDuration(36993906007, 8, Interval.Millisecond);
+    expect(str).toBe('1 year, 2 months, 0 weeks, 3 days, 4 hours, 5 minutes, 6 seconds, 7 milliseconds');
+  });
+});
+
+describe('clock', () => {
+  it('size less than 1 second', () => {
+    const str = toClock(999, 0);
+    expect(str).toBe('999ms');
+  });
+  describe('size less than 1 minute', () => {
+    it('default', () => {
+      const str = toClock(59999);
+      expect(str).toBe('59s:999ms');
+    });
+    it('decimals equals 0', () => {
+      const str = toClock(59999, 0);
+      expect(str).toBe('59s');
+    });
+  });
+  describe('size less than 1 hour', () => {
+    it('default', () => {
+      const str = toClock(3599999);
+      expect(str).toBe('59m:59s:999ms');
+    });
+    it('decimals equals 0', () => {
+      const str = toClock(3599999, 0);
+      expect(str).toBe('59m');
+    });
+    it('decimals equals 1', () => {
+      const str = toClock(3599999, 1);
+      expect(str).toBe('59m:59s');
+    });
+  });
+  describe('size greater than or equal 1 hour', () => {
+    it('default', () => {
+      const str = toClock(7199999);
+      expect(str).toBe('01h:59m:59s:999ms');
+    });
+    it('decimals equals 0', () => {
+      const str = toClock(7199999, 0);
+      expect(str).toBe('01h');
+    });
+    it('decimals equals 1', () => {
+      const str = toClock(7199999, 1);
+      expect(str).toBe('01h:59m');
+    });
+    it('decimals equals 2', () => {
+      const str = toClock(7199999, 2);
+      expect(str).toBe('01h:59m:59s');
+    });
+  });
+  describe('size greater than or equal 1 day', () => {
+    it('default', () => {
+      const str = toClock(89999999);
+      expect(str).toBe('24h:59m:59s:999ms');
+    });
+    it('decimals equals 0', () => {
+      const str = toClock(89999999, 0);
+      expect(str).toBe('24h');
+    });
+    it('decimals equals 1', () => {
+      const str = toClock(89999999, 1);
+      expect(str).toBe('24h:59m');
+    });
+    it('decimals equals 2', () => {
+      const str = toClock(89999999, 2);
+      expect(str).toBe('24h:59m:59s');
+    });
+  });
+});

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

+import { toFixed, toFixedScaled } from './valueFormats';
+import moment from 'moment';
+
+interface IntervalsInSeconds {
+  [interval: string]: number;
+}
+
+export enum Interval {
+  Year = 'year',
+  Month = 'month',
+  Week = 'week',
+  Day = 'day',
+  Hour = 'hour',
+  Minute = 'minute',
+  Second = 'second',
+  Millisecond = 'millisecond',
+}
+
+const INTERVALS_IN_SECONDS: IntervalsInSeconds = {
+  [Interval.Year]: 31536000,
+  [Interval.Month]: 2592000,
+  [Interval.Week]: 604800,
+  [Interval.Day]: 86400,
+  [Interval.Hour]: 3600,
+  [Interval.Minute]: 60,
+  [Interval.Second]: 1,
+  [Interval.Millisecond]: 0.001,
+};
+
+export function toNanoSeconds(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 1000) {
+    return toFixed(size, decimals) + ' ns';
+  } else if (Math.abs(size) < 1000000) {
+    return toFixedScaled(size / 1000, decimals, scaledDecimals, 3, ' µs');
+  } else if (Math.abs(size) < 1000000000) {
+    return toFixedScaled(size / 1000000, decimals, scaledDecimals, 6, ' ms');
+  } else if (Math.abs(size) < 60000000000) {
+    return toFixedScaled(size / 1000000000, decimals, scaledDecimals, 9, ' s');
+  } else {
+    return toFixedScaled(size / 60000000000, decimals, scaledDecimals, 12, ' min');
+  }
+}
+
+export function toMicroSeconds(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 1000) {
+    return toFixed(size, decimals) + ' µs';
+  } else if (Math.abs(size) < 1000000) {
+    return toFixedScaled(size / 1000, decimals, scaledDecimals, 3, ' ms');
+  } else {
+    return toFixedScaled(size / 1000000, decimals, scaledDecimals, 6, ' s');
+  }
+}
+
+export function toMilliSeconds(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 1000) {
+    return toFixed(size, decimals) + ' ms';
+  } else if (Math.abs(size) < 60000) {
+    // Less than 1 min
+    return toFixedScaled(size / 1000, decimals, scaledDecimals, 3, ' s');
+  } else if (Math.abs(size) < 3600000) {
+    // Less than 1 hour, divide in minutes
+    return toFixedScaled(size / 60000, decimals, scaledDecimals, 5, ' min');
+  } else if (Math.abs(size) < 86400000) {
+    // Less than one day, divide in hours
+    return toFixedScaled(size / 3600000, decimals, scaledDecimals, 7, ' hour');
+  } else if (Math.abs(size) < 31536000000) {
+    // Less than one year, divide in days
+    return toFixedScaled(size / 86400000, decimals, scaledDecimals, 8, ' day');
+  }
+
+  return toFixedScaled(size / 31536000000, decimals, scaledDecimals, 10, ' year');
+}
+
+export function toSeconds(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  // Less than 1 µs, divide in ns
+  if (Math.abs(size) < 0.000001) {
+    return toFixedScaled(size * 1e9, decimals, scaledDecimals - decimals, -9, ' ns');
+  }
+  // Less than 1 ms, divide in µs
+  if (Math.abs(size) < 0.001) {
+    return toFixedScaled(size * 1e6, decimals, scaledDecimals - decimals, -6, ' µs');
+  }
+  // Less than 1 second, divide in ms
+  if (Math.abs(size) < 1) {
+    return toFixedScaled(size * 1e3, decimals, scaledDecimals - decimals, -3, ' ms');
+  }
+
+  if (Math.abs(size) < 60) {
+    return toFixed(size, decimals) + ' s';
+  } else if (Math.abs(size) < 3600) {
+    // Less than 1 hour, divide in minutes
+    return toFixedScaled(size / 60, decimals, scaledDecimals, 1, ' min');
+  } else if (Math.abs(size) < 86400) {
+    // Less than one day, divide in hours
+    return toFixedScaled(size / 3600, decimals, scaledDecimals, 4, ' hour');
+  } else if (Math.abs(size) < 604800) {
+    // Less than one week, divide in days
+    return toFixedScaled(size / 86400, decimals, scaledDecimals, 5, ' day');
+  } else if (Math.abs(size) < 31536000) {
+    // Less than one year, divide in week
+    return toFixedScaled(size / 604800, decimals, scaledDecimals, 6, ' week');
+  }
+
+  return toFixedScaled(size / 3.15569e7, decimals, scaledDecimals, 7, ' year');
+}
+
+export function toMinutes(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 60) {
+    return toFixed(size, decimals) + ' min';
+  } else if (Math.abs(size) < 1440) {
+    return toFixedScaled(size / 60, decimals, scaledDecimals, 2, ' hour');
+  } else if (Math.abs(size) < 10080) {
+    return toFixedScaled(size / 1440, decimals, scaledDecimals, 3, ' day');
+  } else if (Math.abs(size) < 604800) {
+    return toFixedScaled(size / 10080, decimals, scaledDecimals, 4, ' week');
+  } else {
+    return toFixedScaled(size / 5.25948e5, decimals, scaledDecimals, 5, ' year');
+  }
+}
+
+export function toHours(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 24) {
+    return toFixed(size, decimals) + ' hour';
+  } else if (Math.abs(size) < 168) {
+    return toFixedScaled(size / 24, decimals, scaledDecimals, 2, ' day');
+  } else if (Math.abs(size) < 8760) {
+    return toFixedScaled(size / 168, decimals, scaledDecimals, 3, ' week');
+  } else {
+    return toFixedScaled(size / 8760, decimals, scaledDecimals, 4, ' year');
+  }
+}
+
+export function toDays(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 7) {
+    return toFixed(size, decimals) + ' day';
+  } else if (Math.abs(size) < 365) {
+    return toFixedScaled(size / 7, decimals, scaledDecimals, 2, ' week');
+  } else {
+    return toFixedScaled(size / 365, decimals, scaledDecimals, 3, ' year');
+  }
+}
+
+export function toDuration(size: number, decimals: number, timeScale: Interval): string {
+  if (size === null) {
+    return '';
+  }
+  if (size === 0) {
+    return '0 ' + timeScale + 's';
+  }
+  if (size < 0) {
+    return toDuration(-size, decimals, timeScale) + ' ago';
+  }
+
+  const units = [
+    { long: Interval.Year },
+    { long: Interval.Month },
+    { long: Interval.Week },
+    { long: Interval.Day },
+    { long: Interval.Hour },
+    { long: Interval.Minute },
+    { long: Interval.Second },
+    { long: Interval.Millisecond },
+  ];
+  // convert $size to milliseconds
+  // intervals_in_seconds uses seconds (duh), convert them to milliseconds here to minimize floating point errors
+  size *= INTERVALS_IN_SECONDS[timeScale] * 1000;
+
+  const strings = [];
+  // after first value >= 1 print only $decimals more
+  let decrementDecimals = false;
+  for (let i = 0; i < units.length && decimals >= 0; i++) {
+    const interval = INTERVALS_IN_SECONDS[units[i].long] * 1000;
+    const value = size / interval;
+    if (value >= 1 || decrementDecimals) {
+      decrementDecimals = true;
+      const floor = Math.floor(value);
+      const unit = units[i].long + (floor !== 1 ? 's' : '');
+      strings.push(floor + ' ' + unit);
+      size = size % interval;
+      decimals--;
+    }
+  }
+
+  return strings.join(', ');
+}
+
+export function toClock(size: number, decimals?: number) {
+  if (size === null) {
+    return '';
+  }
+
+  // < 1 second
+  if (size < 1000) {
+    return moment.utc(size).format('SSS\\m\\s');
+  }
+
+  // < 1 minute
+  if (size < 60000) {
+    let format = 'ss\\s:SSS\\m\\s';
+    if (decimals === 0) {
+      format = 'ss\\s';
+    }
+    return moment.utc(size).format(format);
+  }
+
+  // < 1 hour
+  if (size < 3600000) {
+    let format = 'mm\\m:ss\\s:SSS\\m\\s';
+    if (decimals === 0) {
+      format = 'mm\\m';
+    } else if (decimals === 1) {
+      format = 'mm\\m:ss\\s';
+    }
+    return moment.utc(size).format(format);
+  }
+
+  let format = 'mm\\m:ss\\s:SSS\\m\\s';
+
+  const hours = `${('0' + Math.floor(moment.duration(size, 'milliseconds').asHours())).slice(-2)}h`;
+
+  if (decimals === 0) {
+    format = '';
+  } else if (decimals === 1) {
+    format = 'mm\\m';
+  } else if (decimals === 2) {
+    format = 'mm\\m:ss\\s';
+  }
+
+  return format ? `${hours}:${moment.utc(size).format(format)}` : hours;
+}
+
+export function toDurationInMilliseconds(size: number, decimals: number) {
+  return toDuration(size, decimals, Interval.Millisecond);
+}
+
+export function toDurationInSeconds(size: number, decimals: number) {
+  return toDuration(size, decimals, Interval.Second);
+}
+
+export function toDurationInHoursMinutesSeconds(size: number) {
+  const strings = [];
+  const numHours = Math.floor(size / 3600);
+  const numMinutes = Math.floor((size % 3600) / 60);
+  const numSeconds = Math.floor((size % 3600) % 60);
+  numHours > 9 ? strings.push('' + numHours) : strings.push('0' + numHours);
+  numMinutes > 9 ? strings.push('' + numMinutes) : strings.push('0' + numMinutes);
+  numSeconds > 9 ? strings.push('' + numSeconds) : strings.push('0' + numSeconds);
+  return strings.join(':');
+}
+
+export function toTimeTicks(size: number, decimals: number, scaledDecimals: number) {
+  return toSeconds(size, decimals, scaledDecimals);
+}
+
+export function toClockMilliseconds(size: number, decimals: number) {
+  return toClock(size, decimals);
+}
+
+export function toClockSeconds(size: number, decimals: number) {
+  return toClock(size * 1000, decimals);
+}
+
+export function dateTimeAsIso(value: number, decimals: number, scaledDecimals: number, isUtc: boolean) {
+  const time = isUtc ? moment.utc(value) : moment(value);
+
+  if (moment().isSame(value, 'day')) {
+    return time.format('HH:mm:ss');
+  }
+  return time.format('YYYY-MM-DD HH:mm:ss');
+}
+
+export function dateTimeAsUS(value: number, decimals: number, scaledDecimals: number, isUtc: boolean) {
+  const time = isUtc ? moment.utc(value) : moment(value);
+
+  if (moment().isSame(value, 'day')) {
+    return time.format('h:mm:ss a');
+  }
+  return time.format('MM/DD/YYYY h:mm:ss a');
+}
+
+export function dateTimeFromNow(value: number, decimals: number, scaledDecimals: number, isUtc: boolean) {
+  const time = isUtc ? moment.utc(value) : moment(value);
+  return time.fromNow();
+}

packages/grafana-ui/src/utils/valueFormats/symbolFormatters.test.ts

+import { currency } from './symbolFormatters';
+
+describe('Currency', () => {
+  it('should format as usd', () => {
+    expect(currency('$')(1532.82, 1, -1)).toEqual('$1.53K');
+  });
+});

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

+import { scaledUnits } from './valueFormats';
+
+export function currency(symbol: string) {
+  const units = ['', 'K', 'M', 'B', 'T'];
+  const scaler = scaledUnits(1000, units);
+  return (size: number, decimals: number, scaledDecimals: number) => {
+    if (size === null) {
+      return '';
+    }
+    const scaled = scaler(size, decimals, scaledDecimals);
+    return symbol + scaled;
+  };
+}
+
+export function binarySIPrefix(unit: string, offset = 0) {
+  const prefixes = ['', 'Ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei', 'Zi', 'Yi'].slice(offset);
+  const units = prefixes.map(p => {
+    return ' ' + p + unit;
+  });
+  return scaledUnits(1024, units);
+}
+
+export function decimalSIPrefix(unit: string, offset = 0) {
+  let prefixes = ['n', 'µ', 'm', '', 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
+  prefixes = prefixes.slice(3 + (offset || 0));
+  const units = prefixes.map(p => {
+    return ' ' + p + unit;
+  });
+  return scaledUnits(1000, units);
+}

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

+import { getCategories } from './categories';
+
+type ValueFormatter = (value: number, decimals?: number, scaledDecimals?: number, isUtc?: boolean) => string;
+
+interface ValueFormat {
+  name: string;
+  id: string;
+  fn: ValueFormatter;
+}
+
+export interface ValueFormatCategory {
+  name: string;
+  formats: ValueFormat[];
+}
+
+interface ValueFormatterIndex {
+  [id: string]: ValueFormatter;
+}
+
+// Globals & formats cache
+let categories: ValueFormatCategory[] = [];
+const index: ValueFormatterIndex = {};
+let hasBuiltIndex = false;
+
+export function toFixed(value: number, decimals?: number): string {
+  if (value === null) {
+    return '';
+  }
+
+  const factor = decimals ? Math.pow(10, Math.max(0, decimals)) : 1;
+  const formatted = String(Math.round(value * factor) / factor);
+
+  // if exponent return directly
+  if (formatted.indexOf('e') !== -1 || value === 0) {
+    return formatted;
+  }
+
+  // If tickDecimals was specified, ensure that we have exactly that
+  // much precision; otherwise default to the value's own precision.
+  if (decimals != null) {
+    const decimalPos = formatted.indexOf('.');
+    const precision = decimalPos === -1 ? 0 : formatted.length - decimalPos - 1;
+    if (precision < decimals) {
+      return (precision ? formatted : formatted + '.') + String(factor).substr(1, decimals - precision);
+    }
+  }
+
+  return formatted;
+}
+
+export function toFixedScaled(
+  value: number,
+  decimals: number,
+  scaledDecimals: number,
+  additionalDecimals: number,
+  ext: string
+) {
+  if (scaledDecimals === null) {
+    return toFixed(value, decimals) + ext;
+  } else {
+    return toFixed(value, scaledDecimals + additionalDecimals) + ext;
+  }
+}
+
+export function toFixedUnit(unit: string) {
+  return (size: number, decimals: number) => {
+    if (size === null) {
+      return '';
+    }
+    return toFixed(size, decimals) + ' ' + unit;
+  };
+}
+
+// Formatter which scales the unit string geometrically according to the given
+// numeric factor. Repeatedly scales the value down by the factor until it is
+// less than the factor in magnitude, or the end of the array is reached.
+export function scaledUnits(factor: number, extArray: string[]) {
+  return (size: number, decimals: number, scaledDecimals: number) => {
+    if (size === null) {
+      return '';
+    }
+
+    let steps = 0;
+    const limit = extArray.length;
+
+    while (Math.abs(size) >= factor) {
+      steps++;
+      size /= factor;
+
+      if (steps >= limit) {
+        return 'NA';
+      }
+    }
+
+    if (steps > 0 && scaledDecimals !== null) {
+      decimals = scaledDecimals + 3 * steps;
+    }
+
+    return toFixed(size, decimals) + extArray[steps];
+  };
+}
+
+export function locale(value: number, decimals: number) {
+  if (value == null) {
+    return '';
+  }
+  return value.toLocaleString(undefined, { maximumFractionDigits: decimals });
+}
+
+export function simpleCountUnit(symbol: string) {
+  const units = ['', 'K', 'M', 'B', 'T'];
+  const scaler = scaledUnits(1000, units);
+  return (size: number, decimals: number, scaledDecimals: number) => {
+    if (size === null) {
+      return '';
+    }
+    const scaled = scaler(size, decimals, scaledDecimals);
+    return scaled + ' ' + symbol;
+  };
+}
+
+function buildFormats() {
+  categories = getCategories();
+
+  for (const cat of categories) {
+    for (const format of cat.formats) {
+      index[format.id] = format.fn;
+    }
+  }
+
+  hasBuiltIndex = true;
+}
+
+export function getValueFormat(id: string): ValueFormatter {
+  if (!hasBuiltIndex) {
+    buildFormats();
+  }
+
+  return index[id];
+}
+
+export function getValueFormatterIndex(): ValueFormatterIndex {
+  if (!hasBuiltIndex) {
+    buildFormats();
+  }
+
+  return index;
+}
+
+export function getValueFormats() {
+  if (!hasBuiltIndex) {
+    buildFormats();
+  }
+
+  return categories.map(cat => {
+    return {
+      text: cat.name,
+      submenu: cat.formats.map(format => {
+        return {
+          text: format.name,
+          value: format.id,
+        };
+      }),
+    };
+  });
+}

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

-export { Graph } from './Graph/Graph';

pkg/api/alerting.go

@@ -212,6 +212,10 @@ func GetAlertNotificationByID(c *m.ReqContext) Response {
 		return Error(500, "Failed to get alert notifications", err)
 	}
 
+	if query.Result == nil {
+		return Error(404, "Alert notification not found", nil)
+	}
+
 	return JSON(200, dtos.NewAlertNotification(query.Result))
 }
 

pkg/api/alerting_test.go

@@ -119,6 +119,12 @@ func TestAlertingApiEndpoint(t *testing.T) {
 			So(getAlertsQuery.Limit, ShouldEqual, 5)
 			So(getAlertsQuery.Query, ShouldEqual, "alertQuery")
 		})
+
+		loggedInUserScenarioWithRole("When calling GET on", "GET", "/api/alert-notifications/1", "/alert-notifications/:notificationId", m.ROLE_ADMIN, func(sc *scenarioContext) {
+			sc.handlerFunc = GetAlertNotificationByID
+			sc.fakeReqWithParams("GET", sc.url, map[string]string{}).exec()
+			So(sc.resp.Code, ShouldEqual, 404)
+		})
 	})
 }
 

pkg/services/notifications/webhook.go

@@ -3,6 +3,7 @@ package notifications
 import (
 	"bytes"
 	"context"
+	"crypto/tls"
 	"fmt"
 	"io"
 	"io/ioutil"
@@ -26,6 +27,9 @@ type Webhook struct {
 }
 
 var netTransport = &http.Transport{
+	TLSClientConfig: &tls.Config{
+		Renegotiation: tls.RenegotiateFreelyAsClient,
+	},
 	Proxy: http.ProxyFromEnvironment,
 	Dial: (&net.Dialer{
 		Timeout:   30 * time.Second,

public/app/core/components/Select/UnitPicker.tsx

 import React, { PureComponent } from 'react';
+import { getValueFormats } from '@grafana/ui';
 import { Select } from '@grafana/ui';
-import kbn from 'app/core/utils/kbn';
 
 interface Props {
   onChange: (item: any) => void;
@@ -16,7 +16,7 @@ export default class UnitPicker extends PureComponent<Props> {
   render() {
     const { defaultValue, onChange, width } = this.props;
 
-    const unitGroups = kbn.getUnitFormats();
+    const unitGroups = getValueFormats();
 
     // Need to transform the data structure to work well with Select
     const groupOptions = unitGroups.map(group => {

public/app/features/alerting/AlertTab.tsx

@@ -6,7 +6,7 @@ import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoa
 import appEvents from 'app/core/app_events';
 
 // Components
-import { EditorTabBody, EditorToolbarView } from '../dashboard/dashgrid/EditorTabBody';
+import { EditorTabBody, EditorToolbarView } from '../dashboard/panel_editor/EditorTabBody';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import StateHistory from './StateHistory';
 import 'app/features/alerting/AlertTabCtrl';

public/app/features/alerting/partials/alert_tab.html

@@ -2,8 +2,8 @@
   <div class="alert alert-error m-b-2" ng-show="ctrl.error">
     <i class="fa fa-warning"></i> {{ctrl.error}}
   </div>
-  <div class="panel-option-section">
-    <div class="panel-option-section__body">
+  <div class="panel-options-group">
+    <div class="panel-options-group__body">
       <div class="gf-form-group">
         <h4 class="section-heading">Rule</h4>
         <div class="gf-form-inline">
@@ -125,9 +125,9 @@
     </div>
   </div>
 
-  <div class="panel-option-section">
-    <div class="panel-option-section__header">Notifications</div>
-    <div class="panel-option-section__body">
+  <div class="panel-options-group">
+    <div class="panel-options-group__header">Notifications</div>
+    <div class="panel-options-group__body">
       <div class="gf-form-inline">
         <div class="gf-form">
           <span class="gf-form-label width-8">Send to</span>

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

@@ -9,7 +9,7 @@ import { AddPanelPanel } from './AddPanelPanel';
 import { getPanelPluginNotFound } from './PanelPluginNotFound';
 import { DashboardRow } from './DashboardRow';
 import { PanelChrome } from './PanelChrome';
-import { PanelEditor } from './PanelEditor';
+import { PanelEditor } from '../panel_editor/PanelEditor';
 
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';

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

-import React, { KeyboardEvent, Component } from 'react';
-
-interface State {
-  selected: number;
-}
-
-export interface KeyboardNavigationProps {
-  onKeyDown: (evt: KeyboardEvent<EventTarget>, maxSelectedIndex: number, onEnterAction: () => void) => void;
-  onMouseEnter: (select: number) => void;
-  selected: number;
-}
-
-interface Props {
-  render: (injectProps: any) => void;
-}
-
-class KeyboardNavigation extends Component<Props, State> {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      selected: 0,
-    };
-  }
-
-  goToNext = (maxSelectedIndex: number) => {
-    const nextIndex = this.state.selected >= maxSelectedIndex ? 0 : this.state.selected + 1;
-    this.setState({
-      selected: nextIndex,
-    });
-  };
-
-  goToPrev = (maxSelectedIndex: number) => {
-    const nextIndex = this.state.selected <= 0 ? maxSelectedIndex : this.state.selected - 1;
-    this.setState({
-      selected: nextIndex,
-    });
-  };
-
-  onKeyDown = (evt: KeyboardEvent, maxSelectedIndex: number, onEnterAction: any) => {
-    if (evt.key === 'ArrowDown') {
-      evt.preventDefault();
-      this.goToNext(maxSelectedIndex);
-    }
-    if (evt.key === 'ArrowUp') {
-      evt.preventDefault();
-      this.goToPrev(maxSelectedIndex);
-    }
-    if (evt.key === 'Enter' && onEnterAction) {
-      onEnterAction();
-    }
-  };
-
-  onMouseEnter = (mouseEnterIndex: number) => {
-    this.setState({
-      selected: mouseEnterIndex,
-    });
-  };
-
-  render() {
-    const injectProps = {
-      onKeyDown: this.onKeyDown,
-      onMouseEnter: this.onMouseEnter,
-      selected: this.state.selected,
-    };
-
-    return <>{this.props.render({ ...injectProps })}</>;
-  }
-}
-
-export default KeyboardNavigation;

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

@@ -19,6 +19,8 @@ import { DashboardModel } from '../dashboard_model';
 import { PanelPlugin } from 'app/types';
 import { TimeRange } from '@grafana/ui';
 
+import variables from 'sass/_variables.scss';
+
 export interface Props {
   panel: PanelModel;
   dashboard: DashboardModel;
@@ -122,8 +124,8 @@ export class PanelChrome extends PureComponent<Props, State> {
                         timeSeries={timeSeries}
                         timeRange={timeRange}
                         options={panel.getOptions(plugin.exports.PanelDefaults)}
-                        width={width}
-                        height={height - PANEL_HEADER_HEIGHT}
+                        width={width - 2 * variables.panelHorizontalPadding }
+                        height={height - PANEL_HEADER_HEIGHT - variables.panelVerticalPadding}
                         renderCounter={renderCounter}
                       />
                     </div>

public/app/features/dashboard/dashgrid/PanelLoader.ts

-import angular from 'angular';
-import coreModule from 'app/core/core_module';
-
-export interface AttachedPanel {
-  destroy();
-}
-
-export class PanelLoader {
-  /** @ngInject */
-  constructor(private $compile, private $rootScope) {}
-
-  load(elem, panel, dashboard): AttachedPanel {
-    const template = '<plugin-component type="panel" class="panel-height-helper"></plugin-component>';
-    const panelScope = this.$rootScope.$new();
-    panelScope.panel = panel;
-    panelScope.dashboard = dashboard;
-
-    const compiledElem = this.$compile(template)(panelScope);
-    const rootNode = angular.element(elem);
-    rootNode.append(compiledElem);
-
-    return {
-      destroy: () => {
-        panelScope.$destroy();
-        compiledElem.remove();
-      },
-    };
-  }
-}
-
-coreModule.service('panelLoader', PanelLoader);

public/app/features/dashboard/dashgrid/EditorTabBody.tsx → public/app/features/dashboard/panel_editor/EditorTabBody.tsx

@@ -2,9 +2,8 @@
 import React, { PureComponent } from 'react';
 
 // Components
-import { CustomScrollbar } from '@grafana/ui';
+import { CustomScrollbar, PanelOptionsGroup } from '@grafana/ui';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
-import { PanelOptionSection } from './PanelOptionSection';
 
 interface Props {
   children: JSX.Element;
@@ -97,9 +96,9 @@ export class EditorTabBody extends PureComponent<Props, State> {
 
   renderOpenView(view: EditorToolbarView) {
     return (
-      <PanelOptionSection title={view.title || view.heading} onClose={this.onCloseOpenView}>
+      <PanelOptionsGroup title={view.title || view.heading} onClose={this.onCloseOpenView}>
         {view.render()}
-      </PanelOptionSection>
+      </PanelOptionsGroup>
     );
   }
 

public/app/features/dashboard/dashgrid/QueriesTab.tsx → public/app/features/dashboard/panel_editor/QueriesTab.tsx

@@ -9,7 +9,7 @@ import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { QueryInspector } from './QueryInspector';
 import { QueryOptions } from './QueryOptions';
 import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab';
-import { PanelOptionSection } from './PanelOptionSection';
+import { PanelOptionsGroup } from '@grafana/ui';
 
 // Services
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
@@ -216,7 +216,7 @@ export class QueriesTab extends PureComponent<Props, State> {
     return (
       <EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}>
         <>
-          <PanelOptionSection>
+          <PanelOptionsGroup>
             <div className="query-editor-rows">
               <div ref={element => (this.element = element)} />
 
@@ -239,10 +239,10 @@ export class QueriesTab extends PureComponent<Props, State> {
                 </div>
               </div>
             </div>
-          </PanelOptionSection>
-          <PanelOptionSection>
+          </PanelOptionsGroup>
+          <PanelOptionsGroup>
             <QueryOptions panel={panel} datasource={currentDS} />
-          </PanelOptionSection>
+          </PanelOptionsGroup>
         </>
       </EditorTabBody>
     );

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

@@ -9,7 +9,6 @@ import { EditorTabBody, EditorToolbarView } from './EditorTabBody';
 import { VizTypePicker } from './VizTypePicker';
 import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
-import { PanelOptionSection } from './PanelOptionSection';
 
 // Types
 import { PanelModel } from '../panel_model';
@@ -62,13 +61,13 @@ export class VisualizationTab extends PureComponent<Props, State> {
     }
 
     return (
-      <PanelOptionSection>
+      <>
         {PanelOptions ? (
           <PanelOptions options={this.getPanelDefaultOptions()} onChange={this.onPanelOptionsChanged} />
         ) : (
           <p>Visualization has no options</p>
         )}
-      </PanelOptionSection>
+      </>
     );
   }
 
@@ -112,9 +111,9 @@ export class VisualizationTab extends PureComponent<Props, State> {
     for (let i = 0; i < panelCtrl.editorTabs.length; i++) {
       template +=
         `
-      <div class="panel-option-section" ng-cloak>` +
-        (i > 0 ? `<div class="panel-option-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
-        `<div class="panel-option-section__body">
+      <div class="panel-options-group" ng-cloak>` +
+        (i > 0 ? `<div class="panel-options-group__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
+        `<div class="panel-options-group__body">
           <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
         </div>
       </div>

public/app/features/dashboard/utils/panel.test.ts

+import moment from 'moment';
+import { TimeRange } from '@grafana/ui';
+import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel';
+import { advanceTo, clear } from 'jest-date-mock';
+
+const dashboardTimeRange: TimeRange = {
+  from: moment([2019, 1, 11, 12, 0]),
+  to: moment([2019, 1, 11, 18, 0]),
+  raw: {
+    from: 'now-6h',
+    to: 'now',
+  },
+};
+
+describe('applyPanelTimeOverrides', () => {
+  const fakeCurrentDate = moment([2019, 1, 11, 14, 0, 0]).toDate();
+
+  beforeAll(() => {
+    advanceTo(fakeCurrentDate);
+  });
+
+  afterAll(() => {
+    clear();
+  });
+
+  it('should apply relative time override', () => {
+    const panelModel = {
+      timeFrom: '2h',
+    };
+
+    // @ts-ignore: PanelModel type incositency
+    const overrides = applyPanelTimeOverrides(panelModel, dashboardTimeRange);
+
+    expect(overrides.timeRange.from.toISOString()).toBe(moment([2019, 1, 11, 12]).toISOString());
+    expect(overrides.timeRange.to.toISOString()).toBe(fakeCurrentDate.toISOString());
+    expect(overrides.timeRange.raw.from).toBe('now-2h');
+    expect(overrides.timeRange.raw.to).toBe('now');
+  });
+
+  it('should apply time shift', () => {
+    const panelModel = {
+      timeShift: '2h'
+    };
+
+    const expectedFromDate = moment([2019, 1, 11, 10, 0, 0]).toDate();
+    const expectedToDate = moment([2019, 1, 11, 16, 0, 0]).toDate();
+
+    // @ts-ignore: PanelModel type incositency
+    const overrides = applyPanelTimeOverrides(panelModel, dashboardTimeRange);
+
+    expect(overrides.timeRange.from.toISOString()).toBe(expectedFromDate.toISOString());
+    expect(overrides.timeRange.to.toISOString()).toBe(expectedToDate.toISOString());
+    expect((overrides.timeRange.raw.from as moment.Moment).toISOString()).toEqual(expectedFromDate.toISOString());
+    expect((overrides.timeRange.raw.to as moment.Moment).toISOString()).toEqual(expectedToDate.toISOString());
+  });
+
+  it('should apply both relative time and time shift', () => {
+    const panelModel = {
+      timeFrom: '2h',
+      timeShift: '2h'
+    };
+
+    const expectedFromDate = moment([2019, 1, 11, 10, 0, 0]).toDate();
+    const expectedToDate = moment([2019, 1, 11, 12, 0, 0]).toDate();
+
+    // @ts-ignore: PanelModel type incositency
+    const overrides = applyPanelTimeOverrides(panelModel, dashboardTimeRange);
+
+    expect(overrides.timeRange.from.toISOString()).toBe(expectedFromDate.toISOString());
+    expect(overrides.timeRange.to.toISOString()).toBe(expectedToDate.toISOString());
+    expect((overrides.timeRange.raw.from as moment.Moment).toISOString()).toEqual(expectedFromDate.toISOString());
+    expect((overrides.timeRange.raw.to as moment.Moment).toISOString()).toEqual(expectedToDate.toISOString());
+  });
+});

public/app/features/dashboard/utils/panel.ts

@@ -142,10 +142,16 @@ export function applyPanelTimeOverrides(panel: PanelModel, timeRange: TimeRange)
 
     const timeShift = '-' + timeShiftInterpolated;
     newTimeData.timeInfo += ' timeshift ' + timeShift;
+    const from = dateMath.parseDateMath(timeShift, newTimeData.timeRange.from, false);
+    const to = dateMath.parseDateMath(timeShift, newTimeData.timeRange.to, true);
+
     newTimeData.timeRange = {
-      from: dateMath.parseDateMath(timeShift, newTimeData.timeRange.from, false),
-      to: dateMath.parseDateMath(timeShift, newTimeData.timeRange.to, true),
-      raw: newTimeData.timeRange.raw,
+      from,
+      to,
+      raw: {
+        from,
+        to,
+      },
     };
   }
 

public/app/features/panel/partials/general_tab.html

-<div class="panel-option-section">
+<div class="panel-options-group">
   <!-- <div class="panel&#45;option&#45;section__header">Information</div> -->
-  <div class="panel-option-section__body">
+  <div class="panel-options-group__body">
     <div class="section">
       <div class="gf-form">
         <span class="gf-form-label width-7">Title</span>
@@ -17,9 +17,9 @@
   </div>
 </div>
 
-<div class="panel-option-section">
-  <div class="panel-option-section__header">Repeating</div>
-  <div class="panel-option-section__body">
+<div class="panel-options-group">
+  <div class="panel-options-group__header">Repeating</div>
+  <div class="panel-options-group__body">
     <div class="section">
       <div class="gf-form">
         <span class="gf-form-label width-9">Repeat</span>
@@ -46,9 +46,9 @@
   </div>
 </div>
 
-<div class="panel-option-section">
-  <div class="panel-option-section__header">Drilldown Links</div>
-  <div class="panel-option-section__body">
+<div class="panel-options-group">
+  <div class="panel-options-group__header">Drilldown Links</div>
+  <div class="panel-options-group__body">
     <panel-links-editor panel="ctrl.panel"></panel-links-editor>
   </div>
 </div>

public/app/features/plugins/all.ts

 import './plugin_edit_ctrl';
 import './plugin_page_ctrl';
 import './import_list/import_list';
-import './ds_edit_ctrl';
 import './datasource_srv';
 import './plugin_component';
-import './VariableQueryComponentLoader';
+import './variableQueryEditorLoader';

public/app/features/plugins/ds_dashboards_ctrl.ts

-import { coreModule } from 'app/core/core';
-import { store } from 'app/store/store';
-import { getNavModel } from 'app/core/selectors/navModel';
-import { buildNavModel } from './state/navModel';
-
-export class DataSourceDashboardsCtrl {
-  datasourceMeta: any;
-  navModel: any;
-  current: any;
-
-  /** @ngInject */
-  constructor(private backendSrv, private $routeParams) {
-    const state = store.getState();
-    this.navModel = getNavModel(state.navIndex, 'datasources');
-
-    if (this.$routeParams.id) {
-      this.getDatasourceById(this.$routeParams.id);
-    }
-  }
-
-  getDatasourceById(id) {
-    this.backendSrv
-      .get('/api/datasources/' + id)
-      .then(ds => {
-        this.current = ds;
-      })
-      .then(this.getPluginInfo.bind(this));
-  }
-
-  updateNav() {
-    this.navModel = buildNavModel(this.current, this.datasourceMeta, 'datasource-dashboards');
-  }
-
-  getPluginInfo() {
-    return this.backendSrv.get('/api/plugins/' + this.current.type + '/settings').then(pluginInfo => {
-      this.datasourceMeta = pluginInfo;
-      this.updateNav();
-    });
-  }
-}
-
-coreModule.controller('DataSourceDashboardsCtrl', DataSourceDashboardsCtrl);

public/app/features/plugins/ds_edit_ctrl.ts

-import _ from 'lodash';
-import config from 'app/core/config';
-import { coreModule, appEvents } from 'app/core/core';
-import { store } from 'app/store/store';
-import { getNavModel } from 'app/core/selectors/navModel';
-import { buildNavModel } from './state/navModel';
-
-let datasourceTypes = [];
-
-const defaults = {
-  name: '',
-  type: 'graphite',
-  url: '',
-  access: 'proxy',
-  jsonData: {},
-  secureJsonFields: {},
-  secureJsonData: {},
-};
-
-let datasourceCreated = false;
-
-export class DataSourceEditCtrl {
-  isNew: boolean;
-  datasources: any[];
-  current: any;
-  types: any;
-  testing: any;
-  datasourceMeta: any;
-  editForm: any;
-  gettingStarted: boolean;
-  navModel: any;
-
-  /** @ngInject */
-  constructor(private $q, private backendSrv, private $routeParams, private $location, private datasourceSrv) {
-    const state = store.getState();
-    this.navModel = getNavModel(state.navIndex, 'datasources');
-    this.datasources = [];
-
-    this.loadDatasourceTypes().then(() => {
-      if (this.$routeParams.id) {
-        this.getDatasourceById(this.$routeParams.id);
-      } else {
-        this.initNewDatasourceModel();
-      }
-    });
-  }
-
-  initNewDatasourceModel() {
-    this.isNew = true;
-    this.current = _.cloneDeep(defaults);
-
-    // We are coming from getting started
-    if (this.$location.search().gettingstarted) {
-      this.gettingStarted = true;
-      this.current.isDefault = true;
-    }
-
-    this.typeChanged();
-  }
-
-  loadDatasourceTypes() {
-    if (datasourceTypes.length > 0) {
-      this.types = datasourceTypes;
-      return this.$q.when(null);
-    }
-
-    return this.backendSrv.get('/api/plugins', { enabled: 1, type: 'datasource' }).then(plugins => {
-      datasourceTypes = plugins;
-      this.types = plugins;
-    });
-  }
-
-  getDatasourceById(id) {
-    this.backendSrv.get('/api/datasources/' + id).then(ds => {
-      this.isNew = false;
-      this.current = ds;
-
-      if (datasourceCreated) {
-        datasourceCreated = false;
-        this.testDatasource();
-      }
-
-      return this.typeChanged();
-    });
-  }
-
-  userChangedType() {
-    // reset model but keep name & default flag
-    this.current = _.defaults(
-      {
-        id: this.current.id,
-        name: this.current.name,
-        isDefault: this.current.isDefault,
-        type: this.current.type,
-      },
-      _.cloneDeep(defaults)
-    );
-    this.typeChanged();
-  }
-
-  updateNav() {
-    this.navModel = buildNavModel(this.current, this.datasourceMeta, 'datasource-settings');
-  }
-
-  typeChanged() {
-    return this.backendSrv.get('/api/plugins/' + this.current.type + '/settings').then(pluginInfo => {
-      this.datasourceMeta = pluginInfo;
-      this.updateNav();
-    });
-  }
-
-  updateFrontendSettings() {
-    return this.backendSrv.get('/api/frontend/settings').then(settings => {
-      config.datasources = settings.datasources;
-      config.defaultDatasource = settings.defaultDatasource;
-      this.datasourceSrv.init();
-    });
-  }
-
-  testDatasource() {
-    return this.datasourceSrv.get(this.current.name).then(datasource => {
-      if (!datasource.testDatasource) {
-        return;
-      }
-
-      this.testing = { done: false, status: 'error' };
-
-      // make test call in no backend cache context
-      return this.backendSrv
-        .withNoBackendCache(() => {
-          return datasource
-            .testDatasource()
-            .then(result => {
-              this.testing.message = result.message;
-              this.testing.status = result.status;
-            })
-            .catch(err => {
-              if (err.statusText) {
-                this.testing.message = 'HTTP Error ' + err.statusText;
-              } else {
-                this.testing.message = err.message;
-              }
-            });
-        })
-        .finally(() => {
-          this.testing.done = true;
-        });
-    });
-  }
-
-  saveChanges() {
-    if (!this.editForm.$valid) {
-      return;
-    }
-
-    if (this.current.readOnly) {
-      return;
-    }
-
-    if (this.current.id) {
-      return this.backendSrv.put('/api/datasources/' + this.current.id, this.current).then(result => {
-        this.current = result.datasource;
-        this.updateNav();
-        return this.updateFrontendSettings().then(() => {
-          return this.testDatasource();
-        });
-      });
-    } else {
-      return this.backendSrv.post('/api/datasources', this.current).then(result => {
-        this.current = result.datasource;
-        this.updateFrontendSettings();
-
-        datasourceCreated = true;
-        this.$location.path('datasources/edit/' + result.id);
-      });
-    }
-  }
-
-  confirmDelete() {
-    this.backendSrv.delete('/api/datasources/' + this.current.id).then(() => {
-      this.$location.path('datasources');
-    });
-  }
-
-  delete(s) {
-    appEvents.emit('confirm-modal', {
-      title: 'Delete',
-      text: 'Are you sure you want to delete this datasource?',
-      yesText: 'Delete',
-      icon: 'fa-trash',
-      onConfirm: () => {
-        this.confirmDelete();
-      },
-    });
-  }
-}
-
-coreModule.controller('DataSourceEditCtrl', DataSourceEditCtrl);
-
-coreModule.directive('datasourceHttpSettings', () => {
-  return {
-    scope: {
-      current: '=',
-      suggestUrl: '@',
-      noDirectAccess: '@',
-    },
-    templateUrl: 'public/app/features/plugins/partials/ds_http_settings.html',
-    link: {
-      pre: ($scope, elem, attrs) => {
-        // do not show access option if direct access is disabled
-        $scope.showAccessOption = $scope.noDirectAccess !== 'true';
-        $scope.showAccessHelp = false;
-        $scope.toggleAccessHelp = () => {
-          $scope.showAccessHelp = !$scope.showAccessHelp;
-        };
-
-        $scope.getSuggestUrls = () => {
-          return [$scope.suggestUrl];
-        };
-      },
-    },
-  };
-});

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

 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps } from '@grafana/ui';
+import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup } from '@grafana/ui';
 
 import { Switch } from 'app/core/components/Switch/Switch';
 import { Label } from '../../../core/components/Label/Label';
@@ -20,8 +20,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
     const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = options;
 
     return (
-      <div className="section gf-form-group">
-        <h5 className="section-heading">Gauge</h5>
+      <PanelOptionsGroup title="Gauge">
         <div className="gf-form">
           <Label width={8}>Min value</Label>
           <input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} value={minValue} />
@@ -42,7 +41,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
           checked={showThresholdMarkers}
           onChange={this.onToggleThresholdMarkers}
         />
-      </div>
+      </PanelOptionsGroup>
     );
   }
 }

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

@@ -15,6 +15,13 @@ export class GaugePanel extends PureComponent<Props> {
       nullValueMode: NullValueMode.Ignore,
     });
 
-    return <Gauge timeSeries={vmSeries} {...this.props.options} width={width} height={height} />;
+    return (
+      <Gauge
+        timeSeries={vmSeries}
+        {...this.props.options}
+        width={width}
+        height={height}
+      />
+    );
   }
 }

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

 import React, { PureComponent } from 'react';
-import { BasicGaugeColor, GaugeOptions, PanelOptionsProps, ThresholdsEditor, Threshold } from '@grafana/ui';
+import {
+  BasicGaugeColor,
+  GaugeOptions,
+  PanelOptionsProps,
+  ThresholdsEditor,
+  Threshold,
+  PanelOptionsGrid,
+} from '@grafana/ui';
 
 import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
 import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
@@ -31,15 +38,13 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G
     const { onChange, options } = this.props;
     return (
       <>
-        <div className="form-section">
+        <PanelOptionsGrid>
           <ValueOptions onChange={onChange} options={options} />
           <GaugeOptionsEditor onChange={onChange} options={options} />
           <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
-        </div>
+        </PanelOptionsGrid>
 
-        <div className="form-section">
         <ValueMappings onChange={onChange} options={options} />
-        </div>
       </>
     );
   }

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

 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps, MappingType, RangeMap, ValueMap } from '@grafana/ui';
+import { GaugeOptions, PanelOptionsProps, MappingType, RangeMap, ValueMap, PanelOptionsGroup } from '@grafana/ui';
 
 import MappingRow from './MappingRow';
 
@@ -75,8 +75,7 @@ export default class ValueMappings extends PureComponent<PanelOptionsProps<Gauge
     const { mappings } = this.state;
 
     return (
-      <div className="section gf-form-group">
-        <h5 className="section-heading">Value mappings</h5>
+      <PanelOptionsGroup title="Value Mappings">
         <div>
           {mappings.length > 0 &&
             mappings.map((mapping, index) => (
@@ -94,7 +93,7 @@ export default class ValueMappings extends PureComponent<PanelOptionsProps<Gauge
           </div>
           <div className="add-mapping-row-label">Add mapping</div>
         </div>
-      </div>
+      </PanelOptionsGroup>
     );
   }
 }

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

 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps } from '@grafana/ui';
+import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup } from '@grafana/ui';
 
 import { Label } from 'app/core/components/Label/Label';
 import { Select} from '@grafana/ui';
@@ -40,8 +40,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
     const { stat, unit, decimals, prefix, suffix } = this.props.options;
 
     return (
-      <div className="section gf-form-group">
-        <h5 className="section-heading">Value</h5>
+      <PanelOptionsGroup title="Value">
         <div className="gf-form">
           <Label width={labelWidth}>Stat</Label>
           <Select
@@ -73,7 +72,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
           <Label width={labelWidth}>Suffix</Label>
           <input className="gf-form-input width-12" type="text" value={suffix || ''} onChange={this.onSuffixChange} />
         </div>
-      </div>
+      </PanelOptionsGroup>
     );
   }
 }

public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Render should render component 1`] = `
-<div
-  className="section gf-form-group"
+<Component
+  title="Value Mappings"
 >
-  <h5
-    className="section-heading"
-  >
-    Value mappings
-  </h5>
   <div>
     <MappingRow
       key="Ok-0"
@@ -57,5 +52,5 @@ exports[`Render should render component 1`] = `
       Add mapping
     </div>
   </div>
-</div>
+</Component>
 `;

public/app/plugins/panel/gauge/types.ts

+
+

public/app/plugins/panel/graph/axes_editor.ts

-import kbn from 'app/core/utils/kbn';
+import { getValueFormats } from '@grafana/ui';
 
 export class AxesEditorCtrl {
   panel: any;
@@ -15,7 +15,7 @@ export class AxesEditorCtrl {
     this.panel = this.panelCtrl.panel;
     this.$scope.ctrl = this;
 
-    this.unitFormats = kbn.getUnitFormats();
+    this.unitFormats = getValueFormats();
 
     this.logScales = {
       linear: 1,

public/app/plugins/panel/graph2/GraphPanel.tsx

@@ -3,8 +3,14 @@ import _ from 'lodash';
 import React, { PureComponent } from 'react';
 import { colors } from '@grafana/ui';
 
-// Components & Types
-import { Graph, PanelProps, NullValueMode, processTimeSeries } from '@grafana/ui';
+// Utils
+import { processTimeSeries } from '@grafana/ui/src/utils';
+
+// Components
+import { Graph } from '@grafana/ui';
+
+// Types
+import { PanelProps, NullValueMode } from '@grafana/ui/src/types';
 import { Options } from './types';
 
 interface Props extends PanelProps<Options> {}

public/app/plugins/panel/singlestat/module.ts

@@ -312,14 +312,20 @@ class SingleStatCtrl extends MetricsPanelCtrl {
         const formatFunc = kbn.valueFormats[this.panel.format];
         data.value = lastPoint[1];
         data.valueRounded = data.value;
-        data.valueFormatted = formatFunc(data.value, this.dashboard.isTimezoneUtc());
+        data.valueFormatted = formatFunc(data.value, 0, 0, this.dashboard.isTimezoneUtc());
       } else {
         data.value = this.series[0].stats[this.panel.valueName];
         data.flotpairs = this.series[0].flotpairs;
 
         const decimalInfo = this.getDecimalsForValue(data.value);
         const formatFunc = kbn.valueFormats[this.panel.format];
-        data.valueFormatted = formatFunc(data.value, decimalInfo.decimals, decimalInfo.scaledDecimals);
+
+        data.valueFormatted = formatFunc(
+          data.value,
+          decimalInfo.decimals,
+          decimalInfo.scaledDecimals,
+          this.dashboard.isTimezoneUtc()
+        );
         data.valueRounded = kbn.roundValue(data.value, decimalInfo.decimals);
       }
 

public/app/plugins/panel/table/column_options.ts

 import _ from 'lodash';
-import kbn from 'app/core/utils/kbn';
+import { getValueFormats } from '@grafana/ui';
 
 export class ColumnOptionsCtrl {
   panel: any;
@@ -22,7 +22,7 @@ export class ColumnOptionsCtrl {
     this.activeStyleIndex = 0;
     this.panelCtrl = $scope.ctrl;
     this.panel = this.panelCtrl.panel;
-    this.unitFormats = kbn.getUnitFormats();
+    this.unitFormats = getValueFormats();
     this.colorModes = [
       { text: 'Disabled', value: null },
       { text: 'Cell', value: 'cell' },

public/sass/_variables.dark.scss

@@ -391,8 +391,8 @@ $panel-editor-tabs-line-color: #e3e3e3;
 $panel-editor-viz-item-bg-hover: darken($blue, 47%);
 $panel-editor-viz-item-bg-hover-active: darken($orange, 45%);
 
-$panel-option-section-border: 1px solid $dark-3;
-$panel-option-section-header-bg: linear-gradient(0deg, $gray-blue, $dark-1);
+$panel-options-group-border: 1px solid $dark-3;
+$panel-options-group-header-bg: linear-gradient(0deg, $gray-blue, $dark-1);
 
 $panel-grid-placeholder-bg: darken($blue, 47%);
 $panel-grid-placeholder-shadow: 0 0 4px $blue;

public/sass/_variables.light.scss

@@ -399,8 +399,8 @@ $panel-editor-tabs-line-color: $dark-5;
 $panel-editor-viz-item-bg-hover: lighten($blue, 62%);
 $panel-editor-viz-item-bg-hover-active: lighten($orange, 34%);
 
-$panel-option-section-border: 1px solid $gray-6;
-$panel-option-section-header-bg: linear-gradient(0deg, $gray-6, $gray-7);
+$panel-options-group-border: 1px solid $gray-6;
+$panel-options-group-header-bg: linear-gradient(0deg, $gray-6, $gray-7);
 
 $panel-grid-placeholder-bg: lighten($blue, 62%);
 $panel-grid-placeholder-shadow: 0 0 4px $blue-light;

public/sass/_variables.scss

@@ -189,7 +189,9 @@ $side-menu-width: 60px;
 // dashboard
 $panel-margin: 10px;
 $dashboard-padding: $panel-margin * 2;
-$panel-padding: 0px 10px 5px 10px;
+$panel-horizontal-padding: 10;
+$panel-vertical-padding: 5;
+$panel-padding: 0px $panel-horizontal-padding+0px $panel-vertical-padding+0px $panel-horizontal-padding+0px;
 
 // tabs
 $tabs-padding: 10px 15px 9px;
@@ -202,3 +204,8 @@ $external-services: (
     oauth: (bgColor: #262628, borderColor: #393939, icon: '')
   )
   !default;
+
+:export {
+  panelHorizontalPadding: $panel-horizontal-padding;
+  panelVerticalPadding: $panel-vertical-padding;
+}

public/sass/_variables.scss.d.ts

+export interface GrafanaVariables {
+  'panelHorizontalPadding': number;
+  'panelVerticalPadding': number;
+}
+
+declare const variables: GrafanaVariables;
+
+export default variables;

public/sass/components/_panel_editor.scss

@@ -230,30 +230,3 @@
   min-width: 200px;
 }
 
-.panel-option-section {
-  margin-bottom: 10px;
-  border: $panel-option-section-border;
-  border-radius: $border-radius;
-}
-
-.panel-option-section__header {
-  padding: 4px 20px;
-  font-size: 1.1rem;
-  background: $panel-option-section-header-bg;
-  position: relative;
-
-  .btn {
-    position: absolute;
-    right: 0;
-    top: 0px;
-  }
-}
-
-.panel-option-section__body {
-  padding: 20px;
-  background: $page-bg;
-
-  &--queries {
-    min-height: 200px;
-  }
-}

scripts/build/prepare-enterprise.sh

 #!/bin/bash
 
 cd ..
-git clone -b master --single-branch git@github.com:grafana/grafana-enterprise.git --depth 1
+
+
+if [ -z "$CIRCLE_TAG" ]; then
+  _target="master"
+else
+  _target="$CIRCLE_TAG"
+fi
+
+git clone -b "$_target" --single-branch git@github.com:grafana/grafana-enterprise.git --depth 1
+
 cd grafana-enterprise
 ./build.sh

tsconfig.json

@@ -28,7 +28,8 @@
     "pretty": true,
     "typeRoots": ["node_modules/@types", "types"],
     "paths": {
-      "app": ["app"]
+      "app": ["app"],
+      "sass": ["sass"]
     }
   },
   "include": ["public/app/**/*.ts", "public/app/**/*.tsx", "public/test/**/*.ts"]

yarn.lock

@@ -7060,6 +7060,11 @@ jest-config@^23.6.0:
     micromatch "^2.3.11"
     pretty-format "^23.6.0"
 
+jest-date-mock@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/jest-date-mock/-/jest-date-mock-1.0.6.tgz#7ea405d1fa68f86bb727d12e47b9c5e6760066a6"
+  integrity sha512-wnLgDaK3i2md/cQ1wKx/+/78PieO4nkGen8avEmHd4dt1NGGxeuW8/oLAF5qsatQBXdn08pxpqRtUoDvTTLdRg==
+
 jest-diff@^23.6.0:
   version "23.6.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-23.6.0.tgz#1500f3f16e850bb3d71233408089be099f610c7d"