apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ux: dashboard settings progress

Browse Source
pull/10177/head
Torkel Ödegaard 8 years ago
parent db663c380b
commit 1b6be031e5
10 changed files with 121 additions and 114 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 14
      public/app/core/services/keybindingSrv.ts
  2. 13
      public/app/features/dashboard/dashnav/dashnav.ts
  3. 143
      public/app/features/dashboard/partials/settings.html
  4. 18
      public/app/features/dashboard/settings/settings.html
  5. 22
      public/app/features/dashboard/settings/settings.ts
  6. 1
      public/app/features/panel/panel_header.ts
  7. 4
      public/app/partials/dashboard.html
  8. 1
      public/sass/_grafana.scss
  9. 4
      public/sass/components/_navbar.scss
  10. 15
      public/sass/components/_sidenav.scss

14
public/app/core/services/keybindingSrv.ts
Unescape View File

@ -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 {
}); });
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 {
} }
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);
}
}); });
} }
} }

13
public/app/features/dashboard/dashnav/dashnav.ts
Unescape View File

@ -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 => {

143
public/app/features/dashboard/partials/settings.html
Unescape View File

@ -1,96 +1,67 @@
<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> -->

18
public/app/features/dashboard/settings/settings.html
Unescape View File

@ -1,6 +1,5 @@
<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 @@
<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>

22
public/app/features/dashboard/settings/settings.ts
Unescape View File

@ -1,5 +1,7 @@
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 {
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 {
/** @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() {

1
public/app/features/panel/panel_header.ts
Unescape View File

@ -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;

4
public/app/partials/dashboard.html
Unescape View File

@ -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">

1
public/sass/_grafana.scss
Unescape View File

@ -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

4
public/sass/components/_navbar.scss
Unescape View File

@ -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 {

15
public/sass/components/_sidenav.scss
Unescape View File

@ -0,0 +1,15 @@
.sidenav {
display: flex;
flex-direction: row;
}
.sidenav__content {
flex-grow: 1;
min-width: 0;
}
.sidenav__aside {
margin-right: $spacer*2;
}
Write Preview
Loading…
Cancel
Save