diff --git a/public/app/core/components/Tooltip/Tooltip.tsx b/public/app/core/components/Tooltip/Tooltip.tsx
index a265c8487d3..62be658f7cf 100644
--- a/public/app/core/components/Tooltip/Tooltip.tsx
+++ b/public/app/core/components/Tooltip/Tooltip.tsx
@@ -1,37 +1,28 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
import withTooltip from './withTooltip';
import { Target } from 'react-popper';
-interface TooltipProps {
+interface Props {
tooltipSetState: (prevState: object) => void;
}
-class Tooltip extends React.Component {
- constructor(props) {
- super(props);
- this.showTooltip = this.showTooltip.bind(this);
- this.hideTooltip = this.hideTooltip.bind(this);
- }
-
- showTooltip() {
+class Tooltip extends PureComponent {
+ showTooltip = () => {
const { tooltipSetState } = this.props;
- tooltipSetState(prevState => {
- return {
- ...prevState,
- show: true,
- };
- });
- }
- hideTooltip() {
+ tooltipSetState(prevState => ({
+ ...prevState,
+ show: true,
+ }));
+ };
+
+ hideTooltip = () => {
const { tooltipSetState } = this.props;
- tooltipSetState(prevState => {
- return {
- ...prevState,
- show: false,
- };
- });
- }
+ tooltipSetState(prevState => ({
+ ...prevState,
+ show: false,
+ }));
+ };
render() {
return (
diff --git a/public/app/core/components/colorpicker/SeriesColorPicker.tsx b/public/app/core/components/colorpicker/SeriesColorPicker.tsx
index b514899e2e2..d6feaa31965 100644
--- a/public/app/core/components/colorpicker/SeriesColorPicker.tsx
+++ b/public/app/core/components/colorpicker/SeriesColorPicker.tsx
@@ -1,53 +1,84 @@
import React from 'react';
-import { ColorPickerPopover } from './ColorPickerPopover';
-import { react2AngularDirective } from 'app/core/utils/react2angular';
+import ReactDOM from 'react-dom';
+import Drop from 'tether-drop';
+import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
-export interface Props {
- series: any;
- onColorChange: (color: string) => void;
- onToggleAxis: () => void;
+export interface SeriesColorPickerProps {
+ color: string;
+ yaxis?: number;
+ optionalClass?: string;
+ onColorChange: (newColor: string) => void;
+ onToggleAxis?: () => void;
}
-export class SeriesColorPicker extends React.Component {
+export class SeriesColorPicker extends React.Component {
+ pickerElem: any;
+ colorPickerDrop: any;
+
+ static defaultProps = {
+ optionalClass: '',
+ yaxis: undefined,
+ onToggleAxis: () => {},
+ };
+
constructor(props) {
super(props);
- this.onColorChange = this.onColorChange.bind(this);
- this.onToggleAxis = this.onToggleAxis.bind(this);
}
- onColorChange(color) {
- this.props.onColorChange(color);
+ componentWillUnmount() {
+ this.destroyDrop();
}
- onToggleAxis() {
- this.props.onToggleAxis();
- }
+ onClickToOpen = () => {
+ if (this.colorPickerDrop) {
+ this.destroyDrop();
+ }
- renderAxisSelection() {
- const leftButtonClass = this.props.series.yaxis === 1 ? 'btn-success' : 'btn-inverse';
- const rightButtonClass = this.props.series.yaxis === 2 ? 'btn-success' : 'btn-inverse';
-
- return (
-
@@ -230,6 +236,12 @@ exports[`Render should render component 1`] = `
>
Paused
+
diff --git a/public/app/features/alerting/partials/alert_tab.html b/public/app/features/alerting/partials/alert_tab.html
index cb101672aa4..2ebe2b53a76 100644
--- a/public/app/features/alerting/partials/alert_tab.html
+++ b/public/app/features/alerting/partials/alert_tab.html
@@ -1,147 +1,159 @@
-
-
-
-
+ const { color, yaxis, onColorChange, onToggleAxis } = this.props;
+ const dropContent = (
+
- {this.props.series.yaxis && this.renderAxisSelection()}
- {
+ render() {
+ return (
+ {
+ constructor(props) {
+ super(props);
+ this.state = {
+ yaxis: this.props.yaxis,
+ };
+ this.onToggleAxis = this.onToggleAxis.bind(this);
+ }
+
+ onToggleAxis() {
+ this.setState({
+ yaxis: this.state.yaxis === 2 ? 1 : 2,
+ });
+ this.props.onToggleAxis();
+ }
+
+ render() {
+ const leftButtonClass = this.state.yaxis === 1 ? 'btn-success' : 'btn-inverse';
+ const rightButtonClass = this.state.yaxis === 2 ? 'btn-success' : 'btn-inverse';
+
+ return (
+ {
{ text: 'Alerting', value: 'alerting' },
{ text: 'No Data', value: 'no_data' },
{ text: 'Paused', value: 'paused' },
+ { text: 'Pending', value: 'pending' },
];
componentDidMount() {
diff --git a/public/app/features/alerting/AlertTabCtrl.ts b/public/app/features/alerting/AlertTabCtrl.ts
index c91ff5cd6c3..ef68ddcf4a5 100644
--- a/public/app/features/alerting/AlertTabCtrl.ts
+++ b/public/app/features/alerting/AlertTabCtrl.ts
@@ -166,9 +166,10 @@ export class AlertTabCtrl {
alert.noDataState = alert.noDataState || config.alertingNoDataOrNullValues;
alert.executionErrorState = alert.executionErrorState || config.alertingErrorOrTimeout;
- alert.frequency = alert.frequency || '60s';
+ alert.frequency = alert.frequency || '1m';
alert.handler = alert.handler || 1;
alert.notifications = alert.notifications || [];
+ alert.for = alert.for || '0m';
const defaultName = this.panel.title + ' alert';
alert.name = alert.name || defaultName;
@@ -354,6 +355,7 @@ export class AlertTabCtrl {
enable() {
this.panel.alert = {};
this.initModel();
+ this.panel.alert.for = '5m'; //default value for new alerts. for existing alerts we use 0m to avoid breaking changes
}
evaluatorParamsChanged() {
diff --git a/public/app/features/alerting/__snapshots__/AlertRuleList.test.tsx.snap b/public/app/features/alerting/__snapshots__/AlertRuleList.test.tsx.snap
index 4ae27213e1e..b753a852e92 100644
--- a/public/app/features/alerting/__snapshots__/AlertRuleList.test.tsx.snap
+++ b/public/app/features/alerting/__snapshots__/AlertRuleList.test.tsx.snap
@@ -81,6 +81,12 @@ exports[`Render should render alert rules 1`] = `
>
Paused
+
(this.pickerElem = e)} onClick={this.onClickToOpen}>
+ {children}
);
}
}
-
-react2AngularDirective('seriesColorPicker', SeriesColorPicker, ['series', 'onColorChange', 'onToggleAxis']);
diff --git a/public/app/core/components/colorpicker/SeriesColorPickerPopover.tsx b/public/app/core/components/colorpicker/SeriesColorPickerPopover.tsx
new file mode 100644
index 00000000000..085d554300d
--- /dev/null
+++ b/public/app/core/components/colorpicker/SeriesColorPickerPopover.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { ColorPickerPopover } from './ColorPickerPopover';
+import { react2AngularDirective } from 'app/core/utils/react2angular';
+
+export interface SeriesColorPickerPopoverProps {
+ color: string;
+ yaxis?: number;
+ onColorChange: (color: string) => void;
+ onToggleAxis?: () => void;
+}
+
+export class SeriesColorPickerPopover extends React.PureComponent
+ {this.props.yaxis &&
+ );
+ }
+}
+
+interface AxisSelectorProps {
+ yaxis: number;
+ onToggleAxis: () => void;
+}
+
+interface AxisSelectorState {
+ yaxis: number;
+}
+
+export class AxisSelector extends React.PureComponent
+
+
+
+
+ );
+ }
+}
+
+react2AngularDirective('seriesColorPickerPopover', SeriesColorPickerPopover, [
+ 'series',
+ 'onColorChange',
+ 'onToggleAxis',
+]);
diff --git a/public/app/core/components/form_dropdown/form_dropdown.ts b/public/app/core/components/form_dropdown/form_dropdown.ts
index 6e863e1cb5d..81d4b336443 100644
--- a/public/app/core/components/form_dropdown/form_dropdown.ts
+++ b/public/app/core/components/form_dropdown/form_dropdown.ts
@@ -88,7 +88,7 @@ export class FormDropdownCtrl {
if (evt.keyCode === 13) {
setTimeout(() => {
this.inputElement.blur();
- }, 100);
+ }, 300);
}
});
diff --git a/public/app/core/controllers/json_editor_ctrl.ts b/public/app/core/controllers/json_editor_ctrl.ts
index 9c3f9d9e98d..7439433c55e 100644
--- a/public/app/core/controllers/json_editor_ctrl.ts
+++ b/public/app/core/controllers/json_editor_ctrl.ts
@@ -4,13 +4,13 @@ import coreModule from '../core_module';
export class JsonEditorCtrl {
/** @ngInject */
constructor($scope) {
- $scope.json = angular.toJson($scope.object, true);
- $scope.canUpdate = $scope.updateHandler !== void 0 && $scope.contextSrv.isEditor;
- $scope.canCopy = $scope.enableCopy;
+ $scope.json = angular.toJson($scope.model.object, true);
+ $scope.canUpdate = $scope.model.updateHandler !== void 0 && $scope.contextSrv.isEditor;
+ $scope.canCopy = $scope.model.enableCopy;
$scope.update = () => {
const newObject = angular.fromJson($scope.json);
- $scope.updateHandler(newObject, $scope.object);
+ $scope.model.updateHandler(newObject, $scope.model.object);
};
$scope.getContentForClipboard = () => $scope.json;
diff --git a/public/app/core/core.ts b/public/app/core/core.ts
index 18a625d3307..257a2077c97 100644
--- a/public/app/core/core.ts
+++ b/public/app/core/core.ts
@@ -14,7 +14,7 @@ import './components/jsontree/jsontree';
import './components/code_editor/code_editor';
import './utils/outline';
import './components/colorpicker/ColorPicker';
-import './components/colorpicker/SeriesColorPicker';
+import './components/colorpicker/SeriesColorPickerPopover';
import './components/colorpicker/spectrum_picker';
import './services/search_srv';
import './services/ng_react';
diff --git a/public/app/core/logs_model.ts b/public/app/core/logs_model.ts
index 8848a929359..21f518a682b 100644
--- a/public/app/core/logs_model.ts
+++ b/public/app/core/logs_model.ts
@@ -1,3 +1,7 @@
+import _ from 'lodash';
+import { TimeSeries } from 'app/core/core';
+import colors from 'app/core/utils/colors';
+
export enum LogLevel {
crit = 'crit',
warn = 'warn',
@@ -6,8 +10,20 @@ export enum LogLevel {
info = 'info',
debug = 'debug',
trace = 'trace',
+ none = 'none',
}
+export const LogLevelColor = {
+ [LogLevel.crit]: colors[7],
+ [LogLevel.warn]: colors[1],
+ [LogLevel.err]: colors[4],
+ [LogLevel.error]: colors[4],
+ [LogLevel.info]: colors[0],
+ [LogLevel.debug]: colors[3],
+ [LogLevel.trace]: colors[3],
+ [LogLevel.none]: '#eee',
+};
+
export interface LogSearchMatch {
start: number;
length: number;
@@ -15,15 +31,120 @@ export interface LogSearchMatch {
}
export interface LogRow {
- key: string;
+ duplicates?: number;
entry: string;
+ key: string; // timestamp + labels
+ labels: string;
logLevel: LogLevel;
- timestamp: string;
- timeFromNow: string;
- timeLocal: string;
searchWords?: string[];
+ timestamp: string; // ISO with nanosec precision
+ timeFromNow: string;
+ timeEpochMs: number;
+ timeLocal: string;
+ uniqueLabels?: string;
+}
+
+export interface LogsMetaItem {
+ label: string;
+ value: string;
}
export interface LogsModel {
+ meta?: LogsMetaItem[];
rows: LogRow[];
+ series?: TimeSeries[];
+}
+
+export interface LogsStream {
+ labels: string;
+ entries: LogsStreamEntry[];
+ search?: string;
+ parsedLabels?: LogsStreamLabels;
+ uniqueLabels?: string;
+}
+
+export interface LogsStreamEntry {
+ line: string;
+ timestamp: string;
+}
+
+export interface LogsStreamLabels {
+ [key: string]: string;
+}
+
+export enum LogsDedupStrategy {
+ none = 'none',
+ exact = 'exact',
+ numbers = 'numbers',
+ signature = 'signature',
+}
+
+const isoDateRegexp = /\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-6]\d[,\.]\d+([+-][0-2]\d:[0-5]\d|Z)/g;
+function isDuplicateRow(row: LogRow, other: LogRow, strategy: LogsDedupStrategy): boolean {
+ switch (strategy) {
+ case LogsDedupStrategy.exact:
+ // Exact still strips dates
+ return row.entry.replace(isoDateRegexp, '') === other.entry.replace(isoDateRegexp, '');
+
+ case LogsDedupStrategy.numbers:
+ return row.entry.replace(/\d/g, '') === other.entry.replace(/\d/g, '');
+
+ case LogsDedupStrategy.signature:
+ return row.entry.replace(/\w/g, '') === other.entry.replace(/\w/g, '');
+
+ default:
+ return false;
+ }
+}
+
+export function dedupLogRows(logs: LogsModel, strategy: LogsDedupStrategy): LogsModel {
+ if (strategy === LogsDedupStrategy.none) {
+ return logs;
+ }
+
+ const dedupedRows = logs.rows.reduce((result: LogRow[], row: LogRow, index, list) => {
+ const previous = result[result.length - 1];
+ if (index > 0 && isDuplicateRow(row, previous, strategy)) {
+ previous.duplicates++;
+ } else {
+ row.duplicates = 0;
+ result.push(row);
+ }
+ return result;
+ }, []);
+
+ return {
+ ...logs,
+ rows: dedupedRows,
+ };
+}
+
+export function makeSeriesForLogs(rows: LogRow[], intervalMs: number): TimeSeries[] {
+ // Graph time series by log level
+ const seriesByLevel = {};
+ rows.forEach(row => {
+ if (!seriesByLevel[row.logLevel]) {
+ seriesByLevel[row.logLevel] = { lastTs: null, datapoints: [], alias: row.logLevel };
+ }
+ const levelSeries = seriesByLevel[row.logLevel];
+
+ // Bucket to nearest minute
+ const time = Math.round(row.timeEpochMs / intervalMs / 10) * intervalMs * 10;
+ // Entry for time
+ if (time === levelSeries.lastTs) {
+ levelSeries.datapoints[levelSeries.datapoints.length - 1][0]++;
+ } else {
+ levelSeries.datapoints.push([1, time]);
+ levelSeries.lastTs = time;
+ }
+ });
+
+ return Object.keys(seriesByLevel).reduce((acc, level) => {
+ if (seriesByLevel[level]) {
+ const gs = new TimeSeries(seriesByLevel[level]);
+ gs.setColor(LogLevelColor[level]);
+ acc.push(gs);
+ }
+ return acc;
+ }, []);
}
diff --git a/public/app/core/reducers/location.ts b/public/app/core/reducers/location.ts
index 7c7dffd04b9..c9fe478dd9d 100644
--- a/public/app/core/reducers/location.ts
+++ b/public/app/core/reducers/location.ts
@@ -23,7 +23,9 @@ export const locationReducer = (state = initialState, action: Action): LocationS
return {
url: renderUrl(path || state.path, query),
path: path || state.path,
- query: query,
+ query: {
+ ...query,
+ },
routeParams: routeParams || state.routeParams,
};
}
diff --git a/public/app/core/services/bridge_srv.ts b/public/app/core/services/bridge_srv.ts
index ee184c243ac..1c91673495d 100644
--- a/public/app/core/services/bridge_srv.ts
+++ b/public/app/core/services/bridge_srv.ts
@@ -4,7 +4,7 @@ import { store } from 'app/store/configureStore';
import locationUtil from 'app/core/utils/location_util';
import { updateLocation } from 'app/core/actions';
-// Services that handles angular -> mobx store sync & other react <-> angular sync
+// Services that handles angular -> redux store sync & other react <-> angular sync
export class BridgeSrv {
private fullPageReloadRoutes;
diff --git a/public/app/core/services/dynamic_directive_srv.ts b/public/app/core/services/dynamic_directive_srv.ts
index 9b7ede59853..c27842ab54f 100644
--- a/public/app/core/services/dynamic_directive_srv.ts
+++ b/public/app/core/services/dynamic_directive_srv.ts
@@ -21,7 +21,6 @@ class DynamicDirectiveSrv {
}
if (!directiveInfo.fn.registered) {
- console.log('register panel tab');
coreModule.directive(attrs.$normalize(directiveInfo.name), directiveInfo.fn);
directiveInfo.fn.registered = true;
}
diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts
index 6fe57dfa77a..c02f6850e8b 100644
--- a/public/app/core/services/keybindingSrv.ts
+++ b/public/app/core/services/keybindingSrv.ts
@@ -32,8 +32,8 @@ export class KeybindingSrv {
this.setupGlobal();
appEvents.on('show-modal', () => (this.modalOpen = true));
- $rootScope.onAppEvent('timepickerOpen', () => (this.timepickerOpen = true));
- $rootScope.onAppEvent('timepickerClosed', () => (this.timepickerOpen = false));
+ appEvents.on('timepickerOpen', () => (this.timepickerOpen = true));
+ appEvents.on('timepickerClosed', () => (this.timepickerOpen = false));
}
setupGlobal() {
diff --git a/public/app/core/specs/logs_model.test.ts b/public/app/core/specs/logs_model.test.ts
new file mode 100644
index 00000000000..5e427468339
--- /dev/null
+++ b/public/app/core/specs/logs_model.test.ts
@@ -0,0 +1,108 @@
+import { dedupLogRows, LogsDedupStrategy, LogsModel } from '../logs_model';
+
+describe('dedupLogRows()', () => {
+ test('should return rows as is when dedup is set to none', () => {
+ const logs = {
+ rows: [
+ {
+ entry: 'WARN test 1.23 on [xxx]',
+ },
+ {
+ entry: 'WARN test 1.23 on [xxx]',
+ },
+ ],
+ };
+ expect(dedupLogRows(logs as LogsModel, LogsDedupStrategy.none).rows).toMatchObject(logs.rows);
+ });
+
+ test('should dedup on exact matches', () => {
+ const logs = {
+ rows: [
+ {
+ entry: 'WARN test 1.23 on [xxx]',
+ },
+ {
+ entry: 'WARN test 1.23 on [xxx]',
+ },
+ {
+ entry: 'INFO test 2.44 on [xxx]',
+ },
+ {
+ entry: 'WARN test 1.23 on [xxx]',
+ },
+ ],
+ };
+ expect(dedupLogRows(logs as LogsModel, LogsDedupStrategy.exact).rows).toEqual([
+ {
+ duplicates: 1,
+ entry: 'WARN test 1.23 on [xxx]',
+ },
+ {
+ duplicates: 0,
+ entry: 'INFO test 2.44 on [xxx]',
+ },
+ {
+ duplicates: 0,
+ entry: 'WARN test 1.23 on [xxx]',
+ },
+ ]);
+ });
+
+ test('should dedup on number matches', () => {
+ const logs = {
+ rows: [
+ {
+ entry: 'WARN test 1.2323423 on [xxx]',
+ },
+ {
+ entry: 'WARN test 1.23 on [xxx]',
+ },
+ {
+ entry: 'INFO test 2.44 on [xxx]',
+ },
+ {
+ entry: 'WARN test 1.23 on [xxx]',
+ },
+ ],
+ };
+ expect(dedupLogRows(logs as LogsModel, LogsDedupStrategy.numbers).rows).toEqual([
+ {
+ duplicates: 1,
+ entry: 'WARN test 1.2323423 on [xxx]',
+ },
+ {
+ duplicates: 0,
+ entry: 'INFO test 2.44 on [xxx]',
+ },
+ {
+ duplicates: 0,
+ entry: 'WARN test 1.23 on [xxx]',
+ },
+ ]);
+ });
+
+ test('should dedup on signature matches', () => {
+ const logs = {
+ rows: [
+ {
+ entry: 'WARN test 1.2323423 on [xxx]',
+ },
+ {
+ entry: 'WARN test 1.23 on [xxx]',
+ },
+ {
+ entry: 'INFO test 2.44 on [xxx]',
+ },
+ {
+ entry: 'WARN test 1.23 on [xxx]',
+ },
+ ],
+ };
+ expect(dedupLogRows(logs as LogsModel, LogsDedupStrategy.signature).rows).toEqual([
+ {
+ duplicates: 3,
+ entry: 'WARN test 1.2323423 on [xxx]',
+ },
+ ]);
+ });
+});
diff --git a/public/app/core/table_model.ts b/public/app/core/table_model.ts
index 99395258ba3..91a7cd0c1fb 100644
--- a/public/app/core/table_model.ts
+++ b/public/app/core/table_model.ts
@@ -83,6 +83,10 @@ function areRowsMatching(columns, row, otherRow) {
export function mergeTablesIntoModel(dst?: TableModel, ...tables: TableModel[]): TableModel {
const model = dst || new TableModel();
+ if (arguments.length === 1) {
+ return model;
+ }
+
// Single query returns data columns and rows as is
if (arguments.length === 2) {
model.columns = [...tables[0].columns];
diff --git a/public/app/core/utils/colors.ts b/public/app/core/utils/colors.ts
index e8a7366beb5..13e02b76e30 100644
--- a/public/app/core/utils/colors.ts
+++ b/public/app/core/utils/colors.ts
@@ -7,19 +7,20 @@ export const DEFAULT_ANNOTATION_COLOR = 'rgba(0, 211, 255, 1)';
export const OK_COLOR = 'rgba(11, 237, 50, 1)';
export const ALERTING_COLOR = 'rgba(237, 46, 24, 1)';
export const NO_DATA_COLOR = 'rgba(150, 150, 150, 1)';
+export const PENDING_COLOR = 'rgba(247, 149, 32, 1)';
export const REGION_FILL_ALPHA = 0.09;
const colors = [
- '#7EB26D',
- '#EAB839',
- '#6ED0E0',
- '#EF843C',
- '#E24D42',
- '#1F78C1',
- '#BA43A9',
- '#705DA0',
- '#508642',
- '#CCA300',
+ '#7EB26D', // 0: pale green
+ '#EAB839', // 1: mustard
+ '#6ED0E0', // 2: light blue
+ '#EF843C', // 3: orange
+ '#E24D42', // 4: red
+ '#1F78C1', // 5: ocean
+ '#BA43A9', // 6: purple
+ '#705DA0', // 7: violet
+ '#508642', // 8: dark green
+ '#CCA300', // 9: dark sand
'#447EBC',
'#C15C17',
'#890F02',
diff --git a/public/app/core/utils/explore.test.ts b/public/app/core/utils/explore.test.ts
index 4252730338d..37d3d3bfac9 100644
--- a/public/app/core/utils/explore.test.ts
+++ b/public/app/core/utils/explore.test.ts
@@ -1,5 +1,13 @@
-import { DEFAULT_RANGE, serializeStateToUrlParam, parseUrlState } from './explore';
+import {
+ DEFAULT_RANGE,
+ serializeStateToUrlParam,
+ parseUrlState,
+ updateHistory,
+ clearHistory,
+ hasNonEmptyQuery,
+} from './explore';
import { ExploreState } from 'app/types/explore';
+import store from 'app/core/store';
const DEFAULT_EXPLORE_STATE: ExploreState = {
datasource: null,
@@ -10,7 +18,7 @@ const DEFAULT_EXPLORE_STATE: ExploreState = {
exploreDatasources: [],
graphRange: DEFAULT_RANGE,
history: [],
- queries: [],
+ initialQueries: [],
queryTransactions: [],
range: DEFAULT_RANGE,
showingGraph: true,
@@ -33,10 +41,10 @@ describe('state functions', () => {
it('returns a valid Explore state from URL parameter', () => {
const paramValue =
- '%7B"datasource":"Local","queries":%5B%7B"query":"metric"%7D%5D,"range":%7B"from":"now-1h","to":"now"%7D%7D';
+ '%7B"datasource":"Local","queries":%5B%7B"expr":"metric"%7D%5D,"range":%7B"from":"now-1h","to":"now"%7D%7D';
expect(parseUrlState(paramValue)).toMatchObject({
datasource: 'Local',
- queries: [{ query: 'metric' }],
+ queries: [{ expr: 'metric' }],
range: {
from: 'now-1h',
to: 'now',
@@ -45,10 +53,10 @@ describe('state functions', () => {
});
it('returns a valid Explore state from a compact URL parameter', () => {
- const paramValue = '%5B"now-1h","now","Local","metric"%5D';
+ const paramValue = '%5B"now-1h","now","Local",%7B"expr":"metric"%7D%5D';
expect(parseUrlState(paramValue)).toMatchObject({
datasource: 'Local',
- queries: [{ query: 'metric' }],
+ queries: [{ expr: 'metric' }],
range: {
from: 'now-1h',
to: 'now',
@@ -66,18 +74,20 @@ describe('state functions', () => {
from: 'now-5h',
to: 'now',
},
- queries: [
+ initialQueries: [
{
- query: 'metric{test="a/b"}',
+ refId: '1',
+ expr: 'metric{test="a/b"}',
},
{
- query: 'super{foo="x/z"}',
+ refId: '2',
+ expr: 'super{foo="x/z"}',
},
],
};
expect(serializeStateToUrlParam(state)).toBe(
- '{"datasource":"foo","queries":[{"query":"metric{test=\\"a/b\\"}"},' +
- '{"query":"super{foo=\\"x/z\\"}"}],"range":{"from":"now-5h","to":"now"}}'
+ '{"datasource":"foo","queries":[{"expr":"metric{test=\\"a/b\\"}"},' +
+ '{"expr":"super{foo=\\"x/z\\"}"}],"range":{"from":"now-5h","to":"now"}}'
);
});
@@ -89,17 +99,19 @@ describe('state functions', () => {
from: 'now-5h',
to: 'now',
},
- queries: [
+ initialQueries: [
{
- query: 'metric{test="a/b"}',
+ refId: '1',
+ expr: 'metric{test="a/b"}',
},
{
- query: 'super{foo="x/z"}',
+ refId: '2',
+ expr: 'super{foo="x/z"}',
},
],
};
expect(serializeStateToUrlParam(state, true)).toBe(
- '["now-5h","now","foo","metric{test=\\"a/b\\"}","super{foo=\\"x/z\\"}"]'
+ '["now-5h","now","foo",{"expr":"metric{test=\\"a/b\\"}"},{"expr":"super{foo=\\"x/z\\"}"}]'
);
});
});
@@ -113,12 +125,14 @@ describe('state functions', () => {
from: 'now - 5h',
to: 'now',
},
- queries: [
+ initialQueries: [
{
- query: 'metric{test="a/b"}',
+ refId: '1',
+ expr: 'metric{test="a/b"}',
},
{
- query: 'super{foo="x/z"}',
+ refId: '2',
+ expr: 'super{foo="x/z"}',
},
],
};
@@ -126,14 +140,50 @@ describe('state functions', () => {
const parsed = parseUrlState(serialized);
// Account for datasource vs datasourceName
- const { datasource, ...rest } = parsed;
- const sameState = {
+ const { datasource, queries, ...rest } = parsed;
+ const resultState = {
...rest,
datasource: DEFAULT_EXPLORE_STATE.datasource,
datasourceName: datasource,
+ initialQueries: queries,
};
- expect(state).toMatchObject(sameState);
+ expect(state).toMatchObject(resultState);
});
});
});
+
+describe('updateHistory()', () => {
+ const datasourceId = 'myDatasource';
+ const key = `grafana.explore.history.${datasourceId}`;
+
+ beforeEach(() => {
+ clearHistory(datasourceId);
+ expect(store.exists(key)).toBeFalsy();
+ });
+
+ test('should save history item to localStorage', () => {
+ const expected = [
+ {
+ query: { refId: '1', expr: 'metric' },
+ },
+ ];
+ expect(updateHistory([], datasourceId, [{ refId: '1', expr: 'metric' }])).toMatchObject(expected);
+ expect(store.exists(key)).toBeTruthy();
+ expect(store.getObject(key)).toMatchObject(expected);
+ });
+});
+
+describe('hasNonEmptyQuery', () => {
+ test('should return true if one query is non-empty', () => {
+ expect(hasNonEmptyQuery([{ refId: '1', key: '2', expr: 'foo' }])).toBeTruthy();
+ });
+
+ test('should return false if query is empty', () => {
+ expect(hasNonEmptyQuery([{ refId: '1', key: '2' }])).toBeFalsy();
+ });
+
+ test('should return false if no queries exist', () => {
+ expect(hasNonEmptyQuery([])).toBeFalsy();
+ });
+});
diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts
index ecd11a495ad..9ecc36a192f 100644
--- a/public/app/core/utils/explore.ts
+++ b/public/app/core/utils/explore.ts
@@ -1,11 +1,20 @@
import { renderUrl } from 'app/core/utils/url';
-import { ExploreState, ExploreUrlState } from 'app/types/explore';
+import { ExploreState, ExploreUrlState, HistoryItem } from 'app/types/explore';
+import { DataQuery, RawTimeRange } from 'app/types/series';
+
+import kbn from 'app/core/utils/kbn';
+import colors from 'app/core/utils/colors';
+import TimeSeries from 'app/core/time_series2';
+import { parse as parseDate } from 'app/core/utils/datemath';
+import store from 'app/core/store';
export const DEFAULT_RANGE = {
from: 'now-6h',
to: 'now',
};
+const MAX_HISTORY_ITEMS = 100;
+
/**
* Returns an Explore-URL that contains a panel's queries and the dashboard time range.
*
@@ -23,7 +32,7 @@ export async function getExploreUrl(
timeSrv: any
) {
let exploreDatasource = panelDatasource;
- let exploreTargets = panelTargets;
+ let exploreTargets: DataQuery[] = panelTargets;
let url;
// Mixed datasources need to choose only one datasource
@@ -57,6 +66,8 @@ export async function getExploreUrl(
return url;
}
+const clearQueryKeys: ((query: DataQuery) => object) = ({ key, refId, ...rest }) => rest;
+
export function parseUrlState(initial: string | undefined): ExploreUrlState {
if (initial) {
try {
@@ -70,7 +81,7 @@ export function parseUrlState(initial: string | undefined): ExploreUrlState {
to: parsed[1],
};
const datasource = parsed[2];
- const queries = parsed.slice(3).map(query => ({ query }));
+ const queries = parsed.slice(3);
return { datasource, queries, range };
}
return parsed;
@@ -84,16 +95,97 @@ export function parseUrlState(initial: string | undefined): ExploreUrlState {
export function serializeStateToUrlParam(state: ExploreState, compact?: boolean): string {
const urlState: ExploreUrlState = {
datasource: state.datasourceName,
- queries: state.queries.map(q => ({ query: q.query })),
+ queries: state.initialQueries.map(clearQueryKeys),
range: state.range,
};
if (compact) {
- return JSON.stringify([
- urlState.range.from,
- urlState.range.to,
- urlState.datasource,
- ...urlState.queries.map(q => q.query),
- ]);
+ return JSON.stringify([urlState.range.from, urlState.range.to, urlState.datasource, ...urlState.queries]);
}
return JSON.stringify(urlState);
}
+
+export function generateKey(index = 0): string {
+ return `Q-${Date.now()}-${Math.random()}-${index}`;
+}
+
+export function generateRefId(index = 0): string {
+ return `${index + 1}`;
+}
+
+export function generateQueryKeys(index = 0): { refId: string; key: string } {
+ return { refId: generateRefId(index), key: generateKey(index) };
+}
+
+/**
+ * Ensure at least one target exists and that targets have the necessary keys
+ */
+export function ensureQueries(queries?: DataQuery[]): DataQuery[] {
+ if (queries && typeof queries === 'object' && queries.length > 0) {
+ return queries.map((query, i) => ({ ...query, ...generateQueryKeys(i) }));
+ }
+ return [{ ...generateQueryKeys() }];
+}
+
+/**
+ * A target is non-empty when it has keys other than refId and key.
+ */
+export function hasNonEmptyQuery(queries: DataQuery[]): boolean {
+ return queries.some(query => Object.keys(query).length > 2);
+}
+
+export function getIntervals(
+ range: RawTimeRange,
+ datasource,
+ resolution: number
+): { interval: string; intervalMs: number } {
+ if (!datasource || !resolution) {
+ return { interval: '1s', intervalMs: 1000 };
+ }
+ const absoluteRange: RawTimeRange = {
+ from: parseDate(range.from, false),
+ to: parseDate(range.to, true),
+ };
+ return kbn.calculateInterval(absoluteRange, resolution, datasource.interval);
+}
+
+export function makeTimeSeriesList(dataList) {
+ return dataList.map((seriesData, index) => {
+ const datapoints = seriesData.datapoints || [];
+ const alias = seriesData.target;
+ const colorIndex = index % colors.length;
+ const color = colors[colorIndex];
+
+ const series = new TimeSeries({
+ datapoints,
+ alias,
+ color,
+ unit: seriesData.unit,
+ });
+
+ return series;
+ });
+}
+
+/**
+ * Update the query history. Side-effect: store history in local storage
+ */
+export function updateHistory(history: HistoryItem[], datasourceId: string, queries: DataQuery[]): HistoryItem[] {
+ const ts = Date.now();
+ queries.forEach(query => {
+ history = [{ query, ts }, ...history];
+ });
+
+ if (history.length > MAX_HISTORY_ITEMS) {
+ history = history.slice(0, MAX_HISTORY_ITEMS);
+ }
+
+ // Combine all queries of a datasource type into one history
+ const historyKey = `grafana.explore.history.${datasourceId}`;
+ store.setObject(historyKey, history);
+ return history;
+}
+
+export function clearHistory(datasourceId: string) {
+ const historyKey = `grafana.explore.history.${datasourceId}`;
+ store.delete(historyKey);
+}
diff --git a/public/app/core/utils/rangeutil.ts b/public/app/core/utils/rangeutil.ts
index 484dd0e3327..2079aa39006 100644
--- a/public/app/core/utils/rangeutil.ts
+++ b/public/app/core/utils/rangeutil.ts
@@ -1,5 +1,8 @@
import _ from 'lodash';
import moment from 'moment';
+
+import { RawTimeRange } from 'app/types/series';
+
import * as dateMath from './datemath';
const spans = {
@@ -129,7 +132,7 @@ export function describeTextRange(expr: any) {
return opt;
}
-export function describeTimeRange(range) {
+export function describeTimeRange(range: RawTimeRange): string {
const option = rangeIndex[range.from.toString() + ' to ' + range.to.toString()];
if (option) {
return option.display;
diff --git a/public/app/features/alerting/AlertRuleList.tsx b/public/app/features/alerting/AlertRuleList.tsx
index d25fc659af5..f94134f3ee1 100644
--- a/public/app/features/alerting/AlertRuleList.tsx
+++ b/public/app/features/alerting/AlertRuleList.tsx
@@ -29,6 +29,7 @@ export class AlertRuleList extends PureComponent
-
-
- {
dashboard.on('view-mode-changed', this.onViewModeChanged.bind(this));
dashboard.on('row-collapsed', this.triggerForceUpdate.bind(this));
dashboard.on('row-expanded', this.triggerForceUpdate.bind(this));
- dashboard.on('panel-type-changed', this.triggerForceUpdate.bind(this));
}
buildLayout() {
@@ -176,7 +175,12 @@ export class DashboardGrid extends React.Component {
const panelClasses = classNames({ panel: true, 'panel--fullscreen': panel.fullscreen });
panelElements.push(
{
+export class DashboardPanel extends PureComponent {
element: any;
angularPanel: AngularComponent;
pluginInfo: any;
@@ -113,9 +114,8 @@ export class DashboardPanel extends React.Component {
renderReactPanel() {
const { pluginExports } = this.state;
- const containerClass = this.props.panel.isEditing ? 'panel-editor-container' : 'panel-height-helper';
- const panelWrapperClass = this.props.panel.isEditing ? 'panel-editor-container__panel' : 'panel-height-helper';
-
+ const containerClass = this.props.isEditing ? 'panel-editor-container' : 'panel-height-helper';
+ const panelWrapperClass = this.props.isEditing ? 'panel-editor-container__panel' : 'panel-height-helper';
// this might look strange with these classes that change when edit, but
// I want to try to keep markup (parents) for panel the same in edit mode to avoide unmount / new mount of panel
return (
diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
index 82b366d8126..f6fc9028726 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
@@ -5,7 +5,7 @@ import React, { ComponentClass, PureComponent } from 'react';
import { getTimeSrv } from '../time_srv';
// Components
-import { PanelHeader } from './PanelHeader';
+import { PanelHeader } from './PanelHeader/PanelHeader';
import { DataPanel } from './DataPanel';
// Types
@@ -21,6 +21,7 @@ export interface Props {
export interface State {
refreshCounter: number;
+ renderCounter: number;
timeRange?: TimeRange;
}
@@ -30,11 +31,13 @@ export class PanelChrome extends PureComponent {
this.state = {
refreshCounter: 0,
+ renderCounter: 0,
};
}
componentDidMount() {
this.props.panel.events.on('refresh', this.onRefresh);
+ this.props.panel.events.on('render', this.onRender);
this.props.dashboard.panelInitialized(this.props.panel);
}
@@ -46,10 +49,19 @@ export class PanelChrome extends PureComponent {
const timeSrv = getTimeSrv();
const timeRange = timeSrv.timeRange();
- this.setState({
+ this.setState(prevState => ({
+ ...prevState,
refreshCounter: this.state.refreshCounter + 1,
timeRange: timeRange,
- });
+ }));
+ };
+
+ onRender = () => {
+ console.log('onRender');
+ this.setState(prevState => ({
+ ...prevState,
+ renderCounter: this.state.renderCounter + 1,
+ }));
};
get isVisible() {
@@ -58,10 +70,12 @@ export class PanelChrome extends PureComponent {
render() {
const { panel, dashboard } = this.props;
+ const { refreshCounter, timeRange, renderCounter } = this.state;
+
const { datasource, targets } = panel;
- const { refreshCounter, timeRange } = this.state;
const PanelComponent = this.props.component;
+ console.log('panelChrome render');
return (
{
refreshCounter={refreshCounter}
>
{({ loading, timeSeries }) => {
- return
diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
index 26ac8b7d2c1..371ed22fff7 100644
--- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
@@ -1,12 +1,15 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
import classNames from 'classnames';
+
+import { QueriesTab } from './QueriesTab';
+import { VizTypePicker } from './VizTypePicker';
+
+import { store } from 'app/store/configureStore';
+import { updateLocation } from 'app/core/actions';
+
import { PanelModel } from '../panel_model';
import { DashboardModel } from '../dashboard_model';
-import { store } from 'app/store/configureStore';
-import { QueriesTab } from './QueriesTab';
import { PanelPlugin, PluginExports } from 'app/types/plugins';
-import { VizTypePicker } from './VizTypePicker';
-import { updateLocation } from 'app/core/actions';
interface PanelEditorProps {
panel: PanelModel;
@@ -22,7 +25,7 @@ interface PanelEditorTab {
icon: string;
}
-export class PanelEditor extends React.Component {
+export class PanelEditor extends PureComponent {
tabs: PanelEditorTab[];
constructor(props) {
@@ -39,16 +42,21 @@ export class PanelEditor extends React.Component {
}
renderPanelOptions() {
- const { pluginExports } = this.props;
+ const { pluginExports, panel } = this.props;
- if (pluginExports.PanelOptions) {
- const PanelOptions = pluginExports.PanelOptions;
- return
-
`;
diff --git a/public/app/features/api-keys/state/selectors.ts b/public/app/features/api-keys/state/selectors.ts
index 8065c252e85..789237ae9a3 100644
--- a/public/app/features/api-keys/state/selectors.ts
+++ b/public/app/features/api-keys/state/selectors.ts
@@ -1,5 +1,7 @@
import { ApiKeysState } from 'app/types';
+export const getApiKeysCount = (state: ApiKeysState) => state.keys.length;
+
export const getApiKeys = (state: ApiKeysState) => {
const regex = RegExp(state.searchQuery, 'i');
diff --git a/public/app/features/dashboard/dashboard_ctrl.ts b/public/app/features/dashboard/dashboard_ctrl.ts
index 5871a579f3c..6611a728803 100644
--- a/public/app/features/dashboard/dashboard_ctrl.ts
+++ b/public/app/features/dashboard/dashboard_ctrl.ts
@@ -2,13 +2,13 @@
import config from 'app/core/config';
import appEvents from 'app/core/app_events';
import coreModule from 'app/core/core_module';
+import { removePanel } from 'app/features/dashboard/utils/panel';
// Services
import { AnnotationsSrv } from '../annotations/annotations_srv';
// Types
import { DashboardModel } from './dashboard_model';
-import { PanelModel } from './panel_model';
export class DashboardCtrl {
dashboard: DashboardModel;
@@ -19,7 +19,6 @@ export class DashboardCtrl {
/** @ngInject */
constructor(
private $scope,
- private $rootScope,
private keybindingSrv,
private timeSrv,
private variableSrv,
@@ -112,12 +111,14 @@ export class DashboardCtrl {
}
showJsonEditor(evt, options) {
- const editScope = this.$rootScope.$new();
- editScope.object = options.object;
- editScope.updateHandler = options.updateHandler;
+ const model = {
+ object: options.object,
+ updateHandler: options.updateHandler,
+ };
+
this.$scope.appEvent('show-dash-editor', {
src: 'public/app/partials/edit_json.html',
- scope: editScope,
+ model: model,
});
}
@@ -136,34 +137,7 @@ export class DashboardCtrl {
}
const panelInfo = this.dashboard.getPanelInfoById(options.panelId);
- this.removePanel(panelInfo.panel, true);
- }
-
- removePanel(panel: PanelModel, ask: boolean) {
- // confirm deletion
- if (ask !== false) {
- let text2, confirmText;
-
- if (panel.alert) {
- text2 = 'Panel includes an alert rule, removing panel will also remove alert rule';
- confirmText = 'YES';
- }
-
- this.$scope.appEvent('confirm-modal', {
- title: 'Remove Panel',
- text: 'Are you sure you want to remove this panel?',
- text2: text2,
- icon: 'fa-trash',
- confirmText: confirmText,
- yesText: 'Remove',
- onConfirm: () => {
- this.removePanel(panel, false);
- },
- });
- return;
- }
-
- this.dashboard.removePanel(panel);
+ removePanel(this.dashboard, panelInfo.panel, true);
}
onDestroy() {
diff --git a/public/app/features/dashboard/dashboard_model.ts b/public/app/features/dashboard/dashboard_model.ts
index 65a234a2b94..3320783ec67 100644
--- a/public/app/features/dashboard/dashboard_model.ts
+++ b/public/app/features/dashboard/dashboard_model.ts
@@ -232,11 +232,6 @@ export class DashboardModel {
return this.meta.fullscreen && !panel.fullscreen;
}
- changePanelType(panel: PanelModel, pluginId: string) {
- panel.changeType(pluginId);
- this.events.emit('panel-type-changed', panel);
- }
-
private ensureListExist(data) {
if (!data) {
data = {};
diff --git a/public/app/features/dashboard/dashboard_srv.ts b/public/app/features/dashboard/dashboard_srv.ts
index b1419df7376..d5695a577c5 100644
--- a/public/app/features/dashboard/dashboard_srv.ts
+++ b/public/app/features/dashboard/dashboard_srv.ts
@@ -77,6 +77,10 @@ export class DashboardSrv {
postSave(clone, data) {
this.dash.version = data.version;
+ // important that these happens before location redirect below
+ this.$rootScope.appEvent('dashboard-saved', this.dash);
+ this.$rootScope.appEvent('alert-success', ['Dashboard saved']);
+
const newUrl = locationUtil.stripBaseFromUrl(data.url);
const currentPath = this.$location.path();
@@ -84,9 +88,6 @@ export class DashboardSrv {
this.$location.url(newUrl).replace();
}
- this.$rootScope.appEvent('dashboard-saved', this.dash);
- this.$rootScope.appEvent('alert-success', ['Dashboard saved']);
-
return this.dash;
}
diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
index fe55e64634f..12b4809f51a 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
@@ -83,7 +83,6 @@ export class DashboardGrid extends React.Component
- {{ctrl.error}}
-
+
+
-
+
+
+ {{ctrl.error}}
+
-
-
+ Alert Config
-
- Name
-
- Evaluate every
-
-
-
+
- Alert Config
+
+ Name
+
+
+
+
+
+ Evaluate every
+
+
+
+
+
+
+ If an alert rule has a configured For and the query violates the configured threshold it will first go from OK to Pending.
+ Going from OK to Pending Grafana will not send any notifications. Once the alert rule has been firing for more than For duration, it will change to Alerting and send alert notifications.
+
+
+
-
- Conditions
-
-
+
-
-
-
-
- OF
-
-
-
-
-
-
-
-
-
-
-
+
+ Conditions
+
+
-
+
+
+
+
+ OF
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
-
-
- If no data or all values are null
- SET STATE TO
-
+
-
-
-
+
+
+
+ If no data or all values are null
+ SET STATE TO
+
-
+
+
+
- If execution error or timeout
- SET STATE TO
-
+
-
-
-
+ If execution error or timeout
+ SET STATE TO
+
-
-
+
+
+
- Evaluating rule
-
+
+ Evaluating rule
+
-
-
-
+
+
-
+ Notifications
-
-
-
- Send to
-
- {{nc.name}}
-
-
-
-
- Message
-
-
-
+
- Notifications
+
+
+
+ Send to
+
+ {{nc.name}}
+
+
+
+
+ Message
+
+
+
-
-
+
+ );
+ }
+
+ renderApiKeyList() {
+ const { isAdding } = this.state;
+ const { apiKeys, searchQuery } = this.props;
+
+ return (
+
-
@@ -406,9 +127,6 @@ exports[`Render should render component 1`] = `
-
- State history (last 50 state changes) -
+
+
+
+ );
+ }
+
+ renderAddApiKeyForm() {
+ const { newApiKey, isAdding } = this.state;
+
+ return (
+ + State history (last 50 state changes) +
-
-
- No state changes recorded -
+ - No state changes recorded -
+
+ No state changes recorded +
+ No state changes recorded +
-
diff --git a/public/app/features/alerting/state/alertDef.ts b/public/app/features/alerting/state/alertDef.ts
index 11d2aafaa7f..8e50697d33c 100644
--- a/public/app/features/alerting/state/alertDef.ts
+++ b/public/app/features/alerting/state/alertDef.ts
@@ -8,9 +8,9 @@ const alertQueryDef = new QueryPartDef({
{
name: 'from',
type: 'string',
- options: ['1s', '10s', '1m', '5m', '10m', '15m', '1h', '24h', '48h'],
+ options: ['10s', '1m', '5m', '10m', '15m', '1h', '24h', '48h'],
},
- { name: 'to', type: 'string', options: ['now'] },
+ { name: 'to', type: 'string', options: ['now', 'now-1m', 'now-5m', 'now-10m', 'now-1h'] },
],
defaultParams: ['#A', '15m', 'now', 'avg'],
});
@@ -99,6 +99,13 @@ function getStateDisplayModel(state) {
stateClass: 'alert-state-warning',
};
}
+ case 'unknown': {
+ return {
+ text: 'UNKNOWN',
+ iconClass: 'fa fa-question',
+ stateClass: 'alert-state-paused',
+ };
+ }
}
throw { message: 'Unknown alert state' };
diff --git a/public/app/features/all.ts b/public/app/features/all.ts
index 7f6f84b7676..b1283fdfd3e 100644
--- a/public/app/features/all.ts
+++ b/public/app/features/all.ts
@@ -9,3 +9,5 @@ import './admin';
import './alerting/NotificationsEditCtrl';
import './alerting/NotificationsListCtrl';
import './manage-dashboards';
+import './teams/CreateTeamCtrl';
+import './profile/all';
diff --git a/public/app/features/annotations/annotation_tooltip.ts b/public/app/features/annotations/annotation_tooltip.ts
index 16c18005204..fbe85856f31 100644
--- a/public/app/features/annotations/annotation_tooltip.ts
+++ b/public/app/features/annotations/annotation_tooltip.ts
@@ -32,7 +32,7 @@ export function annotationTooltipDirective($sanitize, dashboardSrv, contextSrv,
if (event.alertId) {
const stateModel = alertDef.getStateDisplayModel(event.newState);
titleStateClass = stateModel.stateClass;
- title = ` ${stateModel.text}`;
+ title = ` ${stateModel.text}`;
text = alertDef.getAlertAnnotationInfo(event);
if (event.text) {
text = text + '
' + event.text; diff --git a/public/app/features/annotations/event_manager.ts b/public/app/features/annotations/event_manager.ts index ef74ca193d4..db748e639a1 100644 --- a/public/app/features/annotations/event_manager.ts +++ b/public/app/features/annotations/event_manager.ts @@ -7,6 +7,7 @@ import { OK_COLOR, ALERTING_COLOR, NO_DATA_COLOR, + PENDING_COLOR, DEFAULT_ANNOTATION_COLOR, REGION_FILL_ALPHA, } from 'app/core/utils/colors'; @@ -71,6 +72,11 @@ export class EventManager { position: 'BOTTOM', markerSize: 5, }, + $__pending: { + color: PENDING_COLOR, + position: 'BOTTOM', + markerSize: 5, + }, $__editing: { color: DEFAULT_ANNOTATION_COLOR, position: 'BOTTOM', diff --git a/public/app/features/api-keys/ApiKeysPage.test.tsx b/public/app/features/api-keys/ApiKeysPage.test.tsx index 8bc6e9338fc..54200234ddc 100644 --- a/public/app/features/api-keys/ApiKeysPage.test.tsx +++ b/public/app/features/api-keys/ApiKeysPage.test.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React from 'react'; import { shallow } from 'enzyme'; import { Props, ApiKeysPage } from './ApiKeysPage'; import { NavModel, ApiKey } from 'app/types'; @@ -14,6 +14,7 @@ const setup = (propOverrides?: object) => { deleteApiKey: jest.fn(), setSearchQuery: jest.fn(), addApiKey: jest.fn(), + apiKeysCount: 0, }; Object.assign(props, propOverrides); @@ -28,14 +29,19 @@ const setup = (propOverrides?: object) => { }; describe('Render', () => { - it('should render component', () => { - const { wrapper } = setup(); + it('should render API keys table if there are any keys', () => { + const { wrapper } = setup({ + apiKeys: getMultipleMockKeys(5), + apiKeysCount: 5, + }); + expect(wrapper).toMatchSnapshot(); }); - it('should render API keys table', () => { + it('should render CTA if there are no API keys', () => { const { wrapper } = setup({ - apiKeys: getMultipleMockKeys(5), + apiKeys: getMultipleMockKeys(0), + apiKeysCount: 0, hasFetched: true, }); diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx index 6052b0f4fc8..d2aa1f24c57 100644 --- a/public/app/features/api-keys/ApiKeysPage.tsx +++ b/public/app/features/api-keys/ApiKeysPage.tsx @@ -1,17 +1,19 @@ -import React, { PureComponent } from 'react'; +import React, { PureComponent } from 'react'; import ReactDOMServer from 'react-dom/server'; import { connect } from 'react-redux'; import { hot } from 'react-hot-loader'; import { NavModel, ApiKey, NewApiKey, OrgRole } from 'app/types'; import { getNavModel } from 'app/core/selectors/navModel'; -import { getApiKeys } from './state/selectors'; +import { getApiKeys, getApiKeysCount } from './state/selectors'; import { loadApiKeys, deleteApiKey, setSearchQuery, addApiKey } from './state/actions'; import PageHeader from 'app/core/components/PageHeader/PageHeader'; -import SlideDown from 'app/core/components/Animations/SlideDown'; import PageLoader from 'app/core/components/PageLoader/PageLoader'; +import SlideDown from 'app/core/components/Animations/SlideDown'; import ApiKeysAddedModal from './ApiKeysAddedModal'; import config from 'app/core/config'; import appEvents from 'app/core/app_events'; +import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA'; +import DeleteButton from 'app/core/components/DeleteButton/DeleteButton'; export interface Props { navModel: NavModel; @@ -22,6 +24,7 @@ export interface Props { deleteApiKey: typeof deleteApiKey; setSearchQuery: typeof setSearchQuery; addApiKey: typeof addApiKey; + apiKeysCount: number; } export interface State { @@ -82,6 +85,7 @@ export class ApiKeysPage extends PureComponent- Existing Keys -
, -- -
, - ]; + {this.renderAddApiKeyForm()} +- - - {apiKeys.length > 0 && ( - - {apiKeys.map(key => { - return ( -Name -Role -- - - ); - })} - + renderEmptyList() { + const { isAdding } = this.state; + return ( +{key.name} -{key.role} -- this.onDeleteApiKey(key)} className="btn btn-danger btn-mini"> - - - -+ {!isAdding && ( +)} -
+
+
+ Add API Key
+ +
+
+
+
+
+ );
}
render() {
- const { newApiKey, isAdding } = this.state;
- const { hasFetched, navModel, searchQuery } = this.props;
+ const { hasFetched, navModel, apiKeysCount } = this.props;
return (
+
+
+ {this.renderAddApiKeyForm()}
+
+
+
+
+
+
+
+ Existing Keys
+| Name | +Role | ++ |
|---|---|---|
| {key.name} | +{key.role} | +
+ |
+
-
-
- {hasFetched ? this.renderTable() :
+ {hasFetched ? (
+ apiKeysCount > 0 ? (
+ this.renderApiKeyList()
+ ) : (
+ this.renderEmptyList()
+ )
+ ) : (
+
-
-
-
-
-
-
-
-
-
-
-
- Add API Key
- -
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
- - Add API Key -
- -- Existing Keys -
-| - Name - | -- Role - | -- |
|---|---|---|
| - test-1 - | -- Viewer - | -- - - - | -
| - test-2 - | -- Viewer - | -- - - - | -
| - test-3 - | -- Viewer - | -- - - - | -
| - test-4 - | -- Viewer - | -- - - - | -
| - test-5 - | -- Viewer - | -- - - - | -
-
+
-
-
-
-
-
-
);
}
diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
index 7dd8a06996d..6853ade474b 100644
--- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
import config from 'app/core/config';
import { PanelModel } from '../panel_model';
import { DashboardModel } from '../dashboard_model';
@@ -11,16 +11,17 @@ import { PanelChrome } from './PanelChrome';
import { PanelEditor } from './PanelEditor';
export interface Props {
- panelType: string;
panel: PanelModel;
dashboard: DashboardModel;
+ isEditing: boolean;
+ isFullscreen: boolean;
}
export interface State {
pluginExports: PluginExports;
}
-export class DashboardPanel extends React.ComponentVisualization has no options
; } } + onPanelOptionsChanged = (options: any) => { + this.props.panel.updateOptions(options); + this.forceUpdate(); + }; + renderVizTab() { return (
@@ -70,6 +78,7 @@ export class PanelEditor extends React.Component {
partial: true,
})
);
+ this.forceUpdate();
};
render() {
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader.tsx
deleted file mode 100644
index 12d5cd37253..00000000000
--- a/public/app/features/dashboard/dashgrid/PanelHeader.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { PanelModel } from '../panel_model';
-import { DashboardModel } from '../dashboard_model';
-import { store } from 'app/store/configureStore';
-import { updateLocation } from 'app/core/actions';
-
-interface PanelHeaderProps {
- panel: PanelModel;
- dashboard: DashboardModel;
-}
-
-export class PanelHeader extends React.Component {
- onEditPanel = () => {
- store.dispatch(
- updateLocation({
- query: {
- panelId: this.props.panel.id,
- edit: true,
- fullscreen: true,
- },
- })
- );
- };
-
- onViewPanel = () => {
- store.dispatch(
- updateLocation({
- query: {
- panelId: this.props.panel.id,
- edit: false,
- fullscreen: true,
- },
- })
- );
- };
-
- render() {
- const isFullscreen = false;
- const isLoading = false;
- const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
-
- return (
- {
+ render() {
+ const isFullscreen = false;
+ const isLoading = false;
+ const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
+ const { panel, dashboard } = this.props;
+
+ return (
+ {
+ renderItems = (menu: PanelMenuItem[], isSubMenu = false) => {
+ return (
+ = props => {
+ const isSubMenu = props.type === 'submenu';
+ const isDivider = props.type === 'divider';
+ return isDivider ? (
+
+ ) : (
+
+
+ {props.iconClassName && }
+ {props.text}
+ {props.shortcut && {props.shortcut}}
+
+ {props.children}
+
+ );
+};
diff --git a/public/app/features/dashboard/export/export_modal.html b/public/app/features/dashboard/export/export_modal.html
index 0598c612fd6..3c14c4b184d 100644
--- a/public/app/features/dashboard/export/export_modal.html
+++ b/public/app/features/dashboard/export/export_modal.html
@@ -1,25 +1,21 @@
-
-
-
-
-
-
@@ -32,7 +34,7 @@
@@ -51,7 +53,7 @@
-
-
-
-
-
- {isLoading && (
-
-
-
- )}
-
-
-
- );
- }
-}
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
new file mode 100644
index 00000000000..ab3081ba21e
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -0,0 +1,51 @@
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+
+import { PanelHeaderMenu } from './PanelHeaderMenu';
+
+import { DashboardModel } from 'app/features/dashboard/dashboard_model';
+import { PanelModel } from 'app/features/dashboard/panel_model';
+
+export interface Props {
+ panel: PanelModel;
+ dashboard: DashboardModel;
+}
+
+export class PanelHeader extends PureComponent
+
+
+
+
+
+ {isLoading && (
+
+
+
+ )}
+
+
+ );
+ }
+}
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx
new file mode 100644
index 00000000000..8eb6b31bf27
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx
@@ -0,0 +1,40 @@
+import React, { PureComponent } from 'react';
+import { DashboardModel } from 'app/features/dashboard/dashboard_model';
+import { PanelModel } from 'app/features/dashboard/panel_model';
+import { PanelHeaderMenuItem } from './PanelHeaderMenuItem';
+import { getPanelMenu } from 'app/features/dashboard/utils/getPanelMenu';
+import { PanelMenuItem } from 'app/types/panel';
+
+export interface Props {
+ panel: PanelModel;
+ dashboard: DashboardModel;
+}
+
+export class PanelHeaderMenu extends PureComponent
+
+
+
+
+ {panel.title}
+
+
+
+ -
+ {menu.map((menuItem, idx: number) => {
+ return (
+
{this.renderItems(menu)}
;
+ }
+}
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
new file mode 100644
index 00000000000..92a64a2f24d
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
@@ -0,0 +1,23 @@
+import React, { SFC } from 'react';
+import { PanelMenuItem } from 'app/types/panel';
+
+interface Props {
+ children: any;
+}
+
+export const PanelHeaderMenuItem: SFC| - {{variable.query}} + {{variable.definition ? variable.definition : variable.query}} | @@ -77,7 +79,8 @@ |
-
+
| + {LEGEND_STATS.map( + statName => + seriesValuesProps[statName] && ( + |
|---|
+ {seriesLabel}
+ {valueItems}
+
+ );
+ }
+ }
+}
+
+interface LegendSeriesLabelProps {
+ label: string;
+ color: string;
+ yaxis?: number;
+ onLabelClick?: (event) => void;
+}
+
+class LegendSeriesLabel extends PureComponent{value}
;
+}
diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts
index 7a8e24539f7..ff248d68201 100755
--- a/public/app/plugins/panel/graph/graph.ts
+++ b/public/app/plugins/panel/graph/graph.ts
@@ -16,10 +16,14 @@ import { tickStep } from 'app/core/utils/ticks';
import { appEvents, coreModule, updateLegendValues } from 'app/core/core';
import GraphTooltip from './graph_tooltip';
import { ThresholdManager } from './threshold_manager';
+import { TimeRegionManager } from './time_region_manager';
import { EventManager } from 'app/features/annotations/all';
import { convertToHistogramData } from './histogram';
import { alignYLevel } from './align_yaxes';
import config from 'app/core/config';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Legend, GraphLegendProps } from './Legend/Legend';
import { GraphCtrl } from './module';
@@ -35,6 +39,8 @@ class GraphElement {
panelWidth: number;
eventManager: EventManager;
thresholdManager: ThresholdManager;
+ timeRegionManager: TimeRegionManager;
+ legendElem: HTMLElement;
constructor(private scope, private elem, private timeSrv) {
this.ctrl = scope.ctrl;
@@ -45,31 +51,25 @@ class GraphElement {
this.panelWidth = 0;
this.eventManager = new EventManager(this.ctrl);
this.thresholdManager = new ThresholdManager(this.ctrl);
+ this.timeRegionManager = new TimeRegionManager(this.ctrl);
this.tooltip = new GraphTooltip(this.elem, this.ctrl.dashboard, this.scope, () => {
return this.sortedSeries;
});
// panel events
- this.ctrl.events.on('panel-teardown', this.onPanelteardown.bind(this));
-
- /**
- * Split graph rendering into two parts.
- * First, calculate series stats in buildFlotPairs() function. Then legend rendering started
- * (see ctrl.events.on('render') in legend.ts).
- * When legend is rendered it emits 'legend-rendering-complete' and graph rendered.
- */
+ this.ctrl.events.on('panel-teardown', this.onPanelTeardown.bind(this));
this.ctrl.events.on('render', this.onRender.bind(this));
- this.ctrl.events.on('legend-rendering-complete', this.onLegendRenderingComplete.bind(this));
// global events
appEvents.on('graph-hover', this.onGraphHover.bind(this), scope);
-
appEvents.on('graph-hover-clear', this.onGraphHoverClear.bind(this), scope);
-
this.elem.bind('plotselected', this.onPlotSelected.bind(this));
-
this.elem.bind('plotclick', this.onPlotClick.bind(this));
- scope.$on('$destroy', this.onScopeDestroy.bind(this));
+
+ // get graph legend element
+ if (this.elem && this.elem.parent) {
+ this.legendElem = this.elem.parent().find('.graph-legend')[0];
+ }
}
onRender(renderData) {
@@ -77,12 +77,37 @@ class GraphElement {
if (!this.data) {
return;
}
+
this.annotations = this.ctrl.annotations || [];
this.buildFlotPairs(this.data);
const graphHeight = this.elem.height();
updateLegendValues(this.data, this.panel, graphHeight);
- this.ctrl.events.emit('render-legend');
+ if (!this.panel.legend.show) {
+ if (this.legendElem.hasChildNodes()) {
+ ReactDOM.unmountComponentAtNode(this.legendElem);
+ }
+ this.renderPanel();
+ return;
+ }
+
+ const { values, min, max, avg, current, total } = this.panel.legend;
+ const { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero } = this.panel.legend;
+ const legendOptions = { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero };
+ const valueOptions = { values, min, max, avg, current, total };
+ const legendProps: GraphLegendProps = {
+ seriesList: this.data,
+ hiddenSeries: this.ctrl.hiddenSeries,
+ ...legendOptions,
+ ...valueOptions,
+ onToggleSeries: this.ctrl.onToggleSeries,
+ onToggleSort: this.ctrl.onToggleSort,
+ onColorChange: this.ctrl.onColorChange,
+ onToggleAxis: this.ctrl.onToggleAxis,
+ };
+
+ const legendReactElem = React.createElement(Legend, legendProps);
+ ReactDOM.render(legendReactElem, this.legendElem, () => this.renderPanel());
}
onGraphHover(evt) {
@@ -99,17 +124,20 @@ class GraphElement {
this.tooltip.show(evt.pos);
}
- onPanelteardown() {
+ onPanelTeardown() {
this.thresholdManager = null;
+ this.timeRegionManager = null;
if (this.plot) {
this.plot.destroy();
this.plot = null;
}
- }
- onLegendRenderingComplete() {
- this.render_panel();
+ this.tooltip.destroy();
+ this.elem.off();
+ this.elem.remove();
+
+ ReactDOM.unmountComponentAtNode(this.legendElem);
}
onGraphHoverClear(event, info) {
@@ -157,12 +185,6 @@ class GraphElement {
}
}
- onScopeDestroy() {
- this.tooltip.destroy();
- this.elem.off();
- this.elem.remove();
- }
-
shouldAbortRender() {
if (!this.data) {
return true;
@@ -195,6 +217,7 @@ class GraphElement {
}
this.thresholdManager.draw(plot);
+ this.timeRegionManager.draw(plot);
}
processOffsetHook(plot, gridMargin) {
@@ -256,7 +279,7 @@ class GraphElement {
}
// Function for rendering panel
- render_panel() {
+ renderPanel() {
this.panelWidth = this.elem.width();
if (this.shouldAbortRender()) {
return;
@@ -273,6 +296,7 @@ class GraphElement {
this.prepareXAxis(options, this.panel);
this.configureYAxisOptions(this.data, options);
this.thresholdManager.addFlotOptions(options, this.panel);
+ this.timeRegionManager.addFlotOptions(options, this.panel);
this.eventManager.addFlotEvents(this.annotations, options);
this.sortedSeries = this.sortSeries(this.data, this.panel);
diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts
deleted file mode 100644
index db4dfdefa1c..00000000000
--- a/public/app/plugins/panel/graph/legend.ts
+++ /dev/null
@@ -1,306 +0,0 @@
-import _ from 'lodash';
-import $ from 'jquery';
-import baron from 'baron';
-import coreModule from 'app/core/core_module';
-
-/** @ngInject */
-function graphLegendDirective(popoverSrv, $timeout) {
- return {
- link: (scope, elem) => {
- let firstRender = true;
- const ctrl = scope.ctrl;
- const panel = ctrl.panel;
- let data;
- let seriesList;
- let i;
- let legendScrollbar;
- const legendRightDefaultWidth = 10;
- const legendElem = elem.parent();
-
- scope.$on('$destroy', () => {
- destroyScrollbar();
- });
-
- ctrl.events.on('render-legend', () => {
- data = ctrl.seriesList;
- if (data) {
- render();
- }
- ctrl.events.emit('legend-rendering-complete');
- });
-
- function getSeriesIndexForElement(el) {
- return el.parents('[data-series-index]').data('series-index');
- }
-
- function openColorSelector(e) {
- // if we clicked inside poup container ignore click
- if ($(e.target).parents('.popover').length) {
- return;
- }
-
- const el = $(e.currentTarget).find('.fa-minus');
- const index = getSeriesIndexForElement(el);
- const series = seriesList[index];
-
- $timeout(() => {
- popoverSrv.show({
- element: el[0],
- position: 'bottom left',
- targetAttachment: 'top left',
- template:
- '';
- html += '';
-
- html +=
- '' + series.aliasEscaped + '';
-
- if (panel.legend.values) {
- const avg = series.formatValue(series.stats.avg);
- const current = series.formatValue(series.stats.current);
- const min = series.formatValue(series.stats.min);
- const max = series.formatValue(series.stats.max);
- const total = series.formatValue(series.stats.total);
-
- if (panel.legend.min) {
- html += '
';
- seriesElements.push($(html));
- }
- return seriesElements;
- }
-
- function renderLegendElement(tableHeaderElem) {
- const legendWidth = elem.width();
-
- const seriesElements = renderSeriesLegendElements();
-
- if (panel.legend.alignAsTable) {
- const tbodyElem = $('');
- tbodyElem.append(tableHeaderElem);
- tbodyElem.append(seriesElements);
- elem.append(tbodyElem);
- tbodyElem.wrap('');
- } else {
- elem.append('');
- elem.find('.graph-legend-scroll').append(seriesElements);
- }
-
- if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== legendRightDefaultWidth)) {
- addScrollbar();
- } else {
- destroyScrollbar();
- }
- }
-
- function addScrollbar() {
- const scrollRootClass = 'baron baron__root';
- const scrollerClass = 'baron__scroller';
- const scrollBarHTML = `
-
- `;
-
- const scrollRoot = elem;
- const scroller = elem.find('.graph-legend-scroll');
-
- // clear existing scroll bar track to prevent duplication
- scrollRoot.find('.baron__track').remove();
-
- scrollRoot.addClass(scrollRootClass);
- $(scrollBarHTML).appendTo(scrollRoot);
- scroller.addClass(scrollerClass);
-
- const scrollbarParams = {
- root: scrollRoot[0],
- scroller: scroller[0],
- bar: '.baron__bar',
- track: '.baron__track',
- barOnCls: '_scrollbar',
- scrollingCls: '_scrolling',
- };
-
- if (!legendScrollbar) {
- legendScrollbar = baron(scrollbarParams);
- } else {
- destroyScrollbar();
- legendScrollbar = baron(scrollbarParams);
- }
-
- // #11830 - compensates for Firefox scrollbar calculation error in the baron framework
- scroller[0].style.marginRight = '-' + (scroller[0].offsetWidth - scroller[0].clientWidth) + 'px';
-
- legendScrollbar.scroll();
- }
-
- function destroyScrollbar() {
- if (legendScrollbar) {
- legendScrollbar.dispose();
- legendScrollbar = undefined;
- }
- }
- },
- };
-}
-
-coreModule.directive('graphLegend', graphLegendDirective);
diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts
index 5878473b4e6..8f63765c66d 100644
--- a/public/app/plugins/panel/graph/module.ts
+++ b/public/app/plugins/panel/graph/module.ts
@@ -1,7 +1,7 @@
import './graph';
-import './legend';
import './series_overrides_ctrl';
import './thresholds_form';
+import './time_regions_form';
import template from './template';
import _ from 'lodash';
@@ -112,6 +112,7 @@ class GraphCtrl extends MetricsPanelCtrl {
// other style overrides
seriesOverrides: [],
thresholds: [],
+ timeRegions: [],
};
/** @ngInject */
@@ -134,9 +135,9 @@ class GraphCtrl extends MetricsPanelCtrl {
}
onInitEditMode() {
- this.addEditorTab('Display', 'public/app/plugins/panel/graph/tab_display.html', 4);
this.addEditorTab('Axes', axesEditorComponent, 2);
this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html', 3);
+ this.addEditorTab('Display', 'public/app/plugins/panel/graph/tab_display.html', 4);
if (config.alertingEnabled) {
this.addEditorTab('Alert', alertTab, 5);
@@ -244,67 +245,32 @@ class GraphCtrl extends MetricsPanelCtrl {
}
}
- changeSeriesColor(series, color) {
+ onColorChange = (series, color) => {
series.setColor(color);
this.panel.aliasColors[series.alias] = series.color;
this.render();
- }
+ };
- toggleSeries(serie, event) {
- if (event.ctrlKey || event.metaKey || event.shiftKey) {
- if (this.hiddenSeries[serie.alias]) {
- delete this.hiddenSeries[serie.alias];
- } else {
- this.hiddenSeries[serie.alias] = true;
- }
- } else {
- this.toggleSeriesExclusiveMode(serie);
- }
+ onToggleSeries = hiddenSeries => {
+ this.hiddenSeries = hiddenSeries;
this.render();
- }
+ };
- toggleSeriesExclusiveMode(serie) {
- const hidden = this.hiddenSeries;
+ onToggleSort = (sortBy, sortDesc) => {
+ this.panel.legend.sort = sortBy;
+ this.panel.legend.sortDesc = sortDesc;
+ this.render();
+ };
- if (hidden[serie.alias]) {
- delete hidden[serie.alias];
- }
-
- // check if every other series is hidden
- const alreadyExclusive = _.every(this.seriesList, value => {
- if (value.alias === serie.alias) {
- return true;
- }
-
- return hidden[value.alias];
- });
-
- if (alreadyExclusive) {
- // remove all hidden series
- _.each(this.seriesList, value => {
- delete this.hiddenSeries[value.alias];
- });
- } else {
- // hide all but this serie
- _.each(this.seriesList, value => {
- if (value.alias === serie.alias) {
- return;
- }
-
- this.hiddenSeries[value.alias] = true;
- });
- }
- }
-
- toggleAxis(info) {
+ onToggleAxis = info => {
let override = _.find(this.panel.seriesOverrides, { alias: info.alias });
if (!override) {
override = { alias: info.alias };
this.panel.seriesOverrides.push(override);
}
- info.yaxis = override.yaxis = info.yaxis === 2 ? 1 : 2;
+ override.yaxis = info.yaxis;
this.render();
- }
+ };
addSeriesOverride(override) {
this.panel.seriesOverrides.push(override || {});
diff --git a/public/app/plugins/panel/graph/series_overrides_ctrl.ts b/public/app/plugins/panel/graph/series_overrides_ctrl.ts
index 540d19fb47a..934fd835347 100644
--- a/public/app/plugins/panel/graph/series_overrides_ctrl.ts
+++ b/public/app/plugins/panel/graph/series_overrides_ctrl.ts
@@ -53,7 +53,7 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) {
element: $element.find('.dropdown')[0],
position: 'top center',
openOn: 'click',
- template: '' + min + '
';
- }
- if (panel.legend.max) {
- html += '' + max + '
';
- }
- if (panel.legend.avg) {
- html += '' + avg + '
';
- }
- if (panel.legend.current) {
- html += '' + current + '
';
- }
- if (panel.legend.total) {
- html += '' + total + '
';
- }
- }
-
- html += '
+
+
+
\ No newline at end of file
diff --git a/public/app/plugins/panel/graph/thresholds_form.ts b/public/app/plugins/panel/graph/thresholds_form.ts
index 5f1edb8aa9a..4f480873d5b 100644
--- a/public/app/plugins/panel/graph/thresholds_form.ts
+++ b/public/app/plugins/panel/graph/thresholds_form.ts
@@ -58,90 +58,10 @@ export class ThresholdFormCtrl {
}
}
-const template = `
-Thresholds
+
+ Visual thresholds options disabled.
+ Visit the Alert tab update your thresholds.
+ To re-enable thresholds, the alert rule must be deleted from this panel.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-`;
-
coreModule.directive('graphThresholdForm', () => {
return {
restrict: 'E',
- template: template,
+ templateUrl: 'public/app/plugins/panel/graph/thresholds_form.html',
controller: ThresholdFormCtrl,
bindToController: true,
controllerAs: 'ctrl',
diff --git a/public/app/plugins/panel/graph/time_region_manager.ts b/public/app/plugins/panel/graph/time_region_manager.ts
new file mode 100644
index 00000000000..95987e40dbe
--- /dev/null
+++ b/public/app/plugins/panel/graph/time_region_manager.ts
@@ -0,0 +1,248 @@
+import 'vendor/flot/jquery.flot';
+import _ from 'lodash';
+import moment from 'moment';
+import config from 'app/core/config';
+
+export const colorModes = {
+ gray: {
+ themeDependent: true,
+ title: 'Gray',
+ darkColor: { fill: 'rgba(255, 255, 255, 0.09)', line: 'rgba(255, 255, 255, 0.2)' },
+ lightColor: { fill: 'rgba(0, 0, 0, 0.09)', line: 'rgba(0, 0, 0, 0.2)' },
+ },
+ red: {
+ title: 'Red',
+ color: { fill: 'rgba(234, 112, 112, 0.12)', line: 'rgba(237, 46, 24, 0.60)' },
+ },
+ green: {
+ title: 'Green',
+ color: { fill: 'rgba(11, 237, 50, 0.090)', line: 'rgba(6,163,69, 0.60)' },
+ },
+ blue: {
+ title: 'Blue',
+ color: { fill: 'rgba(11, 125, 238, 0.12)', line: 'rgba(11, 125, 238, 0.60)' },
+ },
+ yellow: {
+ title: 'Yellow',
+ color: { fill: 'rgba(235, 138, 14, 0.12)', line: 'rgba(247, 149, 32, 0.60)' },
+ },
+ custom: { title: 'Custom' },
+};
+
+export function getColorModes() {
+ return _.map(Object.keys(colorModes), key => {
+ return {
+ key: key,
+ value: colorModes[key].title,
+ };
+ });
+}
+
+function getColor(timeRegion) {
+ if (Object.keys(colorModes).indexOf(timeRegion.colorMode) === -1) {
+ timeRegion.colorMode = 'red';
+ }
+
+ if (timeRegion.colorMode === 'custom') {
+ return {
+ fill: timeRegion.fillColor,
+ line: timeRegion.lineColor,
+ };
+ }
+
+ const colorMode = colorModes[timeRegion.colorMode];
+ if (colorMode.themeDependent === true) {
+ return config.bootData.user.lightTheme ? colorMode.lightColor : colorMode.darkColor;
+ }
+
+ return colorMode.color;
+}
+
+export class TimeRegionManager {
+ plot: any;
+ timeRegions: any;
+
+ constructor(private panelCtrl) {}
+
+ draw(plot) {
+ this.timeRegions = this.panelCtrl.panel.timeRegions;
+ this.plot = plot;
+ }
+
+ addFlotOptions(options, panel) {
+ if (!panel.timeRegions || panel.timeRegions.length === 0) {
+ return;
+ }
+
+ const tRange = { from: moment(this.panelCtrl.range.from).utc(), to: moment(this.panelCtrl.range.to).utc() };
+
+ let i, hRange, timeRegion, regions, fromStart, fromEnd, timeRegionColor;
+
+ const timeRegionsCopy = panel.timeRegions.map(a => ({ ...a }));
+
+ for (i = 0; i < timeRegionsCopy.length; i++) {
+ timeRegion = timeRegionsCopy[i];
+
+ if (!(timeRegion.fromDayOfWeek || timeRegion.from) && !(timeRegion.toDayOfWeek || timeRegion.to)) {
+ continue;
+ }
+
+ hRange = {
+ from: this.parseTimeRange(timeRegion.from),
+ to: this.parseTimeRange(timeRegion.to),
+ };
+
+ if (!timeRegion.fromDayOfWeek && timeRegion.toDayOfWeek) {
+ timeRegion.fromDayOfWeek = timeRegion.toDayOfWeek;
+ }
+
+ if (!timeRegion.toDayOfWeek && timeRegion.fromDayOfWeek) {
+ timeRegion.toDayOfWeek = timeRegion.fromDayOfWeek;
+ }
+
+ if (timeRegion.fromDayOfWeek) {
+ hRange.from.dayOfWeek = Number(timeRegion.fromDayOfWeek);
+ }
+
+ if (timeRegion.toDayOfWeek) {
+ hRange.to.dayOfWeek = Number(timeRegion.toDayOfWeek);
+ }
+
+ if (!hRange.from.h && hRange.to.h) {
+ hRange.from = hRange.to;
+ }
+
+ if (hRange.from.h && !hRange.to.h) {
+ hRange.to = hRange.from;
+ }
+
+ if (hRange.from.dayOfWeek && !hRange.from.h && !hRange.from.m) {
+ hRange.from.h = 0;
+ hRange.from.m = 0;
+ hRange.from.s = 0;
+ }
+
+ if (hRange.to.dayOfWeek && !hRange.to.h && !hRange.to.m) {
+ hRange.to.h = 23;
+ hRange.to.m = 59;
+ hRange.to.s = 59;
+ }
+
+ if (!hRange.from || !hRange.to) {
+ continue;
+ }
+
+ regions = [];
+
+ if (
+ hRange.from.h >= tRange.from.hour() &&
+ hRange.from.h <= tRange.from.hour() &&
+ hRange.from.m >= tRange.from.minute() &&
+ hRange.from.m <= tRange.from.minute() &&
+ hRange.to.h >= tRange.to.hour() &&
+ hRange.to.h <= tRange.to.hour() &&
+ hRange.to.m >= tRange.to.minute() &&
+ hRange.to.m <= tRange.to.minute()
+ ) {
+ regions.push({ from: tRange.from.valueOf(), to: tRange.to.startOf('hour').valueOf() });
+ } else {
+ fromStart = moment(tRange.from);
+ fromStart.set('hour', 0);
+ fromStart.set('minute', 0);
+ fromStart.set('second', 0);
+ fromStart.add(hRange.from.h, 'hours');
+ fromStart.add(hRange.from.m, 'minutes');
+ fromStart.add(hRange.from.s, 'seconds');
+
+ while (fromStart.unix() <= tRange.to.unix()) {
+ while (hRange.from.dayOfWeek && hRange.from.dayOfWeek !== fromStart.isoWeekday()) {
+ fromStart.add(24, 'hours');
+ }
+
+ if (fromStart.unix() > tRange.to.unix()) {
+ break;
+ }
+
+ fromEnd = moment(fromStart);
+
+ if (hRange.from.h <= hRange.to.h) {
+ fromEnd.add(hRange.to.h - hRange.from.h, 'hours');
+ } else if (hRange.from.h + hRange.to.h < 23) {
+ fromEnd.add(hRange.to.h, 'hours');
+ } else {
+ fromEnd.add(24 - hRange.from.h, 'hours');
+ }
+
+ fromEnd.set('minute', hRange.to.m);
+ fromEnd.set('second', hRange.to.s);
+
+ while (hRange.to.dayOfWeek && hRange.to.dayOfWeek !== fromEnd.isoWeekday()) {
+ fromEnd.add(24, 'hours');
+ }
+
+ const outsideRange =
+ (fromStart.unix() < tRange.from.unix() && fromEnd.unix() < tRange.from.unix()) ||
+ (fromStart.unix() > tRange.to.unix() && fromEnd.unix() > tRange.to.unix());
+
+ if (!outsideRange) {
+ regions.push({ from: fromStart.valueOf(), to: fromEnd.valueOf() });
+ }
+
+ fromStart.add(24, 'hours');
+ }
+ }
+
+ timeRegionColor = getColor(timeRegion);
+
+ for (let j = 0; j < regions.length; j++) {
+ const r = regions[j];
+ if (timeRegion.fill) {
+ options.grid.markings.push({
+ xaxis: { from: r.from, to: r.to },
+ color: timeRegionColor.fill,
+ });
+ }
+
+ if (timeRegion.line) {
+ options.grid.markings.push({
+ xaxis: { from: r.from, to: r.from },
+ color: timeRegionColor.line,
+ });
+ options.grid.markings.push({
+ xaxis: { from: r.to, to: r.to },
+ color: timeRegionColor.line,
+ });
+ }
+ }
+ }
+ }
+
+ parseTimeRange(str) {
+ const timeRegex = /^([\d]+):?(\d{2})?/;
+ const result = { h: null, m: null };
+ const match = timeRegex.exec(str);
+
+ if (!match) {
+ return result;
+ }
+
+ if (match.length > 1) {
+ result.h = Number(match[1]);
+ result.m = 0;
+
+ if (match.length > 2 && match[2] !== undefined) {
+ result.m = Number(match[2]);
+ }
+
+ if (result.h > 23) {
+ result.h = 23;
+ }
+
+ if (result.m > 59) {
+ result.m = 59;
+ }
+ }
+
+ return result;
+ }
+}
diff --git a/public/app/plugins/panel/graph/time_regions_form.html b/public/app/plugins/panel/graph/time_regions_form.html
new file mode 100644
index 00000000000..7292c53ec80
--- /dev/null
+++ b/public/app/plugins/panel/graph/time_regions_form.html
@@ -0,0 +1,64 @@
+Thresholds
-
- Visual thresholds options disabled.
- Visit the Alert tab update your thresholds.
- To re-enable thresholds, the alert rule must be deleted from this panel.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ Time regions
+
\ No newline at end of file
diff --git a/public/app/plugins/panel/graph/time_regions_form.ts b/public/app/plugins/panel/graph/time_regions_form.ts
new file mode 100644
index 00000000000..5dc9c4016eb
--- /dev/null
+++ b/public/app/plugins/panel/graph/time_regions_form.ts
@@ -0,0 +1,73 @@
+import coreModule from 'app/core/core_module';
+import { getColorModes } from './time_region_manager';
+
+export class TimeRegionFormCtrl {
+ panelCtrl: any;
+ panel: any;
+ disabled: boolean;
+ colorModes: any;
+
+ /** @ngInject */
+ constructor($scope) {
+ this.panel = this.panelCtrl.panel;
+
+ const unbindDestroy = $scope.$on('$destroy', () => {
+ this.panelCtrl.editingTimeRegions = false;
+ this.panelCtrl.render();
+ unbindDestroy();
+ });
+
+ this.colorModes = getColorModes();
+ this.panelCtrl.editingTimeRegions = true;
+ }
+
+ render() {
+ this.panelCtrl.render();
+ }
+
+ addTimeRegion() {
+ this.panel.timeRegions.push({
+ op: 'time',
+ fromDayOfWeek: undefined,
+ from: undefined,
+ toDayOfWeek: undefined,
+ to: undefined,
+ colorMode: 'background6',
+ fill: true,
+ line: false,
+ });
+ this.panelCtrl.render();
+ }
+
+ removeTimeRegion(index) {
+ this.panel.timeRegions.splice(index, 1);
+ this.panelCtrl.render();
+ }
+
+ onFillColorChange(index) {
+ return newColor => {
+ this.panel.timeRegions[index].fillColor = newColor;
+ this.render();
+ };
+ }
+
+ onLineColorChange(index) {
+ return newColor => {
+ this.panel.timeRegions[index].lineColor = newColor;
+ this.render();
+ };
+ }
+}
+
+coreModule.directive('graphTimeRegionForm', () => {
+ return {
+ restrict: 'E',
+ templateUrl: 'public/app/plugins/panel/graph/time_regions_form.html',
+ controller: TimeRegionFormCtrl,
+ bindToController: true,
+ controllerAs: 'ctrl',
+ scope: {
+ panelCtrl: '=',
+ },
+ };
+});
diff --git a/public/app/plugins/panel/graph2/module.tsx b/public/app/plugins/panel/graph2/module.tsx
index 4011458bea9..b132d3374f1 100644
--- a/public/app/plugins/panel/graph2/module.tsx
+++ b/public/app/plugins/panel/graph2/module.tsx
@@ -1,22 +1,21 @@
-// Libraries
import _ from 'lodash';
import React, { PureComponent } from 'react';
-// Components
import Graph from 'app/viz/Graph';
-import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
import { Switch } from 'app/core/components/Switch/Switch';
-// Types
-import { PanelProps, NullValueMode } from 'app/types';
+import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
+import { PanelProps, PanelOptionsProps, NullValueMode } from 'app/types';
interface Options {
showBars: boolean;
+ showLines: boolean;
+ showPoints: boolean;
+
+ onChange: (options: Options) => void;
}
-interface Props extends PanelProps {
- options: Options;
-}
+interface Props extends PanelPropsTime regions All configured time regions refers to UTC time
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- ' + columnHtml + '';
+ columnHtml = '' + columnHtml + '';
return columnHtml;
}
diff --git a/public/app/routes/routes.ts b/public/app/routes/routes.ts
index 94b6b2706f2..6770011278f 100644
--- a/public/app/routes/routes.ts
+++ b/public/app/routes/routes.ts
@@ -14,6 +14,7 @@ import DataSourcesListPage from 'app/features/datasources/DataSourcesListPage';
import NewDataSourcePage from '../features/datasources/NewDataSourcePage';
import UsersListPage from 'app/features/users/UsersListPage';
import DataSourceDashboards from 'app/features/datasources/DataSourceDashboards';
+import OrgDetailsPage from '../features/org/OrgDetailsPage';
/** @ngInject */
export function setupAngularRoutes($routeProvider, $locationProvider) {
@@ -131,8 +132,10 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
},
})
.when('/org', {
- templateUrl: 'public/app/features/org/partials/orgDetails.html',
- controller: 'OrgDetailsCtrl',
+ template: ';
- start: () => Promise;
+ /**
+ * Returns startTask that resolves with a task list when main syntax is loaded.
+ * Task list consists of secondary promises that load more detailed language features.
+ */
+ start: () => Promise;
+ startTask?: Promise;
}
export interface TypeaheadInput {
@@ -100,16 +107,6 @@ export interface TypeaheadOutput {
suggestions: CompletionItemGroup[];
}
-export interface Range {
- from: string;
- to: string;
-}
-
-export interface Query {
- query: string;
- key?: string;
-}
-
export interface QueryFix {
type: string;
label: string;
@@ -128,14 +125,18 @@ export interface QueryHint {
fix?: QueryFix;
}
+export interface QueryHintGetter {
+ (query: DataQuery, results: any[], ...rest: any): QueryHint[];
+}
+
export interface QueryTransaction {
id: string;
done: boolean;
- error?: string;
+ error?: string | JSX.Element;
hints?: QueryHint[];
latency: number;
options: any;
- query: string;
+ query: DataQuery;
result?: any; // Table model / Timeseries[] / Logs
resultType: ResultType;
rowIndex: number;
@@ -149,27 +150,21 @@ export interface TextMatch {
}
export interface ExploreState {
+ StartPage?: any;
datasource: any;
datasourceError: any;
datasourceLoading: boolean | null;
datasourceMissing: boolean;
datasourceName?: string;
exploreDatasources: ExploreDatasource[];
- graphRange: Range;
+ graphRange: RawTimeRange;
history: HistoryItem[];
- /**
- * Initial rows of queries to push down the tree.
- * Modifications do not end up here, but in `this.queryExpressions`.
- * The only way to reset a query is to change its `key`.
- */
- queries: Query[];
- /**
- * Hints gathered for the query row.
- */
+ initialQueries: DataQuery[];
queryTransactions: QueryTransaction[];
- range: Range;
+ range: RawTimeRange;
showingGraph: boolean;
showingLogs: boolean;
+ showingStartPage?: boolean;
showingTable: boolean;
supportsGraph: boolean | null;
supportsLogs: boolean | null;
@@ -178,8 +173,8 @@ export interface ExploreState {
export interface ExploreUrlState {
datasource: string;
- queries: Query[];
- range: Range;
+ queries: any[]; // Should be a DataQuery, but we're going to strip refIds, so typing makes less sense
+ range: RawTimeRange;
}
export type ResultType = 'Graph' | 'Logs' | 'Table';
diff --git a/public/app/types/index.ts b/public/app/types/index.ts
index 4b03ef70714..3bf6b4c9803 100644
--- a/public/app/types/index.ts
+++ b/public/app/types/index.ts
@@ -6,7 +6,7 @@ import { FolderDTO, FolderState, FolderInfo } from './folders';
import { DashboardState } from './dashboard';
import { DashboardAcl, OrgRole, PermissionLevel } from './acl';
import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
-import { Invitee, OrgUser, User, UsersState } from './user';
+import { Invitee, OrgUser, User, UsersState, UserState } from './user';
import { DataSource, DataSourcesState } from './datasources';
import {
TimeRange,
@@ -20,14 +20,16 @@ import {
DataQueryResponse,
DataQueryOptions,
} from './series';
-import { PanelProps } from './panel';
+import { PanelProps, PanelOptionsProps } from './panel';
import { PluginDashboard, PluginMeta, Plugin, PluginsState } from './plugins';
+import { Organization, OrganizationState } from './organization';
import {
AppNotification,
AppNotificationSeverity,
AppNotificationsState,
AppNotificationTimeout,
} from './appNotifications';
+import { DashboardSearchHit } from './search';
export {
Team,
@@ -67,6 +69,7 @@ export {
TimeRange,
LoadingState,
PanelProps,
+ PanelOptionsProps,
TimeSeries,
TimeSeriesVM,
TimeSeriesVMs,
@@ -76,10 +79,14 @@ export {
DataQueryResponse,
DataQueryOptions,
PluginDashboard,
+ Organization,
+ OrganizationState,
AppNotification,
AppNotificationsState,
AppNotificationSeverity,
AppNotificationTimeout,
+ DashboardSearchHit,
+ UserState,
};
export interface StoreState {
@@ -92,5 +99,7 @@ export interface StoreState {
dashboard: DashboardState;
dataSources: DataSourcesState;
users: UsersState;
+ organization: OrganizationState;
appNotifications: AppNotificationsState;
+ user: UserState;
}
diff --git a/public/app/types/organization.ts b/public/app/types/organization.ts
new file mode 100644
index 00000000000..da67ead34ae
--- /dev/null
+++ b/public/app/types/organization.ts
@@ -0,0 +1,8 @@
+export interface Organization {
+ name: string;
+ id: number;
+}
+
+export interface OrganizationState {
+ organization: Organization;
+}
diff --git a/public/app/types/panel.ts b/public/app/types/panel.ts
index 5ece77fc5aa..e82c3711b06 100644
--- a/public/app/types/panel.ts
+++ b/public/app/types/panel.ts
@@ -1,7 +1,23 @@
import { LoadingState, TimeSeries, TimeRange } from './series';
-export interface PanelProps {
+export interface PanelProps {
timeSeries: TimeSeries[];
timeRange: TimeRange;
loading: LoadingState;
+ options: T;
+ renderCounter: number;
+}
+
+export interface PanelOptionsProps {
+ options: T;
+ onChange: (options: T) => void;
+}
+
+export interface PanelMenuItem {
+ type?: 'submenu' | 'divider';
+ text?: string;
+ iconClassName?: string;
+ onClick?: () => void;
+ shortcut?: string;
+ subMenu?: PanelMenuItem[];
}
diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts
index 826ce2d48ec..9e3264be70c 100644
--- a/public/app/types/plugins.ts
+++ b/public/app/types/plugins.ts
@@ -1,11 +1,19 @@
+import { ComponentClass } from 'react';
+import { PanelProps, PanelOptionsProps } from './panel';
+
export interface PluginExports {
- PanelCtrl?;
- PanelComponent?: any;
Datasource?: any;
QueryCtrl?: any;
ConfigCtrl?: any;
AnnotationsQueryCtrl?: any;
- PanelOptions?: any;
+ VariableQueryEditor?: any;
+ ExploreQueryField?: any;
+ ExploreStartPage?: any;
+
+ // Panel plugin
+ PanelCtrl?;
+ PanelComponent?: ComponentClass;
+ PanelOptionsComponent: ComponentClass;
}
export interface PanelPlugin {
@@ -25,6 +33,12 @@ export interface PluginMeta {
name: string;
info: PluginMetaInfo;
includes: PluginInclude[];
+
+ // Datasource-specific
+ metrics?: boolean;
+ logs?: boolean;
+ explore?: boolean;
+ annotations?: boolean;
}
export interface PluginInclude {
@@ -85,3 +99,10 @@ export interface PluginsState {
hasFetched: boolean;
dashboards: PluginDashboard[];
}
+
+export interface VariableQueryProps {
+ query: any;
+ onChange: (query: any, definition: string) => void;
+ datasource: any;
+ templateSrv: any;
+}
diff --git a/public/app/types/search.ts b/public/app/types/search.ts
new file mode 100644
index 00000000000..e5e17288de1
--- /dev/null
+++ b/public/app/types/search.ts
@@ -0,0 +1,9 @@
+export interface DashboardSearchHit {
+ id: number;
+ tags: string[];
+ title: string;
+ type: string;
+ uid: string;
+ uri: string;
+ url: string;
+}
diff --git a/public/app/types/series.ts b/public/app/types/series.ts
index 5396880611b..18ebbc5f648 100644
--- a/public/app/types/series.ts
+++ b/public/app/types/series.ts
@@ -1,4 +1,5 @@
import { Moment } from 'moment';
+import { PluginMeta } from './plugins';
export enum LoadingState {
NotStarted = 'NotStarted',
@@ -70,6 +71,7 @@ export interface DataQueryResponse {
export interface DataQuery {
refId: string;
+ [key: string]: any;
}
export interface DataQueryOptions {
@@ -87,5 +89,14 @@ export interface DataQueryOptions {
}
export interface DataSourceApi {
+ /**
+ * Imports queries from a different datasource
+ */
+ importQueries?(queries: DataQuery[], originMeta: PluginMeta): Promise;
+ /**
+ * Initializes a datasource after instantiation
+ */
+ init?: () => void;
query(options: DataQueryOptions): Promise;
+ testDatasource?: () => Promise;
}
diff --git a/public/app/types/user.ts b/public/app/types/user.ts
index c0b7b135ff8..37c80074dca 100644
--- a/public/app/types/user.ts
+++ b/public/app/types/user.ts
@@ -1,4 +1,6 @@
-export interface OrgUser {
+import { DashboardSearchHit } from './search';
+
+export interface OrgUser {
avatarUrl: string;
email: string;
lastSeenAt: string;
@@ -43,3 +45,7 @@ export interface UsersState {
externalUserMngInfo: string;
hasFetched: boolean;
}
+
+export interface UserState {
+ starredDashboards: DashboardSearchHit[];
+}
diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx
new file mode 100644
index 00000000000..5e90fd870db
--- /dev/null
+++ b/public/app/viz/Gauge.tsx
@@ -0,0 +1,133 @@
+import React, { PureComponent } from 'react';
+import $ from 'jquery';
+import { withSize } from 'react-sizeme';
+import { TimeSeriesVMs } from 'app/types';
+import config from '../core/config';
+
+interface Props {
+ timeSeries: TimeSeriesVMs;
+ minValue: number;
+ maxValue: number;
+ showThresholdMarkers?: boolean;
+ thresholds?: number[];
+ showThresholdLables?: boolean;
+ size?: { width: number; height: number };
+}
+
+const colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
+
+export class Gauge extends PureComponent {
+ parentElement: any;
+ canvasElement: any;
+
+ static defaultProps = {
+ minValue: 0,
+ maxValue: 100,
+ showThresholdMarkers: true,
+ showThresholdLables: false,
+ thresholds: [],
+ };
+
+ componentDidMount() {
+ this.draw();
+ }
+
+ componentDidUpdate(prevProps: Props) {
+ this.draw();
+ }
+
+ draw() {
+ const { maxValue, minValue, showThresholdLables, size, showThresholdMarkers, timeSeries, thresholds } = this.props;
+
+ const width = size.width;
+ const height = size.height;
+ const dimension = Math.min(width, height * 1.3);
+
+ const backgroundColor = config.bootData.user.lightTheme ? 'rgb(230,230,230)' : 'rgb(38,38,38)';
+ const fontColor = config.bootData.user.lightTheme ? 'rgb(38,38,38)' : 'rgb(230,230,230)';
+ const fontScale = parseInt('80', 10) / 100;
+ const fontSize = Math.min(dimension / 5, 100) * fontScale;
+ const gaugeWidth = Math.min(dimension / 6, 60);
+ const thresholdMarkersWidth = gaugeWidth / 5;
+ const thresholdLabelFontSize = fontSize / 2.5;
+
+ const formattedThresholds = [];
+
+ thresholds.forEach((threshold, index) => {
+ formattedThresholds.push({
+ value: threshold,
+ color: colors[index],
+ });
+ });
+
+ const options = {
+ series: {
+ gauges: {
+ gauge: {
+ min: minValue,
+ max: maxValue,
+ background: { color: backgroundColor },
+ border: { color: null },
+ shadow: { show: false },
+ width: gaugeWidth,
+ },
+ frame: { show: false },
+ label: { show: false },
+ layout: { margin: 0, thresholdWidth: 0 },
+ cell: { border: { width: 0 } },
+ threshold: {
+ values: formattedThresholds,
+ label: {
+ show: showThresholdLables,
+ margin: thresholdMarkersWidth + 1,
+ font: { size: thresholdLabelFontSize },
+ },
+ show: showThresholdMarkers,
+ width: thresholdMarkersWidth,
+ },
+ value: {
+ color: fontColor,
+ formatter: () => {
+ return Math.round(timeSeries[0].stats.avg);
+ },
+ font: {
+ size: fontSize,
+ family: '"Helvetica Neue", Helvetica, Arial, sans-serif',
+ },
+ },
+ show: true,
+ },
+ },
+ };
+
+ const plotSeries = {
+ data: [[0, timeSeries[0].stats.avg]],
+ };
+
+ try {
+ $.plot(this.canvasElement, [plotSeries], options);
+ } catch (err) {
+ console.log('Gauge rendering error', err, options, timeSeries);
+ }
+ }
+
+ render() {
+ const { height, width } = this.props.size;
+
+ return (
+
Draw Modes
-
+
);
}
}
-export { Graph2 as PanelComponent, TextOptions as PanelOptions };
+export { Graph2 as PanelComponent, GraphOptions as PanelOptionsComponent };
diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts
index eafa3cf23f4..26ce6b7722d 100644
--- a/public/app/plugins/panel/singlestat/module.ts
+++ b/public/app/plugins/panel/singlestat/module.ts
@@ -77,7 +77,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
};
/** @ngInject */
- constructor($scope, $injector, private linkSrv) {
+ constructor($scope, $injector, private linkSrv, private $sanitize) {
super($scope, $injector);
_.defaults(this.panel, this.panelDefaults);
@@ -398,14 +398,15 @@ class SingleStatCtrl extends MetricsPanelCtrl {
const $location = this.$location;
const linkSrv = this.linkSrv;
const $timeout = this.$timeout;
+ const $sanitize = this.$sanitize;
const panel = ctrl.panel;
const templateSrv = this.templateSrv;
let data, linkInfo;
const $panelContainer = elem.find('.panel-container');
elem = elem.find('.singlestat-panel');
- function applyColoringThresholds(value, valueString) {
- const color = getColorForValue(data, value);
+ function applyColoringThresholds(valueString) {
+ const color = getColorForValue(data, data.value);
if (color) {
return '' + valueString + '';
}
@@ -413,8 +414,9 @@ class SingleStatCtrl extends MetricsPanelCtrl {
return valueString;
}
- function getSpan(className, fontSize, value) {
- value = templateSrv.replace(value, data.scopedVars);
+ function getSpan(className, fontSize, applyColoring, value) {
+ value = $sanitize(templateSrv.replace(value, data.scopedVars));
+ value = applyColoring ? applyColoringThresholds(value) : value;
return '' + value + '';
}
@@ -422,25 +424,13 @@ class SingleStatCtrl extends MetricsPanelCtrl {
let body = '
+
Draw Modes
+';
if (panel.prefix) {
- let prefix = panel.prefix;
- if (panel.colorPrefix) {
- prefix = applyColoringThresholds(data.value, panel.prefix);
- }
- body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, prefix);
+ body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, panel.colorPrefix, panel.prefix);
}
- let value = data.valueFormatted;
- if (panel.colorValue) {
- value = applyColoringThresholds(data.value, value);
- }
- body += getSpan('singlestat-panel-value', panel.valueFontSize, value);
+ body += getSpan('singlestat-panel-value', panel.valueFontSize, panel.colorValue, data.valueFormatted);
if (panel.postfix) {
- let postfix = panel.postfix;
- if (panel.colorPostfix) {
- postfix = applyColoringThresholds(data.value, panel.postfix);
- }
- body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, postfix);
+ body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, panel.colorPostfix, panel.postfix);
}
body += '
';
diff --git a/public/app/plugins/panel/singlestat/specs/singlestat.test.ts b/public/app/plugins/panel/singlestat/specs/singlestat.test.ts
index 6003acd89a6..902d722f0ad 100644
--- a/public/app/plugins/panel/singlestat/specs/singlestat.test.ts
+++ b/public/app/plugins/panel/singlestat/specs/singlestat.test.ts
@@ -14,6 +14,8 @@ describe('SingleStatCtrl', () => {
get: () => {},
};
+ const $sanitize = {};
+
SingleStatCtrl.prototype.panel = {
events: {
on: () => {},
@@ -31,7 +33,7 @@ describe('SingleStatCtrl', () => {
describe(desc, () => {
ctx.setup = setupFunc => {
beforeEach(() => {
- ctx.ctrl = new SingleStatCtrl($scope, $injector, {});
+ ctx.ctrl = new SingleStatCtrl($scope, $injector, {}, $sanitize);
setupFunc();
ctx.ctrl.onDataReceived(ctx.data);
ctx.data = ctx.ctrl.data;
diff --git a/public/app/plugins/panel/table/column_options.ts b/public/app/plugins/panel/table/column_options.ts
index ca6d271643b..4c810d9987d 100644
--- a/public/app/plugins/panel/table/column_options.ts
+++ b/public/app/plugins/panel/table/column_options.ts
@@ -41,6 +41,7 @@ export class ColumnOptionsCtrl {
{ text: 'YYYY-MM-DD HH:mm:ss.SSS', value: 'YYYY-MM-DD HH:mm:ss.SSS' },
{ text: 'MM/DD/YY h:mm:ss a', value: 'MM/DD/YY h:mm:ss a' },
{ text: 'MMMM D, YYYY LT', value: 'MMMM D, YYYY LT' },
+ { text: 'YYYY-MM-DD', value: 'YYYY-MM-DD' },
];
this.mappingTypes = [{ text: 'Value to text', value: 1 }, { text: 'Range to text', value: 2 }];
diff --git a/public/app/plugins/panel/table/renderer.ts b/public/app/plugins/panel/table/renderer.ts
index c25e37357cb..524aa06343b 100644
--- a/public/app/plugins/panel/table/renderer.ts
+++ b/public/app/plugins/panel/table/renderer.ts
@@ -211,16 +211,17 @@ export class TableRenderer {
value = this.formatColumnValue(columnIndex, value);
const column = this.table.columns[columnIndex];
- let style = '';
+ let cellStyle = '';
+ let textStyle = '';
const cellClasses = [];
let cellClass = '';
if (this.colorState.cell) {
- style = ' style="background-color:' + this.colorState.cell + '"';
+ cellStyle = ' style="background-color:' + this.colorState.cell + '"';
cellClasses.push('table-panel-color-cell');
this.colorState.cell = null;
} else if (this.colorState.value) {
- style = ' style="color:' + this.colorState.value + '"';
+ textStyle = ' style="color:' + this.colorState.value + '"';
this.colorState.value = null;
}
// because of the fixed table headers css only solution
@@ -232,7 +233,7 @@ export class TableRenderer {
}
if (value === undefined) {
- style = ' style="display:none;"';
+ cellStyle = ' style="display:none;"';
column.hidden = true;
} else {
column.hidden = false;
@@ -258,7 +259,7 @@ export class TableRenderer {
cellClasses.push('table-panel-cell-link');
columnHtml += `
-
+
${value}
`;
@@ -283,7 +284,7 @@ export class TableRenderer {
cellClass = ' class="' + cellClasses.join(' ') + '"';
}
- columnHtml = ' (this.parentElement = element)}>
+ > {
+ render() {
+ return (
+ {
+ static defaultProps = {
+ showLines: true,
+ showPoints: false,
+ showBars: false,
+ };
+
+ element: any;
+
+ componentDidUpdate(prevProps: GraphProps) {
+ if (
+ prevProps.timeSeries !== this.props.timeSeries ||
+ prevProps.timeRange !== this.props.timeRange ||
+ prevProps.size !== this.props.size
+ ) {
+ this.draw();
+ }
+ }
+
+ componentDidMount() {
+ this.draw();
+ }
+
+ draw() {
+ const { size, timeSeries, timeRange, showLines, showBars, showPoints } = this.props;
+
+ if (!size) {
+ return;
+ }
+
+ const ticks = (size.width || 0) / 100;
+ const min = timeRange.from.valueOf();
+ const max = timeRange.to.valueOf();
+
+ const flotOptions = {
+ legend: {
+ show: false,
+ },
+ series: {
+ lines: {
+ show: showLines,
+ linewidth: 1,
+ zero: false,
+ },
+ points: {
+ show: showPoints,
+ fill: 1,
+ fillColor: false,
+ radius: 2,
+ },
+ bars: {
+ show: showBars,
+ fill: 1,
+ barWidth: 1,
+ zero: false,
+ lineWidth: 0,
+ },
+ shadowSize: 0,
+ },
+ xaxis: {
+ mode: 'time',
+ min: min,
+ max: max,
+ label: 'Datetime',
+ ticks: ticks,
+ timeformat: time_format(ticks, min, max),
+ },
+ grid: {
+ minBorderMargin: 0,
+ markings: [],
+ backgroundColor: null,
+ borderWidth: 0,
+ // hoverable: true,
+ clickable: true,
+ color: '#a1a1a1',
+ margin: { left: 0, right: 0 },
+ labelMarginX: 0,
+ },
+ };
+
+ try {
+ $.plot(this.element, timeSeries, flotOptions);
+ } catch (err) {
+ console.log('Graph rendering error', err, flotOptions, timeSeries);
+ }
+ }
+
+ render() {
+ return (
+
(this.canvasElement = element)}
+ />
+
+ );
+ }
+}
+
+export default withSize({ monitorHeight: true })(Gauge);
diff --git a/public/app/viz/GaugeOptions.tsx b/public/app/viz/GaugeOptions.tsx
new file mode 100644
index 00000000000..031855e1c78
--- /dev/null
+++ b/public/app/viz/GaugeOptions.tsx
@@ -0,0 +1,16 @@
+import React, { PureComponent } from 'react';
+import { PanelOptionsProps } from '../types';
+
+interface Props {}
+
+export class GaugeOptions extends PureComponent
+
+ );
+ }
+}
diff --git a/public/app/viz/Graph.tsx b/public/app/viz/Graph.tsx
index fab65225715..566080fbc92 100644
--- a/public/app/viz/Graph.tsx
+++ b/public/app/viz/Graph.tsx
@@ -8,6 +8,111 @@ import 'vendor/flot/jquery.flot.time';
// Types
import { TimeRange, TimeSeriesVMs } from 'app/types';
+interface GraphProps {
+ timeSeries: TimeSeriesVMs;
+ timeRange: TimeRange;
+ showLines?: boolean;
+ showPoints?: boolean;
+ showBars?: boolean;
+ size?: { width: number; height: number };
+}
+
+export class Graph extends PureComponent
+
+ Draw Modes
+
+ {
- element: any;
-
- componentDidUpdate(prevProps: GraphProps) {
- if (
- prevProps.timeSeries !== this.props.timeSeries ||
- prevProps.timeRange !== this.props.timeRange ||
- prevProps.size !== this.props.size
- ) {
- this.draw();
- }
- }
-
- componentDidMount() {
- this.draw();
- }
-
- draw() {
- const { size, timeSeries, timeRange } = this.props;
-
- if (!size) {
- return;
- }
-
- const ticks = (size.width || 0) / 100;
- const min = timeRange.from.valueOf();
- const max = timeRange.to.valueOf();
-
- const dynamicOptions = {
- xaxis: {
- mode: 'time',
- min: min,
- max: max,
- label: 'Datetime',
- ticks: ticks,
- timeformat: time_format(ticks, min, max),
- },
- };
-
- const options = {
- ...FLOT_OPTIONS,
- ...dynamicOptions,
- };
-
- console.log('plot', timeSeries, options);
- $.plot(this.element, timeSeries, options);
- }
-
- render() {
- return (
-
(this.element = e)} />
+
+ );
+ }
+}
+
// Copied from graph.ts
function time_format(ticks, min, max) {
if (min && max && ticks) {
@@ -34,91 +139,4 @@ function time_format(ticks, min, max) {
return '%H:%M';
}
-const FLOT_OPTIONS = {
- legend: {
- show: false,
- },
- series: {
- lines: {
- linewidth: 1,
- zero: false,
- },
- shadowSize: 0,
- },
- grid: {
- minBorderMargin: 0,
- markings: [],
- backgroundColor: null,
- borderWidth: 0,
- // hoverable: true,
- clickable: true,
- color: '#a1a1a1',
- margin: { left: 0, right: 0 },
- labelMarginX: 0,
- },
-};
-
-interface GraphProps {
- timeSeries: TimeSeriesVMs;
- timeRange: TimeRange;
- size?: { width: number; height: number };
-}
-
-export class Graph extends PureComponent
-
(this.element = e)} />
-
- );
- }
-}
-
export default withSize()(Graph);
diff --git a/public/img/grafana_enterprise_typelogo.svg b/public/img/grafana_enterprise_typelogo.svg
new file mode 100644
index 00000000000..30ee925787e
--- /dev/null
+++ b/public/img/grafana_enterprise_typelogo.svg
@@ -0,0 +1,51 @@
+
+
+
+
diff --git a/public/img/grafana_typelogo.svg b/public/img/grafana_typelogo.svg
new file mode 100644
index 00000000000..bfceac7a78d
--- /dev/null
+++ b/public/img/grafana_typelogo.svg
@@ -0,0 +1,27 @@
+
+
+
+
diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss
index 991b0f30aa1..cfe74d03bb1 100644
--- a/public/sass/_old_responsive.scss
+++ b/public/sass/_old_responsive.scss
@@ -10,6 +10,7 @@
max-width: 120px;
}
+.navbar-buttons--tv,
.navbar-buttons--actions {
display: none;
}
@@ -35,6 +36,7 @@
}
@include media-breakpoint-up(md) {
+ .navbar-buttons--tv,
.navbar-buttons--actions {
display: flex;
}
diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss
index 37dbdcd89ef..9e7f46fe514 100644
--- a/public/sass/components/_dropdown.scss
+++ b/public/sass/components/_dropdown.scss
@@ -183,6 +183,11 @@
display: block;
}
+ & > .dropdown > .dropdown-menu {
+ // Panel menu. TODO: See if we can merge this with above
+ display: block;
+ }
+
&.cascade-open {
.dropdown-menu {
display: block;
diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss
index 3c30f5a5798..893eea02914 100644
--- a/public/sass/components/_footer.scss
+++ b/public/sass/components/_footer.scss
@@ -4,7 +4,7 @@
.footer {
color: $footer-link-color;
- padding: 5rem 0 1rem 0;
+ padding: 1rem 0 1rem 0;
font-size: $font-size-sm;
position: relative;
width: 98%; /* was causing horiz scrollbars - need to examine */
@@ -38,17 +38,18 @@
}
}
+// Keeping footer inside the graphic on Login screen
.login-page {
.footer {
+ bottom: $spacer;
+ position: absolute;
padding: 1rem 0 1rem 0;
}
}
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(sm) {
.login-page {
.footer {
- bottom: $spacer;
- position: absolute;
padding: 5rem 0 1rem 0;
}
}
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index 0de386f3f68..9d0c65c9392 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -82,7 +82,7 @@ $input-border: 1px solid $input-border-color;
align-content: flex-start;
.gf-form + .gf-form {
- margin-right: $gf-form-margin;
+ margin-left: $gf-form-margin;
}
}
@@ -116,6 +116,11 @@ $input-border: 1px solid $input-border-color;
color: $critical;
}
+ &--small {
+ padding: ($input-padding-y / 2) ($input-padding-x / 2);
+ font-size: $font-size-xs;
+ }
+
&:disabled {
color: $text-color-weak;
}
@@ -156,7 +161,6 @@ $input-border: 1px solid $input-border-color;
display: block;
width: 100%;
padding: $input-padding-y $input-padding-x;
- margin-right: $gf-form-margin;
font-size: $font-size-md;
line-height: $input-line-height;
color: $input-color;
diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss
index 63d9169a4f8..9f7a9575b61 100644
--- a/public/sass/components/_panel_graph.scss
+++ b/public/sass/components/_panel_graph.scss
@@ -14,7 +14,7 @@
.graph-legend-series {
display: block;
- padding-left: 0px;
+ padding-left: 4px;
}
.graph-legend-table .graph-legend-series {
@@ -28,6 +28,7 @@
position: relative;
cursor: crosshair;
flex-grow: 1;
+ min-height: 65%;
}
.datapoints-warning {
@@ -46,15 +47,12 @@
.graph-legend {
display: flex;
flex: 0 1 auto;
- max-height: 30%;
+ max-height: 35%;
margin: 0;
text-align: center;
padding-top: 6px;
position: relative;
- // fix for Firefox (white stripe on the right of scrollbar)
- width: calc(100% - 1px);
-
.popover-content {
padding: 0;
}
@@ -62,15 +60,6 @@
.graph-legend-content {
position: relative;
-
- // fix for Firefox (white stripe on the right of scrollbar)
- width: calc(100% - 1px);
-}
-
-.graph-legend-scroll {
- position: relative;
- overflow: auto !important;
- padding: 1px;
}
.graph-legend-icon {
@@ -82,8 +71,8 @@
.graph-legend-icon,
.graph-legend-alias,
.graph-legend-value {
+ display: inline;
cursor: pointer;
- float: left;
white-space: nowrap;
font-size: 85%;
text-align: left;
@@ -120,6 +109,11 @@
}
}
+// Don't move series to the right if legend is on the right as well
+.graph-panel--legend-right .graph-legend-series--right-y {
+ float: left;
+}
+
.graph-legend-value {
padding-left: 6px;
}
@@ -128,7 +122,8 @@
.body--phantomjs {
.graph-panel--legend-right {
.graph-legend {
- display: inline-block;
+ display: block;
+ max-width: min-content;
}
.graph-panel__chart {
@@ -138,24 +133,14 @@
.graph-legend-table {
display: table;
width: auto;
-
- .graph-legend-scroll {
- display: table;
- }
}
}
}
.graph-legend-table {
- tbody {
- display: block;
- position: relative;
- overflow-y: auto;
- overflow-x: hidden;
- padding-bottom: 1px;
- padding-right: 5px;
- padding-left: 5px;
- }
+ padding-bottom: 1px;
+ padding-right: 5px;
+ padding-left: 5px;
.graph-legend-series {
display: table-row;
diff --git a/public/sass/components/_query_editor.scss b/public/sass/components/_query_editor.scss
index 9fcfdf719ba..40cee199062 100644
--- a/public/sass/components/_query_editor.scss
+++ b/public/sass/components/_query_editor.scss
@@ -35,7 +35,7 @@
}
.gf-form + .gf-form {
- margin-right: 0;
+ margin-left: 0;
}
}
diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss
index 6eb01ecc32d..c368d8ead67 100644
--- a/public/sass/components/_switch.scss
+++ b/public/sass/components/_switch.scss
@@ -41,7 +41,6 @@
bottom: 0;
right: 0;
color: #fff;
- font-size: $font-size-sm;
text-align: center;
font-size: 150%;
display: flex;
@@ -91,6 +90,20 @@
transform: rotateY(0);
}
+ &--small {
+ max-width: 2rem;
+ min-width: 1.5rem;
+
+ input + label {
+ height: 25px;
+ }
+
+ input + label::before,
+ input + label::after {
+ font-size: $font-size-sm;
+ }
+ }
+
&--table-cell {
margin-bottom: 0;
margin-right: 0;
diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss
index faa5b94d4ad..312248086fa 100644
--- a/public/sass/layout/_page.scss
+++ b/public/sass/layout/_page.scss
@@ -40,6 +40,29 @@
&--dashboard {
height: calc(100% - 56px);
}
+
+ // Sticky footer
+ display: flex;
+ flex-direction: column;
+
+ > div {
+ flex-grow: 1;
+ }
+
+ > .footer {
+ flex-shrink: 0;
+ }
+
+ // Render in correct position even ng-view div is not rendered yet
+ > .footer:first-child {
+ flex-grow: 1;
+ display: flex;
+
+ > * {
+ width: 100%;
+ align-self: flex-end;
+ }
+ }
}
// fix for phantomjs
diff --git a/public/sass/pages/_alerting.scss b/public/sass/pages/_alerting.scss
index 90f2eb526f1..77752be11bc 100644
--- a/public/sass/pages/_alerting.scss
+++ b/public/sass/pages/_alerting.scss
@@ -66,6 +66,13 @@
content: '\e611';
}
}
+
+ &--pending {
+ .panel-alert-icon:before {
+ color: $warn;
+ content: '\e611';
+ }
+ }
}
@keyframes alerting-panel {
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index 795766a22de..125edac500f 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -138,7 +138,6 @@ div.flot-text {
padding: 3px 5px;
visibility: hidden;
opacity: 0;
- position: absolute;
width: 16px;
height: 16px;
left: 1px;
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index a3f60f2006b..edb637e5e22 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -18,10 +18,39 @@
margin-left: 15px;
}
- // Graph panel needs a bit extra padding at top
- .panel-container {
+ .explore-panel {
+ margin-top: $panel-margin;
+ }
+
+ .explore-panel__body {
padding: $panel-padding;
- padding-top: 10px;
+ }
+
+ .explore-panel__header {
+ padding: $panel-padding;
+ padding-top: 5px;
+ padding-bottom: 0;
+ display: flex;
+ cursor: pointer;
+ margin-bottom: 5px;
+ transition: all 0.1s linear;
+ }
+
+ .explore-panel__header:hover {
+ transform: translateY(-1px);
+ }
+
+ .explore-panel__header-label {
+ font-weight: 500;
+ margin-right: $panel-margin;
+ font-size: $font-size-h6;
+ box-shadow: $text-shadow-faint;
+ }
+
+ .explore-panel__header-buttons {
+ margin-right: $panel-margin;
+ font-size: $font-size-lg;
+ line-height: $font-size-h6;
}
// Make sure wrap buttons around on small screens
@@ -52,7 +81,7 @@
}
.result-options {
- margin-top: 2 * $panel-margin;
+ margin: 2 * $panel-margin 0;
}
.time-series-disclaimer {
@@ -87,15 +116,20 @@
flex-wrap: wrap;
}
- .explore-graph__loader {
+ .explore-panel__loader {
height: 2px;
position: relative;
overflow: hidden;
- background: $text-color-faint;
+ background: none;
margin: $panel-margin / 2;
+ transition: background-color 1s ease;
}
- .explore-graph__loader:after {
+ .explore-panel__loader--active {
+ background: $text-color-faint;
+ }
+
+ .explore-panel__loader--active:after {
content: ' ';
display: block;
width: 25%;
@@ -165,7 +199,7 @@
position: absolute;
top: 0;
right: 90px;
- z-index: 1024;
+ z-index: 1015;
display: flex;
flex-direction: column;
justify-content: center;
@@ -214,33 +248,102 @@
display: grid;
grid-column-gap: 1rem;
grid-row-gap: 0.1rem;
- grid-template-columns: 4px minmax(100px, max-content) 1fr;
+ grid-template-columns: 4px minmax(100px, max-content) minmax(100px, 25%) 1fr;
+ font-family: $font-family-monospace;
+ font-size: 12px;
+ }
+
+ .logs-controls {
+ display: flex;
+ background-color: $page-bg;
+ padding: $panel-padding;
+ padding-top: 10px;
+ border-radius: $border-radius;
+ margin: 2*$panel-margin 0;
+ border: $panel-border;
+
+ > * {
+ margin-right: 1em;
+ }
+ }
+
+ .logs-meta {
+ flex: 1;
+ color: $text-color-weak;
+ padding: 2px 0;
+ }
+
+ .logs-meta-item {
+ display: inline-block;
+ margin-right: 1em;
+ }
+
+ .logs-meta-item__label {
+ margin-right: 0.5em;
+ font-size: 0.9em;
+ font-weight: 500;
+ }
+
+ .logs-meta-item__value {
font-family: $font-family-monospace;
}
.logs-row-match-highlight {
- background-color: lighten($blue, 20%);
+ // Undoing mark styling
+ background: inherit;
+ padding: inherit;
+
+ color: $typeahead-selected-color;
+ border-bottom: 1px solid $typeahead-selected-color;
+ background-color: lighten($typeahead-selected-color, 60%);
}
.logs-row-level {
background-color: transparent;
- margin: 6px 0;
- border-radius: 2px;
+ margin: 2px 0;
+ position: relative;
opacity: 0.8;
}
- .logs-row-level-crit,
+ .logs-row-level-crit {
+ background-color: #705da0;
+ }
+
.logs-row-level-error,
.logs-row-level-err {
- background-color: $red;
+ background-color: #e24d42;
}
.logs-row-level-warn {
- background-color: $orange;
+ background-color: #eab839;
}
.logs-row-level-info {
- background-color: $green;
+ background-color: #7eb26d;
+ }
+
+ .logs-row-level-trace,
+ .logs-row-level-debug {
+ background-color: #1f78c1;
+ }
+
+ .logs-row-level__duplicates {
+ position: absolute;
+ width: 9px;
+ height: 100%;
+ top: 0;
+ left: 5px;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ align-content: flex-start;
+ }
+
+ .logs-row-level__duplicate {
+ width: 2px;
+ height: 3px;
+ background-color: #1f78c1;
+ margin: 0 1px 1px 0;
}
}
}
@@ -258,6 +361,11 @@
.prom-query-field-info {
margin: 0.25em 0.5em 0.5em;
+ display: flex;
+
+ details {
+ margin-left: 1em;
+ }
}
}
@@ -266,8 +374,11 @@
.ReactTable {
border: none;
+}
+
+.ReactTable .rt-table {
// Allow some space for the no-data text
- min-height: 120px;
+ min-height: 90px;
}
.ReactTable .rt-thead.-header {
@@ -296,6 +407,11 @@
.ReactTable .rt-tbody .rt-td:last-child {
border-right: none;
}
+.ReactTable .-pagination {
+ border-top: none;
+ box-shadow: none;
+ margin-top: $panel-margin;
+}
.ReactTable .-pagination .-btn {
color: $blue;
background: $list-item-bg;
@@ -317,3 +433,33 @@
.ReactTable .rt-tr .rt-td:last-child {
text-align: right;
}
+.ReactTable .rt-noData {
+ top: 60px;
+ z-index: inherit;
+}
+
+// React-component cascade fix: show "loading" even though item can expand
+
+.rc-cascader-menu-item-loading:after {
+ position: absolute;
+ right: 12px;
+ content: 'loading';
+ color: #767980;
+ font-style: italic;
+}
+
+// TODO Experimental
+
+.cheat-sheet-item {
+ margin: 2*$panel-margin 0;
+ width: 50%;
+}
+
+.cheat-sheet-item__title {
+ font-size: $font-size-h3;
+}
+
+.cheat-sheet-item__expression {
+ margin: $panel-margin/2 0;
+ cursor: pointer;
+}
diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss
index 8e5c8f33e37..4baff47b2a8 100644
--- a/public/sass/pages/_login.scss
+++ b/public/sass/pages/_login.scss
@@ -1,7 +1,7 @@
$login-border: #8daac5;
.login {
- min-height: 85vh;
+ min-height: 100vh;
background-position: center;
background-repeat: no-repeat;
min-width: 100%;
@@ -97,6 +97,7 @@ select:-webkit-autofill:focus {
.login-content {
max-width: 700px;
+ width: 100%;
display: flex;
align-items: stretch;
flex-direction: column;
@@ -120,18 +121,29 @@ select:-webkit-autofill:focus {
width: 70px;
margin-bottom: 15px;
}
+}
- .icon-gf-grafana_wordmark {
- color: darken($white, 11%);
- position: relative;
- font-size: 2rem;
- text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+.app-grafana {
+ .logo-wordmark {
+ background: url('../img/grafana_typelogo.svg') top center no-repeat;
+ width: 100%;
+ height: 70px;
+ }
+}
+
+.app-enterprise {
+ .logo-wordmark {
+ background: url('../img/grafana_enterprise_typelogo.svg') top center no-repeat;
+ width: 100%;
+ height: 70px;
}
}
.login-outer-box {
display: flex;
overflow-y: hidden;
+ align-items: center;
+ justify-content: center;
}
.login-inner-box {
@@ -143,6 +155,7 @@ select:-webkit-autofill:focus {
justify-content: center;
flex-grow: 1;
max-width: 415px;
+ width: 100%;
transform: tranlate(0px, 0px);
transition: 0.25s ease;
@@ -324,23 +337,19 @@ select:-webkit-autofill:focus {
}
@include media-breakpoint-up(sm) {
- .login-content {
- flex-direction: row;
- }
-
.login-branding {
- width: 35%;
- padding: 4rem 2rem;
- border-right: 1px solid $login-border;
+ padding: 1rem;
.logo-icon {
width: 80px;
}
}
+}
- .login-inner-box {
- width: 65%;
- padding: 1rem 2rem;
+@include media-breakpoint-up(md) {
+ .login-content {
+ flex-direction: row;
+ flex: 1 0 100%;
}
.login-divider {
@@ -348,29 +357,16 @@ select:-webkit-autofill:focus {
width: 110px;
}
}
-}
-
-@include media-breakpoint-up(md) {
- .login {
- min-height: 100vh;
- }
-
- .login-content {
- flex: 1 0 100%;
- }
.login-branding {
width: 45%;
- padding: 2rem 4rem;
+ padding: 2rem;
flex-grow: 1;
+ border-right: 1px solid $login-border;
.logo-icon {
width: 130px;
}
-
- .icon-gf-grafana_wordmark {
- font-size: 3.2rem;
- }
}
.login-inner-box {
@@ -386,9 +382,7 @@ select:-webkit-autofill:focus {
padding-top: 0;
padding-left: 10px;
}
-}
-@include media-breakpoint-up(lg) {
.login-form-input {
min-width: 300px;
}
diff --git a/public/vendor/flot/jquery.flot.gauge.js b/public/vendor/flot/jquery.flot.gauge.js
index 14866dbef20..db1cb1ffe24 100644
--- a/public/vendor/flot/jquery.flot.gauge.js
+++ b/public/vendor/flot/jquery.flot.gauge.js
@@ -583,30 +583,31 @@
* @param {Number} [a] the angle of the value drawn
*/
function drawText(x, y, id, text, textOptions, a) {
- var span = $("." + id, placeholder);
+ var span = $(placeholder).find("#" + id);
var exists = span.length;
if (!exists) {
span = $("")
span.attr("id", id);
- span.css("position", "absolute");
- span.css("top", y + "px");
- if (textOptions.font.size) {
- span.css("font-size", textOptions.font.size + "px");
- }
- if (textOptions.font.family) {
- span.css("font-family", textOptions.font.family);
- }
- if (textOptions.color) {
- span.css("color", textOptions.color);
- }
- if (textOptions.background.color) {
- span.css("background-color", textOptions.background.color);
- }
- if (textOptions.background.opacity) {
- span.css("opacity", textOptions.background.opacity);
- }
placeholder.append(span);
}
+
+ span.css("position", "absolute");
+ span.css("top", y + "px");
+ if (textOptions.font.size) {
+ span.css("font-size", textOptions.font.size + "px");
+ }
+ if (textOptions.font.family) {
+ span.css("font-family", textOptions.font.family);
+ }
+ if (textOptions.color) {
+ span.css("color", textOptions.color);
+ }
+ if (textOptions.background.color) {
+ span.css("background-color", textOptions.background.color);
+ }
+ if (textOptions.background.opacity) {
+ span.css("opacity", textOptions.background.opacity);
+ }
span.text(text);
// after append, readjust the left position
span.css("left", x + "px"); // for redraw, resetting the left position is needed here
diff --git a/public/vendor/flot/jquery.flot.js b/public/vendor/flot/jquery.flot.js
index daa3ac6bb8e..8e0d7a1420f 100644
--- a/public/vendor/flot/jquery.flot.js
+++ b/public/vendor/flot/jquery.flot.js
@@ -2273,7 +2273,7 @@ Licensed under the MIT license.
function drawOrphanedPoints(series) {
/* Filters series data for points with no neighbors before or after
- * and plots single 0.5 radius points for them so that they are displayed.
+ * and plots single 0.5 radius points for them so that they are displayed.
*/
var abandonedPoints = [];
var beforeX = null;
@@ -2301,7 +2301,7 @@ Licensed under the MIT license.
}
var olddatapoints = datapoints.points
datapoints.points = abandonedPoints;
-
+
series.points.radius = series.lines.lineWidth/2;
// plot the orphan points with a radius of lineWidth/2
drawSeriesPoints(series);
@@ -2310,12 +2310,13 @@ Licensed under the MIT license.
}
function drawSeries(series) {
- if (series.lines.show)
+ if (series.lines.show) {
drawSeriesLines(series);
if (!series.points.show && !series.bars.show) {
// not necessary if user wants points displayed for everything
drawOrphanedPoints(series);
}
+ }
if (series.bars.show)
drawSeriesBars(series);
if (series.points.show)
diff --git a/public/views/error.html b/public/views/error-template.html
similarity index 98%
rename from public/views/error.html
rename to public/views/error-template.html
index 5c51e28eff4..af430fc6c3d 100644
--- a/public/views/error.html
+++ b/public/views/error-template.html
@@ -10,7 +10,7 @@