diff --git a/public/app/features/dashboard/settings/settings.html b/public/app/features/dashboard/settings/settings.html index 7de5e2dbcd1..14f1e5bfe33 100644 --- a/public/app/features/dashboard/settings/settings.html +++ b/public/app/features/dashboard/settings/settings.html @@ -76,7 +76,7 @@
- +
diff --git a/public/app/features/dashlinks/editor.html b/public/app/features/dashlinks/editor.html index 155aa78a6fe..14d43b5bd4f 100644 --- a/public/app/features/dashlinks/editor.html +++ b/public/app/features/dashlinks/editor.html @@ -1,77 +1,135 @@

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

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

    + Dashboad Links allow you to place links to other dashboards and web sites directly in below the dashboard header. +

    +
    +
    +
    -
    - Title - -
    - -
    - Tooltip - -
    - -
    - Icon -
    - -
    -
    -
    -
    - -
    -
    -
    - Include -
    -
    -
    - - - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    +
    +
    +
    + + New +
    + + + + + + + + + + + + + + + + + +
    TypeInfo
    + + {{link.type}} + +
    + {{link.title}} +
    +
    + {{link.url}} +
    + + {{tag}} + +     		+ + + + + + + +
    +
    - +
    +
    +
    +
    + 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..595dca8c9ba --- /dev/null +++ b/public/app/features/dashlinks/editor.ts @@ -0,0 +1,80 @@ +import angular from "angular"; +import _ from "lodash"; + +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; + + /** @ngInject */ + constructor($scope, $rootScope) { + this.iconMap = iconMap; + this.dashboard.links = this.dashboard.links || []; + this.mode = "list"; + + $scope.$on("$destroy", () => { + $rootScope.appEvent("dash-links-updated"); + }); + } + + backToList() { + this.mode = "list"; + } + + setupNew() { + this.mode = "new"; + this.link = { type: "dashboards", icon: "external link" }; + } + + addLink() { + this.dashboard.links.push(this.link); + this.mode = "list"; + } + + editLink(link) { + this.link = link; + this.mode = "edit"; + console.log(this.link); + } + + saveLink() { + this.backToList(); + } + + moveLink(index, dir) { + _.move(this.dashboard.links, index, index + dir); + } + + deleteLink(index) { + this.dashboard.links.splice(index, 1); + this.dashboard.updateSubmenuVisibility(); + } +} + +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..09ff6d76c7e 100644 --- a/public/app/features/dashlinks/module.ts +++ b/public/app/features/dashlinks/module.ts @@ -1,63 +1,50 @@ -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 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); @@ -66,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); } }; } @@ -87,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([]); @@ -131,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) { @@ -158,41 +157,14 @@ export class DashLinksContainerCtrl { }; updateDashLinks(); - $rootScope.onAppEvent('dash-links-updated', updateDashLinks, $scope); + $rootScope.onAppEvent("dash-links-updated", updateDashLinks, $scope); } } -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); +angular + .module("grafana.directives") + .directive("dashLinksContainer", dashLinksContainer); +angular.module("grafana.directives").directive("dashLink", dashLink); +angular + .module("grafana.directives") + .controller("DashLinksContainerCtrl", DashLinksContainerCtrl);