IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(UX): revived dash-edit-mode branch, #6099

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-10-23 10:05:31 +02:00
parent 1bb8192a38
commit 29e834e74b
11 changed files with 211 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/directives/plugin_component.ts
View File

@ -58,7 +58,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
var componentInfo: any = {
name: 'panel-plugin-' + scope.panel.type,
bindings: {dashboard: "=", panel: "=", row: "="},
attrs: {dashboard: "dashboard", panel: "panel", row: "row"},
attrs: {dashboard: "ctrl.dashboard", panel: "panel", row: "ctrl.row"},
};
var panelElemName = 'panel-' + scope.panel.type;

4
public/app/core/filters/filters.ts
View File

@ -60,8 +60,8 @@ coreModule.filter('noXml', function() {
coreModule.filter('interpolateTemplateVars', function (templateSrv) {
var filterFunc: any = function(text, scope) {
var scopedVars;
if (scope.ctrl && scope.ctrl.panel) {
scopedVars = scope.ctrl.panel.scopedVars;
if (scope.ctrl) {
scopedVars = (scope.ctrl.panel || scope.ctrl.row).scopedVars;
} else {
scopedVars = scope.row.scopedVars;
}

2
public/app/core/routes/dashboard_loaders.js
View File

@ -31,7 +31,7 @@ function (coreModule) {
meta: { canStar: false, canShare: false },
dashboard: {
title: "New dashboard",
rows: [{ height: '250px', panels:[] }]
rows: [{title: 'Dashboard Row', height: '250px', panels:[] }]
},
}, $scope);
});

1
public/app/features/dashboard/all.js
View File

@ -22,4 +22,5 @@ define([
'./export/export_modal',
'./dash_list_ctrl',
'./ad_hoc_filters',
'./row/row',
], function () {});

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

@ -41,6 +41,7 @@ export class DashboardCtrl {
$scope.setupDashboardInternal = function(data) {
var dashboard = dashboardSrv.create(data.dashboard, data.meta);
dashboardSrv.setCurrent(dashboard);
dashboard.editMode = true;
// init services
timeSrv.init(dashboard);

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

@ -62,8 +62,8 @@
</ul>
</li>
<li>
<a ng-click="dashboard.editMode()" 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()" 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>
<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>

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

@ -0,0 +1,87 @@
<div class="dash-row-handle-column" ng-if="ctrl.dashboard.editMode">
<div class="dash-row-move-handle">
</div>
<div class="dash-row-resize-handle">
</div>
</div>
<div class="dash-row-content">
<div class="dash-row-header pointer" ng-if="ctrl.dashboard.editMode">
<div class="dash-row-header-title" ng-bind="ctrl.row.title | interpolateTemplateVars:this"></div>
<div class="dash-row-header-settings dropdown">
<!-- <a class="pointer dropdown&#45;toggle" data&#45;toggle="dropdown"> -->
<!-- <i class="fa fa&#45;cog"></i> -->
<!-- </a> -->
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
<li>
<a ng-click="toggleRow(row)">Collapse row</a>
</li>
<li class="dropdown-submenu">
<a href="javascript:void(0);">Add Panel</a>
<ul class="dropdown-menu">
<li bindonce ng-repeat="(key, value) in panels">
<a ng-click="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-submenu">
<a href="javascript:void(0);">Move</a>
<ul class="dropdown-menu">
<li><a ng-click="moveRow('up')">Up</a></li>
<li><a ng-click="moveRow('down')">Down</a></li>
<li><a ng-click="moveRow('top')">To top</a></li>
<li><a ng-click="moveRow('bottom')">To Bottom</a></li>
</ul>
</li>
<li>
<a ng-click="editRow()">Row editor</a>
</li>
<li>
<a ng-click="deleteRow()">Delete row</a>
</li>
</ul>
</div>
<div class="dash-row-header-chevron" 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="onDrop($data, row, panel)" drag-handle-class="drag-handle" panel-width>
<plugin-component type="panel" class="panel-margin">
</plugin-component>
</div>
<div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="onDrop($data, row)" 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>

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

@ -0,0 +1,73 @@
///<reference path="../../../headers/common.d.ts" />
import _ from 'lodash';
import coreModule from 'app/core/core_module';
export class DashRowCtrl {
showTitle: boolean;
/** @ngInject */
constructor(private $scope, private $rootScope) {
this.showTitle = true;
this.-
}
}
export function rowDirective() {
return {
restrict: 'E',
templateUrl: 'public/app/features/dashboard/row/row.html',
controller: DashRowCtrl,
bindToController: true,
controllerAs: 'ctrl',
scope: {
dashboard: "=",
row: "=",
}
};
}
coreModule.directive('dashRow', rowDirective);
coreModule.directive('panelWidth', function($rootScope) {
return function(scope, element) {
var fullscreen = false;
function updateWidth() {
if (!fullscreen) {
element[0].style.width = ((scope.panel.span / 1.2) * 10) + '%';
}
}
$rootScope.onAppEvent('panel-fullscreen-enter', function(evt, info) {
fullscreen = true;
if (scope.panel.id !== info.panelId) {
element.hide();
} else {
element[0].style.width = '100%';
}
}, scope);
$rootScope.onAppEvent('panel-fullscreen-exit', function(evt, info) {
fullscreen = false;
if (scope.panel.id !== info.panelId) {
element.show();
}
updateWidth();
}, scope);
scope.$watch('ctrl.panel.span', updateWidth);
if (fullscreen) {
element.hide();
}
};
});

39
public/app/features/dashboard/rowCtrl.js
View File

@ -146,45 +146,6 @@ function (angular, _, config) {
};
});
module.directive('panelWidth', function() {
return function(scope, element) {
var fullscreen = false;
function updateWidth() {
if (!fullscreen) {
element[0].style.width = ((scope.panel.span / 1.2) * 10) + '%';
}
}
scope.onAppEvent('panel-fullscreen-enter', function(evt, info) {
fullscreen = true;
if (scope.panel.id !== info.panelId) {
element.hide();
} else {
element[0].style.width = '100%';
}
});
scope.onAppEvent('panel-fullscreen-exit', function(evt, info) {
fullscreen = false;
if (scope.panel.id !== info.panelId) {
element.show();
}
updateWidth();
});
scope.$watch('panel.span', updateWidth);
if (fullscreen) {
element.hide();
}
};
});
module.directive('panelDropZone', function() {
return function(scope, element) {
scope.$on("ANGULAR_DRAG_START", function() {

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

@ -11,83 +11,9 @@
<div class="clearfix"></div>
<div class="dash-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" row-height>
<div class="dash-row-header pointer" ng-click="toggleRow(row)" ng-if="row.showTitle || dashboard.editMode" ng-mouseenter="settingsHover(row)" ng-mouseleave="settingsHover(row)">
<div class="dash-row-header-title" ng-bind="row.title | interpolateTemplateVars:this"></div>
<div class="dash-row-header-settings dropdown">
<a class="pointer dropdown-toggle" data-toggle="dropdown" ng-show="row.hoverSettings || dashboard.editMode">
<i class="fa fa-cog"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
<li>
<a ng-click="toggleRow(row)">Collapse row</a>
</li>
<li class="dropdown-submenu">
<a href="javascript:void(0);">Add Panel</a>
<ul class="dropdown-menu">
<li bindonce ng-repeat="(key, value) in panels">
<a ng-click="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-submenu">
<a href="javascript:void(0);">Move</a>
<ul class="dropdown-menu">
<li><a ng-click="moveRow('up')">Up</a></li>
<li><a ng-click="moveRow('down')">Down</a></li>
<li><a ng-click="moveRow('top')">To top</a></li>
<li><a ng-click="moveRow('bottom')">To Bottom</a></li>
</ul>
</li>
<li>
<a ng-click="editRow()">Row editor</a>
</li>
<li>
<a ng-click="deleteRow()">Delete row</a>
</li>
</ul>
</div>
<div class="dash-row-header-chevron">
<a class="pointer" ng-click="row.collapse = !row.collapse">
<i class="fa fa-chevron-down" ng-show="!row.collapse"></i>
<i class="fa fa-chevron-right" ng-show="row.collapse"></i>
</a>
</div>
</div>
<dash-row class="dash-row" ng-repeat="row in dashboard.rows" row="row" dashboard="dashboard">
</dash-row>
<div class="panels-wrapper" ng-if="!row.collapse">
<div ng-repeat="panel in row.panels track by panel.id" class="panel" ui-draggable="!dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="onDrop($data, row, panel)" drag-handle-class="drag-handle" panel-width>
<plugin-component type="panel" class="panel-margin">
</plugin-component>
</div>
<div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="onDrop($data, row)" 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>
<div ng-show='dashboardMeta.canEdit' class="row-fluid add-row-panel-hint" ng-hide="dashboard.meta.fullscreen">

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

@ -205,17 +205,43 @@ div.flot-text {
// Dashboard row header
//
.dash-row {
display: flex;
}
.dash-row-handle-column {
width: 2rem;
background: $page-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 {
display: flex;
flex-direction: row;
text-align: left;
align-items: center;
background: $page-bg;
margin-right: $panel-margin;
}
.dash-row-header-title {
font-size: $font-size-h3;
font-family: $headings-font-family;
padding: $spacer $spacer $spacer $spacer/2;
padding: 0.7rem;
}
.dash-row-header-settings {
@ -226,34 +252,24 @@ div.flot-text {
flex-grow: 100;
text-align: right;
margin-right: 0.6rem;
font-size: $font-size-sm;
line-height: 2.5rem;
a {
color: $text-muted;
}
&:hover a {
color: $link-color;
}
}
.dash-row-header-collapse-toggle {
flex-grow: 100;
text-align: right;
display: none;
margin-right: $spacer/2;
}
.dash-edit-mode {
// .dash-row {
// background: $dash-row-background;
// box-shadow: $dash-row-shadow;
// padding: 0 ($spacer/4) ($spacer/2) ($spacer/4);
// margin-bottom: $spacer;
// }
.dash-row {
margin-bottom: $spacer;
}
.dash-row {
background: lighten($body-bg, 1%);
box-shadow: inset 15px 0px 0px 0px #262626;
padding: 0 ($spacer/4) ($spacer/2) ($spacer*2);
margin-left: 5px;
margin-bottom: $spacer;
}
.dash-row-header-collapse-toggle,
.dash-row-header-settings {
display: block;
.panels-wrapper {
padding: $panel-margin*2 0 0 $panel-margin;
}
}