Skip to content

N
nexpie-grafana-theme
Commit 4633da47 by Matt
Options

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

parents e7f5b765 c609586f
Showing with 261 additions and 163 deletions
pkg/api/frontendsettings.go
......@@ -127,6 +127,7 @@ func getFrontendSettingsMap(c *middleware.Context) (map[string]interface{}, erro
"name": panel.Name,
"id": panel.Id,
"info": panel.Info,
"sort": getPanelSort(panel.Id),
}
}
......@@ -150,6 +151,25 @@ func getFrontendSettingsMap(c *middleware.Context) (map[string]interface{}, erro
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) {
settings, err := getFrontendSettingsMap(c)
if err != nil {
......
public/app/core/routes/dashboard_loaders.js
......@@ -31,7 +31,14 @@ function (coreModule) {
meta: { canStar: false, canShare: false },
dashboard: {
title: "New dashboard",
rows: [{title: 'Dashboard Row', height: '250px', panels:[] }]
rows: [
{
title: 'Dashboard Row',
height: '250px',
panels:[],
isNew: true,
}
]
},
}, $scope);
});
......
public/app/features/dashboard/dashboard_ctrl.ts
......@@ -107,6 +107,7 @@ export class DashboardCtrl {
title: 'New row',
panels: [],
height: '250px',
isNew: true,
});
};
......
public/app/features/dashboard/row/options.html
<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="edit-tab-with-sidemenu">
<aside class="edit-sidemenu-aside">
<ul class="edit-sidemenu">
<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>
<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 class="edit-tab-content" ng-if="ctrl.subTabIndex === 0">
<h5 class="section-heading">Add Panel</h5>
<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 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 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>
<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="edit-tab-content" ng-if="ctrl.subTabIndex === 1">
<div class="gf-form-group">
<h5 class="section-heading">Options</h5>
<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">
<label class="gf-form-label width-6">Size</label>
<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" checked="ctrl.row.showTitle">
</gf-form-switch>
</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>
<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 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>
</div>
</div>
public/app/features/dashboard/row/options.ts
......@@ -2,9 +2,120 @@
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 {
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() {
......@@ -15,8 +126,7 @@ export function rowOptionsDirective() {
bindToController: true,
controllerAs: 'ctrl',
scope: {
row: "=",
onClose: "&"
rowCtrl: "=",
},
};
}
......
public/app/features/dashboard/row/row.html
<div class="dash-row-header gf-form-inline" 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-header">
<a class="dash-row-header-title" ng-click="ctrl.showOptions = !ctrl.showOptions">
<span ng-class="ctrl.row.titleSize">{{ctrl.row.title}}</span>
<i class="fa fa-caret-down"></i>
</a>
<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-spacer">
</div>
<a class="btn gf-form-btn btn-inverse" ng-click="ctrl.addPanelMode=!ctrl.addPanelMode">
Add Panel
<i class="fa fa-plus"></i>
<div class="dash-row-collapse-toggle" 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 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>
<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 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>
<plugin-component type="panel" class="panel-margin">
</plugin-component>
......
public/app/features/dashboard/row/row.ts
......@@ -5,36 +5,23 @@ import $ from 'jquery';
import angular from 'angular';
import config from 'app/core/config';
import {coreModule, appEvents} from 'app/core/core';
import {coreModule} from 'app/core/core';
import './options';
export class DashRowCtrl {
dashboard: any;
row: any;
panelPlugins;
addPanelSegment;
showOptions: boolean;
/** @ngInject */
/** @ngInject */
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.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() {
return this.$q.when(_.map(config.panels, panel => {
return this.uiSegmentSrv.newSegment({value: panel.name});
}));
if (this.row.isNew) {
this.showOptions = true;
delete this.row.isNew;
}
}
onDrop(panelId, dropTarget) {
......@@ -55,51 +42,11 @@ export class DashRowCtrl {
this.$rootScope.$broadcast('render');
}
addPanel(panel) {
this.dashboard.addPanel(panel, this.row);
this.$timeout(() => {
this.$scope.$broadcast('render');
});
}
setHeight(height) {
this.row.height = height;
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) {
var rowsList = this.dashboard.rows;
var rowIndex = _.indexOf(rowsList, this.row);
......
public/sass/components/edit_sidemenu.scss
......@@ -9,7 +9,7 @@
}
.edit-sidemenu-aside {
width: 16rem;
min-width: 16rem;
}
.edit-sidemenu {
......
public/sass/pages/_dashboard.scss
......@@ -211,19 +211,40 @@ div.flot-text {
.dash-row-header {
display: flex;
flex-direction: row;
text-align: left;
align-items: center;
margin-right: $panel-margin;
margin-left: $gf-form-margin;
border-bottom: $panel-border;
}
.dash-row-header-title {
font-family: $headings-font-family;
padding: 0.7rem;
i {
font-size: 0.9rem;
position: relative;
top: 2px;
left: 1px;
color: $text-muted;
}
}
.dash-row-header-chevron {
flex-grow: 100;
.dash-row-header-add-panel {
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;
margin-right: 0.6rem;
font-size: $font-size-sm;
......@@ -247,7 +268,7 @@ div.flot-text {
.dash-row-options {
background: $panel-bg;
margin: 0 $panel-margin*2 0 $panel-margin;
padding: $spacer*2;
padding: $spacer*1.5;
}
.dash-row-options-close-btn {
......@@ -266,18 +287,20 @@ div.flot-text {
}
}
.add-panel-container {
display: flex;
flex-direction: row;
.add-panel-panels {
}
.add-panel-item {
background: $panel-bg;
background: $input-label-bg;
padding: $spacer;
min-width: 10rem;
max-width: 10rem;
text-align: center;
margin: $panel-margin;
margin: $gf-form-margin;
float: left;
cursor: pointer;
&.active,
&:hover {
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(82,168,236,10.8)
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment