From 6ae94dda87dbebf8316a89b6adce845c1f632dd5 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Tue, 12 Dec 2017 11:21:32 +0100 Subject: [PATCH] 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);