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 and fixes

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-04-18 11:35:24 -04:00
parent 14ec69a160
commit 39cdaf5175
6 changed files with 76 additions and 215 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

@ -23,7 +23,7 @@
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label"> <label class="gf-form-label">
<a class="pointer" tabindex="1" ng-click="ctrl.toggleCollapse()"> <a class="pointer" tabindex="1" ng-click="ctrl.toggleCollapse()" disabled>
<i class="fa fa-fw fa-chevron-down" ng-hide="ctrl.collapsed"></i> <i class="fa fa-fw fa-chevron-down" ng-hide="ctrl.collapsed"></i>
<i class="fa fa-fw fa-chevron-left" ng-show="ctrl.collapsed"></i> <i class="fa fa-fw fa-chevron-left" ng-show="ctrl.collapsed"></i>
</a> </a>

1
public/app/plugins/datasource/elasticsearch/bucket_agg.js
View File

@ -124,6 +124,7 @@ function (angular, _, queryDef) {
} }
} }
console.log(settingsLinkText);
$scope.settingsLinkText = settingsLinkText; $scope.settingsLinkText = settingsLinkText;
$scope.agg.settings = settings; $scope.agg.settings = settings;
return true; return true;

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

@ -5,10 +5,12 @@
<span ng-hide="isFirst">Then by</span> <span ng-hide="isFirst">Then by</span>
</label> </label>
<metric-segment-model property="agg.type" options="bucketAggTypes" on-change="onTypeChanged()" custom="false" css-class="tight-form-item-large"></metric-segment-model> <metric-segment-model property="agg.type" options="bucketAggTypes" on-change="onTypeChanged()" custom="false" css-class="width-10"></metric-segment-model>
<metric-segment-model ng-if="agg.field" property="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="tight-form-item-xxlarge"></metric-segment> <metric-segment-model ng-if="agg.field" property="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="width-12"></metric-segment>
</div>
<label class="gf-form-label" ng-if="settingsLinkText"> <div class="gf-form gf-form--grow">
<label class="gf-form-label gf-form-label--grow">
<a ng-click="toggleOptions()"> <a ng-click="toggleOptions()">
<i class="fa fa-caret-down" ng-show="showOptions"></i> <i class="fa fa-caret-down" ng-show="showOptions"></i>
<i class="fa fa-caret-right" ng-hide="showOptions"></i> <i class="fa fa-caret-right" ng-hide="showOptions"></i>
@ -17,10 +19,6 @@
</label> </label>
</div> </div>
<div class="gf-form gf-form--grow">
<label class="gf-form-label gf-form-label--grow"></label>
</div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label" ng-if="isFirst"> <label class="gf-form-label" ng-if="isFirst">
<a class="pointer" ng-click="addBucketAgg()"><i class="fa fa-plus"></i></a> <a class="pointer" ng-click="addBucketAgg()"><i class="fa fa-plus"></i></a>
@ -31,99 +29,61 @@
</div> </div>
</div> </div>
<div class="tight-form" ng-if="showOptions"> <div class="gf-form-group" ng-if="showOptions">
<div class="tight-form-inner-box" ng-if="agg.type === 'date_histogram'"> <div ng-if="agg.type === 'date_histogram'">
<div class="tight-form"> <div class="gf-form offset-width-7">
<ul class="tight-form-list"> <label class="gf-form-label width-10">Interval</label>
<li class="tight-form-item" style="width: 170px"> <metric-segment-model property="agg.settings.interval" get-options="getIntervalOptions()" on-change="onChangeInternal()" css-class="width-12" custom="true"></metric-segment-model>
Interval
</li>
<li>
<metric-segment-model property="agg.settings.interval" get-options="getIntervalOptions()" on-change="onChangeInternal()" css-class="last" custom="true"></metric-segment-model>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 170px">
Min Doc Count
</li>
<li>
<input type="number" class="tight-form-input" ng-model="agg.settings.min_doc_count" ng-blur="onChangeInternal()">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 170px">
Trim edges points
</li>
<li>
<input class="tight-form-input" type="number" ng-model="agg.settings.trimEdges" ng-change="onChangeInternal()">
</li>
<li class="tight-form-item last">
<i class="fa fa-question-circle" bs-tooltip="'Trim the edges on the timeseries x datapoints'" data-placement="right"></i>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="tight-form-inner-box" ng-if="agg.type === 'terms'">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 60px">
Order
</li>
<li>
<metric-segment-model property="agg.settings.order" options="orderOptions" on-change="onChangeInternal()" css-class="last"></metric-segment-model>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 60px">
Size
</li>
<li>
<metric-segment-model property="agg.settings.size" options="sizeOptions" on-change="onChangeInternal()" css-class="last"></metric-segment-model>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 60px">
Order By
</li>
<li>
<metric-segment-model property="agg.settings.orderBy" options="orderByOptions" on-change="onChangeInternal()" css-class="last"></metric-segment-model>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="tight-form-inner-box" ng-if="agg.type === 'filters'">
<div class="tight-form" ng-repeat="filter in agg.settings.filters" ng-class="{last: $last}">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
Query {{$index + 1}}
</li>
<li>
<input type="text" class="tight-form-input input-large" ng-model="filter.query" spellcheck='false' placeholder="Lucene query" ng-blur="onChangeInternal()">
</li>
<li class="tight-form-item last" ng-if="$first">
<a class="pointer" ng-click="addFiltersQuery()"><i class="fa fa-plus"></i></a>
</li>
<li class="tight-form-item last" ng-if="!$first">
<a class="pointer" ng-click="removeFiltersQuery(filter)"><i class="fa fa-minus"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div> </div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Min Doc Count</label>
<input type="number" class="gf-form-input max-width-12" ng-model="agg.settings.min_doc_count" ng-blur="onChangeInternal()">
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">
Trim edges points
<info-popver mode="right-normal">
Trim the edges on the timeseries x datapoints
</info-popover>
</label>
<input class="gf-form-input max-width-12" type="number" ng-model="agg.settings.trimEdges" ng-change="onChangeInternal()">
</div>
</div>
<div ng-if="agg.type === 'terms'">
<div class="gf-form offset-width-7">
<label class="gf-form-label">Order</label>
<metric-segment-model property="agg.settings.order" options="orderOptions" on-change="onChangeInternal()" css-class="width-12"></metric-segment-model>
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Size</label>
<metric-segment-model property="agg.settings.size" options="sizeOptions" on-change="onChangeInternal()" css-class="width-12"></metric-segment-model>
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Order By</label>
<metric-segment-model property="agg.settings.orderBy" options="orderByOptions" on-change="onChangeInternal()" css-class="width-12"></metric-segment-model>
</div>
</div>
<div ng-if="agg.type === 'filters'">
<div class="gf-form-inline" ng-repeat="filter in agg.settings.filters" ng-class="{last: $last}">
<div class="gf-form">
<label class="gf-form-item width-10">Query {{$index + 1}}</label>
<input type="text" class="gf-form-input max-width-12" ng-model="filter.query" spellcheck='false' placeholder="Lucene query" ng-blur="onChangeInternal()">
</div>
<div class="gf-form">
<label class="gf-form-label" ng-if="$first">
<a class="pointer" ng-click="addFiltersQuery()"><i class="fa fa-plus"></i></a>
</label>
<label class="gf-form-label" ng-if="!$first">
<a class="pointer" ng-click="removeFiltersQuery(filter)"><i class="fa fa-minus"></i></a>
</label>
</div>
</div>
</div> </div>
</div> </div>

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

