mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Trying get rid of modals, new better design for dashboard settings and modals
This commit is contained in:
parent
00e5bb61fc
commit
6342571afe
@ -63,9 +63,13 @@ function (angular, app, _) {
|
||||
});
|
||||
|
||||
module.controller('EditViewCtrl', function($scope) {
|
||||
//$scope.editPanelSrc = 'app/partials/test.html';
|
||||
$scope.editPanelSrc = 'app/partials/dasheditor.html';
|
||||
|
||||
$scope.onAppEvent('show-edit-panel', function(evt, payload) {
|
||||
if (payload.src === $scope.editPanelSrc) {
|
||||
$scope.dismiss();
|
||||
return;
|
||||
}
|
||||
$scope.editPanelSrc = payload.src;
|
||||
});
|
||||
|
||||
|
@ -3,7 +3,7 @@ define([
|
||||
'app',
|
||||
'lodash'
|
||||
],
|
||||
function (angular, app, _) {
|
||||
function (angular) {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
|
@ -20,7 +20,7 @@ function (angular, _, $) {
|
||||
scope.exitFullscreen();
|
||||
scope.emitAppEvent('show-edit-panel', {src: partial});
|
||||
});
|
||||
return;
|
||||
//return;
|
||||
|
||||
if ($(id).length) {
|
||||
elem.attr('data-target', id).attr('data-toggle', 'modal');
|
||||
|
@ -1,48 +0,0 @@
|
||||
<div ng-controller='filtering' ng-init="init()">
|
||||
|
||||
<div ng-repeat="filter in filter.templateParameters" class="small filter-panel-filter">
|
||||
<ul class="unstyled">
|
||||
<li ng-if="filter.name" class="dropdown">
|
||||
{{filter.name}} :
|
||||
<a class="dropdown-toggle" data-toggle="dropdown">
|
||||
{{filter.current.text}}
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li ng-repeat="option in filter.options">
|
||||
<a ng-click="filterOptionSelected(filter, option)">{{option.text}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="submenu-control-edit">
|
||||
<i class="icon-cog pointer" config-modal="app/panels/filtering/editor.html" bs-tooltip="'Edit'" ></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <form ng-show="filter.editing"> -->
|
||||
<!-- <ul class="unstyled"> -->
|
||||
<!-- <li> -->
|
||||
<!-- <strong>name</strong>:<br/> -->
|
||||
<!-- <input type='text' ng-model="filter.name"> -->
|
||||
<!-- </li> -->
|
||||
<!-- <li> -->
|
||||
<!-- <strong>filter.query</strong>:<br/> -->
|
||||
<!-- <input type='text' ng-model="filter.query"> -->
|
||||
<!-- </li> -->
|
||||
<!-- <li> -->
|
||||
<!-- <label for="includeAll">Include all:</label> -->
|
||||
<!-- <input id="includeAll" type='checkbox' ng-model="filter.includeAll"> -->
|
||||
<!-- </li> -->
|
||||
<!-- </ul> -->
|
||||
<!-- <div> -->
|
||||
<!-- <input type="submit" value="Update" ng-click="applyFilter(filter)" class="filter-apply btn btn-success btn-mini" bs-tooltip="'Update and refresh'"/> -->
|
||||
<!-- <button ng-click="filter.editing=undefined" class="filter-apply btn btn-mini" bs-tooltip="'Save without refresh'">Close</button> -->
|
||||
<!-- </div> -->
|
||||
<!-- </form> -->
|
||||
<!-- </div> -->
|
||||
<!-- <i class="pointer icon-plus-sign add-filter-action" ng-click="add()" bs-tooltip="'Add metric filter / param'" data-placement="right"></i> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
@ -1,47 +0,0 @@
|
||||
/*
|
||||
|
||||
## filtering
|
||||
|
||||
*/
|
||||
define([
|
||||
'angular',
|
||||
'app',
|
||||
'lodash'
|
||||
],
|
||||
function (angular, app, _) {
|
||||
'use strict';
|
||||
|
||||
var module = angular.module('grafana.panels.filtering', []);
|
||||
app.useModule(module);
|
||||
|
||||
module.controller('filtering', function($scope, datasourceSrv, $rootScope, $timeout, $q) {
|
||||
|
||||
$scope.panelMeta = {
|
||||
status : "Stable",
|
||||
description : "graphite target filters"
|
||||
};
|
||||
|
||||
// Set and populate defaults
|
||||
var _d = {
|
||||
};
|
||||
_.defaults($scope.panel,_d);
|
||||
|
||||
$scope.init = function() {
|
||||
// empty. Don't know if I need the function then.
|
||||
};
|
||||
|
||||
$scope.remove = function(templateParameter) {
|
||||
$scope.filter.removeTemplateParameter(templateParameter);
|
||||
};
|
||||
|
||||
$scope.add = function() {
|
||||
$scope.filter.addTemplateParameter({
|
||||
type : 'filter',
|
||||
name : 'filter name',
|
||||
editing : true,
|
||||
query : 'metric.path.query.*',
|
||||
});
|
||||
};
|
||||
|
||||
});
|
||||
});
|
@ -9,7 +9,7 @@
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<div ng-controller="EditViewCtrl">
|
||||
<div ng-if="editPanelSrc" ng-include="editPanelSrc">
|
||||
<div class="dashboard-edit-view" ng-if="editPanelSrc" ng-include="editPanelSrc">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -1,108 +1,119 @@
|
||||
<div class="modal-body">
|
||||
<div class="pull-right editor-title">Dashboard settings</div>
|
||||
<div class="dashboard-editor-header">
|
||||
<div class="dashboard-editor-title">
|
||||
<i class="icon icon-cogs"></i>
|
||||
Dashboard settings
|
||||
</div>
|
||||
|
||||
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
|
||||
<div ng-repeat="tab in ['General', 'Rows', 'Controls', 'Import']" data-title="{{tab}}">
|
||||
</div>
|
||||
<div ng-repeat="tab in dashboard.nav" data-title="{{tab.type}}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="editor.index == 0">
|
||||
<div class="editor-row">
|
||||
<div class="section">
|
||||
<div class="editor-option">
|
||||
<label class="small">Title</label><input type="text" class="input-large" ng-model='dashboard.title'></input>
|
||||
</div>
|
||||
<div class="editor-option">
|
||||
<label class="small">Theme</label><select class="input-small" ng-model="dashboard.style" ng-options="f for f in ['dark','light']" ng-change="styleUpdated()"></select>
|
||||
</div>
|
||||
<div class="editor-option">
|
||||
<label class="small">Time correction</label>
|
||||
<select ng-model="dashboard.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
|
||||
</div>
|
||||
<div class="editor-option">
|
||||
<label class="small">Hide controls (CTRL+H)</label>
|
||||
<input type="checkbox" ng-model="dashboard.hideControls" ng-checked="dashboard.hideControls">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-row">
|
||||
<div class="section">
|
||||
<div class="editor-option">
|
||||
<label class="small">Tags</label>
|
||||
<bootstrap-tagsinput ng-model="dashboard.tags" tagclass="label label-tag" placeholder="add tags">
|
||||
</bootstrap-tagsinput>
|
||||
<tip>Press enter to a add tag</tip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="editor.index == 1">
|
||||
<div class="editor-row">
|
||||
<div class="span8">
|
||||
<h4>Rows</h4>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="editor.index == 2">
|
||||
<div class="editor-row">
|
||||
<div class="section">
|
||||
<h5>Feature toggles</h5>
|
||||
<div class="editor-option" ng-repeat="pulldown in dashboard.pulldowns">
|
||||
<label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label><input type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
|
||||
</div>
|
||||
<div class="editor-option" ng-repeat="pulldown in dashboard.nav">
|
||||
<label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label><input type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
|
||||
</div>
|
||||
</div>
|
||||
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
|
||||
<div ng-repeat="tab in ['General', 'Rows', 'Controls', 'Import']" data-title="{{tab}}">
|
||||
</div>
|
||||
<div ng-repeat="tab in dashboard.nav" data-title="{{tab.type}}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="editor.index == 3">
|
||||
<ng-include src="'app/partials/import.html'"></ng-include>
|
||||
</div>
|
||||
|
||||
<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 4+$index">
|
||||
<ng-include ng-show="pulldown.enable" src="edit_path(pulldown.type)"></ng-include>
|
||||
<button ng-hide="pulldown.enable" class="btn" ng-click="pulldown.enable = true">Enable the {{pulldown.type}}</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<div class="pull-left grafana-version-footer" ng-if="editor.index == 0">
|
||||
<span class="editor-option small">
|
||||
Grafana version: {{grafanaVersion}}
|
||||
</span>
|
||||
<div class="dashboard-editor-body">
|
||||
|
||||
<div ng-if="editor.index == 0">
|
||||
<div class="editor-row">
|
||||
<div class="section">
|
||||
<div class="editor-option">
|
||||
<label class="small">Title</label><input type="text" class="input-large" ng-model='dashboard.title'></input>
|
||||
</div>
|
||||
<div class="editor-option">
|
||||
<label class="small">Theme</label><select class="input-small" ng-model="dashboard.style" ng-options="f for f in ['dark','light']" ng-change="styleUpdated()"></select>
|
||||
</div>
|
||||
<div class="editor-option">
|
||||
<label class="small">Time correction</label>
|
||||
<select ng-model="dashboard.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
|
||||
</div>
|
||||
<div class="editor-option">
|
||||
<label class="small">Hide controls (CTRL+H)</label>
|
||||
<input type="checkbox" ng-model="dashboard.hideControls" ng-checked="dashboard.hideControls">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-row">
|
||||
<div class="section">
|
||||
<div class="editor-option">
|
||||
<label class="small">Tags</label>
|
||||
<bootstrap-tagsinput ng-model="dashboard.tags" tagclass="label label-tag" placeholder="add tags">
|
||||
</bootstrap-tagsinput>
|
||||
<tip>Press enter to a add tag</tip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="editor.index == 1">
|
||||
<div class="editor-row">
|
||||
<div class="span8">
|
||||
<h4>Rows</h4>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="editor.index == 2">
|
||||
<div class="editor-row">
|
||||
<div class="section">
|
||||
<h5>Feature toggles</h5>
|
||||
<div class="editor-option" ng-repeat="pulldown in dashboard.pulldowns">
|
||||
<label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label><input type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
|
||||
</div>
|
||||
<div class="editor-option" ng-repeat="pulldown in dashboard.nav">
|
||||
<label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label><input type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="editor.index == 3">
|
||||
<ng-include src="'app/partials/import.html'"></ng-include>
|
||||
</div>
|
||||
|
||||
<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 4+$index">
|
||||
<ng-include ng-show="pulldown.enable" src="edit_path(pulldown.type)"></ng-include>
|
||||
<button ng-hide="pulldown.enable" class="btn" ng-click="pulldown.enable = true">Enable the {{pulldown.type}}</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-editor-footer">
|
||||
<div class="pull-left grafana-version-footer" ng-if="editor.index == 0">
|
||||
<span class="editor-option small">
|
||||
Grafana version: {{grafanaVersion}}
|
||||
</span>
|
||||
<span> | <a ng-click="toggleConsole()" ng-show="!consoleEnabled">enable console</a> <a ng-click="toggleConsole()" ng-show="consoleEnabled">disable console</a></span>
|
||||
<div class="small" grafana-version-check>
|
||||
</div>
|
||||
</div>
|
||||
<div class="small" grafana-version-check>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button ng-click="add_row(dashboard,row); reset_row();" class="btn btn-success" ng-show="editor.index == 1">Create Row</button>
|
||||
<button type="button" class="btn btn-info" ng-click="editor.index=0;dismiss();reset_panel();dashboard.emit_refresh()">Close</button>
|
||||
<button type="button" class="btn btn-info pull-right" ng-click="editor.index=0;dismiss();reset_panel();dashboard.emit_refresh()">Close</button>
|
||||
</div>
|
||||
|
@ -1,4 +1,4 @@
|
||||
<div ng-controller="GraphiteImportCtrl" ng-init="init()" style="height: 400px">
|
||||
<div ng-controller="GraphiteImportCtrl" ng-init="init()">
|
||||
<h5>Import dashboards from graphite web</h5>
|
||||
|
||||
<div class="editor-row">
|
||||
@ -12,7 +12,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button ng-click="listAll()" class="btn btn-primary">List all dashboards</button>
|
||||
<button ng-click="listAll()" class="btn btn-success">List all dashboards</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -1,15 +1,51 @@
|
||||
<div ng-controller="AnnotationsEditorCtrl" ng-init="init()">
|
||||
<div class="modal-body">
|
||||
<div class="pull-right editor-title">Templating</div>
|
||||
<div class="dashboard-editor-header">
|
||||
<div class="dashboard-editor-title">
|
||||
<i class="icon icon-cogs"></i>
|
||||
Dashboard settings
|
||||
</div>
|
||||
|
||||
<div class="editor-row">
|
||||
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
|
||||
<div ng-repeat="tab in ['General', 'Rows', 'Controls', 'Import']" data-title="{{tab}}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="dashboard-editor-body">
|
||||
|
||||
<div ng-if="editor.index == 0">
|
||||
<div class="editor-row">
|
||||
<div class="section">
|
||||
<div class="editor-option">
|
||||
<label class="small">Title</label><input type="text" class="input-large" ng-model='dashboard.title'></input>
|
||||
</div>
|
||||
<div class="editor-option">
|
||||
<label class="small">Theme</label><select class="input-small" ng-model="dashboard.style" ng-options="f for f in ['dark','light']" ng-change="styleUpdated()"></select>
|
||||
</div>
|
||||
<div class="editor-option">
|
||||
<label class="small">Time correction</label>
|
||||
<select ng-model="dashboard.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
|
||||
</div>
|
||||
<div class="editor-option">
|
||||
<label class="small">Hide controls (CTRL+H)</label>
|
||||
<input type="checkbox" ng-model="dashboard.hideControls" ng-checked="dashboard.hideControls">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-row">
|
||||
<div class="section">
|
||||
<div class="editor-option">
|
||||
<label class="small">Tags</label>
|
||||
<bootstrap-tagsinput ng-model="dashboard.tags" tagclass="label label-tag" placeholder="add tags">
|
||||
</bootstrap-tagsinput>
|
||||
<tip>Press enter to a add tag</tip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
|
||||
<div class="dashboard-editor-footer">
|
||||
<button type="button" class="btn btn-info" ng-click="editor.index=0;dismiss();">Close</button>
|
||||
</div>
|
||||
|
@ -221,8 +221,9 @@ div.subnav {
|
||||
li > a:hover,
|
||||
li.active > a,
|
||||
li.active > a:hover {
|
||||
border-color: transparent;
|
||||
background-color: @blue;
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid @blueDark;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
|
@ -203,15 +203,23 @@
|
||||
margin: 0;
|
||||
background: @fullEditTabsBackground;
|
||||
border-top: 1px solid @fullEditTabsBorder;
|
||||
border-bottom: 1px solid @fullEditTabsBorder
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
overflow: visible;
|
||||
padding: 15px;
|
||||
background-color: @grafanaPanelBackground;
|
||||
border-top: 1px solid @fullEditBorder;
|
||||
}
|
||||
|
||||
.nav-tabs > li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nav-tabs > li > a {
|
||||
@ -546,3 +554,43 @@ select.grafana-target-segment-input {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.dashboard-edit-view {
|
||||
padding: 20px;
|
||||
background-color: @grafanaPanelBackground;
|
||||
}
|
||||
|
||||
.dashboard-editor-body {
|
||||
padding: 20px 10px;
|
||||
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 {
|
||||
padding-right: 20px;
|
||||
float: left;
|
||||
color: @linkColor;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
line-height: 34px;
|
||||
margin: 0;
|
||||
.icon {
|
||||
padding: 0 8px 0 5px;
|
||||
color: @textColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -35,9 +35,9 @@
|
||||
|
||||
// Tabs
|
||||
@fullEditTabsBackground: @grayDark;
|
||||
@fullEditBorder: @black;
|
||||
@fullEditBorder: #555;
|
||||
@fullEditBackground: transparent;
|
||||
@fullEditTabsBorder: #555;
|
||||
@fullEditTabsBorder: @black;
|
||||
|
||||
// Graphite Target Editor
|
||||
@grafanaTargetBorder: @black;
|
||||
@ -134,12 +134,10 @@
|
||||
@btnInverseBackgroundHighlight: darken(@black, 5%);
|
||||
|
||||
|
||||
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
@inputBackground: lighten(@grayDark,10%);
|
||||
@inputBorder: lighten(@grayDark,20%);
|
||||
@inputBackground: lighten(@grayDark,0%);
|
||||
@inputBorder: lighten(@grayDark,5%);
|
||||
@inputBorderRadius: @baseBorderRadius;
|
||||
@inputDisabledBackground: #555;
|
||||
@formActionsBackground: transparent;
|
||||
|
Loading…
Reference in New Issue
Block a user