Skip to content

N
nexpie-grafana-theme
Commit 1b6be031 by Torkel Ödegaard
Options

ux: dashboard settings progress

parent db663c38
Showing with 121 additions and 114 deletions
public/app/core/services/keybindingSrv.ts
...@@ -72,8 +72,8 @@ export class KeybindingSrv { ...@@ -72,8 +72,8 @@ export class KeybindingSrv {
}, 'keydown'); }, 'keydown');
} }
showDashEditView(view) { showDashEditView() {
var search = _.extend(this.$location.search(), {editview: view}); var search = _.extend(this.$location.search(), {editview: 'settings'});
this.$location.search(search); this.$location.search(search);
} }
...@@ -197,7 +197,7 @@ export class KeybindingSrv { ...@@ -197,7 +197,7 @@ export class KeybindingSrv {
}); });
this.bind('d s', () => { this.bind('d s', () => {
this.showDashEditView('settings'); this.showDashEditView();
}); });
this.bind('d k', () => { this.bind('d k', () => {
...@@ -215,8 +215,14 @@ export class KeybindingSrv { ...@@ -215,8 +215,14 @@ export class KeybindingSrv {
} }
scope.appEvent('hide-modal'); scope.appEvent('hide-modal');
scope.appEvent('hide-dash-editor');
scope.appEvent('panel-change-view', {fullscreen: false, edit: false}); scope.appEvent('panel-change-view', {fullscreen: false, edit: false});
// close settings view
var search = this.$location.search();
if (search.editview) {
delete search.editview;
this.$location.search(search);
}
}); });
} }
} }
......
public/app/features/dashboard/dashnav/dashnav.ts
...@@ -32,15 +32,16 @@ export class DashNavCtrl { ...@@ -32,15 +32,16 @@ export class DashNavCtrl {
} }
} }
openEditView(editview) { openSettings() {
var search = _.extend(this.$location.search(), {editview: editview}); let search = this.$location.search();
if (search.editview) {
delete search.editview;
} else {
search.editview = 'settings';
}
this.$location.search(search); this.$location.search(search);
} }
showHelpModal() {
appEvents.emit('show-modal', {templateHtml: '<help-modal></help-modal>'});
}
starDashboard() { starDashboard() {
this.dashboardSrv.starDashboard(this.dashboard.id, this.dashboard.meta.isStarred) this.dashboardSrv.starDashboard(this.dashboard.id, this.dashboard.meta.isStarred)
.then(newState => { .then(newState => {
......
public/app/features/dashboard/partials/settings.html
<div class="tabbed-view-header"> <h3 class="page-heading">General</h2>
<h2 class="tabbed-view-title">
Settings
</h2>
<ul class="gf-tabs"> <div class="gf-form-group">
<li class="gf-tabs-item" ng-repeat="tab in ::['General', 'Links', 'Time picker']"> <div class="gf-form">
<a class="gf-tabs-link" ng-click="ctrl.editTab = $index" ng-class="{active: ctrl.editTab === $index}"> <label class="gf-form-label width-7">Name</label>
{{::tab}} <input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.title'></input>
</a> </div>
</li> <div class="gf-form">
</ul> <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>
<button class="tabbed-view-close-btn" ng-click="dismiss();"> <folder-picker ng-if="!ctrl.dashboard.meta.isFolder"
<i class="fa fa-remove"></i> initial-title="ctrl.dashboard.meta.folderTitle"
</button> on-change="ctrl.onFolderChange($folder)"
label-class="width-7">
</folder-picker>
</div> </div>
<div class="tabbed-view-body"> <div class="section">
<div ng-if="ctrl.editTab == 0"> <h5 class="section-heading">Options</h5>
<div class="gf-form-group">
<div class="gf-form-group section"> <div class="gf-form">
<h5 class="section-heading">Details</h5> <label class="gf-form-label width-11">Timezone</label>
<div class="gf-form"> <div class="gf-form-select-wrapper">
<label class="gf-form-label width-7">Name</label> <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>
<input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.title'></input>
</div> </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 ng-if="!ctrl.dashboard.meta.isFolder"
initial-title="ctrl.dashboard.meta.folderTitle"
on-change="ctrl.onFolderChange($folder)"
label-class="width-7">
</folder-picker>
</div> </div>
<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-11">
<div class="section"> </gf-form-switch>
<h5 class="section-heading">Options</h5> <gf-form-switch class="gf-form" label="Hide Controls" tooltip="Hide row controls. Shortcut: CTRL+H or CMD+H" checked="ctrl.dashboard.hideControls" label-class="width-11">
<div class="gf-form-group"> </gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-11">Timezone</label>
<div class="gf-form-select-wrapper">
<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>
</div>
<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-11">
</gf-form-switch>
<gf-form-switch class="gf-form"
label="Hide Controls"
tooltip="Hide row controls. Shortcut: CTRL+H or CMD+H"
checked="ctrl.dashboard.hideControls"
label-class="width-11">
</gf-form-switch>
</div>
</div>
<div class="section">
<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 ng-if="editor.index == 1">
<dash-links-editor></dash-links-editor>
</div> </div>
</div>
<div ng-if="editor.index == 2"> <div class="section">
<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>
<!-- <div ng&#45;if="editor.index == 1"> -->
<!-- <dash&#45;links&#45;editor></dash&#45;links&#45;editor> -->
<!-- </div> -->
<!-- -->
<!-- <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> -->
public/app/features/dashboard/settings/settings.html
<div class="sidenav">
<div class="edit-tab-with-sidemenu" ng-if="ctrl.viewId !== 'timepicker'"> <aside class="sidenav__aside">
<aside class="edit-sidemenu-aside">
<h2> <h2>
<i class="fa fa-cog"></i> <i class="fa fa-cog"></i>
Settings Settings
...@@ -8,27 +7,22 @@ ...@@ -8,27 +7,22 @@
<ul class="edit-sidemenu"> <ul class="edit-sidemenu">
<li ng-class="{active: ctrl.viewId === section.id}" ng-repeat="section in ctrl.sections"> <li ng-class="{active: ctrl.viewId === section.id}" ng-repeat="section in ctrl.sections">
<a ng-click="ctrl.viewId = section.id"> <a href="{{::section.url}}">
{{::section.title}} {{::section.title}}
</a> </a>
</li> </li>
</ul> </ul>
</aside> </aside>
<div class="edit-tab-content" ng-if="ctrl.viewId === 'general'"> <div class="sidenav__content" ng-if="ctrl.viewId === 'settings'" ng-include="'public/app/features/dashboard/partials/settings.html'">
general
</div> </div>
<div class="edit-tab-content" ng-if="ctrl.viewId === 'annotations'"> <div class="sidenav__content" ng-if="ctrl.viewId === 'annotations'" ng-include="'public/app/features/annotations/partials/editor.html'">
annotations
</div> </div>
<div class="edit-tab-content" ng-if="ctrl.viewId === 'templating'"> <div class="sidenav__content" ng-if="ctrl.viewId === 'templating'">
annotations annotations
</div> </div>
</div> </div>
<div ng-if="ctrl.viewId === 'timepicker'">
<gf-time-picker-dropdown dashboard="ctrl.dashboard"></gf-time-picker-dropdown>
</div>
public/app/features/dashboard/settings/settings.ts
import {coreModule, appEvents} from 'app/core/core'; import {coreModule, appEvents} from 'app/core/core';
import {DashboardModel} from '../dashboard_model'; import {DashboardModel} from '../dashboard_model';
import $ from 'jquery';
import _ from 'lodash';
export class SettingsCtrl { export class SettingsCtrl {
dashboard: DashboardModel; dashboard: DashboardModel;
...@@ -7,7 +9,7 @@ export class SettingsCtrl { ...@@ -7,7 +9,7 @@ export class SettingsCtrl {
viewId: string; viewId: string;
sections: any[] = [ sections: any[] = [
{title: 'General', id: 'general'}, {title: 'General', id: 'settings'},
{title: 'Annotations', id: 'annotations'}, {title: 'Annotations', id: 'annotations'},
{title: 'Templating', id: 'templating'}, {title: 'Templating', id: 'templating'},
{title: 'Versions', id: 'versions'}, {title: 'Versions', id: 'versions'},
...@@ -15,10 +17,22 @@ export class SettingsCtrl { ...@@ -15,10 +17,22 @@ export class SettingsCtrl {
/** @ngInject */ /** @ngInject */
constructor($scope, private $location, private $rootScope) { constructor($scope, private $location, private $rootScope) {
appEvents.on('hide-dash-editor', this.hideSettings.bind(this), $scope); const params = this.$location.search();
const url = $location.path();
var urlParams = this.$location.search(); for (let section of this.sections) {
this.viewId = urlParams.editview; const sectionParams = _.defaults({editview: section.id}, params);
section.url = url + '?' + $.param(sectionParams);
console.log(section.url);
}
this.viewId = params.editview;
$rootScope.onAppEvent("$routeUpdate", this.onRouteUpdated.bind(this), $scope);
}
onRouteUpdated() {
console.log('settings route updated');
this.viewId = this.$location.search().editview;
} }
hideSettings() { hideSettings() {
......
public/app/features/panel/panel_header.ts
...@@ -84,7 +84,6 @@ function panelHeader($compile) { ...@@ -84,7 +84,6 @@ function panelHeader($compile) {
restrict: 'E', restrict: 'E',
template: template, template: template,
link: function(scope, elem, attrs) { link: function(scope, elem, attrs) {
console.log(elem.html());
let menuElem = elem.find('.panel-menu'); let menuElem = elem.find('.panel-menu');
let menuScope; let menuScope;
......
public/app/partials/dashboard.html
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
<dashnav dashboard="ctrl.dashboard"></dashnav> <dashnav dashboard="ctrl.dashboard"></dashnav>
<div class="scroll-canvas scroll-canvas--dashboard" grafana-scrollbar> <div class="scroll-canvas scroll-canvas--dashboard" grafana-scrollbar>
<dashboard-settings dashboard="ctrl.dashboard" ng-if="ctrl.dashboardViewState.state.editview" class="dashboard-settings"> <dashboard-settings dashboard="ctrl.dashboard"
ng-if="ctrl.dashboardViewState.state.editview"
class="dashboard-settings">
</dashboard-settings> </dashboard-settings>
<div class="dashboard-container"> <div class="dashboard-container">
......
public/sass/_grafana.scss
...@@ -88,6 +88,7 @@ ...@@ -88,6 +88,7 @@
@import "components/page_header"; @import "components/page_header";
@import "components/dashboard_settings"; @import "components/dashboard_settings";
@import "components/empty_list_cta"; @import "components/empty_list_cta";
@import "components/sidenav";
// PAGES // PAGES
......
public/sass/components/_navbar.scss
...@@ -9,6 +9,10 @@ ...@@ -9,6 +9,10 @@
padding-right: $spacer; padding-right: $spacer;
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
background: $page-header-bg;
box-shadow: $page-header-shadow;
border-bottom: 1px solid $page-header-border-color;
} }
.sidemenu-open { .sidemenu-open {
......
public/sass/components/_sidenav.scss 0 → 100644
.sidenav {
display: flex;
flex-direction: row;
}
.sidenav__content {
flex-grow: 1;
min-width: 0;
}
.sidenav__aside {
margin-right: $spacer*2;
}
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