Skip to content

N
nexpie-grafana-theme
Commit a1faaa13 by Torkel Ödegaard
Options

feat(): query editors, started work on updated ES query editor

parent 805fd18b
Showing with 134 additions and 168 deletions
public/app/partials/metrics.html
<div class="query-editor-rows gf-form-group">
<div ng-repeat="target in ctrl.panel.targets" ng-class="{'tight-form-disabled': target.hide}">
<div ng-repeat="target in ctrl.panel.targets" ng-class="{'gf-form-disabled': target.hide}">
<rebuild-on-change property="ctrl.panel.datasource || target.datasource" show-null="true">
<plugin-component type="query-ctrl">
</plugin-component>
......
public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">
<span ng-show="isFirst">Group by</span>
<span ng-hide="isFirst">Then by</span>
</li>
<li>
<metric-segment-model property="agg.type" options="bucketAggTypes" on-change="onTypeChanged()" custom="false" css-class="tight-form-item-large"></metric-segment-model>
</li>
<li ng-if="agg.field">
<metric-segment-model property="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="tight-form-item-xxlarge"></metric-segment>
</li>
<li ng-if="!agg.field">
<span class="tight-form-item tight-form-item-xxlarge">&nbsp;</span>
</li>
<li class="tight-form-item last" ng-if="settingsLinkText">
</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 ng-if="agg.field" property="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="tight-form-item-xxlarge"></metric-segment>
<label class="gf-form-label" ng-if="settingsLinkText">
<a ng-click="toggleOptions()">
<i class="fa fa-caret-down" ng-show="showOptions"></i>
<i class="fa fa-caret-right" ng-hide="showOptions"></i>
{{settingsLinkText}}
</a>
</li>
</ul>
</label>
</div>
<ul class="tight-form-list pull-right">
<li class="tight-form-item last" ng-if="isFirst">
<div class="gf-form-filler"></div>
<div class="gf-form">
<label class="gf-form-label" ng-if="isFirst">
<a class="pointer" ng-click="addBucketAgg()"><i class="fa fa-plus"></i></a>
</li>
<li class="tight-form-item last">
</label>
<label class="gf-form-label">
<a class="pointer" ng-click="removeBucketAgg()"><i class="fa fa-minus"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</label>
</div>
</div>
<div class="tight-form" ng-if="showOptions">
......
public/app/plugins/datasource/elasticsearch/partials/metric_agg.html
<div class="tight-form" ng-class="{'tight-form-disabled': agg.hide}">
<ul class="tight-form-list">
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
<div class="gf-form-inline" ng-class="{'gf-form-disabled': agg.hide}">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">
Metric
&nbsp;
<a ng-click="toggleShowMetric()" bs-tooltip="'Click to toggle show / hide metric'">
<i class="fa fa-eye" ng-hide="agg.hide"></i>
<i class="fa fa-eye-slash" ng-show="agg.hide"></i>
</a>
</li>
<li>
<metric-segment-model property="agg.type" options="metricAggTypes" on-change="onTypeChange()" custom="false" css-class="tight-form-item-large"></metric-segment-model>
</li>
<li ng-if="aggDef.requiresField">
<metric-segment-model property="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="tight-form-item-xxlarge"></metric-segment-model>
</li>
<li ng-if="aggDef.isPipelineAgg">
<metric-segment-model property="agg.pipelineAgg" options="pipelineAggOptions" on-change="onChangeInternal()" custom="false" css-class="tight-form-item-xxlarge"></metric-segment-model>
</li>
<li class="tight-form-item last" ng-if="settingsLinkText">
</label>
</div>
<div class="gf-form">
<metric-segment-model property="agg.type" options="metricAggTypes" on-change="onTypeChange()" custom="false" css-class="tight-form-item-large"></metric-segment-model>
<metric-segment-model ng-if="aggDef.requiresField" property="agg.field" get-options="getFieldsInternal()" on-change="onChange()" css-class="tight-form-item-xxlarge"></metric-segment-model>
<metric-segment-model ng-if="aggDef.isPipelineAgg" property="agg.pipelineAgg" options="pipelineAggOptions" on-change="onChangeInternal()" custom="false" css-class="tight-form-item-xxlarge"></metric-segment-model>
</div>
<div class="gf-form" ng-if="settingsLinkText">
<label class="gf-form-label">
<a ng-click="toggleOptions()">
<i class="fa fa-caret-down" ng-show="showOptions"></i>
<i class="fa fa-caret-right" ng-hide="showOptions"></i>
{{settingsLinkText}}
{{settingsLinkText}}
</a>
</li>
</ul>
</label>
</div>
<div class="gf-form-filler"></div>
<ul class="tight-form-list pull-right">
<li class="tight-form-item last" ng-if="isFirst">
<div class="gf-form">
<label class="gf-form-label" ng-if="isFirst">
<a class="pointer" ng-click="addMetricAgg()"><i class="fa fa-plus"></i></a>
</li>
<li class="tight-form-item last" ng-if="!isSingle">
</label>
<label class="gf-form-label" ng-if="!isSingle">
<a class="pointer" ng-click="removeMetricAgg()"><i class="fa fa-minus"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</label>
</div>
</div>
<div class="tight-form" ng-if="showOptions">
<div class="tight-form-inner-box tight-form-container">
<div class="tight-form" ng-if="agg.type === 'derivative'">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 75px;">
Unit
</li>
<li>
<input type="text" class="input-medium tight-form-input last" ng-model="agg.settings.unit" ng-blur="onChangeInternal()" spellcheck='false'>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="gf-form-group" ng-if="showOptions">
<div class="gf-form" ng-if="agg.type === 'derivative'">
<label class="gf-form-label width-8">Unit</label>
<input type="text" class="gf-form-input max-width-10" ng-model="agg.settings.unit" ng-blur="onChangeInternal()" spellcheck='false'>
</div>
<div class="tight-form" ng-if="agg.type === 'moving_avg'">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 75px;">
Window
</li>
<li>
<input type="number" class="input-medium tight-form-input last" ng-model="agg.settings.window" ng-blur="onChangeInternal()" spellcheck='false'>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-if="agg.type === 'moving_avg'">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 75px;">
Model
</li>
<li>
<input type="text" class="input-medium tight-form-input last" ng-change="onChangeInternal()" ng-model="agg.settings.model" blur="onChange()" spellcheck='false'>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last" ng-if="agg.type === 'percentiles'">
<ul class="tight-form-list">
<li class="tight-form-item">
Percentiles
</li>
<li>
<input type="text" class="input-xlarge tight-form-input last" ng-model="agg.settings.percents" array-join ng-blur="onChange()"></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div ng-if="agg.type === 'extended_stats'">
<div class="tight-form" ng-repeat="stat in extendedStats">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
{{stat.text}}
</li>
<li class="tight-form-item last">
<editor-checkbox text="" model="agg.meta.{{stat.value}}" change="onChange()"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="tight-form" ng-if="agg.type === 'extended_stats'">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
Sigma
</li>
<li>
<input type="number" class="input-mini tight-form-input last" placeholder="3" ng-model="agg.settings.sigma" ng-blur="onChange()"></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="gf-form" ng-if="agg.type === 'moving_avg'">
<label class="gf-form-label width-8">Window</label>
<input type="number" class="gf-form-input max-width-10" ng-model="agg.settings.window" ng-blur="onChangeInternal()" spellcheck='false'>
</div>
<div class="tight-form" ng-if="aggDef.supportsInlineScript">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px;">
Script
</li>
<li>
<input type="text" class="input-medium tight-form-input last" empty-to-null ng-model="agg.inlineScript" ng-blur="onChangeInternal()" spellcheck='false' placeholder="_value * 1">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="gf-form" ng-if="agg.type === 'moving_avg'">
<label class="gf-form-label width-8">Model</label>
<input type="text" class="gf-form-input max-width-10" ng-change="onChangeInternal()" ng-model="agg.settings.model" blur="onChange()" spellcheck='false'>
</div>
<div class="gf-form" ng-if="agg.type === 'percentiles'">
<label class="gf-form-label">Percentiles</label>
<input type="text" class="gf-form-input max-width-25" ng-model="agg.settings.percents" array-join ng-blur="onChange()"></input>
</div>
<div class="tight-form" ng-if="aggDef.supportsMissing">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px;">
Missing
<tip>The missing parameter defines how documents that are missing a value should be treated. By default they will be ignored but it is also possible to treat them as if they had a value</tip>
<div ng-if="agg.type === 'extended_stats'">
<div class="gf-form" ng-repeat="stat in extendedStats">
<ul class="gf-form-list">
<li class="tight-form-item" style="width: 100px">
{{stat.text}}
</li>
<li>
<input type="number" class="input-medium tight-form-input last" empty-to-null ng-model="agg.settings.missing" ng-blur="onChangeInternal()" spellcheck='false'>
<li class="tight-form-item last">
<editor-checkbox text="" model="agg.meta.{{stat.value}}" change="onChange()"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="tight-form" ng-if="agg.type === 'extended_stats'">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
Sigma
</li>
<li>
<input type="number" class="input-mini tight-form-input last" placeholder="3" ng-model="agg.settings.sigma" ng-blur="onChange()"></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-if="aggDef.supportsInlineScript">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px;">
Script
</li>
<li>
<input type="text" class="input-medium tight-form-input last" empty-to-null ng-model="agg.inlineScript" ng-blur="onChangeInternal()" spellcheck='false' placeholder="_value * 1">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-if="aggDef.supportsMissing">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px;">
Missing
<tip>The missing parameter defines how documents that are missing a value should be treated. By default they will be ignored but it is also possible to treat them as if they had a value</tip>
</li>
<li>
<input type="number" class="input-medium tight-form-input last" empty-to-null ng-model="agg.settings.missing" ng-blur="onChangeInternal()" spellcheck='false'>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
public/app/plugins/datasource/elasticsearch/partials/query.editor.html
<query-editor-row ctrl="ctrl"></query-editor-row>
<query-editor-row query-ctrl="ctrl">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item query-keyword" style="width: 75px">
Query
</li>
<li>
<input type="text" class="tight-form-input" style="width: 345px;" ng-model="ctrl.target.query" spellcheck='false' placeholder="Lucene query" ng-blur="ctrl.refresh()">
</li>
<li class="tight-form-item query-keyword">
Alias
</li>
<li>
<input type="text" class="tight-form-input" style="width: 200px;" ng-model="ctrl.target.alias" spellcheck='false' placeholder="alias patterns (empty = auto)" ng-blur="ctrl.refresh()">
</li>
</ul>
</div>
<div class="gf-form-inline">
<div class="gf-form gf-form-flex">
<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>
<div class="gf-form max-width-15">
<label class="gf-form-label query-keyword">Alias</label>
<input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false' placeholder="alias patterns (empty = auto)" ng-blur="ctrl.refresh()">
</div>
</div>
<div ng-repeat="agg in ctrl.target.metrics">
<elastic-metric-agg
target="ctrl.target" index="$index"
get-fields="ctrl.getFields($fieldType)"
on-change="ctrl.queryUpdated()"
es-version="ctrl.esVersion">
</elastic-metric-agg>
</div>
<div ng-repeat="agg in ctrl.target.metrics">
<elastic-metric-agg
target="ctrl.target" index="$index"
get-fields="ctrl.getFields($fieldType)"
on-change="ctrl.queryUpdated()"
es-version="ctrl.esVersion">
</elastic-metric-agg>
</div>
<div ng-repeat="agg in ctrl.target.bucketAggs">
<elastic-bucket-agg
target="ctrl.target" index="$index"
get-fields="ctrl.getFields($fieldType)"
on-change="ctrl.queryUpdated()">
</elastic-bucket-agg>
</div>
<div ng-repeat="agg in ctrl.target.bucketAggs">
<elastic-bucket-agg
target="ctrl.target" index="$index"
get-fields="ctrl.getFields($fieldType)"
on-change="ctrl.queryUpdated()">
</elastic-bucket-agg>
</div>
</query-editor-row>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment