From f28a43456664be0d24ab0ecf3f76b5d37e040601 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Wed, 13 Dec 2017 09:44:51 +0100 Subject: [PATCH] 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 @@
- + New
+ - + @@ -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);
    TypeInfo
    + {{link.type}} +
    + {{link.title}} +
    +
    + {{link.url}} +
    + + {{tag}} + +