IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

noImplicitAny: Reduce errors to 3800-ish (#17781)

Browse Source 
* Reduce noImplicitAny errors to 3900-ish

* Fix lots of errors

* Add interface
This commit is contained in:
Tobias Skarhed 2019-06-27 13:21:04 +02:00 committed by Torkel Ödegaard
parent 013a1abb6f
commit 3045daedbd
29 changed files with 302 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -196,6 +196,7 @@
"@types/redux-logger": "3.0.7", "@types/redux-logger": "3.0.7",
"@types/reselect": "2.2.0", "@types/reselect": "2.2.0",
"@types/slate": "0.44.11", "@types/slate": "0.44.11",
"@types/tinycolor2": "1.4.2",
"angular": "1.6.6", "angular": "1.6.6",
"angular-bindonce": "0.3.1", "angular-bindonce": "0.3.1",
"angular-native-dragdrop": "1.2.2", "angular-native-dragdrop": "1.2.2",

4
packages/grafana-ui/src/types/graph.ts
View File

@ -11,3 +11,7 @@ export interface GraphSeriesXY {
isVisible: boolean; isVisible: boolean;
yAxis: number; yAxis: number;
} }
export interface CreatePlotOverlay {
(element: JQuery, event: any, plot: { getOptions: () => { events: { manager: any } } }): any;
}

29
public/app/features/annotations/annotations_srv.ts
View File

