From 3e3b99696309981740703641e5995a0b863628c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 19 Jan 2016 21:57:58 +0100 Subject: [PATCH 01/91] feat(plugin): experimental work on plugin architecture --- public/app/plugins/panel/test/module.ts | 43 +++++++++++++++++++++++ public/app/plugins/panel/test/plugin.json | 5 +++ 2 files changed, 48 insertions(+) create mode 100644 public/app/plugins/panel/test/module.ts create mode 100644 public/app/plugins/panel/test/plugin.json diff --git a/public/app/plugins/panel/test/module.ts b/public/app/plugins/panel/test/module.ts new file mode 100644 index 00000000000..4fb2c4a66eb --- /dev/null +++ b/public/app/plugins/panel/test/module.ts @@ -0,0 +1,43 @@ +/// + +import PanelMeta from 'app/features/panel/panel_meta2'; + +class PanelBaseCtrl { + constructor(private $scope) { + $scope.panelMeta = new PanelMeta({ + panelName: 'Table', + editIcon: "fa fa-table", + fullscreen: true, + metricsEditor: true, + }); + $scope.testProp = "hello"; + } +} + +class TestPanelCtrl extends PanelBaseCtrl { + + constructor($scope) { + super($scope); + $scope.panelMeta.panelName = "Test"; + } +} + +function testPanelDirective() { + return { + restrict: 'E', + template: ` + +
+

Test Panel, {{testProp}}

