IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-26 19:00:54 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux(): varios tweaks and polish

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-02-24 17:49:08 +01:00
parent e627820d3d
commit 22ae259cf5
5 changed files with 76 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/app/features/annotations/partials/editor.html
View File

@ -88,13 +88,12 @@
</rebuild-on-change>
<div class="gf-form">
<div class="gf-form-button-row">
<div class="gf-form-button-row p-y-0">
<button ng-show="mode === 'new'" type="button" class="btn gf-form-button btn-success" ng-click="add()">Add</button>
<button ng-show="mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="update()">Update</button>
</div>
</div>
</div>
</div>
</div>

106
public/app/features/templating/partials/editor.html
View File

@ -71,29 +71,34 @@
</div>
<div ng-if="mode === 'edit' || mode === 'new'">
<h5>Variable</h5>
<h5 class="section-heading">Variable</h5>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-7">Name</span>
<input type="text" class="gf-form-input max-width-14" placeholder="name" ng-model='current.name'></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Type</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input max-width-10" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
<span class="gf-form-label width-7">Name</span>
<input type="text" class="gf-form-input max-width-14" placeholder="name" ng-model='current.name'></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Type</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input max-width-10" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
</div>
</div>
<div class="gf-form">
<span class="gf-form-label width-7" ng-show="current.type === 'query'">Data source</span>
<div class="gf-form-select-wrapper" ng-show="current.type === 'query'">
<select class="gf-form-input max-width-14" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
</div>
</div>
</div>
<div class="gf-form">
<span class="gf-form-label width-7" ng-show="current.type === 'query'">Data source</span>
<div class="gf-form-select-wrapper" ng-show="current.type === 'query'">
<select class="gf-form-input max-width-14" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
</div>
<span class="gf-form-label width-7">Label</span>
<input type="text" class="gf-form-input max-width-14" ng-model='current.label' placeholder="optional display name"></input>
<editor-checkbox class="width-13" text="Hide label" model="current.hideLabel" change="runQuery()"></editor-checkbox>
</div>
</div>
<h5>Value Options</h5>
<h5 class="section-heading">Value Options</h5>
<div ng-show="current.type === 'interval'" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-7">Values</span>
@ -116,16 +121,16 @@
<input type="text" class="gf-form-input max-width-22" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
</div>
<div class="gf-form ">
<editor-checkbox class="width-13" text="All value" model="current.includeAll" change="runQuery()"></editor-checkbox>
<input ng-show="current.includeAll" type="text" class="gf-form-input max-width-22" ng-model='current.options[0].value' style="margin-left: 4px;"></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-13" ng-show="current.includeAll">All format</span>
<div class="gf-form-select-wrapper max-width-10" ng-show="current.includeAll">
<select class="gf-form-input" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values', 'lucene', 'pipe']"></select>
</div>
</div>
</div>
<editor-checkbox class="width-13" text="All value" model="current.includeAll" change="runQuery()"></editor-checkbox>
<input ng-show="current.includeAll" type="text" class="gf-form-input max-width-22" ng-model='current.options[0].value' style="margin-left: 4px;"></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-13" ng-show="current.includeAll">All format</span>
<div class="gf-form-select-wrapper max-width-10" ng-show="current.includeAll">
<select class="gf-form-input" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values', 'lucene', 'pipe']"></select>
</div>
</div>
</div>
<div ng-show="current.type === 'query'" class="gf-form-group">
<div class="gf-form">
@ -140,42 +145,35 @@
<input type="text" class="gf-form-input" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
</div>
<div class="gf-form">
<editor-checkbox class="width-13" text="All value" model="current.includeAll" change="runQuery()"></editor-checkbox>
<input ng-show="current.includeAll" type="text" class="gf-form-input" ng-model='current.options[0].value'></input>
<span class="gf-form-label" ng-show="current.includeAll">All format</span>
<div class="gf-form-select-wrapper max-width-10" ng-show="current.includeAll">
<select class="gf-form-input" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values', 'lucene', 'pipe']"></select>
<span class="gf-form-label width-7">All value</span>
<editor-checkbox class="width-13" text="Enable" model="current.includeAll" change="runQuery()"></editor-checkbox>
</div>
<div class="gf-form-inline" ng-show="current.includeAll">
<div class="gf-form">
<span class="gf-form-label width-7">All format</span>
<div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values', 'lucene', 'pipe']"></select>
</div>
</div>
<div class="gf-form max-width-30">
<span class="gf-form-label width-7">All value</span>
<input type="text" class="gf-form-input" ng-model='current.options[0].value'></input>
</div>
</div>
<div class="gf-form">
<editor-checkbox class="width-13" text="Refresh on load" model="current.refresh"></editor-checkbox>
<span class="gf-form-label width-7">Update</span>
<editor-checkbox text="On Dashboard Load" model="current.refresh"></editor-checkbox>
<tip>Check if you want values to be updated on dashboard load, will slow down dashboard load time</tip>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="gf-form-group">
<h5>Display options</h5>
<div class="gf-form">
<span class="gf-form-label width-8">Variable Label</span>
<input type="text" class="gf-form-input max-width-12" ng-model='current.label' placeholder=""></input>
<editor-checkbox class="width-13" text="Hide label" model="current.hideLabel" change="runQuery()"></editor-checkbox>
</div>
</div>
</div>
<div class="col-md-6" ng-hide="current.type === 'interval'">
<div class="gf-form-group" >
<h5>Multi-value selection <tip>Enables multiple values to be selected at the same time</tip></h5>
<div class="gf-form">
<editor-checkbox text="Enable" model="current.multi" change="runQuery()"></editor-checkbox>
<span class="gf-form-label" ng-show="current.multi">Multi format</span>
<div class="gf-form-select-wrapper max-width-10" ng-show="current.multi">
<select class="gf-form-input" ng-model="current.multiFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'regex values', 'lucene', 'pipe']"></select>
</div>
</div>
<div class="gf-form-group" >
<h5 class="section-heading">Multi-value selection <tip>Enables multiple values to be selected at the same time</tip></h5>
<div class="gf-form">
<editor-checkbox text="Enable" model="current.multi" change="runQuery()"></editor-checkbox>
<span class="gf-form-label" ng-show="current.multi">Multi format</span>
<div class="gf-form-select-wrapper max-width-10" ng-show="current.multi">
<select class="gf-form-input" ng-model="current.multiFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'regex values', 'lucene', 'pipe']"></select>
</div>
</div>
</div>
@ -205,7 +203,7 @@
</div>
</div>
<div class="gf-form-button-row" style="margin-top: 20px">
<div class="gf-form-button-row p-y-0">
<button type="button" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
<button type="button" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
</div>

