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

Merge branch 'dash-edit-mode' of https://github.com/grafana/grafana into dash-edit-mode

Browse Source
This commit is contained in:
Matt 2016-10-26 17:52:41 +02:00
commit 4633da47ef
9 changed files with 263 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
pkg/api/frontendsettings.go
View File

@ -127,6 +127,7 @@ func getFrontendSettingsMap(c *middleware.Context) (map[string]interface{}, erro
"name": panel.Name, "name": panel.Name,
"id": panel.Id, "id": panel.Id,
"info": panel.Info, "info": panel.Info,
"sort": getPanelSort(panel.Id),
} }
} }
@ -150,6 +151,25 @@ func getFrontendSettingsMap(c *middleware.Context) (map[string]interface{}, erro
return jsonObj, nil return jsonObj, nil
} }
func getPanelSort(id string) int {
sort := 100
switch id {
case "graph":
sort = 1
case "singlestat":
sort = 2
case "table":
sort = 3
case "text":
sort = 4
case "alertlist":
sort = 5
case "dashlist":
sort = 6
}
return sort
}
func GetFrontendSettings(c *middleware.Context) { func GetFrontendSettings(c *middleware.Context) {
settings, err := getFrontendSettingsMap(c) settings, err := getFrontendSettingsMap(c)
if err != nil { if err != nil {

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

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

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

@ -107,6 +107,7 @@ export class DashboardCtrl {
title: 'New row', title: 'New row',
panels: [], panels: [],
height: '250px', height: '250px',
isNew: true,
}); });
}; };

59
public/app/features/dashboard/row/options.html
View File

@ -1,31 +1,63 @@
<div class="dash-row-options"> <div class="dash-row-options">
<div class="tabbed-view-header"> <div class="edit-tab-with-sidemenu">
<h2 class="tabbed-view-title"> <aside class="edit-sidemenu-aside">
Row Options <ul class="edit-sidemenu">
</h2> <li ng-class="{active: ctrl.subTabIndex === 0}">
<a ng-click="ctrl.subTabIndex = 0">Add Panel</a>
</li>
<li ng-class="{active: ctrl.subTabIndex === 1}">
<a ng-click="ctrl.subTabIndex = 1">Row Options</a>
</li>
<li ng-class="{active: ctrl.subTabIndex === 2}">
<a ng-click="ctrl.deleteRow()">Delete</a>
</li>
</ul>
</aside>
<button class="tabbed-view-close-btn" ng-click="ctrl.onClose()"> <div class="edit-tab-content" ng-if="ctrl.subTabIndex === 0">
<i class="fa fa-remove"></i> <h5 class="section-heading">Add Panel</h5>
</button> <div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-6">Search</span>
<input type="text" class="gf-form-input max-width-14" ng-model='ctrl.panelSearch' give-focus='true' ng-keydown="ctrl.keyDown($event)" ng-change="ctrl.panelSearchChanged()"></input>
</div>
</div> </div>
<br> <div class="add-panel-panels-wrapper">
<div class="add-panel-panels">
<div class="add-panel-item" ng-repeat="panel in ctrl.panelHits" ng-class="{active: $index === ctrl.activeIndex}" ng-click="ctrl.addPanel(panel)">
<img class="add-panel-item-img" ng-src="{{panel.info.logos.small}}"></img>
<div class="add-panel-item-name">{{panel.name}}</div>
</div>
</div>
</div>
</div>
<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 1">
<div class="gf-form-group"> <div class="gf-form-group">
<h5 class="section-heading">Options</h5>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-6">Title</span> <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> <input type="text" class="gf-form-input max-width-14" ng-model='ctrl.row.title'></input>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-6">Height</span> <label class="gf-form-label width-6">Size</label>
<input type="text" class="gf-form-input max-width-8" ng-model='ctrl.row.height'></input> <div class="gf-form-select-wrapper">
<select class="input-small gf-form-input" ng-model="ctrl.row.titleSize" ng-options="f for f in ctrl.fontSizes"></select>
</div> </div>
<gf-form-switch class="gf-form" label="Show Title" tooltip="Check to always show row title" checked="ctrl.row.showTitle"> </div>
<gf-form-switch class="gf-form" label="Show" checked="ctrl.row.showTitle">
</gf-form-switch> </gf-form-switch>
</div> </div>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-6">Height</span>
<input type="text" class="gf-form-input max-width-14" ng-model='ctrl.row.height'></input>
</div>
</div>
</div> </div>
<h5 class="section-heading">Row Templating</h5> <h5 class="section-heading">Row Templating</h5>
@ -40,3 +72,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>

