Skip to content

N
nexpie-grafana-theme
Commit 9fc6c488 by Torkel Ödegaard
Options

converting more modals to edit panels

parent f2de1850
Showing with 152 additions and 137 deletions
src/app/controllers/annotationsEditorCtrl.js
define([
'angular',
'app',
'lodash'
'lodash',
'jquery'
],
function (angular, app, _) {
function (angular, app, _, $) {
'use strict';
var module = angular.module('grafana.controllers');
module.controller('AnnotationsEditorCtrl', function($scope, datasourceSrv) {
module.controller('AnnotationsEditorCtrl', function($scope, datasourceSrv, $timeout) {
var annotationDefaults = {
name: '',
datasource: null,
......@@ -22,12 +23,20 @@ function (angular, app, _) {
$scope.init = function() {
$scope.currentAnnotation = angular.copy(annotationDefaults);
$scope.currentIsNew = true;
$scope.editor = { index: 0 };
$scope.datasources = datasourceSrv.getAnnotationSources();
$scope.annotations = $scope.dashboard.annotations.list;
if ($scope.datasources.length > 0) {
$scope.currentDatasource = $scope.datasources[0];
}
$scope.$watch('editor.index', function(newVal) {
console.log("value", newVal);
if (newVal !== 2) {
$scope.reset();
}
});
};
$scope.setDatasource = function() {
......@@ -42,9 +51,12 @@ function (angular, app, _) {
if (!$scope.currentDatasource) {
$scope.currentDatasource = $scope.datasources[0];
}
$scope.editor.index = 2;
$(".tooltip.in").remove();
};
$scope.update = function() {
$scope.reset = function() {
$scope.currentAnnotation = angular.copy(annotationDefaults);
$scope.currentIsNew = true;
};
......@@ -62,21 +74,4 @@ function (angular, app, _) {
});
module.controller('EditViewCtrl', function($scope) {
$scope.editPanelSrc = null;
$scope.onAppEvent('show-edit-panel', function(evt, payload) {
if (payload.src === $scope.editPanelSrc) {
$scope.dismiss();
return;
}
$scope.editPanelSrc = payload.src;
});
$scope.dismiss = function() {
$scope.editPanelSrc = null;
};
});
});
src/app/directives/bootstrap-tagsinput.js
......@@ -102,7 +102,7 @@ function (angular, $) {
var li = '<li' + (item.submenu && item.submenu.length ? ' class="dropdown-submenu"' : '') + '>' +
'<a tabindex="-1" ng-href="' + (item.href || '') + '"' + (item.click ? ' ng-click="' + item.click + '"' : '') +
(item.target ? ' target="' + item.target + '"' : '') + (item.method ? ' data-method="' + item.method + '"' : '') +
(item.configModal ? ' config-modal="' + item.configModal + '"' : "") +
(item.configModal ? ' dash-editor-link="' + item.configModal + '"' : "") +
'>' + (item.text || '') + '</a>';
if (item.submenu && item.submenu.length) {
......@@ -131,4 +131,4 @@ function (angular, $) {
}
};
});
});
\ No newline at end of file
});
src/app/directives/dashEditLink.js
......@@ -32,13 +32,16 @@ function (angular, $) {
var editorScope;
var lastEditor;
scope.onAppEvent('show-dash-editor', function(evt, payload) {
if (lastEditor === payload.src) {
editorScope.dismiss();
return;
}
if (lastEditor) {
editorScope.dismiss();
}
lastEditor = payload.src;
editorScope = payload.scope.$new();
editorScope.dismiss = function() {
......
src/app/partials/annotations_editor.html
<div ng-controller="AnnotationsEditorCtrl" ng-init="init()">
<div class="modal-body">
<div class="pull-right editor-title">Annotations</div>
<div class="editor-row">
<table class="table table-striped annotation-editor-table" style="width: 700px">
<thead>
<th width="90%">Name</th>
<th width="1%"></th>
<th width="1%"></th>
<th width="1%"></th>
</thead>
<tr ng-repeat="annotation in annotations">
<td>
<a ng-click="edit(annotation)" bs-tooltip="'Click to edit'">
<i class="icon-cog"></i>
{{annotation.name}}
</a>
</td>
<td><i ng-click="_.move(annotations,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
<td><i ng-click="_.move(annotations,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
<td><i ng-click="removeAnnotation(annotation)" class="pointer icon-remove"></i></td>
</tr>
</table>
</div>
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="icon icon-bolt"></i>
Annotations
</div>
<div class="editor-row">
<h4 ng-show="currentIsNew">Add Annotation</h4>
<h4 ng-show="!currentIsNew">Edit Annotation</h4>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
</div>
</div>
<div class="editor-option">
<label class="small">Name</label>
<input type="text" class="input-medium" ng-model='currentAnnotation.name' placeholder="name"></input>
</div>
<div class="editor-option">
<label class="small">Datasource</label>
<select ng-model="currentDatasource" ng-options="f.name for f in datasources" ng-change="setDatasource()"></select>
</div>
<div class="editor-option">
<label class="small">Icon color</label>
<spectrum-picker ng-model="currentAnnotation.iconColor"></spectrum-picker>
</div>
<div class="editor-option">
<label class="small">Icon size</label>
<select class="input-mini" ng-model="currentAnnotation.iconSize" ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select>
</div>
<div class="editor-option">
<label class="small">Grid line</label>
<input type="checkbox" ng-model="currentAnnotation.showLine" ng-checked="currentAnnotation.showLine">
</div>
<div class="editor-option">
<label class="small">Line color</label>
<spectrum-picker ng-model="currentAnnotation.lineColor"></spectrum-picker>
</div>
</div>
</div>
<div ng-include src="currentDatasource.editorSrc">
</div>
<div class="dashboard-editor-body">
</div>
<div class="editor-row" ng-if="editor.index == 0">
<table class="table table-striped annotation-editor-table" style="width: 700px">
<tr ng-repeat="annotation in annotations">
<td style="width:90%">
<a ng-click="edit(annotation)" bs-tooltip="'Click to edit'" data-placement="right">
<i class="icon-bolt"></i>
{{annotation.name}}
</a>
</td>
<td><i ng-click="_.move(annotations,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
<td><i ng-click="_.move(annotations,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
<td><i ng-click="removeAnnotation(annotation)" class="pointer icon-remove"></i></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button ng-show="currentIsNew" type="button" class="btn btn-success" ng-click="add()">Add annotation</button>
<button ng-show="!currentIsNew" type="button" class="btn btn-success" ng-click="update()">Update</button>
<button type="button" class="btn btn-danger" ng-click="close_edit();dismiss();dashboard.refresh();">Close</button>
</div>
<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
<div class="editor-row">
<div class="editor-option">
<label class="small">Name</label>
<input type="text" class="input-medium" ng-model='currentAnnotation.name' placeholder="name"></input>
</div>
<div class="editor-option">
<label class="small">Datasource</label>
<select ng-model="currentDatasource" ng-options="f.name for f in datasources" ng-change="setDatasource()"></select>
</div>
<div class="editor-option">
<label class="small">Icon color</label>
<spectrum-picker ng-model="currentAnnotation.iconColor"></spectrum-picker>
</div>
<div class="editor-option">
<label class="small">Icon size</label>
<select class="input-mini" ng-model="currentAnnotation.iconSize" ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select>
</div>
<div class="editor-option">
<label class="small">Grid line</label>
<input type="checkbox" ng-model="currentAnnotation.showLine" ng-checked="currentAnnotation.showLine">
</div>
<div class="editor-option">
<label class="small">Line color</label>
<spectrum-picker ng-model="currentAnnotation.lineColor"></spectrum-picker>
</div>
</div>
<div ng-include src="currentDatasource.editorSrc">
</div>
<button ng-show="currentIsNew" type="button" class="btn btn-success" ng-click="add()">Add annotation</button>
</div>
</div>
<div class="dashboard-editor-footer">
<button type="button" class="btn btn-success pull-right" ng-click="close_edit();dismiss();dashboard.refresh();">Close</button>
</div>
</div>
src/app/partials/dasheditor.html
......@@ -49,30 +49,31 @@
<div ng-if="editor.index == 1">
<div class="editor-row">
<div class="span8">
<h4>Rows</h4>
<h5>Rows</h5>
<table class="table table-striped">
<thead>
<th width="1%"></th>
<th width="1%"></th>
<th width="1%"></th>
<th width="97%">Title</th>
</thead>
<tr ng-repeat="row in dashboard.rows">
<td><i ng-click="_.move(dashboard.rows,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
<td><i ng-click="_.move(dashboard.rows,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
<td><i ng-click="dashboard.rows = _.without(dashboard.rows,row)" class="pointer icon-remove"></i></td>
<td>{{row.title}}</td>
<td style="width: 97%">{{row.title}}</td>
</tr>
</table>
</div>
<div class="span4">
<h4>Add Row</h4>
<label class="small">Title</label>
<input type="text" class="input-normal" ng-model='row.title' placeholder="New row"></input>
<label class="small">Height</label>
<input type="text" class="input-mini" ng-model='row.height'></input>
<br>
<button ng-click="add_row(dashboard,row); reset_row();" class="btn btn-success">Create Row</button>
<div class="editor-row">
<div class="section">
<h5>Add Row</h5>
<div class="editor-option">
<label class="small">Title</label>
<input type="text" class="input-normal" ng-model='row.title' placeholder="New row"></input>
</div>
<div class="editor-option">
<label class="small">Height</label>
<input type="text" class="input-mini" ng-model='row.height'></input>
</div>
</div>
<button ng-click="add_row(dashboard,row); reset_row();" class="btn btn-success">Create Row</button>
</div>
</div>
</div>
</div>
......@@ -115,5 +116,5 @@
</div>
</div>
<button type="button" class="btn btn-info pull-right" ng-click="editor.index=0;dismiss();reset_panel();dashboard.emit_refresh()">Close</button>
<button type="button" class="btn btn-success pull-right" ng-click="editor.index=0;dismiss();reset_panel();dashboard.emit_refresh()">Close</button>
</div>
src/app/partials/paneleditor.html
<div bindonce class="modal-body">
<div class="pull-right editor-title" bo-text="panel.type+' settings'"></div>
<div ng-model="editor.index" bs-tabs>
<div ng-repeat="tab in setEditorTabs(panelMeta)" data-title="{{tab}}">
</div>
</div>
<div ng-show="editorTabs[editor.index] == 'General'">
<div ng-include src="'app/partials/panelgeneral.html'"></div>
</div>
<div bindonce class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="icon icon-text-width"></i>
<span bo-text="panel.type+' settings'"></span>
</div>
<div ng-show="editorTabs[editor.index] == 'Panel'">
<div ng-include src="edit_path(panel.type)"></div>
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in setEditorTabs(panelMeta)" data-title="{{tab}}">
</div>
</div>
<div ng-repeat="tab in panelMeta.editorTabs" ng-show="editorTabs[editor.index] == tab.title">
<div ng-include src="tab.src"></div>
</div>
</div>
<div class="modal-footer">
<!-- close_edit() is provided here to allow for a scope to perform action on dismiss -->
<button type="button" class="btn btn-info" ng-click="editor.index=0;dismiss()">Close</button>
</div>
\ No newline at end of file
<div class="dashboard-editor-body">
<div ng-show="editorTabs[editor.index] == 'General'">
<div ng-include src="'app/partials/panelgeneral.html'"></div>
</div>
<div ng-show="editorTabs[editor.index] == 'Panel'">
<div ng-include src="edit_path(panel.type)"></div>
</div>
<div ng-repeat="tab in panelMeta.editorTabs" ng-show="editorTabs[editor.index] == tab.title">
<div ng-include src="tab.src"></div>
</div>
</div>
<div class="dashboard-editor-footer">
<button type="button" class="btn btn-success pull-right" ng-click="editor.index=0;dismiss()">Close</button>
</div>
src/app/partials/roweditor.html
<div class="modal-body">
<div class="pull-right editor-title">Row settings</div>
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="icon icon-th-list"></i>
Row settings
</div>
<div ng-model="editor.index" bs-tabs>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['General','Panels']" data-title="{{tab}}">
</div>
</div>
</div>
</div>
<div class="editor-row" ng-if="editor.index == 0">
</div>
<div class="dashboard-editor-body">
<div class="editor-row" ng-if="editor.index == 0">
<div class="editor-option">
<label class="small">Title</label><input type="text" class="input-medium" ng-model='row.title'></input>
</div>
......@@ -44,8 +51,7 @@
</div>
</div>
</div>
<div class="modal-footer">
<button ng-show="editor.index == 1" ng-click="editor.index = 2;" class="btn btn-success" ng-disabled="panel.loadingEditor">Add Panel</button>
<button ng-show="panel.type && editor.index == 2" ng-click="add_panel(panel); reset_panel(); editor.index = 1;" class="btn btn-success" ng-disabled="panel.loadingEditor">Add Panel</button>
<div class="dashboard-editor-footer">
<button type="button" class="btn btn-info" ng-click="editor.index=0;dismiss();reset_panel();close_edit()">Close</button>
</div>
src/app/partials/submenu.html
......@@ -10,8 +10,8 @@
<i class="icon-cog"></i>
</a>
<ul class="dropdown-menu">
<li><a class="pointer" config-modal="app/partials/templating_editor.html">Templating</a></li>
<li><a class="pointer" config-modal="app/partials/annotations_editor.html">Annotations</a></li>
<li><a class="pointer" dash-editor-link="app/partials/templating_editor.html">Templating</a></li>
<li><a class="pointer" dash-editor-link="app/partials/annotations_editor.html">Annotations</a></li>
</ul>
</div>
</li>
......
src/css/less/bootswatch.dark.less
......@@ -223,7 +223,7 @@ div.subnav {
li.active > a:hover {
border-color: transparent;
background-color: transparent;
border-bottom: 1px solid @blueDark;
border-bottom: 2px solid @blue;
color: @white;
}
......@@ -545,7 +545,7 @@ a:hover {
.modal {
.border-radius(1px);
border-top: solid 1px lighten(@grayDark, 5%);
background-color: @grayDark;
background-color: @grafanaPanelBackground;
}
.modal-header {
......@@ -553,7 +553,7 @@ a:hover {
}
.modal-footer {
background-color: @grayDark;
background-color: @grafanaPanelBackground;
border-top: 1px solid @grayDark;
.border-radius(0 0 0px 0px);
.box-shadow(none);
......
src/css/less/grafana.less
......@@ -564,29 +564,29 @@ select.grafana-target-segment-input {
min-height: 100px;
overflow: hidden;
}
.dashboard-editor-footer {
overflow: hidden;
}
.dashboard-editor-header {
overflow: hidden;
border-bottom: 1px solid @fullEditBorder;
.tabs {
float: left;
}
.nav {
margin: 0;
}
}
.dashboard-editor-title {
border-bottom: 1px solid @grayDark;
padding-right: 20px;
float: left;
color: @linkColor;
font-size: 20px;
font-weight: normal;
line-height: 34px;
line-height: 38px;
margin: 0;
.icon {
padding: 0 8px 0 5px;
......
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