Skip to content

N
nexpie-grafana-theme
Commit d22e1c43 by Rashid Khan
Options

Added tabs to editor panels

parent cc5da00b
Showing with 66 additions and 30 deletions
common/css/bootstrap.dark.min.css
...@@ -3172,9 +3172,9 @@ table th[class*="span"], ...@@ -3172,9 +3172,9 @@ table th[class*="span"],
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
line-height: 21px; line-height: 21px;
color: #000000; color: #FFF;
text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #ffffff;
opacity: 0.2; opacity: 0.3;
filter: alpha(opacity=20); filter: alpha(opacity=20);
} }
......
common/css/main.css
...@@ -6,6 +6,13 @@ ...@@ -6,6 +6,13 @@
color: #000; color: #000;
} }
.editor-title {
margin-right: 10px;
font-size: 1.7em;
font-weight: bold;
text-transform:capitalize;
}
.spy { .spy {
position:absolute; position:absolute;
right:0px; right:0px;
......
js/controllers.js
...@@ -13,6 +13,11 @@ angular.module('kibana.controllers', []) ...@@ -13,6 +13,11 @@ angular.module('kibana.controllers', [])
last: null last: null
}; };
// For
$scope.editor = {
index: 0
};
$scope.init = function() { $scope.init = function() {
$scope.config = config; $scope.config = config;
......
partials/dasheditor.html
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>{{dashboard.current.title}} <small> editor</small></h3>
</div>
<div class="modal-body"> <div class="modal-body">
<h4>Dashboard Control</h4> <div class="pull-right editor-title">Dashboard settings</div>
<div class="row-fluid">
<div class="span8"> <div ng-model="editor.index" bs-tabs>
<div ng-repeat="tab in ['General','Index','Rows']" data-title="{{tab}}">
</div>
</div>
<div class="row-fluid" ng-show="editor.index == 0">
<div class="span4">
<label class="small">Title</label><input type="text" class="input-large" ng-model='dashboard.current.title'></input> <label class="small">Title</label><input type="text" class="input-large" ng-model='dashboard.current.title'></input>
</div> </div>
<div class="span1"> <div class="span1">
<label class="small"> Editable </label><input type="checkbox" ng-model="dashboard.current.editable" ng-checked="dashboard.current.editable" /> <label class="small"> Editable </label><input type="checkbox" ng-model="dashboard.current.editable" ng-checked="dashboard.current.editable" />
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid" ng-show="editor.index == 1">
<h4>Index Settings</h4> <h4>Index Settings</h4>
<div ng-show="dashboard.current.index.interval != 'none'" class="row-fluid"> <div ng-show="dashboard.current.index.interval != 'none'" class="row-fluid">
<div class="span12"> <div class="span12">
...@@ -46,9 +49,8 @@ ...@@ -46,9 +49,8 @@
</div> </div>
</div> </div>
</div> </div>
<hr/> <div class="row-fluid" ng-show="editor.index == 2">
<h4>Rows</h4> <h4>Rows</h4>
<div class="row-fluid">
<form> <form>
<div class="span5"> <div class="span5">
<label class="small">Title</label> <label class="small">Title</label>
...@@ -68,7 +70,7 @@ ...@@ -68,7 +70,7 @@
</div> </div>
</form> </form>
</div> </div>
<div class="row-fluid"> <div class="row-fluid" ng-show="editor.index == 2">
<div class="span12"> <div class="span12">
<table class="table table-condensed table-striped"> <table class="table table-condensed table-striped">
<thead> <thead>
...@@ -87,5 +89,5 @@ ...@@ -87,5 +89,5 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-success" ng-click="dismiss();reset_panel();dashboard.refresh()">Close</button> <button type="button" class="btn btn-success" ng-click="editor.index=0;dismiss();reset_panel();dashboard.refresh()">Close</button>
</div> </div>
\ No newline at end of file
partials/paneleditor.html
<div class="modal-header"> <div class="modal-body" >
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <div class="pull-right editor-title">{{panel.type}} settings</div>
<h3>{{panel.title}} Editor</h3>
</div>
<div class="modal-body">
<h4>General <small> panel settings</small></h4> <div ng-model="editor.index" bs-tabs>
<div ng-repeat="tab in ['General','Panel']" data-title="{{tab}}">
</div>
</div>
<div ng-show="editor.index == 0">
<h4>{{panel.title}} General <small> panel settings</small></h4>
<div ng-include src="'partials/panelgeneral.html'"></div> <div ng-include src="'partials/panelgeneral.html'"></div>
</div>
<div ng-show="editor.index == 1">
<h4 style="text-transform: capitalize;">{{panel.type}} <small> panel settings. <strong ng-show="!_.isUndefined(panel.status)">({{panel.status}})</strong></small></h4> <h4 style="text-transform: capitalize;">{{panel.type}} <small> panel settings. <strong ng-show="!_.isUndefined(panel.status)">({{panel.status}})</strong></small></h4>
<div ng-include src="edit_path(panel.type)">No additional settings are available for this type of panel.</div> <div ng-include src="edit_path(panel.type)">No additional settings are available for this type of panel.</div>
</div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<!-- close_edit() is provided here to allow for a scope to perform action on dismiss --> <!-- close_edit() is provided here to allow for a scope to perform action on dismiss -->
<button type="button" class="btn btn-success" ng-click="close_edit();dismiss()">Close</button> <button type="button" class="btn btn-success" ng-click="editor.index=0;close_edit();dismiss()">Close</button>
</div> </div>
\ No newline at end of file
partials/querySelect.html 0 → 100644
<style>
.querySelect .query {
margin-right: 5px;
}
</style>
<h4>Queries</h4>
<div class="span2" style="margin-left:0px">
<select class="input-small" ng-change="set_refresh(true);" ng-model="panel.queries.mode" ng-options="f for f in ['all','pinned','selected']"></select>
</div>
<div class="span9 querySelect" ng-show="panel.queries.mode == 'selected'">
<span ng-repeat="id in querySrv.ids" class="query badge">
<i ng-click="panel.queries.ids = _.toggleInOut(panel.queries.ids,id);set_refresh(true);" ng-class="{'icon-check': _.contains(panel.queries.ids,id),'icon-check-empty': !_.contains(panel.queries.ids,id)}"></i> <i class="icon-circle" ng-style="{color: querySrv.list[id].color}"></i><span> {{querySrv.list[id].alias || querySrv.list[id].query}}</span>
</span>
</div>
partials/roweditor.html
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>{{row.title}} <small>row editor</small></h3>
</div>
<div class="modal-body"> <div class="modal-body">
<h4>Row Control</h4> <div class="pull-right editor-title">Row settings</div>
<div class="row-fluid">
<div ng-model="editor.index" bs-tabs>
<div ng-repeat="tab in ['General','Panels']" data-title="{{tab}}">
</div>
</div>
<div class="row-fluid" ng-show="editor.index == 0">
<div class="span4"> <div class="span4">
<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>
...@@ -18,7 +20,7 @@ ...@@ -18,7 +20,7 @@
<label class="small"> Collapsable </label><input type="checkbox" ng-model="row.collapsable" ng-checked="row.collapsable" /> <label class="small"> Collapsable </label><input type="checkbox" ng-model="row.collapsable" ng-checked="row.collapsable" />
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid" ng-show="editor.index == 1">
<h4>New Panel</h4> <h4>New Panel</h4>
<form class="input-append"> <form class="input-append">
<select class="input-medium input-append" ng-model="panel.type" ng-options="f for f in config.modules|stringSort"></select> <select class="input-medium input-append" ng-model="panel.type" ng-options="f for f in config.modules|stringSort"></select>
...@@ -30,7 +32,7 @@ ...@@ -30,7 +32,7 @@
<div add-panel="{{panel.type}}"></div> <div add-panel="{{panel.type}}"></div>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid" ng-show="editor.index == 1">
<div class="span12"> <div class="span12">
<h4>Panels</h4> <h4>Panels</h4>
<table class="table table-condensed table-striped"> <table class="table table-condensed table-striped">
......
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