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

ux(query-editors): more progress on elastic query editor

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-04-17 22:04:43 -04:00
parent a1faaa133c
commit 4c4835e869
10 changed files with 45 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/panel/partials/query_editor_row.html
View File

@ -12,7 +12,7 @@
<div class="gf-form-query-content" ng-if="ctrl.collapsed">
<div class="gf-form">
<label class="gf-form-label gf-form-filler pointer" ng-click="ctrl.toggleCollapse()">
<label class="gf-form-label pointer gf-form-label--grow" ng-click="ctrl.toggleCollapse()">
{{ctrl.collapsedText}}
</label>
</div>

4
public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html
View File

@ -17,7 +17,9 @@
</label>
</div>
<div class="gf-form-filler"></div>
<div class="gf-form gf-form--grow">
<label class="gf-form-label gf-form-label--grow"></label>
</div>
<div class="gf-form">
<label class="gf-form-label" ng-if="isFirst">

4
public/app/plugins/datasource/elasticsearch/partials/metric_agg.html
View File

@ -26,7 +26,9 @@
</label>
</div>
<div class="gf-form-filler"></div>
<div class="gf-form gf-form--grow">
<label class="gf-form-label gf-form-label--grow"></label>
</div>
<div class="gf-form">
<label class="gf-form-label" ng-if="isFirst">

4
public/app/plugins/datasource/elasticsearch/partials/query.editor.html
View File

@ -1,7 +1,7 @@
<query-editor-row query-ctrl="ctrl">
<query-editor-row query-ctrl="ctrl" can-collapse="true">
<div class="gf-form-inline">
<div class="gf-form gf-form-flex">
<div class="gf-form gf-form--grow">
<label class="gf-form-label query-keyword width-7">Query</label>
<input type="text" class="gf-form-input" ng-model="ctrl.target.query" spellcheck='false' placeholder="Lucene query" ng-blur="ctrl.refresh()">
</div>

5
public/app/plugins/datasource/elasticsearch/query_ctrl.ts
View File

@ -38,6 +38,11 @@ export class ElasticQueryCtrl extends QueryCtrl {
this.$rootScope.appEvent('elastic-query-updated');
}
getCollapsedText() {
var text = 'Count(), Avg(@value), Group by(@timestamp, 1min) Query';
return text;
}
handleQueryError(err) {
this.error = err.message || 'Failed to issue metric query';
return [];

4
public/app/plugins/datasource/graphite/partials/query.editor.html
View File

@ -18,7 +18,9 @@
<span graphite-add-func></span>
</div>
<div class="gf-form-filler"></div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
</div>

26
public/app/plugins/datasource/influxdb/partials/query.editor.html
View File

@ -16,13 +16,16 @@
<div class="gf-form">
<label class="gf-form-label query-keyword">WHERE</label>
<div ng-repeat="segment in ctrl.tagSegments">
<metric-segment segment="segment" get-options="ctrl.getTagsOrValues(segment, $index)" on-change="ctrl.tagSegmentUpdated(segment, $index)"></metric-segment>
</div>
</div>
<div class="gf-form-filler"></div>
<div class="gf-form" ng-repeat="segment in ctrl.tagSegments">
<metric-segment segment="segment" get-options="ctrl.getTagsOrValues(segment, $index)" on-change="ctrl.tagSegmentUpdated(segment, $index)"></metric-segment>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<div class="gf-form-inline" ng-repeat="selectParts in ctrl.queryModel.selectModels">
@ -49,7 +52,9 @@
</label>
</div>
<div class="gf-form-filler"></div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<div class="gf-form-inline">
@ -66,9 +71,12 @@
</influx-query-part-editor>
<metric-segment segment="ctrl.groupBySegment" get-options="ctrl.getGroupByOptions()" on-change="ctrl.groupByAction(part, $index)"></metric-segment>
</div>
<div class="gf-form-filler"></div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
</div>
@ -83,7 +91,9 @@
<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select>
</div>
</div>
<div class="gf-form-filler"></div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
</query-editor-row>

2
public/sass/components/_drop.scss
View File

@ -1,4 +1,4 @@
$popover-arrow-size: 1rem;
$popover-arrow-size: 0.7rem;
$color: inherit;
$backgroundColor: $btn-secondary-bg;
$color: $text-color;

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

@ -11,6 +11,10 @@ $gf-form-margin: 0.25rem;
&--offset-1 {
margin-left: $spacer;
}
&--grow {
flex-grow: 1;
}
}
.gf-form-group {
@ -22,10 +26,6 @@ $gf-form-margin: 0.25rem;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
.gf-form-flex {
flex-grow: 1;
}
}
.gf-form-button-row {
@ -48,16 +48,12 @@ $gf-form-margin: 0.25rem;
border: $input-btn-border-width solid transparent;
@include border-radius($label-border-radius-sm);
}
.gf-form-filler {
margin-right: $gf-form-margin;
margin-bottom: $gf-form-margin;
flex-grow: 1;
background-color: $input-label-bg;
border: $input-btn-border-width solid transparent;
@include border-radius($label-border-radius-sm);
&--grow {
flex-grow: 1;
min-height: 2.7rem;
}
}
.gf-form-checkbox {

2
public/sass/mixins/_drop_element.scss
View File

@ -10,7 +10,7 @@
font-family: inherit;
background: $theme-bg;
color: $theme-color;
padding: $spacer;
padding: 0.65rem;
font-size: $font-size-sm;
max-width: 20rem;