@ -16,9 +16,9 @@
<metric-segment-model ng-if="aggDef.isPipelineAgg" property="agg.pipelineAgg" options="pipelineAggOptions" on-change="onChangeInternal()" custom="false" css-class="width-12"></metric-segment-model> <metric-segment-model ng-if="aggDef.isPipelineAgg" property="agg.pipelineAgg" options="pipelineAggOptions" on-change="onChangeInternal()" custom="false" css-class="width-12"></metric-segment-model>
</div> </div>
<div class="gf-form" ng-if="settingsLinkText"> <div class="gf-form gf-form--grow">
<label class="gf-form-label"> <label class="gf-form-label gf-form-label--grow">
<a ng-click="toggleOptions()"> <a ng-click="toggleOptions()" ng-if="settingsLinkText">
<i class="fa fa-caret-down" ng-show="showOptions"></i> <i class="fa fa-caret-down" ng-show="showOptions"></i>
<i class="fa fa-caret-right" ng-hide="showOptions"></i> <i class="fa fa-caret-right" ng-hide="showOptions"></i>
{{settingsLinkText}} {{settingsLinkText}}
@ -26,10 +26,6 @@
</label> </label>
</div> </div>
<div class="gf-form gf-form--grow">
<label class="gf-form-label gf-form-label--grow"></label>
</div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label" ng-if="isFirst"> <label class="gf-form-label" ng-if="isFirst">
<a class="pointer" ng-click="addMetricAgg()"><i class="fa fa-plus"></i></a> <a class="pointer" ng-click="addMetricAgg()"><i class="fa fa-plus"></i></a>

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