116
public/app/features/dashboard/row/options.ts
View File

@ -2,9 +2,120 @@
import _ from 'lodash'; import _ from 'lodash';
import {coreModule} from 'app/core/core'; import config from 'app/core/config';
import {coreModule, appEvents} from 'app/core/core';
export class RowOptionsCtrl { export class RowOptionsCtrl {
row: any;
dashboard: any;
rowCtrl: any;
subTabIndex: number;
allPanels: any;
panelHits: any;
activeIndex: any;
panelSearch: any;
fontSizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
/** @ngInject */
constructor(private $scope, private $timeout, private $rootScope) {
this.row = this.rowCtrl.row;
this.dashboard = this.rowCtrl.dashboard;
this.subTabIndex = 0;
this.row.titleSize = this.row.titleSize || 'h6';
this.allPanels = _.orderBy(_.map(config.panels, item => item), 'sort');
this.panelHits = this.allPanels;
this.activeIndex = 0;
}
keyDown(evt) {
if (evt.keyCode === 27) {
this.rowCtrl.showOptions = false;
return;
}
if (evt.keyCode === 40 || evt.keyCode === 39) {
this.moveSelection(1);
}
if (evt.keyCode === 38 || evt.keyCode === 37) {
this.moveSelection(-1);
}
if (evt.keyCode === 13) {
var selectedPanel = this.panelHits[this.activeIndex];
if (selectedPanel) {
this.addPanel(selectedPanel);
}
}
}
moveSelection(direction) {
var max = this.panelHits.length;
var newIndex = this.activeIndex + direction;
this.activeIndex = ((newIndex %= max) < 0) ? newIndex + max : newIndex;
}
panelSearchChanged() {
var items = this.allPanels.slice();
var startsWith = [];
var contains = [];
var searchLower = this.panelSearch.toLowerCase();
var item;
while (item = items.shift()) {
var nameLower = item.name.toLowerCase();
if (nameLower.indexOf(searchLower) === 0) {
startsWith.push(item);
} else if (nameLower.indexOf(searchLower) !== -1) {
contains.push(item);
}
}
this.panelHits = startsWith.concat(contains);
this.activeIndex = 0;
}
addPanel(panelPluginInfo) {
var defaultSpan = 12;
var _as = 12 - this.dashboard.rowSpan(this.row);
var panel = {
id: null,
title: config.new_panel_title,
error: false,
span: _as < defaultSpan && _as > 0 ? _as : defaultSpan,
editable: true,
type: panelPluginInfo.id,
isNew: true,
};
this.rowCtrl.showOptions = false;
this.dashboard.addPanel(panel, this.row);
this.$timeout(() => {
this.$rootScope.appEvent('panel-change-view', {
fullscreen: true, edit: true, panelId: panel.id
});
});
}
deleteRow() {
if (!this.row.panels.length) {
this.dashboard.rows = _.without(this.dashboard.rows, this.row);
return;
}
appEvents.emit('confirm-modal', {
title: 'Delete',
text: 'Are you sure you want to delete this row?',
icon: 'fa-trash',
yesText: 'Delete',
onConfirm: () => {
this.dashboard.rows = _.without(this.dashboard.rows, this.row);
}
});
}
} }
export function rowOptionsDirective() { export function rowOptionsDirective() {
@ -15,8 +126,7 @@ export function rowOptionsDirective() {
bindToController: true, bindToController: true,
controllerAs: 'ctrl', controllerAs: 'ctrl',
scope: { scope: {
row: "=", rowCtrl: "=",
onClose: "&"
}, },
}; };
} }

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

