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 {
}, 'keydown');
}
showDashEditView(view) {
var search = _.extend(this.$location.search(), {editview: view});
showDashEditView() {
var search = _.extend(this.$location.search(), {editview: 'settings'});
this.$location.search(search);
}
......@@ -197,7 +197,7 @@ export class KeybindingSrv {
});
this.bind('d s', () => {
this.showDashEditView('settings');
this.showDashEditView();
});
this.bind('d k', () => {
......@@ -215,8 +215,14 @@ export class KeybindingSrv {
}
scope.appEvent('hide-modal');
scope.appEvent('hide-dash-editor');
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 {
}
}
openEditView(editview) {
var search = _.extend(this.$location.search(), {editview: editview});
openSettings() {
let search = this.$location.search();
if (search.editview) {
delete search.editview;
} else {
search.editview = 'settings';
}
this.$location.search(search);
}
showHelpModal() {
appEvents.emit('show-modal', {templateHtml: '<help-modal></help-modal>'});
}
starDashboard() {
this.dashboardSrv.starDashboard(this.dashboard.id, this.dashboard.meta.isStarred)
.then(newState => {
......
public/app/features/dashboard/partials/settings.html
<div class="tabbed-view-header">
<h2 class="tabbed-view-title">
Settings
</h2>
<h3 class="page-heading">General</h2>
<ul class="gf-tabs">
<li class="gf-tabs-item" ng-repeat="tab in ::['General', 'Links', 'Time picker']">
<a class="gf-tabs-link" ng-click="ctrl.editTab = $index" ng-class="{active: ctrl.editTab === $index}">
{{::tab}}
</a>
</li>
</ul>
<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>
<button class="tabbed-view-close-btn" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</button>
<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 class="tabbed-view-body">
<div ng-if="ctrl.editTab == 0">
<div class="gf-form-group section">
<h5 class="section-heading">Details</h5>
<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 class="section">
<h5 class="section-heading">Options</h5>
<div class="gf-form-group">
<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 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 class="section">
<h5 class="section-heading">Options</h5>
<div class="gf-form-group">
<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>
<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 ng-if="editor.index == 2">
<gf-time-picker-settings dashboard="ctrl.dashboard"></gf-time-picker-settings>
<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 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="edit-tab-with-sidemenu" ng-if="ctrl.viewId !== 'timepicker'">
<aside class="edit-sidemenu-aside">
<div class="sidenav">
<aside class="sidenav__aside">
<h2>
<i class="fa fa-cog"></i>
Settings
......@@ -8,27 +7,22 @@
<ul class="edit-sidemenu">
<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}}
</a>
</li>
</ul>
</aside>
<div class="edit-tab-content" ng-if="ctrl.viewId === 'general'">
general
<div class="sidenav__content" ng-if="ctrl.viewId === 'settings'" ng-include="'public/app/features/dashboard/partials/settings.html'">
</div>
<div class="edit-tab-content" ng-if="ctrl.viewId === 'annotations'">
annotations
<div class="sidenav__content" ng-if="ctrl.viewId === 'annotations'" ng-include="'public/app/features/annotations/partials/editor.html'">
</div>
<div class="edit-tab-content" ng-if="ctrl.viewId === 'templating'">
<div class="sidenav__content" ng-if="ctrl.viewId === 'templating'">
annotations
</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 {DashboardModel} from '../dashboard_model';
import $ from 'jquery';
import _ from 'lodash';
export class SettingsCtrl {
dashboard: DashboardModel;
......@@ -7,7 +9,7 @@ export class SettingsCtrl {
viewId: string;
sections: any[] = [
{title: 'General', id: 'general'},
{title: 'General', id: 'settings'},
{title: 'Annotations', id: 'annotations'},
{title: 'Templating', id: 'templating'},
{title: 'Versions', id: 'versions'},
......@@ -15,10 +17,22 @@ export class SettingsCtrl {
/** @ngInject */
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();
this.viewId = urlParams.editview;
for (let section of this.sections) {
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() {
......
public/app/features/panel/panel_header.ts
......@@ -84,7 +84,6 @@ function panelHeader($compile) {
restrict: 'E',
template: template,
link: function(scope, elem, attrs) {
console.log(elem.html());
let menuElem = elem.find('.panel-menu');
let menuScope;
......
public/app/partials/dashboard.html
......@@ -2,7 +2,9 @@
<dashnav dashboard="ctrl.dashboard"></dashnav>
<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>
<div class="dashboard-container">
......
public/sass/_grafana.scss
......@@ -88,6 +88,7 @@
@import "components/page_header";
@import "components/dashboard_settings";
@import "components/empty_list_cta";
@import "components/sidenav";
// PAGES
......
public/sass/components/_navbar.scss
......@@ -9,6 +9,10 @@
padding-right: $spacer;
display: flex;
flex-grow: 1;
background: $page-header-bg;
box-shadow: $page-header-shadow;
border-bottom: 1px solid $page-header-border-color;
}
.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