mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
feat(dashboard): progress on dash edit mode
This commit is contained in:
@@ -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;
|
||||
};
|
||||
|
@@ -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">
|
||||
|
@@ -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) {
|
||||
|
@@ -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
42
public/app/features/dashboard/row/options.html
Normal 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
24
public/app/features/dashboard/row/options.ts
Normal 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);
|
@@ -1,95 +1,75 @@
|
||||
<!-- <div class="dash-row-handle-column" ng-show="ctrl.dashboard.editMode"> -->
|
||||
<!-- <div class="dash-row-move-handle"> -->
|
||||
<!-- </div> -->
|
||||
<!-- <div class="dash-row-resize-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-row-header-settings dropdown"> -->
|
||||
<!-- <a class="pointer dropdown-toggle" data-toggle="dropdown"> -->
|
||||
<!-- <i class="fa fa-plus-circle"></i> -->
|
||||
<!-- </a> -->
|
||||
<!-- <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1"> -->
|
||||
<!-- <li class="dropdown-submenu"> -->
|
||||
<!-- <a href="javascript:void(0);">Add Panel</a> -->
|
||||
<!-- <ul class="dropdown-menu"> -->
|
||||
<!-- <li bindonce ng-repeat="(key, value) in ctrl.panelPlugins"> -->
|
||||
<!-- <a ng-click="ctrl.addPanelDefault(key)" bo-text="value.name"></a> -->
|
||||
<!-- </li> -->
|
||||
<!-- </ul> -->
|
||||
<!-- </li> -->
|
||||
<!-- <li class="dropdown-submenu"> -->
|
||||
<!-- <a href="javascript:void(0);">Set height</a> -->
|
||||
<!-- <ul class="dropdown-menu"> -->
|
||||
<!-- <li><a ng-click="setHeight('25px')">25 px</a></li> -->
|
||||
<!-- <li><a ng-click="setHeight('100px')">100 px</a></li> -->
|
||||
<!-- <li><a ng-click="setHeight('150px')">150 px</a></li> -->
|
||||
<!-- <li><a ng-click="setHeight('200px')">200 px</a></li> -->
|
||||
<!-- <li><a ng-click="setHeight('250px')">250 px</a></li> -->
|
||||
<!-- <li><a ng-click="setHeight('300px')">300 px</a></li> -->
|
||||
<!-- <li><a ng-click="setHeight('350px')">350 px</a></li> -->
|
||||
<!-- <li><a ng-click="setHeight('450px')">450 px</a></li> -->
|
||||
<!-- <li><a ng-click="setHeight('500px')">500 px</a></li> -->
|
||||
<!-- <li><a ng-click="setHeight('600px')">600 px</a></li> -->
|
||||
<!-- <li><a ng-click="setHeight('700px')">700 px</a></li> -->
|
||||
<!-- </ul> -->
|
||||
<!-- </li> -->
|
||||
<!-- <!-- <li class="dropdown&#45;submenu"> --> -->
|
||||
<!-- <!-- <a href="javascript:void(0);">Move</a> --> -->
|
||||
<!-- <!-- <ul class="dropdown&#45;menu"> --> -->
|
||||
<!-- <!-- <li><a ng&#45;click="moveRow('up')">Up</a></li> --> -->
|
||||
<!-- <!-- <li><a ng&#45;click="moveRow('down')">Down</a></li> --> -->
|
||||
<!-- <!-- <li><a ng&#45;click="moveRow('top')">To top</a></li> --> -->
|
||||
<!-- <!-- <li><a ng&#45;click="moveRow('bottom')">To Bottom</a></li> --> -->
|
||||
<!-- <!-- </ul> --> -->
|
||||
<!-- <!-- </li> --> -->
|
||||
<!-- <li> -->
|
||||
<!-- <a ng-click="ctrl.editRow()">Row options</a> -->
|
||||
<!-- </li> -->
|
||||
<!-- <li> -->
|
||||
<!-- <a ng-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>
|
||||
|
||||
|
@@ -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;
|
||||
|
||||
|
@@ -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>
|
||||
|
@@ -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() {
|
||||
|
Reference in New Issue
Block a user