@ -1,70 +1,25 @@
<div class="dash-row-header gf-form-inline" ng-if="ctrl.dashboard.editMode"> <div class="dash-row-header">
<div class="gf-form gf-form--grow dropdown"> <a class="dash-row-header-title" ng-click="ctrl.showOptions = !ctrl.showOptions">
<a class="btn gf-form-btn btn-inverse dropdown-toggle" data-toggle="dropdown"> <span ng-class="ctrl.row.titleSize">{{ctrl.row.title}}</span>
<span>{{ctrl.row.title}}</span>
<i class="fa fa-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> <div class="dash-row-header-spacer">
<li> </div>
<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>
<a class="btn gf-form-btn btn-inverse" ng-click="ctrl.addPanelMode=!ctrl.addPanelMode"> <div class="dash-row-collapse-toggle" ng-click="ctrl.row.collapse = !ctrl.row.collapse">
Add Panel
<i class="fa fa-plus"></i>
</a>
<div class="gf-form-label gf-form-label--grow text-right" ng-click="ctrl.row.collapse = !ctrl.row.collapse">
<a class="pointer"> <a class="pointer">
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i> <i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
<i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i> <i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
</a> </a>
</div> </div>
</div> </div>
</div>
<div ng-if="ctrl.showOptions"> <div ng-if="ctrl.showOptions">
<dash-row-options row="ctrl.row" on-close="ctrl.showOptions = false;"></dash-row-options> <dash-row-options row-ctrl="ctrl"></dash-row-options>
</div> </div>
<div class="panels-wrapper" ng-if="!ctrl.row.collapse"> <div class="panels-wrapper" ng-if="!ctrl.row.collapse">
<div class="add-panel-container" ng-if="ctrl.addPanelMode">
<div class="add-panel-item" ng-repeat="panel in ctrl.panelPlugins">
<img class="add-panel-item-img" ng-src="{{panel.info.logos.small}}"></img>
<div class="add-panel-item-name">{{panel.name}}</div>
</div>
</div>
<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> <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>
<plugin-component type="panel" class="panel-margin"> <plugin-component type="panel" class="panel-margin">
</plugin-component> </plugin-component>

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