4
public/app/plugins/datasource/influxdb/partials/annotations.editor.html
View File

@ -1,13 +1,13 @@
<h6>Query</h6>
<h5 class="section-heading">Query</h5>
<div class="gf-form-group">
<div class="gf-form">
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.query' placeholder="select text from events where $timeFilter"></input>
</div>
</div>
<h5 class="section-heading">Column mappings <tip>If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.</tip></h5>
<div class="gf-form-group">
<h6>Column mappings <tip>If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.</tip></h6>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-4">Title</span>

41
public/app/plugins/datasource/prometheus/partials/annotations.editor.html
View File

@ -1,28 +1,27 @@
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-10">Search expression</span>
<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.expr' placeholder="ALERTS"></input>
</div>
</div>
</div>
<div class="gf-form-group">
<h6>Field formats</h6>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-10">Title</span>
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.titleFormat' placeholder="alertname"></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-10">Tags</span>
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.tagKeys' placeholder="label1,label2"></input>
</div>
<h5 class="section-heading">Search expression</h6>
<div class="gf-form-group">
<div class="gf-form">
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.expr' placeholder="ALERTS"></input>
</div>
</div>
<div class="gf-form-group">
<h5 class="section-heading">Field formats</h6>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-10">Text</span>
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.textFormat' placeholder="instance"></input>
<span class="gf-form-label width-5">Title</span>
<input type="text" class="gf-form-input max-width-9" ng-model='ctrl.annotation.titleFormat' placeholder="alertname"></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-5">Tags</span>
<input type="text" class="gf-form-input max-width-9" ng-model='ctrl.annotation.tagKeys' placeholder="label1,label2"></input>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-5">Text</span>
<input type="text" class="gf-form-input max-width-9" ng-model='ctrl.annotation.textFormat' placeholder="instance"></input>
</div>
</div>
</div>
</div>

2
public/sass/components/_gf-form.scss
View File

@ -30,7 +30,7 @@ $gf-form-label-margin: 0.25rem;
}
.gf-form-button-row {
margin-top: $spacer * 1.5;
padding-top: $spacer * 1.5;
a, button {
margin-right: $spacer;
}