Skip to content

N
nexpie-grafana-theme
Commit a2f6c503 by Daniel Lee
Options

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

parents b6171fa3 574760c7
Showing with 1117 additions and 486 deletions
package.json
...@@ -64,6 +64,7 @@ ...@@ -64,6 +64,7 @@
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"husky": "^0.14.3", "husky": "^0.14.3",
"jest": "^23.6.0", "jest": "^23.6.0",
"jest-date-mock": "^1.0.6",
"lint-staged": "^6.0.0", "lint-staged": "^6.0.0",
"load-grunt-tasks": "3.5.2", "load-grunt-tasks": "3.5.2",
"mini-css-extract-plugin": "^0.4.0", "mini-css-extract-plugin": "^0.4.0",
......
packages/grafana-ui/src/components/PanelOptionsGrid/PanelOptionsGrid.tsx 0 → 100644
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 0 → 100644
.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 { ...@@ -7,11 +7,11 @@ interface Props {
children: JSX.Element | JSX.Element[]; children: JSX.Element | JSX.Element[];
} }
export const PanelOptionSection: SFC<Props> = props => { export const PanelOptionsGroup: SFC<Props> = props => {
return ( return (
<div className="panel-option-section"> <div className="panel-options-group">
{props.title && ( {props.title && (
<div className="panel-option-section__header"> <div className="panel-options-group__header">
{props.title} {props.title}
{props.onClose && ( {props.onClose && (
<button className="btn btn-link" onClick={props.onClose}> <button className="btn btn-link" onClick={props.onClose}>
...@@ -20,7 +20,7 @@ export const PanelOptionSection: SFC<Props> = props => { ...@@ -20,7 +20,7 @@ export const PanelOptionSection: SFC<Props> = props => {
)} )}
</div> </div>
)} )}
<div className="panel-option-section__body">{props.children}</div> <div className="panel-options-group__body">{props.children}</div>
</div> </div>
); );
}; };
packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss 0 → 100644
.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'; ...@@ -3,6 +3,7 @@ import tinycolor, { ColorInput } from 'tinycolor2';
import { Threshold, BasicGaugeColor } from '../../types'; import { Threshold, BasicGaugeColor } from '../../types';
import { ColorPicker } from '../ColorPicker/ColorPicker'; import { ColorPicker } from '../ColorPicker/ColorPicker';
import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
export interface Props { export interface Props {
thresholds: Threshold[]; thresholds: Threshold[];
...@@ -204,8 +205,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> { ...@@ -204,8 +205,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
render() { render() {
return ( return (
<div className="section gf-form-group"> <PanelOptionsGroup title="Thresholds">
<h5 className="section-heading">Thresholds</h5>
<div className="thresholds"> <div className="thresholds">
<div className="color-indicators"> <div className="color-indicators">
{this.renderIndicator()} {this.renderIndicator()}
...@@ -216,7 +216,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> { ...@@ -216,7 +216,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
{this.renderBase()} {this.renderBase()}
</div> </div>
</div> </div>
</div> </PanelOptionsGroup>
); );
} }
} }
packages/grafana-ui/src/components/index.scss
...@@ -3,3 +3,5 @@ ...@@ -3,3 +3,5 @@
@import 'ThresholdsEditor/ThresholdsEditor'; @import 'ThresholdsEditor/ThresholdsEditor';
@import 'Tooltip/Tooltip'; @import 'Tooltip/Tooltip';
@import 'Select/Select'; @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'; ...@@ -14,3 +14,7 @@ export { ColorPicker } from './ColorPicker/ColorPicker';
export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover'; export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover';
export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker'; export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker';
export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor'; 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 deleted 100644 → 0
export { GfFormLabel } from './GfFormLabel/GfFormLabel';
packages/grafana-ui/src/index.ts
export * from './components'; export * from './components';
export * from './visualizations';
export * from './types'; export * from './types';
export * from './utils'; export * from './utils';
export * from './forms';
packages/grafana-ui/src/utils/index.ts
export * from './processTimeSeries'; export * from './processTimeSeries';
export * from './valueFormats/valueFormats';
export * from './colors'; export * from './colors';
packages/grafana-ui/src/utils/valueFormats/arithmeticFormatters.test.ts 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
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 deleted 100644 → 0
export { Graph } from './Graph/Graph';
pkg/api/alerting.go
...@@ -212,6 +212,10 @@ func GetAlertNotificationByID(c *m.ReqContext) Response { ...@@ -212,6 +212,10 @@ func GetAlertNotificationByID(c *m.ReqContext) Response {
return Error(500, "Failed to get alert notifications", err) 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)) return JSON(200, dtos.NewAlertNotification(query.Result))
} }
......
pkg/api/alerting_test.go
...@@ -119,6 +119,12 @@ func TestAlertingApiEndpoint(t *testing.T) { ...@@ -119,6 +119,12 @@ func TestAlertingApiEndpoint(t *testing.T) {
So(getAlertsQuery.Limit, ShouldEqual, 5) So(getAlertsQuery.Limit, ShouldEqual, 5)
So(getAlertsQuery.Query, ShouldEqual, "alertQuery") 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 ...@@ -3,6 +3,7 @@ package notifications
import ( import (
"bytes" "bytes"
"context" "context"
"crypto/tls"
"fmt" "fmt"
"io" "io"
"io/ioutil" "io/ioutil"
...@@ -26,6 +27,9 @@ type Webhook struct { ...@@ -26,6 +27,9 @@ type Webhook struct {
} }
var netTransport = &http.Transport{ var netTransport = &http.Transport{
TLSClientConfig: &tls.Config{
Renegotiation: tls.RenegotiateFreelyAsClient,
},
Proxy: http.ProxyFromEnvironment, Proxy: http.ProxyFromEnvironment,
Dial: (&net.Dialer{ Dial: (&net.Dialer{
Timeout: 30 * time.Second, Timeout: 30 * time.Second,
......
public/app/core/components/Select/UnitPicker.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { getValueFormats } from '@grafana/ui';
import { Select } from '@grafana/ui'; import { Select } from '@grafana/ui';
import kbn from 'app/core/utils/kbn';
interface Props { interface Props {
onChange: (item: any) => void; onChange: (item: any) => void;
...@@ -16,7 +16,7 @@ export default class UnitPicker extends PureComponent<Props> { ...@@ -16,7 +16,7 @@ export default class UnitPicker extends PureComponent<Props> {
render() { render() {
const { defaultValue, onChange, width } = this.props; const { defaultValue, onChange, width } = this.props;
const unitGroups = kbn.getUnitFormats(); const unitGroups = getValueFormats();
// Need to transform the data structure to work well with Select // Need to transform the data structure to work well with Select
const groupOptions = unitGroups.map(group => { const groupOptions = unitGroups.map(group => {
......
public/app/features/alerting/AlertTab.tsx
...@@ -6,7 +6,7 @@ import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoa ...@@ -6,7 +6,7 @@ import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoa
import appEvents from 'app/core/app_events'; import appEvents from 'app/core/app_events';
// Components // 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 EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import StateHistory from './StateHistory'; import StateHistory from './StateHistory';
import 'app/features/alerting/AlertTabCtrl'; import 'app/features/alerting/AlertTabCtrl';
......
public/app/features/alerting/partials/alert_tab.html
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<div class="alert alert-error m-b-2" ng-show="ctrl.error"> <div class="alert alert-error m-b-2" ng-show="ctrl.error">
<i class="fa fa-warning"></i> {{ctrl.error}} <i class="fa fa-warning"></i> {{ctrl.error}}
</div> </div>
<div class="panel-option-section"> <div class="panel-options-group">
<div class="panel-option-section__body"> <div class="panel-options-group__body">
<div class="gf-form-group"> <div class="gf-form-group">
<h4 class="section-heading">Rule</h4> <h4 class="section-heading">Rule</h4>
<div class="gf-form-inline"> <div class="gf-form-inline">
...@@ -125,9 +125,9 @@ ...@@ -125,9 +125,9 @@
</div> </div>
</div> </div>
<div class="panel-option-section"> <div class="panel-options-group">
<div class="panel-option-section__header">Notifications</div> <div class="panel-options-group__header">Notifications</div>
<div class="panel-option-section__body"> <div class="panel-options-group__body">
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-8">Send to</span> <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'; ...@@ -9,7 +9,7 @@ import { AddPanelPanel } from './AddPanelPanel';
import { getPanelPluginNotFound } from './PanelPluginNotFound'; import { getPanelPluginNotFound } from './PanelPluginNotFound';
import { DashboardRow } from './DashboardRow'; import { DashboardRow } from './DashboardRow';
import { PanelChrome } from './PanelChrome'; import { PanelChrome } from './PanelChrome';
import { PanelEditor } from './PanelEditor'; import { PanelEditor } from '../panel_editor/PanelEditor';
import { PanelModel } from '../panel_model'; import { PanelModel } from '../panel_model';
import { DashboardModel } from '../dashboard_model'; import { DashboardModel } from '../dashboard_model';
......
public/app/features/dashboard/dashgrid/KeyboardNavigation.tsx deleted 100644 → 0
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'; ...@@ -19,6 +19,8 @@ import { DashboardModel } from '../dashboard_model';
import { PanelPlugin } from 'app/types'; import { PanelPlugin } from 'app/types';
import { TimeRange } from '@grafana/ui'; import { TimeRange } from '@grafana/ui';
import variables from 'sass/_variables.scss';
export interface Props { export interface Props {
panel: PanelModel; panel: PanelModel;
dashboard: DashboardModel; dashboard: DashboardModel;
...@@ -122,8 +124,8 @@ export class PanelChrome extends PureComponent<Props, State> { ...@@ -122,8 +124,8 @@ export class PanelChrome extends PureComponent<Props, State> {
timeSeries={timeSeries} timeSeries={timeSeries}
timeRange={timeRange} timeRange={timeRange}
options={panel.getOptions(plugin.exports.PanelDefaults)} options={panel.getOptions(plugin.exports.PanelDefaults)}
width={width} width={width - 2 * variables.panelHorizontalPadding }
height={height - PANEL_HEADER_HEIGHT} height={height - PANEL_HEADER_HEIGHT - variables.panelVerticalPadding}
renderCounter={renderCounter} renderCounter={renderCounter}
/> />
</div> </div>
......
public/app/features/dashboard/dashgrid/PanelLoader.ts deleted 100644 → 0
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 @@ ...@@ -2,9 +2,8 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
// Components // Components
import { CustomScrollbar } from '@grafana/ui'; import { CustomScrollbar, PanelOptionsGroup } from '@grafana/ui';
import { FadeIn } from 'app/core/components/Animations/FadeIn'; import { FadeIn } from 'app/core/components/Animations/FadeIn';
import { PanelOptionSection } from './PanelOptionSection';
interface Props { interface Props {
children: JSX.Element; children: JSX.Element;
...@@ -97,9 +96,9 @@ export class EditorTabBody extends PureComponent<Props, State> { ...@@ -97,9 +96,9 @@ export class EditorTabBody extends PureComponent<Props, State> {
renderOpenView(view: EditorToolbarView) { renderOpenView(view: EditorToolbarView) {
return ( return (
<PanelOptionSection title={view.title || view.heading} onClose={this.onCloseOpenView}> <PanelOptionsGroup title={view.title || view.heading} onClose={this.onCloseOpenView}>
{view.render()} {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'; ...@@ -9,7 +9,7 @@ import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
import { QueryInspector } from './QueryInspector'; import { QueryInspector } from './QueryInspector';
import { QueryOptions } from './QueryOptions'; import { QueryOptions } from './QueryOptions';
import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab'; import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab';
import { PanelOptionSection } from './PanelOptionSection'; import { PanelOptionsGroup } from '@grafana/ui';
// Services // Services
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
...@@ -216,7 +216,7 @@ export class QueriesTab extends PureComponent<Props, State> { ...@@ -216,7 +216,7 @@ export class QueriesTab extends PureComponent<Props, State> {
return ( return (
<EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}> <EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}>
<> <>
<PanelOptionSection> <PanelOptionsGroup>
<div className="query-editor-rows"> <div className="query-editor-rows">
<div ref={element => (this.element = element)} /> <div ref={element => (this.element = element)} />
...@@ -239,10 +239,10 @@ export class QueriesTab extends PureComponent<Props, State> { ...@@ -239,10 +239,10 @@ export class QueriesTab extends PureComponent<Props, State> {
</div> </div>
</div> </div>
</div> </div>
</PanelOptionSection> </PanelOptionsGroup>
<PanelOptionSection> <PanelOptionsGroup>
<QueryOptions panel={panel} datasource={currentDS} /> <QueryOptions panel={panel} datasource={currentDS} />
</PanelOptionSection> </PanelOptionsGroup>
</> </>
</EditorTabBody> </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'; ...@@ -9,7 +9,6 @@ import { EditorTabBody, EditorToolbarView } from './EditorTabBody';
import { VizTypePicker } from './VizTypePicker'; import { VizTypePicker } from './VizTypePicker';
import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp'; import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
import { FadeIn } from 'app/core/components/Animations/FadeIn'; import { FadeIn } from 'app/core/components/Animations/FadeIn';
import { PanelOptionSection } from './PanelOptionSection';
// Types // Types
import { PanelModel } from '../panel_model'; import { PanelModel } from '../panel_model';
...@@ -62,13 +61,13 @@ export class VisualizationTab extends PureComponent<Props, State> { ...@@ -62,13 +61,13 @@ export class VisualizationTab extends PureComponent<Props, State> {
} }
return ( return (
<PanelOptionSection> <>
{PanelOptions ? ( {PanelOptions ? (
<PanelOptions options={this.getPanelDefaultOptions()} onChange={this.onPanelOptionsChanged} /> <PanelOptions options={this.getPanelDefaultOptions()} onChange={this.onPanelOptionsChanged} />
) : ( ) : (
<p>Visualization has no options</p> <p>Visualization has no options</p>
)} )}
</PanelOptionSection> </>
); );
} }
...@@ -112,9 +111,9 @@ export class VisualizationTab extends PureComponent<Props, State> { ...@@ -112,9 +111,9 @@ export class VisualizationTab extends PureComponent<Props, State> {
for (let i = 0; i < panelCtrl.editorTabs.length; i++) { for (let i = 0; i < panelCtrl.editorTabs.length; i++) {
template += template +=
` `
<div class="panel-option-section" ng-cloak>` + <div class="panel-options-group" ng-cloak>` +
(i > 0 ? `<div class="panel-option-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') + (i > 0 ? `<div class="panel-options-group__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
`<div class="panel-option-section__body"> `<div class="panel-options-group__body">
<panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab> <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
</div> </div>
</div> </div>
......
public/app/features/dashboard/utils/panel.test.ts 0 → 100644
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) ...@@ -142,10 +142,16 @@ export function applyPanelTimeOverrides(panel: PanelModel, timeRange: TimeRange)
const timeShift = '-' + timeShiftInterpolated; const timeShift = '-' + timeShiftInterpolated;
newTimeData.timeInfo += ' timeshift ' + timeShift; newTimeData.timeInfo += ' timeshift ' + timeShift;
const from = dateMath.parseDateMath(timeShift, newTimeData.timeRange.from, false);
const to = dateMath.parseDateMath(timeShift, newTimeData.timeRange.to, true);
newTimeData.timeRange = { newTimeData.timeRange = {
from: dateMath.parseDateMath(timeShift, newTimeData.timeRange.from, false), from,
to: dateMath.parseDateMath(timeShift, newTimeData.timeRange.to, true), to,
raw: newTimeData.timeRange.raw, 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&#45;option&#45;section__header">Information</div> -->
<div class="panel-option-section__body"> <div class="panel-options-group__body">
<div class="section"> <div class="section">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-7">Title</span> <span class="gf-form-label width-7">Title</span>
...@@ -17,9 +17,9 @@ ...@@ -17,9 +17,9 @@
</div> </div>
</div> </div>
<div class="panel-option-section"> <div class="panel-options-group">
<div class="panel-option-section__header">Repeating</div> <div class="panel-options-group__header">Repeating</div>
<div class="panel-option-section__body"> <div class="panel-options-group__body">
<div class="section"> <div class="section">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-9">Repeat</span> <span class="gf-form-label width-9">Repeat</span>
...@@ -46,9 +46,9 @@ ...@@ -46,9 +46,9 @@
</div> </div>
</div> </div>
<div class="panel-option-section"> <div class="panel-options-group">
<div class="panel-option-section__header">Drilldown Links</div> <div class="panel-options-group__header">Drilldown Links</div>
<div class="panel-option-section__body"> <div class="panel-options-group__body">
<panel-links-editor panel="ctrl.panel"></panel-links-editor> <panel-links-editor panel="ctrl.panel"></panel-links-editor>
</div> </div>
</div> </div>
public/app/features/plugins/all.ts
import './plugin_edit_ctrl'; import './plugin_edit_ctrl';
import './plugin_page_ctrl'; import './plugin_page_ctrl';
import './import_list/import_list'; import './import_list/import_list';
import './ds_edit_ctrl';
import './datasource_srv'; import './datasource_srv';
import './plugin_component'; import './plugin_component';
import './VariableQueryComponentLoader'; import './variableQueryEditorLoader';
public/app/features/plugins/ds_dashboards_ctrl.ts deleted 100644 → 0
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 deleted 100644 → 0
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 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 { Switch } from 'app/core/components/Switch/Switch';
import { Label } from '../../../core/components/Label/Label'; import { Label } from '../../../core/components/Label/Label';
...@@ -20,8 +20,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps< ...@@ -20,8 +20,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = options; const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = options;
return ( return (
<div className="section gf-form-group"> <PanelOptionsGroup title="Gauge">
<h5 className="section-heading">Gauge</h5>
<div className="gf-form"> <div className="gf-form">
<Label width={8}>Min value</Label> <Label width={8}>Min value</Label>
<input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} value={minValue} /> <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< ...@@ -42,7 +41,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
checked={showThresholdMarkers} checked={showThresholdMarkers}
onChange={this.onToggleThresholdMarkers} onChange={this.onToggleThresholdMarkers}
/> />
</div> </PanelOptionsGroup>
); );
} }
} }
public/app/plugins/panel/gauge/GaugePanel.tsx
...@@ -15,6 +15,13 @@ export class GaugePanel extends PureComponent<Props> { ...@@ -15,6 +15,13 @@ export class GaugePanel extends PureComponent<Props> {
nullValueMode: NullValueMode.Ignore, 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 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 ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
import ValueMappings from 'app/plugins/panel/gauge/ValueMappings'; import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
...@@ -31,15 +38,13 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G ...@@ -31,15 +38,13 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G
const { onChange, options } = this.props; const { onChange, options } = this.props;
return ( return (
<> <>
<div className="form-section"> <PanelOptionsGrid>
<ValueOptions onChange={onChange} options={options} /> <ValueOptions onChange={onChange} options={options} />
<GaugeOptionsEditor onChange={onChange} options={options} /> <GaugeOptionsEditor onChange={onChange} options={options} />
<ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} /> <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
</div> </PanelOptionsGrid>
<div className="form-section"> <ValueMappings onChange={onChange} options={options} />
<ValueMappings onChange={onChange} options={options} />
</div>
</> </>
); );
} }
......
public/app/plugins/panel/gauge/ValueMappings.tsx
import React, { PureComponent } from 'react'; 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'; import MappingRow from './MappingRow';
...@@ -75,8 +75,7 @@ export default class ValueMappings extends PureComponent<PanelOptionsProps<Gauge ...@@ -75,8 +75,7 @@ export default class ValueMappings extends PureComponent<PanelOptionsProps<Gauge
const { mappings } = this.state; const { mappings } = this.state;
return ( return (
<div className="section gf-form-group"> <PanelOptionsGroup title="Value Mappings">
<h5 className="section-heading">Value mappings</h5>
<div> <div>
{mappings.length > 0 && {mappings.length > 0 &&
mappings.map((mapping, index) => ( mappings.map((mapping, index) => (
...@@ -94,7 +93,7 @@ export default class ValueMappings extends PureComponent<PanelOptionsProps<Gauge ...@@ -94,7 +93,7 @@ export default class ValueMappings extends PureComponent<PanelOptionsProps<Gauge
</div> </div>
<div className="add-mapping-row-label">Add mapping</div> <div className="add-mapping-row-label">Add mapping</div>
</div> </div>
</div> </PanelOptionsGroup>
); );
} }
} }
public/app/plugins/panel/gauge/ValueOptions.tsx
import React, { PureComponent } from 'react'; 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 { Label } from 'app/core/components/Label/Label';
import { Select} from '@grafana/ui'; import { Select} from '@grafana/ui';
...@@ -40,8 +40,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO ...@@ -40,8 +40,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
const { stat, unit, decimals, prefix, suffix } = this.props.options; const { stat, unit, decimals, prefix, suffix } = this.props.options;
return ( return (
<div className="section gf-form-group"> <PanelOptionsGroup title="Value">
<h5 className="section-heading">Value</h5>
<div className="gf-form"> <div className="gf-form">
<Label width={labelWidth}>Stat</Label> <Label width={labelWidth}>Stat</Label>
<Select <Select
...@@ -73,7 +72,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO ...@@ -73,7 +72,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
<Label width={labelWidth}>Suffix</Label> <Label width={labelWidth}>Suffix</Label>
<input className="gf-form-input width-12" type="text" value={suffix || ''} onChange={this.onSuffixChange} /> <input className="gf-form-input width-12" type="text" value={suffix || ''} onChange={this.onSuffixChange} />
</div> </div>
</div> </PanelOptionsGroup>
); );
} }
} }
public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render should render component 1`] = ` exports[`Render should render component 1`] = `
<div <Component
className="section gf-form-group" title="Value Mappings"
> >
<h5
className="section-heading"
>
Value mappings
</h5>
<div> <div>
<MappingRow <MappingRow
key="Ok-0" key="Ok-0"
...@@ -57,5 +52,5 @@ exports[`Render should render component 1`] = ` ...@@ -57,5 +52,5 @@ exports[`Render should render component 1`] = `
Add mapping Add mapping
</div> </div>
</div> </div>
</div> </Component>
`; `;
public/app/plugins/panel/graph/axes_editor.ts
import kbn from 'app/core/utils/kbn'; import { getValueFormats } from '@grafana/ui';
export class AxesEditorCtrl { export class AxesEditorCtrl {
panel: any; panel: any;
...@@ -15,7 +15,7 @@ export class AxesEditorCtrl { ...@@ -15,7 +15,7 @@ export class AxesEditorCtrl {
this.panel = this.panelCtrl.panel; this.panel = this.panelCtrl.panel;
this.$scope.ctrl = this; this.$scope.ctrl = this;
this.unitFormats = kbn.getUnitFormats(); this.unitFormats = getValueFormats();
this.logScales = { this.logScales = {
linear: 1, linear: 1,
......
public/app/plugins/panel/graph2/GraphPanel.tsx
...@@ -3,8 +3,14 @@ import _ from 'lodash'; ...@@ -3,8 +3,14 @@ import _ from 'lodash';
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { colors } from '@grafana/ui'; import { colors } from '@grafana/ui';
// Components & Types // Utils
import { Graph, PanelProps, NullValueMode, processTimeSeries } from '@grafana/ui'; 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'; import { Options } from './types';
interface Props extends PanelProps<Options> {} interface Props extends PanelProps<Options> {}
......
public/app/plugins/panel/singlestat/module.ts
...@@ -312,14 +312,20 @@ class SingleStatCtrl extends MetricsPanelCtrl { ...@@ -312,14 +312,20 @@ class SingleStatCtrl extends MetricsPanelCtrl {
const formatFunc = kbn.valueFormats[this.panel.format]; const formatFunc = kbn.valueFormats[this.panel.format];
data.value = lastPoint[1]; data.value = lastPoint[1];
data.valueRounded = data.value; data.valueRounded = data.value;
data.valueFormatted = formatFunc(data.value, this.dashboard.isTimezoneUtc()); data.valueFormatted = formatFunc(data.value, 0, 0, this.dashboard.isTimezoneUtc());
} else { } else {
data.value = this.series[0].stats[this.panel.valueName]; data.value = this.series[0].stats[this.panel.valueName];
data.flotpairs = this.series[0].flotpairs; data.flotpairs = this.series[0].flotpairs;
const decimalInfo = this.getDecimalsForValue(data.value); const decimalInfo = this.getDecimalsForValue(data.value);
const formatFunc = kbn.valueFormats[this.panel.format]; 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); data.valueRounded = kbn.roundValue(data.value, decimalInfo.decimals);
} }
......
public/app/plugins/panel/table/column_options.ts
import _ from 'lodash'; import _ from 'lodash';
import kbn from 'app/core/utils/kbn'; import { getValueFormats } from '@grafana/ui';
export class ColumnOptionsCtrl { export class ColumnOptionsCtrl {
panel: any; panel: any;
...@@ -22,7 +22,7 @@ export class ColumnOptionsCtrl { ...@@ -22,7 +22,7 @@ export class ColumnOptionsCtrl {
this.activeStyleIndex = 0; this.activeStyleIndex = 0;
this.panelCtrl = $scope.ctrl; this.panelCtrl = $scope.ctrl;
this.panel = this.panelCtrl.panel; this.panel = this.panelCtrl.panel;
this.unitFormats = kbn.getUnitFormats(); this.unitFormats = getValueFormats();
this.colorModes = [ this.colorModes = [
{ text: 'Disabled', value: null }, { text: 'Disabled', value: null },
{ text: 'Cell', value: 'cell' }, { text: 'Cell', value: 'cell' },
......
public/sass/_variables.dark.scss
...@@ -391,8 +391,8 @@ $panel-editor-tabs-line-color: #e3e3e3; ...@@ -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: darken($blue, 47%);
$panel-editor-viz-item-bg-hover-active: darken($orange, 45%); $panel-editor-viz-item-bg-hover-active: darken($orange, 45%);
$panel-option-section-border: 1px solid $dark-3; $panel-options-group-border: 1px solid $dark-3;
$panel-option-section-header-bg: linear-gradient(0deg, $gray-blue, $dark-1); $panel-options-group-header-bg: linear-gradient(0deg, $gray-blue, $dark-1);
$panel-grid-placeholder-bg: darken($blue, 47%); $panel-grid-placeholder-bg: darken($blue, 47%);
$panel-grid-placeholder-shadow: 0 0 4px $blue; $panel-grid-placeholder-shadow: 0 0 4px $blue;
......
public/sass/_variables.light.scss
...@@ -399,8 +399,8 @@ $panel-editor-tabs-line-color: $dark-5; ...@@ -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: lighten($blue, 62%);
$panel-editor-viz-item-bg-hover-active: lighten($orange, 34%); $panel-editor-viz-item-bg-hover-active: lighten($orange, 34%);
$panel-option-section-border: 1px solid $gray-6; $panel-options-group-border: 1px solid $gray-6;
$panel-option-section-header-bg: linear-gradient(0deg, $gray-6, $gray-7); $panel-options-group-header-bg: linear-gradient(0deg, $gray-6, $gray-7);
$panel-grid-placeholder-bg: lighten($blue, 62%); $panel-grid-placeholder-bg: lighten($blue, 62%);
$panel-grid-placeholder-shadow: 0 0 4px $blue-light; $panel-grid-placeholder-shadow: 0 0 4px $blue-light;
......
public/sass/_variables.scss
...@@ -189,7 +189,9 @@ $side-menu-width: 60px; ...@@ -189,7 +189,9 @@ $side-menu-width: 60px;
// dashboard // dashboard
$panel-margin: 10px; $panel-margin: 10px;
$dashboard-padding: $panel-margin * 2; $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
$tabs-padding: 10px 15px 9px; $tabs-padding: 10px 15px 9px;
...@@ -202,3 +204,8 @@ $external-services: ( ...@@ -202,3 +204,8 @@ $external-services: (
oauth: (bgColor: #262628, borderColor: #393939, icon: '') oauth: (bgColor: #262628, borderColor: #393939, icon: '')
) )
!default; !default;
:export {
panelHorizontalPadding: $panel-horizontal-padding;
panelVerticalPadding: $panel-vertical-padding;
}
public/sass/_variables.scss.d.ts 0 → 100644
export interface GrafanaVariables {
'panelHorizontalPadding': number;
'panelVerticalPadding': number;
}
declare const variables: GrafanaVariables;
export default variables;
public/sass/components/_panel_editor.scss
...@@ -230,30 +230,3 @@ ...@@ -230,30 +230,3 @@
min-width: 200px; 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 #!/bin/bash
cd .. 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 cd grafana-enterprise
./build.sh ./build.sh
tsconfig.json
...@@ -28,7 +28,8 @@ ...@@ -28,7 +28,8 @@
"pretty": true, "pretty": true,
"typeRoots": ["node_modules/@types", "types"], "typeRoots": ["node_modules/@types", "types"],
"paths": { "paths": {
"app": ["app"] "app": ["app"],
"sass": ["sass"]
} }
}, },
"include": ["public/app/**/*.ts", "public/app/**/*.tsx", "public/test/**/*.ts"] "include": ["public/app/**/*.ts", "public/app/**/*.tsx", "public/test/**/*.ts"]
......
yarn.lock
...@@ -7060,6 +7060,11 @@ jest-config@^23.6.0: ...@@ -7060,6 +7060,11 @@ jest-config@^23.6.0:
micromatch "^2.3.11" micromatch "^2.3.11"
pretty-format "^23.6.0" 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: jest-diff@^23.6.0:
version "23.6.0" version "23.6.0"
resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-23.6.0.tgz#1500f3f16e850bb3d71233408089be099f610c7d" resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-23.6.0.tgz#1500f3f16e850bb3d71233408089be099f610c7d"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment