redesign dashlinks

public/app/features/dashboard/settings/settings.html

@@ -64,5 +64,5 @@
 </div>
 
 <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'links'" >
-	<dash-links-editor></dash-links-editor>
+	<dash-links-editor dashboard="ctrl.dashboard"></dash-links-editor>
 </div>

public/app/features/dashlinks/editor.html

@@ -1,77 +1,137 @@
 <h3 class="dashboard-settings__header">
-	Dashboard Links
+  <a ng-click="ctrl.backToList()">Dashboard Links</a>
+  <span ng-show="ctrl.mode === 'new'">&gt; New</span>
+  <span ng-show="ctrl.mode === 'edit'">&gt; Edit</span>
 </h3>
 
-<div ng-repeat="link in dashboard.links">
-	<div class="gf-form-group gf-form-inline">
-		<div class="section">
-			<div class="gf-form">
-				<span class="gf-form-label width-8">Type</span>
-				<div class="gf-form-select-wrapper width-10">
-					<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboards','link']" ng-change="updated()"></select>
-				</div>
-			</div>
-			<div class="gf-form" ng-show="link.type === 'dashboards'">
-				<span class="gf-form-label width-8">With tags</span>
-				<bootstrap-tagsinput ng-model="link.tags" tagclass="label label-tag" placeholder="add tags" style="margin-right: .25rem"></bootstrap-tagsinput>
-			</div>
-			<gf-form-switch ng-show="link.type === 'dashboards'" class="gf-form" label="As dropdown" checked="link.asDropdown" switch-class="max-width-4" label-class="width-8" on-change="updated()"></gf-form-switch>
-			<div class="gf-form" ng-show="link.type === 'dashboards' && link.asDropdown">
-				<span class="gf-form-label width-8">Title</span>
-				<input type="text" ng-model="link.title" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
-			</div>
-			<div ng-show="link.type === 'link'">
-				<div class="gf-form">
-					<li class="gf-form-label width-8">Url</li>
-					<input type="text" ng-model="link.url" class="gf-form-input width-20" ng-model-onblur ng-change="updated()">
-				</div>
 
-				<div class="gf-form">
-					<span class="gf-form-label width-8">Title</span>
-					<input type="text" ng-model="link.title" class="gf-form-input width-20" ng-model-onblur ng-change="updated()">
-				</div>
 
-				<div class="gf-form">
-					<span class="gf-form-label width-8">Tooltip</span>
-					<input type="text" ng-model="link.tooltip" class="gf-form-input width-20" placeholder="Open dashboard" ng-model-onblur ng-change="updated()">
-				</div>
+<div ng-if="ctrl.mode == 'list'">
+  <div ng-if="ctrl.dashboard.links.length === 0">
+    <div class="empty-list-cta">
+      <div class="empty-list-cta__title">
+        There are no dashboard links added yet
+      </div>
+      <a ng-click="ctrl.addLinkMode()" class="empty-list-cta__button btn btn-xlarge btn-success">
+        <i class="gicon gicon-dashboard-new"></i>
+        Add Dashboard Link
+      </a>
+      <div class="grafana-info-box">
+        <h5>What are Dashboard Links?</h5>
+        <p>
+          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 &amp; 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.
+        </p>
+        Checkout the
+        <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/annotations/">Annotations documentation</a> for more information.
+      </div>
+    </div>
+  </div>
 
-				<div class="gf-form">
-					<span class="gf-form-label width-8">Icon</span>
-					<div class="gf-form-select-wrapper width-20">
-						<select class="gf-form-input" ng-model="link.icon" ng-options="k as k for (k, v) in iconMap" ng-change="updated()"></select>
-					</div>
-				</div>
-			</div>
-		</div>
+  <div ng-if="ctrl.dashboard.links.length > 0">
+    <div class="page-action-bar">
+      <div class="page-action-bar__spacer"></div>
+      <a type="button" class="btn btn-success" ng-click="ctrl.addLinkMode()">
+        <i class="fa fa-plus"></i> New</a>
+    </div>
+    <table class="filter-table filter-table--hover">
+      <thead>
+        <tr>
+          <th>Type</th>
+          <th>Tags</th>
+          <th colspan="3"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr ng-repeat="link in ctrl.dashboard.links">
+          <td style="width:90%" class="pointer" ng-click="ctrl.editLinkMode(link)">
+            <i class="fa fa-fw fa-external-link"></i>
+            {{link.type}}
+          </td>
+          <td class="pointer">
+            {{link.tags}}
+          </td>
+          <td style="width: 1%">
+            <i ng-click="ctrl.moveLink($index, -1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i>
+          </td>
+          <td style="width: 1%">
+            <i ng-click="ctrl.moveLink($index, 1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i>
+          </td>
+          <td style="width: 1%">
+            <a ng-click="ctrl.deleteLink($index)" class="btn btn-danger btn-mini" ng-hide="annotation.builtIn">
+              <i class="fa fa-remove"></i>
+            </a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
 