@ -57,97 +57,6 @@
</div> </div>
</div> </div>
<<<<<<< HEAD
<div ng-hide="ctrl.target.rawQuery">
<div class="gf-form-inline query-editor-secondary-row" ng-repeat="selectParts in ctrl.queryModel.selectModels">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">SELECT</label>
<influx-query-part-editor
ng-repeat="part in selectParts"
class="gf-form-label tight-form-func"
part="part"
remove-action="ctrl.removeSelectPart(selectParts, part)"
part-updated="ctrl.selectPartUpdated(selectParts, part)"
get-options="ctrl.getPartOptions(part)">
</influx-query-part-editor>
<label class="dropdown"
dropdown-typeahead="ctrl.selectMenu"
dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
</label>
</div>
</div>
<div class="gf-form-inline query-editor-secondary-row">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">GROUP BY</label>
<influx-query-part-editor
class="gf-form-label tight-form-func"
ng-repeat="part in ctrl.queryModel.groupByParts"
part="part"
remove-action="ctrl.removeGroupByPart(part, $index)"
part-updated="ctrl.refresh();"
get-options="ctrl.getPartOptions(part)">
</influx-query-part-editor>
<metric-segment segment="ctrl.groupBySegment" get-options="ctrl.getGroupByOptions()" on-change="ctrl.groupByAction(part, $index)"></metric-segment>
</div>
</div>
</div>
||||||| merged common ancestors
<div ng-hide="ctrl.target.rawQuery">
<div class="gf-form-inline query-editor-secondary-row" ng-repeat="selectParts in ctrl.queryModel.selectModels">
<div class="gf-form">
<label class="gf-form-label query-keyword width-6">
<span ng-show="$index === 0">SELECT</span>
</label>
<influx-query-part-editor
ng-repeat="part in selectParts"
class="gf-form-label tight-form-func"
part="part"
remove-action="ctrl.removeSelectPart(selectParts, part)"
part-updated="ctrl.selectPartUpdated(selectParts, part)"
get-options="ctrl.getPartOptions(part)">
</influx-query-part-editor>
<label class="dropdown"
dropdown-typeahead="ctrl.selectMenu"
dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
</label>
</div>
</div>
<div ng-hide="ctrl.target.rawQuery" ng-if="false">
<div class="tight-form" ng-repeat="selectParts in ctrl.queryModel.selectModels">
<ul class="tight-form-list">
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
<span ng-show="$index === 0">SELECT</span>
</li>
<li ng-repeat="part in selectParts">
<influx-query-part-editor part="part" class="tight-form-item tight-form-func" remove-action="ctrl.removeSelectPart(selectParts, part)" part-updated="ctrl.selectPartUpdated(selectParts, part)" get-options="ctrl.getPartOptions(part)"></influx-query-part-editor>
</li>
<li class="dropdown" dropdown-typeahead="ctrl.selectMenu" dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
<span>GROUP BY</span>
</li>
<li ng-repeat="part in ctrl.queryModel.groupByParts">
<influx-query-part-editor part="part" class="tight-form-item tight-form-func" remove-action="ctrl.removeGroupByPart(part, $index)" part-updated="ctrl.refresh();" get-options="ctrl.getPartOptions(part)"></influx-query-part-editor>
</li>
<li>
<metric-segment segment="ctrl.groupBySegment" get-options="ctrl.getGroupByOptions()" on-change="ctrl.groupByAction(part, $index)"></metric-segment>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
=======
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label query-keyword width-7"> <label class="gf-form-label query-keyword width-7">
@ -160,28 +69,13 @@
class="gf-form-label query-part" class="gf-form-label query-part"
remove-action="ctrl.removeGroupByPart(part, $index)" part-updated="ctrl.refresh();" get-options="ctrl.getPartOptions(part)"> remove-action="ctrl.removeGroupByPart(part, $index)" part-updated="ctrl.refresh();" get-options="ctrl.getPartOptions(part)">
</influx-query-part-editor> </influx-query-part-editor>
<metric-segment segment="ctrl.groupBySegment" get-options="ctrl.getGroupByOptions()" on-change="ctrl.groupByAction(part, $index)"></metric-segment>
>>>>>>> 4515e6678346e711c34d379bba45504eae6a5dc8
<<<<<<< HEAD
<div class="gf-form-inline query-editor-secondary-row">
<div class="gf-form max-width-30">
<label class="gf-form-label query-keyword width-7">ALIAS BY</label>
<input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()">
||||||| merged common ancestors
<div class="gf-form-inline query-editor-secondary-row">
<div class="gf-form max-width-30">
<label class="gf-form-label query-keyword">ALIAS BY</label>
<input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()">
=======
</div> </div>
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div> <div class="gf-form-label gf-form-label--grow"></div>
</div> </div>
</div> </div>
>>>>>>> 4515e6678346e711c34d379bba45504eae6a5dc8
</div> </div>
<div class="gf-form-inline"> <div class="gf-form-inline">

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

@ -17,6 +17,16 @@ $gf-form-margin: 0.25rem;
} }
} }
.gf-form-disabled {
color: $text-color-weak;
.query-keyword,
a,
.gf-form-input {
color: $text-color-weak;
}
}
.gf-form-group { .gf-form-group {
margin-bottom: $spacer * 2.5; margin-bottom: $spacer * 2.5;
} }
@ -52,7 +62,7 @@ $gf-form-margin: 0.25rem;
&--grow { &--grow {
flex-grow: 1; flex-grow: 1;
min-height: 2.7rem; min-height: 2.65rem;
} }
} }
@ -221,7 +231,7 @@ $gf-form-margin: 0.25rem;
} }
.gf-form-query-content { .gf-form-query-content {
flex-grow: 1; flex-grow: 2;
&--collapsed { &--collapsed {
overflow: hidden; overflow: hidden;