IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-13 00:55:47 -06:00
Code Issues Packages Projects Releases Wiki Activity

Some clean up and polish of data source edit view

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-02-28 14:00:04 +01:00
parent ae3b9617b6
commit 962b316bcf
7 changed files with 109 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/app/features/org/partials/datasourceEdit.html
View File

@ -9,39 +9,63 @@
<div class="page-container"> <div class="page-container">
<div class="page"> <div class="page">
<h2 ng-show="isNew">Add data source</h2> <h2 ng-show="isNew">Add data source</h2>
<h2 ng-show="!isNew">Edit {{current.name}}</h2> <h2 ng-show="!isNew">Edit data source</h2>
<form name="editForm"> <form name="editForm">
<div class="editor-row"> <div class="tight-form">
<div class="editor-option"> <ul class="tight-form-list">
<label class="small">Data source name</label> <li class="tight-form-item" style="width: 80px">
<input type="text" class="input-large" ng-model='current.name' placeholder="production" required></input> Name
</div> </li>
<div class="editor-option"> <li>
<label class="small">Type</label> <li>
<select class="input-large" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select> <input type="text" class="input-xlarge tight-form-input" ng-model="current.name" placeholder="my data source name" required>
</div> </li>
<editor-opt-bool text="Mark as default" model="current.isDefault" change="render()"></editor-opt-bool> </li>
<li class="tight-form-item">
Default&nbsp;
<input class="cr1" id="current.isDefault" type="checkbox" ng-model="current.isDefault" ng-checked="current.isDefault">
<label for="current.isDefault" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div> </div>
<div class="tight-form">
<div class="editor-row"> <ul class="tight-form-list">
<div class="editor-option"> <li class="tight-form-item" style="width: 80px">
<label class="small">Url</label> Type
<input type="text" style="width: 450px" ng-model='current.url' placeholder="http://my.graphite.com:8080" required></input> </li>
</div> <li>
<div class="editor-option"> <select class="input-xlarge tight-form-input" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
<label class="small">Access method <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</label> </li>
<select class="input-medium" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select> </ul>
</div> <div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Url
</li>
<li>
<input type="text" class="tight-form-input input-xlarge" ng-model='current.url' placeholder="http://my.graphite.com:8080" required></input>
</li>
<li class="tight-form-item">
Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</label>
</li>
<li>
<select class="input-medium tight-form-input" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
</li>
</ul>
<div class="clearfix"></div>
</div> </div>
<div ng-include="datasourceMeta.partials.config" ng-if="datasourceMeta.partials.config"></div> <div ng-include="datasourceMeta.partials.config" ng-if="datasourceMeta.partials.config"></div>
<br> <br>
<div class="pull-right">
<button type="submit" class="btn btn-success" ng-show="isNew" ng-click="add()">Add</button> <button type="submit" class="btn btn-success" ng-show="isNew" ng-click="add()">Add</button>
<button type="submit" class="btn btn-success" ng-show="!isNew" ng-click="update()">Update</button> <button type="submit" class="btn btn-success" ng-show="!isNew" ng-click="update()">Update</button>
<a class="btn btn-inverse" ng-show="!isNew" href="account/datasources">Cancel</a> <a class="btn btn-inverse" ng-show="!isNew" href="datasources">Cancel</a>
</div>
<br> <br>
</form> </form>
</div> </div>

4
src/app/panels/graph/axisEditor.html
View File

@ -142,7 +142,7 @@
<div class="editor-row"> <div class="editor-row">
<div class="section"> <div class="section">
<div class="tight-form"> <div class="tight-form last">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px"> <li class="tight-form-item" style="width: 80px">
<strong>Legend</strong> <strong>Legend</strong>
@ -176,7 +176,7 @@
</div> </div>
</div> </div>
<div class="section"> <div class="section">
<div class="tight-form"> <div class="tight-form last">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px"> <li class="tight-form-item" style="width: 100px">
<strong>Legend values</strong> <strong>Legend values</strong>

20
src/app/plugins/datasource/elasticsearch/partials/config.html
View File

