IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-23 23:13:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(dashboard): progress on dash edit mode

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-10-25 16:36:40 +02:00
parent 5e1f1c0989
commit 7b0eb6d0bb
15 changed files with 241 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/annotations/editor_ctrl.ts
View File

@ -67,8 +67,8 @@ export class AnnotationsEditorCtrl {
this.annotations.push(this.currentAnnotation);
this.reset();
this.mode = 'list';
this.$scope.updateSubmenuVisibility();
this.$scope.broadcastRefresh();
this.$scope.dashboard.updateSubmenuVisibility();
};
removeAnnotation(annotation) {

6
public/app/features/dashboard/dashboard_ctrl.ts
View File

@ -64,7 +64,7 @@ export class DashboardCtrl {
dashboardKeybindings.shortcuts($scope);
$scope.updateSubmenuVisibility();
$scope.dashboard.updateSubmenuVisibility();
$scope.setWindowTitleAndTheme();
$scope.appEvent("dashboard-initialized", $scope.dashboard);
@ -94,10 +94,6 @@ export class DashboardCtrl {
dynamicDashboardSrv.process();
};
$scope.updateSubmenuVisibility = function() {
$scope.submenuEnabled = $scope.dashboard.isSubmenuFeaturesEnabled();
};
$scope.setWindowTitleAndTheme = function() {
window.document.title = config.window_title_prefix + $scope.dashboard.title;
};

5
public/app/features/dashboard/dashnav/dashnav.html
View File

@ -52,6 +52,7 @@
<li ng-if="::showSettingsMenu" class="dropdown">
<a class="pointer" ng-click="hideTooltip($event)" bs-tooltip="'Manage dashboard'" data-placement="bottom" data-toggle="dropdown"><i class="fa fa-cog"></i></a>
<ul class="dropdown-menu">
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="dashboard.editMode = true;">Enter Build Mode</a></li>
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('settings');">Settings</a></li>
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('annotations');">Annotations</a></li>
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('templating');">Templating</a></li>
@ -61,10 +62,6 @@
<li ng-if="dashboardMeta.canSave"><a class="pointer" ng-click="deleteDashboard();">Delete dashboard</a></li>
</ul>
</li>
<li>
<a ng-click="dashboard.editMode = true;" ng-show="!dashboard.editMode" bs-tooltip="'Build Mode <br> CTRL+B'" data-placement="bottom"><i class="fa fa-wrench"></i></a>
<a ng-click="dashboard.editMode = false;" ng-show="dashboard.editMode" bs-tooltip="'Build Mode <br> CTRL+B'" data-placement="bottom" style="color: #33B5E5;"><i class="fa fa-wrench fa-wrench-close" style="color: #33B5E5;"></i> Leave Build Mode </a>
</li>
</ul>
<ul class="nav dash-playlist-actions" ng-if="playlistSrv">

2
public/app/features/dashboard/keybindings.js
View File

@ -44,7 +44,7 @@ function(angular, $) {
}, { inputDisabled: true });
keyboardManager.bind('ctrl+b', function() {
scope.dashboard.editMode = !scope.dashboard.editMode;
scope.dashboard.toggleEditMode();
}, { inputDisabled: true });
keyboardManager.bind('ctrl+s', function(evt) {

15
public/app/features/dashboard/model.ts
View File

@ -34,6 +34,7 @@ export class DashboardModel {
gnetId: any;
meta: any;
events: any;
editMode: boolean;
constructor(data, meta) {
if (!data) {
@ -171,12 +172,22 @@ export class DashboardModel {
row.panels.push(panel);
}
isSubmenuFeaturesEnabled() {
toggleEditMode() {
this.editMode = !this.editMode;
this.updateSubmenuVisibility();
}
updateSubmenuVisibility() {
if (this.editMode) {
this.meta.submenuEnabled = true;
return;
}
var visableTemplates = _.filter(this.templating.list, function(template) {
return template.hideVariable === undefined || template.hideVariable === false;
});
return visableTemplates.length > 0 || this.annotations.list.length > 0 || this.links.length > 0;
this.meta.submenuEnabled = visableTemplates.length > 0 || this.annotations.list.length > 0 || this.links.length > 0;
}
getPanelInfoById(panelId) {

42
public/app/features/dashboard/row/options.html Normal file
View File

@ -0,0 +1,42 @@
<div class="dash-row-options">
<div class="tabbed-view-header">
<h2 class="tabbed-view-title">
Row Options
</h2>
<button class="tabbed-view-close-btn" ng-click="ctrl.onClose()">
<i class="fa fa-remove"></i>
</button>
</div>
<br>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-6">Title</span>
<input type="text" class="gf-form-input max-width-14" ng-model='ctrl.row.title'></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-6">Height</span>
<input type="text" class="gf-form-input max-width-8" ng-model='ctrl.row.height'></input>
</div>
<gf-form-switch class="gf-form" label="Show Title" tooltip="Check to always show row title" checked="ctrl.row.showTitle">
</gf-form-switch>
</div>
</div>
<h5 class="section-heading">Row Templating</h5>
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label">Repeat Row</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input" ng-model="row.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
<option value=""></option>
</div>
</div>
</div>
</div>

24
public/app/features/dashboard/row/options.ts Normal file
View File

@ -0,0 +1,24 @@
///<reference path="../../../headers/common.d.ts" />
import _ from 'lodash';
import {coreModule} from 'app/core/core';
export class RowOptionsCtrl {
}
export function rowOptionsDirective() {
return {
restrict: 'E',
templateUrl: 'public/app/features/dashboard/row/options.html',
controller: RowOptionsCtrl,
bindToController: true,
controllerAs: 'ctrl',
scope: {
row: "=",
onClose: "&"
},
};
}
coreModule.directive('dashRowOptions', rowOptionsDirective);

158
public/app/features/dashboard/row/row.html
View File

@ -1,95 +1,75 @@
<!-- <div class="dash&#45;row&#45;handle&#45;column" ng&#45;show="ctrl.dashboard.editMode"> -->
<!-- <div class="dash&#45;row&#45;move&#45;handle"> -->
<!-- </div> -->
<!-- <div class="dash&#45;row&#45;resize&#45;handle"> -->
<!-- </div> -->
<!-- </div> -->
<div class="dash-row-header" ng-if="ctrl.dashboard.editMode">
<div class="gf-form gf-form--grow dropdown">
<a class="btn gf-form-btn btn-inverse dropdown-toggle" data-toggle="dropdown">
<span>{{ctrl.row.title}}</span>
<i class="fa fa-caret-down"></i>
</a>
<div class="dash-row-content">
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li>
<a ng-click="ctrl.showOptions = !ctrl.showOptions">Options</a>
</li>
<li class="dropdown-submenu">
<a href="javascript:void(0);">Height</a>
<ul class="dropdown-menu">
<li><a ng-click="ctrl.setHeight('25px')">25 px</a></li>
<li><a ng-click="ctrl.setHeight('100px')">100 px</a></li>
<li><a ng-click="ctrl.setHeight('150px')">150 px</a></li>
<li><a ng-click="ctrl.setHeight('200px')">200 px</a></li>
<li><a ng-click="ctrl.setHeight('250px')">250 px</a></li>
<li><a ng-click="ctrl.setHeight('300px')">300 px</a></li>
<li><a ng-click="ctrl.setHeight('350px')">350 px</a></li>
<li><a ng-click="ctrl.setHeight('450px')">450 px</a></li>
<li><a ng-click="ctrl.setHeight('500px')">500 px</a></li>
<li><a ng-click="ctrl.setHeight('600px')">600 px</a></li>
<li><a ng-click="ctrl.setHeight('700px')">700 px</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="javascript:void(0);">Move</a>
<ul class="dropdown-menu">
<li><a ng-click="ctrl.Move('up')">Up</a></li>
<li><a ng-click="ctrl.Move('down')">Down</a></li>
<li><a ng-click="ctrl.Move('top')">To Top</a></li>
<li><a ng-click="ctrl.Move('bottom')">To Bottom</a></li>
</ul>
</li>
<li>
<a ng-click="ctrl.deleteRow()">Delete</a>
</li>
</ul>
<div class="dash-row-header" ng-if="ctrl.dashboard.editMode">
<div class="gf-form gf-form--grow">
<input class="gf-form-input width-10" ng-model="ctrl.row.title"></input>
<label class="btn gf-form-btn btn-inverse">
Add Panel <i class="fa fa-plus"></i>
</label>
<label class="btn gf-form-btn btn-inverse">
Options <i class="fa fa-caret-down"></i>
</label>
<label class="btn gf-form-btn btn-inverse">
Add Panel <i class="fa fa-plus"></i>
</label>
<!-- <div class="dash&#45;row&#45;header&#45;settings dropdown"> -->
<!-- <a class="pointer dropdown&#45;toggle" data&#45;toggle="dropdown"> -->
<!-- <i class="fa fa&#45;plus&#45;circle"></i> -->
<!-- </a> -->
<!-- <ul class="dropdown&#45;menu dropdown&#45;menu&#45;right" role="menu" aria&#45;labelledby="drop1"> -->
<!-- <li class="dropdown&#45;submenu"> -->
<!-- <a href="javascript:void(0);">Add Panel</a> -->
<!-- <ul class="dropdown&#45;menu"> -->
<!-- <li bindonce ng&#45;repeat="(key, value) in ctrl.panelPlugins"> -->
<!-- <a ng&#45;click="ctrl.addPanelDefault(key)" bo&#45;text="value.name"></a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </li> -->
<!-- <li class="dropdown&#45;submenu"> -->
<!-- <a href="javascript:void(0);">Set height</a> -->
<!-- <ul class="dropdown&#45;menu"> -->
<!-- <li><a ng&#45;click="setHeight('25px')">25 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('100px')">100 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('150px')">150 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('200px')">200 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('250px')">250 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('300px')">300 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('350px')">350 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('450px')">450 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('500px')">500 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('600px')">600 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('700px')">700 px</a></li> -->
<!-- </ul> -->
<!-- </li> -->
<!-- <!&#45;&#45; <li class="dropdown&#38;#45;submenu"> &#45;&#45;> -->
<!-- <!&#45;&#45; <a href="javascript:void(0);">Move</a> &#45;&#45;> -->
<!-- <!&#45;&#45; <ul class="dropdown&#38;#45;menu"> &#45;&#45;> -->
<!-- <!&#45;&#45; <li><a ng&#38;#45;click="moveRow('up')">Up</a></li> &#45;&#45;> -->
<!-- <!&#45;&#45; <li><a ng&#38;#45;click="moveRow('down')">Down</a></li> &#45;&#45;> -->
<!-- <!&#45;&#45; <li><a ng&#38;#45;click="moveRow('top')">To top</a></li> &#45;&#45;> -->
<!-- <!&#45;&#45; <li><a ng&#38;#45;click="moveRow('bottom')">To Bottom</a></li> &#45;&#45;> -->
<!-- <!&#45;&#45; </ul> &#45;&#45;> -->
<!-- <!&#45;&#45; </li> &#45;&#45;> -->
<!-- <li> -->
<!-- <a ng&#45;click="ctrl.editRow()">Row options</a> -->
<!-- </li> -->
<!-- <li> -->
<!-- <a ng&#45;click="ctrl.deleteRow()">Delete row</a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </div> -->
<div class="gf-form-label gf-form-label--grow text-right" ng-click="ctrl.row.collapse = !ctrl.row.collapse">
<a class="pointer">
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
<i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
</a>
</div>
</div>
<div class="gf-form-label gf-form-label--grow text-right" ng-click="ctrl.row.collapse = !ctrl.row.collapse">
<a class="pointer">
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
<i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
</a>
</div>
</div>
<div class="panels-wrapper" ng-if="!ctrl.row.collapse">
<div ng-repeat="panel in ctrl.row.panels track by panel.id" class="panel" ui-draggable="!ctrl.dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="ctrl.onDrop($data, panel)" drag-handle-class="drag-handle" panel-width ui-on-drag-enter="ctrl.onDragEnter($data)">
<plugin-component type="panel" class="panel-margin">
</plugin-component>
</div>
<div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="ctrl.onDrop($data)" data-drop="true">
<div class="panel-container" style="background: transparent">
<div style="text-align: center">
<em>Drop here</em>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div ng-if="ctrl.showOptions">
<dash-row-options row="ctrl.row" on-close="ctrl.showOptions = false;"></dash-row-options>
</div>
<div class="panels-wrapper" ng-if="!ctrl.row.collapse">
<div ng-repeat="panel in ctrl.row.panels track by panel.id" class="panel" ui-draggable="!ctrl.dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="ctrl.onDrop($data, panel)" drag-handle-class="drag-handle" panel-width ui-on-drag-enter="ctrl.onDragEnter($data)">
<plugin-component type="panel" class="panel-margin">
</plugin-component>
</div>
<div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="ctrl.onDrop($data)" data-drop="true">
<div class="panel-container" style="background: transparent">
<div style="text-align: center">
<em>Drop here</em>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>

41
public/app/features/dashboard/row/row.ts
View File

@ -7,6 +7,8 @@ import angular from 'angular';
import config from 'app/core/config';
import {coreModule, appEvents} from 'app/core/core';
import './options';
export class DashRowCtrl {
dashboard: any;
row: any;
@ -47,11 +49,9 @@ export class DashRowCtrl {
});
}
editRow() {
// this.appEvent('show-dash-editor', {
// src: 'public/app/partials/roweditor.html',
// scope: this.$scope.$new()
// });
setHeight(height) {
this.row.height = height;
this.$scope.$broadcast('render');
}
addPanelDefault(type) {
@ -86,6 +86,36 @@ export class DashRowCtrl {
}
});
}
moveRow(direction) {
var rowsList = this.dashboard.rows;
var rowIndex = _.indexOf(rowsList, this.row);
var newIndex = rowIndex;
switch (direction) {
case 'up': {
newIndex = rowIndex - 1;
break;
}
case 'down': {
newIndex = rowIndex + 1;
break;
}
case 'top': {
newIndex = 0;
break;
}
case 'bottom': {
newIndex = rowsList.length - 1;
break;
}
default: {
newIndex = rowIndex;
}
}
if (newIndex >= 0 && newIndex <= (rowsList.length - 1)) {
_.move(rowsList, rowIndex, newIndex);
}
}
}
export function rowDirective($rootScope) {
@ -122,7 +152,6 @@ coreModule.directive('dashRow', rowDirective);
coreModule.directive('panelWidth', function($rootScope) {
return function(scope, element) {
var fullscreen = false;

19
public/app/features/dashboard/submenu/submenu.html
View File

@ -1,4 +1,11 @@
<div class="submenu-controls gf-form-query">
<div class="gf-form submenu-item" ng-if="ctrl.variables.length === 0">
<a class="gf-form-label" ng-click="ctrl.openEditView('templating')">
Add Templating
</a>
</div>
<div ng-repeat="variable in ctrl.variables" ng-hide="variable.hide === 2" class="submenu-item gf-form-inline">
<div class="gf-form">
<label class="gf-form-label template-variable" ng-hide="variable.hide === 1">
@ -9,6 +16,12 @@
<ad-hoc-filters ng-if="variable.type === 'adhoc'" variable="variable"></ad-hoc-filters>
</div>
<div class="gf-form submenu-item" ng-if="ctrl.dashboard.annotations.list.length === 0">
<a class="gf-form-label" ng-click="ctrl.openEditView('annotations')">
Add Annotations
</a>
</div>
<div ng-if="ctrl.dashboard.annotations.list.length > 0">
<div ng-repeat="annotation in ctrl.dashboard.annotations.list" class="submenu-item" ng-class="{'annotation-disabled': !annotation.enable}">
<gf-form-switch class="gf-form" label="{{annotation.name}}" checked="annotation.enable" on-change="ctrl.annotationStateChanged()"></gf-form-switch>
@ -22,5 +35,11 @@
<dash-links-container links="ctrl.dashboard.links" class="gf-form-inline"></dash-links-container>
</div>
<div class="gf-form" ng-if="ctrl.dashboard.editMode" ng-click="ctrl.exitBuildMode();">
<button class="btn btn-primary gf-form-btn">
Exit Build Mode
</button>
</div>
<div class="clearfix"></div>
</div>

9
public/app/features/dashboard/submenu/submenu.ts
View File

@ -31,6 +31,15 @@ export class SubmenuCtrl {
this.$rootScope.$broadcast('refresh');
});
}
openEditView(editview) {
var search = _.extend(this.$location.search(), {editview: editview});
this.$location.search(search);
}
exitBuildMode() {
this.dashboard.toggleEditMode();
}
}
export function submenuDirective() {

4
public/app/features/dashlinks/module.js
View File

@ -171,7 +171,7 @@ function (angular, _) {
$scope.addLink = function() {
$scope.dashboard.links.push({ type: 'dashboards', icon: 'external link' });
$scope.updateSubmenuVisibility();
$scope.dashboard.updateSubmenuVisibility();
$scope.updated();
};
@ -186,7 +186,7 @@ function (angular, _) {
$scope.deleteLink = function(index) {
$scope.dashboard.links.splice(index, 1);
$scope.updateSubmenuVisibility();
$scope.dashboard.updateSubmenuVisibility();
$scope.updated();
};

4
public/app/features/templating/editor_ctrl.ts
View File

@ -56,7 +56,7 @@ export class VariableEditorCtrl {
if ($scope.isValid()) {
$scope.variables.push($scope.current);
$scope.update();
$scope.updateSubmenuVisibility();
$scope.dashboard.updateSubmenuVisibility();
}
};
@ -110,7 +110,7 @@ export class VariableEditorCtrl {
$scope.current = variableSrv.createVariableFromModel(clone);
$scope.variables.push($scope.current);
$scope.current.name = 'copy_of_'+variable.name;
$scope.updateSubmenuVisibility();
$scope.dashboard.updateSubmenuVisibility();
};
$scope.update = function() {

2
public/app/partials/dashboard.html
View File

@ -7,7 +7,7 @@
<dashboard-search></dashboard-search>
<div class="clearfix"></div>
<dashboard-submenu ng-if="submenuEnabled" dashboard="dashboard"></dashboard-submenu>
<dashboard-submenu ng-if="dashboard.meta.submenuEnabled" dashboard="dashboard"></dashboard-submenu>
<div class="clearfix"></div>

59
public/sass/pages/_dashboard.scss
View File

@ -202,32 +202,10 @@ div.flot-text {
}
//
// Dashboard row header
// Dashboard row
//
.dash-row {
display: flex;
}
.dash-row-handle-column {
min-width: 1.5rem;
background: $input-label-bg;
display: flex;
flex-direction: column;
}
.dash-row-move-handle {
background: url($btn-drag-image) no-repeat 50% 50%;
background-size: 8px;
flex-grow: 1;
cursor: move;
}
.dash-row-resize-handle {
}
.dash-row-content {
flex-grow: 1;
}
.dash-row-header {
@ -244,10 +222,6 @@ div.flot-text {
padding: 0.7rem;
}
.dash-row-header-settings {
display: block;
}
.dash-row-header-chevron {
flex-grow: 100;
text-align: right;
@ -262,7 +236,6 @@ div.flot-text {
}
}
.dash-edit-mode {
.dash-row {
margin-bottom: $spacer;
@ -273,14 +246,24 @@ div.flot-text {
}
}
.fa.fa-wrench-close:after {
content: "";
position: absolute;
width: .22rem;
height: 33.421356%;
top: 19px;
display: block;
background: #33B5E5;
left: 181px;
transform: translate(-50%, 0) rotate(-45deg);
.dash-row-options {
background: $panel-bg;
margin: 0 $panel-margin*2 0 $panel-margin;
padding: $spacer*2;
}
.dash-row-options-close-btn {
float: right;
padding: 0;
margin: 0;
background-color: transparent;
border: none;
padding: ($tabs-padding-top + $tabs-top-margin) $spacer $tabs-padding-bottom;
i {
font-size: 120%;
}
color: $text-color;
&:hover {
color: $white;
}
}