+
+ + `, + controller: TestPanelCtrl + }; +} + +export { + PanelBaseCtrl, + TestPanelCtrl, + testPanelDirective as panel +} diff --git a/public/app/plugins/panel/test/plugin.json b/public/app/plugins/panel/test/plugin.json new file mode 100644 index 00000000000..b2d7b9b42c6 --- /dev/null +++ b/public/app/plugins/panel/test/plugin.json @@ -0,0 +1,5 @@ +{ + "type": "panel", + "name": "Test", + "id": "test" +} From 8dd118bd8659f178326e95afa5e64fbb97ddf02d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 20 Jan 2016 09:45:24 +0100 Subject: [PATCH 02/91] updated --- public/app/features/panel/panel_meta2.ts | 1 - public/app/plugins/panel/test/module.ts | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/public/app/features/panel/panel_meta2.ts b/public/app/features/panel/panel_meta2.ts index ca276f9377b..c3f9a25eb31 100644 --- a/public/app/features/panel/panel_meta2.ts +++ b/public/app/features/panel/panel_meta2.ts @@ -23,7 +23,6 @@ export default class PanelMeta { this.addMenuItem('Edit', 'icon-cog', 'editPanel(); dismiss();', 'Editor'); this.addMenuItem('Duplicate', 'icon-copy', 'duplicatePanel()', 'Editor'); this.addMenuItem('Share', 'icon-share', 'sharePanel(); dismiss();'); - this.addEditorTab('General', 'app/partials/panelgeneral.html'); if (options.metricsEditor) { diff --git a/public/app/plugins/panel/test/module.ts b/public/app/plugins/panel/test/module.ts index 4fb2c4a66eb..74272cd21e3 100644 --- a/public/app/plugins/panel/test/module.ts +++ b/public/app/plugins/panel/test/module.ts @@ -15,7 +15,6 @@ class PanelBaseCtrl { } class TestPanelCtrl extends PanelBaseCtrl { - constructor($scope) { super($scope); $scope.panelMeta.panelName = "Test"; @@ -32,7 +31,8 @@ function testPanelDirective() { `, - controller: TestPanelCtrl + controller: TestPanelCtrl, + controllerAs: 'ctrl', }; } From 0796b2c0e366099ef3363cba2dfb280d0448b5e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 21 Jan 2016 17:46:57 +0100 Subject: [PATCH 03/91] poc(panel as isolated compoennts): experimental panel stuff --- public/app/features/panel/panel_directive.js | 2 +- public/app/features/panel/panel_loader.ts | 48 +++++++++++++------- public/app/features/panel/panel_menu.js | 14 +++--- public/app/plugins/panel/test/module.ts | 30 ++++++------ 4 files changed, 57 insertions(+), 37 deletions(-) diff --git a/public/app/features/panel/panel_directive.js b/public/app/features/panel/panel_directive.js index b4c1a2d6a0f..9d1b6b54b76 100644 --- a/public/app/features/panel/panel_directive.js +++ b/public/app/features/panel/panel_directive.js @@ -12,9 +12,9 @@ function (angular, $) { restrict: 'E', templateUrl: 'app/features/panel/partials/panel.html', transclude: true, + scope: { ctrl: "=" }, link: function(scope, elem) { var panelContainer = elem.find('.panel-container'); - scope.$watchGroup(['fullscreen', 'height', 'panel.height', 'row.height'], function() { panelContainer.css({ minHeight: scope.height || scope.panel.height || scope.row.height, display: 'block' }); elem.toggleClass('panel-fullscreen', scope.fullscreen ? true : false); diff --git a/public/app/features/panel/panel_loader.ts b/public/app/features/panel/panel_loader.ts index 8dc46f494a1..612cacd3b98 100644 --- a/public/app/features/panel/panel_loader.ts +++ b/public/app/features/panel/panel_loader.ts @@ -5,26 +5,42 @@ import config from 'app/core/config'; import {unknownPanelDirective} from '../../plugins/panel/unknown/module'; +var directiveModule = angular.module('grafana.directives'); + /** @ngInject */ -function panelLoader($parse, dynamicDirectiveSrv) { - return dynamicDirectiveSrv.create({ - directive: scope => { - let panelInfo = config.panels[scope.panel.type]; - if (!panelInfo) { - return Promise.resolve({ - name: 'panel-directive-' + scope.panel.type, - fn: unknownPanelDirective - }); +function panelLoader($compile, dynamicDirectiveSrv) { + return { + restrict: 'E', + link: function(scope, elem, attrs) { + + function addDirective(name, component) { + if (!component.registered) { + directiveModule.component(attrs.$normalize(name), component); + component.registered = true; + } + + var child = angular.element(document.createElement(name)); + child.attr('dashboard', 'dashboard'); + child.attr('panel', 'panel'); + $compile(child)(scope); + + elem.empty(); + elem.append(child); } - return System.import(panelInfo.module).then(function(panelModule) { - return { - name: 'panel-directive-' + scope.panel.type, - fn: panelModule.panel, - }; + var panelElemName = 'panel-directive-' + scope.panel.type; + let panelInfo = config.panels[scope.panel.type]; + if (!panelInfo) { + addDirective(panelElemName, unknownPanelDirective); + } + + System.import(panelInfo.module).then(function(panelModule) { + addDirective(panelElemName, panelModule.component); + }).catch(err => { + console.log('Panel err: ', err); }); - }, - }); + } + }; } angular.module('grafana.directives').directive('panelLoader', panelLoader); diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js index 30b61418d72..ec0f2301675 100644 --- a/public/app/features/panel/panel_menu.js +++ b/public/app/features/panel/panel_menu.js @@ -11,16 +11,16 @@ function (angular, $, _) { .directive('panelMenu', function($compile, linkSrv) { var linkTemplate = '' + - '{{panel.title | interpolateTemplateVars:this}}' + + '{{ctrl.panel.title}}' + '' + - ' {{panelMeta.timeInfo}}' + + ' {{panelMeta.timeInfo}}' + ''; function createExternalLinkMenu($scope) { var template = '
'; template += '
'; - if ($scope.panel.links) { + if ($scope.ctrl.panel.links) { _.each($scope.panel.links, function(link) { var info = linkSrv.getPanelLinkAnchorInfo(link, $scope.panel.scopedVars); template += '' + info.title + ''; @@ -31,7 +31,7 @@ function (angular, $, _) { function createMenuTemplate($scope) { var template = '
'; - if ($scope.dashboardMeta.canEdit) { + if ($scope.ctrl.dashboard.meta.canEdit) { template += '
'; template += '
'; template += ''; @@ -44,9 +44,9 @@ function (angular, $, _) { template += '
'; template += ''; - _.each($scope.panelMeta.menu, function(item) { + _.each($scope.ctrl.panelMeta.menu, function(item) { // skip edit actions if not editor - if (item.role === 'Editor' && !$scope.dashboardMeta.canEdit) { + if (item.role === 'Editor' && !$scope.ctrl.dashboard.meta.canEdit) { return; } @@ -64,7 +64,7 @@ function (angular, $, _) { } function getExtendedMenu($scope) { - return angular.copy($scope.panelMeta.extendedMenu); + return angular.copy($scope.ctrl.panelMeta.extendedMenu); } return { diff --git a/public/app/plugins/panel/test/module.ts b/public/app/plugins/panel/test/module.ts index 4fb2c4a66eb..5c4413ea144 100644 --- a/public/app/plugins/panel/test/module.ts +++ b/public/app/plugins/panel/test/module.ts @@ -3,14 +3,17 @@ import PanelMeta from 'app/features/panel/panel_meta2'; class PanelBaseCtrl { + panelMeta: any; + panel: any; + dashboard: any; + constructor(private $scope) { - $scope.panelMeta = new PanelMeta({ + this.panelMeta = new PanelMeta({ panelName: 'Table', editIcon: "fa fa-table", fullscreen: true, metricsEditor: true, }); - $scope.testProp = "hello"; } } @@ -18,26 +21,27 @@ class TestPanelCtrl extends PanelBaseCtrl { constructor($scope) { super($scope); - $scope.panelMeta.panelName = "Test"; } } -function testPanelDirective() { - return { - restrict: 'E', - template: ` - +var testPanelComponent = { + template: ` +
-

Test Panel, {{testProp}}

+

Test Panel

 `, - controller: TestPanelCtrl - }; -} + controller: TestPanelCtrl, + controllerAs: 'ctrl', + bindings: { + dashboard: "=", + panel: "=", + } +}; export { PanelBaseCtrl, TestPanelCtrl, - testPanelDirective as panel + testPanelComponent as component, } From 94a7e9b18576f0d047ffeeb50fc48ce31b6bd3e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 22 Jan 2016 19:59:36 +0100 Subject: [PATCH 04/91] poc(panel): experimental panel stuff --- public/app/features/panel/panel_ctrl.ts | 21 +++++++++ public/app/features/panel/panel_directive.js | 7 +-- public/app/features/panel/panel_loader.ts | 47 +++++++++++++++++--- public/app/partials/dashboard.html | 7 +-- public/app/plugins/panel/test/module.html | 4 ++ public/app/plugins/panel/test/module.ts | 39 +++------------- 6 files changed, 80 insertions(+), 45 deletions(-) create mode 100644 public/app/features/panel/panel_ctrl.ts create mode 100644 public/app/plugins/panel/test/module.html diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts new file mode 100644 index 00000000000..db8788ab306 --- /dev/null +++ b/public/app/features/panel/panel_ctrl.ts @@ -0,0 +1,21 @@ +/// + +import PanelMeta from './panel_meta2'; + +export class PanelCtrl { + panelMeta: any; + panel: any; + row: any; + dashboard: any; + + constructor(private $scope) { + this.panelMeta = new PanelMeta({ + panelName: 'Table', + editIcon: "fa fa-table", + fullscreen: true, + metricsEditor: true, + }); + } +} + + diff --git a/public/app/features/panel/panel_directive.js b/public/app/features/panel/panel_directive.js index 9d1b6b54b76..f8b9e724b32 100644 --- a/public/app/features/panel/panel_directive.js +++ b/public/app/features/panel/panel_directive.js @@ -15,9 +15,10 @@ function (angular, $) { scope: { ctrl: "=" }, link: function(scope, elem) { var panelContainer = elem.find('.panel-container'); - scope.$watchGroup(['fullscreen', 'height', 'panel.height', 'row.height'], function() { - panelContainer.css({ minHeight: scope.height || scope.panel.height || scope.row.height, display: 'block' }); - elem.toggleClass('panel-fullscreen', scope.fullscreen ? true : false); + var ctrl = scope.ctrl; + scope.$watchGroup(['ctrl.fullscreen', 'ctrl.height', 'ctrl.panel.height', 'ctrl.row.height'], function() { + panelContainer.css({ minHeight: ctrl.height || ctrl.panel.height || ctrl.row.height, display: 'block' }); + elem.toggleClass('panel-fullscreen', ctrl.fullscreen ? true : false); }); } }; diff --git a/public/app/features/panel/panel_loader.ts b/public/app/features/panel/panel_loader.ts index 612cacd3b98..dd0284138ab 100644 --- a/public/app/features/panel/panel_loader.ts +++ b/public/app/features/panel/panel_loader.ts @@ -8,34 +8,67 @@ import {unknownPanelDirective} from '../../plugins/panel/unknown/module'; var directiveModule = angular.module('grafana.directives'); /** @ngInject */ -function panelLoader($compile, dynamicDirectiveSrv) { +function panelLoader($compile, dynamicDirectiveSrv, $http, $q) { return { restrict: 'E', + scope: { + dashboard: "=", + row: "=", + panel: "=" + }, link: function(scope, elem, attrs) { - function addDirective(name, component) { - if (!component.registered) { - directiveModule.component(attrs.$normalize(name), component); - component.registered = true; + function getTemplate(component) { + if (component.template) { + return $q.when(component.template); } + return $http.get(component.templateUrl).then(res => { + return res.data; + }); + } + function addPanelAndCompile(name) { var child = angular.element(document.createElement(name)); child.attr('dashboard', 'dashboard'); child.attr('panel', 'panel'); + child.attr('row', 'row'); $compile(child)(scope); elem.empty(); elem.append(child); } + function addPanel(name, directive) { + if (!directive.registered) { + getTemplate(directive).then(template => { + directive.templateUrl = null; + directive.template = `${template}`; + directive.controllerAs = 'ctrl'; + directive.bindToController = true; + directive.scope = { + dashboard: "=", + panel: "=", + row: "=" + }; + + directiveModule.directive(attrs.$normalize(name), function() { + return directive; + }); + directive.registered = true; + addPanelAndCompile(name); + }); + } + addPanelAndCompile(name); + } + var panelElemName = 'panel-directive-' + scope.panel.type; let panelInfo = config.panels[scope.panel.type]; if (!panelInfo) { - addDirective(panelElemName, unknownPanelDirective); + addPanel(panelElemName, unknownPanelDirective); } System.import(panelInfo.module).then(function(panelModule) { - addDirective(panelElemName, panelModule.component); + addPanel(panelElemName, panelModule.panel); }).catch(err => { console.log('Panel err: ', err); }); diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index 9d20da3d7b4..7aeefb20730 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -79,9 +79,10 @@
-
- +
+ +
diff --git a/public/app/plugins/panel/test/module.html b/public/app/plugins/panel/test/module.html new file mode 100644 index 00000000000..47b59289210 --- /dev/null +++ b/public/app/plugins/panel/test/module.html @@ -0,0 +1,4 @@ +

+ Test panel! + panel.id: {{ctrl.panel.id}} +

diff --git a/public/app/plugins/panel/test/module.ts b/public/app/plugins/panel/test/module.ts index 5c4413ea144..ae9af416ed0 100644 --- a/public/app/plugins/panel/test/module.ts +++ b/public/app/plugins/panel/test/module.ts @@ -1,47 +1,22 @@ /// -import PanelMeta from 'app/features/panel/panel_meta2'; - -class PanelBaseCtrl { - panelMeta: any; - panel: any; - dashboard: any; - - constructor(private $scope) { - this.panelMeta = new PanelMeta({ - panelName: 'Table', - editIcon: "fa fa-table", - fullscreen: true, - metricsEditor: true, - }); - } -} - -class TestPanelCtrl extends PanelBaseCtrl { +import {PanelCtrl} from '../../../features/panel/panel_ctrl'; +class TestPanelCtrl extends PanelCtrl { constructor($scope) { super($scope); } } -var testPanelComponent = { - template: ` - -
-

Test Panel

-
- - `, +var panel = { + templateUrl: `app/plugins/panel/test/module.html`, controller: TestPanelCtrl, - controllerAs: 'ctrl', - bindings: { - dashboard: "=", - panel: "=", + link: function(scope, elem) { + console.log('panel link'); } }; export { - PanelBaseCtrl, TestPanelCtrl, - testPanelComponent as component, + panel, } From ab3b586838578d84a0c3495c84d9dd8efe28f776 Mon Sep 17 00:00:00 2001 From: Anthony Woods Date: Sat, 23 Jan 2016 03:15:39 +0800 Subject: [PATCH 05/91] add encryption util functions --- pkg/util/encryption.go | 70 +++++++++++++++++++++++++++++++++++++ pkg/util/encryption_test.go | 28 +++++++++++++++ 2 files changed, 98 insertions(+) create mode 100644 pkg/util/encryption.go create mode 100644 pkg/util/encryption_test.go diff --git a/pkg/util/encryption.go b/pkg/util/encryption.go new file mode 100644 index 00000000000..f24a9b29397 --- /dev/null +++ b/pkg/util/encryption.go @@ -0,0 +1,70 @@ +package util + +import ( + "crypto/aes" + "crypto/cipher" + "crypto/rand" + "io" + + "github.com/grafana/grafana/pkg/log" +) + +func Decrypt(payload []byte, secret string) []byte { + key := encryptionKeyToBytes(secret) + + block, err := aes.NewCipher(key) + if err != nil { + log.Fatal(4, err.Error()) + } + + // The IV needs to be unique, but not secure. Therefore it's common to + // include it at the beginning of the ciphertext. + if len(payload) < aes.BlockSize { + log.Fatal(4, "payload too short") + } + iv := payload[:aes.BlockSize] + payload = payload[aes.BlockSize:] + + stream := cipher.NewCFBDecrypter(block, iv) + + // XORKeyStream can work in-place if the two arguments are the same. + stream.XORKeyStream(payload, payload) + return payload +} + +func Encrypt(payload []byte, secret string) []byte { + key := encryptionKeyToBytes(secret) + + block, err := aes.NewCipher(key) + if err != nil { + log.Fatal(4, err.Error()) + } + + // The IV needs to be unique, but not secure. Therefore it's common to + // include it at the beginning of the ciphertext. + ciphertext := make([]byte, aes.BlockSize+len(payload)) + iv := ciphertext[:aes.BlockSize] + if _, err := io.ReadFull(rand.Reader, iv); err != nil { + log.Fatal(4, err.Error()) + } + + stream := cipher.NewCFBEncrypter(block, iv) + stream.XORKeyStream(ciphertext[aes.BlockSize:], payload) + + return ciphertext +} + +// Key needs to be 32bytes +func encryptionKeyToBytes(secret string) []byte { + key := make([]byte, 32, 32) + keyBytes := []byte(secret) + secretLength := len(keyBytes) + for i := 0; i < 32; i++ { + if secretLength > i { + key[i] = keyBytes[i] + } else { + key[i] = 0 + } + } + return key +} diff --git a/pkg/util/encryption_test.go b/pkg/util/encryption_test.go new file mode 100644 index 00000000000..254f0f178c0 --- /dev/null +++ b/pkg/util/encryption_test.go @@ -0,0 +1,28 @@ +package util + +import ( + "testing" + + . "github.com/smartystreets/goconvey/convey" +) + +func TestEncryption(t *testing.T) { + + Convey("When getting encryption key", t, func() { + + key := encryptionKeyToBytes("secret") + So(len(key), ShouldEqual, 32) + + key = encryptionKeyToBytes("a very long secret key that is larger then 32bytes") + So(len(key), ShouldEqual, 32) + + }) + + Convey("When decrypting basic payload", t, func() { + encrypted := Encrypt([]byte("grafana"), "1234") + decrypted := Decrypt(encrypted, "1234") + + So(string(decrypted), ShouldEqual, "grafana") + }) + +} From 32f78d465bb1bd8d393db4bf2624cf8845345a7d Mon Sep 17 00:00:00 2001 From: Anthony Woods Date: Sat, 23 Jan 2016 06:17:22 +0800 Subject: [PATCH 06/91] add secureJsonData to appSettings model. - adds the new column to the DB table. - data stored in the DB is encrypted - update appRouteHeaders templates to use the jsonData and decrypted secureJsonData --- pkg/api/app_routes.go | 11 +++++-- pkg/models/app_settings.go | 33 ++++++++++++++----- pkg/services/sqlstore/app_settings.go | 25 ++++++++++---- .../sqlstore/migrations/app_settings.go | 1 + public/app/features/apps/edit_ctrl.ts | 1 + 5 files changed, 53 insertions(+), 18 deletions(-) diff --git a/pkg/api/app_routes.go b/pkg/api/app_routes.go index 6ad41f79b53..169c5c6d15c 100644 --- a/pkg/api/app_routes.go +++ b/pkg/api/app_routes.go @@ -94,8 +94,15 @@ func NewApiPluginProxy(ctx *middleware.Context, proxyPath string, route *plugins ctx.JsonApiErr(500, "failed to get AppSettings.", err) return } - - err = t.Execute(&contentBuf, query.Result.JsonData) + type templateData struct { + JsonData map[string]interface{} + SecureJsonData map[string]string + } + data := templateData{ + JsonData: query.Result.JsonData, + SecureJsonData: query.Result.SecureJsonData.Decrypt(), + } + err = t.Execute(&contentBuf, data) if err != nil { ctx.JsonApiErr(500, fmt.Sprintf("failed to execute header content template for header %s.", header.Name), err) return diff --git a/pkg/models/app_settings.go b/pkg/models/app_settings.go index f3b60502cb0..78d4c483f2b 100644 --- a/pkg/models/app_settings.go +++ b/pkg/models/app_settings.go @@ -3,6 +3,9 @@ package models import ( "errors" "time" + + "github.com/grafana/grafana/pkg/setting" + "github.com/grafana/grafana/pkg/util" ) var ( @@ -10,25 +13,37 @@ var ( ) type AppSettings struct { - Id int64 - AppId string - OrgId int64 - Enabled bool - Pinned bool - JsonData map[string]interface{} + Id int64 + AppId string + OrgId int64 + Enabled bool + Pinned bool + JsonData map[string]interface{} + SecureJsonData SecureJsonData Created time.Time Updated time.Time } +type SecureJsonData map[string][]byte + +func (s SecureJsonData) Decrypt() map[string]string { + decrypted := make(map[string]string) + for key, data := range s { + decrypted[key] = string(util.Decrypt(data, setting.SecretKey)) + } + return decrypted +} + // ---------------------- // COMMANDS // Also acts as api DTO type UpdateAppSettingsCmd struct { - Enabled bool `json:"enabled"` - Pinned bool `json:"pinned"` - JsonData map[string]interface{} `json:"jsonData"` + Enabled bool `json:"enabled"` + Pinned bool `json:"pinned"` + JsonData map[string]interface{} `json:"jsonData"` + SecureJsonData map[string]string `json:"secureJsonData"` AppId string `json:"-"` OrgId int64 `json:"-"` diff --git a/pkg/services/sqlstore/app_settings.go b/pkg/services/sqlstore/app_settings.go index 7d9482e7b22..f454d2cc5ff 100644 --- a/pkg/services/sqlstore/app_settings.go +++ b/pkg/services/sqlstore/app_settings.go @@ -5,6 +5,8 @@ import ( "github.com/grafana/grafana/pkg/bus" m "github.com/grafana/grafana/pkg/models" + "github.com/grafana/grafana/pkg/setting" + "github.com/grafana/grafana/pkg/util" ) func init() { @@ -40,18 +42,27 @@ func UpdateAppSettings(cmd *m.UpdateAppSettingsCmd) error { sess.UseBool("enabled") sess.UseBool("pinned") if !exists { + // encrypt secureJsonData + secureJsonData := make(map[string][]byte) + for key, data := range cmd.SecureJsonData { + secureJsonData[key] = util.Encrypt([]byte(data), setting.SecretKey) + } app = m.AppSettings{ - AppId: cmd.AppId, - OrgId: cmd.OrgId, - Enabled: cmd.Enabled, - Pinned: cmd.Pinned, - JsonData: cmd.JsonData, - Created: time.Now(), - Updated: time.Now(), + AppId: cmd.AppId, + OrgId: cmd.OrgId, + Enabled: cmd.Enabled, + Pinned: cmd.Pinned, + JsonData: cmd.JsonData, + SecureJsonData: secureJsonData, + Created: time.Now(), + Updated: time.Now(), } _, err = sess.Insert(&app) return err } else { + for key, data := range cmd.SecureJsonData { + app.SecureJsonData[key] = util.Encrypt([]byte(data), setting.SecretKey) + } app.Updated = time.Now() app.Enabled = cmd.Enabled app.JsonData = cmd.JsonData diff --git a/pkg/services/sqlstore/migrations/app_settings.go b/pkg/services/sqlstore/migrations/app_settings.go index 437debbe95b..8b970a5062a 100644 --- a/pkg/services/sqlstore/migrations/app_settings.go +++ b/pkg/services/sqlstore/migrations/app_settings.go @@ -13,6 +13,7 @@ func addAppSettingsMigration(mg *Migrator) { {Name: "enabled", Type: DB_Bool, Nullable: false}, {Name: "pinned", Type: DB_Bool, Nullable: false}, {Name: "json_data", Type: DB_Text, Nullable: true}, + {Name: "secure_json_data", Type: DB_Text, Nullable: true}, {Name: "created", Type: DB_DateTime, Nullable: false}, {Name: "updated", Type: DB_DateTime, Nullable: false}, }, diff --git a/public/app/features/apps/edit_ctrl.ts b/public/app/features/apps/edit_ctrl.ts index dfbce64df5e..ccdaf529b5e 100644 --- a/public/app/features/apps/edit_ctrl.ts +++ b/public/app/features/apps/edit_ctrl.ts @@ -24,6 +24,7 @@ export class AppEditCtrl { enabled: this.appModel.enabled, pinned: this.appModel.pinned, jsonData: this.appModel.jsonData, + secureJsonData: this.appModel.secureJsonData, }, options); this.backendSrv.post(`/api/org/apps/${this.$routeParams.appId}/settings`, updateCmd).then(function() { From 892704242102d30ff5d20e77fbd6a876f1e28b01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 23 Jan 2016 01:44:38 +0100 Subject: [PATCH 07/91] more new panel stuff --- public/app/features/dashboard/viewStateSrv.js | 32 ++++++++++++------- public/app/features/panel/panel_ctrl.ts | 14 +++++++- public/app/features/panel/panel_directive.js | 22 +++++++------ public/app/features/panel/panel_menu.js | 31 +++++++++--------- public/app/features/panel/panel_meta2.ts | 10 +++--- public/app/features/panel/partials/panel.html | 4 +-- 6 files changed, 69 insertions(+), 44 deletions(-) diff --git a/public/app/features/dashboard/viewStateSrv.js b/public/app/features/dashboard/viewStateSrv.js index 58403766a31..63bb999e3ca 100644 --- a/public/app/features/dashboard/viewStateSrv.js +++ b/public/app/features/dashboard/viewStateSrv.js @@ -31,6 +31,14 @@ function (angular, _, $) { } }); + $scope.onAppEvent('panel-change-view', function(evt, payload) { + self.update(payload); + }); + + $scope.onAppEvent('panel-instantiated', function(evt, payload) { + self.registerPanel(payload.scope); + }); + this.update(this.getQueryStringState(), true); this.expandRowForPanel(); } @@ -105,23 +113,24 @@ function (angular, _, $) { DashboardViewState.prototype.getPanelScope = function(id) { return _.find(this.panelScopes, function(panelScope) { - return panelScope.panel.id === id; + return panelScope.ctrl.panel.id === id; }); }; DashboardViewState.prototype.leaveFullscreen = function(render) { var self = this; + var ctrl = self.fullscreenPanel.ctrl; - self.fullscreenPanel.editMode = false; - self.fullscreenPanel.fullscreen = false; - delete self.fullscreenPanel.height; + ctrl.editMode = false; + ctrl.fullscreen = false; + delete ctrl.height; - this.$scope.appEvent('panel-fullscreen-exit', {panelId: this.fullscreenPanel.panel.id}); + this.$scope.appEvent('panel-fullscreen-exit', {panelId: ctrl.panel.id}); if (!render) { return false;} $timeout(function() { - if (self.oldTimeRange !== self.fullscreenPanel.range) { + if (self.oldTimeRange !== ctrl.range) { self.$scope.broadcastRefresh(); } else { @@ -135,17 +144,18 @@ function (angular, _, $) { var docHeight = $(window).height(); var editHeight = Math.floor(docHeight * 0.3); var fullscreenHeight = Math.floor(docHeight * 0.7); + var ctrl = panelScope.ctrl; - panelScope.editMode = this.state.edit && this.$scope.dashboardMeta.canEdit; - panelScope.height = panelScope.editMode ? editHeight : fullscreenHeight; + ctrl.editMode = this.state.edit && this.$scope.dashboardMeta.canEdit; + ctrl.height = ctrl.editMode ? editHeight : fullscreenHeight; - this.oldTimeRange = panelScope.range; + this.oldTimeRange = ctrl.range; this.fullscreenPanel = panelScope; $(window).scrollTop(0); panelScope.fullscreen = true; - this.$scope.appEvent('panel-fullscreen-enter', {panelId: panelScope.panel.id}); + this.$scope.appEvent('panel-fullscreen-enter', {panelId: ctrl.panel.id}); $timeout(function() { panelScope.$broadcast('render'); @@ -156,7 +166,7 @@ function (angular, _, $) { var self = this; self.panelScopes.push(panelScope); - if (self.state.panelId === panelScope.panel.id) { + if (self.state.panelId === panelScope.ctrl.panel.id) { self.enterFullscreen(panelScope); } diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index db8788ab306..19c1ed2bc8c 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -8,13 +8,25 @@ export class PanelCtrl { row: any; dashboard: any; - constructor(private $scope) { + constructor(private scope) { this.panelMeta = new PanelMeta({ panelName: 'Table', editIcon: "fa fa-table", fullscreen: true, metricsEditor: true, }); + + this.publishAppEvent('panel-instantiated', {scope: scope}); + } + + publishAppEvent(evtName, evt) { + this.scope.$root.appEvent(evtName, evt); + } + + editPanel() { + this.publishAppEvent('panel-change-view', { + fullscreen: true, edit: true, panelId: this.panel.id + }); } } diff --git a/public/app/features/panel/panel_directive.js b/public/app/features/panel/panel_directive.js index f8b9e724b32..50cc4b57b26 100644 --- a/public/app/features/panel/panel_directive.js +++ b/public/app/features/panel/panel_directive.js @@ -17,6 +17,7 @@ function (angular, $) { var panelContainer = elem.find('.panel-container'); var ctrl = scope.ctrl; scope.$watchGroup(['ctrl.fullscreen', 'ctrl.height', 'ctrl.panel.height', 'ctrl.row.height'], function() { + console.log('height: ', ctrl.height); panelContainer.css({ minHeight: ctrl.height || ctrl.panel.height || ctrl.row.height, display: 'block' }); elem.toggleClass('panel-fullscreen', ctrl.fullscreen ? true : false); }); @@ -31,6 +32,7 @@ function (angular, $) { link: function(scope, elem) { var resizing = false; var lastPanel = false; + var ctrl = scope.ctrl; var handleOffset; var originalHeight; var originalWidth; @@ -41,31 +43,31 @@ function (angular, $) { resizing = true; handleOffset = $(e.target).offset(); - originalHeight = parseInt(scope.row.height); - originalWidth = scope.panel.span; + originalHeight = parseInt(ctrl.row.height); + originalWidth = ctrl.panel.span; maxWidth = $(document).width(); - lastPanel = scope.row.panels[scope.row.panels.length - 1]; + lastPanel = ctrl.row.panels[ctrl.row.panels.length - 1]; $('body').on('mousemove', moveHandler); $('body').on('mouseup', dragEndHandler); } function moveHandler(e) { - scope.row.height = originalHeight + (e.pageY - handleOffset.top); - scope.panel.span = originalWidth + (((e.pageX - handleOffset.left) / maxWidth) * 12); - scope.panel.span = Math.min(Math.max(scope.panel.span, 1), 12); + ctrl.row.height = originalHeight + (e.pageY - handleOffset.top); + ctrl.panel.span = originalWidth + (((e.pageX - handleOffset.left) / maxWidth) * 12); + ctrl.panel.span = Math.min(Math.max(ctrl.panel.span, 1), 12); - var rowSpan = scope.dashboard.rowSpan(scope.row); + var rowSpan = ctrl.dashboard.rowSpan(ctrl.row); // auto adjust other panels if (Math.floor(rowSpan) < 14) { // last panel should not push row down - if (lastPanel === scope.panel && rowSpan > 12) { + if (lastPanel === ctrl.panel && rowSpan > 12) { lastPanel.span -= rowSpan - 12; } // reduce width of last panel so total in row is 12 - else if (lastPanel !== scope.panel) { + else if (lastPanel !== ctrl.panel) { lastPanel.span = lastPanel.span - (rowSpan - 12); lastPanel.span = Math.min(Math.max(lastPanel.span, 1), 12); } @@ -78,7 +80,7 @@ function (angular, $) { function dragEndHandler() { // if close to 12 - var rowSpan = scope.dashboard.rowSpan(scope.row); + var rowSpan = ctrl.dashboard.rowSpan(scope.row); if (rowSpan < 12 && rowSpan > 11) { lastPanel.span += 12 - rowSpan; } diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js index ec0f2301675..bea8d27d2fa 100644 --- a/public/app/features/panel/panel_menu.js +++ b/public/app/features/panel/panel_menu.js @@ -13,25 +13,25 @@ function (angular, $, _) { '' + '{{ctrl.panel.title}}' + '' + - ' {{panelMeta.timeInfo}}' + + ' {{ctrl.panelMeta.timeInfo}}' + ''; - function createExternalLinkMenu($scope) { + function createExternalLinkMenu(ctrl) { var template = '
'; template += '
'; - if ($scope.ctrl.panel.links) { - _.each($scope.panel.links, function(link) { - var info = linkSrv.getPanelLinkAnchorInfo(link, $scope.panel.scopedVars); + if (ctrl.panel.links) { + _.each(ctrl.panel.links, function(link) { + var info = linkSrv.getPanelLinkAnchorInfo(link, ctrl.panel.scopedVars); template += '' + info.title + ''; }); } return template; } - function createMenuTemplate($scope) { + function createMenuTemplate(ctrl) { var template = '
'; - if ($scope.ctrl.dashboard.meta.canEdit) { + if (ctrl.dashboard.meta.canEdit) { template += '
'; template += '
'; template += ''; @@ -44,9 +44,9 @@ function (angular, $, _) { template += '
'; template += ''; - _.each($scope.ctrl.panelMeta.menu, function(item) { + _.each(ctrl.panelMeta.menu, function(item) { // skip edit actions if not editor - if (item.role === 'Editor' && !$scope.ctrl.dashboard.meta.canEdit) { + if (item.role === 'Editor' && !ctrl.dashboard.meta.canEdit) { return; } @@ -63,8 +63,8 @@ function (angular, $, _) { return template; } - function getExtendedMenu($scope) { - return angular.copy($scope.ctrl.panelMeta.extendedMenu); + function getExtendedMenu(ctrl) { + return angular.copy(ctrl.panelMeta.extendedMenu); } return { @@ -74,13 +74,14 @@ function (angular, $, _) { var $panelLinksBtn = $link.find(".panel-links-btn"); var $panelContainer = elem.parents(".panel-container"); var menuScope = null; + var ctrl = $scope.ctrl; var timeout = null; var $menu = null; elem.append($link); $scope.$watchCollection('panel.links', function(newValue) { - var showIcon = (newValue ? newValue.length > 0 : false) && $scope.panel.title !== ''; + var showIcon = (newValue ? newValue.length > 0 : false) && ctrl.panel.title !== ''; $panelLinksBtn.toggle(showIcon); }); @@ -124,9 +125,9 @@ function (angular, $, _) { var menuTemplate; if ($(e.target).hasClass('fa-external-link')) { - menuTemplate = createExternalLinkMenu($scope); + menuTemplate = createExternalLinkMenu(ctrl); } else { - menuTemplate = createMenuTemplate($scope); + menuTemplate = createMenuTemplate(ctrl); } $menu = $(menuTemplate); @@ -135,7 +136,7 @@ function (angular, $, _) { }); menuScope = $scope.$new(); - menuScope.extendedMenu = getExtendedMenu($scope); + menuScope.extendedMenu = getExtendedMenu(ctrl); menuScope.dismiss = function() { dismiss(null, true); }; diff --git a/public/app/features/panel/panel_meta2.ts b/public/app/features/panel/panel_meta2.ts index ca276f9377b..fe72b9f4fa2 100644 --- a/public/app/features/panel/panel_meta2.ts +++ b/public/app/features/panel/panel_meta2.ts @@ -17,12 +17,12 @@ export default class PanelMeta { this.extendedMenu = []; if (options.fullscreen) { - this.addMenuItem('View', 'icon-eye-open', 'toggleFullscreen(false); dismiss();'); + this.addMenuItem('View', 'icon-eye-open', 'ctrl.viewPanel(); dismiss();'); } - this.addMenuItem('Edit', 'icon-cog', 'editPanel(); dismiss();', 'Editor'); - this.addMenuItem('Duplicate', 'icon-copy', 'duplicatePanel()', 'Editor'); - this.addMenuItem('Share', 'icon-share', 'sharePanel(); dismiss();'); + this.addMenuItem('Edit', 'icon-cog', 'ctrl.editPanel(); dismiss();', 'Editor'); + this.addMenuItem('Duplicate', 'icon-copy', 'ctrl.duplicate()', 'Editor'); + this.addMenuItem('Share', 'icon-share', 'ctrl.share(); dismiss();'); this.addEditorTab('General', 'app/partials/panelgeneral.html'); @@ -30,7 +30,7 @@ export default class PanelMeta { this.addEditorTab('Metrics', 'app/partials/metrics.html'); } - this.addExtendedMenuItem('Panel JSON', '', 'editPanelJson(); dismiss();'); + this.addExtendedMenuItem('Panel JSON', '', 'ctrl.editPanelJson(); dismiss();'); } addMenuItem (text, icon, click, role?) { diff --git a/public/app/features/panel/partials/panel.html b/public/app/features/panel/partials/panel.html index a7fef0f5d67..f3eb19df424 100644 --- a/public/app/features/panel/partials/panel.html +++ b/public/app/features/panel/partials/panel.html @@ -19,12 +19,12 @@
-
+
- {{panelMeta.panelName}} + {{ctrl.panelMeta.panelName}}
From ecdc730de7b93c04d7673267a10da29c87b59e3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 23 Jan 2016 15:40:30 -0500 Subject: [PATCH 08/91] poc(): new panel system --- public/app/features/panel/panel_ctrl.ts | 26 ++++++++++++------- public/app/features/panel/partials/panel.html | 2 +- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index 19c1ed2bc8c..cc020c23423 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -3,19 +3,13 @@ import PanelMeta from './panel_meta2'; export class PanelCtrl { - panelMeta: any; + meta: any; panel: any; row: any; dashboard: any; constructor(private scope) { - this.panelMeta = new PanelMeta({ - panelName: 'Table', - editIcon: "fa fa-table", - fullscreen: true, - metricsEditor: true, - }); - + this.meta = new PanelMeta(this.panel); this.publishAppEvent('panel-instantiated', {scope: scope}); } @@ -23,11 +17,23 @@ export class PanelCtrl { this.scope.$root.appEvent(evtName, evt); } - editPanel() { + changeView(fullscreen, edit) { this.publishAppEvent('panel-change-view', { - fullscreen: true, edit: true, panelId: this.panel.id + fullscreen: fullscreen, edit: edit, panelId: this.panel.id }); } + + viewPanel() { + this.changeView(true, false); + } + + editPanel() { + this.changeView(true, true); + } + + exitFullscreen() { + this.changeView(false, false); + } } diff --git a/public/app/features/panel/partials/panel.html b/public/app/features/panel/partials/panel.html index f3eb19df424..3b325366826 100644 --- a/public/app/features/panel/partials/panel.html +++ b/public/app/features/panel/partials/panel.html @@ -32,7 +32,7 @@
-
From 4f7fb40d9b542f696238c33fa049f45632adffa3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 24 Jan 2016 16:39:25 -0500 Subject: [PATCH 09/91] feat(panel plugin): improving panel plugin model --- pkg/api/frontendsettings.go | 1 + public/app/core/filters/filters.ts | 9 ++- public/app/features/panel/all.js | 1 + .../panel/{panel_ctrl.ts => panel.ts} | 28 ++++++++- public/app/features/panel/panel_editor_tab.ts | 24 ++++++++ public/app/features/panel/panel_loader.ts | 57 ++++++++++--------- public/app/features/panel/panel_menu.js | 10 ++-- public/app/features/panel/panel_meta3.ts | 56 ++++++++++++++++++ public/app/features/panel/partials/panel.html | 12 ++-- public/app/partials/panelgeneral.html | 14 ++--- public/app/plugins/panel/test/module.ts | 24 +++++--- public/app/plugins/panel/test/plugin.json | 15 ++++- public/app/plugins/panel/unknown/module.ts | 18 +++--- 13 files changed, 201 insertions(+), 68 deletions(-) rename public/app/features/panel/{panel_ctrl.ts => panel.ts} (55%) create mode 100644 public/app/features/panel/panel_editor_tab.ts create mode 100644 public/app/features/panel/panel_meta3.ts diff --git a/pkg/api/frontendsettings.go b/pkg/api/frontendsettings.go index 7bea0b6338c..256ff15e881 100644 --- a/pkg/api/frontendsettings.go +++ b/pkg/api/frontendsettings.go @@ -123,6 +123,7 @@ func getFrontendSettingsMap(c *middleware.Context) (map[string]interface{}, erro panels[panel.Id] = map[string]interface{}{ "module": panel.Module, "name": panel.Name, + "info": panel.Info, } } diff --git a/public/app/core/filters/filters.ts b/public/app/core/filters/filters.ts index 57b2b1bd9ba..6122a010182 100644 --- a/public/app/core/filters/filters.ts +++ b/public/app/core/filters/filters.ts @@ -59,11 +59,14 @@ coreModule.filter('noXml', function() { coreModule.filter('interpolateTemplateVars', function (templateSrv) { var filterFunc: any = function(text, scope) { - if (scope.panel) { - return templateSrv.replaceWithText(text, scope.panel.scopedVars); + var scopedVars; + if (scope.ctrl && scope.ctrl.panel) { + scopedVars = scope.ctrl.panel.scopedVars; } else { - return templateSrv.replaceWithText(text, scope.row.scopedVars); + scopedVars = scope.row.scopedVars; } + + return templateSrv.replaceWithText(text, scopedVars); }; filterFunc.$stateful = true; diff --git a/public/app/features/panel/all.js b/public/app/features/panel/all.js index ef3ea9b9b0f..ad635d83f07 100644 --- a/public/app/features/panel/all.js +++ b/public/app/features/panel/all.js @@ -6,4 +6,5 @@ define([ './solo_panel_ctrl', './panel_loader', './query_editor', + './panel_editor_tab', ], function () {}); diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel.ts similarity index 55% rename from public/app/features/panel/panel_ctrl.ts rename to public/app/features/panel/panel.ts index cc020c23423..a3bf35db9a4 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel.ts @@ -1,15 +1,17 @@ /// -import PanelMeta from './panel_meta2'; +import PanelMeta from './panel_meta3'; export class PanelCtrl { meta: any; panel: any; row: any; dashboard: any; + tabIndex: number; constructor(private scope) { this.meta = new PanelMeta(this.panel); + this.tabIndex = 0; this.publishAppEvent('panel-instantiated', {scope: scope}); } @@ -36,4 +38,28 @@ export class PanelCtrl { } } +export class PanelDirective { + template: string; + templateUrl: string; + bindToController: boolean; + scope: any; + controller: any; + controllerAs: string; + + getDirective() { + return { + template: this.template, + templateUrl: this.templateUrl, + controller: this.controller, + controllerAs: 'ctrl', + bindToController: true, + scope: {dashboard: "=", panel: "=", row: "="}, + link: this.link + }; + } + + link(scope) { + return null; + } +} diff --git a/public/app/features/panel/panel_editor_tab.ts b/public/app/features/panel/panel_editor_tab.ts new file mode 100644 index 00000000000..56e3078962e --- /dev/null +++ b/public/app/features/panel/panel_editor_tab.ts @@ -0,0 +1,24 @@ +/// + +import angular from 'angular'; +import config from 'app/core/config'; + +var directiveModule = angular.module('grafana.directives'); + +/** @ngInject */ +function panelEditorTab(dynamicDirectiveSrv) { + return dynamicDirectiveSrv.create({ + scope: { + panelCtrl: "=", + editorTab: "=", + }, + directive: scope => { + return Promise.resolve({ + name: 'panel-editor-tab-' + scope.editorTab.title, + fn: scope.editorTab.directiveFn, + }); + } + }); +} + +directiveModule.directive('panelEditorTab', panelEditorTab); diff --git a/public/app/features/panel/panel_loader.ts b/public/app/features/panel/panel_loader.ts index dd0284138ab..cf42458a9a7 100644 --- a/public/app/features/panel/panel_loader.ts +++ b/public/app/features/panel/panel_loader.ts @@ -3,12 +3,12 @@ import angular from 'angular'; import config from 'app/core/config'; -import {unknownPanelDirective} from '../../plugins/panel/unknown/module'; +import {UnknownPanel} from '../../plugins/panel/unknown/module'; var directiveModule = angular.module('grafana.directives'); /** @ngInject */ -function panelLoader($compile, dynamicDirectiveSrv, $http, $q) { +function panelLoader($compile, dynamicDirectiveSrv, $http, $q, $injector) { return { restrict: 'E', scope: { @@ -18,11 +18,11 @@ function panelLoader($compile, dynamicDirectiveSrv, $http, $q) { }, link: function(scope, elem, attrs) { - function getTemplate(component) { - if (component.template) { - return $q.when(component.template); + function getTemplate(directive) { + if (directive.template) { + return $q.when(directive.template); } - return $http.get(component.templateUrl).then(res => { + return $http.get(directive.templateUrl).then(res => { return res.data; }); } @@ -38,37 +38,42 @@ function panelLoader($compile, dynamicDirectiveSrv, $http, $q) { elem.append(child); } - function addPanel(name, directive) { - if (!directive.registered) { - getTemplate(directive).then(template => { - directive.templateUrl = null; - directive.template = `${template}`; - directive.controllerAs = 'ctrl'; - directive.bindToController = true; - directive.scope = { - dashboard: "=", - panel: "=", - row: "=" - }; + function addPanel(name, Panel) { + if (Panel.registered) { + addPanelAndCompile(name); + } - directiveModule.directive(attrs.$normalize(name), function() { - return directive; - }); - directive.registered = true; + if (Panel.promise) { + Panel.promise.then(() => { addPanelAndCompile(name); }); + return; } - addPanelAndCompile(name); + + var panelInstance = $injector.instantiate(Panel); + var directive = panelInstance.getDirective(); + + Panel.promise = getTemplate(directive).then(template => { + directive.templateUrl = null; + directive.template = `${template}`; + directiveModule.directive(attrs.$normalize(name), function() { + return directive; + }); + Panel.registered = true; + addPanelAndCompile(name); + }); + + return; } var panelElemName = 'panel-directive-' + scope.panel.type; let panelInfo = config.panels[scope.panel.type]; if (!panelInfo) { - addPanel(panelElemName, unknownPanelDirective); + addPanel(panelElemName, UnknownPanel); } System.import(panelInfo.module).then(function(panelModule) { - addPanel(panelElemName, panelModule.panel); + addPanel(panelElemName, panelModule.Panel); }).catch(err => { console.log('Panel err: ', err); }); @@ -76,4 +81,4 @@ function panelLoader($compile, dynamicDirectiveSrv, $http, $q) { }; } -angular.module('grafana.directives').directive('panelLoader', panelLoader); +directiveModule.directive('panelLoader', panelLoader); diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js index bea8d27d2fa..16ee311ff52 100644 --- a/public/app/features/panel/panel_menu.js +++ b/public/app/features/panel/panel_menu.js @@ -11,9 +11,9 @@ function (angular, $, _) { .directive('panelMenu', function($compile, linkSrv) { var linkTemplate = '' + - '{{ctrl.panel.title}}' + + '{{ctrl.panel.title | interpolateTemplateVars:this}}' + '' + - ' {{ctrl.panelMeta.timeInfo}}' + + ' {{ctrl.panelMeta.timeInfo}}' + ''; function createExternalLinkMenu(ctrl) { @@ -44,7 +44,7 @@ function (angular, $, _) { template += '
'; template += ''; - _.each(ctrl.panelMeta.menu, function(item) { + _.each(ctrl.meta.menu, function(item) { // skip edit actions if not editor if (item.role === 'Editor' && !ctrl.dashboard.meta.canEdit) { return; @@ -64,7 +64,7 @@ function (angular, $, _) { } function getExtendedMenu(ctrl) { - return angular.copy(ctrl.panelMeta.extendedMenu); + return angular.copy(ctrl.meta.extendedMenu); } return { @@ -80,7 +80,7 @@ function (angular, $, _) { elem.append($link); - $scope.$watchCollection('panel.links', function(newValue) { + $scope.$watchCollection('ctrl.panel.links', function(newValue) { var showIcon = (newValue ? newValue.length > 0 : false) && ctrl.panel.title !== ''; $panelLinksBtn.toggle(showIcon); }); diff --git a/public/app/features/panel/panel_meta3.ts b/public/app/features/panel/panel_meta3.ts new file mode 100644 index 00000000000..056a75d5ee3 --- /dev/null +++ b/public/app/features/panel/panel_meta3.ts @@ -0,0 +1,56 @@ +/// + +import config from 'app/core/config'; + +function panelOptionsTab() { + return {templateUrl: 'app/partials/panelgeneral.html'}; +} + +export default class PanelMeta { + description: any; + icon: any; + name: any; + menu: any; + editorTabs: any; + extendedMenu: any; + + constructor(panel) { + let panelInfo = config.panels[panel.type]; + console.log(panelInfo); + + this.icon = panelInfo.icon; + this.name = panelInfo.name; + this.menu = []; + this.editorTabs = []; + this.extendedMenu = []; + + if (panelInfo.fullscreen) { + this.addMenuItem('View', 'icon-eye-open', 'ctrl.viewPanel(); dismiss();'); + } + + this.addMenuItem('Edit', 'icon-cog', 'ctrl.editPanel(); dismiss();', 'Editor'); + this.addMenuItem('Duplicate', 'icon-copy', 'ctrl.duplicate()', 'Editor'); + this.addMenuItem('Share', 'icon-share', 'ctrl.share(); dismiss();'); + + this.addEditorTab('General', panelOptionsTab); + + if (panelInfo.metricsEditor) { + this.addEditorTab('Metrics', 'app/partials/metrics.html'); + } + + this.addExtendedMenuItem('Panel JSON', '', 'ctrl.editPanelJson(); dismiss();'); + } + + addMenuItem (text, icon, click, role?) { + this.menu.push({text: text, icon: icon, click: click, role: role}); + } + + addExtendedMenuItem (text, icon, click, role?) { + this.extendedMenu.push({text: text, icon: icon, click: click, role: role}); + } + + addEditorTab(title, directiveFn) { + this.editorTabs.push({title: title, directiveFn: directiveFn}); + } +} + diff --git a/public/app/features/panel/partials/panel.html b/public/app/features/panel/partials/panel.html index 3b325366826..c3fb0090241 100644 --- a/public/app/features/panel/partials/panel.html +++ b/public/app/features/panel/partials/panel.html @@ -23,12 +23,12 @@
- - {{ctrl.panelMeta.panelName}} + + {{ctrl.meta.name}}
-
-
+
+
@@ -38,8 +38,8 @@
-
-
+
+
diff --git a/public/app/partials/panelgeneral.html b/public/app/partials/panelgeneral.html index 09ccbe86dfa..d0e41e5180f 100644 --- a/public/app/partials/panelgeneral.html +++ b/public/app/partials/panelgeneral.html @@ -7,23 +7,23 @@ Title
  • - +
  • Span
  • - +
  • Height
  • - +
  • - +
    • @@ -38,7 +38,7 @@ Repeat Panel
  • -
    • @@ -46,7 +46,7 @@ Min span
  • -
    • @@ -56,6 +56,6 @@
    - + diff --git a/public/app/plugins/panel/test/module.ts b/public/app/plugins/panel/test/module.ts index ae9af416ed0..da1682544a4 100644 --- a/public/app/plugins/panel/test/module.ts +++ b/public/app/plugins/panel/test/module.ts @@ -1,6 +1,6 @@ /// -import {PanelCtrl} from '../../../features/panel/panel_ctrl'; +import {PanelDirective, PanelCtrl} from '../../../features/panel/panel'; class TestPanelCtrl extends PanelCtrl { constructor($scope) { @@ -8,15 +8,23 @@ class TestPanelCtrl extends PanelCtrl { } } -var panel = { - templateUrl: `app/plugins/panel/test/module.html`, - controller: TestPanelCtrl, - link: function(scope, elem) { - console.log('panel link'); + +class TestPanel extends PanelDirective { + templateUrl = `app/plugins/panel/test/module.html`; + controller = TestPanelCtrl; + + constructor($http) { + super(); + console.log('panel ctor: ', $http); } -}; + + link(scope) { + console.log('panel link: ', scope.ctrl.panel.id); + } +} export { TestPanelCtrl, - panel, + // testPanelDirective as panel, + TestPanel as Panel, } diff --git a/public/app/plugins/panel/test/plugin.json b/public/app/plugins/panel/test/plugin.json index b2d7b9b42c6..08fb883af76 100644 --- a/public/app/plugins/panel/test/plugin.json +++ b/public/app/plugins/panel/test/plugin.json @@ -1,5 +1,18 @@ { "type": "panel", "name": "Test", - "id": "test" + "id": "test", + + "info": { + "description": "Test panel", + "author": { + "name": "Core Grafana Team.", + "url": "http://grafana.org" + }, + "logos": { + "icon": "fa fa-fw th-large", + "small": "img/logo_small.png", + "large": "img/logo_large.png" + } + } } diff --git a/public/app/plugins/panel/unknown/module.ts b/public/app/plugins/panel/unknown/module.ts index 8d1ce6c1f9a..4f729649395 100644 --- a/public/app/plugins/panel/unknown/module.ts +++ b/public/app/plugins/panel/unknown/module.ts @@ -1,15 +1,11 @@ /// -export function unknownPanelDirective() { - return { - restrict: 'E', - template: ` - -
    - Unknown panel type: {{panel.type}} -
    -     - `, - }; +import {PanelDirective} from '../../../features/panel/panel'; + +export class UnknownPanel extends PanelDirective { + template = `
    + Unknown panel type: {{ctrl.panel.type}} +
    `; } + From 4132cf12e3c8743e9df41dbe1dc5c8db70802097 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 24 Jan 2016 17:30:29 -0500 Subject: [PATCH 10/91] feat(panels): more panel refactoring --- public/app/features/dashboard/viewStateSrv.js | 6 +- public/app/features/panel/panel.ts | 37 ++++++++++-- public/app/features/panel/panel_menu.js | 6 +- public/app/features/panel/panel_meta3.ts | 56 ------------------- public/app/features/panel/partials/panel.html | 16 +++--- public/app/plugins/panel/test/module.ts | 9 --- 6 files changed, 48 insertions(+), 82 deletions(-) delete mode 100644 public/app/features/panel/panel_meta3.ts diff --git a/public/app/features/dashboard/viewStateSrv.js b/public/app/features/dashboard/viewStateSrv.js index 63bb999e3ca..c523cd709d7 100644 --- a/public/app/features/dashboard/viewStateSrv.js +++ b/public/app/features/dashboard/viewStateSrv.js @@ -167,7 +167,11 @@ function (angular, _, $) { self.panelScopes.push(panelScope); if (self.state.panelId === panelScope.ctrl.panel.id) { - self.enterFullscreen(panelScope); + if (self.state.edit) { + panelScope.ctrl.editPanel(); + } else { + panelScope.ctrl.viewPanel(); + } } panelScope.$on('$destroy', function() { diff --git a/public/app/features/panel/panel.ts b/public/app/features/panel/panel.ts index a3bf35db9a4..550f453260b 100644 --- a/public/app/features/panel/panel.ts +++ b/public/app/features/panel/panel.ts @@ -1,17 +1,26 @@ /// -import PanelMeta from './panel_meta3'; +import config from 'app/core/config'; + +function generalOptionsTabEditorTab() { + return {templateUrl: 'public/app/partials/panelgeneral.html'}; +} export class PanelCtrl { - meta: any; panel: any; row: any; dashboard: any; - tabIndex: number; + editorTabIndex: number; + name: string; + icon: string; + editorTabs: any; constructor(private scope) { - this.meta = new PanelMeta(this.panel); - this.tabIndex = 0; + var plugin = config.panels[this.panel.type]; + + this.name = plugin.name; + this.icon = plugin.info.icon; + this.editorTabIndex = 0; this.publishAppEvent('panel-instantiated', {scope: scope}); } @@ -30,12 +39,30 @@ export class PanelCtrl { } editPanel() { + if (!this.editorTabs) { + this.initEditorTabs(); + } + this.changeView(true, true); } exitFullscreen() { this.changeView(false, false); } + + initEditorTabs() { + this.editorTabs = []; + this.editorTabs.push({title: 'General', directiveFn: generalOptionsTabEditorTab}); + } + + getMenu() { + let menu = []; + menu.push({text: 'View', click: 'ctrl.viewPanel(); dismiss();'}); + menu.push({text: 'Edit', click: 'ctrl.editPanel(); dismiss();', role: 'Editor'}); + menu.push({text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor' }); + menu.push({text: 'Share', click: 'ctrl.share(); dismiss();'}); + return menu; + } } export class PanelDirective { diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js index 16ee311ff52..5ec5129dc38 100644 --- a/public/app/features/panel/panel_menu.js +++ b/public/app/features/panel/panel_menu.js @@ -13,7 +13,7 @@ function (angular, $, _) { '' + '{{ctrl.panel.title | interpolateTemplateVars:this}}' + '' + - ' {{ctrl.panelMeta.timeInfo}}' + + ' {{ctrl.timeInfo}}' + ''; function createExternalLinkMenu(ctrl) { @@ -44,7 +44,7 @@ function (angular, $, _) { template += '
    '; template += ''; - _.each(ctrl.meta.menu, function(item) { + _.each(ctrl.getMenu(), function(item) { // skip edit actions if not editor if (item.role === 'Editor' && !ctrl.dashboard.meta.canEdit) { return; @@ -64,7 +64,7 @@ function (angular, $, _) { } function getExtendedMenu(ctrl) { - return angular.copy(ctrl.meta.extendedMenu); + return angular.copy(ctrl.extendedMenu); } return { diff --git a/public/app/features/panel/panel_meta3.ts b/public/app/features/panel/panel_meta3.ts deleted file mode 100644 index 056a75d5ee3..00000000000 --- a/public/app/features/panel/panel_meta3.ts +++ /dev/null @@ -1,56 +0,0 @@ -/// - -import config from 'app/core/config'; - -function panelOptionsTab() { - return {templateUrl: 'app/partials/panelgeneral.html'}; -} - -export default class PanelMeta { - description: any; - icon: any; - name: any; - menu: any; - editorTabs: any; - extendedMenu: any; - - constructor(panel) { - let panelInfo = config.panels[panel.type]; - console.log(panelInfo); - - this.icon = panelInfo.icon; - this.name = panelInfo.name; - this.menu = []; - this.editorTabs = []; - this.extendedMenu = []; - - if (panelInfo.fullscreen) { - this.addMenuItem('View', 'icon-eye-open', 'ctrl.viewPanel(); dismiss();'); - } - - this.addMenuItem('Edit', 'icon-cog', 'ctrl.editPanel(); dismiss();', 'Editor'); - this.addMenuItem('Duplicate', 'icon-copy', 'ctrl.duplicate()', 'Editor'); - this.addMenuItem('Share', 'icon-share', 'ctrl.share(); dismiss();'); - - this.addEditorTab('General', panelOptionsTab); - - if (panelInfo.metricsEditor) { - this.addEditorTab('Metrics', 'app/partials/metrics.html'); - } - - this.addExtendedMenuItem('Panel JSON', '', 'ctrl.editPanelJson(); dismiss();'); - } - - addMenuItem (text, icon, click, role?) { - this.menu.push({text: text, icon: icon, click: click, role: role}); - } - - addExtendedMenuItem (text, icon, click, role?) { - this.extendedMenu.push({text: text, icon: icon, click: click, role: role}); - } - - addEditorTab(title, directiveFn) { - this.editorTabs.push({title: title, directiveFn: directiveFn}); - } -} - diff --git a/public/app/features/panel/partials/panel.html b/public/app/features/panel/partials/panel.html index c3fb0090241..bf946d16fc3 100644 --- a/public/app/features/panel/partials/panel.html +++ b/public/app/features/panel/partials/panel.html @@ -1,12 +1,12 @@
    - - + + - + @@ -23,12 +23,12 @@
    - - {{ctrl.meta.name}} + + {{ctrl.name}}
    -
    -
    +
    +
    @@ -38,7 +38,7 @@
    -
    +
    diff --git a/public/app/plugins/panel/test/module.ts b/public/app/plugins/panel/test/module.ts index da1682544a4..47eab73f936 100644 --- a/public/app/plugins/panel/test/module.ts +++ b/public/app/plugins/panel/test/module.ts @@ -12,15 +12,6 @@ class TestPanelCtrl extends PanelCtrl { class TestPanel extends PanelDirective { templateUrl = `app/plugins/panel/test/module.html`; controller = TestPanelCtrl; - - constructor($http) { - super(); - console.log('panel ctor: ', $http); - } - - link(scope) { - console.log('panel link: ', scope.ctrl.panel.id); - } } export { From a950ff9795482683f805127bd8e9c7d06da73e0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 24 Jan 2016 17:58:08 -0500 Subject: [PATCH 11/91] feat(panel): more panel base infrastructure --- public/app/features/panel/panel.ts | 15 ++++++++++++--- public/app/plugins/panel/test/module.ts | 19 ++++++++++++------- 2 files changed, 24 insertions(+), 10 deletions(-) diff --git a/public/app/features/panel/panel.ts b/public/app/features/panel/panel.ts index 550f453260b..bff0d68955b 100644 --- a/public/app/features/panel/panel.ts +++ b/public/app/features/panel/panel.ts @@ -14,18 +14,20 @@ export class PanelCtrl { name: string; icon: string; editorTabs: any; + $scope: any; - constructor(private scope) { + constructor($scope) { var plugin = config.panels[this.panel.type]; + this.$scope = $scope; this.name = plugin.name; this.icon = plugin.info.icon; this.editorTabIndex = 0; - this.publishAppEvent('panel-instantiated', {scope: scope}); + this.publishAppEvent('panel-instantiated', {scope: $scope}); } publishAppEvent(evtName, evt) { - this.scope.$root.appEvent(evtName, evt); + this.$scope.$root.appEvent(evtName, evt); } changeView(fullscreen, edit) { @@ -53,8 +55,11 @@ export class PanelCtrl { initEditorTabs() { this.editorTabs = []; this.editorTabs.push({title: 'General', directiveFn: generalOptionsTabEditorTab}); + this.editorTabs = this.editorTabs.concat(this.getEditorTabs()); } + getEditorTabs() { return [];} + getMenu() { let menu = []; menu.push({text: 'View', click: 'ctrl.viewPanel(); dismiss();'}); @@ -74,6 +79,10 @@ export class PanelDirective { controllerAs: string; getDirective() { + if (!this.controller) { + this.controller = PanelCtrl; + } + return { template: this.template, templateUrl: this.templateUrl, diff --git a/public/app/plugins/panel/test/module.ts b/public/app/plugins/panel/test/module.ts index 47eab73f936..eed9fdc021d 100644 --- a/public/app/plugins/panel/test/module.ts +++ b/public/app/plugins/panel/test/module.ts @@ -2,20 +2,25 @@ import {PanelDirective, PanelCtrl} from '../../../features/panel/panel'; -class TestPanelCtrl extends PanelCtrl { +function optionsTab() { + return { + template: '

    options!

    ' + }; +} + +export class TestPanelCtrl extends PanelCtrl { constructor($scope) { super($scope); } -} + getEditorTabs() { + return [{title: 'Options', directiveFn: optionsTab}]; + } +} class TestPanel extends PanelDirective { templateUrl = `app/plugins/panel/test/module.html`; controller = TestPanelCtrl; } -export { - TestPanelCtrl, - // testPanelDirective as panel, - TestPanel as Panel, -} +export {TestPanel as Panel} From 3e14f8a0e54b942fde51af9cf3387bd814572834 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 24 Jan 2016 18:44:21 -0500 Subject: [PATCH 12/91] feat(): panel refactoring --- .../app/features/panel/metrics_panel_ctrl.ts | 22 ++++++ public/app/features/panel/panel.ts | 76 ++----------------- public/app/features/panel/panel_ctrl.ts | 69 +++++++++++++++++ public/app/plugins/panel/test/module.ts | 13 ++-- 4 files changed, 105 insertions(+), 75 deletions(-) create mode 100644 public/app/features/panel/metrics_panel_ctrl.ts create mode 100644 public/app/features/panel/panel_ctrl.ts diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts new file mode 100644 index 00000000000..968bcea52b6 --- /dev/null +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -0,0 +1,22 @@ +/// + +import config from 'app/core/config'; +import {PanelCtrl} from './panel_ctrl'; + +function metricsEditorTab() { + return {templateUrl: 'public/app/partials/metrics.html'}; +} + +class MetricsPanelCtrl extends PanelCtrl { + constructor($scope) { + super($scope); + } + + initEditorTabs() { + super.initEditorTabs(); + this.editorTabs.push({title: 'Metrics', directiveFn: metricsEditorTab}); + } +} + +export {MetricsPanelCtrl}; + diff --git a/public/app/features/panel/panel.ts b/public/app/features/panel/panel.ts index bff0d68955b..08ede83eb95 100644 --- a/public/app/features/panel/panel.ts +++ b/public/app/features/panel/panel.ts @@ -2,75 +2,10 @@ import config from 'app/core/config'; -function generalOptionsTabEditorTab() { - return {templateUrl: 'public/app/partials/panelgeneral.html'}; -} +import {PanelCtrl} from './panel_ctrl'; +import {MetricsPanelCtrl} from './metrics_panel_ctrl'; -export class PanelCtrl { - panel: any; - row: any; - dashboard: any; - editorTabIndex: number; - name: string; - icon: string; - editorTabs: any; - $scope: any; - - constructor($scope) { - var plugin = config.panels[this.panel.type]; - - this.$scope = $scope; - this.name = plugin.name; - this.icon = plugin.info.icon; - this.editorTabIndex = 0; - this.publishAppEvent('panel-instantiated', {scope: $scope}); - } - - publishAppEvent(evtName, evt) { - this.$scope.$root.appEvent(evtName, evt); - } - - changeView(fullscreen, edit) { - this.publishAppEvent('panel-change-view', { - fullscreen: fullscreen, edit: edit, panelId: this.panel.id - }); - } - - viewPanel() { - this.changeView(true, false); - } - - editPanel() { - if (!this.editorTabs) { - this.initEditorTabs(); - } - - this.changeView(true, true); - } - - exitFullscreen() { - this.changeView(false, false); - } - - initEditorTabs() { - this.editorTabs = []; - this.editorTabs.push({title: 'General', directiveFn: generalOptionsTabEditorTab}); - this.editorTabs = this.editorTabs.concat(this.getEditorTabs()); - } - - getEditorTabs() { return [];} - - getMenu() { - let menu = []; - menu.push({text: 'View', click: 'ctrl.viewPanel(); dismiss();'}); - menu.push({text: 'Edit', click: 'ctrl.editPanel(); dismiss();', role: 'Editor'}); - menu.push({text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor' }); - menu.push({text: 'Share', click: 'ctrl.share(); dismiss();'}); - return menu; - } -} - -export class PanelDirective { +class PanelDirective { template: string; templateUrl: string; bindToController: boolean; @@ -99,3 +34,8 @@ export class PanelDirective { } } +export { + PanelCtrl, + MetricsPanelCtrl, + PanelDirective, +} diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts new file mode 100644 index 00000000000..b6b6e07ed86 --- /dev/null +++ b/public/app/features/panel/panel_ctrl.ts @@ -0,0 +1,69 @@ +/// + +import config from 'app/core/config'; + +function generalOptionsTabEditorTab() { + return {templateUrl: 'public/app/partials/panelgeneral.html'}; +} + +export class PanelCtrl { + panel: any; + row: any; + dashboard: any; + editorTabIndex: number; + name: string; + icon: string; + editorTabs: any; + $scope: any; + isMetricsPanel: boolean; + + constructor($scope) { + var plugin = config.panels[this.panel.type]; + + this.$scope = $scope; + this.name = plugin.name; + this.icon = plugin.info.icon; + this.editorTabIndex = 0; + this.publishAppEvent('panel-instantiated', {scope: $scope}); + } + + publishAppEvent(evtName, evt) { + this.$scope.$root.appEvent(evtName, evt); + } + + changeView(fullscreen, edit) { + this.publishAppEvent('panel-change-view', { + fullscreen: fullscreen, edit: edit, panelId: this.panel.id + }); + } + + viewPanel() { + this.changeView(true, false); + } + + editPanel() { + if (!this.editorTabs) { + this.initEditorTabs(); + } + + this.changeView(true, true); + } + + exitFullscreen() { + this.changeView(false, false); + } + + initEditorTabs() { + this.editorTabs = []; + this.editorTabs.push({title: 'General', directiveFn: generalOptionsTabEditorTab}); + } + + getMenu() { + let menu = []; + menu.push({text: 'View', click: 'ctrl.viewPanel(); dismiss();'}); + menu.push({text: 'Edit', click: 'ctrl.editPanel(); dismiss();', role: 'Editor'}); + menu.push({text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor' }); + menu.push({text: 'Share', click: 'ctrl.share(); dismiss();'}); + return menu; + } +} diff --git a/public/app/plugins/panel/test/module.ts b/public/app/plugins/panel/test/module.ts index eed9fdc021d..0868002c2dd 100644 --- a/public/app/plugins/panel/test/module.ts +++ b/public/app/plugins/panel/test/module.ts @@ -1,20 +1,19 @@ /// -import {PanelDirective, PanelCtrl} from '../../../features/panel/panel'; +import {PanelDirective, MetricsPanelCtrl} from '../../../features/panel/panel'; function optionsTab() { - return { - template: '

    options!

    ' - }; + return {template: '

    options!

    ' }; } -export class TestPanelCtrl extends PanelCtrl { +export class TestPanelCtrl extends MetricsPanelCtrl { constructor($scope) { super($scope); } - getEditorTabs() { - return [{title: 'Options', directiveFn: optionsTab}]; + initEditorTabs() { + super.initEditorTabs(); + this.editorTabs.push({title: 'Options', directiveFn: optionsTab}); } } From 8f4cf6c797c716e7e22090f82f2792ab313322af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 25 Jan 2016 09:56:17 -0500 Subject: [PATCH 13/91] feat(panels): updated text panel to new format --- public/app/plugins/panel/text/editor.html | 10 +- public/app/plugins/panel/text/module.html | 4 +- public/app/plugins/panel/text/module.js | 113 ---------------------- public/app/plugins/panel/text/module.ts | 92 ++++++++++++++++++ 4 files changed, 98 insertions(+), 121 deletions(-) delete mode 100644 public/app/plugins/panel/text/module.js create mode 100644 public/app/plugins/panel/text/module.ts diff --git a/public/app/plugins/panel/text/editor.html b/public/app/plugins/panel/text/editor.html index b3b8afbbec0..ea281d61a30 100644 --- a/public/app/plugins/panel/text/editor.html +++ b/public/app/plugins/panel/text/editor.html @@ -1,17 +1,17 @@
    - +
    -
    - +
    +
    -
    diff --git a/public/app/plugins/panel/text/module.html b/public/app/plugins/panel/text/module.html index 5a933d5acc3..12a02597384 100644 --- a/public/app/plugins/panel/text/module.html +++ b/public/app/plugins/panel/text/module.html @@ -1,3 +1 @@ - -

    -     +

    diff --git a/public/app/plugins/panel/text/module.js b/public/app/plugins/panel/text/module.js deleted file mode 100644 index e0e21c8e1ae..00000000000 --- a/public/app/plugins/panel/text/module.js +++ /dev/null @@ -1,113 +0,0 @@ -define([ - 'angular', - 'app/app', - 'lodash', - 'require', - 'app/features/panel/panel_meta', -], -function (angular, app, _, require, PanelMeta) { - 'use strict'; - - var converter; - - /** @ngInject */ - function TextPanelCtrl($scope, templateSrv, $sce, panelSrv) { - - $scope.panelMeta = new PanelMeta({ - panelName: 'Text', - editIcon: "fa fa-text-width", - fullscreen: true, - }); - - $scope.panelMeta.addEditorTab('Edit text', 'app/plugins/panel/text/editor.html'); - - // Set and populate defaults - var _d = { - title : 'default title', - mode : "markdown", // 'html', 'markdown', 'text' - content : "", - style: {}, - }; - - _.defaults($scope.panel, _d); - - $scope.init = function() { - panelSrv.init($scope); - $scope.ready = false; - $scope.render(); - }; - - $scope.refreshData = function() { - $scope.panelMeta.loading = false; - $scope.render(); - }; - - $scope.render = function() { - if ($scope.panel.mode === 'markdown') { - $scope.renderMarkdown($scope.panel.content); - } - else if ($scope.panel.mode === 'html') { - $scope.updateContent($scope.panel.content); - } - else if ($scope.panel.mode === 'text') { - $scope.renderText($scope.panel.content); - } - $scope.panelRenderingComplete(); - }; - - $scope.renderText = function(content) { - content = content - .replace(/&/g, '&') - .replace(/>/g, '>') - .replace(/'); - - $scope.updateContent(content); - }; - - $scope.renderMarkdown = function(content) { - var text = content - .replace(/&/g, '&') - .replace(/>/g, '>') - .replace(/ + +import _ from 'lodash'; +import {PanelDirective, PanelCtrl} from '../../../features/panel/panel'; + +function optionsEditorTab() { + return {templateUrl: 'public/app/plugins/panel/text/editor.html'}; +} + + // Set and populate defaults +var panelDefaults = { + mode : "markdown", // 'html', 'markdown', 'text' + content : "# title", +}; + +export class TextPanelCtrl extends PanelCtrl { + converter: any; + content: string; + + /** @ngInject */ + constructor($scope, private templateSrv, private $sce) { + super($scope); + + _.defaults(this.panel, panelDefaults); + this.render(); + } + + initEditorTabs() { + super.initEditorTabs(); + this.editorTabs.push({title: 'Options', directiveFn: optionsEditorTab}); + } + + render() { + if (this.panel.mode === 'markdown') { + this.renderMarkdown(this.panel.content); + } else if (this.panel.mode === 'html') { + this.updateContent(this.panel.content); + } else if (this.panel.mode === 'text') { + this.renderText(this.panel.content); + } + // this.panelRenderingComplete(); + } + + refreshData() { + this.render(); + } + + renderText(content) { + content = content + .replace(/&/g, '&') + .replace(/>/g, '>') + .replace(/'); + this.updateContent(content); + } + + renderMarkdown(content) { + var text = content + .replace(/&/g, '&') + .replace(/>/g, '>') + .replace(/ { + this.converter = new Showdown.converter(); + this.updateContent(this.converter.makeHtml(text)); + }); + } + } + + updateContent(html) { + try { + this.content = this.$sce.trustAsHtml(this.templateSrv.replace(html, this.panel.scopedVars)); + } catch (e) { + console.log('Text panel error: ', e); + this.content = this.$sce.trustAsHtml(html); + } + + if (!this.$scope.$$phase) { + this.$scope.$digest(); + } + } +} + +class TextPanel extends PanelDirective { + templateUrl = `app/plugins/panel/text/module.html`; + controller = TextPanelCtrl; +} + +export {TextPanel as Panel} From 73af4df96d648f24a5cae0a3e92f9b4df368b547 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 25 Jan 2016 11:41:20 -0500 Subject: [PATCH 14/91] feat(panels): upgraded text panel --- public/app/features/panel/panel_ctrl.ts | 15 +++++++++++++-- public/app/plugins/panel/text/module.ts | 19 +++++++------------ 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index b6b6e07ed86..0fb94e660d5 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -25,6 +25,12 @@ export class PanelCtrl { this.icon = plugin.info.icon; this.editorTabIndex = 0; this.publishAppEvent('panel-instantiated', {scope: $scope}); + + $scope.$on("refresh", () => this.refresh()); + } + + refresh() { + return; } publishAppEvent(evtName, evt) { @@ -43,6 +49,8 @@ export class PanelCtrl { editPanel() { if (!this.editorTabs) { + this.editorTabs = []; + this.editorTabs.push({title: 'General', directiveFn: generalOptionsTabEditorTab}); this.initEditorTabs(); } @@ -54,8 +62,11 @@ export class PanelCtrl { } initEditorTabs() { - this.editorTabs = []; - this.editorTabs.push({title: 'General', directiveFn: generalOptionsTabEditorTab}); + return; + } + + addEditorTab(title, directiveFn) { + this.editorTabs.push({title: title, directiveFn: directiveFn}); } getMenu() { diff --git a/public/app/plugins/panel/text/module.ts b/public/app/plugins/panel/text/module.ts index 3697533c1c2..837ccfe713f 100644 --- a/public/app/plugins/panel/text/module.ts +++ b/public/app/plugins/panel/text/module.ts @@ -3,10 +3,6 @@ import _ from 'lodash'; import {PanelDirective, PanelCtrl} from '../../../features/panel/panel'; -function optionsEditorTab() { - return {templateUrl: 'public/app/plugins/panel/text/editor.html'}; -} - // Set and populate defaults var panelDefaults = { mode : "markdown", // 'html', 'markdown', 'text' @@ -26,8 +22,9 @@ export class TextPanelCtrl extends PanelCtrl { } initEditorTabs() { - super.initEditorTabs(); - this.editorTabs.push({title: 'Options', directiveFn: optionsEditorTab}); + this.addEditorTab('Options', () => { + return { templateUrl: 'public/app/plugins/panel/text/editor.html' }; + }); } render() { @@ -41,7 +38,7 @@ export class TextPanelCtrl extends PanelCtrl { // this.panelRenderingComplete(); } - refreshData() { + refresh() { this.render(); } @@ -65,7 +62,9 @@ export class TextPanelCtrl extends PanelCtrl { } else { System.import('vendor/showdown').then(Showdown => { this.converter = new Showdown.converter(); - this.updateContent(this.converter.makeHtml(text)); + this.$scope.$apply(() => { + this.updateContent(this.converter.makeHtml(text)); + }); }); } } @@ -77,10 +76,6 @@ export class TextPanelCtrl extends PanelCtrl { console.log('Text panel error: ', e); this.content = this.$sce.trustAsHtml(html); } - - if (!this.$scope.$$phase) { - this.$scope.$digest(); - } } } From 9c6698e87b13de400f876e2dc538565ec1c63d0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 25 Jan 2016 15:09:37 -0500 Subject: [PATCH 15/91] feat(panels): progress on new panel infrastructure, base classes --- public/app/features/dashboard/viewStateSrv.js | 7 ++- .../app/features/panel/metrics_panel_ctrl.ts | 60 ++++++++++++++++--- public/app/features/panel/panel.ts | 2 +- public/app/features/panel/panel_ctrl.ts | 7 ++- public/app/features/panel/panel_editor_tab.ts | 2 +- public/app/features/panel/partials/panel.html | 4 +- public/app/features/panel/query_editor.ts | 10 ++-- public/app/partials/dashboard.html | 6 +- public/app/partials/metrics.html | 16 ++--- public/app/partials/panelgeneral.html | 14 ++--- .../app/plugins/datasource/graphite/module.js | 5 +- .../graphite/partials/query.editor.html | 4 +- .../plugins/datasource/graphite/query_ctrl.js | 9 +-- public/app/plugins/panel/test/module.ts | 15 ++++- public/app/plugins/panel/text/editor.html | 10 ++-- 15 files changed, 118 insertions(+), 53 deletions(-) diff --git a/public/app/features/dashboard/viewStateSrv.js b/public/app/features/dashboard/viewStateSrv.js index c523cd709d7..abe1ec3279e 100644 --- a/public/app/features/dashboard/viewStateSrv.js +++ b/public/app/features/dashboard/viewStateSrv.js @@ -17,6 +17,7 @@ function (angular, _, $) { self.state = {}; self.panelScopes = []; self.$scope = $scope; + self.dashboard = $scope.dashboard; $scope.exitFullscreen = function() { if (self.state.fullscreen) { @@ -74,7 +75,7 @@ function (angular, _, $) { DashboardViewState.prototype.update = function(state, skipUrlSync) { _.extend(this.state, state); - this.fullscreen = this.state.fullscreen; + this.dashboard.meta.fullscreen = this.state.fullscreen; if (!this.state.fullscreen) { this.state.panelId = null; @@ -92,7 +93,7 @@ function (angular, _, $) { DashboardViewState.prototype.syncState = function() { if (this.panelScopes.length === 0) { return; } - if (this.fullscreen) { + if (this.dashboard.meta.fullscreen) { if (this.fullscreenPanel) { this.leaveFullscreen(false); } @@ -148,13 +149,13 @@ function (angular, _, $) { ctrl.editMode = this.state.edit && this.$scope.dashboardMeta.canEdit; ctrl.height = ctrl.editMode ? editHeight : fullscreenHeight; + ctrl.fullscreen = true; this.oldTimeRange = ctrl.range; this.fullscreenPanel = panelScope; $(window).scrollTop(0); - panelScope.fullscreen = true; this.$scope.appEvent('panel-fullscreen-enter', {panelId: ctrl.panel.id}); $timeout(function() { diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index 968bcea52b6..2ce1dfa847f 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -3,18 +3,64 @@ import config from 'app/core/config'; import {PanelCtrl} from './panel_ctrl'; -function metricsEditorTab() { - return {templateUrl: 'public/app/partials/metrics.html'}; -} - class MetricsPanelCtrl extends PanelCtrl { - constructor($scope) { + error: boolean; + loading: boolean; + datasource: any; + + constructor($scope, private $q, private datasourceSrv) { super($scope); + this.editorTabIndex = 1; + + if (!this.panel.targets) { + this.panel.targets = [{}]; + } } initEditorTabs() { - super.initEditorTabs(); - this.editorTabs.push({title: 'Metrics', directiveFn: metricsEditorTab}); + this.addEditorTab('Metrics', () => { + return { templateUrl: 'public/app/partials/metrics.html' }; + }); + } + + refresh() { + this.getData(); + } + + refreshData(data) { + // null op + return data; + } + + loadSnapshot(data) { + // null op + return data; + } + + getData() { + if (this.otherPanelInFullscreenMode()) { return; } + + if (this.panel.snapshotData) { + if (this.loadSnapshot) { + this.loadSnapshot(this.panel.snapshotData); + } + return; + } + + delete this.error; + this.loading = true; + + this.datasourceSrv.get(this.panel.datasource).then(datasource => { + this.datasource = datasource; + return this.refreshData(this.datasource) || this.$q.when({}); + }).then(() => { + this.loading = false; + }, err => { + console.log('Panel data error:', err); + this.loading = false; + this.error = err.message || "Timeseries data request error"; + this.inspector = {error: err}; + }); } } diff --git a/public/app/features/panel/panel.ts b/public/app/features/panel/panel.ts index 08ede83eb95..4d80bb9dade 100644 --- a/public/app/features/panel/panel.ts +++ b/public/app/features/panel/panel.ts @@ -29,7 +29,7 @@ class PanelDirective { }; } - link(scope) { + link(scope, elem) { return null; } } diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index 0fb94e660d5..9bceaa482c5 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -15,7 +15,8 @@ export class PanelCtrl { icon: string; editorTabs: any; $scope: any; - isMetricsPanel: boolean; + fullscreen: boolean; + inspector: any; constructor($scope) { var plugin = config.panels[this.panel.type]; @@ -77,4 +78,8 @@ export class PanelCtrl { menu.push({text: 'Share', click: 'ctrl.share(); dismiss();'}); return menu; } + + otherPanelInFullscreenMode() { + return this.dashboard.meta.fullscreen && !this.fullscreen; + } } diff --git a/public/app/features/panel/panel_editor_tab.ts b/public/app/features/panel/panel_editor_tab.ts index 56e3078962e..68b1e67c01c 100644 --- a/public/app/features/panel/panel_editor_tab.ts +++ b/public/app/features/panel/panel_editor_tab.ts @@ -9,7 +9,7 @@ var directiveModule = angular.module('grafana.directives'); function panelEditorTab(dynamicDirectiveSrv) { return dynamicDirectiveSrv.create({ scope: { - panelCtrl: "=", + ctrl: "=", editorTab: "=", }, directive: scope => { diff --git a/public/app/features/panel/partials/panel.html b/public/app/features/panel/partials/panel.html index bf946d16fc3..55ed28eafc4 100644 --- a/public/app/features/panel/partials/panel.html +++ b/public/app/features/panel/partials/panel.html @@ -1,4 +1,4 @@ -
    +
    @@ -39,7 +39,7 @@
    - +
    diff --git a/public/app/features/panel/query_editor.ts b/public/app/features/panel/query_editor.ts index 01beceaee99..5b493362762 100644 --- a/public/app/features/panel/query_editor.ts +++ b/public/app/features/panel/query_editor.ts @@ -5,11 +5,11 @@ import angular from 'angular'; /** @ngInject */ function metricsQueryEditor(dynamicDirectiveSrv, datasourceSrv) { return dynamicDirectiveSrv.create({ - watchPath: "panel.datasource", + watchPath: "ctrl.panel.datasource", directive: scope => { - let datasource = scope.target.datasource || scope.panel.datasource; + let datasource = scope.target.datasource || scope.ctrl.panel.datasource; return datasourceSrv.get(datasource).then(ds => { - scope.datasource = ds; + scope.ctrl.datasource = ds; if (!scope.target.refId) { scope.target.refId = 'A'; @@ -29,9 +29,9 @@ function metricsQueryEditor(dynamicDirectiveSrv, datasourceSrv) { /** @ngInject */ function metricsQueryOptions(dynamicDirectiveSrv, datasourceSrv) { return dynamicDirectiveSrv.create({ - watchPath: "panel.datasource", + watchPath: "ctrl.panel.datasource", directive: scope => { - return datasourceSrv.get(scope.panel.datasource).then(ds => { + return datasourceSrv.get(scope.ctrl.panel.datasource).then(ds => { return System.import(ds.meta.module).then(dsModule => { return { name: 'metrics-query-options-' + ds.meta.id, diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index 7aeefb20730..5a0464dc099 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -23,7 +23,7 @@
    -
    +
    @@ -79,7 +79,7 @@
    -
    @@ -98,7 +98,7 @@
    -
    +
    ADD ROW diff --git a/public/app/partials/metrics.html b/public/app/partials/metrics.html index b5ff9f50327..a6f8d022407 100644 --- a/public/app/partials/metrics.html +++ b/public/app/partials/metrics.html @@ -1,25 +1,25 @@
    - +
    - -
    +
    @@ -34,12 +34,12 @@
    diff --git a/public/app/partials/panelgeneral.html b/public/app/partials/panelgeneral.html index d0e41e5180f..b8823e5658a 100644 --- a/public/app/partials/panelgeneral.html +++ b/public/app/partials/panelgeneral.html @@ -7,23 +7,23 @@ Title
  • - +
  • Span
  • - +
  • Height
  • - +
  • - +
    • @@ -38,7 +38,7 @@ Repeat Panel
  • -
    • @@ -46,7 +46,7 @@ Min span
  • -
    • @@ -56,6 +56,6 @@
    - + diff --git a/public/app/plugins/datasource/graphite/module.js b/public/app/plugins/datasource/graphite/module.js index 6d7592c421c..602dbb9cae8 100644 --- a/public/app/plugins/datasource/graphite/module.js +++ b/public/app/plugins/datasource/graphite/module.js @@ -5,7 +5,10 @@ function (GraphiteDatasource) { 'use strict'; function metricsQueryEditor() { - return {controller: 'GraphiteQueryCtrl', templateUrl: 'app/plugins/datasource/graphite/partials/query.editor.html'}; + return { + controller: 'GraphiteQueryCtrl', + templateUrl: 'app/plugins/datasource/graphite/partials/query.editor.html' + }; } function metricsQueryOptions() { diff --git a/public/app/plugins/datasource/graphite/partials/query.editor.html b/public/app/plugins/datasource/graphite/partials/query.editor.html index 4e671354079..76c0d6ddb65 100755 --- a/public/app/plugins/datasource/graphite/partials/query.editor.html +++ b/public/app/plugins/datasource/graphite/partials/query.editor.html @@ -48,14 +48,14 @@ {{target.refId}}
  • - +
    • - +
    @@ -24,13 +24,13 @@
  • + ng-model="ctrl.panel.query" ng-change="ctrl.refresh()" ng-model-onblur>
  • Tags
  • - +
    • @@ -47,7 +47,7 @@ Limit number to
  • - +
    • diff --git a/public/app/plugins/panel/dashlist/module.html b/public/app/plugins/panel/dashlist/module.html index de0e23a9ea5..455291409d5 100644 --- a/public/app/plugins/panel/dashlist/module.html +++ b/public/app/plugins/panel/dashlist/module.html @@ -1,6 +1,5 @@ - -
    -
    +
    +
    {{dash.title}} @@ -10,4 +9,4 @@
    - +
    diff --git a/public/app/plugins/panel/dashlist/module.js b/public/app/plugins/panel/dashlist/module.js deleted file mode 100644 index 8ffee99ab2c..00000000000 --- a/public/app/plugins/panel/dashlist/module.js +++ /dev/null @@ -1,82 +0,0 @@ -define([ - 'angular', - 'app/app', - 'lodash', - 'app/core/config', - 'app/features/panel/panel_meta', -], -function (angular, app, _, config, PanelMeta) { - 'use strict'; - - var module = angular.module('grafana.panels.dashlist', []); - app.useModule(module); - - /** @ngInject */ - function DashListPanelCtrl($scope, panelSrv, backendSrv) { - - $scope.panelMeta = new PanelMeta({ - panelName: 'Dashboard list', - editIcon: "fa fa-star", - fullscreen: true, - }); - - $scope.panelMeta.addEditorTab('Options', 'app/plugins/panel/dashlist/editor.html'); - - var defaults = { - mode: 'starred', - query: '', - limit: 10, - tags: [] - }; - - $scope.modes = ['starred', 'search']; - - _.defaults($scope.panel, defaults); - - $scope.dashList = []; - - $scope.init = function() { - panelSrv.init($scope); - - if ($scope.panel.tag) { - $scope.panel.tags = [$scope.panel.tag]; - delete $scope.panel.tag; - } - - if ($scope.isNewPanel()) { - $scope.panel.title = "Starred Dashboards"; - } - }; - - $scope.refreshData = function() { - var params = { - limit: $scope.panel.limit - }; - - if ($scope.panel.mode === 'starred') { - params.starred = "true"; - } else { - params.query = $scope.panel.query; - params.tag = $scope.panel.tags; - } - - return backendSrv.search(params).then(function(result) { - $scope.dashList = result; - $scope.panelRenderingComplete(); - }); - }; - - $scope.init(); - } - - function dashListPanelDirective() { - return { - controller: DashListPanelCtrl, - templateUrl: 'app/plugins/panel/dashlist/module.html', - }; - } - - return { - panel: dashListPanelDirective - }; -}); diff --git a/public/app/plugins/panel/dashlist/module.ts b/public/app/plugins/panel/dashlist/module.ts new file mode 100644 index 00000000000..d64174d77ff --- /dev/null +++ b/public/app/plugins/panel/dashlist/module.ts @@ -0,0 +1,63 @@ +/// + +import _ from 'lodash'; +import config from 'app/core/config'; +import {PanelDirective, PanelCtrl} from '../../../features/panel/panel'; + + // Set and populate defaults +var panelDefaults = { + mode: 'starred', + query: '', + limit: 10, + tags: [] +}; + +class DashListCtrl extends PanelCtrl { + dashList: any[]; + modes: any[]; + + /** @ngInject */ + constructor($scope, $injector, private backendSrv) { + super($scope, $injector); + _.defaults(this.panel, panelDefaults); + + if (this.panel.tag) { + this.panel.tags = [$scope.panel.tag]; + delete this.panel.tag; + } + } + + initEditMode() { + this.modes = ['starred', 'search']; + this.icon = "fa fa-star"; + this.addEditorTab('Options', () => { + return {templateUrl: 'app/plugins/panel/dashlist/editor.html'}; + }); + } + + refresh() { + var params: any = {limit: this.panel.limit}; + + if (this.panel.mode === 'starred') { + params.starred = "true"; + } else { + params.query = this.panel.query; + params.tag = this.panel.tags; + } + + return this.backendSrv.search(params).then(result => { + this.dashList = result; + this.renderingCompleted(); + }); + } +} + +class DashListPanel extends PanelDirective { + controller = DashListCtrl; + templateUrl = 'public/app/plugins/panel/dashlist/module.html'; +} + +export { + DashListCtrl, + DashListPanel as Panel +} diff --git a/public/app/plugins/panel/text/module.ts b/public/app/plugins/panel/text/module.ts index 351abb7be7c..f546f10c567 100644 --- a/public/app/plugins/panel/text/module.ts +++ b/public/app/plugins/panel/text/module.ts @@ -18,17 +18,19 @@ export class TextPanelCtrl extends PanelCtrl { super($scope, $injector); _.defaults(this.panel, panelDefaults); - this.render(); - } - initEditorTabs() { + initEditMode() { this.icon = 'fa fa-text-width'; this.addEditorTab('Options', () => { return { templateUrl: 'public/app/plugins/panel/text/editor.html' }; }); } + refresh() { + this.render(); + } + render() { if (this.panel.mode === 'markdown') { this.renderMarkdown(this.panel.content); @@ -40,10 +42,6 @@ export class TextPanelCtrl extends PanelCtrl { this.renderingCompleted(); } - refresh() { - this.render(); - } - renderText(content) { content = content .replace(/&/g, '&') From add7078f6688a0a6b0fac57ceb717c0a9ae83575 Mon Sep 17 00:00:00 2001 From: bergquist Date: Tue, 26 Jan 2016 19:03:43 +0100 Subject: [PATCH 26/91] tech(playlist): convert to typescript --- .../features/playlist/partials/playlist.html | 38 ++--- .../features/playlist/partials/playlists.html | 4 +- .../features/playlist/playlist_edit_ctrl.js | 144 ------------------ .../features/playlist/playlist_edit_ctrl.ts | 141 +++++++++++++++++ .../app/features/playlist/playlist_routes.js | 5 +- .../app/features/playlist/playlists_ctrl.js | 43 ------ .../app/features/playlist/playlists_ctrl.ts | 45 ++++++ 7 files changed, 211 insertions(+), 209 deletions(-) delete mode 100644 public/app/features/playlist/playlist_edit_ctrl.js create mode 100644 public/app/features/playlist/playlist_edit_ctrl.ts delete mode 100644 public/app/features/playlist/playlists_ctrl.js create mode 100644 public/app/features/playlist/playlists_ctrl.ts diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index 6f47c65568f..ca5cd05a997 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -1,14 +1,14 @@
    -

    New playlist

    -

    Edit playlist

    +

    New playlist

    +

    Edit playlist

    Name and interval

    @@ -20,7 +20,7 @@ Name
  • - +
    • @@ -31,7 +31,7 @@ Interval
  • - +
    • @@ -50,10 +50,10 @@
  • + ng-change="ctrl.search()">
    • @@ -64,20 +64,20 @@
    -
    Search results ({{filteredPlaylistItems.length}})
    +
    Search results ({{ctrl.filteredPlaylistItems.length}})
    - + - + @@ -87,18 +87,18 @@
    Added dashboards
    {{playlistItem.title}} -
    Search results empty
    - + @@ -113,11 +113,11 @@ + ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()" + ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save + ng-click="ctrl.backToList()">Cancel diff --git a/public/app/features/playlist/partials/playlists.html b/public/app/features/playlist/partials/playlists.html index a8a4724b34c..4aa7944623c 100644 --- a/public/app/features/playlist/partials/playlists.html +++ b/public/app/features/playlist/partials/playlists.html @@ -19,7 +19,7 @@ - + @@ -39,7 +39,7 @@ diff --git a/public/app/features/playlist/playlist_edit_ctrl.js b/public/app/features/playlist/playlist_edit_ctrl.js deleted file mode 100644 index 9b493c47d25..00000000000 --- a/public/app/features/playlist/playlist_edit_ctrl.js +++ /dev/null @@ -1,144 +0,0 @@ -define([ - 'angular', - 'app/core/config', - 'lodash' -], -function (angular, config, _) { - 'use strict'; - - var module = angular.module('grafana.controllers'); - - module.controller('PlaylistEditCtrl', function($scope, playlistSrv, backendSrv, $location, $route) { - $scope.filteredPlaylistItems = []; - $scope.foundPlaylistItems = []; - $scope.searchQuery = ''; - $scope.loading = false; - $scope.playlist = { - interval: '10m', - }; - $scope.playlistItems = []; - - $scope.init = function() { - if ($route.current.params.id) { - var playlistId = $route.current.params.id; - - backendSrv.get('/api/playlists/' + playlistId) - .then(function(result) { - $scope.playlist = result; - }); - - backendSrv.get('/api/playlists/' + playlistId + '/items') - .then(function(result) { - $scope.playlistItems = result; - }); - } - - $scope.search(); - }; - - $scope.search = function() { - var query = {limit: 10}; - - if ($scope.searchQuery) { - query.query = $scope.searchQuery; - } - - $scope.loading = true; - - backendSrv.search(query) - .then(function(results) { - $scope.foundPlaylistItems = results; - $scope.filterFoundPlaylistItems(); - }) - .finally(function() { - $scope.loading = false; - }); - }; - - $scope.filterFoundPlaylistItems = function() { - $scope.filteredPlaylistItems = _.reject($scope.foundPlaylistItems, function(playlistItem) { - return _.findWhere($scope.playlistItems, function(listPlaylistItem) { - return parseInt(listPlaylistItem.value) === playlistItem.id; - }); - }); - }; - - $scope.addPlaylistItem = function(playlistItem) { - playlistItem.value = playlistItem.id.toString(); - playlistItem.type = 'dashboard_by_id'; - playlistItem.order = $scope.playlistItems.length + 1; - - $scope.playlistItems.push(playlistItem); - $scope.filterFoundPlaylistItems(); - }; - - $scope.removePlaylistItem = function(playlistItem) { - _.remove($scope.playlistItems, function(listedPlaylistItem) { - return playlistItem === listedPlaylistItem; - }); - $scope.filterFoundPlaylistItems(); - }; - - $scope.savePlaylist = function(playlist, playlistItems) { - var savePromise; - - playlist.items = playlistItems; - - savePromise = playlist.id - ? backendSrv.put('/api/playlists/' + playlist.id, playlist) - : backendSrv.post('/api/playlists', playlist); - - savePromise - .then(function() { - $scope.appEvent('alert-success', ['Playlist saved', '']); - $location.path('/playlists'); - }, function() { - $scope.appEvent('alert-error', ['Unable to save playlist', '']); - }); - }; - - $scope.isNew = function() { - return !$scope.playlist.id; - }; - - $scope.isPlaylistEmpty = function() { - return !$scope.playlistItems.length; - }; - - $scope.isSearchResultsEmpty = function() { - return !$scope.foundPlaylistItems.length; - }; - - $scope.isSearchQueryEmpty = function() { - return $scope.searchQuery === ''; - }; - - $scope.backToList = function() { - $location.path('/playlists'); - }; - - $scope.isLoading = function() { - return $scope.loading; - }; - - $scope.movePlaylistItem = function(playlistItem, offset) { - var currentPosition = $scope.playlistItems.indexOf(playlistItem); - var newPosition = currentPosition + offset; - - if (newPosition >= 0 && newPosition < $scope.playlistItems.length) { - $scope.playlistItems.splice(currentPosition, 1); - $scope.playlistItems.splice(newPosition, 0, playlistItem); - } - }; - - $scope.movePlaylistItemUp = function(playlistItem) { - $scope.movePlaylistItem(playlistItem, -1); - }; - - $scope.movePlaylistItemDown = function(playlistItem) { - $scope.movePlaylistItem(playlistItem, 1); - }; - - $scope.init(); - }); -}); diff --git a/public/app/features/playlist/playlist_edit_ctrl.ts b/public/app/features/playlist/playlist_edit_ctrl.ts new file mode 100644 index 00000000000..f8f4a29fd5c --- /dev/null +++ b/public/app/features/playlist/playlist_edit_ctrl.ts @@ -0,0 +1,141 @@ +/// + +import angular from 'angular'; +import _ from 'lodash'; +import coreModule from '../../core/core_module'; +import config from 'app/core/config'; + +export class PlaylistEditCtrl { + filteredPlaylistItems: any = []; + foundPlaylistItems: any = []; + searchQuery: string = ''; + loading: boolean = false; + playlist: any = { + interval: '10m', + }; + playlistItems: any = []; + + /** @ngInject */ + constructor(private $scope, private playlistSrv, private backendSrv, private $location, private $route) { + if ($route.current.params.id) { + var playlistId = $route.current.params.id; + + backendSrv.get('/api/playlists/' + playlistId) + .then((result) => { + this.playlist = result; + }); + + backendSrv.get('/api/playlists/' + playlistId + '/items') + .then((result) => { + this.playlistItems = result; + }); + } + + this.search(); + } + + search() { + var query: any = {limit: 10}; + + if (this.searchQuery) { + query.query = this.searchQuery; + } + + this.loading = true; + + this.backendSrv.search(query) + .then((results) => { + this.foundPlaylistItems = results; + this.filterFoundPlaylistItems(); + }) + .finally(() => { + this.loading = false; + }); + }; + + filterFoundPlaylistItems() { + this.filteredPlaylistItems = _.reject(this.foundPlaylistItems, (playlistItem) => { + return _.findWhere(this.playlistItems, (listPlaylistItem) => { + return parseInt(listPlaylistItem.value) === playlistItem.id; + }); + }); + }; + + addPlaylistItem(playlistItem) { + playlistItem.value = playlistItem.id.toString(); + playlistItem.type = 'dashboard_by_id'; + playlistItem.order = this.playlistItems.length + 1; + + this.playlistItems.push(playlistItem); + this.filterFoundPlaylistItems(); + }; + + removePlaylistItem(playlistItem) { + _.remove(this.playlistItems, (listedPlaylistItem) => { + return playlistItem === listedPlaylistItem; + }); + this.filterFoundPlaylistItems(); + }; + + savePlaylist(playlist, playlistItems) { + var savePromise; + + playlist.items = playlistItems; + + savePromise = playlist.id + ? this.backendSrv.put('/api/playlists/' + playlist.id, playlist) + : this.backendSrv.post('/api/playlists', playlist); + + savePromise + .then(() => { + this.$scope.appEvent('alert-success', ['Playlist saved', '']); + this.$location.path('/playlists'); + }, () => { + this.$scope.appEvent('alert-error', ['Unable to save playlist', '']); + }); + }; + + isNew() { + return !this.playlist.id; + }; + + isPlaylistEmpty() { + return !this.playlistItems.length; + }; + + isSearchResultsEmpty() { + return !this.foundPlaylistItems.length; + }; + + isSearchQueryEmpty() { + return this.searchQuery === ''; + }; + + backToList() { + this.$location.path('/playlists'); + }; + + isLoading() { + return this.loading; + }; + + movePlaylistItem(playlistItem, offset) { + var currentPosition = this.playlistItems.indexOf(playlistItem); + var newPosition = currentPosition + offset; + + if (newPosition >= 0 && newPosition < this.playlistItems.length) { + this.playlistItems.splice(currentPosition, 1); + this.playlistItems.splice(newPosition, 0, playlistItem); + } + }; + + movePlaylistItemUp(playlistItem) { + this.movePlaylistItem(playlistItem, -1); + }; + + movePlaylistItemDown(playlistItem) { + this.movePlaylistItem(playlistItem, 1); + }; +} + +coreModule.controller('PlaylistEditCtrl', PlaylistEditCtrl); diff --git a/public/app/features/playlist/playlist_routes.js b/public/app/features/playlist/playlist_routes.js index 2de1f7b30c8..a3f9cc26f8c 100644 --- a/public/app/features/playlist/playlist_routes.js +++ b/public/app/features/playlist/playlist_routes.js @@ -1,4 +1,4 @@ -define([ + define([ 'angular', 'app/core/config', 'lodash' @@ -12,14 +12,17 @@ function (angular) { $routeProvider .when('/playlists', { templateUrl: 'app/features/playlist/partials/playlists.html', + controllerAs: 'ctrl', controller : 'PlaylistsCtrl' }) .when('/playlists/create', { templateUrl: 'app/features/playlist/partials/playlist.html', + controllerAs: 'ctrl', controller : 'PlaylistEditCtrl' }) .when('/playlists/edit/:id', { templateUrl: 'app/features/playlist/partials/playlist.html', + controllerAs: 'ctrl', controller : 'PlaylistEditCtrl' }) .when('/playlists/play/:id', { diff --git a/public/app/features/playlist/playlists_ctrl.js b/public/app/features/playlist/playlists_ctrl.js deleted file mode 100644 index 375492e6772..00000000000 --- a/public/app/features/playlist/playlists_ctrl.js +++ /dev/null @@ -1,43 +0,0 @@ -define([ - 'angular', - 'lodash' -], -function (angular, _) { - 'use strict'; - - var module = angular.module('grafana.controllers'); - - module.controller('PlaylistsCtrl', function($scope, $location, backendSrv) { - backendSrv.get('/api/playlists') - .then(function(result) { - $scope.playlists = result; - }); - - $scope.removePlaylistConfirmed = function(playlist) { - _.remove($scope.playlists, {id: playlist.id}); - - backendSrv.delete('/api/playlists/' + playlist.id) - .then(function() { - $scope.appEvent('alert-success', ['Playlist deleted', '']); - }, function() { - $scope.appEvent('alert-error', ['Unable to delete playlist', '']); - $scope.playlists.push(playlist); - }); - }; - - $scope.removePlaylist = function(playlist) { - - $scope.appEvent('confirm-modal', { - title: 'Confirm delete playlist', - text: 'Are you sure you want to delete playlist ' + playlist.name + '?', - yesText: "Delete", - icon: "fa-warning", - onConfirm: function() { - $scope.removePlaylistConfirmed(playlist); - } - }); - - }; - - }); -}); diff --git a/public/app/features/playlist/playlists_ctrl.ts b/public/app/features/playlist/playlists_ctrl.ts new file mode 100644 index 00000000000..af687a9698a --- /dev/null +++ b/public/app/features/playlist/playlists_ctrl.ts @@ -0,0 +1,45 @@ +/// + +import angular from 'angular'; +import _ from 'lodash'; +import coreModule from '../../core/core_module'; + +export class PlaylistsCtrl { + playlists: any; + + /** @ngInject */ + constructor(private $scope, private $location, private backendSrv) { + backendSrv.get('/api/playlists') + .then((result) => { + this.playlists = result; + }); + } + + removePlaylistConfirmed(playlist) { + _.remove(this.playlists, { id: playlist.id }); + + this.backendSrv.delete('/api/playlists/' + playlist.id) + .then(() => { + this.$scope.appEvent('alert-success', ['Playlist deleted', '']); + }, () => { + this.$scope.appEvent('alert-error', ['Unable to delete playlist', '']); + this.playlists.push(playlist); + }); + }; + + removePlaylist(playlist) { + + this.$scope.appEvent('confirm-modal', { + title: 'Confirm delete playlist', + text: 'Are you sure you want to delete playlist ' + playlist.name + '?', + yesText: "Delete", + icon: "fa-warning", + onConfirm: () => { + this.removePlaylistConfirmed(playlist); + } + }); + + }; +} + +coreModule.controller('PlaylistsCtrl', PlaylistsCtrl); From ebba7a0327ed1f8feed9a458789f33ede05b346b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 26 Jan 2016 17:28:07 -0500 Subject: [PATCH 27/91] feat(graph): updating graph panel to new format progress --- .../app/features/panel/metrics_panel_ctrl.ts | 13 +- public/app/features/panel/panel_ctrl.ts | 28 +- public/app/features/panel/panel_editor_tab.ts | 6 +- public/app/features/panel/partials/panel.html | 2 +- public/app/plugins/panel/graph/graph.js | 104 +++--- public/app/plugins/panel/graph/graph_ctrl.ts | 292 +++++++++++++++++ .../app/plugins/panel/graph/graph_tooltip.js | 20 +- public/app/plugins/panel/graph/module.d.ts | 3 - public/app/plugins/panel/graph/module.html | 31 +- public/app/plugins/panel/graph/module.js | 303 ------------------ public/app/plugins/panel/graph/module.ts | 15 + .../app/plugins/panel/graph/styleEditor.html | 44 +-- 12 files changed, 431 insertions(+), 430 deletions(-) create mode 100644 public/app/plugins/panel/graph/graph_ctrl.ts delete mode 100644 public/app/plugins/panel/graph/module.d.ts delete mode 100644 public/app/plugins/panel/graph/module.js create mode 100644 public/app/plugins/panel/graph/module.ts diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index 093eebde694..795afb41bf6 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -49,9 +49,7 @@ class MetricsPanelCtrl extends PanelCtrl { } initEditMode() { - this.addEditorTab('Metrics', () => { - return { templateUrl: 'public/app/partials/metrics.html' }; - }); + this.addEditorTab('Metrics', 'public/app/partials/metrics.html'); this.datasources = this.datasourceSrv.getMetricSources(); } @@ -108,15 +106,6 @@ class MetricsPanelCtrl extends PanelCtrl { this.timing.queryEnd = new Date().getTime(); } - setTimeRenderStart() { - this.timing = this.timing || {}; - this.timing.renderStart = new Date().getTime(); - } - - setTimeRenderEnd() { - this.timing.renderEnd = new Date().getTime(); - } - updateTimeRange() { this.range = this.timeSrv.timeRange(); this.rangeRaw = this.timeSrv.timeRange(false); diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index c53bfda68bd..ac12bac53ba 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -2,29 +2,28 @@ import config from 'app/core/config'; -function generalOptionsTabEditorTab() { - return {templateUrl: 'public/app/partials/panelgeneral.html'}; -} - export class PanelCtrl { panel: any; row: any; dashboard: any; editorTabIndex: number; - name: string; + pluginName: string; + pluginId: string; icon: string; editorTabs: any; $scope: any; $injector: any; fullscreen: boolean; inspector: any; + editModeInitiated: boolean; constructor($scope, $injector) { var plugin = config.panels[this.panel.type]; this.$injector = $injector; this.$scope = $scope; - this.name = plugin.name; + this.pluginName = plugin.name; + this.pluginId = plugin.id; this.icon = plugin.info.icon; this.editorTabIndex = 0; @@ -59,9 +58,9 @@ export class PanelCtrl { } editPanel() { - if (!this.editorTabs) { + if (!this.editModeInitiated) { this.editorTabs = []; - this.editorTabs.push({title: 'General', directiveFn: generalOptionsTabEditorTab}); + this.addEditorTab('General', 'public/app/partials/panelgeneral.html'); this.initEditMode(); } @@ -76,8 +75,13 @@ export class PanelCtrl { return; } - addEditorTab(title, directiveFn) { - this.editorTabs.push({title: title, directiveFn: directiveFn}); + addEditorTab(title, templateUrl) { + this.editorTabs.push({ + title: title, + directiveFn: function() { + return {templateUrl: templateUrl}; + } + }); } getMenu() { @@ -92,4 +96,8 @@ export class PanelCtrl { otherPanelInFullscreenMode() { return this.dashboard.meta.fullscreen && !this.fullscreen; } + + broadcastRender(arg1?, arg2?) { + this.$scope.$broadcast('render', arg1, arg2); + } } diff --git a/public/app/features/panel/panel_editor_tab.ts b/public/app/features/panel/panel_editor_tab.ts index 68b1e67c01c..f6c11306678 100644 --- a/public/app/features/panel/panel_editor_tab.ts +++ b/public/app/features/panel/panel_editor_tab.ts @@ -11,10 +11,14 @@ function panelEditorTab(dynamicDirectiveSrv) { scope: { ctrl: "=", editorTab: "=", + index: "=", }, directive: scope => { + var pluginId = scope.ctrl.pluginId; + var tabIndex = scope.index; + return Promise.resolve({ - name: 'panel-editor-tab-' + scope.editorTab.title, + name: `panel-editor-tab-${pluginId}${tabIndex}`, fn: scope.editorTab.directiveFn, }); } diff --git a/public/app/features/panel/partials/panel.html b/public/app/features/panel/partials/panel.html index 55ed28eafc4..13c2178e0b4 100644 --- a/public/app/features/panel/partials/panel.html +++ b/public/app/features/panel/partials/panel.html @@ -39,7 +39,7 @@
    - +
    diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js index 1ebf75d9e73..59089848cd8 100755 --- a/public/app/plugins/panel/graph/graph.js +++ b/public/app/plugins/panel/graph/graph.js @@ -24,14 +24,16 @@ function (angular, $, moment, _, kbn, GraphTooltip) { restrict: 'A', template: '
    ', link: function(scope, elem) { - var dashboard = scope.dashboard; + var ctrl = scope.ctrl; + var dashboard = ctrl.dashboard; + var panel = ctrl.panel; var data, annotations; var sortedSeries; var graphHeight; var legendSideLastValue = null; - scope.crosshairEmiter = false; + var rootScope = scope.$root; - scope.onAppEvent('setCrosshair', function(event, info) { + rootScope.onAppEvent('setCrosshair', function(event, info) { // do not need to to this if event is from this panel if (info.scope === scope) { return; @@ -43,20 +45,20 @@ function (angular, $, moment, _, kbn, GraphTooltip) { plot.setCrosshair({ x: info.pos.x, y: info.pos.y }); } } - }); + }, scope); - scope.onAppEvent('clearCrosshair', function() { + rootScope.onAppEvent('clearCrosshair', function() { var plot = elem.data().plot; if (plot) { plot.clearCrosshair(); } - }); + }, scope); // Receive render events scope.$on('render',function(event, renderData) { data = renderData || data; if (!data) { - scope.get_data(); + ctrl.refresh(); return; } annotations = data.annotations || annotations; @@ -64,10 +66,10 @@ function (angular, $, moment, _, kbn, GraphTooltip) { }); function getLegendHeight(panelHeight) { - if (!scope.panel.legend.show || scope.panel.legend.rightSide) { + if (!panel.legend.show || panel.legend.rightSide) { return 0; } - if (scope.panel.legend.alignAsTable) { + if (panel.legend.alignAsTable) { var total = 30 + (25 * data.length); return Math.min(total, Math.floor(panelHeight/2)); } else { @@ -77,14 +79,13 @@ function (angular, $, moment, _, kbn, GraphTooltip) { function setElementHeight() { try { - graphHeight = scope.height || scope.panel.height || scope.row.height; + graphHeight = ctrl.height || panel.height || ctrl.row.height; if (_.isString(graphHeight)) { graphHeight = parseInt(graphHeight.replace('px', ''), 10); } graphHeight -= 5; // padding - graphHeight -= scope.panel.title ? 24 : 9; // subtract panel title bar - + graphHeight -= panel.title ? 24 : 9; // subtract panel title bar graphHeight = graphHeight - getLegendHeight(graphHeight); // subtract one line legend elem.css('height', graphHeight + 'px'); @@ -100,7 +101,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { return true; } - if ($rootScope.fullscreen && !scope.fullscreen) { + if (ctrl.otherPanelInFullscreenMode()) { return true; } @@ -122,11 +123,11 @@ function (angular, $, moment, _, kbn, GraphTooltip) { for (var i = 0; i < data.length; i++) { var series = data[i]; var axis = yaxis[series.yaxis - 1]; - var formater = kbn.valueFormats[scope.panel.y_formats[series.yaxis - 1]]; + var formater = kbn.valueFormats[panel.y_formats[series.yaxis - 1]]; // decimal override - if (_.isNumber(scope.panel.decimals)) { - series.updateLegendValues(formater, scope.panel.decimals, null); + if (_.isNumber(panel.decimals)) { + series.updateLegendValues(formater, panel.decimals, null); } else { // auto decimals // legend and tooltip gets one more decimal precision @@ -135,22 +136,22 @@ function (angular, $, moment, _, kbn, GraphTooltip) { series.updateLegendValues(formater, tickDecimals, axis.scaledDecimals + 2); } - if(!scope.$$phase) { scope.$digest(); } + if(!rootScope.$$phase) { scope.$digest(); } } // add left axis labels - if (scope.panel.leftYAxisLabel) { + if (panel.leftYAxisLabel) { var yaxisLabel = $("
    ") - .text(scope.panel.leftYAxisLabel) + .text(panel.leftYAxisLabel) .appendTo(elem); yaxisLabel.css("margin-top", yaxisLabel.width() / 2); } // add right axis labels - if (scope.panel.rightYAxisLabel) { + if (panel.rightYAxisLabel) { var rightLabel = $("
    ") - .text(scope.panel.rightYAxisLabel) + .text(panel.rightYAxisLabel) .appendTo(elem); rightLabel.css("margin-top", rightLabel.width() / 2); @@ -158,8 +159,8 @@ function (angular, $, moment, _, kbn, GraphTooltip) { } function processOffsetHook(plot, gridMargin) { - if (scope.panel.leftYAxisLabel) { gridMargin.left = 20; } - if (scope.panel.rightYAxisLabel) { gridMargin.right = 20; } + if (panel.leftYAxisLabel) { gridMargin.left = 20; } + if (panel.rightYAxisLabel) { gridMargin.right = 20; } } // Function for rendering panel @@ -168,7 +169,6 @@ function (angular, $, moment, _, kbn, GraphTooltip) { return; } - var panel = scope.panel; var stack = panel.stack ? true : null; // Populate element @@ -230,7 +230,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { series.data = series.getFlotPairs(series.nullPointMode || panel.nullPointMode, panel.y_formats); // if hidden remove points and disable stack - if (scope.hiddenSeries[series.alias]) { + if (ctrl.hiddenSeries[series.alias]) { series.data = []; series.stack = false; } @@ -255,7 +255,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { } if (incrementRenderCounter) { - scope.panelRenderingComplete(); + ctrl.renderingCompleted(); } } @@ -285,18 +285,18 @@ function (angular, $, moment, _, kbn, GraphTooltip) { function addTimeAxis(options) { var ticks = elem.width() / 100; - var min = _.isUndefined(scope.range.from) ? null : scope.range.from.valueOf(); - var max = _.isUndefined(scope.range.to) ? null : scope.range.to.valueOf(); + var min = _.isUndefined(ctrl.range.from) ? null : ctrl.range.from.valueOf(); + var max = _.isUndefined(ctrl.range.to) ? null : ctrl.range.to.valueOf(); options.xaxis = { timezone: dashboard.timezone, - show: scope.panel['x-axis'], + show: panel['x-axis'], mode: "time", min: min, max: max, label: "Datetime", ticks: ticks, - timeformat: time_format(scope.interval, ticks, min, max), + timeformat: time_format(ctrl.interval, ticks, min, max), }; } @@ -361,11 +361,11 @@ function (angular, $, moment, _, kbn, GraphTooltip) { function configureAxisOptions(data, options) { var defaults = { position: 'left', - show: scope.panel['y-axis'], - min: scope.panel.grid.leftMin, + show: panel['y-axis'], + min: panel.grid.leftMin, index: 1, - logBase: scope.panel.grid.leftLogBase || 1, - max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.leftMax, + logBase: panel.grid.leftLogBase || 1, + max: panel.percentage && panel.stack ? 100 : panel.grid.leftMax, }; options.yaxes.push(defaults); @@ -373,18 +373,18 @@ function (angular, $, moment, _, kbn, GraphTooltip) { if (_.findWhere(data, {yaxis: 2})) { var secondY = _.clone(defaults); secondY.index = 2, - secondY.logBase = scope.panel.grid.rightLogBase || 1, + secondY.logBase = panel.grid.rightLogBase || 1, secondY.position = 'right'; - secondY.min = scope.panel.grid.rightMin; - secondY.max = scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.rightMax; + secondY.min = panel.grid.rightMin; + secondY.max = panel.percentage && panel.stack ? 100 : panel.grid.rightMax; options.yaxes.push(secondY); applyLogScale(options.yaxes[1], data); - configureAxisMode(options.yaxes[1], scope.panel.percentage && scope.panel.stack ? "percent" : scope.panel.y_formats[1]); + configureAxisMode(options.yaxes[1], panel.percentage && panel.stack ? "percent" : panel.y_formats[1]); } applyLogScale(options.yaxes[0], data); - configureAxisMode(options.yaxes[0], scope.panel.percentage && scope.panel.stack ? "percent" : scope.panel.y_formats[0]); + configureAxisMode(options.yaxes[0], panel.percentage && panel.stack ? "percent" : panel.y_formats[0]); } function applyLogScale(axis, data) { @@ -463,18 +463,18 @@ function (angular, $, moment, _, kbn, GraphTooltip) { url += '&height=' + elem.css('height').replace('px', ''); url += '&bgcolor=1f1f1f'; // @grayDarker & @grafanaPanelBackground url += '&fgcolor=BBBFC2'; // @textColor & @grayLighter - url += scope.panel.stack ? '&areaMode=stacked' : ''; - url += scope.panel.fill !== 0 ? ('&areaAlpha=' + (scope.panel.fill/10).toFixed(1)) : ''; - url += scope.panel.linewidth !== 0 ? '&lineWidth=' + scope.panel.linewidth : ''; - url += scope.panel.legend.show ? '&hideLegend=false' : '&hideLegend=true'; - url += scope.panel.grid.leftMin !== null ? '&yMin=' + scope.panel.grid.leftMin : ''; - url += scope.panel.grid.leftMax !== null ? '&yMax=' + scope.panel.grid.leftMax : ''; - url += scope.panel.grid.rightMin !== null ? '&yMin=' + scope.panel.grid.rightMin : ''; - url += scope.panel.grid.rightMax !== null ? '&yMax=' + scope.panel.grid.rightMax : ''; - url += scope.panel['x-axis'] ? '' : '&hideAxes=true'; - url += scope.panel['y-axis'] ? '' : '&hideYAxis=true'; + url += panel.stack ? '&areaMode=stacked' : ''; + url += panel.fill !== 0 ? ('&areaAlpha=' + (panel.fill/10).toFixed(1)) : ''; + url += panel.linewidth !== 0 ? '&lineWidth=' + panel.linewidth : ''; + url += panel.legend.show ? '&hideLegend=false' : '&hideLegend=true'; + url += panel.grid.leftMin !== null ? '&yMin=' + panel.grid.leftMin : ''; + url += panel.grid.leftMax !== null ? '&yMax=' + panel.grid.leftMax : ''; + url += panel.grid.rightMin !== null ? '&yMin=' + panel.grid.rightMin : ''; + url += panel.grid.rightMax !== null ? '&yMax=' + panel.grid.rightMax : ''; + url += panel['x-axis'] ? '' : '&hideAxes=true'; + url += panel['y-axis'] ? '' : '&hideYAxis=true'; - switch(scope.panel.y_formats[0]) { + switch(panel.y_formats[0]) { case 'bytes': url += '&yUnitSystem=binary'; break; @@ -507,7 +507,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { break; } - switch(scope.panel.nullPointMode) { + switch(panel.nullPointMode) { case 'connected': url += '&lineMode=connected'; break; @@ -518,7 +518,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { break; } - url += scope.panel.steppedLine ? '&lineMode=staircase' : ''; + url += panel.steppedLine ? '&lineMode=staircase' : ''; elem.html(''); } diff --git a/public/app/plugins/panel/graph/graph_ctrl.ts b/public/app/plugins/panel/graph/graph_ctrl.ts new file mode 100644 index 00000000000..c242c0ae537 --- /dev/null +++ b/public/app/plugins/panel/graph/graph_ctrl.ts @@ -0,0 +1,292 @@ +/// + +import moment from 'moment'; +import kbn from 'app/core/utils/kbn'; +import _ from 'lodash'; +import TimeSeries from '../../../core/time_series2'; +import * as fileExport from '../../../core/utils/file_export'; +import {MetricsPanelCtrl} from '../../../features/panel/panel'; + +var panelDefaults = { + // datasource name, null = default datasource + datasource: null, + // sets client side (flot) or native graphite png renderer (png) + renderer: 'flot', + // Show/hide the x-axis + 'x-axis' : true, + // Show/hide y-axis + 'y-axis' : true, + // y axis formats, [left axis,right axis] + y_formats : ['short', 'short'], + // grid options + grid : { + leftLogBase: 1, + leftMax: null, + rightMax: null, + leftMin: null, + rightMin: null, + rightLogBase: 1, + threshold1: null, + threshold2: null, + threshold1Color: 'rgba(216, 200, 27, 0.27)', + threshold2Color: 'rgba(234, 112, 112, 0.22)' + }, + // show/hide lines + lines : true, + // fill factor + fill : 1, + // line width in pixels + linewidth : 2, + // show hide points + points : false, + // point radius in pixels + pointradius : 5, + // show hide bars + bars : false, + // enable/disable stacking + stack : false, + // stack percentage mode + percentage : false, + // legend options + legend: { + show: true, // disable/enable legend + values: false, // disable/enable legend values + min: false, + max: false, + current: false, + total: false, + avg: false + }, + // how null points should be handled + nullPointMode : 'connected', + // staircase line mode + steppedLine: false, + // tooltip options + tooltip : { + value_type: 'cumulative', + shared: true, + }, + // time overrides + timeFrom: null, + timeShift: null, + // metric queries + targets: [{}], + // series color overrides + aliasColors: {}, + // other style overrides + seriesOverrides: [], +}; + +class GraphCtrl extends MetricsPanelCtrl { + hiddenSeries: any = {}; + seriesList: any = []; + logScales: any; + unitFormats: any; + annotationsPromise: any; + datapointsCount: number; + datapointsOutside: boolean; + datapointsWarning: boolean; + colors: any = []; + + /** @ngInject */ + constructor($scope, $injector, private annotationsSrv) { + super($scope, $injector); + + _.defaults(this.panel, panelDefaults); + _.defaults(this.panel.tooltip, panelDefaults.tooltip); + _.defaults(this.panel.grid, panelDefaults.grid); + _.defaults(this.panel.legend, panelDefaults.legend); + + this.colors = $scope.$root.colors; + } + + initEditMode() { + super.initEditMode(); + + this.icon = "fa fa-bar-chart"; + this.addEditorTab('Axes & Grid', 'public/app/plugins/panel/graph/axisEditor.html'); + this.addEditorTab('Display Styles', 'public/app/plugins/panel/graph/styleEditor.html'); + + // $scope.panelMeta.addEditorTab('Time range', 'app/features/panel/partials/panelTime.html'); + // $scope.panelMeta.addExtendedMenuItem('Export CSV', '', 'exportCsv()'); + // $scope.panelMeta.addExtendedMenuItem('Toggle legend', '', 'toggleLegend()'); + // + this.logScales = { + 'linear': 1, + 'log (base 2)': 2, + 'log (base 10)': 10, + 'log (base 32)': 32, + 'log (base 1024)': 1024 + }; + this.unitFormats = kbn.getUnitFormats(); + } + + setUnitFormat(axis, subItem) { + this.panel.y_formats[axis] = subItem.value; + this.render(); + } + + refreshData(datasource) { + this.annotationsPromise = this.annotationsSrv.getAnnotations(this.dashboard); + + return this.issueQueries() + .then(res => this.dataHandler(res)) + .catch(err => { + this.seriesList = []; + this.render([]); + throw err; + }); + } + + zoomOut(evt) { + this.publishAppEvent('zoom-out', evt); + } + + loadSnapshot(snapshotData) { + this.updateTimeRange(); + this.annotationsPromise = this.annotationsSrv.getAnnotations(this.dashboard); + this.dataHandler(snapshotData); + } + + dataHandler(results) { + // png renderer returns just a url + if (_.isString(results)) { + this.render(results); + return; + } + + this.datapointsWarning = false; + this.datapointsCount = 0; + this.datapointsOutside = false; + this.seriesList = _.map(results.data, (series, i) => this.seriesHandler(series, i)); + this.datapointsWarning = this.datapointsCount === 0 || this.datapointsOutside; + + this.annotationsPromise.then(annotations => { + this.loading = false; + this.seriesList.annotations = annotations; + this.render(this.seriesList); + }, () => { + this.loading = false; + this.render(this.seriesList); + }); + }; + + seriesHandler(seriesData, index) { + var datapoints = seriesData.datapoints; + var alias = seriesData.target; + var colorIndex = index % this.colors.length; + var color = this.panel.aliasColors[alias] || this.colors[colorIndex]; + + var series = new TimeSeries({ + datapoints: datapoints, + alias: alias, + color: color, + }); + + if (datapoints && datapoints.length > 0) { + var last = moment.utc(datapoints[datapoints.length - 1][1]); + var from = moment.utc(this.range.from); + if (last - from < -10000) { + this.datapointsOutside = true; + } + + this.datapointsCount += datapoints.length; + } + + return series; + } + + render(data?: any) { + this.broadcastRender(data); + } + + changeSeriesColor(series, color) { + series.color = color; + this.panel.aliasColors[series.alias] = series.color; + this.render(); + } + + toggleSeries(serie, event) { + if (event.ctrlKey || event.metaKey || event.shiftKey) { + if (this.hiddenSeries[serie.alias]) { + delete this.hiddenSeries[serie.alias]; + } else { + this.hiddenSeries[serie.alias] = true; + } + } else { + this.toggleSeriesExclusiveMode(serie); + } + + this.render(); + } + + toggleSeriesExclusiveMode (serie) { + var hidden = this.hiddenSeries; + + if (hidden[serie.alias]) { + delete hidden[serie.alias]; + } + + // check if every other series is hidden + var alreadyExclusive = _.every(this.seriesList, value => { + if (value.alias === serie.alias) { + return true; + } + + return hidden[value.alias]; + }); + + if (alreadyExclusive) { + // remove all hidden series + _.each(this.seriesList, value => { + delete this.hiddenSeries[value.alias]; + }); + } else { + // hide all but this serie + _.each(this.seriesList, value => { + if (value.alias === serie.alias) { + return; + } + + this.hiddenSeries[value.alias] = true; + }); + } + } + + toggleYAxis(info) { + var override = _.findWhere(this.panel.seriesOverrides, { alias: info.alias }); + if (!override) { + override = { alias: info.alias }; + this.panel.seriesOverrides.push(override); + } + override.yaxis = info.yaxis === 2 ? 1 : 2; + this.render(); + }; + + addSeriesOverride(override) { + this.panel.seriesOverrides.push(override || {}); + } + + removeSeriesOverride(override) { + this.panel.seriesOverrides = _.without(this.panel.seriesOverrides, override); + this.render(); + } + + // Called from panel menu + toggleLegend() { + this.panel.legend.show = !this.panel.legend.show; + this.refresh(); + } + + legendValuesOptionChanged() { + var legend = this.panel.legend; + legend.values = legend.min || legend.max || legend.avg || legend.current || legend.total; + this.render(); + } + + exportCsv() { + fileExport.exportSeriesListToCsv(this.seriesList); + } +} + +export {GraphCtrl} diff --git a/public/app/plugins/panel/graph/graph_tooltip.js b/public/app/plugins/panel/graph/graph_tooltip.js index 99fb20b2ed5..452d490f418 100644 --- a/public/app/plugins/panel/graph/graph_tooltip.js +++ b/public/app/plugins/panel/graph/graph_tooltip.js @@ -6,6 +6,8 @@ function ($) { function GraphTooltip(elem, dashboard, scope, getSeriesFn) { var self = this; + var ctrl = scope.ctrl; + var panel = ctrl.panel; var $tooltip = $('
    '); @@ -47,12 +49,12 @@ function ($) { for (i = 0; i < seriesList.length; i++) { series = seriesList[i]; - if (!series.data.length || (scope.panel.legend.hideEmpty && series.allIsNull)) { + if (!series.data.length || (panel.legend.hideEmpty && series.allIsNull)) { results.push({ hidden: true }); continue; } - if (!series.data.length || (scope.panel.legend.hideZero && series.allIsZero)) { + if (!series.data.length || (panel.legend.hideZero && series.allIsZero)) { results.push({ hidden: true }); continue; } @@ -61,7 +63,7 @@ function ($) { results.time = series.data[hoverIndex][0]; if (series.stack) { - if (scope.panel.tooltip.value_type === 'individual') { + if (panel.tooltip.value_type === 'individual') { value = series.data[hoverIndex][1]; } else if (!series.stack) { value = series.data[hoverIndex][1]; @@ -89,7 +91,7 @@ function ($) { }; elem.mouseleave(function () { - if (scope.panel.tooltip.shared) { + if (panel.tooltip.shared) { var plot = elem.data().plot; if (plot) { $tooltip.detach(); @@ -98,7 +100,7 @@ function ($) { } if (dashboard.sharedCrosshair) { - scope.appEvent('clearCrosshair'); + ctrl.publishAppEvent('clearCrosshair'); } }); @@ -108,15 +110,15 @@ function ($) { var seriesList = getSeriesFn(); var group, value, absoluteTime, relativeTime, hoverInfo, i, series, seriesHtml; - if(dashboard.sharedCrosshair){ - scope.appEvent('setCrosshair', { pos: pos, scope: scope }); + if (dashboard.sharedCrosshair) { + ctrl.publishAppEvent('setCrosshair', { pos: pos, scope: scope }); } if (seriesList.length === 0) { return; } - if (scope.panel.tooltip.shared) { + if (panel.tooltip.shared) { plot.unhighlight(); var seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(plotData, pos); @@ -153,7 +155,7 @@ function ($) { group = '
    '; group += ' ' + series.label + ':
    '; - if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') { + if (panel.stack && panel.tooltip.value_type === 'individual') { value = item.datapoint[1] - item.datapoint[2]; } else { diff --git a/public/app/plugins/panel/graph/module.d.ts b/public/app/plugins/panel/graph/module.d.ts deleted file mode 100644 index f3fe6043d65..00000000000 --- a/public/app/plugins/panel/graph/module.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -declare var panel: any; -declare var GraphCtrl: any; -export {panel, GraphCtrl}; diff --git a/public/app/plugins/panel/graph/module.html b/public/app/plugins/panel/graph/module.html index 068223a5366..66d77a4ae53 100644 --- a/public/app/plugins/panel/graph/module.html +++ b/public/app/plugins/panel/graph/module.html @@ -1,25 +1,22 @@ - - -
    -
    - -
    - - No datapoints No datapoints returned from metric query - - Datapoints outside time range Can be caused by timezone mismatch between browser and graphite server -
    - -
    -
    +
    +
    +
    + + No datapoints No datapoints returned from metric query + + Datapoints outside time range Can be caused by timezone mismatch between browser and graphite server +
    + +
    -
    -
    +
    +
    + +
    - diff --git a/public/app/plugins/panel/graph/module.js b/public/app/plugins/panel/graph/module.js deleted file mode 100644 index c1039e394a3..00000000000 --- a/public/app/plugins/panel/graph/module.js +++ /dev/null @@ -1,303 +0,0 @@ -define([ - 'angular', - 'lodash', - 'moment', - 'app/core/utils/kbn', - 'app/core/utils/file_export', - 'app/core/time_series', - 'app/features/panel/panel_meta', - './seriesOverridesCtrl', - './graph', - './legend', -], -function (angular, _, moment, kbn, fileExport, TimeSeries, PanelMeta) { - 'use strict'; - - /** @ngInject */ - function GraphCtrl($scope, $rootScope, panelSrv, annotationsSrv, panelHelper) { - - $scope.panelMeta = new PanelMeta({ - panelName: 'Graph', - editIcon: "fa fa-bar-chart", - fullscreen: true, - metricsEditor: true, - }); - - $scope.panelMeta.addEditorTab('Axes & Grid', 'app/plugins/panel/graph/axisEditor.html'); - $scope.panelMeta.addEditorTab('Display Styles', 'app/plugins/panel/graph/styleEditor.html'); - $scope.panelMeta.addEditorTab('Time range', 'app/features/panel/partials/panelTime.html'); - - $scope.panelMeta.addExtendedMenuItem('Export CSV', '', 'exportCsv()'); - $scope.panelMeta.addExtendedMenuItem('Toggle legend', '', 'toggleLegend()'); - - // Set and populate defaults - var _d = { - // datasource name, null = default datasource - datasource: null, - // sets client side (flot) or native graphite png renderer (png) - renderer: 'flot', - // Show/hide the x-axis - 'x-axis' : true, - // Show/hide y-axis - 'y-axis' : true, - // y axis formats, [left axis,right axis] - y_formats : ['short', 'short'], - // grid options - grid : { - leftLogBase: 1, - leftMax: null, - rightMax: null, - leftMin: null, - rightMin: null, - rightLogBase: 1, - threshold1: null, - threshold2: null, - threshold1Color: 'rgba(216, 200, 27, 0.27)', - threshold2Color: 'rgba(234, 112, 112, 0.22)' - }, - // show/hide lines - lines : true, - // fill factor - fill : 1, - // line width in pixels - linewidth : 2, - // show hide points - points : false, - // point radius in pixels - pointradius : 5, - // show hide bars - bars : false, - // enable/disable stacking - stack : false, - // stack percentage mode - percentage : false, - // legend options - legend: { - show: true, // disable/enable legend - values: false, // disable/enable legend values - min: false, - max: false, - current: false, - total: false, - avg: false - }, - // how null points should be handled - nullPointMode : 'connected', - // staircase line mode - steppedLine: false, - // tooltip options - tooltip : { - value_type: 'cumulative', - shared: true, - }, - // time overrides - timeFrom: null, - timeShift: null, - // metric queries - targets: [{}], - // series color overrides - aliasColors: {}, - // other style overrides - seriesOverrides: [], - }; - - _.defaults($scope.panel,_d); - _.defaults($scope.panel.tooltip, _d.tooltip); - _.defaults($scope.panel.annotate, _d.annotate); - _.defaults($scope.panel.grid, _d.grid); - _.defaults($scope.panel.legend, _d.legend); - - $scope.logScales = {'linear': 1, 'log (base 2)': 2, 'log (base 10)': 10, 'log (base 32)': 32, 'log (base 1024)': 1024}; - - $scope.hiddenSeries = {}; - $scope.seriesList = []; - $scope.unitFormats = kbn.getUnitFormats(); - - $scope.setUnitFormat = function(axis, subItem) { - $scope.panel.y_formats[axis] = subItem.value; - $scope.render(); - }; - - $scope.refreshData = function(datasource) { - panelHelper.updateTimeRange($scope); - - $scope.annotationsPromise = annotationsSrv.getAnnotations($scope.dashboard); - - return panelHelper.issueMetricQuery($scope, datasource) - .then($scope.dataHandler, function(err) { - $scope.seriesList = []; - $scope.render([]); - throw err; - }); - }; - - $scope.zoomOut = function(evt) { - $scope.appEvent('zoom-out', evt); - }; - - $scope.loadSnapshot = function(snapshotData) { - panelHelper.updateTimeRange($scope); - $scope.annotationsPromise = annotationsSrv.getAnnotations($scope.dashboard); - $scope.dataHandler(snapshotData); - }; - - $scope.dataHandler = function(results) { - // png renderer returns just a url - if (_.isString(results)) { - $scope.render(results); - return; - } - - $scope.datapointsWarning = false; - $scope.datapointsCount = 0; - $scope.datapointsOutside = false; - - $scope.seriesList = _.map(results.data, $scope.seriesHandler); - - $scope.datapointsWarning = $scope.datapointsCount === 0 || $scope.datapointsOutside; - - $scope.annotationsPromise - .then(function(annotations) { - $scope.panelMeta.loading = false; - $scope.seriesList.annotations = annotations; - $scope.render($scope.seriesList); - }, function() { - $scope.panelMeta.loading = false; - $scope.render($scope.seriesList); - }); - }; - - $scope.seriesHandler = function(seriesData, index) { - var datapoints = seriesData.datapoints; - var alias = seriesData.target; - var colorIndex = index % $rootScope.colors.length; - var color = $scope.panel.aliasColors[alias] || $rootScope.colors[colorIndex]; - - var series = new TimeSeries({ - datapoints: datapoints, - alias: alias, - color: color, - }); - - if (datapoints && datapoints.length > 0) { - var last = moment.utc(datapoints[datapoints.length - 1][1]); - var from = moment.utc($scope.range.from); - if (last - from < -10000) { - $scope.datapointsOutside = true; - } - - $scope.datapointsCount += datapoints.length; - } - - return series; - }; - - $scope.render = function(data) { - panelHelper.broadcastRender($scope, data); - }; - - $scope.changeSeriesColor = function(series, color) { - series.color = color; - $scope.panel.aliasColors[series.alias] = series.color; - $scope.render(); - }; - - $scope.toggleSeries = function(serie, event) { - if (event.ctrlKey || event.metaKey || event.shiftKey) { - if ($scope.hiddenSeries[serie.alias]) { - delete $scope.hiddenSeries[serie.alias]; - } - else { - $scope.hiddenSeries[serie.alias] = true; - } - } else { - $scope.toggleSeriesExclusiveMode(serie); - } - - $scope.render(); - }; - - $scope.toggleSeriesExclusiveMode = function(serie) { - var hidden = $scope.hiddenSeries; - - if (hidden[serie.alias]) { - delete hidden[serie.alias]; - } - - // check if every other series is hidden - var alreadyExclusive = _.every($scope.seriesList, function(value) { - if (value.alias === serie.alias) { - return true; - } - - return hidden[value.alias]; - }); - - if (alreadyExclusive) { - // remove all hidden series - _.each($scope.seriesList, function(value) { - delete $scope.hiddenSeries[value.alias]; - }); - } - else { - // hide all but this serie - _.each($scope.seriesList, function(value) { - if (value.alias === serie.alias) { - return; - } - - $scope.hiddenSeries[value.alias] = true; - }); - } - }; - - $scope.toggleYAxis = function(info) { - var override = _.findWhere($scope.panel.seriesOverrides, { alias: info.alias }); - if (!override) { - override = { alias: info.alias }; - $scope.panel.seriesOverrides.push(override); - } - override.yaxis = info.yaxis === 2 ? 1 : 2; - $scope.render(); - }; - - $scope.addSeriesOverride = function(override) { - $scope.panel.seriesOverrides.push(override || {}); - }; - - $scope.removeSeriesOverride = function(override) { - $scope.panel.seriesOverrides = _.without($scope.panel.seriesOverrides, override); - $scope.render(); - }; - - // Called from panel menu - $scope.toggleLegend = function() { - $scope.panel.legend.show = !$scope.panel.legend.show; - $scope.get_data(); - }; - - $scope.legendValuesOptionChanged = function() { - var legend = $scope.panel.legend; - legend.values = legend.min || legend.max || legend.avg || legend.current || legend.total; - $scope.render(); - }; - - $scope.exportCsv = function() { - fileExport.exportSeriesListToCsv($scope.seriesList); - }; - - 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/module.ts b/public/app/plugins/panel/graph/module.ts new file mode 100644 index 00000000000..b6a5368c6ac --- /dev/null +++ b/public/app/plugins/panel/graph/module.ts @@ -0,0 +1,15 @@ + +import {PanelDirective} from '../../../features/panel/panel'; +import {GraphCtrl} from './graph_ctrl'; + +import './graph'; + +class GraphPanel extends PanelDirective { + controller = GraphCtrl; + templateUrl = 'public/app/plugins/panel/graph/module.html'; +} + +export { + GraphPanel, + GraphPanel as Panel +} diff --git a/public/app/plugins/panel/graph/styleEditor.html b/public/app/plugins/panel/graph/styleEditor.html index f692328a0fd..82cf31dd0d1 100644 --- a/public/app/plugins/panel/graph/styleEditor.html +++ b/public/app/plugins/panel/graph/styleEditor.html @@ -1,60 +1,60 @@
    Chart Options
    - - - + + +
    Line options
    -
    +
    - +
    -
    +
    - +
    -
    +
    - +
    - +
    - +
    Multiple Series
    - - + +
    Rendering
    - +
    - +
    Tooltip
    -
    +
    - +
    @@ -64,10 +64,10 @@
    Series specific overrides Regex match example: /server[0-3]/i
    -
    +
    • - +
    • @@ -75,7 +75,7 @@
    • - +
    • @@ -95,7 +95,7 @@
    -
    From aac190eaa9fe0f332ee35590041280a2f18cd863 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 26 Jan 2016 17:50:18 -0500 Subject: [PATCH 28/91] feat(panels): graph panel starting to work --- .../app/plugins/panel/graph/axisEditor.html | 74 +++++++++---------- public/app/plugins/panel/graph/legend.js | 11 +-- .../plugins/panel/graph/legend.popover.html | 8 +- public/app/plugins/panel/graph/module.html | 6 +- public/app/plugins/panel/graph/module.ts | 1 + 5 files changed, 51 insertions(+), 49 deletions(-) diff --git a/public/app/plugins/panel/graph/axisEditor.html b/public/app/plugins/panel/graph/axisEditor.html index 13bc78b7dfe..b1d6d9753c0 100644 --- a/public/app/plugins/panel/graph/axisEditor.html +++ b/public/app/plugins/panel/graph/axisEditor.html @@ -10,22 +10,22 @@ Unit
  • + ng-model="ctrl.panel.y_formats[0]" + dropdown-typeahead="ctrl.unitFormats" + dropdown-typeahead-on-select="ctrl.setUnitFormat(0, $subItem)">
  • Scale type
  • - +
  • Label
  • + ng-model="ctrl.panel.leftYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
    • @@ -40,16 +40,16 @@
  • + empty-to-null ng-model="ctrl.panel.grid.leftMax" + ng-change="ctrl.render()" ng-model-onblur>
  • Y-Min
  • + empty-to-null ng-model="ctrl.panel.grid.leftMin" + ng-change="ctrl.render()" ng-model-onblur>
    • @@ -63,22 +63,22 @@ Unit
  • + ng-model="ctrl.panel.y_formats[1]" + dropdown-typeahead="ctrl.unitFormats" + dropdown-typeahead-on-select="ctrl.setUnitFormat(1, $subItem)">
  • Scale type
  • - +
  • Label
  • + ng-model="ctrl.panel.rightYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
    • @@ -93,16 +93,16 @@
  • + empty-to-null ng-model="ctrl.panel.grid.rightMax" + ng-change="ctrl.render()" ng-model-onblur>
  • Y-Min
  • + empty-to-null ng-model="ctrl.panel.grid.rightMin" + ng-change="ctrl.render()" ng-model-onblur>
    • @@ -119,13 +119,13 @@
  • X-Axis  + ng-model="ctrl.panel['x-axis']" ng-checked="ctrl.panel['x-axis']" ng-change="ctrl.render()">
  • Y-Axis  + ng-model="ctrl.panel['y-axis']" ng-checked="ctrl.panel['y-axis']" ng-change="ctrl.render()">
    • @@ -141,23 +141,23 @@
  • + ng-model="ctrl.panel.grid.threshold1" ng-change="ctrl.render()" ng-model-onblur>
  • - +
  • Level 2
  • + ng-model="ctrl.panel.grid.threshold2" ng-change="ctrl.render()" ng-model-onblur>
  • - +
  • - +
    • @@ -173,20 +173,20 @@ Legend
  • - +
  • - +
  • - +
  • Side width
  • + ng-model="ctrl.panel.legend.sideWidth" ng-change="ctrl.render()" ng-model-onblur>
    • @@ -197,10 +197,10 @@ Hide series
  • - +
  • - +
    • @@ -212,26 +212,26 @@ Values
  • - +
  • - +
  • - +
  • - +
  • - +
  • Decimals
  • + ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur>
    • diff --git a/public/app/plugins/panel/graph/legend.js b/public/app/plugins/panel/graph/legend.js index cf64d90414b..67b2dd525d0 100644 --- a/public/app/plugins/panel/graph/legend.js +++ b/public/app/plugins/panel/graph/legend.js @@ -8,7 +8,7 @@ define([ function (angular, _, $) { 'use strict'; - var module = angular.module('grafana.panels.graph'); + var module = angular.module('grafana.directives'); module.directive('graphLegend', function(popoverSrv) { @@ -16,13 +16,14 @@ function (angular, _, $) { link: function(scope, elem) { var $container = $('
    '); var firstRender = true; - var panel = scope.panel; + var ctrl = scope.ctrl; + var panel = ctrl.panel; var data; var seriesList; var i; scope.$on('render', function() { - data = scope.seriesList; + data = ctrl.seriesList; if (data) { render(); } @@ -54,7 +55,7 @@ function (angular, _, $) { var el = $(e.currentTarget); var index = getSeriesIndexForElement(el); var seriesInfo = seriesList[index]; - scope.toggleSeries(seriesInfo, e); + ctrl.toggleSeries(seriesInfo, e); } function sortLegend(e) { @@ -148,7 +149,7 @@ function (angular, _, $) { var html = '
    '; html += '
    '; html += ''; diff --git a/public/app/plugins/panel/graph/legend.popover.html b/public/app/plugins/panel/graph/legend.popover.html index 5410af2d1d1..e2b85a8dab4 100644 --- a/public/app/plugins/panel/graph/legend.popover.html +++ b/public/app/plugins/panel/graph/legend.popover.html @@ -3,12 +3,12 @@
    - -
    -   + ng-click="ctrl.changeSeriesColor(series, color);dismiss();"> 
    diff --git a/public/app/plugins/panel/graph/module.html b/public/app/plugins/panel/graph/module.html index 66d77a4ae53..4fa5f263210 100644 --- a/public/app/plugins/panel/graph/module.html +++ b/public/app/plugins/panel/graph/module.html @@ -1,4 +1,4 @@ -
    +
    @@ -8,12 +8,12 @@ Datapoints outside time range Can be caused by timezone mismatch between browser and graphite server
    -
    +
    -
    +
    diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index b6a5368c6ac..250b28ff302 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -3,6 +3,7 @@ import {PanelDirective} from '../../../features/panel/panel'; import {GraphCtrl} from './graph_ctrl'; import './graph'; +import './legend'; class GraphPanel extends PanelDirective { controller = GraphCtrl; From e6013353d2057215e46c67ae436adc97313a199f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 26 Jan 2016 17:54:57 -0500 Subject: [PATCH 29/91] fix series overrides --- public/app/plugins/panel/graph/module.ts | 1 + public/app/plugins/panel/graph/seriesOverridesCtrl.js | 11 +++++------ 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index 250b28ff302..72e273e40b1 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -4,6 +4,7 @@ import {GraphCtrl} from './graph_ctrl'; import './graph'; import './legend'; +import './seriesOverridesCtrl'; class GraphPanel extends PanelDirective { controller = GraphCtrl; diff --git a/public/app/plugins/panel/graph/seriesOverridesCtrl.js b/public/app/plugins/panel/graph/seriesOverridesCtrl.js index fd5c11b2060..265e99af223 100644 --- a/public/app/plugins/panel/graph/seriesOverridesCtrl.js +++ b/public/app/plugins/panel/graph/seriesOverridesCtrl.js @@ -45,18 +45,19 @@ define([ } $scope.updateCurrentOverrides(); - $scope.render(); + $scope.ctrl.render(); }; $scope.colorSelected = function(color) { $scope.override['color'] = color; $scope.updateCurrentOverrides(); - $scope.render(); + $scope.ctrl.render(); }; $scope.openColorSelector = function() { var popoverScope = $scope.$new(); popoverScope.colorSelected = $scope.colorSelected; + popoverScope.colors = $scope.ctrl.colors; popoverSrv.show({ element: $element.find(".dropdown"), @@ -69,11 +70,11 @@ define([ $scope.removeOverride = function(option) { delete $scope.override[option.propertyName]; $scope.updateCurrentOverrides(); - $scope.render(); + $scope.ctrl.render(); }; $scope.getSeriesNames = function() { - return _.map($scope.seriesList, function(series) { + return _.map($scope.ctrl.seriesList, function(series) { return series.alias; }); }; @@ -107,7 +108,5 @@ define([ $scope.addOverrideOption('Transform', 'transform', ['negative-Y']); $scope.addOverrideOption('Legend', 'legend', [true, false]); $scope.updateCurrentOverrides(); - }); - }); From 51a32a2bfa5656b9e787bb9774c04f199700e4ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 26 Jan 2016 18:08:08 -0500 Subject: [PATCH 30/91] feat(panels): fixes --- .../app/features/panel/metrics_panel_ctrl.ts | 38 ++++++++++++++++++- public/app/features/panel/panel_ctrl.ts | 10 +++++ .../graphite/partials/query.editor.html | 10 ++--- .../graphite/partials/query.options.html | 26 ++++++------- 4 files changed, 65 insertions(+), 19 deletions(-) diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index 795afb41bf6..375283b6a7d 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -192,7 +192,43 @@ class MetricsPanelCtrl extends PanelCtrl { return results; }); } + + addDataQuery(datasource) { + this.dashboard.addDataQueryTo(this.panel, datasource); + } + + removeDataQuery(query) { + this.dashboard.removeDataQuery(this.panel, query); + this.refresh(); + }; + + duplicateDataQuery(query) { + this.dashboard.duplicateDataQuery(this.panel, query); + } + + moveDataQuery(fromIndex, toIndex) { + this.dashboard.moveDataQuery(this.panel, fromIndex, toIndex); + } + + setDatasource(datasource) { + // switching to mixed + if (datasource.meta.mixed) { + _.each(this.panel.targets, target => { + target.datasource = this.panel.datasource; + if (target.datasource === null) { + target.datasource = config.defaultDatasource; + } + }); + } else if (this.datasource && this.datasource.meta.mixed) { + _.each(this.panel.targets, target => { + delete target.datasource; + }); + } + + this.panel.datasource = datasource.value; + this.datasource = null; + this.refresh(); + } } export {MetricsPanelCtrl}; - diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index ac12bac53ba..8da398ee3d3 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -16,6 +16,7 @@ export class PanelCtrl { fullscreen: boolean; inspector: any; editModeInitiated: boolean; + editorHelpIndex: number; constructor($scope, $injector) { var plugin = config.panels[this.panel.type]; @@ -100,4 +101,13 @@ export class PanelCtrl { broadcastRender(arg1?, arg2?) { this.$scope.$broadcast('render', arg1, arg2); } + + toggleEditorHelp(index) { + if (this.editorHelpIndex === index) { + this.editorHelpIndex = null; + return; + } + this.editorHelpIndex = index; + } + } diff --git a/public/app/plugins/datasource/graphite/partials/query.editor.html b/public/app/plugins/datasource/graphite/partials/query.editor.html index 76c0d6ddb65..9cb2b454132 100755 --- a/public/app/plugins/datasource/graphite/partials/query.editor.html +++ b/public/app/plugins/datasource/graphite/partials/query.editor.html @@ -25,19 +25,19 @@
  • - Duplicate + Duplicate
  • - Move up + Move up
  • - Move down + Move down
  • - +
    • @@ -48,7 +48,7 @@ {{target.refId}}
  • - +
    • diff --git a/public/app/plugins/datasource/graphite/partials/query.options.html b/public/app/plugins/datasource/graphite/partials/query.options.html index bdfe362d427..f20b55b1348 100644 --- a/public/app/plugins/datasource/graphite/partials/query.options.html +++ b/public/app/plugins/datasource/graphite/partials/query.options.html @@ -11,7 +11,7 @@
    • @@ -39,27 +39,27 @@
  • - + shorter legend names
  • - + series as parameters
  • - + stacking
  • - + templating
  • - + max data points
    • @@ -71,7 +71,7 @@
    -
    +
    Shorter legend names
    • alias() function to specify a custom series name
      • @@ -81,7 +81,7 @@
    -
    +
    Series as parameter
    • Some graphite functions allow you to have many series arguments
      • @@ -99,7 +99,7 @@
    -
    +
    Stacking
    • You find the stacking option under Display Styles tab
      • @@ -107,7 +107,7 @@
    -
    +
    Templating
    • You can use a template variable in place of metric names
      • @@ -116,7 +116,7 @@
    -
    +
    Max data points
    • Every graphite request is issued with a maxDataPoints parameter
      • From 34b82caaa8b438d855325ebc943886131ba3a631 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 27 Jan 2016 12:51:01 -0500 Subject: [PATCH 31/91] feat(panels): fixed unit tests --- .../app/features/panel/metrics_panel_ctrl.ts | 6 +- public/app/partials/metrics.html | 2 +- .../plugins/datasource/graphite/query_ctrl.js | 4 +- .../graphite/specs/query_ctrl_specs.ts | 45 ++++++------ public/app/plugins/panel/graph/graph_ctrl.ts | 2 +- .../panel/graph/seriesOverridesCtrl.js | 6 +- .../panel/graph/specs/graph_ctrl_specs.ts | 19 ++--- .../plugins/panel/graph/specs/graph_specs.ts | 72 ++++++++++--------- .../panel/graph/specs/tooltip_specs.ts | 16 +++-- .../test/specs/dashboardViewStateSrv-specs.js | 7 +- public/test/specs/helpers.js | 34 +++++++-- .../test/specs/seriesOverridesCtrl-specs.js | 17 +++-- 12 files changed, 129 insertions(+), 101 deletions(-) diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index 375283b6a7d..02ce3cf21ed 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -43,7 +43,7 @@ class MetricsPanelCtrl extends PanelCtrl { // hookup initial data fetch this.$timeout(() => { if (!this.skipDataOnInit) { - this.getData(); + this.refresh(); } }, 30);; } @@ -163,7 +163,7 @@ class MetricsPanelCtrl extends PanelCtrl { } }; - issueQueries() { + issueQueries(datasource) { if (!this.panel.targets || this.panel.targets.length === 0) { return this.$q.when([]); } @@ -182,7 +182,7 @@ class MetricsPanelCtrl extends PanelCtrl { }; this.setTimeQueryStart(); - return this.datasource.query(metricsQuery).then(results => { + return datasource.query(metricsQuery).then(results => { this.setTimeQueryEnd(); if (this.dashboard.snapshot) { diff --git a/public/app/partials/metrics.html b/public/app/partials/metrics.html index 390f5627486..8a7eb1bfd71 100644 --- a/public/app/partials/metrics.html +++ b/public/app/partials/metrics.html @@ -18,7 +18,7 @@ diff --git a/public/app/plugins/datasource/graphite/query_ctrl.js b/public/app/plugins/datasource/graphite/query_ctrl.js index 89286c53e1c..ab113465262 100644 --- a/public/app/plugins/datasource/graphite/query_ctrl.js +++ b/public/app/plugins/datasource/graphite/query_ctrl.js @@ -209,7 +209,7 @@ function (angular, _, config, gfunc, Parser) { $scope.targetTextChanged = function() { parseTarget(); - $scope.ctrl.getData(); + panelCtrl.refresh(); }; $scope.targetChanged = function() { @@ -223,7 +223,7 @@ function (angular, _, config, gfunc, Parser) { if ($scope.target.target !== oldTarget) { if ($scope.segments[$scope.segments.length - 1].value !== 'select metric') { - $scope.ctrl.getData(); + panelCtrl.refresh(); } } }; diff --git a/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts b/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts index 7473c1ea188..bdf339e0d27 100644 --- a/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts +++ b/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts @@ -14,13 +14,19 @@ describe('GraphiteQueryCtrl', function() { beforeEach(angularMocks.module('grafana.services')); beforeEach(ctx.providePhase()); - beforeEach(ctx.createControllerPhase('GraphiteQueryCtrl')); + beforeEach(angularMocks.inject(($rootScope, $controller, $q) => { + ctx.$q = $q; + ctx.scope = $rootScope.$new(); + ctx.scope.ctrl = {panel: ctx.panel}; + ctx.panelCtrl = ctx.scope.ctrl; + ctx.controller = $controller('GraphiteQueryCtrl', {$scope: ctx.scope}); + })); beforeEach(function() { ctx.scope.target = {target: 'aliasByNode(scaleToSeconds(test.prod.*,1),2)'}; - ctx.scope.datasource = ctx.datasource; - ctx.scope.datasource.metricFindQuery = sinon.stub().returns(ctx.$q.when([])); + ctx.panelCtrl.datasource = ctx.datasource; + ctx.panelCtrl.datasource.metricFindQuery = sinon.stub().returns(ctx.$q.when([])); }); describe('init', function() { @@ -30,7 +36,7 @@ describe('GraphiteQueryCtrl', function() { }); it('should validate metric key exists', function() { - expect(ctx.scope.datasource.metricFindQuery.getCall(0).args[0]).to.be('test.prod.*'); + expect(ctx.panelCtrl.datasource.metricFindQuery.getCall(0).args[0]).to.be('test.prod.*'); }); it('should delete last segment if no metrics are found', function() { @@ -45,11 +51,11 @@ describe('GraphiteQueryCtrl', function() { describe('when adding function', function() { beforeEach(function() { ctx.scope.target.target = 'test.prod.*.count'; - ctx.scope.datasource.metricFindQuery.returns(ctx.$q.when([{expandable: false}])); + ctx.panelCtrl.datasource.metricFindQuery.returns(ctx.$q.when([{expandable: false}])); ctx.scope.init(); ctx.scope.$digest(); - ctx.scope.$parent = { get_data: sinon.spy() }; + ctx.panelCtrl.refresh = sinon.spy(); ctx.scope.addFunction(gfunc.getFuncDef('aliasByNode')); }); @@ -61,19 +67,17 @@ describe('GraphiteQueryCtrl', function() { expect(ctx.scope.target.target).to.be('aliasByNode(test.prod.*.count, 2)'); }); - it('should call get_data', function() { - expect(ctx.scope.$parent.get_data.called).to.be(true); + it('should call refresh', function() { + expect(ctx.panelCtrl.refresh.called).to.be(true); }); }); describe('when adding function before any metric segment', function() { beforeEach(function() { ctx.scope.target.target = ''; - ctx.scope.datasource.metricFindQuery.returns(ctx.$q.when([{expandable: true}])); + ctx.panelCtrl.datasource.metricFindQuery.returns(ctx.$q.when([{expandable: true}])); ctx.scope.init(); ctx.scope.$digest(); - - ctx.scope.$parent = { get_data: sinon.spy() }; ctx.scope.addFunction(gfunc.getFuncDef('asPercent')); }); @@ -85,10 +89,9 @@ describe('GraphiteQueryCtrl', function() { describe('when initalizing target without metric expression and only function', function() { beforeEach(function() { ctx.scope.target.target = 'asPercent(#A, #B)'; - ctx.scope.datasource.metricFindQuery.returns(ctx.$q.when([])); + ctx.panelCtrl.datasource.metricFindQuery.returns(ctx.$q.when([])); ctx.scope.init(); ctx.scope.$digest(); - ctx.scope.$parent = { get_data: sinon.spy() }; }); it('should not add select metric segment', function() { @@ -104,10 +107,9 @@ describe('GraphiteQueryCtrl', function() { describe('when initializing a target with single param func using variable', function() { beforeEach(function() { ctx.scope.target.target = 'movingAverage(prod.count, $var)'; - ctx.scope.datasource.metricFindQuery.returns(ctx.$q.when([])); + ctx.panelCtrl.datasource.metricFindQuery.returns(ctx.$q.when([])); ctx.scope.init(); ctx.scope.$digest(); - ctx.scope.$parent = { get_data: sinon.spy() }; }); it('should add 2 segments', function() { @@ -123,7 +125,7 @@ describe('GraphiteQueryCtrl', function() { describe('when initalizing target without metric expression and function with series-ref', function() { beforeEach(function() { ctx.scope.target.target = 'asPercent(metric.node.count, #A)'; - ctx.scope.datasource.metricFindQuery.returns(ctx.$q.when([])); + ctx.panelCtrl.datasource.metricFindQuery.returns(ctx.$q.when([])); ctx.scope.init(); ctx.scope.$digest(); ctx.scope.$parent = { get_data: sinon.spy() }; @@ -141,13 +143,12 @@ describe('GraphiteQueryCtrl', function() { describe('when getting altSegments and metricFindQuery retuns empty array', function() { beforeEach(function() { ctx.scope.target.target = 'test.count'; - ctx.scope.datasource.metricFindQuery.returns(ctx.$q.when([])); + ctx.panelCtrl.datasource.metricFindQuery.returns(ctx.$q.when([])); ctx.scope.init(); ctx.scope.getAltSegments(1).then(function(results) { ctx.altSegments = results; }); ctx.scope.$digest(); - ctx.scope.$parent = { get_data: sinon.spy() }; }); it('should have no segments', function() { @@ -158,11 +159,11 @@ describe('GraphiteQueryCtrl', function() { describe('targetChanged', function() { beforeEach(function() { - ctx.scope.datasource.metricFindQuery.returns(ctx.$q.when([{expandable: false}])); + ctx.panelCtrl.datasource.metricFindQuery.returns(ctx.$q.when([{expandable: false}])); ctx.scope.init(); ctx.scope.$digest(); - ctx.scope.$parent = { get_data: sinon.spy() }; + ctx.panelCtrl.refresh = sinon.spy(); ctx.scope.target.target = ''; ctx.scope.targetChanged(); }); @@ -171,8 +172,8 @@ describe('GraphiteQueryCtrl', function() { expect(ctx.scope.target.target).to.be('aliasByNode(scaleToSeconds(test.prod.*, 1), 2)'); }); - it('should call get_data', function() { - expect(ctx.scope.$parent.get_data.called).to.be(true); + it('should call panelCtrl.refresh', function() { + expect(ctx.panelCtrl.refresh.called).to.be(true); }); }); }); diff --git a/public/app/plugins/panel/graph/graph_ctrl.ts b/public/app/plugins/panel/graph/graph_ctrl.ts index c242c0ae537..c552a543452 100644 --- a/public/app/plugins/panel/graph/graph_ctrl.ts +++ b/public/app/plugins/panel/graph/graph_ctrl.ts @@ -129,7 +129,7 @@ class GraphCtrl extends MetricsPanelCtrl { refreshData(datasource) { this.annotationsPromise = this.annotationsSrv.getAnnotations(this.dashboard); - return this.issueQueries() + return this.issueQueries(datasource) .then(res => this.dataHandler(res)) .catch(err => { this.seriesList = []; diff --git a/public/app/plugins/panel/graph/seriesOverridesCtrl.js b/public/app/plugins/panel/graph/seriesOverridesCtrl.js index 265e99af223..4b89de684e3 100644 --- a/public/app/plugins/panel/graph/seriesOverridesCtrl.js +++ b/public/app/plugins/panel/graph/seriesOverridesCtrl.js @@ -1,13 +1,11 @@ define([ 'angular', 'jquery', - 'app/app', 'lodash', -], function(angular, jquery, app, _) { +], function(angular, jquery, _) { 'use strict'; - var module = angular.module('grafana.panels.graph', []); - app.useModule(module); + var module = angular.module('grafana.controllers'); module.controller('SeriesOverridesCtrl', function($scope, $element, popoverSrv) { $scope.overrideMenu = []; diff --git a/public/app/plugins/panel/graph/specs/graph_ctrl_specs.ts b/public/app/plugins/panel/graph/specs/graph_ctrl_specs.ts index 73e47863f80..9bdd7c3df79 100644 --- a/public/app/plugins/panel/graph/specs/graph_ctrl_specs.ts +++ b/public/app/plugins/panel/graph/specs/graph_ctrl_specs.ts @@ -2,15 +2,10 @@ 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 {GraphCtrl} from '../graph_ctrl'; import helpers from '../../../../../test/specs/helpers'; -angular.module('grafana.controllers').controller('GraphCtrl', GraphCtrl); - describe('GraphCtrl', function() { var ctx = new helpers.ControllerTestContext(); @@ -18,7 +13,7 @@ describe('GraphCtrl', function() { beforeEach(angularMocks.module('grafana.controllers')); beforeEach(ctx.providePhase()); - beforeEach(ctx.createControllerPhase('GraphCtrl')); + beforeEach(ctx.createPanelController(GraphCtrl)); describe('get_data with 2 series', function() { beforeEach(function() { @@ -29,25 +24,23 @@ describe('GraphCtrl', function() { { target: 'test.cpu2', datapoints: [[1, 10]]} ] })); - ctx.scope.render = sinon.spy(); - ctx.scope.refreshData(ctx.datasource); + ctx.ctrl.render = sinon.spy(); + ctx.ctrl.refreshData(ctx.datasource); ctx.scope.$digest(); }); it('should send time series to render', function() { - var data = ctx.scope.render.getCall(0).args[0]; + var data = ctx.ctrl.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.ctrl.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 index e07033583b7..d943bc62ac4 100644 --- a/public/app/plugins/panel/graph/specs/graph_specs.ts +++ b/public/app/plugins/panel/graph/specs/graph_specs.ts @@ -23,11 +23,13 @@ describe('grafanaGraph', function() { })); beforeEach(angularMocks.inject(function($rootScope, $compile) { + var ctrl: any = {}; var scope = $rootScope.$new(); + scope.ctrl = ctrl; var element = angular.element("
      "); - scope.height = '200px'; - scope.panel = { + ctrl.height = '200px'; + ctrl.panel = { legend: {}, grid: { }, y_formats: [], @@ -37,12 +39,12 @@ describe('grafanaGraph', function() { } }; - scope.panelRenderingComplete = sinon.spy(); - scope.appEvent = sinon.spy(); - scope.onAppEvent = sinon.spy(); - scope.hiddenSeries = {}; - scope.dashboard = { timezone: 'browser' }; - scope.range = { + $rootScope.onAppEvent = sinon.spy(); + ctrl.otherPanelInFullscreenMode = sinon.spy(); + ctrl.renderingCompleted = sinon.spy(); + ctrl.hiddenSeries = {}; + ctrl.dashboard = { timezone: 'browser' }; + ctrl.range = { from: new Date('2014-08-09 10:00:00'), to: new Date('2014-09-09 13:00:00') }; @@ -56,7 +58,7 @@ describe('grafanaGraph', function() { alias: 'series2' })); - setupFunc(scope, ctx.data); + setupFunc(ctrl, ctx.data); $compile(element)(scope); scope.$digest(); @@ -73,11 +75,11 @@ describe('grafanaGraph', function() { } 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; + ctx.setup(function(ctrl) { + ctrl.panel.lines = true; + ctrl.panel.fill = 5; + ctrl.panel.linewidth = 3; + ctrl.panel.steppedLine = true; }); it('should configure plot with correct options', function() { @@ -89,8 +91,8 @@ describe('grafanaGraph', function() { }); graphScenario('grid thresholds 100, 200', function(ctx) { - ctx.setup(function(scope) { - scope.panel.grid = { + ctx.setup(function(ctrl) { + ctrl.panel.grid = { threshold1: 100, threshold1Color: "#111", threshold2: 200, @@ -109,8 +111,8 @@ describe('grafanaGraph', function() { }); graphScenario('inverted grid thresholds 200, 100', function(ctx) { - ctx.setup(function(scope) { - scope.panel.grid = { + ctx.setup(function(ctrl) { + ctrl.panel.grid = { threshold1: 200, threshold1Color: "#111", threshold2: 100, @@ -129,8 +131,8 @@ describe('grafanaGraph', function() { }); graphScenario('grid thresholds from zero', function(ctx) { - ctx.setup(function(scope) { - scope.panel.grid = { + ctx.setup(function(ctrl) { + ctrl.panel.grid = { threshold1: 0, threshold1Color: "#111", }; @@ -143,8 +145,8 @@ describe('grafanaGraph', function() { }); graphScenario('when logBase is log 10', function(ctx) { - ctx.setup(function(scope) { - scope.panel.grid = { + ctx.setup(function(ctrl) { + ctrl.panel.grid = { leftMax: null, rightMax: null, leftMin: null, @@ -162,8 +164,8 @@ describe('grafanaGraph', function() { }); graphScenario('should use timeStep for barWidth', function(ctx) { - ctx.setup(function(scope, data) { - scope.panel.bars = true; + ctx.setup(function(ctrl, data) { + ctrl.panel.bars = true; data[0] = new TimeSeries({ datapoints: [[1,10],[2,20]], alias: 'series1', @@ -176,10 +178,10 @@ describe('grafanaGraph', function() { }); graphScenario('series option overrides, fill & points', function(ctx) { - ctx.setup(function(scope, data) { - scope.panel.lines = true; - scope.panel.fill = 5; - scope.panel.seriesOverrides = [ + ctx.setup(function(ctrl, data) { + ctrl.panel.lines = true; + ctrl.panel.fill = 5; + ctrl.panel.seriesOverrides = [ { alias: 'test', fill: 0, points: true } ]; @@ -194,8 +196,8 @@ describe('grafanaGraph', function() { }); graphScenario('should order series order according to zindex', function(ctx) { - ctx.setup(function(scope) { - scope.panel.seriesOverrides = [{ alias: 'series1', zindex: 2 }]; + ctx.setup(function(ctrl) { + ctrl.panel.seriesOverrides = [{ alias: 'series1', zindex: 2 }]; }); it('should move zindex 2 last', function() { @@ -205,8 +207,8 @@ describe('grafanaGraph', function() { }); graphScenario('when series is hidden', function(ctx) { - ctx.setup(function(scope) { - scope.hiddenSeries = {'series2': true}; + ctx.setup(function(ctrl) { + ctrl.hiddenSeries = {'series2': true}; }); it('should remove datapoints and disable stack', function() { @@ -217,9 +219,9 @@ describe('grafanaGraph', function() { }); graphScenario('when stack and percent', function(ctx) { - ctx.setup(function(scope) { - scope.panel.percentage = true; - scope.panel.stack = true; + ctx.setup(function(ctrl) { + ctrl.panel.percentage = true; + ctrl.panel.stack = true; }); it('should show percentage', function() { diff --git a/public/app/plugins/panel/graph/specs/tooltip_specs.ts b/public/app/plugins/panel/graph/specs/tooltip_specs.ts index de173350b2b..58177ea7a16 100644 --- a/public/app/plugins/panel/graph/specs/tooltip_specs.ts +++ b/public/app/plugins/panel/graph/specs/tooltip_specs.ts @@ -8,6 +8,7 @@ import GraphTooltip from '../graph_tooltip'; var scope = { appEvent: sinon.spy(), onAppEvent: sinon.spy(), + ctrl: {} }; var elem = $('
      '); @@ -15,8 +16,8 @@ var dashboard = { }; function describeSharedTooltip(desc, fn) { var ctx: any = {}; - ctx.scope = scope; - ctx.scope.panel = { + ctx.ctrl = scope.ctrl; + ctx.ctrl.panel = { tooltip: { shared: true }, @@ -51,9 +52,11 @@ describeSharedTooltip("steppedLine false, stack false", function(ctx) { 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); @@ -93,7 +96,7 @@ describeSharedTooltip("steppedLine false, stack true, individual false", functio stack: true } ]; - ctx.scope.panel.stack = true; + ctx.ctrl.panel.stack = true; ctx.pos = { x: 11 }; }); @@ -124,7 +127,7 @@ describeSharedTooltip("steppedLine false, stack true, individual false, series s stack: false } ]; - ctx.scope.panel.stack = true; + ctx.ctrl.panel.stack = true; ctx.pos = { x: 11 }; }); @@ -156,15 +159,14 @@ describeSharedTooltip("steppedLine false, stack true, individual true", function stack: false } ]; - ctx.scope.panel.stack = true; - ctx.scope.panel.tooltip.value_type = 'individual'; + ctx.ctrl.panel.stack = true; + ctx.ctrl.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/dashboardViewStateSrv-specs.js b/public/test/specs/dashboardViewStateSrv-specs.js index 8d0daa7ea48..b33c7156392 100644 --- a/public/test/specs/dashboardViewStateSrv-specs.js +++ b/public/test/specs/dashboardViewStateSrv-specs.js @@ -9,7 +9,8 @@ define([ beforeEach(module('grafana.services')); beforeEach(inject(function(dashboardViewStateSrv, $location, $rootScope) { - $rootScope.onAppEvent = function(){}; + $rootScope.onAppEvent = function() {}; + $rootScope.dashboard = {meta: {}}; viewState = dashboardViewStateSrv.create($rootScope); location = $location; })); @@ -19,7 +20,7 @@ define([ var updateState = { fullscreen: true, edit: true, panelId: 1 }; viewState.update(updateState); expect(location.search()).to.eql(updateState); - expect(viewState.fullscreen).to.be(true); + expect(viewState.dashboard.meta.fullscreen).to.be(true); expect(viewState.state.fullscreen).to.be(true); }); }); @@ -29,7 +30,7 @@ define([ viewState.update({fullscreen: true, panelId: 1, edit: true}); viewState.update({fullscreen: false}); expect(location.search()).to.eql({}); - expect(viewState.fullscreen).to.be(false); + expect(viewState.dashboard.meta.fullscreen).to.be(false); expect(viewState.state.fullscreen).to.be(null); }); }); diff --git a/public/test/specs/helpers.js b/public/test/specs/helpers.js index ded17428d8f..65b7cd34355 100644 --- a/public/test/specs/helpers.js +++ b/public/test/specs/helpers.js @@ -1,7 +1,8 @@ define([ 'lodash', + 'app/core/config', 'app/core/utils/datemath', -], function(_, dateMath) { +], function(_, config, dateMath) { 'use strict'; function ControllerTestContext() { @@ -36,6 +37,28 @@ define([ }); }; + this.createPanelController = function(Ctrl) { + return inject(function($controller, $rootScope, $q, $location, $browser) { + self.scope = $rootScope.$new(); + self.$location = $location; + self.$browser = $browser; + self.$q = $q; + self.panel = {type: 'test'}; + self.dashboard = {}; + + $rootScope.appEvent = sinon.spy(); + $rootScope.onAppEvent = sinon.spy(); + $rootScope.colors = []; + + for (var i = 0; i < 50; i++) { $rootScope.colors.push('#' + i); } + + config.panels['test'] = {info: {}}; + self.ctrl = $controller(Ctrl, {$scope: self.scope}, { + panel: self.panel, dashboard: self.dashboard + }); + }); + }; + this.createControllerPhase = function(controllerName) { return inject(function($controller, $rootScope, $q, $location, $browser) { self.scope = $rootScope.$new(); @@ -59,7 +82,6 @@ define([ self.controller = $controller(controllerName, { $scope: self.scope }); - }); }; } @@ -74,10 +96,10 @@ define([ self.$routeParams = {}; this.providePhase = function(mocks) { - return module(function($provide) { - _.each(mocks, function(key) { - $provide.value(key, self[key]); - }); + return module(function($provide) { + _.each(mocks, function(key) { + $provide.value(key, self[key]); + }); }); }; diff --git a/public/test/specs/seriesOverridesCtrl-specs.js b/public/test/specs/seriesOverridesCtrl-specs.js index ba820f065ab..f4daa0fa4e5 100644 --- a/public/test/specs/seriesOverridesCtrl-specs.js +++ b/public/test/specs/seriesOverridesCtrl-specs.js @@ -9,16 +9,25 @@ define([ var popoverSrv = {}; beforeEach(module('grafana.services')); - beforeEach(module('grafana.panels.graph')); + beforeEach(module('grafana.controllers')); beforeEach(ctx.providePhase({ popoverSrv: popoverSrv })); - beforeEach(ctx.createControllerPhase('SeriesOverridesCtrl')); - beforeEach(function() { + beforeEach(inject(function($rootScope, $controller) { + // ctx.createControllerPhase('SeriesOverridesCtrl')); + // beforeEach(function() { + ctx.scope = $rootScope.$new(); + ctx.scope.ctrl = { + render: sinon.spy(), + seriesList: [] + }; ctx.scope.render = function() {}; - }); + ctx.controller = $controller('SeriesOverridesCtrl', { + $scope: ctx.scope + }); + })); describe('When setting an override', function() { beforeEach(function() { From f1efce56aa880df08ffa6c643631cac0b42d3312 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 27 Jan 2016 13:22:37 -0500 Subject: [PATCH 32/91] feat(panels): fixed duplicate and remove panel --- public/app/features/dashboard/rowCtrl.js | 4 -- .../app/features/panel/metrics_panel_ctrl.ts | 1 - public/app/features/panel/panel_ctrl.ts | 39 +++++++++++++++---- public/app/features/panel/panel_menu.js | 8 ++-- 4 files changed, 36 insertions(+), 16 deletions(-) diff --git a/public/app/features/dashboard/rowCtrl.js b/public/app/features/dashboard/rowCtrl.js index 3b178c4de26..77f923d2377 100644 --- a/public/app/features/dashboard/rowCtrl.js +++ b/public/app/features/dashboard/rowCtrl.js @@ -127,10 +127,6 @@ function (angular, _, config) { }); }; - $scope.updatePanelSpan = function(panel, span) { - panel.span = Math.min(Math.max(Math.floor(panel.span + span), 1), 12); - }; - $scope.replacePanel = function(newPanel, oldPanel) { var row = $scope.row; var index = _.indexOf(row.panels, oldPanel); diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index 02ce3cf21ed..1d1c53c4dc8 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -32,7 +32,6 @@ class MetricsPanelCtrl extends PanelCtrl { // make metrics tab the default this.editorTabIndex = 1; this.$q = $injector.get('$q'); - this.$timeout = $injector.get('$timeout'); this.datasourceSrv = $injector.get('datasourceSrv'); this.timeSrv = $injector.get('timeSrv'); diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index 8da398ee3d3..f3c1b159955 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -1,6 +1,7 @@ /// import config from 'app/core/config'; +import _ from 'lodash'; export class PanelCtrl { panel: any; @@ -13,6 +14,7 @@ export class PanelCtrl { editorTabs: any; $scope: any; $injector: any; + $timeout: any; fullscreen: boolean; inspector: any; editModeInitiated: boolean; @@ -23,6 +25,7 @@ export class PanelCtrl { this.$injector = $injector; this.$scope = $scope; + this.$timeout = $injector.get('$timeout'); this.pluginName = plugin.name; this.pluginId = plugin.id; this.icon = plugin.info.icon; @@ -102,12 +105,34 @@ export class PanelCtrl { this.$scope.$broadcast('render', arg1, arg2); } - toggleEditorHelp(index) { - if (this.editorHelpIndex === index) { - this.editorHelpIndex = null; - return; - } - this.editorHelpIndex = index; - } + toggleEditorHelp(index) { + if (this.editorHelpIndex === index) { + this.editorHelpIndex = null; + return; + } + this.editorHelpIndex = index; + } + + duplicate() { + this.dashboard.duplicatePanel(this.panel, this.row); + } + + updateColumnSpan(span) { + this.panel.span = Math.min(Math.max(Math.floor(this.panel.span + span), 1), 12); + this.$timeout(() => { + this.broadcastRender(); + }); + } + + removePanel() { + this.publishAppEvent('confirm-modal', { + title: 'Are you sure you want to remove this panel?', + icon: 'fa-trash', + yesText: 'Delete', + onConfirm: () => { + this.row.panels = _.without(this.row.panels, this.panel); + } + }); + } } diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js index 5ec5129dc38..69629a6abcb 100644 --- a/public/app/features/panel/panel_menu.js +++ b/public/app/features/panel/panel_menu.js @@ -34,9 +34,9 @@ function (angular, $, _) { if (ctrl.dashboard.meta.canEdit) { template += '
      '; template += '
      '; - template += ''; - template += ''; - template += ''; + template += ''; + template += ''; + template += ''; template += '
      '; template += '
      '; } @@ -96,7 +96,7 @@ function (angular, $, _) { // if hovering or draging pospone close if (force !== true) { - if ($menu.is(':hover') || $scope.dashboard.$$panelDragging) { + if ($menu.is(':hover') || $scope.ctrl.dashboard.$$panelDragging) { dismiss(2200); return; } From 9c1217cd2cf823c4ecab2dd0f49421a00844eafc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 27 Jan 2016 14:32:19 -0500 Subject: [PATCH 33/91] updated --- public/app/plugins/panel/test/module.html | 5 ---- public/app/plugins/panel/test/module.ts | 35 ----------------------- public/app/plugins/panel/test/plugin.json | 18 ------------ public/app/plugins/panel/text/module.ts | 4 +-- 4 files changed, 1 insertion(+), 61 deletions(-) delete mode 100644 public/app/plugins/panel/test/module.html delete mode 100644 public/app/plugins/panel/test/module.ts delete mode 100644 public/app/plugins/panel/test/plugin.json diff --git a/public/app/plugins/panel/test/module.html b/public/app/plugins/panel/test/module.html deleted file mode 100644 index 10b5eeae608..00000000000 --- a/public/app/plugins/panel/test/module.html +++ /dev/null @@ -1,5 +0,0 @@ -

      - Test panel! - panel.id: {{ctrl.panel.id}} - data: {{ctrl.data}} -

      diff --git a/public/app/plugins/panel/test/module.ts b/public/app/plugins/panel/test/module.ts deleted file mode 100644 index 21b6479c19a..00000000000 --- a/public/app/plugins/panel/test/module.ts +++ /dev/null @@ -1,35 +0,0 @@ -/// - -import {PanelDirective, MetricsPanelCtrl} from '../../../features/panel/panel'; - -function optionsTab() { - return {template: '

      options!

      ' }; -} - -export class TestPanelCtrl extends MetricsPanelCtrl { - data: any; - - constructor($scope, $injector) { - super($scope, $injector); - } - - refreshData(data) { - return this.issueQueries().then(res => { - this.data = res.data[0].target; - console.log('issueQueries', res); - }).catch(err => { - console.log('Errrrr! in test panel', err); - }); - } -} - -class TestPanel extends PanelDirective { - templateUrl = `app/plugins/panel/test/module.html`; - controller = TestPanelCtrl; - - link(scope, elem) { - console.log('test panel linking:', scope); - } -} - -export {TestPanel as Panel} diff --git a/public/app/plugins/panel/test/plugin.json b/public/app/plugins/panel/test/plugin.json deleted file mode 100644 index 08fb883af76..00000000000 --- a/public/app/plugins/panel/test/plugin.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "type": "panel", - "name": "Test", - "id": "test", - - "info": { - "description": "Test panel", - "author": { - "name": "Core Grafana Team.", - "url": "http://grafana.org" - }, - "logos": { - "icon": "fa fa-fw th-large", - "small": "img/logo_small.png", - "large": "img/logo_large.png" - } - } -} diff --git a/public/app/plugins/panel/text/module.ts b/public/app/plugins/panel/text/module.ts index f546f10c567..bdef3bb4ced 100644 --- a/public/app/plugins/panel/text/module.ts +++ b/public/app/plugins/panel/text/module.ts @@ -22,9 +22,7 @@ export class TextPanelCtrl extends PanelCtrl { initEditMode() { this.icon = 'fa fa-text-width'; - this.addEditorTab('Options', () => { - return { templateUrl: 'public/app/plugins/panel/text/editor.html' }; - }); + this.addEditorTab('Options', 'public/app/plugins/panel/text/editor.html'); } refresh() { From f0f7da9ff0cb053c6bf303e9521d22a78a5567fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 27 Jan 2016 17:16:00 -0500 Subject: [PATCH 34/91] feat(panels): fixing broken stuff --- public/app/features/dashboard/rowCtrl.js | 25 -------------- public/app/features/panel/panel_ctrl.ts | 34 +++++++++++++++++--- public/app/features/panel/panel_directive.js | 3 +- public/app/features/panel/panel_loader.ts | 4 +-- public/app/features/panel/panel_menu.js | 2 +- public/app/plugins/panel/text/module.ts | 1 + public/app/plugins/panel/unknown/module.ts | 7 +++- 7 files changed, 40 insertions(+), 36 deletions(-) diff --git a/public/app/features/dashboard/rowCtrl.js b/public/app/features/dashboard/rowCtrl.js index 77f923d2377..e8abb5bbb05 100644 --- a/public/app/features/dashboard/rowCtrl.js +++ b/public/app/features/dashboard/rowCtrl.js @@ -116,32 +116,7 @@ function (angular, _, config) { $scope.$broadcast('render'); }; - $scope.removePanel = function(panel) { - $scope.appEvent('confirm-modal', { - title: 'Are you sure you want to remove this panel?', - icon: 'fa-trash', - yesText: 'Delete', - onConfirm: function() { - $scope.row.panels = _.without($scope.row.panels, panel); - } - }); - }; - - $scope.replacePanel = function(newPanel, oldPanel) { - var row = $scope.row; - var index = _.indexOf(row.panels, oldPanel); - row.panels.splice(index, 1); - - // adding it back needs to be done in next digest - $timeout(function() { - newPanel.id = oldPanel.id; - newPanel.span = oldPanel.span; - row.panels.splice(index, 0, newPanel); - }); - }; - $scope.init(); - }); module.directive('rowHeight', function() { diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index f3c1b159955..8e3dd9d09f2 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -21,16 +21,17 @@ export class PanelCtrl { editorHelpIndex: number; constructor($scope, $injector) { - var plugin = config.panels[this.panel.type]; - this.$injector = $injector; this.$scope = $scope; this.$timeout = $injector.get('$timeout'); - this.pluginName = plugin.name; - this.pluginId = plugin.id; - this.icon = plugin.info.icon; this.editorTabIndex = 0; + var plugin = config.panels[this.panel.type]; + if (plugin) { + this.pluginId = plugin.id; + this.pluginName = plugin.name; + } + $scope.$on("refresh", () => this.refresh()); } @@ -97,6 +98,10 @@ export class PanelCtrl { return menu; } + getExtendedMenu() { + return [{text: 'Panel JSON', click: 'ctrl.editPanelJson(); dismiss();'}]; + } + otherPanelInFullscreenMode() { return this.dashboard.meta.fullscreen && !this.fullscreen; } @@ -135,4 +140,23 @@ export class PanelCtrl { }); } + editPanelJson() { + this.publishAppEvent('show-json-editor', { + object: this.panel, + updateHandler: this.replacePanel.bind(this) + }); + } + + replacePanel(newPanel, oldPanel) { + var row = this.row; + var index = _.indexOf(this.row.panels, oldPanel); + this.row.panels.splice(index, 1); + + // adding it back needs to be done in next digest + this.$timeout(() => { + newPanel.id = oldPanel.id; + newPanel.span = oldPanel.span; + this.row.panels.splice(index, 0, newPanel); + }); + } } diff --git a/public/app/features/panel/panel_directive.js b/public/app/features/panel/panel_directive.js index 50cc4b57b26..ffe978a55ad 100644 --- a/public/app/features/panel/panel_directive.js +++ b/public/app/features/panel/panel_directive.js @@ -17,7 +17,6 @@ function (angular, $) { var panelContainer = elem.find('.panel-container'); var ctrl = scope.ctrl; scope.$watchGroup(['ctrl.fullscreen', 'ctrl.height', 'ctrl.panel.height', 'ctrl.row.height'], function() { - console.log('height: ', ctrl.height); panelContainer.css({ minHeight: ctrl.height || ctrl.panel.height || ctrl.row.height, display: 'block' }); elem.toggleClass('panel-fullscreen', ctrl.fullscreen ? true : false); }); @@ -80,7 +79,7 @@ function (angular, $) { function dragEndHandler() { // if close to 12 - var rowSpan = ctrl.dashboard.rowSpan(scope.row); + var rowSpan = ctrl.dashboard.rowSpan(ctrl.row); if (rowSpan < 12 && rowSpan > 11) { lastPanel.span += 12 - rowSpan; } diff --git a/public/app/features/panel/panel_loader.ts b/public/app/features/panel/panel_loader.ts index cf42458a9a7..73b154e8840 100644 --- a/public/app/features/panel/panel_loader.ts +++ b/public/app/features/panel/panel_loader.ts @@ -41,6 +41,7 @@ function panelLoader($compile, dynamicDirectiveSrv, $http, $q, $injector) { function addPanel(name, Panel) { if (Panel.registered) { addPanelAndCompile(name); + return; } if (Panel.promise) { @@ -62,14 +63,13 @@ function panelLoader($compile, dynamicDirectiveSrv, $http, $q, $injector) { Panel.registered = true; addPanelAndCompile(name); }); - - return; } var panelElemName = 'panel-directive-' + scope.panel.type; let panelInfo = config.panels[scope.panel.type]; if (!panelInfo) { addPanel(panelElemName, UnknownPanel); + return; } System.import(panelInfo.module).then(function(panelModule) { diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js index 69629a6abcb..98e534e795a 100644 --- a/public/app/features/panel/panel_menu.js +++ b/public/app/features/panel/panel_menu.js @@ -64,7 +64,7 @@ function (angular, $, _) { } function getExtendedMenu(ctrl) { - return angular.copy(ctrl.extendedMenu); + return ctrl.getExtendedMenu(); } return { diff --git a/public/app/plugins/panel/text/module.ts b/public/app/plugins/panel/text/module.ts index bdef3bb4ced..87d51fbd5fe 100644 --- a/public/app/plugins/panel/text/module.ts +++ b/public/app/plugins/panel/text/module.ts @@ -59,6 +59,7 @@ export class TextPanelCtrl extends PanelCtrl { this.updateContent(this.converter.makeHtml(text)); } else { System.import('vendor/showdown').then(Showdown => { + console.log(this); this.converter = new Showdown.converter(); this.$scope.$apply(() => { this.updateContent(this.converter.makeHtml(text)); diff --git a/public/app/plugins/panel/unknown/module.ts b/public/app/plugins/panel/unknown/module.ts index 4f729649395..95adf934f81 100644 --- a/public/app/plugins/panel/unknown/module.ts +++ b/public/app/plugins/panel/unknown/module.ts @@ -2,10 +2,15 @@ import {PanelDirective} from '../../../features/panel/panel'; -export class UnknownPanel extends PanelDirective { +class UnknownPanel extends PanelDirective { template = `
      Unknown panel type: {{ctrl.panel.type}}
      `; } +export { + UnknownPanel, + UnknownPanel as Panel +} + From c8727db03ba132ddaeb7284ab7ccb6a7b5ceb600 Mon Sep 17 00:00:00 2001 From: Utkarsh Bhatnagar Date: Wed, 27 Jan 2016 14:47:58 -0800 Subject: [PATCH 35/91] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e97ab145c61..afdf52c47c7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ * **Sessions**: Support for memcached as session storage, closes [#3458](https://github.com/grafana/grafana/pull/3458) * **mysql**: Grafana now supports ssl for mysql, closes [#3584](https://github.com/grafana/grafana/pull/3584) * **snapshot**: Annotations are now included in snapshots, closes [#3635](https://github.com/grafana/grafana/pull/3635) +* **Admin**: Admin can now have global overview of Grafana setup, closes [#3812](https://github.com/grafana/grafana/issues/3812) ### Bug fixes * **Playlist**: Fix for memory leak when running a playlist, closes [#3794](https://github.com/grafana/grafana/pull/3794) From 97ac81aa9ccfacecb42b517ebb6c6cb7d1bc7264 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 27 Jan 2016 19:07:39 -0500 Subject: [PATCH 36/91] feat(panels): upgradede singlestat panel --- pkg/api/frontendsettings.go | 1 + public/app/features/panel/panel_editor_tab.ts | 1 + .../plugins/panel/singlestat/controller.ts | 397 +++++++++--------- .../app/plugins/panel/singlestat/editor.html | 68 +-- .../app/plugins/panel/singlestat/module.html | 8 +- public/app/plugins/panel/singlestat/module.ts | 362 ++++++++-------- 6 files changed, 421 insertions(+), 416 deletions(-) diff --git a/pkg/api/frontendsettings.go b/pkg/api/frontendsettings.go index 256ff15e881..0759f1e83b8 100644 --- a/pkg/api/frontendsettings.go +++ b/pkg/api/frontendsettings.go @@ -123,6 +123,7 @@ func getFrontendSettingsMap(c *middleware.Context) (map[string]interface{}, erro panels[panel.Id] = map[string]interface{}{ "module": panel.Module, "name": panel.Name, + "id": panel.Id, "info": panel.Info, } } diff --git a/public/app/features/panel/panel_editor_tab.ts b/public/app/features/panel/panel_editor_tab.ts index f6c11306678..ae896d1c0ae 100644 --- a/public/app/features/panel/panel_editor_tab.ts +++ b/public/app/features/panel/panel_editor_tab.ts @@ -16,6 +16,7 @@ function panelEditorTab(dynamicDirectiveSrv) { directive: scope => { var pluginId = scope.ctrl.pluginId; var tabIndex = scope.index; + console.log('tab plugnId:', pluginId); return Promise.resolve({ name: `panel-editor-tab-${pluginId}${tabIndex}`, diff --git a/public/app/plugins/panel/singlestat/controller.ts b/public/app/plugins/panel/singlestat/controller.ts index 4b55a4568be..f47e7f12d93 100644 --- a/public/app/plugins/panel/singlestat/controller.ts +++ b/public/app/plugins/panel/singlestat/controller.ts @@ -3,240 +3,233 @@ import angular from 'angular'; import _ from 'lodash'; import kbn from 'app/core/utils/kbn'; -import PanelMeta from 'app/features/panel/panel_meta2'; import TimeSeries from '../../../core/time_series2'; +import {MetricsPanelCtrl} from '../../../features/panel/panel'; -export class SingleStatCtrl { +// Set and populate defaults +var panelDefaults = { + links: [], + datasource: null, + maxDataPoints: 100, + interval: null, + targets: [{}], + cacheTimeout: null, + format: 'none', + prefix: '', + postfix: '', + nullText: null, + valueMaps: [ + { value: 'null', op: '=', text: 'N/A' } + ], + nullPointMode: 'connected', + valueName: 'avg', + prefixFontSize: '50%', + valueFontSize: '80%', + postfixFontSize: '50%', + thresholds: '', + colorBackground: false, + colorValue: false, + colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"], + sparkline: { + show: false, + full: false, + lineColor: 'rgb(31, 120, 193)', + fillColor: 'rgba(31, 118, 189, 0.18)', + } +}; + +export class SingleStatCtrl extends MetricsPanelCtrl { + series: any[]; + data: any[]; + fontSizes: any[]; + unitFormats: any[]; /** @ngInject */ - constructor($scope, panelSrv, panelHelper) { - $scope.panelMeta = new PanelMeta({ - panelName: 'Singlestat', - editIcon: "fa fa-dashboard", - fullscreen: true, - metricsEditor: true + constructor($scope, $injector) { + super($scope, $injector); + _.defaults(this.panel, panelDefaults); + } + + + initEditMode() { + this.icon = "fa fa-dashboard"; + this.fontSizes = ['20%', '30%','50%','70%','80%','100%', '110%', '120%', '150%', '170%', '200%']; + + this.addEditorTab('Options', 'app/plugins/panel/singlestat/editor.html'); + this.addEditorTab('Time range', 'app/features/panel/partials/panelTime.html'); + + this.unitFormats = kbn.getUnitFormats(); + } + + setUnitFormat(subItem) { + this.panel.format = subItem.value; + this.render(); + } + + refreshData(datasource) { + return this.issueQueries(datasource) + .then(this.dataHandler.bind(this)) + .catch(err => { + this.series = []; + this.render(); + throw err; + }); + } + + loadSnapshot(snapshotData) { + this.updateTimeRange(); + this.dataHandler(snapshotData); + } + + dataHandler(results) { + this.series = _.map(results.data, this.seriesHandler.bind(this)); + this.render(); + } + + seriesHandler(seriesData) { + var series = new TimeSeries({ + datapoints: seriesData.datapoints, + alias: seriesData.target, }); - $scope.fontSizes = ['20%', '30%','50%','70%','80%','100%', '110%', '120%', '150%', '170%', '200%']; + series.flotpairs = series.getFlotPairs(this.panel.nullPointMode); + return series; + } - $scope.panelMeta.addEditorTab('Options', 'app/plugins/panel/singlestat/editor.html'); - $scope.panelMeta.addEditorTab('Time range', 'app/features/panel/partials/panelTime.html'); + setColoring(options) { + if (options.background) { + this.panel.colorValue = false; + this.panel.colors = ['rgba(71, 212, 59, 0.4)', 'rgba(245, 150, 40, 0.73)', 'rgba(225, 40, 40, 0.59)']; + } else { + this.panel.colorBackground = false; + this.panel.colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)']; + } + this.render(); + } - // Set and populate defaults - var _d = { - links: [], - datasource: null, - maxDataPoints: 100, - interval: null, - targets: [{}], - cacheTimeout: null, - format: 'none', - prefix: '', - postfix: '', - nullText: null, - valueMaps: [ - { value: 'null', op: '=', text: 'N/A' } - ], - nullPointMode: 'connected', - valueName: 'avg', - prefixFontSize: '50%', - valueFontSize: '80%', - postfixFontSize: '50%', - thresholds: '', - colorBackground: false, - colorValue: false, - colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"], - sparkline: { - show: false, - full: false, - lineColor: 'rgb(31, 120, 193)', - fillColor: 'rgba(31, 118, 189, 0.18)', + invertColorOrder() { + var tmp = this.panel.colors[0]; + this.panel.colors[0] = this.panel.colors[2]; + this.panel.colors[2] = tmp; + this.render(); + } + + getDecimalsForValue(value) { + if (_.isNumber(this.panel.decimals)) { + return {decimals: this.panel.decimals, scaledDecimals: null}; + } + + var delta = value / 2; + var dec = -Math.floor(Math.log(delta) / Math.LN10); + + var magn = Math.pow(10, -dec), + norm = delta / magn, // norm is between 1.0 and 10.0 + size; + + if (norm < 1.5) { + size = 1; + } else if (norm < 3) { + size = 2; + // special case for 2.5, requires an extra decimal + if (norm > 2.25) { + size = 2.5; + ++dec; } - }; + } else if (norm < 7.5) { + size = 5; + } else { + size = 10; + } - _.defaults($scope.panel, _d); + size *= magn; - $scope.unitFormats = kbn.getUnitFormats(); + // reduce starting decimals if not needed + if (Math.floor(value) === value) { dec = 0; } - $scope.setUnitFormat = function(subItem) { - $scope.panel.format = subItem.value; - $scope.render(); - }; + var result: any = {}; + result.decimals = Math.max(0, dec); + result.scaledDecimals = result.decimals - Math.floor(Math.log(size) / Math.LN10) + 2; - $scope.init = function() { - panelSrv.init($scope); - }; + return result; + } - $scope.refreshData = function(datasource) { - panelHelper.updateTimeRange($scope); + render() { + var data: any = {}; + this.setValues(data); - return panelHelper.issueMetricQuery($scope, datasource) - .then($scope.dataHandler, function(err) { - $scope.series = []; - $scope.render(); - throw err; - }); - }; + data.thresholds = this.panel.thresholds.split(',').map(function(strVale) { + return Number(strVale.trim()); + }); - $scope.loadSnapshot = function(snapshotData) { - panelHelper.updateTimeRange($scope); - $scope.dataHandler(snapshotData); - }; + data.colorMap = this.panel.colors; - $scope.dataHandler = function(results) { - $scope.series = _.map(results.data, $scope.seriesHandler); - $scope.render(); - }; + this.data = data; + this.broadcastRender(); + } - $scope.seriesHandler = function(seriesData) { - var series = new TimeSeries({ - datapoints: seriesData.datapoints, - alias: seriesData.target, - }); + setValues(data) { + data.flotpairs = []; - series.flotpairs = series.getFlotPairs($scope.panel.nullPointMode); + if (this.series.length > 1) { + this.inspector.error = new Error(); + this.inspector.error.message = 'Multiple Series Error'; + this.inspector.error.data = 'Metric query returns ' + this.series.length + + ' series. Single Stat Panel expects a single series.\n\nResponse:\n'+JSON.stringify(this.series); + throw this.inspector.error; + } - return series; - }; + if (this.series && this.series.length > 0) { + var lastPoint = _.last(this.series[0].datapoints); + var lastValue = _.isArray(lastPoint) ? lastPoint[0] : null; - $scope.setColoring = function(options) { - if (options.background) { - $scope.panel.colorValue = false; - $scope.panel.colors = ['rgba(71, 212, 59, 0.4)', 'rgba(245, 150, 40, 0.73)', 'rgba(225, 40, 40, 0.59)']; + if (_.isString(lastValue)) { + data.value = 0; + data.valueFormated = lastValue; + data.valueRounded = 0; } else { - $scope.panel.colorBackground = false; - $scope.panel.colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)']; + data.value = this.series[0].stats[this.panel.valueName]; + data.flotpairs = this.series[0].flotpairs; + + var decimalInfo = this.getDecimalsForValue(data.value); + var formatFunc = kbn.valueFormats[this.panel.format]; + data.valueFormated = formatFunc(data.value, decimalInfo.decimals, decimalInfo.scaledDecimals); + data.valueRounded = kbn.roundValue(data.value, decimalInfo.decimals); } - $scope.render(); - }; + } - $scope.invertColorOrder = function() { - var tmp = $scope.panel.colors[0]; - $scope.panel.colors[0] = $scope.panel.colors[2]; - $scope.panel.colors[2] = tmp; - $scope.render(); - }; - - $scope.getDecimalsForValue = function(value) { - if (_.isNumber($scope.panel.decimals)) { - return { decimals: $scope.panel.decimals, scaledDecimals: null }; - } - - var delta = value / 2; - var dec = -Math.floor(Math.log(delta) / Math.LN10); - - var magn = Math.pow(10, -dec), - norm = delta / magn, // norm is between 1.0 and 10.0 - size; - - if (norm < 1.5) { - size = 1; - } else if (norm < 3) { - size = 2; - // special case for 2.5, requires an extra decimal - if (norm > 2.25) { - size = 2.5; - ++dec; - } - } else if (norm < 7.5) { - size = 5; - } else { - size = 10; - } - - size *= magn; - - // reduce starting decimals if not needed - if (Math.floor(value) === value) { dec = 0; } - - var result: any = {}; - result.decimals = Math.max(0, dec); - result.scaledDecimals = result.decimals - Math.floor(Math.log(size) / Math.LN10) + 2; - - return result; - }; - - $scope.render = function() { - var data: any = {}; - - $scope.setValues(data); - - data.thresholds = $scope.panel.thresholds.split(',').map(function(strVale) { - return Number(strVale.trim()); - }); - - data.colorMap = $scope.panel.colors; - - $scope.data = data; - $scope.$broadcast('render'); - }; - - $scope.setValues = function(data) { - data.flotpairs = []; - - if ($scope.series.length > 1) { - $scope.inspector.error = new Error(); - $scope.inspector.error.message = 'Multiple Series Error'; - $scope.inspector.error.data = 'Metric query returns ' + $scope.series.length + - ' series. Single Stat Panel expects a single series.\n\nResponse:\n'+JSON.stringify($scope.series); - throw $scope.inspector.error; - } - - if ($scope.series && $scope.series.length > 0) { - var lastPoint = _.last($scope.series[0].datapoints); - var lastValue = _.isArray(lastPoint) ? lastPoint[0] : null; - - if (_.isString(lastValue)) { - data.value = 0; - data.valueFormated = lastValue; - data.valueRounded = 0; - } else { - data.value = $scope.series[0].stats[$scope.panel.valueName]; - data.flotpairs = $scope.series[0].flotpairs; - - var decimalInfo = $scope.getDecimalsForValue(data.value); - var formatFunc = kbn.valueFormats[$scope.panel.format]; - data.valueFormated = formatFunc(data.value, decimalInfo.decimals, decimalInfo.scaledDecimals); - data.valueRounded = kbn.roundValue(data.value, decimalInfo.decimals); - } - } - - // check value to text mappings - for (var i = 0; i < $scope.panel.valueMaps.length; i++) { - var map = $scope.panel.valueMaps[i]; - // special null case - if (map.value === 'null') { - if (data.value === null || data.value === void 0) { - data.valueFormated = map.text; - return; - } - continue; - } - - // value/number to text mapping - var value = parseFloat(map.value); - if (value === data.value) { + // check value to text mappings + for (var i = 0; i < this.panel.valueMaps.length; i++) { + var map = this.panel.valueMaps[i]; + // special null case + if (map.value === 'null') { + if (data.value === null || data.value === void 0) { data.valueFormated = map.text; return; } + continue; } - if (data.value === null || data.value === void 0) { - data.valueFormated = "no value"; + // value/number to text mapping + var value = parseFloat(map.value); + if (value === data.value) { + data.valueFormated = map.text; + return; } - }; + } - $scope.removeValueMap = function(map) { - var index = _.indexOf($scope.panel.valueMaps, map); - $scope.panel.valueMaps.splice(index, 1); - $scope.render(); - }; + if (data.value === null || data.value === void 0) { + data.valueFormated = "no value"; + } + }; - $scope.addValueMap = function() { - $scope.panel.valueMaps.push({value: '', op: '=', text: '' }); - }; - - $scope.init(); + removeValueMap(map) { + var index = _.indexOf(this.panel.valueMaps, map); + this.panel.valueMaps.splice(index, 1); + this.render(); + }; + addValueMap() { + this.panel.valueMaps.push({value: '', op: '=', text: '' }); } } + diff --git a/public/app/plugins/panel/singlestat/editor.html b/public/app/plugins/panel/singlestat/editor.html index 76c264e7b3a..bf3227f7582 100644 --- a/public/app/plugins/panel/singlestat/editor.html +++ b/public/app/plugins/panel/singlestat/editor.html @@ -10,20 +10,20 @@
    • + ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
    • Value
    • - +
    • Postfix
    • + ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
    @@ -37,19 +37,19 @@ Prefix
  • - +
  • Value
  • - +
  • Postfix
  • - +
    • @@ -60,16 +60,16 @@ Unit
  • + ng-model="ctrl.panel.format" + dropdown-typeahead="ctrl.unitFormats" + dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)">
  • Decimals
  • + ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur>
    • @@ -86,32 +86,32 @@
  • Background  - - + +
  • Value  - - + +
  • ThresholdsDefine two threshold values<br /> 50,80 will produce: <50 = Green, 50:80 = Yellow, >80 = Red
  • - +
  • Colors
  • - - - + + +
  • - invert order + invert order
    • @@ -128,27 +128,27 @@
  • Show  - - + +
  • Background mode  - - + +
  • Line Color
  • - +
  • Fill Color
  • - +
    • @@ -163,21 +163,21 @@
  • Value to text mapping
    • -
  • - +
  • +
  • - +
  • - +
  • - +
    • diff --git a/public/app/plugins/panel/singlestat/module.html b/public/app/plugins/panel/singlestat/module.html index 748915e6329..599e8724159 100644 --- a/public/app/plugins/panel/singlestat/module.html +++ b/public/app/plugins/panel/singlestat/module.html @@ -1,4 +1,4 @@ - -
    -
    -     +
    + +
    +
    diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index 0a171207bcf..b974a9c117d 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/public/app/plugins/panel/singlestat/module.ts @@ -2,221 +2,226 @@ import _ from 'lodash'; import $ from 'jquery'; -import angular from 'angular'; +import 'jquery.flot'; import {SingleStatCtrl} from './controller'; +import {PanelDirective} from '../../../features/panel/panel'; -angular.module('grafana.directives').directive('singleStatPanel', singleStatPanel); -function singleStatPanel($location, linkSrv, $timeout, templateSrv) { - 'use strict'; - return { - controller: SingleStatCtrl, - templateUrl: 'app/plugins/panel/singlestat/module.html', - link: function(scope, elem) { - var data, panel, linkInfo, $panelContainer; - var firstRender = true; +class SingleStatPanel extends PanelDirective { + templateUrl = 'app/plugins/panel/singlestat/module.html'; + controller = SingleStatCtrl; - scope.$on('render', function() { - if (firstRender) { - var inner = elem.find('.singlestat-panel'); - if (inner.length) { - elem = inner; - $panelContainer = elem.parents('.panel-container'); - firstRender = false; - hookupDrilldownLinkTooltip(); - } - } + /** @ngInject */ + constructor(private $location, private linkSrv, private $timeout, private templateSrv) { + super(); + } - render(); - scope.panelRenderingComplete(); - }); + link(scope, elem, attrs, ctrl) { + var $location = this.$location; + var linkSrv = this.linkSrv; + var $timeout = this.$timeout; + var panel = ctrl.panel; + var templateSrv = this.templateSrv; + var data, linkInfo, $panelContainer; + var firstRender = true; - function setElementHeight() { - try { - var height = scope.height || panel.height || scope.row.height; - if (_.isString(height)) { - height = parseInt(height.replace('px', ''), 10); - } - - height -= 5; // padding - height -= panel.title ? 24 : 9; // subtract panel title bar - - elem.css('height', height + 'px'); - - return true; - } catch (e) { // IE throws errors sometimes - return false; + scope.$on('render', function() { + if (firstRender) { + var inner = elem.find('.singlestat-panel'); + if (inner.length) { + elem = inner; + $panelContainer = elem.parents('.panel-container'); + firstRender = false; + hookupDrilldownLinkTooltip(); } } - function applyColoringThresholds(value, valueString) { - if (!panel.colorValue) { - return valueString; + render(); + ctrl.renderingCompleted(); + }); + + function setElementHeight() { + try { + var height = scope.height || panel.height || ctrl.row.height; + if (_.isString(height)) { + height = parseInt(height.replace('px', ''), 10); } - var color = getColorForValue(data, value); - if (color) { - return ''+ valueString + ''; - } + height -= 5; // padding + height -= panel.title ? 24 : 9; // subtract panel title bar + elem.css('height', height + 'px'); + + return true; + } catch (e) { // IE throws errors sometimes + return false; + } + } + + function applyColoringThresholds(value, valueString) { + if (!panel.colorValue) { return valueString; } - function getSpan(className, fontSize, value) { - value = templateSrv.replace(value); - return '' + - value + ''; + var color = getColorForValue(data, value); + if (color) { + return ''+ valueString + ''; } - function getBigValueHtml() { - var body = '
    '; + return valueString; + } - if (panel.prefix) { body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, scope.panel.prefix); } + function getSpan(className, fontSize, value) { + value = templateSrv.replace(value); + return '' + + value + ''; + } - var value = applyColoringThresholds(data.valueRounded, data.valueFormated); - body += getSpan('singlestat-panel-value', panel.valueFontSize, value); + function getBigValueHtml() { + var body = '
    '; - if (panel.postfix) { body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, panel.postfix); } + if (panel.prefix) { body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, panel.prefix); } - body += '
    '; + var value = applyColoringThresholds(data.valueRounded, data.valueFormated); + body += getSpan('singlestat-panel-value', panel.valueFontSize, value); - return body; + if (panel.postfix) { body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, panel.postfix); } + + body += '
    '; + + return body; + } + + function addSparkline() { + var width = elem.width() + 20; + var height = elem.height() || 100; + + var plotCanvas = $('
    '); + var plotCss: any = {}; + plotCss.position = 'absolute'; + + if (panel.sparkline.full) { + plotCss.bottom = '5px'; + plotCss.left = '-5px'; + plotCss.width = (width - 10) + 'px'; + var dynamicHeightMargin = height <= 100 ? 5 : (Math.round((height/100)) * 15) + 5; + plotCss.height = (height - dynamicHeightMargin) + 'px'; + } else { + plotCss.bottom = "0px"; + plotCss.left = "-5px"; + plotCss.width = (width - 10) + 'px'; + plotCss.height = Math.floor(height * 0.25) + "px"; } - function addSparkline() { - var panel = scope.panel; - var width = elem.width() + 20; - var height = elem.height() || 100; + plotCanvas.css(plotCss); - var plotCanvas = $('
    '); - var plotCss: any = {}; - plotCss.position = 'absolute'; - - if (panel.sparkline.full) { - plotCss.bottom = '5px'; - plotCss.left = '-5px'; - plotCss.width = (width - 10) + 'px'; - var dynamicHeightMargin = height <= 100 ? 5 : (Math.round((height/100)) * 15) + 5; - plotCss.height = (height - dynamicHeightMargin) + 'px'; - } else { - plotCss.bottom = "0px"; - plotCss.left = "-5px"; - plotCss.width = (width - 10) + 'px'; - plotCss.height = Math.floor(height * 0.25) + "px"; - } - - plotCanvas.css(plotCss); - - var options = { - legend: { show: false }, - series: { - lines: { - show: true, - fill: 1, - lineWidth: 1, - fillColor: panel.sparkline.fillColor, - }, + var options = { + legend: { show: false }, + series: { + lines: { + show: true, + fill: 1, + lineWidth: 1, + fillColor: panel.sparkline.fillColor, }, - yaxes: { show: false }, - xaxis: { - show: false, - mode: "time", - min: scope.range.from.valueOf(), - max: scope.range.to.valueOf(), - }, - grid: { hoverable: false, show: false }, - }; + }, + yaxes: { show: false }, + xaxis: { + show: false, + mode: "time", + min: ctrl.range.from.valueOf(), + max: ctrl.range.to.valueOf(), + }, + grid: { hoverable: false, show: false }, + }; - elem.append(plotCanvas); + elem.append(plotCanvas); - var plotSeries = { - data: data.flotpairs, - color: panel.sparkline.lineColor - }; + var plotSeries = { + data: data.flotpairs, + color: panel.sparkline.lineColor + }; - $.plot(plotCanvas, [plotSeries], options); - } + $.plot(plotCanvas, [plotSeries], options); + } - function render() { - if (!scope.data) { return; } + function render() { + if (!ctrl.data) { return; } - data = scope.data; - panel = scope.panel; + data = ctrl.data; + setElementHeight(); - setElementHeight(); + var body = getBigValueHtml(); - var body = getBigValueHtml(); - - if (panel.colorBackground && !isNaN(data.valueRounded)) { - var color = getColorForValue(data, data.valueRounded); - if (color) { - $panelContainer.css('background-color', color); - if (scope.fullscreen) { - elem.css('background-color', color); - } else { - elem.css('background-color', ''); - } - } - } else { - $panelContainer.css('background-color', ''); - elem.css('background-color', ''); - } - - elem.html(body); - - if (panel.sparkline.show) { - addSparkline(); - } - - elem.toggleClass('pointer', panel.links.length > 0); - - if (panel.links.length > 0) { - linkInfo = linkSrv.getPanelLinkAnchorInfo(panel.links[0], scope.panel.scopedVars); - } else { - linkInfo = null; - } - } - - function hookupDrilldownLinkTooltip() { - // drilldown link tooltip - var drilldownTooltip = $('
    hello
    "'); - - elem.mouseleave(function() { - if (panel.links.length === 0) { return;} - drilldownTooltip.detach(); - }); - - elem.click(function(evt) { - if (!linkInfo) { return; } - // ignore title clicks in title - if ($(evt).parents('.panel-header').length > 0) { return; } - - if (linkInfo.target === '_blank') { - var redirectWindow = window.open(linkInfo.href, '_blank'); - redirectWindow.location; - return; - } - - if (linkInfo.href.indexOf('http') === 0) { - window.location.href = linkInfo.href; + if (panel.colorBackground && !isNaN(data.valueRounded)) { + var color = getColorForValue(data, data.valueRounded); + if (color) { + $panelContainer.css('background-color', color); + if (scope.fullscreen) { + elem.css('background-color', color); } else { - $timeout(function() { - $location.url(linkInfo.href); - }); + elem.css('background-color', ''); } + } + } else { + $panelContainer.css('background-color', ''); + elem.css('background-color', ''); + } - drilldownTooltip.detach(); - }); + elem.html(body); - elem.mousemove(function(e) { - if (!linkInfo) { return;} + if (panel.sparkline.show) { + addSparkline(); + } - drilldownTooltip.text('click to go to: ' + linkInfo.title); - drilldownTooltip.place_tt(e.pageX+20, e.pageY-15); - }); + elem.toggleClass('pointer', panel.links.length > 0); + + if (panel.links.length > 0) { + linkInfo = linkSrv.getPanelLinkAnchorInfo(panel.links[0], panel.scopedVars); + } else { + linkInfo = null; } } - }; + + function hookupDrilldownLinkTooltip() { + // drilldown link tooltip + var drilldownTooltip = $('
    hello
    "'); + + elem.mouseleave(function() { + if (panel.links.length === 0) { return;} + drilldownTooltip.detach(); + }); + + elem.click(function(evt) { + if (!linkInfo) { return; } + // ignore title clicks in title + if ($(evt).parents('.panel-header').length > 0) { return; } + + if (linkInfo.target === '_blank') { + var redirectWindow = window.open(linkInfo.href, '_blank'); + redirectWindow.location; + return; + } + + if (linkInfo.href.indexOf('http') === 0) { + window.location.href = linkInfo.href; + } else { + $timeout(function() { + $location.url(linkInfo.href); + }); + } + + drilldownTooltip.detach(); + }); + + elem.mousemove(function(e) { + if (!linkInfo) { return;} + + drilldownTooltip.text('click to go to: ' + linkInfo.title); + drilldownTooltip.place_tt(e.pageX+20, e.pageY-15); + }); + } + } } function getColorForValue(data, value) { @@ -226,7 +231,12 @@ function getColorForValue(data, value) { } } + console.log('first'); return _.first(data.colorMap); } -export {singleStatPanel as panel, getColorForValue}; +export { + SingleStatPanel, + SingleStatPanel as Panel, + getColorForValue +}; From 1210fca8e5eae430d7abcd893453f1d5e0bd0cc1 Mon Sep 17 00:00:00 2001 From: bergquist Date: Thu, 28 Jan 2016 01:11:26 +0100 Subject: [PATCH 37/91] fix(singlestat): fix bug in threshold calculations --- public/app/plugins/panel/singlestat/module.ts | 2 +- .../panel/singlestat/specs/singlestat_panel_spec.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index 0a171207bcf..faf88e691e4 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/public/app/plugins/panel/singlestat/module.ts @@ -221,7 +221,7 @@ function singleStatPanel($location, linkSrv, $timeout, templateSrv) { function getColorForValue(data, value) { for (var i = data.thresholds.length; i > 0; i--) { - if (value >= data.thresholds[i]) { + if (value >= data.thresholds[i-1]) { return data.colorMap[i]; } } diff --git a/public/app/plugins/panel/singlestat/specs/singlestat_panel_spec.ts b/public/app/plugins/panel/singlestat/specs/singlestat_panel_spec.ts index 17b34f6bcef..5e93923e6d3 100644 --- a/public/app/plugins/panel/singlestat/specs/singlestat_panel_spec.ts +++ b/public/app/plugins/panel/singlestat/specs/singlestat_panel_spec.ts @@ -2,12 +2,12 @@ import {describe, beforeEach, it, sinon, expect} from 'test/lib/common'; import {getColorForValue} from '../module'; -describe('grafanaSingleStat', function() { +describe.only('grafanaSingleStat', function() { describe('legacy thresholds', () => { describe('positive thresholds', () => { var data: any = { colorMap: ['green', 'yellow', 'red'], - thresholds: [0, 20, 50] + thresholds: [20, 50] }; it('5 should return green', () => { @@ -29,7 +29,7 @@ describe('grafanaSingleStat', function() { describe('negative thresholds', () => { var data: any = { colorMap: ['green', 'yellow', 'red'], - thresholds: [ -20, 0, 20] + thresholds: [ 0, 20] }; it('-30 should return green', () => { @@ -48,7 +48,7 @@ describe('grafanaSingleStat', function() { describe('negative thresholds', () => { var data: any = { colorMap: ['green', 'yellow', 'red'], - thresholds: [ -40, -27, 20] + thresholds: [-27, 20] }; it('-30 should return green', () => { From 72a64388b57f21c3b6aef5aa8f9a0951a3ea264e Mon Sep 17 00:00:00 2001 From: bergquist Date: Thu, 28 Jan 2016 01:14:12 +0100 Subject: [PATCH 38/91] fix(tests): remove only in spec --- .../app/plugins/panel/singlestat/specs/singlestat_panel_spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/plugins/panel/singlestat/specs/singlestat_panel_spec.ts b/public/app/plugins/panel/singlestat/specs/singlestat_panel_spec.ts index 5e93923e6d3..0ea34c54721 100644 --- a/public/app/plugins/panel/singlestat/specs/singlestat_panel_spec.ts +++ b/public/app/plugins/panel/singlestat/specs/singlestat_panel_spec.ts @@ -2,7 +2,7 @@ import {describe, beforeEach, it, sinon, expect} from 'test/lib/common'; import {getColorForValue} from '../module'; -describe.only('grafanaSingleStat', function() { +describe('grafanaSingleStat', function() { describe('legacy thresholds', () => { describe('positive thresholds', () => { var data: any = { From 307c86fc283dfe92620dc1e4b427c071035e2ac0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 27 Jan 2016 19:16:33 -0500 Subject: [PATCH 39/91] feat(panels): fixed singlestat tests --- public/app/plugins/panel/singlestat/module.ts | 2 -- .../panel/singlestat/specs/singlestat-specs.ts | 11 ++++------- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index b974a9c117d..df66213ec06 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/public/app/plugins/panel/singlestat/module.ts @@ -230,8 +230,6 @@ function getColorForValue(data, value) { return data.colorMap[i]; } } - - console.log('first'); return _.first(data.colorMap); } diff --git a/public/app/plugins/panel/singlestat/specs/singlestat-specs.ts b/public/app/plugins/panel/singlestat/specs/singlestat-specs.ts index 8d532d17d80..4971c74ea1a 100644 --- a/public/app/plugins/panel/singlestat/specs/singlestat-specs.ts +++ b/public/app/plugins/panel/singlestat/specs/singlestat-specs.ts @@ -9,9 +9,6 @@ import angular from 'angular'; import helpers from '../../../../../test/specs/helpers'; import {SingleStatCtrl} from '../controller'; - -angular.module('grafana.controllers').controller('SingleStatCtrl', SingleStatCtrl); - describe('SingleStatCtrl', function() { var ctx = new helpers.ControllerTestContext(); @@ -25,7 +22,7 @@ describe('SingleStatCtrl', function() { beforeEach(angularMocks.module('grafana.controllers')); beforeEach(ctx.providePhase()); - beforeEach(ctx.createControllerPhase('SingleStatCtrl')); + beforeEach(ctx.createPanelController(SingleStatCtrl)); beforeEach(function() { setupFunc(); @@ -33,9 +30,9 @@ describe('SingleStatCtrl', function() { data: [{target: 'test.cpu1', datapoints: ctx.datapoints}] })); - ctx.scope.refreshData(ctx.datasource); + ctx.ctrl.refreshData(ctx.datasource); ctx.scope.$digest(); - ctx.data = ctx.scope.data; + ctx.data = ctx.ctrl.data; }); }; @@ -76,7 +73,7 @@ describe('SingleStatCtrl', function() { singleStatScenario('When value to text mapping is specified', function(ctx) { ctx.setup(function() { ctx.datapoints = [[10,1]]; - ctx.scope.panel.valueMaps = [{value: '10', text: 'OK'}]; + ctx.ctrl.panel.valueMaps = [{value: '10', text: 'OK'}]; }); it('Should replace value with text', function() { From 8bd07287f8d993d32f3decb849e47782a36ca371 Mon Sep 17 00:00:00 2001 From: utkarshcmu Date: Wed, 27 Jan 2016 17:41:23 -0800 Subject: [PATCH 40/91] Fixed dashboard_tag query --- pkg/services/sqlstore/stats.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/services/sqlstore/stats.go b/pkg/services/sqlstore/stats.go index 0465c6999a9..fbd22ac0f5c 100644 --- a/pkg/services/sqlstore/stats.go +++ b/pkg/services/sqlstore/stats.go @@ -71,7 +71,7 @@ func GetAdminStats(query *m.GetAdminStatsQuery) error { FROM ` + dialect.Quote("dashboard_snapshot") + ` ) AS db_snapshot_count, ( - SELECT COUNT(*) + SELECT COUNT( DISTINCT ( ` + dialect.Quote("term") + ` )) FROM ` + dialect.Quote("dashboard_tag") + ` ) AS db_tag_count, ( From 9bd3b417c4971d6b3536635dbbad2b8f850fc116 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 28 Jan 2016 12:48:43 -0500 Subject: [PATCH 41/91] feat(panels): upgraded table panel to latest plugin model --- public/app/features/panel/panel_ctrl.ts | 17 +- public/app/plugins/panel/table/controller.ts | 207 +++++++++---------- public/app/plugins/panel/table/editor.html | 50 ++--- public/app/plugins/panel/table/editor.ts | 166 ++++++++------- public/app/plugins/panel/table/module.html | 50 +++-- public/app/plugins/panel/table/module.ts | 173 ++++++++-------- 6 files changed, 336 insertions(+), 327 deletions(-) diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index 8e3dd9d09f2..398a6f50233 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -80,13 +80,16 @@ export class PanelCtrl { return; } - addEditorTab(title, templateUrl) { - this.editorTabs.push({ - title: title, - directiveFn: function() { - return {templateUrl: templateUrl}; - } - }); + addEditorTab(title, directiveFn) { + var editorTab = {title, directiveFn}; + + if (_.isString(directiveFn)) { + editorTab.directiveFn = function() { + return {templateUrl: directiveFn}; + }; + } + + this.editorTabs.push(editorTab); } getMenu() { diff --git a/public/app/plugins/panel/table/controller.ts b/public/app/plugins/panel/table/controller.ts index 376f36fd84d..9b06b437db9 100644 --- a/public/app/plugins/panel/table/controller.ts +++ b/public/app/plugins/panel/table/controller.ts @@ -4,132 +4,131 @@ import angular from 'angular'; import _ from 'lodash'; import moment from 'moment'; import * as FileExport from 'app/core/utils/file_export'; -import PanelMeta from 'app/features/panel/panel_meta2'; +import {MetricsPanelCtrl} from '../../../features/panel/panel'; import {transformDataToTable} from './transformers'; +import {tablePanelEditor} from './editor'; -export class TablePanelCtrl { +var panelDefaults = { + targets: [{}], + transform: 'timeseries_to_columns', + pageSize: null, + showHeader: true, + styles: [ + { + type: 'date', + pattern: 'Time', + dateFormat: 'YYYY-MM-DD HH:mm:ss', + }, + { + unit: 'short', + type: 'number', + decimals: 2, + colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"], + colorMode: null, + pattern: '/.*/', + thresholds: [], + } + ], + columns: [], + scroll: true, + fontSize: '100%', + sort: {col: 0, desc: true}, +}; + +export class TablePanelCtrl extends MetricsPanelCtrl { + pageIndex: number; + dataRaw: any; + table: any; /** @ngInject */ - constructor($scope, $rootScope, $q, panelSrv, panelHelper, annotationsSrv) { - $scope.ctrl = this; - $scope.pageIndex = 0; + constructor($scope, $injector, private annotationsSrv) { + super($scope, $injector); + this.pageIndex = 0; - $scope.panelMeta = new PanelMeta({ - panelName: 'Table', - editIcon: "fa fa-table", - fullscreen: true, - metricsEditor: true, - }); + if (this.panel.styles === void 0) { + this.panel.styles = this.panel.columns; + this.panel.columns = this.panel.fields; + delete this.panel.columns; + delete this.panel.fields; + } - $scope.panelMeta.addEditorTab('Options', 'app/plugins/panel/table/options.html'); - $scope.panelMeta.addEditorTab('Time range', 'app/features/panel/partials/panelTime.html'); - $scope.panelMeta.addExtendedMenuItem('Export CSV', '', 'exportCsv()'); + _.defaults(this.panel, panelDefaults); + } - var panelDefaults = { - targets: [{}], - transform: 'timeseries_to_columns', - pageSize: null, - showHeader: true, - styles: [ - { - type: 'date', - pattern: 'Time', - dateFormat: 'YYYY-MM-DD HH:mm:ss', - }, - { - unit: 'short', - type: 'number', - decimals: 2, - colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"], - colorMode: null, - pattern: '/.*/', - thresholds: [], - } - ], - columns: [], - scroll: true, - fontSize: '100%', - sort: {col: 0, desc: true}, - }; + initEditMode() { + super.initEditMode(); + this.addEditorTab('Options', tablePanelEditor); + this.addEditorTab('Time range', 'app/features/panel/partials/panelTime.html'); + } - $scope.init = function() { - if ($scope.panel.styles === void 0) { - $scope.panel.styles = $scope.panel.columns; - $scope.panel.columns = $scope.panel.fields; - delete $scope.panel.columns; - delete $scope.panel.fields; - } + getExtendedMenu() { + var menu = super.getExtendedMenu(); + menu.push({text: 'Export CSV', click: 'exportCsv()'}); + return menu; + } - _.defaults($scope.panel, panelDefaults); - panelSrv.init($scope); - }; + refreshData(datasource) { + this.pageIndex = 0; - $scope.refreshData = function(datasource) { - panelHelper.updateTimeRange($scope); - - $scope.pageIndex = 0; - - if ($scope.panel.transform === 'annotations') { - return annotationsSrv.getAnnotations($scope.dashboard).then(annotations => { - $scope.dataRaw = annotations; - $scope.render(); - }); - } - - return panelHelper.issueMetricQuery($scope, datasource) - .then($scope.dataHandler, function(err) { - $scope.render(); - throw err; + if (this.panel.transform === 'annotations') { + return this.annotationsSrv.getAnnotations(this.dashboard).then(annotations => { + this.dataRaw = annotations; + this.render(); }); - }; + } - $scope.toggleColumnSort = function(col, colIndex) { - if ($scope.panel.sort.col === colIndex) { - if ($scope.panel.sort.desc) { - $scope.panel.sort.desc = false; - } else { - $scope.panel.sort.col = null; - } + return this.issueQueries(datasource) + .then(this.dataHandler.bind(this)) + .catch(err => { + this.render(); + throw err; + }); + } + + toggleColumnSort(col, colIndex) { + if (this.panel.sort.col === colIndex) { + if (this.panel.sort.desc) { + this.panel.sort.desc = false; } else { - $scope.panel.sort.col = colIndex; - $scope.panel.sort.desc = true; + this.panel.sort.col = null; } + } else { + this.panel.sort.col = colIndex; + this.panel.sort.desc = true; + } - $scope.render(); - }; + this.render(); + } - $scope.dataHandler = function(results) { - $scope.dataRaw = results.data; - $scope.pageIndex = 0; - $scope.render(); - }; + dataHandler(results) { + this.dataRaw = results.data; + this.pageIndex = 0; + this.render(); + } - $scope.render = function() { - // automatically correct transform mode - // based on data - if ($scope.dataRaw && $scope.dataRaw.length) { - if ($scope.dataRaw[0].type === 'table') { - $scope.panel.transform = 'table'; + render() { + // automatically correct transform mode + // based on data + if (this.dataRaw && this.dataRaw.length) { + if (this.dataRaw[0].type === 'table') { + this.panel.transform = 'table'; + } else { + if (this.dataRaw[0].type === 'docs') { + this.panel.transform = 'json'; } else { - if ($scope.dataRaw[0].type === 'docs') { - $scope.panel.transform = 'json'; - } else { - if ($scope.panel.transform === 'table' || $scope.panel.transform === 'json') { - $scope.panel.transform = 'timeseries_to_rows'; - } + if (this.panel.transform === 'table' || this.panel.transform === 'json') { + this.panel.transform = 'timeseries_to_rows'; } } } + } - $scope.table = transformDataToTable($scope.dataRaw, $scope.panel); - $scope.table.sort($scope.panel.sort); - panelHelper.broadcastRender($scope, $scope.table, $scope.dataRaw); - }; + this.table = transformDataToTable(this.dataRaw, this.panel); + this.table.sort(this.panel.sort); + this.broadcastRender(this.table); + } - $scope.exportCsv = function() { - FileExport.exportTableDataToCsv($scope.table); - }; - - $scope.init(); + exportCsv() { + FileExport.exportTableDataToCsv(this.table); } } diff --git a/public/app/plugins/panel/table/editor.html b/public/app/plugins/panel/table/editor.html index 0b13c61c884..010c30326d9 100644 --- a/public/app/plugins/panel/table/editor.html +++ b/public/app/plugins/panel/table/editor.html @@ -9,9 +9,9 @@
  • + ng-model="editor.panel.transform" + ng-options="k as v.description for (k, v) in editor.transformers" + ng-change="editor.transformChanged()">
    • @@ -21,14 +21,14 @@
  • Columns
    • -
  • - +
  • + {{column.text}}
  • - +
    • @@ -46,16 +46,16 @@
  • + empty-to-null ng-model="editor.panel.pageSize" ng-change="editor.render()" ng-model-onblur>
  • - +
  • Font size
  • - +
    • @@ -68,11 +68,11 @@
    Column Styles
    -
    +
    • - +
    @@ -81,7 +81,7 @@ Name or regex
  • - +
  • Type @@ -89,8 +89,8 @@
    • @@ -100,7 +100,7 @@ Format
  • - +
    • @@ -113,8 +113,8 @@
    • @@ -122,18 +122,18 @@ ThresholdsComma seperated values
  • - +
  • Colors
  • - - - + + +
  • - invert order + invert order
    • @@ -145,8 +145,8 @@
  • + dropdown-typeahead="editor.unitFormats" + dropdown-typeahead-on-select="editor.setUnitFormat(style, $subItem)">
  • Decimals @@ -161,7 +161,7 @@
    • -
    diff --git a/public/app/plugins/panel/table/editor.ts b/public/app/plugins/panel/table/editor.ts index 42536642d4a..dde691b00f3 100644 --- a/public/app/plugins/panel/table/editor.ts +++ b/public/app/plugins/panel/table/editor.ts @@ -10,105 +10,123 @@ import {transformers} from './transformers'; import kbn from 'app/core/utils/kbn'; export class TablePanelEditorCtrl { + panel: any; + panelCtrl: any; + transformers: any; + colorModes: any; + columnStyles: any; + columnTypes: any; + fontSizes: any; + dateFormats: any; + addColumnSegment: any; + unitFormats: any; + getColumnNames: any; /** @ngInject */ - constructor($scope, $q, uiSegmentSrv) { - $scope.transformers = transformers; - $scope.unitFormats = kbn.getUnitFormats(); - $scope.colorModes = [ + constructor($scope, private $q, private uiSegmentSrv) { + $scope.editor = this; + this.panelCtrl = $scope.ctrl; + this.panel = this.panelCtrl.panel; + this.transformers = transformers; + this.unitFormats = kbn.getUnitFormats(); + this.colorModes = [ {text: 'Disabled', value: null}, {text: 'Cell', value: 'cell'}, {text: 'Value', value: 'value'}, {text: 'Row', value: 'row'}, ]; - $scope.columnTypes = [ + this.columnTypes = [ {text: 'Number', value: 'number'}, {text: 'String', value: 'string'}, {text: 'Date', value: 'date'}, ]; - $scope.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%']; - $scope.dateFormats = [ + this.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%']; + this.dateFormats = [ {text: 'YYYY-MM-DD HH:mm:ss', value: 'YYYY-MM-DD HH:mm:ss'}, {text: 'MM/DD/YY h:mm:ss a', value: 'MM/DD/YY h:mm:ss a'}, {text: 'MMMM D, YYYY LT', value: 'MMMM D, YYYY LT'}, ]; - $scope.addColumnSegment = uiSegmentSrv.newPlusButton(); + this.addColumnSegment = uiSegmentSrv.newPlusButton(); - $scope.getColumnOptions = function() { - if (!$scope.dataRaw) { - return $q.when([]); - } - var columns = transformers[$scope.panel.transform].getColumns($scope.dataRaw); - var segments = _.map(columns, (c: any) => uiSegmentSrv.newSegment({value: c.text})); - return $q.when(segments); - }; - - $scope.addColumn = function() { - var columns = transformers[$scope.panel.transform].getColumns($scope.dataRaw); - var column = _.findWhere(columns, {text: $scope.addColumnSegment.value}); - - if (column) { - $scope.panel.columns.push(column); - $scope.render(); - } - - var plusButton = uiSegmentSrv.newPlusButton(); - $scope.addColumnSegment.html = plusButton.html; - $scope.addColumnSegment.value = plusButton.value; - }; - - $scope.transformChanged = function() { - $scope.panel.columns = []; - $scope.render(); - }; - - $scope.removeColumn = function(column) { - $scope.panel.columns = _.without($scope.panel.columns, column); - $scope.render(); - }; - - $scope.setUnitFormat = function(column, subItem) { - column.unit = subItem.value; - $scope.render(); - }; - - $scope.addColumnStyle = function() { - var columnStyleDefaults = { - unit: 'short', - type: 'number', - decimals: 2, - colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"], - colorMode: null, - pattern: '/.*/', - dateFormat: 'YYYY-MM-DD HH:mm:ss', - thresholds: [], - }; - - $scope.panel.styles.push(angular.copy(columnStyleDefaults)); - }; - - $scope.removeColumnStyle = function(style) { - $scope.panel.styles = _.without($scope.panel.styles, style); - }; - - $scope.getColumnNames = function() { - if (!$scope.table) { + // this is used from bs-typeahead and needs to be instance bound + this.getColumnNames = () => { + if (!this.panelCtrl.table) { return []; } - return _.map($scope.table.columns, function(col: any) { + return _.map(this.panelCtrl.table.columns, function(col: any) { return col.text; }); }; + } - $scope.invertColorOrder = function(index) { - var ref = $scope.panel.styles[index].colors; - var copy = ref[0]; - ref[0] = ref[2]; - ref[2] = copy; - $scope.render(); + getColumnOptions() { + if (!this.panelCtrl.dataRaw) { + return this.$q.when([]); + } + var columns = this.transformers[this.panel.transform].getColumns(this.panelCtrl.dataRaw); + var segments = _.map(columns, (c: any) => this.uiSegmentSrv.newSegment({value: c.text})); + return this.$q.when(segments); + } + + addColumn() { + var columns = transformers[this.panel.transform].getColumns(this.panelCtrl.dataRaw); + var column = _.findWhere(columns, {text: this.addColumnSegment.value}); + + if (column) { + this.panel.columns.push(column); + this.render(); + } + + var plusButton = this.uiSegmentSrv.newPlusButton(); + this.addColumnSegment.html = plusButton.html; + this.addColumnSegment.value = plusButton.value; + } + + transformChanged() { + this.panel.columns = []; + this.render(); + } + + render() { + this.panelCtrl.render(); + } + + removeColumn(column) { + this.panel.columns = _.without(this.panel.columns, column); + this.panelCtrl.render(); + } + + setUnitFormat(column, subItem) { + column.unit = subItem.value; + this.panelCtrl.render(); + }; + + addColumnStyle() { + var columnStyleDefaults = { + unit: 'short', + type: 'number', + decimals: 2, + colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"], + colorMode: null, + pattern: '/.*/', + dateFormat: 'YYYY-MM-DD HH:mm:ss', + thresholds: [], }; + this.panel.styles.push(angular.copy(columnStyleDefaults)); + } + + removeColumnStyle(style) { + this.panel.styles = _.without(this.panel.styles, style); + } + + invertColorOrder(index) { + var ref = this.panel.styles[index].colors; + var copy = ref[0]; + ref[0] = ref[2]; + ref[2] = copy; + this.panelCtrl.render(); } } diff --git a/public/app/plugins/panel/table/module.html b/public/app/plugins/panel/table/module.html index 75b9b4ce136..0c69fe6cb9b 100644 --- a/public/app/plugins/panel/table/module.html +++ b/public/app/plugins/panel/table/module.html @@ -1,28 +1,24 @@ -
    - -
    -
    -
    -
    {{playlistItem.title}} - - -
    {{playlist.name}} - +
    - - - - - - - -
    -
    - {{col.text}} - - - - -
    -
    -
    -
    -
    -
    - +
    +
    +
    + + + + + + + + +
    +
    + {{col.text}} + + + + +
    +
    +
    +
    +
    diff --git a/public/app/plugins/panel/table/module.ts b/public/app/plugins/panel/table/module.ts index 834bea42ba5..0903275b802 100644 --- a/public/app/plugins/panel/table/module.ts +++ b/public/app/plugins/panel/table/module.ts @@ -5,103 +5,96 @@ import kbn = require('app/core/utils/kbn'); import _ from 'lodash'; import $ from 'jquery'; import moment from 'moment'; -import angular from 'angular'; +import {PanelDirective} from '../../../features/panel/panel'; import {TablePanelCtrl} from './controller'; import {TableRenderer} from './renderer'; -import {tablePanelEditor} from './editor'; -angular.module('grafana.directives').directive('grafanaPanelTableEditor', tablePanelEditor); +class TablePanel extends PanelDirective { + templateUrl = 'app/plugins/panel/table/module.html'; + controller = TablePanelCtrl; -function tablePanel() { - 'use strict'; - return { - restrict: 'E', - templateUrl: 'app/plugins/panel/table/module.html', - controller: TablePanelCtrl, - link: function(scope, elem) { - var data; - var panel = scope.panel; - var pageCount = 0; - var formaters = []; + link(scope, elem, attrs, ctrl) { + var data; + var panel = ctrl.panel; + var pageCount = 0; + var formaters = []; - function getTableHeight() { - var panelHeight = scope.height || scope.panel.height || scope.row.height; - if (_.isString(panelHeight)) { - panelHeight = parseInt(panelHeight.replace('px', ''), 10); - } - if (pageCount > 1) { - panelHeight -= 28; - } - - return (panelHeight - 60) + 'px'; + function getTableHeight() { + var panelHeight = ctrl.height || ctrl.panel.height || ctrl.row.height; + if (_.isString(panelHeight)) { + panelHeight = parseInt(panelHeight.replace('px', ''), 10); + } + if (pageCount > 1) { + panelHeight -= 28; } - function appendTableRows(tbodyElem) { - var renderer = new TableRenderer(panel, data, scope.dashboard.timezone); - tbodyElem.empty(); - tbodyElem.html(renderer.render(scope.pageIndex)); - } - - function switchPage(e) { - var el = $(e.currentTarget); - scope.pageIndex = (parseInt(el.text(), 10)-1); - renderPanel(); - } - - function appendPaginationControls(footerElem) { - footerElem.empty(); - - var pageSize = panel.pageSize || 100; - pageCount = Math.ceil(data.rows.length / pageSize); - if (pageCount === 1) { - return; - } - - var startPage = Math.max(scope.pageIndex - 3, 0); - var endPage = Math.min(pageCount, startPage + 9); - - var paginationList = $('
      '); - - for (var i = startPage; i < endPage; i++) { - var activeClass = i === scope.pageIndex ? 'active' : ''; - var pageLinkElem = $('
    • ' + (i+1) + '
      • '); - paginationList.append(pageLinkElem); - } - - footerElem.append(paginationList); - } - - function renderPanel() { - var container = elem.find('.table-panel-container'); - var rootElem = elem.find('.table-panel-scroll'); - var tbodyElem = elem.find('tbody'); - var footerElem = elem.find('.table-panel-footer'); - - appendTableRows(tbodyElem); - - container.css({'font-size': panel.fontSize}); - appendPaginationControls(footerElem); - - rootElem.css({'max-height': panel.scroll ? getTableHeight() : '' }); - } - - elem.on('click', '.table-panel-page-link', switchPage); - - scope.$on('$destroy', function() { - elem.off('click', '.table-panel-page-link'); - }); - - scope.$on('render', function(event, renderData) { - data = renderData || data; - if (!data) { - scope.get_data(); - return; - } - - renderPanel(); - }); + return (panelHeight - 60) + 'px'; } - }; + + function appendTableRows(tbodyElem) { + var renderer = new TableRenderer(panel, data, ctrl.dashboard.timezone); + tbodyElem.empty(); + tbodyElem.html(renderer.render(ctrl.pageIndex)); + } + + function switchPage(e) { + var el = $(e.currentTarget); + ctrl.pageIndex = (parseInt(el.text(), 10)-1); + renderPanel(); + } + + function appendPaginationControls(footerElem) { + footerElem.empty(); + + var pageSize = panel.pageSize || 100; + pageCount = Math.ceil(data.rows.length / pageSize); + if (pageCount === 1) { + return; + } + + var startPage = Math.max(ctrl.pageIndex - 3, 0); + var endPage = Math.min(pageCount, startPage + 9); + + var paginationList = $('
        '); + + for (var i = startPage; i < endPage; i++) { + var activeClass = i === ctrl.pageIndex ? 'active' : ''; + var pageLinkElem = $('
      • ' + (i+1) + '
        • '); + paginationList.append(pageLinkElem); + } + + footerElem.append(paginationList); + } + + function renderPanel() { + var panelElem = elem.parents('.panel'); + var rootElem = elem.find('.table-panel-scroll'); + var tbodyElem = elem.find('tbody'); + var footerElem = elem.find('.table-panel-footer'); + + elem.css({'font-size': panel.fontSize}); + panelElem.addClass('table-panel-wrapper'); + + appendTableRows(tbodyElem); + appendPaginationControls(footerElem); + + rootElem.css({'max-height': panel.scroll ? getTableHeight() : '' }); + } + + elem.on('click', '.table-panel-page-link', switchPage); + + scope.$on('$destroy', function() { + elem.off('click', '.table-panel-page-link'); + }); + + scope.$on('render', function(event, renderData) { + data = renderData || data; + renderPanel(); + }); + } } -export {tablePanel as panel}; +export { + TablePanel, + TablePanel as Panel +}; From a7de2ceae4fb1e520477a2fdc2d9af6e9c97b25f Mon Sep 17 00:00:00 2001 From: bergquist Date: Thu, 28 Jan 2016 20:06:50 +0100 Subject: [PATCH 42/91] feat(playlist): basic UI support for tags --- public/app/features/playlist/all.js | 1 + .../features/playlist/partials/playlist.html | 51 +++++----- .../playlist/partials/playlist_search.html | 26 +++++ .../features/playlist/playlist_edit_ctrl.ts | 59 ++++++----- .../app/features/playlist/playlist_search.ts | 95 ++++++++++++++++++ public/less/grafana.less | 1 + public/less/playlist.less | 99 +++++++++++++++++++ 7 files changed, 281 insertions(+), 51 deletions(-) create mode 100644 public/app/features/playlist/partials/playlist_search.html create mode 100644 public/app/features/playlist/playlist_search.ts create mode 100644 public/less/playlist.less diff --git a/public/app/features/playlist/all.js b/public/app/features/playlist/all.js index a37de0f4612..3b07b0d74c5 100644 --- a/public/app/features/playlist/all.js +++ b/public/app/features/playlist/all.js @@ -1,5 +1,6 @@ define([ './playlists_ctrl', + './playlist_search', './playlist_srv', './playlist_edit_ctrl', './playlist_routes' diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index ca5cd05a997..c2a7cda09e1 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -39,34 +39,24 @@

        -

        Add dashboards

        -
        -
        -
          -
        • - Search -
          • -
        • - -
          • -
        -
        -
        -
        -
        Search results ({{ctrl.filteredPlaylistItems.length}})
        +
        Add dashboards
        +
        + +
        +
        +
        + +
        +
        +
        Search results ({{ctrl.filteredDashboards.length}})
        - + @@ -77,13 +67,22 @@ - - -
        {{playlistItem.title}}
        - Search results empty -
        +
        +
        +
        +
        + + + {{tag.term}}  ({{tag.count}}) + +
        +
        +
        +
        Added dashboards
        diff --git a/public/app/features/playlist/partials/playlist_search.html b/public/app/features/playlist/partials/playlist_search.html new file mode 100644 index 00000000000..01edcb413c0 --- /dev/null +++ b/public/app/features/playlist/partials/playlist_search.html @@ -0,0 +1,26 @@ +
        + + + +
        + + + + starred + | + + + tags + + + | + + + + {{tagName}} + + + +
        +
        diff --git a/public/app/features/playlist/playlist_edit_ctrl.ts b/public/app/features/playlist/playlist_edit_ctrl.ts index f8f4a29fd5c..e684ba91ecf 100644 --- a/public/app/features/playlist/playlist_edit_ctrl.ts +++ b/public/app/features/playlist/playlist_edit_ctrl.ts @@ -6,14 +6,16 @@ import coreModule from '../../core/core_module'; import config from 'app/core/config'; export class PlaylistEditCtrl { - filteredPlaylistItems: any = []; - foundPlaylistItems: any = []; + filteredDashboards: any = []; + filteredTags: any = []; searchQuery: string = ''; loading: boolean = false; playlist: any = { interval: '10m', }; playlistItems: any = []; + dashboardresult: any = []; + tagresult: any = []; /** @ngInject */ constructor(private $scope, private playlistSrv, private backendSrv, private $location, private $route) { @@ -30,35 +32,18 @@ export class PlaylistEditCtrl { this.playlistItems = result; }); } - - this.search(); } - search() { - var query: any = {limit: 10}; - - if (this.searchQuery) { - query.query = this.searchQuery; - } - - this.loading = true; - - this.backendSrv.search(query) - .then((results) => { - this.foundPlaylistItems = results; - this.filterFoundPlaylistItems(); - }) - .finally(() => { - this.loading = false; - }); - }; - filterFoundPlaylistItems() { - this.filteredPlaylistItems = _.reject(this.foundPlaylistItems, (playlistItem) => { + console.log('filter !'); + console.log(this.dashboardresult); + this.filteredDashboards = _.reject(this.dashboardresult, (playlistItem) => { return _.findWhere(this.playlistItems, (listPlaylistItem) => { return parseInt(listPlaylistItem.value) === playlistItem.id; }); }); + + this.filteredTags = this.tagresult; }; addPlaylistItem(playlistItem) { @@ -70,6 +55,20 @@ export class PlaylistEditCtrl { this.filterFoundPlaylistItems(); }; + addTagPlaylistItem(tag) { + console.log(tag); + + var playlistItem: any = { + value: tag.term, + type: 'dashboard_by_tag', + order: this.playlistItems.length + 1, + title: tag.term + }; + + this.playlistItems.push(playlistItem); + this.filterFoundPlaylistItems(); + } + removePlaylistItem(playlistItem) { _.remove(this.playlistItems, (listedPlaylistItem) => { return playlistItem === listedPlaylistItem; @@ -104,7 +103,7 @@ export class PlaylistEditCtrl { }; isSearchResultsEmpty() { - return !this.foundPlaylistItems.length; + return !this.dashboardresult.length; }; isSearchQueryEmpty() { @@ -119,6 +118,16 @@ export class PlaylistEditCtrl { return this.loading; }; + searchStarted(promise) { + promise.then((data) => { + console.log('searchStarted: ', data); + + this.dashboardresult = data.dashboardResult; + this.tagresult = data.tagResult; + this.filterFoundPlaylistItems(); + }); + }; + movePlaylistItem(playlistItem, offset) { var currentPosition = this.playlistItems.indexOf(playlistItem); var newPosition = currentPosition + offset; diff --git a/public/app/features/playlist/playlist_search.ts b/public/app/features/playlist/playlist_search.ts new file mode 100644 index 00000000000..cf16f4fbfa4 --- /dev/null +++ b/public/app/features/playlist/playlist_search.ts @@ -0,0 +1,95 @@ +/// + +import angular from 'angular'; +import config from 'app/core/config'; +import _ from 'lodash'; +import $ from 'jquery'; +import coreModule from '../../core/core_module'; + +export class PlaylistSearchCtrl { + query: any; + tagsMode: boolean; + + searchStarted: any; + + /** @ngInject */ + constructor(private $scope, private $location, private $timeout, private backendSrv, private contextSrv) { + this.query = { query: '', tag: [], starred: false }; + + $timeout(() => { + this.query.query = ''; + this.searchDashboards(); + }, 100); + } + + searchDashboards() { + this.tagsMode = false; + var prom: any = {}; + + /* + prom.promise = this.backendSrv.search(this.query).then((results) => { + console.log('playlist_search_ctrl: ', results); + return results; + }); + */ + prom.promise = this.backendSrv.search(this.query).then((result) => { + return { + dashboardResult: result, + tagResult: [] + }; + }); + + this.searchStarted(prom); + } + + queryHasNoFilters() { + return this.query.query === '' && this.query.starred === false && this.query.tag.length === 0; + }; + + filterByTag(tag, evt) { + this.query.tag.push(tag); + this.searchDashboards(); + if (evt) { + evt.stopPropagation(); + evt.preventDefault(); + } + }; + + getTags() { + var prom: any = {}; + prom.promise = this.backendSrv.get('/api/dashboards/tags').then((result) => { + console.log('getTags: result', result); + return { + dashboardResult: [], + tagResult: result + }; + }); + + this.searchStarted(prom); + /* + this.searchStarted(prom); + + return this.backendSrv.get('/api/dashboards/tags').then((results) => { + this.tagsMode = true; + + + console.log(results); + }); + */ + }; +} + +export function playlistSearchDirective() { + return { + restrict: 'E', + templateUrl: 'app/features/playlist/partials/playlist_search.html', + controller: PlaylistSearchCtrl, + bindToController: true, + controllerAs: 'ctrl', + scope: { + searchStarted: '&' + }, + }; +} + +coreModule.directive('playlistSearch', playlistSearchDirective); diff --git a/public/less/grafana.less b/public/less/grafana.less index 9cf3630db3e..d10409d55df 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -8,6 +8,7 @@ @import "bootstrap-tagsinput.less"; @import "tables_lists.less"; @import "search.less"; +@import "playlist.less"; @import "panel.less"; @import "forms.less"; @import "tightform.less"; diff --git a/public/less/playlist.less b/public/less/playlist.less new file mode 100644 index 00000000000..d120ca22548 --- /dev/null +++ b/public/less/playlist.less @@ -0,0 +1,99 @@ +.playlist-search-container { + //left: 59px; + //top: 39px; + margin: 15px; + z-index: 1000; + //position: relative; + position: relative; + width: 700px; + box-shadow: 0px 0px 55px 0px black; + //padding: 10px; + background-color: @grafanaPanelBackground; + //border: 1px solid @grafanaTargetFuncBackground; + + .label-tag { + margin-left: 6px; + font-size: 11px; + padding: 2px 6px; + } +} + +.playlist-search-switches { + position: relative; + top: -39px; + right: -268px; +} + +.playlist-search-field-wrapper { + //padding-bottom: 10px; + input { + width: 100%; + padding: 8px 8px; + height: 100%; + box-sizing: border-box; + } + button { + margin: 0 4px 0 0; + } + > span { + display: block; + overflow: hidden; + } +} + +.playlist-search-results-container { + min-height: 100px; + overflow: auto; + display: block; + line-height: 28px; + + .search-item:hover, .search-item.selected { + background-color: @grafanaListHighlight; + } + + .selected { + .search-result-tag { + opacity: 0.70; + color: white; + } + } + + .fa-star, .fa-star-o { + padding-left: 13px; + } + + .fa-star { + color: @orange; + } + + .search-result-link { + color: @grafanaListMainLinkColor; + .fa { + padding-right: 10px; + } + } + + .search-item { + display: block; + padding: 3px 10px; + white-space: nowrap; + background-color: @grafanaListBackground; + margin-bottom: 4px; + .search-result-icon:before { + content: "\f009"; + } + + &.search-item-dash-home .search-result-icon:before { + content: "\f015"; + } + } + + .search-result-tags { + float: right; + } + + .search-result-actions { + float: right; + padding-left: 20px; + } +} \ No newline at end of file From 600ffa727ed13276b411a42b5041d1a86f917446 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 28 Jan 2016 14:19:24 -0500 Subject: [PATCH 43/91] feat(panels): fixes --- public/app/features/panel/panel.ts | 8 +++++++- public/app/plugins/panel/unknown/module.html | 5 +++++ public/app/plugins/panel/unknown/module.ts | 4 +--- 3 files changed, 13 insertions(+), 4 deletions(-) create mode 100644 public/app/plugins/panel/unknown/module.html diff --git a/public/app/features/panel/panel.ts b/public/app/features/panel/panel.ts index 39d3a76005a..7312e18ccc7 100644 --- a/public/app/features/panel/panel.ts +++ b/public/app/features/panel/panel.ts @@ -5,6 +5,12 @@ import config from 'app/core/config'; import {PanelCtrl} from './panel_ctrl'; import {MetricsPanelCtrl} from './metrics_panel_ctrl'; +export class DefaultPanelCtrl extends PanelCtrl { + constructor($scope, $injector) { + super($scope, $injector); + } +} + class PanelDirective { template: string; templateUrl: string; @@ -15,7 +21,7 @@ class PanelDirective { getDirective() { if (!this.controller) { - this.controller = PanelCtrl; + this.controller = DefaultPanelCtrl; } return { diff --git a/public/app/plugins/panel/unknown/module.html b/public/app/plugins/panel/unknown/module.html new file mode 100644 index 00000000000..1e2e475428e --- /dev/null +++ b/public/app/plugins/panel/unknown/module.html @@ -0,0 +1,5 @@ +
        + Unknown panel type: {{ctrl.panel.type}} +
        - Unknown panel type: {{ctrl.panel.type}} - `; + templateUrl = 'public/app/plugins/panel/unknown/module.html'; } From 9914714eeb0c113f307f1f5073b635eb1b4f240b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 28 Jan 2016 14:37:24 -0500 Subject: [PATCH 44/91] removed npm frontend assets from repo, installed using npm install postinstall script --- package.json | 3 +- public/vendor/npm/angular2/animate.d.ts | 5 - public/vendor/npm/angular2/bootstrap.d.ts | 6 - .../vendor/npm/angular2/bootstrap_static.d.ts | 6 - .../bundles/angular2-all-testing.umd.dev.js | 39515 ---------------- .../angular2/bundles/angular2-all.umd.dev.js | 36742 -------------- .../npm/angular2/bundles/angular2-all.umd.js | 36741 -------------- .../angular2/bundles/angular2-all.umd.min.js | 18 - .../angular2/bundles/angular2-polyfills.js | 3284 -- .../bundles/angular2-polyfills.min.js | 1 - .../npm/angular2/bundles/angular2.dev.js | 25074 ---------- .../vendor/npm/angular2/bundles/angular2.js | 25074 ---------- .../npm/angular2/bundles/angular2.min.js | 19 - .../vendor/npm/angular2/bundles/http.dev.js | 1083 - public/vendor/npm/angular2/bundles/http.js | 1083 - .../vendor/npm/angular2/bundles/http.min.js | 1 - .../vendor/npm/angular2/bundles/router.dev.js | 2972 -- public/vendor/npm/angular2/bundles/router.js | 2972 -- .../vendor/npm/angular2/bundles/router.min.js | 3 - .../npm/angular2/bundles/testing.dev.js | 2721 -- .../npm/angular2/bundles/upgrade.dev.js | 774 - public/vendor/npm/angular2/bundles/upgrade.js | 774 - .../npm/angular2/bundles/upgrade.min.js | 1 - public/vendor/npm/angular2/common.d.ts | 4 - public/vendor/npm/angular2/compiler.d.ts | 8 - public/vendor/npm/angular2/core.d.ts | 24 - public/vendor/npm/angular2/http.d.ts | 248 - .../vendor/npm/angular2/instrumentation.d.ts | 1 - .../angular2/manual_typings/globals-es6.d.ts | 37 - .../npm/angular2/manual_typings/globals.d.ts | 7 - public/vendor/npm/angular2/router.d.ts | 75 - public/vendor/npm/angular2/testing.d.ts | 17 - .../vendor/npm/angular2/testing_internal.d.ts | 5 - .../angular-protractor.d.ts | 1684 - .../angular2/typings/es6-shim/es6-shim.d.ts | 668 - .../angular2/typings/hammerjs/hammerjs.d.ts | 331 - .../npm/angular2/typings/jasmine/jasmine.d.ts | 534 - .../npm/angular2/typings/node/node.d.ts | 2078 - .../selenium-webdriver.d.ts | 4864 -- public/vendor/npm/angular2/typings/tsd.d.ts | 7 - .../npm/angular2/typings/zone/zone.d.ts | 15 - public/vendor/npm/angular2/upgrade.d.ts | 6 - public/vendor/npm/es5-shim/es5-sham.js | 556 - public/vendor/npm/es5-shim/es5-sham.min.js | 7 - public/vendor/npm/es5-shim/es5-shim.js | 1831 - public/vendor/npm/es5-shim/es5-shim.min.js | 7 - public/vendor/npm/es6-promise/CHANGELOG.md | 29 - public/vendor/npm/es6-promise/LICENSE | 19 - public/vendor/npm/es6-promise/README.md | 61 - .../npm/es6-promise/dist/es6-promise.js | 967 - .../npm/es6-promise/dist/es6-promise.min.js | 9 - .../npm/es6-promise/lib/es6-promise.umd.js | 18 - .../es6-promise/lib/es6-promise/-internal.js | 252 - .../npm/es6-promise/lib/es6-promise/asap.js | 120 - .../es6-promise/lib/es6-promise/enumerator.js | 113 - .../es6-promise/lib/es6-promise/polyfill.js | 26 - .../es6-promise/lib/es6-promise/promise.js | 415 - .../lib/es6-promise/promise/all.js | 52 - .../lib/es6-promise/promise/race.js | 104 - .../lib/es6-promise/promise/reject.js | 46 - .../lib/es6-promise/promise/resolve.js | 48 - .../npm/es6-promise/lib/es6-promise/utils.js | 22 - public/vendor/npm/es6-promise/package.json | 94 - public/vendor/npm/es6-shim/Gruntfile.js | 98 - public/vendor/npm/es6-shim/es6-sham.js | 132 - public/vendor/npm/es6-shim/es6-sham.min.js | 11 - public/vendor/npm/es6-shim/es6-shim.js | 3360 -- public/vendor/npm/es6-shim/es6-shim.min.js | 12 - public/vendor/npm/reflect-metadata/Reflect.js | 962 - public/vendor/npm/reflect-metadata/Reflect.ts | 1489 - .../reflect-metadata/reflect-metadata.d.ts | 486 - public/vendor/npm/rxjs/Rx.d.ts | 22 - public/vendor/npm/rxjs/bundles/Rx.js | 10218 ---- public/vendor/npm/rxjs/bundles/Rx.min.js | 8 - public/vendor/npm/rxjs/bundles/Rx.umd.js | 8585 ---- public/vendor/npm/rxjs/bundles/Rx.umd.min.js | 321 - .../systemjs/dist/system-csp-production.js | 6 - .../dist/system-csp-production.src.js | 3916 -- .../npm/systemjs/dist/system-polyfills.js | 5 - .../npm/systemjs/dist/system-polyfills.src.js | 1345 - .../npm/systemjs/dist/system-register-only.js | 5 - .../systemjs/dist/system-register-only.src.js | 2028 - public/vendor/npm/systemjs/dist/system.js | 6 - public/vendor/npm/systemjs/dist/system.src.js | 4605 -- tasks/options/copy.js | 3 +- 85 files changed, 3 insertions(+), 231901 deletions(-) delete mode 100644 public/vendor/npm/angular2/animate.d.ts delete mode 100644 public/vendor/npm/angular2/bootstrap.d.ts delete mode 100644 public/vendor/npm/angular2/bootstrap_static.d.ts delete mode 100644 public/vendor/npm/angular2/bundles/angular2-all-testing.umd.dev.js delete mode 100644 public/vendor/npm/angular2/bundles/angular2-all.umd.dev.js delete mode 100644 public/vendor/npm/angular2/bundles/angular2-all.umd.js delete mode 100644 public/vendor/npm/angular2/bundles/angular2-all.umd.min.js delete mode 100644 public/vendor/npm/angular2/bundles/angular2-polyfills.js delete mode 100644 public/vendor/npm/angular2/bundles/angular2-polyfills.min.js delete mode 100644 public/vendor/npm/angular2/bundles/angular2.dev.js delete mode 100644 public/vendor/npm/angular2/bundles/angular2.js delete mode 100644 public/vendor/npm/angular2/bundles/angular2.min.js delete mode 100644 public/vendor/npm/angular2/bundles/http.dev.js delete mode 100644 public/vendor/npm/angular2/bundles/http.js delete mode 100644 public/vendor/npm/angular2/bundles/http.min.js delete mode 100644 public/vendor/npm/angular2/bundles/router.dev.js delete mode 100644 public/vendor/npm/angular2/bundles/router.js delete mode 100644 public/vendor/npm/angular2/bundles/router.min.js delete mode 100644 public/vendor/npm/angular2/bundles/testing.dev.js delete mode 100644 public/vendor/npm/angular2/bundles/upgrade.dev.js delete mode 100644 public/vendor/npm/angular2/bundles/upgrade.js delete mode 100644 public/vendor/npm/angular2/bundles/upgrade.min.js delete mode 100644 public/vendor/npm/angular2/common.d.ts delete mode 100644 public/vendor/npm/angular2/compiler.d.ts delete mode 100644 public/vendor/npm/angular2/core.d.ts delete mode 100644 public/vendor/npm/angular2/http.d.ts delete mode 100644 public/vendor/npm/angular2/instrumentation.d.ts delete mode 100644 public/vendor/npm/angular2/manual_typings/globals-es6.d.ts delete mode 100644 public/vendor/npm/angular2/manual_typings/globals.d.ts delete mode 100644 public/vendor/npm/angular2/router.d.ts delete mode 100644 public/vendor/npm/angular2/testing.d.ts delete mode 100644 public/vendor/npm/angular2/testing_internal.d.ts delete mode 100644 public/vendor/npm/angular2/typings/angular-protractor/angular-protractor.d.ts delete mode 100644 public/vendor/npm/angular2/typings/es6-shim/es6-shim.d.ts delete mode 100644 public/vendor/npm/angular2/typings/hammerjs/hammerjs.d.ts delete mode 100644 public/vendor/npm/angular2/typings/jasmine/jasmine.d.ts delete mode 100644 public/vendor/npm/angular2/typings/node/node.d.ts delete mode 100644 public/vendor/npm/angular2/typings/selenium-webdriver/selenium-webdriver.d.ts delete mode 100644 public/vendor/npm/angular2/typings/tsd.d.ts delete mode 100644 public/vendor/npm/angular2/typings/zone/zone.d.ts delete mode 100644 public/vendor/npm/angular2/upgrade.d.ts delete mode 100644 public/vendor/npm/es5-shim/es5-sham.js delete mode 100644 public/vendor/npm/es5-shim/es5-sham.min.js delete mode 100644 public/vendor/npm/es5-shim/es5-shim.js delete mode 100644 public/vendor/npm/es5-shim/es5-shim.min.js delete mode 100644 public/vendor/npm/es6-promise/CHANGELOG.md delete mode 100644 public/vendor/npm/es6-promise/LICENSE delete mode 100644 public/vendor/npm/es6-promise/README.md delete mode 100644 public/vendor/npm/es6-promise/dist/es6-promise.js delete mode 100644 public/vendor/npm/es6-promise/dist/es6-promise.min.js delete mode 100644 public/vendor/npm/es6-promise/lib/es6-promise.umd.js delete mode 100644 public/vendor/npm/es6-promise/lib/es6-promise/-internal.js delete mode 100644 public/vendor/npm/es6-promise/lib/es6-promise/asap.js delete mode 100644 public/vendor/npm/es6-promise/lib/es6-promise/enumerator.js delete mode 100644 public/vendor/npm/es6-promise/lib/es6-promise/polyfill.js delete mode 100644 public/vendor/npm/es6-promise/lib/es6-promise/promise.js delete mode 100644 public/vendor/npm/es6-promise/lib/es6-promise/promise/all.js delete mode 100644 public/vendor/npm/es6-promise/lib/es6-promise/promise/race.js delete mode 100644 public/vendor/npm/es6-promise/lib/es6-promise/promise/reject.js delete mode 100644 public/vendor/npm/es6-promise/lib/es6-promise/promise/resolve.js delete mode 100644 public/vendor/npm/es6-promise/lib/es6-promise/utils.js delete mode 100644 public/vendor/npm/es6-promise/package.json delete mode 100644 public/vendor/npm/es6-shim/Gruntfile.js delete mode 100644 public/vendor/npm/es6-shim/es6-sham.js delete mode 100644 public/vendor/npm/es6-shim/es6-sham.min.js delete mode 100644 public/vendor/npm/es6-shim/es6-shim.js delete mode 100644 public/vendor/npm/es6-shim/es6-shim.min.js delete mode 100644 public/vendor/npm/reflect-metadata/Reflect.js delete mode 100644 public/vendor/npm/reflect-metadata/Reflect.ts delete mode 100644 public/vendor/npm/reflect-metadata/reflect-metadata.d.ts delete mode 100644 public/vendor/npm/rxjs/Rx.d.ts delete mode 100644 public/vendor/npm/rxjs/bundles/Rx.js delete mode 100644 public/vendor/npm/rxjs/bundles/Rx.min.js delete mode 100644 public/vendor/npm/rxjs/bundles/Rx.umd.js delete mode 100644 public/vendor/npm/rxjs/bundles/Rx.umd.min.js delete mode 100644 public/vendor/npm/systemjs/dist/system-csp-production.js delete mode 100644 public/vendor/npm/systemjs/dist/system-csp-production.src.js delete mode 100644 public/vendor/npm/systemjs/dist/system-polyfills.js delete mode 100644 public/vendor/npm/systemjs/dist/system-polyfills.src.js delete mode 100644 public/vendor/npm/systemjs/dist/system-register-only.js delete mode 100644 public/vendor/npm/systemjs/dist/system-register-only.src.js delete mode 100644 public/vendor/npm/systemjs/dist/system.js delete mode 100644 public/vendor/npm/systemjs/dist/system.src.js diff --git a/package.json b/package.json index ef79f3367d8..03c5ab52bb4 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,8 @@ }, "scripts": { "test": "grunt test", - "coveralls": "grunt karma:coveralls && rm -rf ./coverage" + "coveralls": "grunt karma:coveralls && rm -rf ./coverage", + "postinstall": "grunt copy:node_modules" }, "license": "Apache-2.0", "dependencies": { diff --git a/public/vendor/npm/angular2/animate.d.ts b/public/vendor/npm/angular2/animate.d.ts deleted file mode 100644 index 7373303dc3d..00000000000 --- a/public/vendor/npm/angular2/animate.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { Animation } from './src/animate/animation'; -export { AnimationBuilder } from './src/animate/animation_builder'; -export { BrowserDetails } from './src/animate/browser_details'; -export { CssAnimationBuilder } from './src/animate/css_animation_builder'; -export { CssAnimationOptions } from './src/animate/css_animation_options'; diff --git a/public/vendor/npm/angular2/bootstrap.d.ts b/public/vendor/npm/angular2/bootstrap.d.ts deleted file mode 100644 index 1b3ff0175bc..00000000000 --- a/public/vendor/npm/angular2/bootstrap.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -/** - * See {@link bootstrap} for more information. - * @deprecated - */ -export { bootstrap } from 'angular2/platform/browser'; -export { AngularEntrypoint } from 'angular2/src/core/angular_entrypoint'; diff --git a/public/vendor/npm/angular2/bootstrap_static.d.ts b/public/vendor/npm/angular2/bootstrap_static.d.ts deleted file mode 100644 index 3be255a8ba1..00000000000 --- a/public/vendor/npm/angular2/bootstrap_static.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -/** - * See {@link bootstrap} for more information. - * @deprecated - */ -export { bootstrapStatic } from 'angular2/platform/browser_static'; -export { AngularEntrypoint } from 'angular2/src/core/angular_entrypoint'; diff --git a/public/vendor/npm/angular2/bundles/angular2-all-testing.umd.dev.js b/public/vendor/npm/angular2/bundles/angular2-all-testing.umd.dev.js deleted file mode 100644 index c73992360ff..00000000000 --- a/public/vendor/npm/angular2/bundles/angular2-all-testing.umd.dev.js +++ /dev/null @@ -1,39515 +0,0 @@ -(function webpackUniversalModuleDefinition(root, factory) { - if(typeof exports === 'object' && typeof module === 'object') - module.exports = factory(require("Rx"), require("rxjs/observable/fromPromise"), require("rxjs/operator/toPromise"), require("rxjs/subject/ReplaySubject"), require("rxjs/operator/take")); - else if(typeof define === 'function' && define.amd) - define(["Rx", "rxjs/observable/fromPromise", "rxjs/operator/toPromise", "rxjs/subject/ReplaySubject", "rxjs/operator/take"], factory); - else if(typeof exports === 'object') - exports["ng"] = factory(require("Rx"), require("rxjs/observable/fromPromise"), require("rxjs/operator/toPromise"), require("rxjs/subject/ReplaySubject"), require("rxjs/operator/take")); - else - root["ng"] = factory(root["Rx"], root["Rx"]["Observable"], root["Rx"]["Observable"]["prototype"], root["Rx"], root["Rx"]["Observable"]["prototype"]); -})(this, function(__WEBPACK_EXTERNAL_MODULE_62__, __WEBPACK_EXTERNAL_MODULE_63__, __WEBPACK_EXTERNAL_MODULE_64__, __WEBPACK_EXTERNAL_MODULE_279__, __WEBPACK_EXTERNAL_MODULE_280__) { -return /******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) -/******/ return installedModules[moduleId].exports; -/******/ -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ exports: {}, -/******/ id: moduleId, -/******/ loaded: false -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.loaded = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ function(module, exports, __webpack_require__) { - - module.exports = __webpack_require__(1); - - -/***/ }, -/* 1 */ -/***/ function(module, exports, __webpack_require__) { - - // this bundle is almost identical to the angular2.umd.js - // the only difference being "testing" export - exports.core = __webpack_require__(2); - exports.common = __webpack_require__(104); - exports.compiler = __webpack_require__(147); - exports.platform = { - browser: __webpack_require__(179), - common_dom: __webpack_require__(203) - }; - exports.http = __webpack_require__(209); - exports.router = __webpack_require__(224); - exports.router_link_dsl = __webpack_require__(248); - exports.instrumentation = __webpack_require__(250); - exports.upgrade = __webpack_require__(251); - // this is the only difference as compared to the angular2-all.umd.js bundle - exports.testing = __webpack_require__(259); - exports.http.testing = __webpack_require__(277); - exports.router.testing = __webpack_require__(281); - - -/***/ }, -/* 2 */ -/***/ function(module, exports, __webpack_require__) { - - function __export(m) { - for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; - } - /** - * @module - * @description - * Starting point to import all public core APIs. - */ - __export(__webpack_require__(3)); - __export(__webpack_require__(57)); - __export(__webpack_require__(58)); - __export(__webpack_require__(6)); - __export(__webpack_require__(59)); - var lang_1 = __webpack_require__(5); - exports.enableProdMode = lang_1.enableProdMode; - var application_ref_1 = __webpack_require__(65); - exports.platform = application_ref_1.platform; - exports.createNgZone = application_ref_1.createNgZone; - exports.PlatformRef = application_ref_1.PlatformRef; - exports.ApplicationRef = application_ref_1.ApplicationRef; - var application_tokens_1 = __webpack_require__(67); - exports.APP_ID = application_tokens_1.APP_ID; - exports.APP_COMPONENT = application_tokens_1.APP_COMPONENT; - exports.APP_INITIALIZER = application_tokens_1.APP_INITIALIZER; - exports.PACKAGE_ROOT_URL = application_tokens_1.PACKAGE_ROOT_URL; - exports.PLATFORM_INITIALIZER = application_tokens_1.PLATFORM_INITIALIZER; - __export(__webpack_require__(98)); - __export(__webpack_require__(99)); - __export(__webpack_require__(100)); - var debug_element_1 = __webpack_require__(101); - exports.DebugElement = debug_element_1.DebugElement; - exports.Scope = debug_element_1.Scope; - exports.inspectElement = debug_element_1.inspectElement; - exports.asNativeElements = debug_element_1.asNativeElements; - __export(__webpack_require__(68)); - __export(__webpack_require__(24)); - __export(__webpack_require__(95)); - __export(__webpack_require__(102)); - __export(__webpack_require__(103)); - __export(__webpack_require__(16)); - - -/***/ }, -/* 3 */ -/***/ function(module, exports, __webpack_require__) { - - /** - * This indirection is needed to free up Component, etc symbols in the public API - * to be used by the decorator versions of these annotations. - */ - var di_1 = __webpack_require__(4); - exports.QueryMetadata = di_1.QueryMetadata; - exports.ContentChildrenMetadata = di_1.ContentChildrenMetadata; - exports.ContentChildMetadata = di_1.ContentChildMetadata; - exports.ViewChildrenMetadata = di_1.ViewChildrenMetadata; - exports.ViewQueryMetadata = di_1.ViewQueryMetadata; - exports.ViewChildMetadata = di_1.ViewChildMetadata; - exports.AttributeMetadata = di_1.AttributeMetadata; - var directives_1 = __webpack_require__(23); - exports.ComponentMetadata = directives_1.ComponentMetadata; - exports.DirectiveMetadata = directives_1.DirectiveMetadata; - exports.PipeMetadata = directives_1.PipeMetadata; - exports.InputMetadata = directives_1.InputMetadata; - exports.OutputMetadata = directives_1.OutputMetadata; - exports.HostBindingMetadata = directives_1.HostBindingMetadata; - exports.HostListenerMetadata = directives_1.HostListenerMetadata; - var view_1 = __webpack_require__(56); - exports.ViewMetadata = view_1.ViewMetadata; - exports.ViewEncapsulation = view_1.ViewEncapsulation; - var di_2 = __webpack_require__(4); - var directives_2 = __webpack_require__(23); - var view_2 = __webpack_require__(56); - var decorators_1 = __webpack_require__(9); - // TODO(alexeagle): remove the duplication of this doc. It is copied from ComponentMetadata. - /** - * Declare reusable UI building blocks for an application. - * - * Each Angular component requires a single `@Component` and at least one `@View` annotation. The - * `@Component` - * annotation specifies when a component is instantiated, and which properties and hostListeners it - * binds to. - * - * When a component is instantiated, Angular - * - creates a shadow DOM for the component. - * - loads the selected template into the shadow DOM. - * - creates all the injectable objects configured with `providers` and `viewProviders`. - * - * All template expressions and statements are then evaluated against the component instance. - * - * For details on the `@View` annotation, see {@link ViewMetadata}. - * - * ## Lifecycle hooks - * - * When the component class implements some {@link angular2/lifecycle_hooks} the callbacks are - * called by the change detection at defined points in time during the life of the component. - * - * ### Example - * - * {@example core/ts/metadata/metadata.ts region='component'} - */ - exports.Component = decorators_1.makeDecorator(directives_2.ComponentMetadata, function (fn) { return fn.View = exports.View; }); - // TODO(alexeagle): remove the duplication of this doc. It is copied from DirectiveMetadata. - /** - * Directives allow you to attach behavior to elements in the DOM. - * - * {@link DirectiveMetadata}s with an embedded view are called {@link ComponentMetadata}s. - * - * A directive consists of a single directive annotation and a controller class. When the - * directive's `selector` matches - * elements in the DOM, the following steps occur: - * - * 1. For each directive, the `ElementInjector` attempts to resolve the directive's constructor - * arguments. - * 2. Angular instantiates directives for each matched element using `ElementInjector` in a - * depth-first order, - * as declared in the HTML. - * - * ## Understanding How Injection Works - * - * There are three stages of injection resolution. - * - *Pre-existing Injectors*: - * - The terminal {@link Injector} cannot resolve dependencies. It either throws an error or, if - * the dependency was - * specified as `@Optional`, returns `null`. - * - The platform injector resolves browser singleton resources, such as: cookies, title, - * location, and others. - * - *Component Injectors*: Each component instance has its own {@link Injector}, and they follow - * the same parent-child hierarchy - * as the component instances in the DOM. - * - *Element Injectors*: Each component instance has a Shadow DOM. Within the Shadow DOM each - * element has an `ElementInjector` - * which follow the same parent-child hierarchy as the DOM elements themselves. - * - * When a template is instantiated, it also must instantiate the corresponding directives in a - * depth-first order. The - * current `ElementInjector` resolves the constructor dependencies for each directive. - * - * Angular then resolves dependencies as follows, according to the order in which they appear in the - * {@link ViewMetadata}: - * - * 1. Dependencies on the current element - * 2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary - * 3. Dependencies on component injectors and their parents until it encounters the root component - * 4. Dependencies on pre-existing injectors - * - * - * The `ElementInjector` can inject other directives, element-specific special objects, or it can - * delegate to the parent - * injector. - * - * To inject other directives, declare the constructor parameter as: - * - `directive:DirectiveType`: a directive on the current element only - * - `@Host() directive:DirectiveType`: any directive that matches the type between the current - * element and the - * Shadow DOM root. - * - `@Query(DirectiveType) query:QueryList`: A live collection of direct child - * directives. - * - `@QueryDescendants(DirectiveType) query:QueryList`: A live collection of any - * child directives. - * - * To inject element-specific special objects, declare the constructor parameter as: - * - `element: ElementRef` to obtain a reference to logical element in the view. - * - `viewContainer: ViewContainerRef` to control child template instantiation, for - * {@link DirectiveMetadata} directives only - * - `bindingPropagation: BindingPropagation` to control change detection in a more granular way. - * - * ### Example - * - * The following example demonstrates how dependency injection resolves constructor arguments in - * practice. - * - * - * Assume this HTML template: - * - * ``` - *
        - *
        - *
        - *
        - *
        - *
        - *
        - *
        - *
        - *
        - * ``` - * - * With the following `dependency` decorator and `SomeService` injectable class. - * - * ``` - * @Injectable() - * class SomeService { - * } - * - * @Directive({ - * selector: '[dependency]', - * inputs: [ - * 'id: dependency' - * ] - * }) - * class Dependency { - * id:string; - * } - * ``` - * - * Let's step through the different ways in which `MyDirective` could be declared... - * - * - * ### No injection - * - * Here the constructor is declared with no arguments, therefore nothing is injected into - * `MyDirective`. - * - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor() { - * } - * } - * ``` - * - * This directive would be instantiated with no dependencies. - * - * - * ### Component-level injection - * - * Directives can inject any injectable instance from the closest component injector or any of its - * parents. - * - * Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type - * from the parent - * component's injector. - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(someService: SomeService) { - * } - * } - * ``` - * - * This directive would be instantiated with a dependency on `SomeService`. - * - * - * ### Injecting a directive from the current element - * - * Directives can inject other directives declared on the current element. - * - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(dependency: Dependency) { - * expect(dependency.id).toEqual(3); - * } - * } - * ``` - * This directive would be instantiated with `Dependency` declared at the same element, in this case - * `dependency="3"`. - * - * ### Injecting a directive from any ancestor elements - * - * Directives can inject other directives declared on any ancestor element (in the current Shadow - * DOM), i.e. on the current element, the - * parent element, or its parents. - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(@Host() dependency: Dependency) { - * expect(dependency.id).toEqual(2); - * } - * } - * ``` - * - * `@Host` checks the current element, the parent, as well as its parents recursively. If - * `dependency="2"` didn't - * exist on the direct parent, this injection would - * have returned - * `dependency="1"`. - * - * - * ### Injecting a live collection of direct child directives - * - * - * A directive can also query for other child directives. Since parent directives are instantiated - * before child directives, a directive can't simply inject the list of child directives. Instead, - * the directive injects a {@link QueryList}, which updates its contents as children are added, - * removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ngFor`, an - * `ngIf`, or an `ngSwitch`. - * - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(@Query(Dependency) dependencies:QueryList) { - * } - * } - * ``` - * - * This directive would be instantiated with a {@link QueryList} which contains `Dependency` 4 and - * 6. Here, `Dependency` 5 would not be included, because it is not a direct child. - * - * ### Injecting a live collection of descendant directives - * - * By passing the descendant flag to `@Query` above, we can include the children of the child - * elements. - * - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(@Query(Dependency, {descendants: true}) dependencies:QueryList) { - * } - * } - * ``` - * - * This directive would be instantiated with a Query which would contain `Dependency` 4, 5 and 6. - * - * ### Optional injection - * - * The normal behavior of directives is to return an error when a specified dependency cannot be - * resolved. If you - * would like to inject `null` on unresolved dependency instead, you can annotate that dependency - * with `@Optional()`. - * This explicitly permits the author of a template to treat some of the surrounding directives as - * optional. - * - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(@Optional() dependency:Dependency) { - * } - * } - * ``` - * - * This directive would be instantiated with a `Dependency` directive found on the current element. - * If none can be - * found, the injector supplies `null` instead of throwing an error. - * - * ### Example - * - * Here we use a decorator directive to simply define basic tool-tip behavior. - * - * ``` - * @Directive({ - * selector: '[tooltip]', - * inputs: [ - * 'text: tooltip' - * ], - * host: { - * '(mouseenter)': 'onMouseEnter()', - * '(mouseleave)': 'onMouseLeave()' - * } - * }) - * class Tooltip{ - * text:string; - * overlay:Overlay; // NOT YET IMPLEMENTED - * overlayManager:OverlayManager; // NOT YET IMPLEMENTED - * - * constructor(overlayManager:OverlayManager) { - * this.overlay = overlay; - * } - * - * onMouseEnter() { - * // exact signature to be determined - * this.overlay = this.overlayManager.open(text, ...); - * } - * - * onMouseLeave() { - * this.overlay.close(); - * this.overlay = null; - * } - * } - * ``` - * In our HTML template, we can then add this behavior to a `
        ` or any other element with the - * `tooltip` selector, - * like so: - * - * ``` - *
        - * ``` - * - * Directives can also control the instantiation, destruction, and positioning of inline template - * elements: - * - * A directive uses a {@link ViewContainerRef} to instantiate, insert, move, and destroy views at - * runtime. - * The {@link ViewContainerRef} is created as a result of `