Skip to content

N
nexpie-grafana-theme
Commit 511fa7de by Torkel Ödegaard
Options

ux: dashboard settings progress

parent 00c723f0
Showing with 74 additions and 63 deletions
public/app/core/directives/dash_class.js
...@@ -18,19 +18,6 @@ function (_, $, coreModule) { ...@@ -18,19 +18,6 @@ function (_, $, coreModule) {
elem.toggleClass('panel-in-fullscreen', false); 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) { $scope.$watch('ctrl.playlistSrv.isPlaying', function(newValue) {
elem.toggleClass('playlist-active', newValue === true); elem.toggleClass('playlist-active', newValue === true);
}); });
......
public/app/core/services/keybindingSrv.ts
...@@ -84,10 +84,6 @@ export class KeybindingSrv { ...@@ -84,10 +84,6 @@ export class KeybindingSrv {
scope.broadcastRefresh(); scope.broadcastRefresh();
}); });
this.bind('mod+h', () => {
dashboard.hideControls = !dashboard.hideControls;
});
this.bind('mod+s', e => { this.bind('mod+s', e => {
scope.appEvent('save-dashboard'); scope.appEvent('save-dashboard');
}); });
......
public/app/features/dashboard/dashboard_model.ts
...@@ -22,7 +22,6 @@ export class DashboardModel { ...@@ -22,7 +22,6 @@ export class DashboardModel {
graphTooltip: any; graphTooltip: any;
time: any; time: any;
timepicker: any; timepicker: any;
hideControls: any;
templating: any; templating: any;
annotations: any; annotations: any;
refresh: any; refresh: any;
...@@ -67,7 +66,6 @@ export class DashboardModel { ...@@ -67,7 +66,6 @@ export class DashboardModel {
this.timezone = data.timezone || ''; this.timezone = data.timezone || '';
this.editable = data.editable !== false; this.editable = data.editable !== false;
this.graphTooltip = data.graphTooltip || 0; this.graphTooltip = data.graphTooltip || 0;
this.hideControls = data.hideControls || false;
this.time = data.time || {from: 'now-6h', to: 'now'}; this.time = data.time || {from: 'now-6h', to: 'now'};
this.timepicker = data.timepicker || {}; this.timepicker = data.timepicker || {};
this.templating = this.ensureListExist(data.templating); this.templating = this.ensureListExist(data.templating);
......
public/app/features/dashboard/partials/settings.html
...@@ -60,7 +60,6 @@ ...@@ -60,7 +60,6 @@
<!-- </div> --> <!-- </div> -->
<!-- --> <!-- -->
<!-- <div ng&#45;if="editor.index == 2"> --> <!-- <div ng&#45;if="editor.index == 2"> -->
<!-- <gf&#45;time&#45;picker&#45;settings dashboard="ctrl.dashboard"></gf&#45;time&#45;picker&#45;settings> -->
<!-- </div> --> <!-- </div> -->
<!-- --> <!-- -->
<!-- </div> --> <!-- </div> -->
public/app/features/dashboard/settings/settings.html
...@@ -10,12 +10,55 @@ ...@@ -10,12 +10,55 @@
</a> </a>
</aside> </aside>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'settings'" ng-include="'public/app/features/dashboard/partials/settings.html'"> <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'settings'">
<h3 class="dashboard-settings__header">
General
</h3>
<div class="gf-form-group">
<div class="gf-form">
<label class="gf-form-label width-7">Name</label>
<input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.title'></input>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">Description</label>
<input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.description'></input>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">
Tags
<info-popover mode="right-normal">Press enter to add a tag</info-popover>
</label>
<bootstrap-tagsinput ng-model="ctrl.dashboard.tags" tagclass="label label-tag" placeholder="add tags">
</bootstrap-tagsinput>
</div>
<folder-picker initial-title="ctrl.dashboard.meta.folderTitle"
initial-folder-id="ctrl.dashboard.folderId"
on-change="ctrl.onFolderChange($folder)"
label-class="width-7">
</folder-picker>
<gf-form-switch class="gf-form" label="Editable" tooltip="Uncheck, then save and reload to disable all dashboard editing" checked="ctrl.dashboard.editable" label-class="width-7">
</gf-form-switch>
</div>
<gf-time-picker-settings dashboard="ctrl.dashboard"></gf-time-picker-settings>
<h5 class="section-heading">Panel Options</h5>
<div class="gf-form">
<label class="gf-form-label width-11">
Graph Tooltip
<info-popover mode="right-normal">
Cycle between options using Shortcut: CTRL+O or CMD+O
</info-popover>
</label>
<div class="gf-form-select-wrapper">
<select ng-model="ctrl.dashboard.graphTooltip" class='gf-form-input' ng-options="f.value as f.text for f in [{value: 0, text: 'Default'}, {value: 1, text: 'Shared crosshair'},{value: 2, text: 'Shared Tooltip'}]"></select>
</div>
</div>
</div> </div>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'annotations'" ng-include="'public/app/features/annotations/partials/editor.html'"> <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'annotations'" ng-include="'public/app/features/annotations/partials/editor.html'">
</div> </div>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'templating'"> <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'templating'" ng-include="'public/app/features/templating/partials/editor.html'">
annotationus
</div> </div>
public/app/features/dashboard/settings/settings.ts
...@@ -10,7 +10,6 @@ export class SettingsCtrl { ...@@ -10,7 +10,6 @@ export class SettingsCtrl {
sections: any[] = [ sections: any[] = [
{title: 'General', id: 'settings', icon: "fa fa-fw fa-sliders"}, {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: 'Annotations', id: 'annotations', icon: "fa fa-fw fa-comment-o"},
{title: 'Templating', id: 'templating', icon: "fa fa-fw fa-dollar"}, {title: 'Templating', id: 'templating', icon: "fa fa-fw fa-dollar"},
{title: 'Links', id: 'links', icon: "fa fa-fw fa-external-link"}, {title: 'Links', id: 'links', icon: "fa fa-fw fa-external-link"},
......
public/app/features/dashboard/timepicker/settings.html
<div class="editor-row"> <div class="editor-row">
<h5 class="section-heading">Time Options</h5>
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-10">Auto-refresh</span> <label class="gf-form-label width-10">Timezone</label>
<input type="text" class="gf-form-input max-width-25" ng-model="ctrl.panel.refresh_intervals" array-join> <div class="gf-form-select-wrapper">
</div> <select ng-model="ctrl.dashboard.timezone" class='gf-form-input' ng-options="f.value as f.text for f in [{value: '', text: 'Default'}, {value: 'browser', text: 'Local browser time'},{value: 'utc', text: 'UTC'}]" ng-change="timezoneChanged()"></select>
<div class="gf-form"> </div>
<span class="gf-form-label width-10">Now delay now-</span> </div>
<input type="text" class="gf-form-input max-width-25" ng-model="ctrl.panel.nowDelay" placeholder="0m" valid-time-span bs-tooltip="'Enter 1m to ignore the last minute (because it can contain incomplete metrics)'"
data-placement="right"> <div class="gf-form">
</div> <span class="gf-form-label width-10">Auto-refresh</span>
<gf-form-switch class="gf-form" label="Hide time picker" checked="ctrl.panel.hidden" label-class="width-10"></gf-form-switch> <input type="text" class="gf-form-input max-width-25" ng-model="ctrl.panel.refresh_intervals" array-join>
</div> </div>
<div class="gf-form">
<span class="gf-form-label width-10">Now delay now-</span>
<input type="text" class="gf-form-input max-width-25" ng-model="ctrl.panel.nowDelay" placeholder="0m" valid-time-span bs-tooltip="'Enter 1m to ignore the last minute (because it can contain incomplete metrics)'"
data-placement="right">
</div>
<gf-form-switch class="gf-form" label="Hide time picker" checked="ctrl.panel.hidden" label-class="width-10"></gf-form-switch>
</div>
</div> </div>
public/sass/components/_dashboard_settings.scss
...@@ -38,6 +38,13 @@ ...@@ -38,6 +38,13 @@
margin-bottom: 20px; margin-bottom: 20px;
padding-right: 60px; padding-right: 60px;
white-space: nowrap; white-space: nowrap;
i {
font-size: 25px;
position: relative;
top: 1px;
padding-right: 5px;
}
} }
.dashboard-settings__header { .dashboard-settings__header {
......
public/sass/components/_navbar.scss
...@@ -87,20 +87,6 @@ ...@@ -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 { .navbar-buttons {
height: $navbarHeight; height: $navbarHeight;
display: flex; display: flex;
......
public/sass/components/_view_states.scss
@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 { .page-kiosk-mode {
@include hide-controls();
dashnav { dashnav {
display: none; display: none;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment