Commit 9fc6c488 by Torkel Ödegaard

converting more modals to edit panels

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