From 05ec7541c80ffaaead518de28091d515b386a02c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 11 Dec 2017 13:04:06 +0100 Subject: [PATCH] ux: dashboard settings progress --- .../app/features/annotations/editor_ctrl.ts | 15 +- .../features/annotations/partials/editor.html | 212 ++++++++---------- .../features/dashboard/settings/settings.ts | 9 +- public/app/features/templating/editor_ctrl.ts | 6 +- .../features/templating/partials/editor.html | 20 +- public/sass/_variables.scss | 2 +- public/sass/components/_empty_list_cta.scss | 11 +- public/sass/components/_navbar.scss | 3 +- 8 files changed, 121 insertions(+), 157 deletions(-) diff --git a/public/app/features/annotations/editor_ctrl.ts b/public/app/features/annotations/editor_ctrl.ts index a52e241ce35..0dea22f32ad 100644 --- a/public/app/features/annotations/editor_ctrl.ts +++ b/public/app/features/annotations/editor_ctrl.ts @@ -26,7 +26,7 @@ export class AnnotationsEditorCtrl { ]; /** @ngInject */ - constructor(private $scope, private datasourceSrv) { + constructor($scope, private datasourceSrv) { $scope.ctrl = this; this.mode = 'list'; @@ -62,7 +62,6 @@ export class AnnotationsEditorCtrl { update() { this.reset(); this.mode = 'list'; - this.$scope.broadcastRefresh(); } setupNew() { @@ -74,28 +73,16 @@ export class AnnotationsEditorCtrl { this.annotations.push(this.currentAnnotation); this.reset(); this.mode = 'list'; - this.$scope.broadcastRefresh(); - this.$scope.dashboard.updateSubmenuVisibility(); } removeAnnotation(annotation) { var index = _.indexOf(this.annotations, annotation); this.annotations.splice(index, 1); - this.$scope.dashboard.updateSubmenuVisibility(); - this.$scope.broadcastRefresh(); } onColorChange(newColor) { this.currentAnnotation.iconColor = newColor; } - - annotationEnabledChange() { - this.$scope.broadcastRefresh(); - } - - annotationHiddenChanged() { - this.$scope.dashboard.updateSubmenuVisibility(); - } } coreModule.controller('AnnotationsEditorCtrl', AnnotationsEditorCtrl); diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html index 1cdf106ee01..b0a0f43a0ec 100644 --- a/public/app/features/annotations/partials/editor.html +++ b/public/app/features/annotations/partials/editor.html @@ -1,147 +1,113 @@ -

Annotations

+

+ Annotations + > New + > Edit +

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- No annotation queries defined +
+ +
+
+
There are no custom annotation queries added yet
+ + + Add Annotation Query + +
+
What are Annotations?
+

+ 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. +
+
- +
+
+ New +
+ +
+ + + + + + + + - - + - -
Query nameData source
+   {{annotation.name}} +   {{annotation.name}} (Built-in) + {{annotation.datasource || 'Default'}} + - - - Edit - -
-
+ + +
-
-
-   New +
+
+
General
+
+
+ Name + +
+
+ Data source +
+ +
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
+ + + + +
+ + + + +
+
+
+ +
Query
+ + + + + +
+
+ + +
+
+
+
diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts index 744fcc46ca2..186d900b3a4 100644 --- a/public/app/features/dashboard/settings/settings.ts +++ b/public/app/features/dashboard/settings/settings.ts @@ -20,9 +20,9 @@ export class SettingsCtrl { ]; /** @ngInject */ - constructor($scope, private $location, private $rootScope) { + constructor(private $scope, private $location, private $rootScope) { // temp hack - $scope.dashboard = this.dashboard; + this.$scope.dashboard = this.dashboard; const params = this.$location.search(); const url = $location.path(); @@ -35,6 +35,11 @@ export class SettingsCtrl { this.viewId = params.editview; $rootScope.onAppEvent("$routeUpdate", this.onRouteUpdated.bind(this), $scope); + + this.$scope.$on('$destroy', () => { + this.dashboard.updateSubmenuVisibility(); + this.$rootScope.$broadcast("refresh"); + }); } onRouteUpdated() { diff --git a/public/app/features/templating/editor_ctrl.ts b/public/app/features/templating/editor_ctrl.ts index c10bc5bb5ec..63fc862eab9 100644 --- a/public/app/features/templating/editor_ctrl.ts +++ b/public/app/features/templating/editor_ctrl.ts @@ -1,5 +1,3 @@ -/// - import _ from 'lodash'; import coreModule from 'app/core/core_module'; import {variableTypes} from './variable'; @@ -45,6 +43,10 @@ export class VariableEditorCtrl { }); }; + $scope.setMode = function(mode) { + $scope.mode = mode; + }; + $scope.add = function() { if ($scope.isValid()) { variableSrv.addVariable($scope.current); diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 9013a4642d8..4e6c53eb839 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -1,19 +1,22 @@ -

Variables

-
+ +

+ Variables + > New + > Edit +

+
There are no template variables added yet
- + Add variable
-
- What does variables do? -
+
What does variables do?

Variables enables more interactive and dynamic dashboards. Instead of hard-coding things like server or sensor names in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard. @@ -29,7 +32,7 @@

- New + New
@@ -50,7 +53,6 @@ -
{{variable.query}} @@ -70,7 +72,7 @@
-
Variable
+
General
diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index a0c52dee2ef..d031a0485f6 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -199,11 +199,11 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www // Try to avoid customizing these :) $zindex-dropdown: 1000; $zindex-navbar-fixed: 1020; +$zindex-sidemenu: 1025; $zindex-tooltip: 1030; $zindex-modal-backdrop: 1040; $zindex-modal: 1050; $zindex-typeahead: 1060; -$zindex-sidemenu: $zindex-navbar-fixed; // Buttons // diff --git a/public/sass/components/_empty_list_cta.scss b/public/sass/components/_empty_list_cta.scss index 844c8c87866..23399d771aa 100644 --- a/public/sass/components/_empty_list_cta.scss +++ b/public/sass/components/_empty_list_cta.scss @@ -1,8 +1,13 @@ .empty-list-cta { background-color: $search-filter-box-bg; text-align: center; - padding: 2rem 2rem 1rem 2rem; + padding: 2rem; border-radius: $border-radius; + + .grafana-info-box { + max-width: 700px; + margin: 0 auto; + } } .empty-list-cta__title { @@ -14,10 +19,6 @@ margin-bottom: 50px; } -.empty-list-cta__pro-tip { - padding-bottom: 1rem; -} - .empty-list-cta__pro-tip-link { margin-left: 5px; } diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index b14f604f701..a86d7bf9c54 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -147,7 +147,8 @@ .sidemenu-open { .navbar { - margin-left: 15px; + padding-left: 15px; + margin-left: 0; } }