From 6ae94dda87dbebf8316a89b6adce845c1f632dd5 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Tue, 12 Dec 2017 11:21:32 +0100 Subject: [PATCH 1/6] redesign dashlinks --- .../features/dashboard/settings/settings.html | 2 +- public/app/features/dashlinks/editor.html | 198 ++++++++++++------ public/app/features/dashlinks/editor.ts | 82 ++++++++ public/app/features/dashlinks/module.ts | 52 +---- 4 files changed, 213 insertions(+), 121 deletions(-) create mode 100644 public/app/features/dashlinks/editor.ts diff --git a/public/app/features/dashboard/settings/settings.html b/public/app/features/dashboard/settings/settings.html index 382f2059fea..c21d8ce4375 100644 --- a/public/app/features/dashboard/settings/settings.html +++ b/public/app/features/dashboard/settings/settings.html @@ -64,5 +64,5 @@
- +
diff --git a/public/app/features/dashlinks/editor.html b/public/app/features/dashlinks/editor.html index 155aa78a6fe..b7a59f8fbfc 100644 --- a/public/app/features/dashlinks/editor.html +++ b/public/app/features/dashlinks/editor.html @@ -1,77 +1,137 @@

- Dashboard Links + Dashboard Links + > New + > Edit

-
-
-
-
- Type -
- -
-
-
- With tags - -
- -
- Title - -
-
-
-
  • Url
    • - -
    -
    - Title - -
    -
    - Tooltip - -
    +
    +
    +
    +
    + There are no dashboard links added yet +
    + + + Add Dashboard Link + +
    +
    What are Dashboard Links?
    +

    + Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons on all + graph panels. When you hover over an annotation icon you can get event text & tags for the event. You can add + annotation events directly from grafana by holding CTRL or CMD + click on graph (or drag region). These will be + stored in Grafana's annotation database. +

    + Checkout the + Annotations documentation for more information. +
    +
    +
    -
    - Icon -
    - -
    -
    -
    -
    - -
    -
    -
    - Include -
    -
    -
    - - - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    +
    +
    +
    + + New +
    + + + + + + + + + + + + + + + + + +
    TypeTags
    + + {{link.type}} + + {{link.tags}} + + + + + + + + +
    +
    - + +
    +
    +
    +
    + Type +
    + +
    +
    + +
    + With tags + +
    + + +
    + Title + +
    +
    +
    +
  • Url
    • + +
    + +
    + Title + +
    + +
    + Tooltip + +
    + +
    + Icon +
    + +
    +
    +
    +
    + +
    +
    +
    + Include +
    +
    +
    + + + +
    +
    +
    + + +
    diff --git a/public/app/features/dashlinks/editor.ts b/public/app/features/dashlinks/editor.ts new file mode 100644 index 00000000000..6b27d38870e --- /dev/null +++ b/public/app/features/dashlinks/editor.ts @@ -0,0 +1,82 @@ +import angular from 'angular'; +import _ from 'lodash'; +import appEvents from 'app/core/app_events'; + +export var iconMap = { + "external link": "fa-external-link", + "dashboard": "fa-th-large", + "question": "fa-question", + "info": "fa-info", + "bolt": "fa-bolt", + "doc": "fa-file-text-o", + "cloud": "fa-cloud", +}; + +export class DashLinkEditorCtrl { + dashboard: any; + iconMap: any; + mode: any; + link: any; + currentLink: any; + + /** @ngInject */ + constructor($scope, $rootScope) { + this.iconMap = iconMap; + this.dashboard.links = this.dashboard.links || []; + this.mode = 'list'; + } + + backToList() { + this.mode = 'list'; + } + + addLinkMode() { + this.mode = 'new'; + } + + editLinkMode(index) { + this.currentLink = index; + this.mode = 'edit'; + } + + addLink(type, tags) { + this.dashboard.links.push({ type: type, tags: tags, icon: 'external link' }); + this.dashboard.updateSubmenuVisibility(); + this.updated(); + this.mode = 'list'; + } + + editLink(index) { + + } + + moveLink(index, dir) { + _.move(this.dashboard.links, index, index+dir); + this.updated(); + } + + updated() { + appEvents.emit('dash-links-updated'); + } + + deleteLink(index) { + this.dashboard.links.splice(index, 1); + this.dashboard.updateSubmenuVisibility(); + this.updated(); + } +} + +function dashLinksEditor() { + return { + restrict: 'E', + controller: DashLinkEditorCtrl, + templateUrl: 'public/app/features/dashlinks/editor.html', + bindToController: true, + controllerAs: 'ctrl', + scope: { + dashboard: "=" + } + }; +} + +angular.module('grafana.directives').directive('dashLinksEditor', dashLinksEditor); diff --git a/public/app/features/dashlinks/module.ts b/public/app/features/dashlinks/module.ts index 9f3b4055cee..371087c4069 100644 --- a/public/app/features/dashlinks/module.ts +++ b/public/app/features/dashlinks/module.ts @@ -1,25 +1,6 @@ import angular from 'angular'; import _ from 'lodash'; - -var iconMap = { - "external link": "fa-external-link", - "dashboard": "fa-th-large", - "question": "fa-question", - "info": "fa-info", - "bolt": "fa-bolt", - "doc": "fa-file-text-o", - "cloud": "fa-cloud", -}; - -function dashLinksEditor() { - return { - restrict: 'E', - controller: 'DashLinkEditorCtrl', - templateUrl: 'public/app/features/dashlinks/editor.html', - link: function() { - } - }; -} +import {iconMap} from './editor'; function dashLinksContainer() { return { @@ -162,37 +143,6 @@ export class DashLinksContainerCtrl { } } -export class DashLinkEditorCtrl { - /** @ngInject */ - constructor($scope, $rootScope) { - $scope.iconMap = iconMap; - $scope.dashboard.links = $scope.dashboard.links || []; - - $scope.addLink = function() { - $scope.dashboard.links.push({ type: 'dashboards', icon: 'external link' }); - $scope.dashboard.updateSubmenuVisibility(); - $scope.updated(); - }; - - $scope.moveLink = function(index, dir) { - _.move($scope.dashboard.links, index, index+dir); - $scope.updated(); - }; - - $scope.updated = function() { - $rootScope.appEvent('dash-links-updated'); - }; - - $scope.deleteLink = function(index) { - $scope.dashboard.links.splice(index, 1); - $scope.dashboard.updateSubmenuVisibility(); - $scope.updated(); - }; - } -} - -angular.module('grafana.directives').directive('dashLinksEditor', dashLinksEditor); angular.module('grafana.directives').directive('dashLinksContainer', dashLinksContainer); angular.module('grafana.directives').directive('dashLink', dashLink); angular.module('grafana.directives').controller("DashLinksContainerCtrl", DashLinksContainerCtrl); -angular.module('grafana.directives').controller('DashLinkEditorCtrl', DashLinkEditorCtrl); From a69c260173178a08bb360f1e35d78aa1bbe25118 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Tue, 12 Dec 2017 13:06:32 +0100 Subject: [PATCH 2/6] redesigning links editor --- public/app/features/dashlinks/editor.html | 6 +----- public/app/features/dashlinks/editor.ts | 8 ++++---- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/public/app/features/dashlinks/editor.html b/public/app/features/dashlinks/editor.html index b7a59f8fbfc..471055bc8fc 100644 --- a/public/app/features/dashlinks/editor.html +++ b/public/app/features/dashlinks/editor.html @@ -40,7 +40,6 @@ Type - Tags @@ -50,9 +49,6 @@ {{link.type}} - - {{link.tags}} - @@ -130,7 +126,7 @@
    - diff --git a/public/app/features/dashlinks/editor.ts b/public/app/features/dashlinks/editor.ts index 6b27d38870e..11e69933800 100644 --- a/public/app/features/dashlinks/editor.ts +++ b/public/app/features/dashlinks/editor.ts @@ -39,9 +39,9 @@ export class DashLinkEditorCtrl { this.mode = 'edit'; } - addLink(type, tags) { - this.dashboard.links.push({ type: type, tags: tags, icon: 'external link' }); - this.dashboard.updateSubmenuVisibility(); + addLink(type) { + this.dashboard.links.push({ type: type, icon: 'external link' }); + //this.dashboard.updateSubmenuVisibility(); this.updated(); this.mode = 'list'; } @@ -61,7 +61,7 @@ export class DashLinkEditorCtrl { deleteLink(index) { this.dashboard.links.splice(index, 1); - this.dashboard.updateSubmenuVisibility(); + //this.dashboard.updateSubmenuVisibility(); this.updated(); } } From 9b9ac45295b7c14cf45ecc7e5ffe035c3fa2b0e7 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Tue, 12 Dec 2017 14:05:24 +0100 Subject: [PATCH 3/6] redesigning links editor --- public/app/features/dashlinks/editor.html | 10 ++++------ public/app/features/dashlinks/editor.ts | 22 +++++++++------------- 2 files changed, 13 insertions(+), 19 deletions(-) diff --git a/public/app/features/dashlinks/editor.html b/public/app/features/dashlinks/editor.html index 471055bc8fc..2529f32f0b9 100644 --- a/public/app/features/dashlinks/editor.html +++ b/public/app/features/dashlinks/editor.html @@ -12,7 +12,7 @@
    There are no dashboard links added yet
    - + Add Dashboard Link @@ -33,7 +33,7 @@
    - + New
    @@ -126,8 +126,6 @@ - - + diff --git a/public/app/features/dashlinks/editor.ts b/public/app/features/dashlinks/editor.ts index 11e69933800..56bab85a318 100644 --- a/public/app/features/dashlinks/editor.ts +++ b/public/app/features/dashlinks/editor.ts @@ -30,26 +30,22 @@ export class DashLinkEditorCtrl { this.mode = 'list'; } - addLinkMode() { - this.mode = 'new'; - } - - editLinkMode(index) { - this.currentLink = index; - this.mode = 'edit'; - } - - addLink(type) { - this.dashboard.links.push({ type: type, icon: 'external link' }); - //this.dashboard.updateSubmenuVisibility(); + addLink() { + this.dashboard.links.push({ type: 'dashboard', icon: 'external link' }); + this.dashboard.updateSubmenuVisibility(); this.updated(); - this.mode = 'list'; + this.mode = 'new'; } editLink(index) { } + saveLink() { + this.updated(); + this.backToList(); + } + moveLink(index, dir) { _.move(this.dashboard.links, index, index+dir); this.updated(); From f28a43456664be0d24ab0ecf3f76b5d37e040601 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Wed, 13 Dec 2017 09:44:51 +0100 Subject: [PATCH 4/6] updated dashlink editor, now has list --- public/app/features/dashlinks/editor.html | 71 ++++++----- public/app/features/dashlinks/editor.ts | 65 +++++----- public/app/features/dashlinks/module.ts | 144 +++++++++++++--------- 3 files changed, 157 insertions(+), 123 deletions(-) diff --git a/public/app/features/dashlinks/editor.html b/public/app/features/dashlinks/editor.html index 2529f32f0b9..86c045532e3 100644 --- a/public/app/features/dashlinks/editor.html +++ b/public/app/features/dashlinks/editor.html @@ -4,15 +4,13 @@ > Edit - -
    There are no dashboard links added yet
    - + Add Dashboard Link @@ -33,22 +31,34 @@
    + - + @@ -66,66 +76,65 @@ -
    -
    -
    +
    +
    Type
    - +
    -
    +
    With tags - +
    - -
    + +
    Title - +
    -
    +
  • Url
    • - +
    Title - +
    Tooltip - +
    Icon
    - +
    -
    +
    +
    Include
    -
    - Include -
    -
    -
    - - - + + +
    - + +
    diff --git a/public/app/features/dashlinks/editor.ts b/public/app/features/dashlinks/editor.ts index 56bab85a318..19969d7c7fc 100644 --- a/public/app/features/dashlinks/editor.ts +++ b/public/app/features/dashlinks/editor.ts @@ -1,15 +1,15 @@ -import angular from 'angular'; -import _ from 'lodash'; -import appEvents from 'app/core/app_events'; +import angular from "angular"; +import _ from "lodash"; +import appEvents from "app/core/app_events"; export var iconMap = { "external link": "fa-external-link", - "dashboard": "fa-th-large", - "question": "fa-question", - "info": "fa-info", - "bolt": "fa-bolt", - "doc": "fa-file-text-o", - "cloud": "fa-cloud", + dashboard: "fa-th-large", + question: "fa-question", + info: "fa-info", + bolt: "fa-bolt", + doc: "fa-file-text-o", + cloud: "fa-cloud" }; export class DashLinkEditorCtrl { @@ -17,62 +17,65 @@ export class DashLinkEditorCtrl { iconMap: any; mode: any; link: any; - currentLink: any; /** @ngInject */ constructor($scope, $rootScope) { this.iconMap = iconMap; this.dashboard.links = this.dashboard.links || []; - this.mode = 'list'; + this.mode = "list"; + + $scope.$on("$destroy", () => { + $rootScope.appEvent("dash-links-updated"); + }); } backToList() { - this.mode = 'list'; + this.mode = "list"; + } + + setupNew() { + this.mode = "new"; + this.link = { type: "dashboards", icon: "external link" }; } addLink() { - this.dashboard.links.push({ type: 'dashboard', icon: 'external link' }); - this.dashboard.updateSubmenuVisibility(); - this.updated(); - this.mode = 'new'; + this.dashboard.links.push(this.link); + this.mode = "list"; } - editLink(index) { - + editLink(link) { + this.link = link; + this.mode = "edit"; + console.log(this.link); } saveLink() { - this.updated(); this.backToList(); } moveLink(index, dir) { - _.move(this.dashboard.links, index, index+dir); - this.updated(); - } - - updated() { - appEvents.emit('dash-links-updated'); + _.move(this.dashboard.links, index, index + dir); } deleteLink(index) { this.dashboard.links.splice(index, 1); - //this.dashboard.updateSubmenuVisibility(); - this.updated(); + this.dashboard.updateSubmenuVisibility(); } } function dashLinksEditor() { return { - restrict: 'E', + restrict: "E", controller: DashLinkEditorCtrl, - templateUrl: 'public/app/features/dashlinks/editor.html', + templateUrl: "public/app/features/dashlinks/editor.html", bindToController: true, - controllerAs: 'ctrl', + controllerAs: "ctrl", scope: { dashboard: "=" } }; } -angular.module('grafana.directives').directive('dashLinksEditor', dashLinksEditor); +angular + .module("grafana.directives") + .directive("dashLinksEditor", dashLinksEditor); diff --git a/public/app/features/dashlinks/module.ts b/public/app/features/dashlinks/module.ts index 371087c4069..09ff6d76c7e 100644 --- a/public/app/features/dashlinks/module.ts +++ b/public/app/features/dashlinks/module.ts @@ -1,44 +1,50 @@ -import angular from 'angular'; -import _ from 'lodash'; -import {iconMap} from './editor'; +import angular from "angular"; +import _ from "lodash"; +import { iconMap } from "./editor"; function dashLinksContainer() { return { scope: { links: "=" }, - restrict: 'E', - controller: 'DashLinksContainerCtrl', - template: '', - link: function() { } + restrict: "E", + controller: "DashLinksContainerCtrl", + template: + '', + link: function() {} }; } /** @ngInject */ function dashLink($compile, linkSrv) { return { - restrict: 'E', + restrict: "E", link: function(scope, elem) { var link = scope.link; - var template = '
    ' + + var template = + '
    ' + '' + - ' '; + (link.asDropdown + ? ' ng-click="fillDropdown(link)" data-toggle="dropdown"' + : "") + + ">" + + " "; if (link.asDropdown) { - template += '"; } - template += '
    '; + template += "
    "; elem.html(template); $compile(elem.contents())(scope); - var anchor = elem.find('a'); - var icon = elem.find('i'); - var span = elem.find('span'); + var anchor = elem.find("a"); + var icon = elem.find("i"); + var span = elem.find("span"); function update() { var linkInfo = linkSrv.getAnchorInfo(link); @@ -47,17 +53,19 @@ function dashLink($compile, linkSrv) { } // tooltip - elem.find('a').tooltip({ title: scope.link.tooltip, html: true, container: 'body' }); - icon.attr('class', 'fa fa-fw ' + scope.link.icon); - anchor.attr('target', scope.link.target); + elem + .find("a") + .tooltip({ title: scope.link.tooltip, html: true, container: "body" }); + icon.attr("class", "fa fa-fw " + scope.link.icon); + anchor.attr("target", scope.link.target); // fix for menus on the far right if (link.asDropdown && scope.$last) { - elem.find('.dropdown-menu').addClass('pull-right'); + elem.find(".dropdown-menu").addClass("pull-right"); } update(); - scope.$on('refresh', update); + scope.$on("refresh", update); } }; } @@ -68,36 +76,40 @@ export class DashLinksContainerCtrl { var currentDashId = dashboardSrv.getCurrent().id; function buildLinks(linkDef) { - if (linkDef.type === 'dashboards') { + if (linkDef.type === "dashboards") { if (!linkDef.tags) { - console.log('Dashboard link missing tag'); + console.log("Dashboard link missing tag"); return $q.when([]); } if (linkDef.asDropdown) { - return $q.when([{ - title: linkDef.title, - tags: linkDef.tags, - keepTime: linkDef.keepTime, - includeVars: linkDef.includeVars, - icon: "fa fa-bars", - asDropdown: true - }]); + return $q.when([ + { + title: linkDef.title, + tags: linkDef.tags, + keepTime: linkDef.keepTime, + includeVars: linkDef.includeVars, + icon: "fa fa-bars", + asDropdown: true + } + ]); } return $scope.searchDashboards(linkDef, 7); } - if (linkDef.type === 'link') { - return $q.when([{ - url: linkDef.url, - title: linkDef.title, - icon: iconMap[linkDef.icon], - tooltip: linkDef.tooltip, - target: linkDef.targetBlank ? "_blank" : "_self", - keepTime: linkDef.keepTime, - includeVars: linkDef.includeVars, - }]); + if (linkDef.type === "link") { + return $q.when([ + { + url: linkDef.url, + title: linkDef.title, + icon: iconMap[linkDef.icon], + tooltip: linkDef.tooltip, + target: linkDef.targetBlank ? "_blank" : "_self", + keepTime: linkDef.keepTime, + includeVars: linkDef.includeVars + } + ]); } return $q.when([]); @@ -112,21 +124,27 @@ export class DashLinksContainerCtrl { } $scope.searchDashboards = function(link, limit) { - return backendSrv.search({tag: link.tags, limit: limit}).then(function(results) { - return _.reduce(results, function(memo, dash) { - // do not add current dashboard - if (dash.id !== currentDashId) { - memo.push({ - title: dash.title, - url: 'dashboard/' + dash.uri, - icon: 'fa fa-th-large', - keepTime: link.keepTime, - includeVars: link.includeVars - }); - } - return memo; - }, []); - }); + return backendSrv + .search({ tag: link.tags, limit: limit }) + .then(function(results) { + return _.reduce( + results, + function(memo, dash) { + // do not add current dashboard + if (dash.id !== currentDashId) { + memo.push({ + title: dash.title, + url: "dashboard/" + dash.uri, + icon: "fa fa-th-large", + keepTime: link.keepTime, + includeVars: link.includeVars + }); + } + return memo; + }, + [] + ); + }); }; $scope.fillDropdown = function(link) { @@ -139,10 +157,14 @@ export class DashLinksContainerCtrl { }; updateDashLinks(); - $rootScope.onAppEvent('dash-links-updated', updateDashLinks, $scope); + $rootScope.onAppEvent("dash-links-updated", updateDashLinks, $scope); } } -angular.module('grafana.directives').directive('dashLinksContainer', dashLinksContainer); -angular.module('grafana.directives').directive('dashLink', dashLink); -angular.module('grafana.directives').controller("DashLinksContainerCtrl", DashLinksContainerCtrl); +angular + .module("grafana.directives") + .directive("dashLinksContainer", dashLinksContainer); +angular.module("grafana.directives").directive("dashLink", dashLink); +angular + .module("grafana.directives") + .controller("DashLinksContainerCtrl", DashLinksContainerCtrl); From afc89489059d86b51414266ddc6929c15f323de9 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Wed, 13 Dec 2017 09:46:55 +0100 Subject: [PATCH 5/6] removed unused declaration --- public/app/features/dashlinks/editor.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/public/app/features/dashlinks/editor.ts b/public/app/features/dashlinks/editor.ts index 19969d7c7fc..595dca8c9ba 100644 --- a/public/app/features/dashlinks/editor.ts +++ b/public/app/features/dashlinks/editor.ts @@ -1,6 +1,5 @@ import angular from "angular"; import _ from "lodash"; -import appEvents from "app/core/app_events"; export var iconMap = { "external link": "fa-external-link", From e99f846a6f970543a0e549672fc304a67d9546b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 13 Dec 2017 18:07:56 +0100 Subject: [PATCH 6/6] ux: minor text change to #10177 --- public/app/features/dashlinks/editor.html | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/public/app/features/dashlinks/editor.html b/public/app/features/dashlinks/editor.html index 86c045532e3..14d43b5bd4f 100644 --- a/public/app/features/dashlinks/editor.html +++ b/public/app/features/dashlinks/editor.html @@ -17,13 +17,8 @@
    What are Dashboard Links?

    - Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons on all - graph panels. When you hover over an annotation icon you can get event text & tags for the event. You can add - annotation events directly from grafana by holding CTRL or CMD + click on graph (or drag region). These will be - stored in Grafana's annotation database. + Dashboad Links allow you to place links to other dashboards and web sites directly in below the dashboard header.

    - Checkout the - Annotations documentation for more information.
    TypeInfo
    + {{link.type}} +
    + {{link.title}} +
    +
    + {{link.url}} +
    + + {{tag}} + +