From 511fa7dec1392b4c9ebc9e3978033de8533f1a7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 10 Dec 2017 12:41:11 +0100 Subject: [PATCH] ux: dashboard settings progress --- public/app/core/directives/dash_class.js | 13 - public/app/core/services/keybindingSrv.ts | 4 - .../app/features/dashboard/dashboard_model.ts | 2 - .../features/dashboard/partials/settings.html | 1 - .../features/dashboard/settings/settings.html | 49 +- .../features/dashboard/settings/settings.ts | 1 - .../dashboard/timepicker/settings.html | 32 +- .../features/templating/partials/editor.html | 556 +++++++++--------- .../sass/components/_dashboard_settings.scss | 7 + public/sass/components/_navbar.scss | 14 - public/sass/components/_view_states.scss | 14 - 11 files changed, 336 insertions(+), 357 deletions(-) diff --git a/public/app/core/directives/dash_class.js b/public/app/core/directives/dash_class.js index 69f1129f636..9df53bdbd48 100644 --- a/public/app/core/directives/dash_class.js +++ b/public/app/core/directives/dash_class.js @@ -18,19 +18,6 @@ function (_, $, coreModule) { elem.toggleClass('panel-in-fullscreen', false); }); - var lastHideControlsVal; - $scope.$watch('ctrl.dashboard.hideControls', function() { - if (!$scope.dashboard) { - return; - } - - var hideControls = $scope.dashboard.hideControls; - if (lastHideControlsVal !== hideControls) { - elem.toggleClass('hide-controls', hideControls); - lastHideControlsVal = hideControls; - } - }); - $scope.$watch('ctrl.playlistSrv.isPlaying', function(newValue) { elem.toggleClass('playlist-active', newValue === true); }); diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts index 348e44fe6ce..362b20fc307 100644 --- a/public/app/core/services/keybindingSrv.ts +++ b/public/app/core/services/keybindingSrv.ts @@ -84,10 +84,6 @@ export class KeybindingSrv { scope.broadcastRefresh(); }); - this.bind('mod+h', () => { - dashboard.hideControls = !dashboard.hideControls; - }); - this.bind('mod+s', e => { scope.appEvent('save-dashboard'); }); diff --git a/public/app/features/dashboard/dashboard_model.ts b/public/app/features/dashboard/dashboard_model.ts index 10b0d0da67b..034ad7d84e1 100644 --- a/public/app/features/dashboard/dashboard_model.ts +++ b/public/app/features/dashboard/dashboard_model.ts @@ -22,7 +22,6 @@ export class DashboardModel { graphTooltip: any; time: any; timepicker: any; - hideControls: any; templating: any; annotations: any; refresh: any; @@ -67,7 +66,6 @@ export class DashboardModel { this.timezone = data.timezone || ''; this.editable = data.editable !== false; this.graphTooltip = data.graphTooltip || 0; - this.hideControls = data.hideControls || false; this.time = data.time || {from: 'now-6h', to: 'now'}; this.timepicker = data.timepicker || {}; this.templating = this.ensureListExist(data.templating); diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html index 80da0fc474a..2295ff2713a 100644 --- a/public/app/features/dashboard/partials/settings.html +++ b/public/app/features/dashboard/partials/settings.html @@ -60,7 +60,6 @@ - diff --git a/public/app/features/dashboard/settings/settings.html b/public/app/features/dashboard/settings/settings.html index 0c11e13496e..465e7976d99 100644 --- a/public/app/features/dashboard/settings/settings.html +++ b/public/app/features/dashboard/settings/settings.html @@ -10,12 +10,55 @@ -
+
+

+ General +

+ +
+
+ + +
+
+ + +
+
+ + + +
+ + + + +
+ + + +
Panel Options
+
+ +
+ +
+
-
- annotationus +
diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts index 18775e5fd29..c013e9d4720 100644 --- a/public/app/features/dashboard/settings/settings.ts +++ b/public/app/features/dashboard/settings/settings.ts @@ -10,7 +10,6 @@ export class SettingsCtrl { sections: any[] = [ {title: 'General', id: 'settings', icon: "fa fa-fw fa-sliders"}, - {title: 'Timepicker', id: 'timepicker', icon: "fa fa-fw fa-clock-o"}, {title: 'Annotations', id: 'annotations', icon: "fa fa-fw fa-comment-o"}, {title: 'Templating', id: 'templating', icon: "fa fa-fw fa-dollar"}, {title: 'Links', id: 'links', icon: "fa fa-fw fa-external-link"}, diff --git a/public/app/features/dashboard/timepicker/settings.html b/public/app/features/dashboard/timepicker/settings.html index 8c40121eaed..3cb8ca061fb 100644 --- a/public/app/features/dashboard/timepicker/settings.html +++ b/public/app/features/dashboard/timepicker/settings.html @@ -1,14 +1,24 @@
+
Time Options
+
-
- Auto-refresh - -
-
- Now delay now- - -
- -
+
+ +
+ +
+
+ +
+ Auto-refresh + +
+
+ Now delay now- + +
+ + +
diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 5a9fe04c625..72f82f43a8f 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -1,325 +1,293 @@ +

Templating

+
-
-

- Templating -

+
+
+ No template variables defined +

+
+ + + + + + + + + + + + - + + + + + + +
VariableDefinition
+ + ${{variable.name}} + + + {{variable.query}} + + + Duplicate + + + + + +
+
- -
+
+
+
What does templating do?
+

Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application + and sensor name 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. +
+
-

+ Checkout the Templating documentation for more information. +

+
+
-
-
- No template variables defined -

-
- - - - - - - - - - - - +
+
+   New +
+
- - - - - - -
VariableDefinition
- - ${{variable.name}} - - - {{variable.query}} - - - Duplicate - - - - - -
-
+
+
Variable
+
+
+
+ Name + +
+
+ + Type + + {{variableTypes[current.type].description}} + + +
+ +
+
+
-
-
-
What does templating do?
-

Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application - and sensor name 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. -
-
+

+ Template names cannot begin with '__' that's reserved for Grafanas global variables +
- Checkout the Templating documentation for more information. -

+
+
+ Label + +
+
+ Hide +
+ +
+
-
-
-   New -
-
- - -
Variable
-
-
-
- Name - -
-
- - Type - - {{variableTypes[current.type].description}} - - -
- -
-
-
- -
- Template names cannot begin with '__' that's reserved for Grafanas global variables -
- -
-
- Label - -
-
- Hide -
- -
-
-
-
+
+
Interval Options
-
-
Interval Options
- -
- Values - -
+
+ Values + +
-
- - +
+ + -
- - Step count How many times should the current time range be divided to calculate the value - -
- -
-
-
- - Min interval The calculated value will not go below this threshold - - -
-
-
+
+ + Step count How many times should the current time range be divided to calculate the value + +
+ +
+
+
+ + Min interval The calculated value will not go below this threshold + + +
+
+
-
-
Custom Options
-
- Values separated by comma - -
-
+
+
Custom Options
+
+ Values separated by comma + +
+
-
-
Constant options
-
- Value - -
-
+
+
Constant options
+
+ Value + +
+
-
-
Query Options
+
+
Query Options
-
-
- Data source -
- -
-
-
- - Refresh - - When to update the values of this variable. - - -
- -
-
-
-
- Query - -
-
- - Regex - - Optional, if you want to extract part of a series name or metric node segment. - - - -
-
- - Sort - - How to sort the values of this variable. - - -
- -
-
-
+
+
+ Data source +
+ +
+
+
+ + Refresh + + When to update the values of this variable. + + +
+ +
+
+
+
+ Query + +
+
+ + Regex + + Optional, if you want to extract part of a series name or metric node segment. + + + +
+
+ + Sort + + How to sort the values of this variable. + + +
+ +
+
+
-
-
Data source options
+
+
Data source options
-
- -
- -
-
+
+ +
+ +
+
-
-
+ + + +
+
-
-
Options
-
- Data source -
- -
-
-
+
+
Options
+
+ Data source +
+ +
+
+
-
-
Selection Options
-
- - - - -
-
- Custom all value - -
-
+
+
Selection Options
+
+ + + + +
+
+ Custom all value + +
+
-
-
Value groups/tags (Experimental feature)
- - -
- Tags query - -
-
-
  • Tag values query
    • - -
    -
    +
    +
    Value groups/tags (Experimental feature)
    + + +
    + Tags query + +
    +
    +
  • Tag values query
    • + +
    +
    -
    -
    Preview of values (shows max 20)
    -
    -
    - {{option.text}} -
    -
    -
    +
    +
    Preview of values (shows max 20)
    +
    +
    + {{option.text}} +
    +
    +
    -
    - {{infoText}} -
    +
    + {{infoText}} +
    -
    - - -
    +
    + + +
    - -
    +
    diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss index 669078c7f91..bb22e6af89e 100644 --- a/public/sass/components/_dashboard_settings.scss +++ b/public/sass/components/_dashboard_settings.scss @@ -38,6 +38,13 @@ margin-bottom: 20px; padding-right: 60px; white-space: nowrap; + + i { + font-size: 25px; + position: relative; + top: 1px; + padding-right: 5px; + } } .dashboard-settings__header { diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 4f9b8fbbf4f..7cde09b1dac 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -87,20 +87,6 @@ } } -.navbar-page-btn-wrapper { - display: inline-block; - position: relative; -} - -.navbar-section-wrapper { - position: relative; - float: left; -} - -.navbar-mini-btn-wrapper { - padding: 15px; -} - .navbar-buttons { height: $navbarHeight; display: flex; diff --git a/public/sass/components/_view_states.scss b/public/sass/components/_view_states.scss index 2e6ecde35da..e528891547a 100644 --- a/public/sass/components/_view_states.scss +++ b/public/sass/components/_view_states.scss @@ -1,19 +1,5 @@ -@mixin hide-controls() { - .add-row-panel-hint, - .dash-row-menu-container { - display: none; - } - .panel-drop-zone { - visibility: hidden; - } -} - -.hide-controls { - @include hide-controls(); -} .page-kiosk-mode { - @include hide-controls(); dashnav { display: none; }