@ -1,5 +1,5 @@
// Libaries // Libaries
import angular from 'angular'; import angular, { IQService } from 'angular';
import _ from 'lodash'; import _ from 'lodash';
// Components // Components
@ -11,6 +11,9 @@ import { makeRegions, dedupAnnotations } from './events_processing';
// Types // Types
import { DashboardModel } from '../dashboard/state/DashboardModel'; import { DashboardModel } from '../dashboard/state/DashboardModel';
import DatasourceSrv from '../plugins/datasource_srv';
import { BackendSrv } from 'app/core/services/backend_srv';
import { TimeSrv } from '../dashboard/services/TimeSrv';
export class AnnotationsSrv { export class AnnotationsSrv {
globalAnnotationsPromise: any; globalAnnotationsPromise: any;
@ -18,7 +21,13 @@ export class AnnotationsSrv {
datasourcePromises: any; datasourcePromises: any;
/** @ngInject */ /** @ngInject */
constructor(private $rootScope, private $q, private datasourceSrv, private backendSrv, private timeSrv) {} constructor(
private $rootScope: any,
private $q: IQService,
private datasourceSrv: DatasourceSrv,
private backendSrv: BackendSrv,
private timeSrv: TimeSrv
) {}
init(dashboard: DashboardModel) { init(dashboard: DashboardModel) {
// always clearPromiseCaches when loading new dashboard // always clearPromiseCaches when loading new dashboard
@ -33,7 +42,7 @@ export class AnnotationsSrv {
this.datasourcePromises = null; this.datasourcePromises = null;
} }
getAnnotations(options) { getAnnotations(options: any) {
return this.$q return this.$q
.all([this.getGlobalAnnotations(options), this.getAlertStates(options)]) .all([this.getGlobalAnnotations(options), this.getAlertStates(options)])
.then(results => { .then(results => {
@ -70,7 +79,7 @@ export class AnnotationsSrv {
}); });
} }
getAlertStates(options) { getAlertStates(options: any) {
if (!options.dashboard.id) { if (!options.dashboard.id) {
return this.$q.when([]); return this.$q.when([]);
} }
@ -94,7 +103,7 @@ export class AnnotationsSrv {
return this.alertStatesPromise; return this.alertStatesPromise;
} }
getGlobalAnnotations(options) { getGlobalAnnotations(options: any) {
const dashboard = options.dashboard; const dashboard = options.dashboard;
if (this.globalAnnotationsPromise) { if (this.globalAnnotationsPromise) {
@ -117,7 +126,7 @@ export class AnnotationsSrv {
dsPromises.push(datasourcePromise); dsPromises.push(datasourcePromise);
promises.push( promises.push(
datasourcePromise datasourcePromise
.then(datasource => { .then((datasource: any) => {
// issue query against data source // issue query against data source
return datasource.annotationQuery({ return datasource.annotationQuery({
range: range, range: range,
@ -141,17 +150,17 @@ export class AnnotationsSrv {
return this.globalAnnotationsPromise; return this.globalAnnotationsPromise;
} }
saveAnnotationEvent(annotation) { saveAnnotationEvent(annotation: any) {
this.globalAnnotationsPromise = null; this.globalAnnotationsPromise = null;
return this.backendSrv.post('/api/annotations', annotation); return this.backendSrv.post('/api/annotations', annotation);
} }
updateAnnotationEvent(annotation) { updateAnnotationEvent(annotation: { id: any }) {
this.globalAnnotationsPromise = null; this.globalAnnotationsPromise = null;
return this.backendSrv.put(`/api/annotations/${annotation.id}`, annotation); return this.backendSrv.put(`/api/annotations/${annotation.id}`, annotation);
} }
deleteAnnotationEvent(annotation) { deleteAnnotationEvent(annotation: { id: any; isRegion: any; regionId: any }) {
this.globalAnnotationsPromise = null; this.globalAnnotationsPromise = null;
let deleteUrl = `/api/annotations/${annotation.id}`; let deleteUrl = `/api/annotations/${annotation.id}`;
if (annotation.isRegion) { if (annotation.isRegion) {
@ -161,7 +170,7 @@ export class AnnotationsSrv {
return this.backendSrv.delete(deleteUrl); return this.backendSrv.delete(deleteUrl);
} }
translateQueryResult(annotation, results) { translateQueryResult(annotation: any, results: any) {
// if annotation has snapshotData // if annotation has snapshotData
// make clone and remove it // make clone and remove it
if (annotation.snapshotData) { if (annotation.snapshotData) {

7
public/app/features/explore/LogRow.tsx
View File

@ -1,5 +1,6 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import _ from 'lodash'; import _ from 'lodash';
// @ts-ignore
import Highlighter from 'react-highlight-words'; import Highlighter from 'react-highlight-words';
import classnames from 'classnames'; import classnames from 'classnames';
@ -58,7 +59,7 @@ interface State {
* Renders a highlighted field. * Renders a highlighted field.
* When hovering, a stats icon is shown. * When hovering, a stats icon is shown.
*/ */
const FieldHighlight = onClick => props => { const FieldHighlight = (onClick: any) => (props: any) => {
return ( return (
<span className={props.className} style={props.style}> <span className={props.className} style={props.style}>
{props.children} {props.children}
@ -86,7 +87,7 @@ const getLogRowWithContextStyles = (theme: GrafanaTheme, state: State) => {
row: css` row: css`
z-index: 1; z-index: 1;
outline: 9999px solid outline: 9999px solid
${tinycolor(outlineColor) ${tinycolor(outlineColor as tinycolor.ColorInput)
.setAlpha(0.7) .setAlpha(0.7)
.toRgbString()}; .toRgbString()};
`, `,
@ -103,7 +104,7 @@ const getLogRowWithContextStyles = (theme: GrafanaTheme, state: State) => {
export class LogRow extends PureComponent<Props, State> { export class LogRow extends PureComponent<Props, State> {
mouseMessageTimer: NodeJS.Timer; mouseMessageTimer: NodeJS.Timer;
state = { state: any = {
fieldCount: 0, fieldCount: 0,
fieldLabel: null, fieldLabel: null,
fieldStats: null, fieldStats: null,

29
public/app/plugins/panel/graph/align_yaxes.ts
View File

@ -5,7 +5,7 @@ import _ from 'lodash';
* @param yAxes data [{min: min_y1, min: max_y1}, {min: min_y2, max: max_y2}] * @param yAxes data [{min: min_y1, min: max_y1}, {min: min_y2, max: max_y2}]
* @param level Y level * @param level Y level
*/ */
export function alignYLevel(yAxes, level) { export function alignYLevel(yAxes: any, level: any) {
if (isNaN(level) || !checkCorrectAxis(yAxes)) { if (isNaN(level) || !checkCorrectAxis(yAxes)) {
return; return;
} }
@ -65,7 +65,7 @@ export function alignYLevel(yAxes, level) {
restoreLevelFromZero(yLeft, yRight, level); restoreLevelFromZero(yLeft, yRight, level);
} }
function expandStuckValues(yLeft, yRight) { function expandStuckValues(yLeft: { max: number; min: number }, yRight: { max: number; min: number }) {
// wide Y min and max using increased wideFactor // wide Y min and max using increased wideFactor
const wideFactor = 0.25; const wideFactor = 0.25;
if (yLeft.max === yLeft.min) { if (yLeft.max === yLeft.min) {
@ -78,7 +78,7 @@ function expandStuckValues(yLeft, yRight) {
} }
} }
function moveLevelToZero(yLeft, yRight, level) { function moveLevelToZero(yLeft: { min: number; max: number }, yRight: { min: number; max: number }, level: number) {
if (level !== 0) { if (level !== 0) {
yLeft.min -= level; yLeft.min -= level;
yLeft.max -= level; yLeft.max -= level;
@ -87,7 +87,11 @@ function moveLevelToZero(yLeft, yRight, level) {
} }
} }
function restoreLevelFromZero(yLeft, yRight, level) { function restoreLevelFromZero(
yLeft: { min: number; max: number },
yRight: { min: number; max: number },
level: number
) {
if (level !== 0) { if (level !== 0) {
yLeft.min += level; yLeft.min += level;
yLeft.max += level; yLeft.max += level;
@ -96,30 +100,35 @@ function restoreLevelFromZero(yLeft, yRight, level) {
} }
} }
function checkCorrectAxis(axis) { interface AxisSide {
max: number;
min: number;
}
function checkCorrectAxis(axis: any[]) {
return axis.length === 2 && checkCorrectAxes(axis[0]) && checkCorrectAxes(axis[1]); return axis.length === 2 && checkCorrectAxes(axis[0]) && checkCorrectAxes(axis[1]);
} }
function checkCorrectAxes(axes) { function checkCorrectAxes(axes: any) {
return 'min' in axes && 'max' in axes; return 'min' in axes && 'max' in axes;
} }
function checkOneSide(yLeft, yRight) { function checkOneSide(yLeft: AxisSide, yRight: AxisSide) {
// on the one hand with respect to zero // on the one hand with respect to zero
return (yLeft.min >= 0 && yRight.min >= 0) || (yLeft.max <= 0 && yRight.max <= 0); return (yLeft.min >= 0 && yRight.min >= 0) || (yLeft.max <= 0 && yRight.max <= 0);
} }
function checkTwoCross(yLeft, yRight) { function checkTwoCross(yLeft: AxisSide, yRight: AxisSide) {
// both across zero // both across zero
return yLeft.min <= 0 && yLeft.max >= 0 && yRight.min <= 0 && yRight.max >= 0; return yLeft.min <= 0 && yLeft.max >= 0 && yRight.min <= 0 && yRight.max >= 0;
} }
function checkOppositeSides(yLeft, yRight) { function checkOppositeSides(yLeft: AxisSide, yRight: AxisSide) {
// on the opposite sides with respect to zero // on the opposite sides with respect to zero
return (yLeft.min >= 0 && yRight.max <= 0) || (yLeft.max <= 0 && yRight.min >= 0); return (yLeft.min >= 0 && yRight.max <= 0) || (yLeft.max <= 0 && yRight.min >= 0);
} }
function getRate(yLeft, yRight) { function getRate(yLeft: AxisSide, yRight: AxisSide) {
let rateLeft, rateRight, rate; let rateLeft, rateRight, rate;
if (checkTwoCross(yLeft, yRight)) { if (checkTwoCross(yLeft, yRight)) {
rateLeft = yRight.min ? yLeft.min / yRight.min : 0; rateLeft = yRight.min ? yLeft.min / yRight.min : 0;

4
public/app/plugins/panel/graph/data_processor.ts
View File

@ -9,7 +9,7 @@ type Options = {
}; };
export class DataProcessor { export class DataProcessor {
constructor(private panel) {} constructor(private panel: any) {}
getSeriesList(options: Options): TimeSeries[] { getSeriesList(options: Options): TimeSeries[] {
const list: TimeSeries[] = []; const list: TimeSeries[] = [];
@ -140,7 +140,7 @@ export class DataProcessor {
} }
} }
getXAxisValueOptions(options) { getXAxisValueOptions(options: any) {
switch (this.panel.xaxis.mode) { switch (this.panel.xaxis.mode) {
case 'series': { case 'series': {
return [ return [

62
public/app/plugins/panel/graph/graph.ts
View File

@ -16,7 +16,7 @@ import GraphTooltip from './graph_tooltip';
import { ThresholdManager } from './threshold_manager'; import { ThresholdManager } from './threshold_manager';
import { TimeRegionManager } from './time_region_manager'; import { TimeRegionManager } from './time_region_manager';
import { EventManager } from 'app/features/annotations/all'; import { EventManager } from 'app/features/annotations/all';
import { LinkService } from 'app/features/panel/panellinks/link_srv'; import { LinkService, LinkSrv } from 'app/features/panel/panellinks/link_srv';
import { convertToHistogramData } from './histogram'; import { convertToHistogramData } from './histogram';
import { alignYLevel } from './align_yaxes'; import { alignYLevel } from './align_yaxes';
import config from 'app/core/config'; import config from 'app/core/config';
@ -29,6 +29,8 @@ import { getValueFormat, ContextMenuItem, ContextMenuGroup, DataLink } from '@gr
import { provideTheme } from 'app/core/utils/ConfigProvider'; import { provideTheme } from 'app/core/utils/ConfigProvider';
import { toUtc } from '@grafana/ui/src/utils/moment_wrapper'; import { toUtc } from '@grafana/ui/src/utils/moment_wrapper';
import { GraphContextMenuCtrl, FlotDataPoint } from './GraphContextMenuCtrl'; import { GraphContextMenuCtrl, FlotDataPoint } from './GraphContextMenuCtrl';
import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
import { ContextSrv } from 'app/core/services/context_srv';
const LegendWithThemeProvider = provideTheme(Legend); const LegendWithThemeProvider = provideTheme(Legend);
@ -48,8 +50,7 @@ class GraphElement {
timeRegionManager: TimeRegionManager; timeRegionManager: TimeRegionManager;
legendElem: HTMLElement; legendElem: HTMLElement;
// @ts-ignore constructor(private scope: any, private elem: JQuery, private timeSrv: TimeSrv, private linkSrv: LinkService) {
constructor(private scope, private elem, private timeSrv, private linkSrv: LinkService) {
this.ctrl = scope.ctrl; this.ctrl = scope.ctrl;
this.contextMenu = scope.ctrl.contextMenuCtrl; this.contextMenu = scope.ctrl.contextMenuCtrl;
this.dashboard = this.ctrl.dashboard; this.dashboard = this.ctrl.dashboard;
@ -60,6 +61,7 @@ class GraphElement {
this.eventManager = new EventManager(this.ctrl); this.eventManager = new EventManager(this.ctrl);
this.thresholdManager = new ThresholdManager(this.ctrl); this.thresholdManager = new ThresholdManager(this.ctrl);
this.timeRegionManager = new TimeRegionManager(this.ctrl, config.theme.type); this.timeRegionManager = new TimeRegionManager(this.ctrl, config.theme.type);
// @ts-ignore
this.tooltip = new GraphTooltip(this.elem, this.ctrl.dashboard, this.scope, () => { this.tooltip = new GraphTooltip(this.elem, this.ctrl.dashboard, this.scope, () => {
return this.sortedSeries; return this.sortedSeries;
}); });
@ -80,7 +82,7 @@ class GraphElement {
} }
} }
onRender(renderData) { onRender(renderData: any[]) {
this.data = renderData || this.data; this.data = renderData || this.data;
if (!this.data) { if (!this.data) {
return; return;
@ -217,7 +219,7 @@ class GraphElement {
onPlotClick(event: JQueryEventObject, pos: any, item: any) { onPlotClick(event: JQueryEventObject, pos: any, item: any) {
const scrollContextElement = this.elem.closest('.view') ? this.elem.closest('.view').get()[0] : null; const scrollContextElement = this.elem.closest('.view') ? this.elem.closest('.view').get()[0] : null;
const contextMenuSourceItem = item; const contextMenuSourceItem = item;
let contextMenuItems; let contextMenuItems: ContextMenuItem[];
if (this.panel.xaxis.mode !== 'time') { if (this.panel.xaxis.mode !== 'time') {
// Skip if panel in histogram or series mode // Skip if panel in histogram or series mode
@ -235,7 +237,7 @@ class GraphElement {
return; return;
} else { } else {
this.tooltip.clear(this.plot); this.tooltip.clear(this.plot);
contextMenuItems = this.getContextMenuItems(pos, item); contextMenuItems = this.getContextMenuItems(pos, item) as ContextMenuItem[];
this.scope.$apply(() => { this.scope.$apply(() => {
// Setting nearest CustomScrollbar element as a scroll context for graph context menu // Setting nearest CustomScrollbar element as a scroll context for graph context menu
this.contextMenu.setScrollContextElement(scrollContextElement); this.contextMenu.setScrollContextElement(scrollContextElement);
@ -258,7 +260,7 @@ class GraphElement {
return false; return false;
} }
drawHook(plot) { drawHook(plot: any) {
// add left axis labels // add left axis labels
if (this.panel.yaxes[0].label && this.panel.yaxes[0].show) { if (this.panel.yaxes[0].label && this.panel.yaxes[0].show) {
$("<div class='axisLabel left-yaxis-label flot-temp-elem'></div>") $("<div class='axisLabel left-yaxis-label flot-temp-elem'></div>")
@ -281,7 +283,7 @@ class GraphElement {
this.timeRegionManager.draw(plot); this.timeRegionManager.draw(plot);
} }
processOffsetHook(plot, gridMargin) { processOffsetHook(plot: any, gridMargin: { left: number; right: number }) {
const left = this.panel.yaxes[0]; const left = this.panel.yaxes[0];
const right = this.panel.yaxes[1]; const right = this.panel.yaxes[1];
if (left.show && left.label) { if (left.show && left.label) {
@ -294,14 +296,14 @@ class GraphElement {
// apply y-axis min/max options // apply y-axis min/max options
const yaxis = plot.getYAxes(); const yaxis = plot.getYAxes();
for (let i = 0; i < yaxis.length; i++) { for (let i = 0; i < yaxis.length; i++) {
const axis = yaxis[i]; const axis: any = yaxis[i];
const panelOptions = this.panel.yaxes[i]; const panelOptions = this.panel.yaxes[i];
axis.options.max = axis.options.max !== null ? axis.options.max : panelOptions.max; axis.options.max = axis.options.max !== null ? axis.options.max : panelOptions.max;
axis.options.min = axis.options.min !== null ? axis.options.min : panelOptions.min; axis.options.min = axis.options.min !== null ? axis.options.min : panelOptions.min;
} }
} }
processRangeHook(plot) { processRangeHook(plot: any) {
const yAxes = plot.getYAxes(); const yAxes = plot.getYAxes();
const align = this.panel.yaxis.align || false; const align = this.panel.yaxis.align || false;
@ -314,7 +316,7 @@ class GraphElement {
// Series could have different timeSteps, // Series could have different timeSteps,
// let's find the smallest one so that bars are correctly rendered. // let's find the smallest one so that bars are correctly rendered.
// In addition, only take series which are rendered as bars for this. // In addition, only take series which are rendered as bars for this.
getMinTimeStepOfSeries(data) { getMinTimeStepOfSeries(data: any[]) {
let min = Number.MAX_VALUE; let min = Number.MAX_VALUE;
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
@ -364,7 +366,7 @@ class GraphElement {
this.callPlot(options, true); this.callPlot(options, true);
} }
buildFlotPairs(data) { buildFlotPairs(data: any) {
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
const series = data[i]; const series = data[i];
series.data = series.getFlotPairs(series.nullPointMode || this.panel.nullPointMode); series.data = series.getFlotPairs(series.nullPointMode || this.panel.nullPointMode);
@ -377,7 +379,7 @@ class GraphElement {
} }
} }
prepareXAxis(options, panel) { prepareXAxis(options: any, panel: any) {
switch (panel.xaxis.mode) { switch (panel.xaxis.mode) {
case 'series': { case 'series': {
options.series.bars.barWidth = 0.7; options.series.bars.barWidth = 0.7;
@ -430,7 +432,7 @@ class GraphElement {
} }
} }
callPlot(options, incrementRenderCounter) { callPlot(options: any, incrementRenderCounter: boolean) {
try { try {
this.plot = $.plot(this.elem, this.sortedSeries, options); this.plot = $.plot(this.elem, this.sortedSeries, options);
if (this.ctrl.renderError) { if (this.ctrl.renderError) {
@ -449,13 +451,13 @@ class GraphElement {
} }
} }
buildFlotOptions(panel) { buildFlotOptions(panel: any) {
let gridColor = '#c8c8c8'; let gridColor = '#c8c8c8';
if (config.bootData.user.lightTheme === true) { if (config.bootData.user.lightTheme === true) {
gridColor = '#a1a1a1'; gridColor = '#a1a1a1';
} }
const stack = panel.stack ? true : null; const stack = panel.stack ? true : null;
const options = { const options: any = {
hooks: { hooks: {
draw: [this.drawHook.bind(this)], draw: [this.drawHook.bind(this)],
processOffset: [this.processOffsetHook.bind(this)], processOffset: [this.processOffsetHook.bind(this)],
@ -518,7 +520,7 @@ class GraphElement {
return options; return options;
} }
sortSeries(series, panel) { sortSeries(series: any, panel: any) {
const sortBy = panel.legend.sort; const sortBy = panel.legend.sort;
const sortOrder = panel.legend.sortDesc; const sortOrder = panel.legend.sortDesc;
const haveSortBy = sortBy !== null && sortBy !== undefined && panel.legend[sortBy]; const haveSortBy = sortBy !== null && sortBy !== undefined && panel.legend[sortBy];
@ -551,7 +553,7 @@ class GraphElement {
} }
} }
addTimeAxis(options) { addTimeAxis(options: any) {
const ticks = this.panelWidth / 100; const ticks = this.panelWidth / 100;
const min = _.isUndefined(this.ctrl.range.from) ? null : this.ctrl.range.from.valueOf(); const min = _.isUndefined(this.ctrl.range.from) ? null : this.ctrl.range.from.valueOf();
const max = _.isUndefined(this.ctrl.range.to) ? null : this.ctrl.range.to.valueOf(); const max = _.isUndefined(this.ctrl.range.to) ? null : this.ctrl.range.to.valueOf();
@ -568,7 +570,7 @@ class GraphElement {
}; };
} }
addXSeriesAxis(options) { addXSeriesAxis(options: any) {
const ticks = _.map(this.data, (series, index) => { const ticks = _.map(this.data, (series, index) => {
return [index + 1, series.alias]; return [index + 1, series.alias];
}); });
@ -584,7 +586,7 @@ class GraphElement {
}; };
} }
addXHistogramAxis(options, bucketSize) { addXHistogramAxis(options: any, bucketSize: number) {
let ticks, min, max; let ticks, min, max;
const defaultTicks = this.panelWidth / 50; const defaultTicks = this.panelWidth / 50;
@ -637,7 +639,7 @@ class GraphElement {
this.configureAxisMode(options.xaxis, 'short'); this.configureAxisMode(options.xaxis, 'short');
} }
addXTableAxis(options) { addXTableAxis(options: any) {
let ticks = _.map(this.data, (series, seriesIndex) => { let ticks = _.map(this.data, (series, seriesIndex) => {
return _.map(series.datapoints, (point, pointIndex) => { return _.map(series.datapoints, (point, pointIndex) => {
const tickIndex = seriesIndex * series.datapoints.length + pointIndex; const tickIndex = seriesIndex * series.datapoints.length + pointIndex;
@ -658,7 +660,7 @@ class GraphElement {
}; };
} }
configureYAxisOptions(data, options) { configureYAxisOptions(data: any, options: any) {
const defaults = { const defaults = {
position: 'left', position: 'left',
show: this.panel.yaxes[0].show, show: this.panel.yaxes[0].show,
@ -703,7 +705,7 @@ class GraphElement {
return _.toNumber(value); return _.toNumber(value);
} }
applyLogScale(axis, data) { applyLogScale(axis: any, data: any) {
if (axis.logBase === 1) { if (axis.logBase === 1) {
return; return;
} }
@ -733,10 +735,10 @@ class GraphElement {
} }
} }
axis.transform = v => { axis.transform = (v: number) => {
return v < Number.MIN_VALUE ? null : Math.log(v) / Math.log(axis.logBase); return v < Number.MIN_VALUE ? null : Math.log(v) / Math.log(axis.logBase);
}; };
axis.inverseTransform = v => { axis.inverseTransform = (v: any) => {
return Math.pow(axis.logBase, v); return Math.pow(axis.logBase, v);
}; };
@ -784,7 +786,7 @@ class GraphElement {
} }
} }
generateTicksForLogScaleYAxis(min, max, logBase) { generateTicksForLogScaleYAxis(min: any, max: number, logBase: number) {
let ticks = []; let ticks = [];
let nextTick; let nextTick;
@ -806,7 +808,7 @@ class GraphElement {
return ticks; return ticks;
} }
configureAxisMode(axis, format) { configureAxisMode(axis: { tickFormatter: (val: any, axis: any) => string }, format: string) {
axis.tickFormatter = (val, axis) => { axis.tickFormatter = (val, axis) => {
const formatter = getValueFormat(format); const formatter = getValueFormat(format);
@ -817,7 +819,7 @@ class GraphElement {
}; };
} }
time_format(ticks, min, max) { time_format(ticks: number, min: number, max: number) {
if (min && max && ticks) { if (min && max && ticks) {
const range = max - min; const range = max - min;
const secPerTick = range / ticks / 1000; const secPerTick = range / ticks / 1000;
@ -846,11 +848,11 @@ class GraphElement {
} }
/** @ngInject */ /** @ngInject */
function graphDirective(timeSrv, popoverSrv, contextSrv, linkSrv) { function graphDirective(timeSrv: TimeSrv, popoverSrv: any, contextSrv: ContextSrv, linkSrv: LinkSrv) {
return { return {
restrict: 'A', restrict: 'A',
template: '', template: '',
link: (scope, elem) => { link: (scope: any, elem: JQuery) => {
return new GraphElement(scope, elem, timeSrv, linkSrv); return new GraphElement(scope, elem, timeSrv, linkSrv);
}, },
}; };

22
public/app/plugins/panel/graph/graph_tooltip.ts
View File

@ -1,7 +1,7 @@
import $ from 'jquery'; import $ from 'jquery';
import { appEvents } from 'app/core/core'; import { appEvents } from 'app/core/core';
export default function GraphTooltip(this: any, elem, dashboard, scope, getSeriesFn) { export default function GraphTooltip(this: any, elem: any, dashboard: any, scope: any, getSeriesFn: any) {
const self = this; const self = this;
const ctrl = scope.ctrl; const ctrl = scope.ctrl;
const panel = ctrl.panel; const panel = ctrl.panel;
@ -12,7 +12,7 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie
$tooltip.remove(); $tooltip.remove();
}; };
this.findHoverIndexFromDataPoints = (posX, series, last) => { this.findHoverIndexFromDataPoints = (posX: number, series: any, last: number) => {
const ps = series.datapoints.pointsize; const ps = series.datapoints.pointsize;
const initial = last * ps; const initial = last * ps;
const len = series.datapoints.points.length; const len = series.datapoints.points.length;
@ -30,7 +30,7 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie
return j / ps - 1; return j / ps - 1;
}; };
this.findHoverIndexFromData = (posX, series) => { this.findHoverIndexFromData = (posX: any, series: any) => {
let lower = 0; let lower = 0;
let upper = series.data.length - 1; let upper = series.data.length - 1;
let middle; let middle;
@ -49,14 +49,14 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie
} }
}; };
this.renderAndShow = (absoluteTime, innerHtml, pos, xMode) => { this.renderAndShow = (absoluteTime: string, innerHtml: string, pos: { pageX: number; pageY: any }, xMode: string) => {
if (xMode === 'time') { if (xMode === 'time') {
innerHtml = '<div class="graph-tooltip-time">' + absoluteTime + '</div>' + innerHtml; innerHtml = '<div class="graph-tooltip-time">' + absoluteTime + '</div>' + innerHtml;
} }
$tooltip.html(innerHtml).place_tt(pos.pageX + 20, pos.pageY); $tooltip.html(innerHtml).place_tt(pos.pageX + 20, pos.pageY);
}; };
this.getMultiSeriesPlotHoverInfo = function(seriesList, pos) { this.getMultiSeriesPlotHoverInfo = function(seriesList: any[], pos: { x: number }) {
let value, i, series, hoverIndex, hoverDistance, pointTime, yaxis; let value, i, series, hoverIndex, hoverDistance, pointTime, yaxis;
// 3 sub-arrays, 1st for hidden series, 2nd for left yaxis, 3rd for right yaxis. // 3 sub-arrays, 1st for hidden series, 2nd for left yaxis, 3rd for right yaxis.
let results: any = [[], [], []]; let results: any = [[], [], []];
@ -158,7 +158,7 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie
appEvents.emit('graph-hover-clear'); appEvents.emit('graph-hover-clear');
}); });
elem.bind('plothover', (event, pos, item) => { elem.bind('plothover', (event: any, pos: { panelRelY: number; pageY: number }, item: any) => {
self.show(pos, item); self.show(pos, item);
// broadcast to other graph panels that we are hovering! // broadcast to other graph panels that we are hovering!
@ -166,17 +166,17 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie
appEvents.emit('graph-hover', { pos: pos, panel: panel }); appEvents.emit('graph-hover', { pos: pos, panel: panel });
}); });
elem.bind('plotclick', (event, pos, item) => { elem.bind('plotclick', (event: any, pos: any, item: any) => {
appEvents.emit('graph-click', { pos: pos, panel: panel, item: item }); appEvents.emit('graph-click', { pos: pos, panel: panel, item: item });
}); });
this.clear = plot => { this.clear = (plot: { clearCrosshair: () => void; unhighlight: () => void }) => {
$tooltip.detach(); $tooltip.detach();
plot.clearCrosshair(); plot.clearCrosshair();
plot.unhighlight(); plot.unhighlight();
}; };
this.show = (pos, item) => { this.show = (pos: any, item: any) => {
const plot = elem.data().plot; const plot = elem.data().plot;
const plotData = plot.getData(); const plotData = plot.getData();
const xAxes = plot.getXAxes(); const xAxes = plot.getXAxes();
@ -232,11 +232,11 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie
// Dynamically reorder the hovercard for the current time point if the // Dynamically reorder the hovercard for the current time point if the
// option is enabled. // option is enabled.
if (panel.tooltip.sort === 2) { if (panel.tooltip.sort === 2) {
seriesHoverInfo.sort((a, b) => { seriesHoverInfo.sort((a: { value: number }, b: { value: number }) => {
return b.value - a.value; return b.value - a.value;
}); });
} else if (panel.tooltip.sort === 1) { } else if (panel.tooltip.sort === 1) {
seriesHoverInfo.sort((a, b) => { seriesHoverInfo.sort((a: { value: number }, b: { value: number }) => {
return a.value - b.value; return a.value - b.value;
}); });
} }

4
public/app/plugins/panel/graph/histogram.ts
View File

@ -30,7 +30,7 @@ export function getSeriesValues(dataList: TimeSeries[]): number[] {
* @param bucketSize * @param bucketSize
*/ */
export function convertValuesToHistogram(values: number[], bucketSize: number, min: number, max: number): any[] { export function convertValuesToHistogram(values: number[], bucketSize: number, min: number, max: number): any[] {
const histogram = {}; const histogram: any = {};
const minBound = getBucketBound(min, bucketSize); const minBound = getBucketBound(min, bucketSize);
const maxBound = getBucketBound(max, bucketSize); const maxBound = getBucketBound(max, bucketSize);
@ -71,7 +71,7 @@ export function convertToHistogramData(
min: number, min: number,
max: number max: number
): any[] { ): any[] {
return data.map(series => { return data.map((series: any) => {
const values = getSeriesValues([series]); const values = getSeriesValues([series]);
series.histogram = true; series.histogram = true;
if (!hiddenSeries[series.alias]) { if (!hiddenSeries[series.alias]) {

77
public/app/plugins/panel/graph/jquery.flot.events.ts
View File

@ -1,10 +1,12 @@
import angular from 'angular'; import angular from 'angular';
import $ from 'jquery'; import $ from 'jquery';
import _ from 'lodash'; import _ from 'lodash';
//@ts-ignore
import Drop from 'tether-drop'; import Drop from 'tether-drop';
import { CreatePlotOverlay } from '@grafana/ui';
/** @ngInject */ /** @ngInject */
export function createAnnotationToolip(element, event, plot) { const createAnnotationToolip: CreatePlotOverlay = (element, event, plot) => {
const injector = angular.element(document).injector(); const injector = angular.element(document).injector();
const content = document.createElement('div'); const content = document.createElement('div');
content.innerHTML = '<annotation-tooltip event="event" on-edit="onEdit()"></annotation-tooltip>'; content.innerHTML = '<annotation-tooltip event="event" on-edit="onEdit()"></annotation-tooltip>';
@ -45,12 +47,12 @@ export function createAnnotationToolip(element, event, plot) {
}); });
}, },
]); ]);
} };
let markerElementToAttachTo = null; let markerElementToAttachTo: any = null;
/** @ngInject */ /** @ngInject */
export function createEditPopover(element, event, plot) { const createEditPopover: CreatePlotOverlay = (element, event, plot) => {
const eventManager = plot.getOptions().events.manager; const eventManager = plot.getOptions().events.manager;
if (eventManager.editorOpen) { if (eventManager.editorOpen) {
// update marker element to attach to (needed in case of legend on the right // update marker element to attach to (needed in case of legend on the right
@ -75,7 +77,7 @@ export function createEditPopover(element, event, plot) {
'$rootScope', '$rootScope',
($compile, $rootScope) => { ($compile, $rootScope) => {
const scope = $rootScope.$new(true); const scope = $rootScope.$new(true);
let drop; let drop: any;
scope.event = event; scope.event = event;
scope.panelCtrl = eventManager.panelCtrl; scope.panelCtrl = eventManager.panelCtrl;
@ -111,7 +113,9 @@ export function createEditPopover(element, event, plot) {
}, },
]); ]);
}, 100); }, 100);
} };
export { createEditPopover, createAnnotationToolip };
/* /*
* jquery.flot.events * jquery.flot.events
@ -141,12 +145,21 @@ export class DrawableEvent {
_height: any; _height: any;
/** @ngInject */ /** @ngInject */
constructor(object, drawFunc, clearFunc, moveFunc, left, top, width, height) { constructor(
object: JQuery,
drawFunc: any,
clearFunc: any,
moveFunc: any,
left: number,
top: number,
width: number,
height: number
) {
this._object = object; this._object = object;
this._drawFunc = drawFunc; this._drawFunc = drawFunc;
this._clearFunc = clearFunc; this._clearFunc = clearFunc;
this._moveFunc = moveFunc; this._moveFunc = moveFunc;
this._position = { left: left, top: top }; this._position = { left, top };
this._width = width; this._width = width;
this._height = height; this._height = height;
} }
@ -169,7 +182,7 @@ export class DrawableEvent {
getObject() { getObject() {
return this._object; return this._object;
} }
moveTo(position) { moveTo(position: { left: number; top: number }) {
this._position = position; this._position = position;
this._moveFunc(this._object, this._position); this._moveFunc(this._object, this._position);
} }
@ -185,7 +198,7 @@ export class VisualEvent {
_hidden: any; _hidden: any;
/** @ngInject */ /** @ngInject */
constructor(options, drawableEvent) { constructor(options: any, drawableEvent: DrawableEvent) {
this._options = options; this._options = options;
this._drawableEvent = drawableEvent; this._drawableEvent = drawableEvent;
this._hidden = false; this._hidden = false;
@ -221,7 +234,7 @@ export class EventMarkers {
eventsEnabled: any; eventsEnabled: any;
/** @ngInject */ /** @ngInject */
constructor(plot) { constructor(plot: any) {
this._events = []; this._events = [];
this._types = []; this._types = [];
this._plot = plot; this._plot = plot;
@ -232,14 +245,14 @@ export class EventMarkers {
return this._events; return this._events;
} }
setTypes(types) { setTypes(types: any) {
return (this._types = types); return (this._types = types);
} }
/** /**
* create internal objects for the given events * create internal objects for the given events
*/ */
setupEvents(events) { setupEvents(events: any[]) {
const parts = _.partition(events, 'isRegion'); const parts = _.partition(events, 'isRegion');
const regions = parts[0]; const regions = parts[0];
events = parts[1]; events = parts[1];
@ -254,7 +267,7 @@ export class EventMarkers {
this._events.push(vre); this._events.push(vre);
}); });
this._events.sort((a, b) => { this._events.sort((a: any, b: any) => {
const ao = a.getOptions(), const ao = a.getOptions(),
bo = b.getOptions(); bo = b.getOptions();
if (ao.min > bo.min) { if (ao.min > bo.min) {
@ -315,7 +328,7 @@ export class EventMarkers {
/** /**
* create a DOM element for the given event * create a DOM element for the given event
*/ */
_buildDiv(event) { _buildDiv(event: { eventType: any; min: any; editModel: any }) {
const that = this; const that = this;
const container = this._plot.getPlaceholder(); const container = this._plot.getPlaceholder();
@ -440,13 +453,13 @@ export class EventMarkers {
const drawableEvent = new DrawableEvent( const drawableEvent = new DrawableEvent(
line, line,
function drawFunc(obj) { function drawFunc(obj: { show: () => void }) {
obj.show(); obj.show();
}, },
obj => { (obj: { remove: () => void }) => {
obj.remove(); obj.remove();
}, },
(obj, position) => { (obj: any, position: { top: any; left: any }) => {
obj.css({ obj.css({
top: position.top, top: position.top,
left: position.left, left: position.left,
@ -464,13 +477,19 @@ export class EventMarkers {
/** /**
* create a DOM element for the given region * create a DOM element for the given region
*/ */
_buildRegDiv(event) { _buildRegDiv(event: { eventType: any; min: number; timeEnd: number; editModel: any }) {
const that = this; const that = this;
const container = this._plot.getPlaceholder(); const container = this._plot.getPlaceholder();
const o = this._plot.getPlotOffset(); const o = this._plot.getPlotOffset();
const xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1]; const xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
let top, left, lineWidth, regionWidth, lineStyle, color, markerTooltip; let top,
left,
lineWidth: number,
regionWidth,
lineStyle: string | number | cssPropertySetter,
color: string,
markerTooltip;
// map the eventType to a types object // map the eventType to a types object
const eventTypeId = event.eventType; const eventTypeId = event.eventType;
@ -560,13 +579,13 @@ export class EventMarkers {
const drawableEvent = new DrawableEvent( const drawableEvent = new DrawableEvent(
region, region,
function drawFunc(obj) { function drawFunc(obj: { show: () => void }) {
obj.show(); obj.show();
}, },
obj => { (obj: { remove: () => void }) => {
obj.remove(); obj.remove();
}, },
(obj, position) => { (obj: { css: (arg0: { top: any; left: any }) => void }, position: { top: any; left: any }) => {
obj.css({ obj.css({
top: position.top, top: position.top,
left: position.left, left: position.left,
@ -584,7 +603,7 @@ export class EventMarkers {
/** /**
* check if the event is inside visible range * check if the event is inside visible range
*/ */
_insidePlot(x) { _insidePlot(x: any) {
const xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1]; const xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
const xc = xaxis.p2c(x); const xc = xaxis.p2c(x);
return xc > 0 && xc < xaxis.p2c(xaxis.max); return xc > 0 && xc < xaxis.p2c(xaxis.max);
@ -596,7 +615,7 @@ export class EventMarkers {
*/ */
/** @ngInject */ /** @ngInject */
export function init(this: any, plot) { export function init(this: any, plot: any) {
/*jshint validthis:true */ /*jshint validthis:true */
const that = this; const that = this;
const eventMarkers = new EventMarkers(plot); const eventMarkers = new EventMarkers(plot);
@ -624,20 +643,20 @@ export function init(this: any, plot) {
}; };
// change events on an existing plot // change events on an existing plot
plot.setEvents = events => { plot.setEvents = (events: any[]) => {
if (eventMarkers.eventsEnabled) { if (eventMarkers.eventsEnabled) {
eventMarkers.setupEvents(events); eventMarkers.setupEvents(events);
} }
}; };
plot.hooks.processOptions.push((plot, options) => { plot.hooks.processOptions.push((plot: any, options: any) => {
// enable the plugin // enable the plugin
if (options.events.data != null) { if (options.events.data != null) {
eventMarkers.eventsEnabled = true; eventMarkers.eventsEnabled = true;
} }
}); });
plot.hooks.draw.push(plot => { plot.hooks.draw.push((plot: any) => {
const options = plot.getOptions(); const options = plot.getOptions();
if (eventMarkers.eventsEnabled) { if (eventMarkers.eventsEnabled) {
@ -654,7 +673,7 @@ export function init(this: any, plot) {
}); });
} }
const defaultOptions = { const defaultOptions: any = {
events: { events: {
data: null, data: null,
types: null, types: null,

33
public/app/plugins/panel/graph/module.ts
View File

@ -17,6 +17,9 @@ import { PanelQueryRunnerFormat } from 'app/features/dashboard/state/PanelQueryR
import { GraphContextMenuCtrl } from './GraphContextMenuCtrl'; import { GraphContextMenuCtrl } from './GraphContextMenuCtrl';
import { getDataLinksVariableSuggestions } from 'app/features/panel/panellinks/link_srv'; import { getDataLinksVariableSuggestions } from 'app/features/panel/panellinks/link_srv';
import { auto } from 'angular';
import { AnnotationsSrv } from 'app/features/annotations/all';
class GraphCtrl extends MetricsPanelCtrl { class GraphCtrl extends MetricsPanelCtrl {
static template = template; static template = template;
@ -35,7 +38,7 @@ class GraphCtrl extends MetricsPanelCtrl {
contextMenuCtrl: GraphContextMenuCtrl; contextMenuCtrl: GraphContextMenuCtrl;
linkVariableSuggestions: VariableSuggestion[] = getDataLinksVariableSuggestions(); linkVariableSuggestions: VariableSuggestion[] = getDataLinksVariableSuggestions();
panelDefaults = { panelDefaults: any = {
// datasource name, null = default datasource // datasource name, null = default datasource
datasource: null, datasource: null,
// sets client side (flot) or native graphite png renderer (png) // sets client side (flot) or native graphite png renderer (png)
@ -130,7 +133,7 @@ class GraphCtrl extends MetricsPanelCtrl {
}; };
/** @ngInject */ /** @ngInject */
constructor($scope, $injector, private annotationsSrv) { constructor($scope: any, $injector: auto.IInjectorService, private annotationsSrv: AnnotationsSrv) {
super($scope, $injector); super($scope, $injector);
_.defaults(this.panel, this.panelDefaults); _.defaults(this.panel, this.panelDefaults);
@ -162,12 +165,12 @@ class GraphCtrl extends MetricsPanelCtrl {
this.subTabIndex = 0; this.subTabIndex = 0;
} }
onInitPanelActions(actions) { onInitPanelActions(actions: any[]) {
actions.push({ text: 'Export CSV', click: 'ctrl.exportCsv()' }); actions.push({ text: 'Export CSV', click: 'ctrl.exportCsv()' });
actions.push({ text: 'Toggle legend', click: 'ctrl.toggleLegend()', shortcut: 'p l' }); actions.push({ text: 'Toggle legend', click: 'ctrl.toggleLegend()', shortcut: 'p l' });
} }
issueQueries(datasource) { issueQueries(datasource: any) {
this.annotationsPromise = this.annotationsSrv.getAnnotations({ this.annotationsPromise = this.annotationsSrv.getAnnotations({
dashboard: this.dashboard, dashboard: this.dashboard,
panel: this.panel, panel: this.panel,
@ -180,16 +183,16 @@ class GraphCtrl extends MetricsPanelCtrl {
* (but not wait for completion). This resolves * (but not wait for completion). This resolves
* issue 11806. * issue 11806.
*/ */
return this.annotationsSrv.datasourcePromises.then(r => { return this.annotationsSrv.datasourcePromises.then((r: any) => {
return super.issueQueries(datasource); return super.issueQueries(datasource);
}); });
} }
zoomOut(evt) { zoomOut(evt: any) {
this.publishAppEvent('zoom-out', 2); this.publishAppEvent('zoom-out', 2);
} }
onDataSnapshotLoad(snapshotData) { onDataSnapshotLoad(snapshotData: any) {
this.annotationsPromise = this.annotationsSrv.getAnnotations({ this.annotationsPromise = this.annotationsSrv.getAnnotations({
dashboard: this.dashboard, dashboard: this.dashboard,
panel: this.panel, panel: this.panel,
@ -198,7 +201,7 @@ class GraphCtrl extends MetricsPanelCtrl {
this.onDataReceived(snapshotData); this.onDataReceived(snapshotData);
} }
onDataError(err) { onDataError(err: any) {
this.seriesList = []; this.seriesList = [];
this.annotations = []; this.annotations = [];
this.render([]); this.render([]);
@ -242,7 +245,7 @@ class GraphCtrl extends MetricsPanelCtrl {
} }
this.annotationsPromise.then( this.annotationsPromise.then(
result => { (result: { alertState: any; annotations: any }) => {
this.loading = false; this.loading = false;
this.alertState = result.alertState; this.alertState = result.alertState;
this.annotations = result.annotations; this.annotations = result.annotations;
@ -269,24 +272,24 @@ class GraphCtrl extends MetricsPanelCtrl {
} }
} }
onColorChange = (series, color) => { onColorChange = (series: any, color: string) => {
series.setColor(getColorFromHexRgbOrName(color, config.theme.type)); series.setColor(getColorFromHexRgbOrName(color, config.theme.type));
this.panel.aliasColors[series.alias] = color; this.panel.aliasColors[series.alias] = color;
this.render(); this.render();
}; };
onToggleSeries = hiddenSeries => { onToggleSeries = (hiddenSeries: any) => {
this.hiddenSeries = hiddenSeries; this.hiddenSeries = hiddenSeries;
this.render(); this.render();
}; };
onToggleSort = (sortBy, sortDesc) => { onToggleSort = (sortBy: any, sortDesc: any) => {
this.panel.legend.sort = sortBy; this.panel.legend.sort = sortBy;
this.panel.legend.sortDesc = sortDesc; this.panel.legend.sortDesc = sortDesc;
this.render(); this.render();
}; };
onToggleAxis = info => { onToggleAxis = (info: { alias: any; yaxis: any }) => {
let override: any = _.find(this.panel.seriesOverrides, { alias: info.alias }); let override: any = _.find(this.panel.seriesOverrides, { alias: info.alias });
if (!override) { if (!override) {
override = { alias: info.alias }; override = { alias: info.alias };
@ -303,11 +306,11 @@ class GraphCtrl extends MetricsPanelCtrl {
}); });
} }
addSeriesOverride(override) { addSeriesOverride(override: any) {
this.panel.seriesOverrides.push(override || {}); this.panel.seriesOverrides.push(override || {});
} }
removeSeriesOverride(override) { removeSeriesOverride(override: any) {
this.panel.seriesOverrides = _.without(this.panel.seriesOverrides, override); this.panel.seriesOverrides = _.without(this.panel.seriesOverrides, override);
this.render(); this.render();
} }

16
public/app/plugins/panel/graph/series_overrides_ctrl.ts
View File

@ -2,17 +2,17 @@ import _ from 'lodash';
import coreModule from 'app/core/core_module'; import coreModule from 'app/core/core_module';
/** @ngInject */ /** @ngInject */
export function SeriesOverridesCtrl($scope, $element, popoverSrv) { export function SeriesOverridesCtrl($scope: any, $element: JQuery, popoverSrv: any) {
$scope.overrideMenu = []; $scope.overrideMenu = [];
$scope.currentOverrides = []; $scope.currentOverrides = [];
$scope.override = $scope.override || {}; $scope.override = $scope.override || {};
$scope.addOverrideOption = (name, propertyName, values) => { $scope.addOverrideOption = (name: string, propertyName: string, values: any) => {
const option = { const option = {
text: name, text: name,
propertyName: propertyName, propertyName: propertyName,
index: $scope.overrideMenu.length, index: $scope.overrideMenu.length,
values: values, values,
submenu: _.map(values, value => { submenu: _.map(values, value => {
return { text: String(value), value: value }; return { text: String(value), value: value };
}), }),
@ -21,7 +21,7 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) {
$scope.overrideMenu.push(option); $scope.overrideMenu.push(option);
}; };
$scope.setOverride = (item, subItem) => { $scope.setOverride = (item: { propertyName: string }, subItem: { value: any }) => {
// handle color overrides // handle color overrides
if (item.propertyName === 'color') { if (item.propertyName === 'color') {
$scope.openColorSelector($scope.override['color']); $scope.openColorSelector($scope.override['color']);
@ -41,14 +41,14 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) {
$scope.ctrl.render(); $scope.ctrl.render();
}; };
$scope.colorSelected = color => { $scope.colorSelected = (color: any) => {
$scope.override['color'] = color; $scope.override['color'] = color;
$scope.updateCurrentOverrides(); $scope.updateCurrentOverrides();
$scope.ctrl.render(); $scope.ctrl.render();
}; };
$scope.openColorSelector = color => { $scope.openColorSelector = (color: any) => {
const fakeSeries = { color: color }; const fakeSeries = { color };
popoverSrv.show({ popoverSrv.show({
element: $element.find('.dropdown')[0], element: $element.find('.dropdown')[0],
position: 'top center', position: 'top center',
@ -67,7 +67,7 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) {
}); });
}; };
$scope.removeOverride = option => { $scope.removeOverride = (option: { propertyName: string | number }) => {
delete $scope.override[option.propertyName]; delete $scope.override[option.propertyName];
$scope.updateCurrentOverrides(); $scope.updateCurrentOverrides();
$scope.ctrl.refresh(); $scope.ctrl.refresh();

124
public/app/plugins/panel/graph/specs/graph.test.ts
View File

@ -29,7 +29,7 @@ import { graphDirective } from '../graph';
import { dateTime } from '@grafana/ui/src/utils/moment_wrapper'; import { dateTime } from '@grafana/ui/src/utils/moment_wrapper';
const ctx = {} as any; const ctx = {} as any;
let ctrl; let ctrl: any;
const scope = { const scope = {
ctrl: {}, ctrl: {},
range: { range: {
@ -41,7 +41,7 @@ const scope = {
let link; let link;
describe('grafanaGraph', () => { describe('grafanaGraph', () => {
const setupCtx = (beforeRender?) => { const setupCtx = (beforeRender?: any) => {
config.bootData = { config.bootData = {
user: { user: {
lightTheme: false, lightTheme: false,
@ -110,15 +110,19 @@ describe('grafanaGraph', () => {
}, },
{ {
get: () => {}, get: () => {},
}, } as any,
{} {} as any
); );
// @ts-ignore // @ts-ignore
$.plot = ctrl.plot = jest.fn(); $.plot = ctrl.plot = jest.fn();
scope.ctrl = ctrl; scope.ctrl = ctrl;
link = graphDirective({}, {}, {}, {}).link(scope, { width: () => 500, mouseleave: () => {}, bind: () => {} }); link = graphDirective({} as any, {}, {} as any, {} as any).link(scope, {
width: () => 500,
mouseleave: () => {},
bind: () => {},
} as any);
if (typeof beforeRender === 'function') { if (typeof beforeRender === 'function') {
beforeRender(); beforeRender();
} }
@ -555,9 +559,9 @@ describe('grafanaGraph', () => {
}); });
it('should not contain values lower than min', () => { it('should not contain values lower than min', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(200); expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(200);
expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
}); });
}); });
@ -576,9 +580,9 @@ describe('grafanaGraph', () => {
}); });
it('should not contain values lower than zero', () => { it('should not contain values lower than zero', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
}); });
}); });
@ -597,9 +601,9 @@ describe('grafanaGraph', () => {
}); });
it('xaxis min should not affect the histogram', () => { it('xaxis min should not affect the histogram', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(-100); expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(-100);
expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
}); });
}); });
@ -618,9 +622,9 @@ describe('grafanaGraph', () => {
}); });
it('xaxis min should not affect the histogram', () => { it('xaxis min should not affect the histogram', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(-100); expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(-100);
expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
}); });
}); });
@ -639,9 +643,9 @@ describe('grafanaGraph', () => {
}); });
it('should not contain values greater than max', () => { it('should not contain values greater than max', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(200); expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(200);
}); });
}); });
@ -660,9 +664,9 @@ describe('grafanaGraph', () => {
}); });
it('should not contain values greater than zero', () => { it('should not contain values greater than zero', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(-100); expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(-100);
expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(-100); expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(-100);
}); });
}); });
@ -681,9 +685,9 @@ describe('grafanaGraph', () => {
}); });
it('xaxis max should not affect the histogram', () => { it('xaxis max should not affect the histogram', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(-100); expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(-100);
expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
}); });
}); });
@ -702,9 +706,9 @@ describe('grafanaGraph', () => {
}); });
it('xaxis max should not should node affect the histogram', () => { it('xaxis max should not should node affect the histogram', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(-100); expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(-100);
expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
}); });
}); });
@ -724,9 +728,9 @@ describe('grafanaGraph', () => {
}); });
it('should not contain values lower than min and greater than max', () => { it('should not contain values lower than min and greater than max', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(200); expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(200);
expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(200); expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(200);
}); });
}); });
@ -746,9 +750,9 @@ describe('grafanaGraph', () => {
}); });
it('xaxis max should be ignored otherwise the bucketSize is zero', () => { it('xaxis max should be ignored otherwise the bucketSize is zero', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
}); });
}); });
@ -768,9 +772,9 @@ describe('grafanaGraph', () => {
}); });
it('xaxis min and max should not affect the histogram', () => { it('xaxis min and max should not affect the histogram', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
}); });
}); });
@ -790,9 +794,9 @@ describe('grafanaGraph', () => {
}); });
it('xaxis min and max should not affect the histogram', () => { it('xaxis min and max should not affect the histogram', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
}); });
}); });
@ -812,9 +816,9 @@ describe('grafanaGraph', () => {
}); });
it('xaxis max should be ignored otherwise the bucketSize is negative', () => { it('xaxis max should be ignored otherwise the bucketSize is negative', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(200); expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(200);
expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
}); });
}); });
@ -834,9 +838,9 @@ describe('grafanaGraph', () => {
}); });
it('xaxis min should be ignored otherwise the bucketSize is negative', () => { it('xaxis min should be ignored otherwise the bucketSize is negative', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
}); });
}); });
@ -855,9 +859,9 @@ describe('grafanaGraph', () => {
}); });
it('xaxis min should be ignored otherwise the bucketSize is zero', () => { it('xaxis min should be ignored otherwise the bucketSize is zero', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
}); });
}); });
@ -876,9 +880,9 @@ describe('grafanaGraph', () => {
}); });
it('xaxis min should not affect the histogram', () => { it('xaxis min should not affect the histogram', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
}); });
}); });
@ -897,9 +901,9 @@ describe('grafanaGraph', () => {
}); });
it('should calculate correct histogram', () => { it('should calculate correct histogram', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(100); expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
}); });
}); });
@ -918,7 +922,7 @@ describe('grafanaGraph', () => {
}); });
it('should calculate empty histogram', () => { it('should calculate empty histogram', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(nonZero.length).toBe(0); expect(nonZero.length).toBe(0);
}); });
}); });
@ -938,9 +942,9 @@ describe('grafanaGraph', () => {
}); });
it('should calculate correct histogram', () => { it('should calculate correct histogram', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
}); });
}); });
}); });

4
public/app/plugins/panel/graph/specs/graph_ctrl.test.ts
View File

@ -33,7 +33,7 @@ describe('GraphCtrl', () => {
const ctx = {} as any; const ctx = {} as any;
beforeEach(() => { beforeEach(() => {
ctx.ctrl = new GraphCtrl(scope, injector, {}); ctx.ctrl = new GraphCtrl(scope, injector as any, {} as any);
ctx.ctrl.events = { ctx.ctrl.events = {
emit: () => {}, emit: () => {},
}; };
@ -86,7 +86,7 @@ describe('GraphCtrl', () => {
describe('datapointsCount given 2 series', () => { describe('datapointsCount given 2 series', () => {
beforeEach(() => { beforeEach(() => {
const data = [{ target: 'test.cpu1', datapoints: [] }, { target: 'test.cpu2', datapoints: [] }]; const data: any = [{ target: 'test.cpu1', datapoints: [] }, { target: 'test.cpu2', datapoints: [] }];
ctx.ctrl.onDataReceived(data); ctx.ctrl.onDataReceived(data);
}); });

16
public/app/plugins/panel/graph/specs/graph_tooltip.test.ts
View File

@ -13,7 +13,7 @@ const elem = $('<div></div>');
const dashboard = {}; const dashboard = {};
const getSeriesFn = () => {}; const getSeriesFn = () => {};
function describeSharedTooltip(desc, fn) { function describeSharedTooltip(desc: string, fn: any) {
const ctx: any = {}; const ctx: any = {};
ctx.ctrl = scope.ctrl; ctx.ctrl = scope.ctrl;
ctx.ctrl.panel = { ctx.ctrl.panel = {
@ -24,13 +24,14 @@ function describeSharedTooltip(desc, fn) {
stack: false, stack: false,
}; };
ctx.setup = setupFn => { ctx.setup = (setupFn: any) => {
ctx.setupFn = setupFn; ctx.setupFn = setupFn;
}; };
describe(desc, () => { describe(desc, () => {
beforeEach(() => { beforeEach(() => {
ctx.setupFn(); ctx.setupFn();
// @ts-ignore
const tooltip = new GraphTooltip(elem, dashboard, scope, getSeriesFn); const tooltip = new GraphTooltip(elem, dashboard, scope, getSeriesFn);
ctx.results = tooltip.getMultiSeriesPlotHoverInfo(ctx.data, ctx.pos); ctx.results = tooltip.getMultiSeriesPlotHoverInfo(ctx.data, ctx.pos);
}); });
@ -40,6 +41,7 @@ function describeSharedTooltip(desc, fn) {
} }
describe('findHoverIndexFromData', () => { describe('findHoverIndexFromData', () => {
// @ts-ignore
const tooltip = new GraphTooltip(elem, dashboard, scope, getSeriesFn); const tooltip = new GraphTooltip(elem, dashboard, scope, getSeriesFn);
const series = { const series = {
data: [[100, 0], [101, 0], [102, 0], [103, 0], [104, 0], [105, 0], [106, 0], [107, 0]], data: [[100, 0], [101, 0], [102, 0], [103, 0], [104, 0], [105, 0], [106, 0], [107, 0]],
@ -66,7 +68,7 @@ describe('findHoverIndexFromData', () => {
}); });
}); });
describeSharedTooltip('steppedLine false, stack false', ctx => { describeSharedTooltip('steppedLine false, stack false', (ctx: any) => {
ctx.setup(() => { ctx.setup(() => {
ctx.data = [ ctx.data = [
{ data: [[10, 15], [12, 20]], lines: {}, hideTooltip: false }, { data: [[10, 15], [12, 20]], lines: {}, hideTooltip: false },
@ -90,14 +92,14 @@ describeSharedTooltip('steppedLine false, stack false', ctx => {
}); });
}); });
describeSharedTooltip('one series is hidden', ctx => { describeSharedTooltip('one series is hidden', (ctx: any) => {
ctx.setup(() => { ctx.setup(() => {
ctx.data = [{ data: [[10, 15], [12, 20]] }, { data: [] }]; ctx.data = [{ data: [[10, 15], [12, 20]] }, { data: [] }];
ctx.pos = { x: 11 }; ctx.pos = { x: 11 };
}); });
}); });
describeSharedTooltip('steppedLine false, stack true, individual false', ctx => { describeSharedTooltip('steppedLine false, stack true, individual false', (ctx: any) => {
ctx.setup(() => { ctx.setup(() => {
ctx.data = [ ctx.data = [
{ {
@ -130,7 +132,7 @@ describeSharedTooltip('steppedLine false, stack true, individual false', ctx =>
}); });
}); });
describeSharedTooltip('steppedLine false, stack true, individual false, series stack false', ctx => { describeSharedTooltip('steppedLine false, stack true, individual false, series stack false', (ctx: any) => {
ctx.setup(() => { ctx.setup(() => {
ctx.data = [ ctx.data = [
{ {
@ -163,7 +165,7 @@ describeSharedTooltip('steppedLine false, stack true, individual false, series s
}); });
}); });
describeSharedTooltip('steppedLine false, stack true, individual true', ctx => { describeSharedTooltip('steppedLine false, stack true, individual true', (ctx: any) => {
ctx.setup(() => { ctx.setup(() => {
ctx.data = [ ctx.data = [
{ {

4
public/app/plugins/panel/graph/specs/histogram.test.ts
View File

@ -2,7 +2,7 @@ import { convertValuesToHistogram, getSeriesValues } from '../histogram';
describe('Graph Histogam Converter', () => { describe('Graph Histogam Converter', () => {
describe('Values to histogram converter', () => { describe('Values to histogram converter', () => {
let values; let values: any;
let bucketSize = 10; let bucketSize = 10;
beforeEach(() => { beforeEach(() => {
@ -27,7 +27,7 @@ describe('Graph Histogam Converter', () => {
}); });
describe('Series to values converter', () => { describe('Series to values converter', () => {
let data; let data: any;
beforeEach(() => { beforeEach(() => {
data = [ data = [

4
public/app/plugins/panel/graph/specs/series_override_ctrl.test.ts
View File

@ -3,7 +3,7 @@ import { SeriesOverridesCtrl } from '../series_overrides_ctrl';
describe('SeriesOverridesCtrl', () => { describe('SeriesOverridesCtrl', () => {
const popoverSrv = {}; const popoverSrv = {};
let $scope; let $scope: any;
beforeEach(() => { beforeEach(() => {
$scope = { $scope = {
@ -14,7 +14,7 @@ describe('SeriesOverridesCtrl', () => {
}, },
render: jest.fn(() => {}), render: jest.fn(() => {}),
}; };
SeriesOverridesCtrl($scope, {}, popoverSrv); SeriesOverridesCtrl($scope, {} as JQuery, popoverSrv);
}); });
describe('When setting an override', () => { describe('When setting an override', () => {

14
public/app/plugins/panel/graph/specs/threshold_manager.test.ts
View File

@ -3,7 +3,7 @@ import TimeSeries from 'app/core/time_series2';
import { ThresholdManager } from '../threshold_manager'; import { ThresholdManager } from '../threshold_manager';
describe('ThresholdManager', () => { describe('ThresholdManager', () => {
function plotOptionsScenario(desc, func) { function plotOptionsScenario(desc: string, func: any) {
describe(desc, () => { describe(desc, () => {
const ctx: any = { const ctx: any = {
panel: { panel: {
@ -15,7 +15,7 @@ describe('ThresholdManager', () => {
panelCtrl: {}, panelCtrl: {},
}; };
ctx.setup = (thresholds, data) => { ctx.setup = (thresholds: any, data: any) => {
ctx.panel.thresholds = thresholds; ctx.panel.thresholds = thresholds;
const manager = new ThresholdManager(ctx.panelCtrl); const manager = new ThresholdManager(ctx.panelCtrl);
if (data !== undefined) { if (data !== undefined) {
@ -30,7 +30,7 @@ describe('ThresholdManager', () => {
} }
describe('When creating plot markings', () => { describe('When creating plot markings', () => {
plotOptionsScenario('for simple gt threshold', ctx => { plotOptionsScenario('for simple gt threshold', (ctx: any) => {
ctx.setup([{ op: 'gt', value: 300, fill: true, line: true, colorMode: 'critical' }]); ctx.setup([{ op: 'gt', value: 300, fill: true, line: true, colorMode: 'critical' }]);
it('should add fill for threshold with fill: true', () => { it('should add fill for threshold with fill: true', () => {
@ -49,7 +49,7 @@ describe('ThresholdManager', () => {
}); });
}); });
plotOptionsScenario('for two gt thresholds', ctx => { plotOptionsScenario('for two gt thresholds', (ctx: any) => {
ctx.setup([ ctx.setup([
{ op: 'gt', value: 200, fill: true, colorMode: 'warning' }, { op: 'gt', value: 200, fill: true, colorMode: 'warning' },
{ op: 'gt', value: 300, fill: true, colorMode: 'critical' }, { op: 'gt', value: 300, fill: true, colorMode: 'critical' },
@ -68,7 +68,7 @@ describe('ThresholdManager', () => {
}); });
}); });
plotOptionsScenario('for lt then gt threshold (inside)', ctx => { plotOptionsScenario('for lt then gt threshold (inside)', (ctx: any) => {
ctx.setup([ ctx.setup([
{ op: 'lt', value: 300, fill: true, colorMode: 'critical' }, { op: 'lt', value: 300, fill: true, colorMode: 'critical' },
{ op: 'gt', value: 200, fill: true, colorMode: 'critical' }, { op: 'gt', value: 200, fill: true, colorMode: 'critical' },
@ -87,7 +87,7 @@ describe('ThresholdManager', () => {
}); });
}); });
plotOptionsScenario('for gt then lt threshold (outside)', ctx => { plotOptionsScenario('for gt then lt threshold (outside)', (ctx: any) => {
ctx.setup([ ctx.setup([
{ op: 'gt', value: 300, fill: true, colorMode: 'critical' }, { op: 'gt', value: 300, fill: true, colorMode: 'critical' },
{ op: 'lt', value: 200, fill: true, colorMode: 'critical' }, { op: 'lt', value: 200, fill: true, colorMode: 'critical' },
@ -106,7 +106,7 @@ describe('ThresholdManager', () => {
}); });
}); });
plotOptionsScenario('for threshold on two Y axes', ctx => { plotOptionsScenario('for threshold on two Y axes', (ctx: any) => {
const data = new Array(2); const data = new Array(2);
data[0] = new TimeSeries({ data[0] = new TimeSeries({
datapoints: [[0, 1], [300, 2]], datapoints: [[0, 1], [300, 2]],

32
public/app/plugins/panel/graph/specs/time_region_manager.test.ts
View File

@ -2,7 +2,7 @@ import { TimeRegionManager, colorModes } from '../time_region_manager';
import { dateTime } from '@grafana/ui/src/utils/moment_wrapper'; import { dateTime } from '@grafana/ui/src/utils/moment_wrapper';
describe('TimeRegionManager', () => { describe('TimeRegionManager', () => {
function plotOptionsScenario(desc, func) { function plotOptionsScenario(desc: string, func: any) {
describe(desc, () => { describe(desc, () => {
const ctx: any = { const ctx: any = {
panel: { panel: {
@ -19,7 +19,7 @@ describe('TimeRegionManager', () => {
}, },
}; };
ctx.setup = (regions, from, to) => { ctx.setup = (regions: any, from: any, to: any) => {
ctx.panel.timeRegions = regions; ctx.panel.timeRegions = regions;
ctx.panelCtrl.range.from = from; ctx.panelCtrl.range.from = from;
ctx.panelCtrl.range.to = to; ctx.panelCtrl.range.to = to;
@ -46,7 +46,7 @@ describe('TimeRegionManager', () => {
} }
describe('When colors missing in config', () => { describe('When colors missing in config', () => {
plotOptionsScenario('should not throw an error when fillColor is undefined', ctx => { plotOptionsScenario('should not throw an error when fillColor is undefined', (ctx: any) => {
const regions = [ const regions = [
{ fromDayOfWeek: 1, toDayOfWeek: 1, fill: true, line: true, lineColor: '#ffffff', colorMode: 'custom' }, { fromDayOfWeek: 1, toDayOfWeek: 1, fill: true, line: true, lineColor: '#ffffff', colorMode: 'custom' },
]; ];
@ -54,7 +54,7 @@ describe('TimeRegionManager', () => {
const to = dateTime('2018-01-01T23:59:00+01:00'); const to = dateTime('2018-01-01T23:59:00+01:00');
expect(() => ctx.setup(regions, from, to)).not.toThrow(); expect(() => ctx.setup(regions, from, to)).not.toThrow();
}); });
plotOptionsScenario('should not throw an error when lineColor is undefined', ctx => { plotOptionsScenario('should not throw an error when lineColor is undefined', (ctx: any) => {
const regions = [ const regions = [
{ fromDayOfWeek: 1, toDayOfWeek: 1, fill: true, fillColor: '#ffffff', line: true, colorMode: 'custom' }, { fromDayOfWeek: 1, toDayOfWeek: 1, fill: true, fillColor: '#ffffff', line: true, colorMode: 'custom' },
]; ];
@ -65,7 +65,7 @@ describe('TimeRegionManager', () => {
}); });
describe('When creating plot markings using local time', () => { describe('When creating plot markings using local time', () => {
plotOptionsScenario('for day of week region', ctx => { plotOptionsScenario('for day of week region', (ctx: any) => {
const regions = [{ fromDayOfWeek: 1, toDayOfWeek: 1, fill: true, line: true, colorMode: 'red' }]; const regions = [{ fromDayOfWeek: 1, toDayOfWeek: 1, fill: true, line: true, colorMode: 'red' }];
const from = dateTime('2018-01-01T00:00:00+01:00'); const from = dateTime('2018-01-01T00:00:00+01:00');
const to = dateTime('2018-01-01T23:59:00+01:00'); const to = dateTime('2018-01-01T23:59:00+01:00');
@ -97,7 +97,7 @@ describe('TimeRegionManager', () => {
}); });
}); });
plotOptionsScenario('for time from region', ctx => { plotOptionsScenario('for time from region', (ctx: any) => {
const regions = [{ from: '05:00', fill: true, colorMode: 'red' }]; const regions = [{ from: '05:00', fill: true, colorMode: 'red' }];
const from = dateTime('2018-01-01T00:00+01:00'); const from = dateTime('2018-01-01T00:00+01:00');
const to = dateTime('2018-01-03T23:59+01:00'); const to = dateTime('2018-01-03T23:59+01:00');
@ -124,7 +124,7 @@ describe('TimeRegionManager', () => {
}); });
}); });
plotOptionsScenario('for time to region', ctx => { plotOptionsScenario('for time to region', (ctx: any) => {
const regions = [{ to: '05:00', fill: true, colorMode: 'red' }]; const regions = [{ to: '05:00', fill: true, colorMode: 'red' }];
const from = dateTime('2018-02-01T00:00+01:00'); const from = dateTime('2018-02-01T00:00+01:00');
const to = dateTime('2018-02-03T23:59+01:00'); const to = dateTime('2018-02-03T23:59+01:00');
@ -151,7 +151,7 @@ describe('TimeRegionManager', () => {
}); });
}); });
plotOptionsScenario('for time from/to region', ctx => { plotOptionsScenario('for time from/to region', (ctx: any) => {
const regions = [{ from: '00:00', to: '05:00', fill: true, colorMode: 'red' }]; const regions = [{ from: '00:00', to: '05:00', fill: true, colorMode: 'red' }];
const from = dateTime('2018-12-01T00:00+01:00'); const from = dateTime('2018-12-01T00:00+01:00');
const to = dateTime('2018-12-03T23:59+01:00'); const to = dateTime('2018-12-03T23:59+01:00');
@ -178,7 +178,7 @@ describe('TimeRegionManager', () => {
}); });
}); });
plotOptionsScenario('for time from/to region crossing midnight', ctx => { plotOptionsScenario('for time from/to region crossing midnight', (ctx: any) => {
const regions = [{ from: '22:00', to: '00:30', fill: true, colorMode: 'red' }]; const regions = [{ from: '22:00', to: '00:30', fill: true, colorMode: 'red' }];
const from = dateTime('2018-12-01T12:00+01:00'); const from = dateTime('2018-12-01T12:00+01:00');
const to = dateTime('2018-12-04T08:00+01:00'); const to = dateTime('2018-12-04T08:00+01:00');
@ -205,7 +205,7 @@ describe('TimeRegionManager', () => {
}); });
}); });
plotOptionsScenario('for day of week from/to region', ctx => { plotOptionsScenario('for day of week from/to region', (ctx: any) => {
const regions = [{ fromDayOfWeek: 7, toDayOfWeek: 7, fill: true, colorMode: 'red' }]; const regions = [{ fromDayOfWeek: 7, toDayOfWeek: 7, fill: true, colorMode: 'red' }];
const from = dateTime('2018-01-01T18:45:05+01:00'); const from = dateTime('2018-01-01T18:45:05+01:00');
const to = dateTime('2018-01-22T08:27:00+01:00'); const to = dateTime('2018-01-22T08:27:00+01:00');
@ -232,7 +232,7 @@ describe('TimeRegionManager', () => {
}); });
}); });
plotOptionsScenario('for day of week from region', ctx => { plotOptionsScenario('for day of week from region', (ctx: any) => {
const regions = [{ fromDayOfWeek: 7, fill: true, colorMode: 'red' }]; const regions = [{ fromDayOfWeek: 7, fill: true, colorMode: 'red' }];
const from = dateTime('2018-01-01T18:45:05+01:00'); const from = dateTime('2018-01-01T18:45:05+01:00');
const to = dateTime('2018-01-22T08:27:00+01:00'); const to = dateTime('2018-01-22T08:27:00+01:00');
@ -259,7 +259,7 @@ describe('TimeRegionManager', () => {
}); });
}); });
plotOptionsScenario('for day of week to region', ctx => { plotOptionsScenario('for day of week to region', (ctx: any) => {
const regions = [{ toDayOfWeek: 7, fill: true, colorMode: 'red' }]; const regions = [{ toDayOfWeek: 7, fill: true, colorMode: 'red' }];
const from = dateTime('2018-01-01T18:45:05+01:00'); const from = dateTime('2018-01-01T18:45:05+01:00');
const to = dateTime('2018-01-22T08:27:00+01:00'); const to = dateTime('2018-01-22T08:27:00+01:00');
@ -286,7 +286,7 @@ describe('TimeRegionManager', () => {
}); });
}); });
plotOptionsScenario('for day of week from/to time region', ctx => { plotOptionsScenario('for day of week from/to time region', (ctx: any) => {
const regions = [{ fromDayOfWeek: 7, from: '23:00', toDayOfWeek: 1, to: '01:40', fill: true, colorMode: 'red' }]; const regions = [{ fromDayOfWeek: 7, from: '23:00', toDayOfWeek: 1, to: '01:40', fill: true, colorMode: 'red' }];
const from = dateTime('2018-12-07T12:51:19+01:00'); const from = dateTime('2018-12-07T12:51:19+01:00');
const to = dateTime('2018-12-10T13:51:29+01:00'); const to = dateTime('2018-12-10T13:51:29+01:00');
@ -304,7 +304,7 @@ describe('TimeRegionManager', () => {
}); });
}); });
plotOptionsScenario('for day of week from/to time region', ctx => { plotOptionsScenario('for day of week from/to time region', (ctx: any) => {
const regions = [{ fromDayOfWeek: 6, from: '03:00', toDayOfWeek: 7, to: '02:00', fill: true, colorMode: 'red' }]; const regions = [{ fromDayOfWeek: 6, from: '03:00', toDayOfWeek: 7, to: '02:00', fill: true, colorMode: 'red' }];
const from = dateTime('2018-12-07T12:51:19+01:00'); const from = dateTime('2018-12-07T12:51:19+01:00');
const to = dateTime('2018-12-10T13:51:29+01:00'); const to = dateTime('2018-12-10T13:51:29+01:00');
@ -322,7 +322,7 @@ describe('TimeRegionManager', () => {
}); });
}); });
plotOptionsScenario('for day of week from/to time region with daylight saving time', ctx => { plotOptionsScenario('for day of week from/to time region with daylight saving time', (ctx: any) => {
const regions = [{ fromDayOfWeek: 7, from: '20:00', toDayOfWeek: 7, to: '23:00', fill: true, colorMode: 'red' }]; const regions = [{ fromDayOfWeek: 7, from: '20:00', toDayOfWeek: 7, to: '23:00', fill: true, colorMode: 'red' }];
const from = dateTime('2018-03-17T06:00:00+01:00'); const from = dateTime('2018-03-17T06:00:00+01:00');
const to = dateTime('2018-04-03T06:00:00+02:00'); const to = dateTime('2018-04-03T06:00:00+02:00');
@ -346,7 +346,7 @@ describe('TimeRegionManager', () => {
}); });
}); });
plotOptionsScenario('for each day of week with winter time', ctx => { plotOptionsScenario('for each day of week with winter time', (ctx: any) => {
const regions = [{ fromDayOfWeek: 7, toDayOfWeek: 7, fill: true, colorMode: 'red' }]; const regions = [{ fromDayOfWeek: 7, toDayOfWeek: 7, fill: true, colorMode: 'red' }];
const from = dateTime('2018-10-20T14:50:11+02:00'); const from = dateTime('2018-10-20T14:50:11+02:00');
const to = dateTime('2018-11-07T12:56:23+01:00'); const to = dateTime('2018-11-07T12:56:23+01:00');

14
public/app/plugins/panel/graph/thresholds_form.ts
View File

@ -7,7 +7,7 @@ export class ThresholdFormCtrl {
disabled: boolean; disabled: boolean;
/** @ngInject */ /** @ngInject */
constructor($scope) { constructor($scope: any) {
this.panel = this.panelCtrl.panel; this.panel = this.panelCtrl.panel;
if (this.panel.alert) { if (this.panel.alert) {
@ -35,7 +35,7 @@ export class ThresholdFormCtrl {
this.panelCtrl.render(); this.panelCtrl.render();
} }
removeThreshold(index) { removeThreshold(index: number) {
this.panel.thresholds.splice(index, 1); this.panel.thresholds.splice(index, 1);
this.panelCtrl.render(); this.panelCtrl.render();
} }
@ -44,21 +44,21 @@ export class ThresholdFormCtrl {
this.panelCtrl.render(); this.panelCtrl.render();
} }
onFillColorChange(index) { onFillColorChange(index: number) {
return newColor => { return (newColor: string) => {
this.panel.thresholds[index].fillColor = newColor; this.panel.thresholds[index].fillColor = newColor;
this.render(); this.render();
}; };
} }
onLineColorChange(index) { onLineColorChange(index: number) {
return newColor => { return (newColor: string) => {
this.panel.thresholds[index].lineColor = newColor; this.panel.thresholds[index].lineColor = newColor;
this.render(); this.render();
}; };
} }
onThresholdTypeChange(index) { onThresholdTypeChange(index: number) {
// Because of the ng-model binding, threshold's color mode is already set here // Because of the ng-model binding, threshold's color mode is already set here
if (this.panel.thresholds[index].colorMode === 'custom') { if (this.panel.thresholds[index].colorMode === 'custom') {
this.panel.thresholds[index].fillColor = tinycolor(config.theme.colors.blueBase) this.panel.thresholds[index].fillColor = tinycolor(config.theme.colors.blueBase)

6
public/app/plugins/panel/heatmap/specs/heatmap_ctrl.test.ts
View File

@ -27,7 +27,7 @@ describe('HeatmapCtrl', () => {
describe('when time series are outside range', () => { describe('when time series are outside range', () => {
beforeEach(() => { beforeEach(() => {
const data = [ const data: any = [
{ {
target: 'test.cpu1', target: 'test.cpu1',
datapoints: [[45, 1234567890], [60, 1234567899]], datapoints: [[45, 1234567890], [60, 1234567899]],
@ -52,7 +52,7 @@ describe('HeatmapCtrl', () => {
to: dateTime().valueOf(), to: dateTime().valueOf(),
}; };
const data = [ const data: any = [
{ {
target: 'test.cpu1', target: 'test.cpu1',
datapoints: [[45, range.from + 1000], [60, range.from + 10000]], datapoints: [[45, range.from + 1000], [60, range.from + 10000]],
@ -70,7 +70,7 @@ describe('HeatmapCtrl', () => {
describe('datapointsCount given 2 series', () => { describe('datapointsCount given 2 series', () => {
beforeEach(() => { beforeEach(() => {
const data = [{ target: 'test.cpu1', datapoints: [] }, { target: 'test.cpu2', datapoints: [] }]; const data: any = [{ target: 'test.cpu1', datapoints: [] }, { target: 'test.cpu2', datapoints: [] }];
ctx.ctrl.onDataReceived(data); ctx.ctrl.onDataReceived(data);
}); });

14
public/app/plugins/panel/table/module.ts
View File

@ -17,7 +17,7 @@ class TablePanelCtrl extends MetricsPanelCtrl {
table: any; table: any;
renderer: any; renderer: any;
panelDefaults = { panelDefaults: any = {
targets: [{}], targets: [{}],
transform: 'timeseries_to_columns', transform: 'timeseries_to_columns',
pageSize: null, pageSize: null,
@ -180,7 +180,7 @@ class TablePanelCtrl extends MetricsPanelCtrl {
} }
link(scope: any, elem: JQuery, attrs: any, ctrl: TablePanelCtrl) { link(scope: any, elem: JQuery, attrs: any, ctrl: TablePanelCtrl) {
let data; let data: any;
const panel = ctrl.panel; const panel = ctrl.panel;
let pageCount = 0; let pageCount = 0;
@ -194,19 +194,19 @@ class TablePanelCtrl extends MetricsPanelCtrl {
return panelHeight - 31 + 'px'; return panelHeight - 31 + 'px';
} }
function appendTableRows(tbodyElem) { function appendTableRows(tbodyElem: JQuery) {
ctrl.renderer.setTable(data); ctrl.renderer.setTable(data);
tbodyElem.empty(); tbodyElem.empty();
tbodyElem.html(ctrl.renderer.render(ctrl.pageIndex)); tbodyElem.html(ctrl.renderer.render(ctrl.pageIndex));
} }
function switchPage(e) { function switchPage(e: any) {
const el = $(e.currentTarget); const el = $(e.currentTarget);
ctrl.pageIndex = parseInt(el.text(), 10) - 1; ctrl.pageIndex = parseInt(el.text(), 10) - 1;
renderPanel(); renderPanel();
} }
function appendPaginationControls(footerElem) { function appendPaginationControls(footerElem: JQuery) {
footerElem.empty(); footerElem.empty();
const pageSize = panel.pageSize || 100; const pageSize = panel.pageSize || 100;
@ -251,7 +251,7 @@ class TablePanelCtrl extends MetricsPanelCtrl {
selector: '[data-link-tooltip]', selector: '[data-link-tooltip]',
}); });
function addFilterClicked(e) { function addFilterClicked(e: any) {
const filterData = $(e.currentTarget).data(); const filterData = $(e.currentTarget).data();
const options = { const options = {
datasource: panel.datasource, datasource: panel.datasource,
@ -272,7 +272,7 @@ class TablePanelCtrl extends MetricsPanelCtrl {
unbindDestroy(); unbindDestroy();
}); });
ctrl.events.on('render', renderData => { ctrl.events.on('render', (renderData: any) => {
data = renderData || data; data = renderData || data;
if (data) { if (data) {
renderPanel(); renderPanel();

1
public/app/routes/GrafanaCtrl.ts
View File

@ -1,6 +1,7 @@
// Libraries // Libraries
import _ from 'lodash'; import _ from 'lodash';
import $ from 'jquery'; import $ from 'jquery';
// @ts-ignore
import Drop from 'tether-drop'; import Drop from 'tether-drop';
// Utils and servies // Utils and servies

6
public/app/routes/registry.ts
View File

@ -1,10 +1,12 @@
import { route } from 'angular';
interface RegisterRoutesHandler { interface RegisterRoutesHandler {
($routeProvider): any; ($routeProvider: route.IRouteProvider): any;
} }
const handlers: RegisterRoutesHandler[] = []; const handlers: RegisterRoutesHandler[] = [];
export function applyRouteRegistrationHandlers($routeProvider) { export function applyRouteRegistrationHandlers($routeProvider: route.IRouteProvider) {
for (const handler of handlers) { for (const handler of handlers) {
handler($routeProvider); handler($routeProvider);
} }

4
public/app/store/store.ts
View File

@ -1,5 +1,5 @@
export let store; export let store: any;
export function setStore(newStore) { export function setStore(newStore: any) {
store = newStore; store = newStore;
} }

1
public/e2e-test/core/pages.ts
View File

@ -49,6 +49,7 @@ export class TestPage<T> implements TestPageType<T> {
} }
Object.keys(this.pageObjects).forEach(key => { Object.keys(this.pageObjects).forEach(key => {
// @ts-ignore
const pageObject: PageObject = this.pageObjects[key]; const pageObject: PageObject = this.pageObjects[key];
pageObject.init(page); pageObject.init(page);
}); });

1
public/test/core/redux/epicTester.ts
View File

@ -106,6 +106,7 @@ export const epicTester = (
}; };
const getDependencyMock = (dependency: string, method?: string) => { const getDependencyMock = (dependency: string, method?: string) => {
// @ts-ignore
const dep = theDependencies[dependency]; const dep = theDependencies[dependency];
let mock = null; let mock = null;
if (dep instanceof Function) { if (dep instanceof Function) {

2
scripts/ci-frontend-metrics.sh
View File

@ -3,7 +3,7 @@
echo -e "Collecting code stats (typescript errors & more)" echo -e "Collecting code stats (typescript errors & more)"
ERROR_COUNT_LIMIT=4400 ERROR_COUNT_LIMIT=3789
DIRECTIVES_LIMIT=172 DIRECTIVES_LIMIT=172
CONTROLLERS_LIMIT=139 CONTROLLERS_LIMIT=139

5
yarn.lock
View File

@ -2376,6 +2376,11 @@
version "1.4.1" version "1.4.1"
resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.1.tgz#2f5670c9d1d6e558897a810ed284b44918fc1253" resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.1.tgz#2f5670c9d1d6e558897a810ed284b44918fc1253"
"@types/tinycolor2@1.4.2":
version "1.4.2"
resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.2.tgz#721ca5c5d1a2988b4a886e35c2ffc5735b6afbdf"
integrity sha512-PeHg/AtdW6aaIO2a+98Xj7rWY4KC1E6yOy7AFknJQ7VXUGNrMlyxDFxJo7HqLtjQms/ZhhQX52mLVW/EX3JGOw==
"@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2": "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
version "2.0.3" version "2.0.3"
resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e" resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"