@ -5,36 +5,23 @@ import $ from 'jquery';
import angular from 'angular'; import angular from 'angular';
import config from 'app/core/config'; import config from 'app/core/config';
import {coreModule, appEvents} from 'app/core/core'; import {coreModule} from 'app/core/core';
import './options'; import './options';
export class DashRowCtrl { export class DashRowCtrl {
dashboard: any; dashboard: any;
row: any; row: any;
panelPlugins; showOptions: boolean;
addPanelSegment;
/** @ngInject */ /** @ngInject */
constructor(private $scope, private $rootScope, private $timeout, private uiSegmentSrv, private $q) { constructor(private $scope, private $rootScope, private $timeout, private uiSegmentSrv, private $q) {
this.panelPlugins = config.panels;
console.log(this.panelPlugins);
this.row.title = this.row.title || 'Row title'; this.row.title = this.row.title || 'Row title';
this.addPanelSegment = uiSegmentSrv.newSegment({
value: 'add',
custom: 'false',
html: 'Add Panel <i class="fa fa-plus"></i>',
renderer: (item, defaultHighlighter) => {
return '<img src="' + item.img + '">' + defaultHighlighter(item.text);
}
});
}
getPanels() { if (this.row.isNew) {
return this.$q.when(_.map(config.panels, panel => { this.showOptions = true;
return this.uiSegmentSrv.newSegment({value: panel.name}); delete this.row.isNew;
})); }
} }
onDrop(panelId, dropTarget) { onDrop(panelId, dropTarget) {
@ -55,51 +42,11 @@ export class DashRowCtrl {
this.$rootScope.$broadcast('render'); this.$rootScope.$broadcast('render');
} }
addPanel(panel) {
this.dashboard.addPanel(panel, this.row);
this.$timeout(() => {
this.$scope.$broadcast('render');
});
}
setHeight(height) { setHeight(height) {
this.row.height = height; this.row.height = height;
this.$scope.$broadcast('render'); this.$scope.$broadcast('render');
} }
addPanelDefault(type) {
var defaultSpan = 12;
var _as = 12 - this.dashboard.rowSpan(this.row);
var panel = {
title: config.new_panel_title,
error: false,
span: _as < defaultSpan && _as > 0 ? _as : defaultSpan,
editable: true,
type: type,
isNew: true,
};
this.addPanel(panel);
}
deleteRow() {
if (!this.row.panels.length) {
this.dashboard.rows = _.without(this.dashboard.rows, this.row);
return;
}
appEvents.emit('confirm-modal', {
title: 'Delete',
text: 'Are you sure you want to delete this row?',
icon: 'fa-trash',
yesText: 'Delete',
onConfirm: () => {
this.dashboard.rows = _.without(this.dashboard.rows, this.row);
}
});
}
moveRow(direction) { moveRow(direction) {
var rowsList = this.dashboard.rows; var rowsList = this.dashboard.rows;
var rowIndex = _.indexOf(rowsList, this.row); var rowIndex = _.indexOf(rowsList, this.row);

2
public/sass/components/edit_sidemenu.scss
View File

@ -9,7 +9,7 @@
} }
.edit-sidemenu-aside { .edit-sidemenu-aside {
width: 16rem; min-width: 16rem;
} }
.edit-sidemenu { .edit-sidemenu {

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

@ -211,19 +211,40 @@ div.flot-text {
.dash-row-header { .dash-row-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
text-align: left;
align-items: center;
margin-right: $panel-margin; margin-right: $panel-margin;
margin-left: $gf-form-margin; margin-left: $gf-form-margin;
border-bottom: $panel-border;
} }
.dash-row-header-title { .dash-row-header-title {
font-family: $headings-font-family;
padding: 0.7rem; padding: 0.7rem;
i {
font-size: 0.9rem;
position: relative;
top: 2px;
left: 1px;
color: $text-muted;
}
} }
.dash-row-header-chevron { .dash-row-header-add-panel {
flex-grow: 100; padding: 0.7rem;
i {
font-size: 0.9rem;
position: relative;
top: 2px;
left: 1px;
color: $text-muted;
}
}
.dash-row-header-spacer {
flex: 50;
}
.dash-row-collapse-toggle {
flex-grow: 30;
cursor: pointer;
text-align: right; text-align: right;
margin-right: 0.6rem; margin-right: 0.6rem;
font-size: $font-size-sm; font-size: $font-size-sm;
@ -247,7 +268,7 @@ div.flot-text {
.dash-row-options { .dash-row-options {
background: $panel-bg; background: $panel-bg;
margin: 0 $panel-margin*2 0 $panel-margin; margin: 0 $panel-margin*2 0 $panel-margin;
padding: $spacer*2; padding: $spacer*1.5;
} }
.dash-row-options-close-btn { .dash-row-options-close-btn {
@ -266,18 +287,20 @@ div.flot-text {
} }
} }
.add-panel-container { .add-panel-panels {
display: flex;
flex-direction: row;
} }
.add-panel-item { .add-panel-item {
background: $panel-bg; background: $input-label-bg;
padding: $spacer; padding: $spacer;
min-width: 10rem; min-width: 10rem;
max-width: 10rem; max-width: 10rem;
text-align: center; text-align: center;
margin: $panel-margin; margin: $gf-form-margin;
float: left;
cursor: pointer;
&.active,
&:hover { &:hover {
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(82,168,236,10.8) box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(82,168,236,10.8)
} }