@ -1,11 +1,15 @@
<div class="editor-row"> <h2>Elastic search details</h2>
<div class="section">
<h5>Elastic search details</h5> <div class="tight-form last">
<div class="editor-option"> <ul class="tight-form-list">
<label class="small">Index name</label> <li class="tight-form-item" style="width: 80px">
<input type="text" class="input-large" required ng-model='current.database' placeholder=""></input> Index name
</div> </li>
</div> <li>
<input type="text" class="tight-form-input input-xxlarge last" ng-model='current.database' placeholder="" required></input>
</li>
</ul>
<div class="clearfix"></div>
</div> </div>

2
src/app/plugins/datasource/influxdb_08/funcEditor.js
View File

@ -8,7 +8,7 @@ function (angular, _, $) {
angular angular
.module('grafana.directives') .module('grafana.directives')
.directive('influxdbFuncEditor', function($compile) { .directive('influxdbFuncEditor08', function($compile) {
var funcSpanTemplate = '<a gf-dropdown="functionMenu" class="dropdown-toggle" ' + var funcSpanTemplate = '<a gf-dropdown="functionMenu" class="dropdown-toggle" ' +
'data-toggle="dropdown">{{target.function}}</a><span>(</span>'; 'data-toggle="dropdown">{{target.function}}</a><span>(</span>';

50
src/app/plugins/datasource/influxdb_08/partials/config.html
View File

@ -1,19 +1,37 @@
<div class="editor-row"> <h2>InfluxDB Details</h2>
<div class="section">
<h5>InfluxDB Details</h5> <div class="tight-form">
<div class="editor-option"> <ul class="tight-form-list">
<label class="small">Database name</label> <li class="tight-form-item" style="width: 80px">
<input type="text" class="input-medium" required ng-model='current.database' placeholder=""></input> Database
</div> </li>
<div class="editor-option"> <li>
<label class="small">User</label> <input type="text" class="tight-form-input input-xxlarge last" ng-model='current.database' placeholder="" required></input>
<input type="text" class="input-medium" ng-model='current.user' placeholder=""></input> </li>
</div> </ul>
<div class="editor-option"> <div class="clearfix"></div>
<label class="small">Password</label> </div>
<input type="password" class="input-medium" ng-model='current.password' placeholder=""></input> <div class="tight-form">
</div> <ul class="tight-form-list">
</div> <li class="tight-form-item" style="width: 80px">
User
</li>
<li>
<input type="text" class="tight-form-input input-xxlarge last" ng-model='current.user' placeholder="" required></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Password
</li>
<li>
<input type="text" class="tight-form-input input-xxlarge last" ng-model='current.password' placeholder="" required></input>
</li>
</ul>
<div class="clearfix"></div>
</div> </div>

2
src/app/plugins/datasource/influxdb_08/partials/query.editor.html
View File

@ -117,7 +117,7 @@
select select
</li> </li>
<li class="dropdown"> <li class="dropdown">
<span influxdb-func-editor class="tight-form-item tight-form-func"> <span influxdb-func-editor08 class="tight-form-item tight-form-func">
</span> </span>
</li> </li>

12
src/css/less/tightform.less
View File

@ -19,6 +19,12 @@
} }
} }
.spaced-form {
.tight-form {
margin: 7px 0;
}
}
.borderless { .borderless {
.tight-form-item, .tight-form-item,
.tight-form-input { .tight-form-input {
@ -140,13 +146,13 @@ input[type=text].tight-form-clear-input {
[type=email], [type=email],
[type=number], [type=number],
[type=password] { [type=password] {
&.tight-form-input { &.tight-form-input {
border: none; border: none;
border-right: 1px solid @grafanaTargetSegmentBorder; border-right: 1px solid @grafanaTargetSegmentBorder;
margin: 0px; margin: 0px;
border-radius: 0; border-radius: 0;
padding: 8px 4px; padding: 18px 6px;
box-sizing: border-box;
&.last { &.last {
border-right: none; border-right: none;
} }
@ -163,7 +169,7 @@ select.tight-form-input {
margin: 0px; margin: 0px;
border-radius: 0; border-radius: 0;
height: 36px; height: 36px;
padding: 8px 5px; padding: 8px 3px;
&.last { &.last {
border-right: none; border-right: none;
} }