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">
<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">
<div class="editor-row">
<div class="editor-option">
<label class="small">Data source name</label>
<input type="text" class="input-large" ng-model='current.name' placeholder="production" required></input>
</div>
<div class="editor-option">
<label class="small">Type</label>
<select class="input-large" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
</div>
<editor-opt-bool text="Mark as default" model="current.isDefault" change="render()"></editor-opt-bool>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Name
</li>
<li>
<li>
<input type="text" class="input-xlarge tight-form-input" ng-model="current.name" placeholder="my data source name" required>
</li>
</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 class="editor-row">
<div class="editor-option">
<label class="small">Url</label>
<input type="text" style="width: 450px" ng-model='current.url' placeholder="http://my.graphite.com:8080" required></input>
</div>
<div class="editor-option">
<label class="small">Access method <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</label>
<select class="input-medium" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Type
</li>
<li>
<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>
</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">
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 ng-include="datasourceMeta.partials.config" ng-if="datasourceMeta.partials.config"></div>
<br>
<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>
<a class="btn btn-inverse" ng-show="!isNew" href="account/datasources">Cancel</a>
<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="update()">Update</button>
<a class="btn btn-inverse" ng-show="!isNew" href="datasources">Cancel</a>
</div>
<br>
</form>
</div>

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

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

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

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

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

@ -8,7 +8,7 @@ function (angular, _, $) {
angular
.module('grafana.directives')
.directive('influxdbFuncEditor', function($compile) {
.directive('influxdbFuncEditor08', function($compile) {
var funcSpanTemplate = '<a gf-dropdown="functionMenu" class="dropdown-toggle" ' +
'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">
<div class="section">
<h5>InfluxDB Details</h5>
<div class="editor-option">
<label class="small">Database name</label>
<input type="text" class="input-medium" required ng-model='current.database' placeholder=""></input>
</div>
<div class="editor-option">
<label class="small">User</label>
<input type="text" class="input-medium" ng-model='current.user' placeholder=""></input>
</div>
<div class="editor-option">
<label class="small">Password</label>
<input type="password" class="input-medium" ng-model='current.password' placeholder=""></input>
</div>
</div>
<h2>InfluxDB Details</h2>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Database
</li>
<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 class="tight-form">
<ul class="tight-form-list">
<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>

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

@ -117,7 +117,7 @@
select
</li>
<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>
</li>

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

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