-		<div class="section gf-form-inline"  style="display: flex">
-			<div>
-				<div class="gf-form">
-					<span class="gf-form-label width-6">Include</span>
-				</div>
-			</div>
-			<div>
-				<gf-form-switch class="gf-form" label="Time range" checked="link.keepTime" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
-				<gf-form-switch class="gf-form" label="Variable values" checked="link.includeVars" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
-				<gf-form-switch class="gf-form" label="Open in new tab" checked="link.targetBlank" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
-			</div>
-		</div>
 
-		<div style="display:flex; flex-direction:column; justify-content:flex-start">
-			<div class="gf-form">
-				<button class="btn btn-inverse gf-form-btn width-4" ng-click="deleteLink($index)">
-					<i class="fa fa-trash"></i>
-				</button>
-			</div>
-			<div class="gf-form">
-				<button class="btn btn-inverse gf-form-btn width-4" ng-click="moveLink($index, -1)" ng-hide="$first"><i class="fa fa-arrow-up"></i></button>
-			</div>
-			<div class="gf-form">
-				<button class="btn btn-inverse gf-form-btn width-4" ng-click="moveLink($index, 1)" ng-hide="$last"><i class="fa fa-arrow-down"></i></button>
-			</div>
-		</div>
-	</div>
-</div>
+<div ng-if="ctrl.mode == 'edit' || ctrl.mode == 'new'">
+  <div class="gf-form-group gf-form-inline">
+    <div class="section">
+      <div class="gf-form">
+        <span class="gf-form-label width-8">Type</span>
+        <div class="gf-form-select-wrapper width-10">
+          <select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboards','link']" ng-change="updated()"></select>
+        </div>
+      </div>
+
+      <div class="gf-form" ng-show="link.type === 'dashboards'">
+        <span class="gf-form-label width-8">With tags</span>
+        <bootstrap-tagsinput ng-model="link.tags" tagclass="label label-tag" placeholder="add tags" style="margin-right: .25rem"></bootstrap-tagsinput>
+      </div>
+
+      <gf-form-switch ng-show="link.type === 'dashboards'" class="gf-form" label="As dropdown" checked="link.asDropdown" switch-class="max-width-4"
+        label-class="width-8" on-change="updated()"></gf-form-switch>
+      <div class="gf-form" ng-show="link.type === 'dashboards' && link.asDropdown">
+        <span class="gf-form-label width-8">Title</span>
+        <input type="text" ng-model="link.title" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
+      </div>
+      <div ng-show="link.type === 'link'">
+        <div class="gf-form">
+          <li class="gf-form-label width-8">Url</li>
+          <input type="text" ng-model="link.url" class="gf-form-input width-20" ng-model-onblur ng-change="updated()">
+        </div>
 
-<button class="btn btn-inverse" ng-click="addLink()"><i class="fa fa-plus"></i> Add link</button>
+        <div class="gf-form">
+          <span class="gf-form-label width-8">Title</span>
+          <input type="text" ng-model="link.title" class="gf-form-input width-20" ng-model-onblur ng-change="updated()">
+        </div>
+
+        <div class="gf-form">
+          <span class="gf-form-label width-8">Tooltip</span>
+          <input type="text" ng-model="link.tooltip" class="gf-form-input width-20" placeholder="Open dashboard" ng-model-onblur ng-change="updated()">
+        </div>
+
+        <div class="gf-form">
+          <span class="gf-form-label width-8">Icon</span>
+          <div class="gf-form-select-wrapper width-20">
+            <select class="gf-form-input" ng-model="link.icon" ng-options="k as k for (k, v) in iconMap" ng-change="updated()"></select>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="section gf-form-inline" style="display: flex">
+      <div>
+        <div class="gf-form">
+          <span class="gf-form-label width-6">Include</span>
+        </div>
+      </div>
+      <div>
+        <gf-form-switch class="gf-form" label="Time range" checked="link.keepTime" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
+        <gf-form-switch class="gf-form" label="Variable values" checked="link.includeVars" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
+        <gf-form-switch class="gf-form" label="Open in new tab" checked="link.targetBlank" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
+      </div>
+    </div>
+  </div>
+  <button class="btn btn-success" ng-if="ctrl.mode == 'new'" ng-click="ctrl.addLink(link.type, link.tags, link.url, link.title)">
+    <i class="fa fa-plus"></i> Add</button>
+  <button class="btn btn-success" ng-if="ctrl.mode == 'edit'" ng-click="ctrl.editLink()">
+    <i class="fa fa-plus"></i> Edit</button>
+</div>

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);

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);