From dbafc8c9dbdc18a5aa679c9d6ee309a9b9d7d3de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 14 Jan 2016 13:21:05 +0100 Subject: [PATCH] feat(plugins): work on plugin directive loading --- public/app/features/panel/all.js | 1 + public/app/features/panel/panel_directive.js | 22 +- public/app/features/panel/panel_loader.ts | 22 ++ public/app/panels/graph/alerting.html | 220 ----------------- public/app/partials/dashboard.html | 2 +- public/app/plugins/panel/dashlist/module.js | 23 +- public/app/plugins/panel/graph/graph.js | 2 +- .../plugins/panel/graph/graph_tooltip.d.ts | 2 + .../{graph.tooltip.js => graph_tooltip.js} | 0 public/app/plugins/panel/graph/module.d.ts | 3 + public/app/plugins/panel/graph/module.js | 24 +- .../panel/graph/specs/graph_ctrl_specs.ts | 53 ++++ .../plugins/panel/graph/specs/graph_specs.ts | 230 +++++++++++++++++ .../panel/graph/specs/tooltip_specs.ts | 171 +++++++++++++ public/test/specs/graph-ctrl-specs.js | 51 ---- public/test/specs/graph-specs.js | 231 ------------------ public/test/specs/graph-tooltip-specs.js | 171 ------------- public/test/specs/helpers.d.ts | 6 +- 18 files changed, 514 insertions(+), 720 deletions(-) create mode 100644 public/app/features/panel/panel_loader.ts delete mode 100644 public/app/panels/graph/alerting.html create mode 100644 public/app/plugins/panel/graph/graph_tooltip.d.ts rename public/app/plugins/panel/graph/{graph.tooltip.js => graph_tooltip.js} (100%) create mode 100644 public/app/plugins/panel/graph/module.d.ts create mode 100644 public/app/plugins/panel/graph/specs/graph_ctrl_specs.ts create mode 100644 public/app/plugins/panel/graph/specs/graph_specs.ts create mode 100644 public/app/plugins/panel/graph/specs/tooltip_specs.ts delete mode 100644 public/test/specs/graph-ctrl-specs.js delete mode 100644 public/test/specs/graph-specs.js delete mode 100644 public/test/specs/graph-tooltip-specs.js diff --git a/public/app/features/panel/all.js b/public/app/features/panel/all.js index bb687b035b5..da755ef65a9 100644 --- a/public/app/features/panel/all.js +++ b/public/app/features/panel/all.js @@ -4,4 +4,5 @@ define([ './panel_srv', './panel_helper', './solo_panel_ctrl', + './panel_loader', ], function () {}); diff --git a/public/app/features/panel/panel_directive.js b/public/app/features/panel/panel_directive.js index dd583d86f85..2259a6d450b 100644 --- a/public/app/features/panel/panel_directive.js +++ b/public/app/features/panel/panel_directive.js @@ -1,32 +1,12 @@ define([ 'angular', 'jquery', - 'app/core/config', ], -function (angular, $, config) { +function (angular, $) { 'use strict'; var module = angular.module('grafana.directives'); - module.directive('panelLoader', function($compile, $parse) { - return { - restrict: 'E', - link: function(scope, elem, attr) { - var getter = $parse(attr.type), panelType = getter(scope); - var module = config.panels[panelType].module; - - System.import(module).then(function() { - var panelEl = angular.element(document.createElement('grafana-panel-' + panelType)); - elem.append(panelEl); - $compile(panelEl)(scope); - }).catch(function(err) { - console.log('Failed to load panel:', err); - scope.appEvent('alert-error', ['Panel Load Error', 'Failed to load panel ' + panelType + ', ' + err]); - }); - } - }; - }); - module.directive('grafanaPanel', function() { return { restrict: 'E', diff --git a/public/app/features/panel/panel_loader.ts b/public/app/features/panel/panel_loader.ts new file mode 100644 index 00000000000..ebcb8d2631c --- /dev/null +++ b/public/app/features/panel/panel_loader.ts @@ -0,0 +1,22 @@ +/// + +import angular from 'angular'; +import config from 'app/core/config'; + +/** @ngInject */ +function panelLoader($parse, dynamicDirectiveSrv) { + return dynamicDirectiveSrv.create({ + directive: scope => { + let modulePath = config.panels[scope.panel.type].module; + + return System.import(modulePath).then(function(panelModule) { + return { + name: 'panel-directive-' + scope.panel.type, + fn: panelModule.panel, + }; + }); + }, + }); +} + +angular.module('grafana.directives').directive('panelLoader', panelLoader); diff --git a/public/app/panels/graph/alerting.html b/public/app/panels/graph/alerting.html deleted file mode 100644 index 9e08fc4f6cb..00000000000 --- a/public/app/panels/graph/alerting.html +++ /dev/null @@ -1,220 +0,0 @@ -
- Last updated by Grafana October 4, 2015 12:15:04 by $username -
-
General Alerting Options
-
-
    -
  • - Alert Title -
    • -
  • - -
    • -
  • - Alerting Backend -
    • -
  • - -
    • -
  • - - - -
    • -
-
-
-
-
-
-
Choose your query:
-

Select an exising query to alert on:

-
-
    -
    • -
  • None
    • -
-
-
-
-
    -
    • -
  • A
    • -
  • apps
    • -
    • -
  • fakesite
    • -
  • counters
    • -
  • requests
    • -
  • count
    • -
  • scaleToSeconds(1)
    • -
  • aliasByNode(2)
    • -
    • -
-
-
-
-
    -
    • -
  • B
    • -
  • Metric: us-west-2 AWS/EC2 CPUUtilization Stats: Minimum Maximum Dimensions InstanceIS = i-b0e8a447 Alias {{stat}} Period 60
    • -
    • -
-
-
-
-
    -
    • -
  • C
    • -
  • Query: avg(counters_logins) by(server) Legend Format: {{app}} - {{server}} Step: 1s Resolution: 1/2
    • -
    • -
-
-
-
-
    -
    • -
  • D
    • -
  • SELECT mean(value) FROM logins.count WHERE hostname = /$Hostname$/ GROUP BY time($internal) hostname
    • -
    • -
-
-
-
-
    -
    • -
  • E
    • -
  • Metric: apps.backend.backend_01.counters.requests.count Alias: Bristow Aggregator: Sum Downsample: 1m Aggregator Sum Tags host = test
    • -
    • -
-
-
-
-
-

Or write a new custom alerting query:

-
-
-
    -
    • -
  • - - - -
    • -
  • - select metric -
    • -
  • - -
    • -
-
-
-
-
-
-
-
Define Your States
-
-
    -
  • - by -
    • -
  • - -
    • -
  • - the values in the query over the last -
    • -
  • - -
    • -
-
-
-
-
-
-
-
-
    -
  • - Warn -
    • -
  • - -
    • -
  • - -
    • -
  • - .notify -
    • -
  • - -
    • -
  • - - - -
    • -
-
-
-
-
    -
  • - Critical -
    • -
  • - -
    • -
  • - -
    • -
  • - .notify -
    • -
  • - -
    • -
  • - - - -
    • -
-
-
-
-
-
-
-
What to Say Variables | Preview
-
-
    -
  • - Summary -
    • -
  • - -
    • -
-
-
-
-
    -
  • - Description -
    • -
  • - -
    • -
-
-
-
-
diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index 09c80fd3341..3234903ff8c 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -83,7 +83,7 @@
- +
diff --git a/public/app/plugins/panel/dashlist/module.js b/public/app/plugins/panel/dashlist/module.js index d9152566975..8ffee99ab2c 100644 --- a/public/app/plugins/panel/dashlist/module.js +++ b/public/app/plugins/panel/dashlist/module.js @@ -11,14 +11,8 @@ function (angular, app, _, config, PanelMeta) { var module = angular.module('grafana.panels.dashlist', []); app.useModule(module); - module.directive('grafanaPanelDashlist', function() { - return { - controller: 'DashListPanelCtrl', - templateUrl: 'app/plugins/panel/dashlist/module.html', - }; - }); - - module.controller('DashListPanelCtrl', function($scope, panelSrv, backendSrv) { + /** @ngInject */ + function DashListPanelCtrl($scope, panelSrv, backendSrv) { $scope.panelMeta = new PanelMeta({ panelName: 'Dashboard list', @@ -73,5 +67,16 @@ function (angular, app, _, config, PanelMeta) { }; $scope.init(); - }); + } + + function dashListPanelDirective() { + return { + controller: DashListPanelCtrl, + templateUrl: 'app/plugins/panel/dashlist/module.html', + }; + } + + return { + panel: dashListPanelDirective + }; }); diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js index 39c1c6707c1..1ebf75d9e73 100755 --- a/public/app/plugins/panel/graph/graph.js +++ b/public/app/plugins/panel/graph/graph.js @@ -4,7 +4,7 @@ define([ 'moment', 'lodash', 'app/core/utils/kbn', - './graph.tooltip', + './graph_tooltip', 'jquery.flot', 'jquery.flot.events', 'jquery.flot.selection', diff --git a/public/app/plugins/panel/graph/graph_tooltip.d.ts b/public/app/plugins/panel/graph/graph_tooltip.d.ts new file mode 100644 index 00000000000..40805903029 --- /dev/null +++ b/public/app/plugins/panel/graph/graph_tooltip.d.ts @@ -0,0 +1,2 @@ +declare var GraphTooltip: any; +export default GraphTooltip; diff --git a/public/app/plugins/panel/graph/graph.tooltip.js b/public/app/plugins/panel/graph/graph_tooltip.js similarity index 100% rename from public/app/plugins/panel/graph/graph.tooltip.js rename to public/app/plugins/panel/graph/graph_tooltip.js diff --git a/public/app/plugins/panel/graph/module.d.ts b/public/app/plugins/panel/graph/module.d.ts new file mode 100644 index 00000000000..f3fe6043d65 --- /dev/null +++ b/public/app/plugins/panel/graph/module.d.ts @@ -0,0 +1,3 @@ +declare var panel: any; +declare var GraphCtrl: any; +export {panel, GraphCtrl}; diff --git a/public/app/plugins/panel/graph/module.js b/public/app/plugins/panel/graph/module.js index 50a5ab59317..47d0e4f83a3 100644 --- a/public/app/plugins/panel/graph/module.js +++ b/public/app/plugins/panel/graph/module.js @@ -12,16 +12,8 @@ define([ function (angular, _, moment, kbn, TimeSeries, PanelMeta) { 'use strict'; - var module = angular.module('grafana.panels.graph'); - - module.directive('grafanaPanelGraph', function() { - return { - controller: 'GraphCtrl', - templateUrl: 'app/plugins/panel/graph/module.html', - }; - }); - - module.controller('GraphCtrl', function($scope, $rootScope, panelSrv, annotationsSrv, panelHelper) { + /** @ngInject */ + function GraphCtrl($scope, $rootScope, panelSrv, annotationsSrv, panelHelper) { $scope.panelMeta = new PanelMeta({ panelName: 'Graph', @@ -294,7 +286,17 @@ function (angular, _, moment, kbn, TimeSeries, PanelMeta) { }; panelSrv.init($scope); + } - }); + function graphPanelDirective() { + return { + controller: GraphCtrl, + templateUrl: 'app/plugins/panel/graph/module.html', + }; + } + return { + GraphCtrl: GraphCtrl, + panel: graphPanelDirective, + }; }); diff --git a/public/app/plugins/panel/graph/specs/graph_ctrl_specs.ts b/public/app/plugins/panel/graph/specs/graph_ctrl_specs.ts new file mode 100644 index 00000000000..73e47863f80 --- /dev/null +++ b/public/app/plugins/panel/graph/specs/graph_ctrl_specs.ts @@ -0,0 +1,53 @@ +/// + +import {describe, beforeEach, it, sinon, expect, angularMocks} from '../../../../../test/lib/common'; + +import 'app/features/panel/panel_srv'; +import 'app/features/panel/panel_helper'; + +import angular from 'angular'; +import {GraphCtrl} from '../module'; +import helpers from '../../../../../test/specs/helpers'; + +angular.module('grafana.controllers').controller('GraphCtrl', GraphCtrl); + +describe('GraphCtrl', function() { + var ctx = new helpers.ControllerTestContext(); + + beforeEach(angularMocks.module('grafana.services')); + beforeEach(angularMocks.module('grafana.controllers')); + + beforeEach(ctx.providePhase()); + beforeEach(ctx.createControllerPhase('GraphCtrl')); + + describe('get_data with 2 series', function() { + beforeEach(function() { + ctx.annotationsSrv.getAnnotations = sinon.stub().returns(ctx.$q.when([])); + ctx.datasource.query = sinon.stub().returns(ctx.$q.when({ + data: [ + { target: 'test.cpu1', datapoints: [[1, 10]]}, + { target: 'test.cpu2', datapoints: [[1, 10]]} + ] + })); + ctx.scope.render = sinon.spy(); + ctx.scope.refreshData(ctx.datasource); + ctx.scope.$digest(); + }); + + it('should send time series to render', function() { + var data = ctx.scope.render.getCall(0).args[0]; + expect(data.length).to.be(2); + }); + + describe('get_data failure following success', function() { + beforeEach(function() { + ctx.datasource.query = sinon.stub().returns(ctx.$q.reject('Datasource Error')); + ctx.scope.refreshData(ctx.datasource); + ctx.scope.$digest(); + }); + + }); + + }); + +}); diff --git a/public/app/plugins/panel/graph/specs/graph_specs.ts b/public/app/plugins/panel/graph/specs/graph_specs.ts new file mode 100644 index 00000000000..e07033583b7 --- /dev/null +++ b/public/app/plugins/panel/graph/specs/graph_specs.ts @@ -0,0 +1,230 @@ +/// + +import {describe, beforeEach, it, sinon, expect, angularMocks} from '../../../../../test/lib/common'; + +import '../module'; +import angular from 'angular'; +import $ from 'jquery'; +import helpers from '../../../../../test/specs/helpers'; +import TimeSeries from '../../../../core/time_series2'; + +describe('grafanaGraph', function() { + + beforeEach(angularMocks.module('grafana.directives')); + + function graphScenario(desc, func) { + describe(desc, function() { + var ctx: any = {}; + + ctx.setup = function(setupFunc) { + + beforeEach(angularMocks.module(function($provide) { + $provide.value("timeSrv", new helpers.TimeSrvStub()); + })); + + beforeEach(angularMocks.inject(function($rootScope, $compile) { + var scope = $rootScope.$new(); + var element = angular.element("
"); + + scope.height = '200px'; + scope.panel = { + legend: {}, + grid: { }, + y_formats: [], + seriesOverrides: [], + tooltip: { + shared: true + } + }; + + scope.panelRenderingComplete = sinon.spy(); + scope.appEvent = sinon.spy(); + scope.onAppEvent = sinon.spy(); + scope.hiddenSeries = {}; + scope.dashboard = { timezone: 'browser' }; + scope.range = { + from: new Date('2014-08-09 10:00:00'), + to: new Date('2014-09-09 13:00:00') + }; + ctx.data = []; + ctx.data.push(new TimeSeries({ + datapoints: [[1,1],[2,2]], + alias: 'series1' + })); + ctx.data.push(new TimeSeries({ + datapoints: [[1,1],[2,2]], + alias: 'series2' + })); + + setupFunc(scope, ctx.data); + + $compile(element)(scope); + scope.$digest(); + $.plot = ctx.plotSpy = sinon.spy(); + + scope.$emit('render', ctx.data); + ctx.plotData = ctx.plotSpy.getCall(0).args[1]; + ctx.plotOptions = ctx.plotSpy.getCall(0).args[2]; + })); + }; + + func(ctx); + }); + } + + graphScenario('simple lines options', function(ctx) { + ctx.setup(function(scope) { + scope.panel.lines = true; + scope.panel.fill = 5; + scope.panel.linewidth = 3; + scope.panel.steppedLine = true; + }); + + it('should configure plot with correct options', function() { + expect(ctx.plotOptions.series.lines.show).to.be(true); + expect(ctx.plotOptions.series.lines.fill).to.be(0.5); + expect(ctx.plotOptions.series.lines.lineWidth).to.be(3); + expect(ctx.plotOptions.series.lines.steps).to.be(true); + }); + }); + + graphScenario('grid thresholds 100, 200', function(ctx) { + ctx.setup(function(scope) { + scope.panel.grid = { + threshold1: 100, + threshold1Color: "#111", + threshold2: 200, + threshold2Color: "#222", + }; + }); + + it('should add grid markings', function() { + var markings = ctx.plotOptions.grid.markings; + expect(markings[0].yaxis.from).to.be(100); + expect(markings[0].yaxis.to).to.be(200); + expect(markings[0].color).to.be('#111'); + expect(markings[1].yaxis.from).to.be(200); + expect(markings[1].yaxis.to).to.be(Infinity); + }); + }); + + graphScenario('inverted grid thresholds 200, 100', function(ctx) { + ctx.setup(function(scope) { + scope.panel.grid = { + threshold1: 200, + threshold1Color: "#111", + threshold2: 100, + threshold2Color: "#222", + }; + }); + + it('should add grid markings', function() { + var markings = ctx.plotOptions.grid.markings; + expect(markings[0].yaxis.from).to.be(200); + expect(markings[0].yaxis.to).to.be(100); + expect(markings[0].color).to.be('#111'); + expect(markings[1].yaxis.from).to.be(100); + expect(markings[1].yaxis.to).to.be(-Infinity); + }); + }); + + graphScenario('grid thresholds from zero', function(ctx) { + ctx.setup(function(scope) { + scope.panel.grid = { + threshold1: 0, + threshold1Color: "#111", + }; + }); + + it('should add grid markings', function() { + var markings = ctx.plotOptions.grid.markings; + expect(markings[0].yaxis.from).to.be(0); + }); + }); + + graphScenario('when logBase is log 10', function(ctx) { + ctx.setup(function(scope) { + scope.panel.grid = { + leftMax: null, + rightMax: null, + leftMin: null, + rightMin: null, + leftLogBase: 10, + }; + }); + + it('should apply axis transform and ticks', function() { + var axis = ctx.plotOptions.yaxes[0]; + expect(axis.transform(100)).to.be(Math.log(100+0.1)); + expect(axis.ticks[0]).to.be(0); + expect(axis.ticks[1]).to.be(1); + }); + }); + + graphScenario('should use timeStep for barWidth', function(ctx) { + ctx.setup(function(scope, data) { + scope.panel.bars = true; + data[0] = new TimeSeries({ + datapoints: [[1,10],[2,20]], + alias: 'series1', + }); + }); + + it('should set barWidth', function() { + expect(ctx.plotOptions.series.bars.barWidth).to.be(10/1.5); + }); + }); + + graphScenario('series option overrides, fill & points', function(ctx) { + ctx.setup(function(scope, data) { + scope.panel.lines = true; + scope.panel.fill = 5; + scope.panel.seriesOverrides = [ + { alias: 'test', fill: 0, points: true } + ]; + + data[1].alias = 'test'; + }); + + it('should match second series and fill zero, and enable points', function() { + expect(ctx.plotOptions.series.lines.fill).to.be(0.5); + expect(ctx.plotData[1].lines.fill).to.be(0.001); + expect(ctx.plotData[1].points.show).to.be(true); + }); + }); + + graphScenario('should order series order according to zindex', function(ctx) { + ctx.setup(function(scope) { + scope.panel.seriesOverrides = [{ alias: 'series1', zindex: 2 }]; + }); + + it('should move zindex 2 last', function() { + expect(ctx.plotData[0].alias).to.be('series2'); + expect(ctx.plotData[1].alias).to.be('series1'); + }); + }); + + graphScenario('when series is hidden', function(ctx) { + ctx.setup(function(scope) { + scope.hiddenSeries = {'series2': true}; + }); + + it('should remove datapoints and disable stack', function() { + expect(ctx.plotData[0].alias).to.be('series1'); + expect(ctx.plotData[1].data.length).to.be(0); + expect(ctx.plotData[1].stack).to.be(false); + }); + }); + + graphScenario('when stack and percent', function(ctx) { + ctx.setup(function(scope) { + scope.panel.percentage = true; + scope.panel.stack = true; + }); + + it('should show percentage', function() { + var axis = ctx.plotOptions.yaxes[0]; + expect(axis.tickFormatter(100, axis)).to.be("100%"); + }); + }); +}); diff --git a/public/app/plugins/panel/graph/specs/tooltip_specs.ts b/public/app/plugins/panel/graph/specs/tooltip_specs.ts new file mode 100644 index 00000000000..de173350b2b --- /dev/null +++ b/public/app/plugins/panel/graph/specs/tooltip_specs.ts @@ -0,0 +1,171 @@ +/// + +import {describe, beforeEach, it, sinon, expect, angularMocks} from '../../../../../test/lib/common'; + +import $ from 'jquery'; +import GraphTooltip from '../graph_tooltip'; + +var scope = { + appEvent: sinon.spy(), + onAppEvent: sinon.spy(), +}; + +var elem = $('
'); +var dashboard = { }; + +function describeSharedTooltip(desc, fn) { + var ctx: any = {}; + ctx.scope = scope; + ctx.scope.panel = { + tooltip: { + shared: true + }, + legend: { }, + stack: false + }; + + ctx.setup = function(setupFn) { + ctx.setupFn = setupFn; + }; + + describe(desc, function() { + beforeEach(function() { + ctx.setupFn(); + var tooltip = new GraphTooltip(elem, dashboard, scope); + ctx.results = tooltip.getMultiSeriesPlotHoverInfo(ctx.data, ctx.pos); + }); + + fn(ctx); + }); +} + +describeSharedTooltip("steppedLine false, stack false", function(ctx) { + ctx.setup(function() { + ctx.data = [ + { data: [[10, 15], [12, 20]], lines: {} }, + { data: [[10, 2], [12, 3]], lines: {} } + ]; + ctx.pos = { x: 11 }; + }); + + it('should return 2 series', function() { + expect(ctx.results.length).to.be(2); + }); + it('should add time to results array', function() { + expect(ctx.results.time).to.be(10); + }); + it('should set value and hoverIndex', function() { + expect(ctx.results[0].value).to.be(15); + expect(ctx.results[1].value).to.be(2); + expect(ctx.results[0].hoverIndex).to.be(0); + }); +}); + +describeSharedTooltip("one series is hidden", function(ctx) { + ctx.setup(function() { + ctx.data = [ + { data: [[10, 15], [12, 20]], }, + { data: [] } + ]; + ctx.pos = { x: 11 }; + }); +}); + +describeSharedTooltip("steppedLine false, stack true, individual false", function(ctx) { + ctx.setup(function() { + ctx.data = [ + { + data: [[10, 15], [12, 20]], + lines: {}, + datapoints: { + pointsize: 2, + points: [[10,15], [12,20]], + }, + stack: true, + }, + { + data: [[10, 2], [12, 3]], + lines: {}, + datapoints: { + pointsize: 2, + points: [[10, 2], [12, 3]], + }, + stack: true + } + ]; + ctx.scope.panel.stack = true; + ctx.pos = { x: 11 }; + }); + + it('should show stacked value', function() { + expect(ctx.results[1].value).to.be(17); + }); +}); + +describeSharedTooltip("steppedLine false, stack true, individual false, series stack false", function(ctx) { + ctx.setup(function() { + ctx.data = [ + { + data: [[10, 15], [12, 20]], + lines: {}, + datapoints: { + pointsize: 2, + points: [[10, 15], [12, 20]], + }, + stack: true + }, + { + data: [[10, 2], [12, 3]], + lines: {}, + datapoints: { + pointsize: 2, + points: [[10, 2], [12, 3]], + }, + stack: false + } + ]; + ctx.scope.panel.stack = true; + ctx.pos = { x: 11 }; + }); + + it('should not show stacked value', function() { + expect(ctx.results[1].value).to.be(2); + }); + +}); + +describeSharedTooltip("steppedLine false, stack true, individual true", function(ctx) { + ctx.setup(function() { + ctx.data = [ + { + data: [[10, 15], [12, 20]], + lines: {}, + datapoints: { + pointsize: 2, + points: [[10, 15], [12, 20]], + }, + stack: true + }, + { + data: [[10, 2], [12, 3]], + lines: {}, + datapoints: { + pointsize: 2, + points: [[10, 2], [12, 3]], + }, + stack: false + } + ]; + ctx.scope.panel.stack = true; + ctx.scope.panel.tooltip.value_type = 'individual'; + ctx.pos = { x: 11 }; + }); + + it('should not show stacked value', function() { + expect(ctx.results[1].value).to.be(2); + }); + +}); + + + diff --git a/public/test/specs/graph-ctrl-specs.js b/public/test/specs/graph-ctrl-specs.js deleted file mode 100644 index 607c13cf528..00000000000 --- a/public/test/specs/graph-ctrl-specs.js +++ /dev/null @@ -1,51 +0,0 @@ -define([ - './helpers', - 'app/features/panel/panel_srv', - 'app/features/panel/panel_helper', - 'app/plugins/panel/graph/module' -], function(helpers) { - 'use strict'; - - describe('GraphCtrl', function() { - var ctx = new helpers.ControllerTestContext(); - - beforeEach(module('grafana.services')); - beforeEach(module('grafana.panels.graph')); - - beforeEach(ctx.providePhase()); - beforeEach(ctx.createControllerPhase('GraphCtrl')); - - describe('get_data with 2 series', function() { - beforeEach(function() { - ctx.annotationsSrv.getAnnotations = sinon.stub().returns(ctx.$q.when([])); - ctx.datasource.query = sinon.stub().returns(ctx.$q.when({ - data: [ - { target: 'test.cpu1', datapoints: [[1, 10]]}, - { target: 'test.cpu2', datapoints: [[1, 10]]} - ] - })); - ctx.scope.render = sinon.spy(); - ctx.scope.refreshData(ctx.datasource); - ctx.scope.$digest(); - }); - - it('should send time series to render', function() { - var data = ctx.scope.render.getCall(0).args[0]; - expect(data.length).to.be(2); - }); - - describe('get_data failure following success', function() { - beforeEach(function() { - ctx.datasource.query = sinon.stub().returns(ctx.$q.reject('Datasource Error')); - ctx.scope.refreshData(ctx.datasource); - ctx.scope.$digest(); - }); - - }); - - }); - - }); - -}); - diff --git a/public/test/specs/graph-specs.js b/public/test/specs/graph-specs.js deleted file mode 100644 index db3a4acf61f..00000000000 --- a/public/test/specs/graph-specs.js +++ /dev/null @@ -1,231 +0,0 @@ -define([ - './helpers', - 'angular', - 'jquery', - 'app/core/time_series', - 'app/plugins/panel/graph/graph' -], function(helpers, angular, $, TimeSeries) { - 'use strict'; - - describe('grafanaGraph', function() { - - beforeEach(module('grafana.directives')); - - function graphScenario(desc, func) { - describe(desc, function() { - var ctx = {}; - - ctx.setup = function (setupFunc) { - - beforeEach(module(function($provide) { - $provide.value("timeSrv", new helpers.TimeSrvStub()); - })); - - beforeEach(inject(function($rootScope, $compile) { - var scope = $rootScope.$new(); - var element = angular.element("
"); - - scope.height = '200px'; - scope.panel = { - legend: {}, - grid: { }, - y_formats: [], - seriesOverrides: [], - tooltip: { - shared: true - } - }; - - scope.panelRenderingComplete = sinon.spy(); - scope.appEvent = sinon.spy(); - scope.onAppEvent = sinon.spy(); - scope.hiddenSeries = {}; - scope.dashboard = { timezone: 'browser' }; - scope.range = { - from: new Date('2014-08-09 10:00:00'), - to: new Date('2014-09-09 13:00:00') - }; - ctx.data = []; - ctx.data.push(new TimeSeries({ - datapoints: [[1,1],[2,2]], - alias: 'series1' - })); - ctx.data.push(new TimeSeries({ - datapoints: [[1,1],[2,2]], - alias: 'series2' - })); - - setupFunc(scope, ctx.data); - - $compile(element)(scope); - scope.$digest(); - $.plot = ctx.plotSpy = sinon.spy(); - - scope.$emit('render', ctx.data); - ctx.plotData = ctx.plotSpy.getCall(0).args[1]; - ctx.plotOptions = ctx.plotSpy.getCall(0).args[2]; - })); - }; - - func(ctx); - }); - } - - graphScenario('simple lines options', function(ctx) { - ctx.setup(function(scope) { - scope.panel.lines = true; - scope.panel.fill = 5; - scope.panel.linewidth = 3; - scope.panel.steppedLine = true; - }); - - it('should configure plot with correct options', function() { - expect(ctx.plotOptions.series.lines.show).to.be(true); - expect(ctx.plotOptions.series.lines.fill).to.be(0.5); - expect(ctx.plotOptions.series.lines.lineWidth).to.be(3); - expect(ctx.plotOptions.series.lines.steps).to.be(true); - }); - }); - - graphScenario('grid thresholds 100, 200', function(ctx) { - ctx.setup(function(scope) { - scope.panel.grid = { - threshold1: 100, - threshold1Color: "#111", - threshold2: 200, - threshold2Color: "#222", - }; - }); - - it('should add grid markings', function() { - var markings = ctx.plotOptions.grid.markings; - expect(markings[0].yaxis.from).to.be(100); - expect(markings[0].yaxis.to).to.be(200); - expect(markings[0].color).to.be('#111'); - expect(markings[1].yaxis.from).to.be(200); - expect(markings[1].yaxis.to).to.be(Infinity); - }); - }); - - graphScenario('inverted grid thresholds 200, 100', function(ctx) { - ctx.setup(function(scope) { - scope.panel.grid = { - threshold1: 200, - threshold1Color: "#111", - threshold2: 100, - threshold2Color: "#222", - }; - }); - - it('should add grid markings', function() { - var markings = ctx.plotOptions.grid.markings; - expect(markings[0].yaxis.from).to.be(200); - expect(markings[0].yaxis.to).to.be(100); - expect(markings[0].color).to.be('#111'); - expect(markings[1].yaxis.from).to.be(100); - expect(markings[1].yaxis.to).to.be(-Infinity); - }); - }); - - graphScenario('grid thresholds from zero', function(ctx) { - ctx.setup(function(scope) { - scope.panel.grid = { - threshold1: 0, - threshold1Color: "#111", - }; - }); - - it('should add grid markings', function() { - var markings = ctx.plotOptions.grid.markings; - expect(markings[0].yaxis.from).to.be(0); - }); - }); - - graphScenario('when logBase is log 10', function(ctx) { - ctx.setup(function(scope) { - scope.panel.grid = { - leftMax: null, - rightMax: null, - leftMin: null, - rightMin: null, - leftLogBase: 10, - }; - }); - - it('should apply axis transform and ticks', function() { - var axis = ctx.plotOptions.yaxes[0]; - expect(axis.transform(100)).to.be(Math.log(100+0.1)); - expect(axis.ticks[0]).to.be(0); - expect(axis.ticks[1]).to.be(1); - }); - }); - - graphScenario('should use timeStep for barWidth', function(ctx) { - ctx.setup(function(scope, data) { - scope.panel.bars = true; - data[0] = new TimeSeries({ - datapoints: [[1,10],[2,20]], - alias: 'series1', - }); - }); - - it('should set barWidth', function() { - expect(ctx.plotOptions.series.bars.barWidth).to.be(10/1.5); - }); - }); - - graphScenario('series option overrides, fill & points', function(ctx) { - ctx.setup(function(scope, data) { - scope.panel.lines = true; - scope.panel.fill = 5; - scope.panel.seriesOverrides = [ - { alias: 'test', fill: 0, points: true } - ]; - - data[1].alias = 'test'; - }); - - it('should match second series and fill zero, and enable points', function() { - expect(ctx.plotOptions.series.lines.fill).to.be(0.5); - expect(ctx.plotData[1].lines.fill).to.be(0.001); - expect(ctx.plotData[1].points.show).to.be(true); - }); - }); - - graphScenario('should order series order according to zindex', function(ctx) { - ctx.setup(function(scope) { - scope.panel.seriesOverrides = [{ alias: 'series1', zindex: 2 }]; - }); - - it('should move zindex 2 last', function() { - expect(ctx.plotData[0].alias).to.be('series2'); - expect(ctx.plotData[1].alias).to.be('series1'); - }); - }); - - graphScenario('when series is hidden', function(ctx) { - ctx.setup(function(scope) { - scope.hiddenSeries = {'series2': true}; - }); - - it('should remove datapoints and disable stack', function() { - expect(ctx.plotData[0].alias).to.be('series1'); - expect(ctx.plotData[1].data.length).to.be(0); - expect(ctx.plotData[1].stack).to.be(false); - }); - }); - - graphScenario('when stack and percent', function(ctx) { - ctx.setup(function(scope) { - scope.panel.percentage = true; - scope.panel.stack = true; - }); - - it('should show percentage', function() { - var axis = ctx.plotOptions.yaxes[0]; - expect(axis.tickFormatter(100, axis)).to.be("100%"); - }); - }); - }); -}); - diff --git a/public/test/specs/graph-tooltip-specs.js b/public/test/specs/graph-tooltip-specs.js deleted file mode 100644 index de39d855a70..00000000000 --- a/public/test/specs/graph-tooltip-specs.js +++ /dev/null @@ -1,171 +0,0 @@ -define([ - 'jquery', - 'app/plugins/panel/graph/graph.tooltip' -], function($, GraphTooltip) { - 'use strict'; - - var scope = { - appEvent: sinon.spy(), - onAppEvent: sinon.spy(), - }; - - var elem = $('
'); - var dashboard = { }; - - function describeSharedTooltip(desc, fn) { - var ctx = {}; - ctx.scope = scope; - ctx.scope.panel = { - tooltip: { - shared: true - }, - legend: { }, - stack: false - }; - - ctx.setup = function(setupFn) { - ctx.setupFn = setupFn; - }; - - describe(desc, function() { - beforeEach(function() { - ctx.setupFn(); - var tooltip = new GraphTooltip(elem, dashboard, scope); - ctx.results = tooltip.getMultiSeriesPlotHoverInfo(ctx.data, ctx.pos); - }); - - fn(ctx); - }); - } - - describeSharedTooltip("steppedLine false, stack false", function(ctx) { - ctx.setup(function() { - ctx.data = [ - { data: [[10, 15], [12, 20]], lines: {} }, - { data: [[10, 2], [12, 3]], lines: {} } - ]; - ctx.pos = { x: 11 }; - }); - - it('should return 2 series', function() { - expect(ctx.results.length).to.be(2); - }); - it('should add time to results array', function() { - expect(ctx.results.time).to.be(10); - }); - it('should set value and hoverIndex', function() { - expect(ctx.results[0].value).to.be(15); - expect(ctx.results[1].value).to.be(2); - expect(ctx.results[0].hoverIndex).to.be(0); - }); - }); - - describeSharedTooltip("one series is hidden", function(ctx) { - ctx.setup(function() { - ctx.data = [ - { data: [[10, 15], [12, 20]], }, - { data: [] } - ]; - ctx.pos = { x: 11 }; - }); - }); - - describeSharedTooltip("steppedLine false, stack true, individual false", function(ctx) { - ctx.setup(function() { - ctx.data = [ - { - data: [[10, 15], [12, 20]], - lines: {}, - datapoints: { - pointsize: 2, - points: [[10,15], [12,20]], - }, - stack: true, - }, - { - data: [[10, 2], [12, 3]], - lines: {}, - datapoints: { - pointsize: 2, - points: [[10, 2], [12, 3]], - }, - stack: true - } - ]; - ctx.scope.panel.stack = true; - ctx.pos = { x: 11 }; - }); - - it('should show stacked value', function() { - expect(ctx.results[1].value).to.be(17); - }); - }); - - describeSharedTooltip("steppedLine false, stack true, individual false, series stack false", function(ctx) { - ctx.setup(function() { - ctx.data = [ - { - data: [[10, 15], [12, 20]], - lines: {}, - datapoints: { - pointsize: 2, - points: [[10, 15], [12, 20]], - }, - stack: true - }, - { - data: [[10, 2], [12, 3]], - lines: {}, - datapoints: { - pointsize: 2, - points: [[10, 2], [12, 3]], - }, - stack: false - } - ]; - ctx.scope.panel.stack = true; - ctx.pos = { x: 11 }; - }); - - it('should not show stacked value', function() { - expect(ctx.results[1].value).to.be(2); - }); - - }); - - describeSharedTooltip("steppedLine false, stack true, individual true", function(ctx) { - ctx.setup(function() { - ctx.data = [ - { - data: [[10, 15], [12, 20]], - lines: {}, - datapoints: { - pointsize: 2, - points: [[10, 15], [12, 20]], - }, - stack: true - }, - { - data: [[10, 2], [12, 3]], - lines: {}, - datapoints: { - pointsize: 2, - points: [[10, 2], [12, 3]], - }, - stack: false - } - ]; - ctx.scope.panel.stack = true; - ctx.scope.panel.tooltip.value_type = 'individual'; - ctx.pos = { x: 11 }; - }); - - it('should not show stacked value', function() { - expect(ctx.results[1].value).to.be(2); - }); - - }); - -}); - - diff --git a/public/test/specs/helpers.d.ts b/public/test/specs/helpers.d.ts index 2447bc7868d..4b64bd79031 100644 --- a/public/test/specs/helpers.d.ts +++ b/public/test/specs/helpers.d.ts @@ -1,6 +1,4 @@ -declare module "test/specs/helpers" { - let helpers: any; - export default helpers; -} +declare let helpers: any; +export default helpers;