mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux(): big progress on updating query editors
This commit is contained in:
Torkel Ödegaard
parent
24a7d4f816
commit
d2239427f2
@ -1,4 +1,4 @@
|
|||||||
<div class="gf-form-inline">
|
<div class="gf-form-query">
|
||||||
<div class="gf-form">
|
<div class="gf-form">
|
||||||
<label class="gf-form-label">
|
<label class="gf-form-label">
|
||||||
{{ctrl.target.refId}}
|
{{ctrl.target.refId}}
|
||||||
@ -9,7 +9,8 @@
|
|||||||
</a>
|
</a>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div ng-transclude style="max-width: 100%; flex-grow: 10;">
|
|
||||||
|
<div ng-transclude class="gf-form-query-content">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="gf-form">
|
<div class="gf-form">
|
||||||
|
|||||||
@ -1,105 +1,89 @@
|
|||||||
<query-editor-row ctrl="ctrl">
|
<query-editor-row ctrl="ctrl">
|
||||||
<div ng-hide="ctrl.target.rawQuery" class="gf-form-inline">
|
|
||||||
<label class="gf-form-label query-keyword width-7">FROM</label>
|
|
||||||
|
|
||||||
<metric-segment segment="ctrl.policySegment" get-options="ctrl.getPolicySegments()" on-change="ctrl.policyChanged()"></metric-segment>
|
<div class="gf-form" ng-show="ctrl.target.rawQuery">
|
||||||
<metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements()" on-change="ctrl.measurementChanged()"></metric-segment>
|
<input type="text" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" ng-blur="ctrl.refresh()"></input>
|
||||||
|
</div>
|
||||||
|
|
||||||
<label class="gf-form-label query-keyword">
|
<div ng-hide="ctrl.target.rawQuery">
|
||||||
WHERE
|
<div class="gf-form-inline">
|
||||||
</label>
|
<div class="gf-form">
|
||||||
|
<label class="gf-form-label query-keyword width-7">FROM</label>
|
||||||
|
|
||||||
<div ng-repeat="segment in ctrl.tagSegments">
|
<metric-segment segment="ctrl.policySegment" get-options="ctrl.getPolicySegments()" on-change="ctrl.policyChanged()"></metric-segment>
|
||||||
<metric-segment segment="segment" get-options="ctrl.getTagsOrValues(segment, $index)" on-change="ctrl.tagSegmentUpdated(segment, $index)"></metric-segment>
|
<metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements()" on-change="ctrl.measurementChanged()"></metric-segment>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div class="gf-form-inline" ng-repeat="selectParts in ctrl.queryModel.selectModels">
|
||||||
|
<div class="gf-form">
|
||||||
|
<label class="gf-form-label query-keyword width-7">
|
||||||
|
<span ng-show="$index === 0">SELECT</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gf-form" ng-repeat="part in selectParts">
|
||||||
|
<influx-query-part-editor
|
||||||
|
class="gf-form-label query-part"
|
||||||
|
part="part"
|
||||||
|
remove-action="ctrl.removeSelectPart(selectParts, part)"
|
||||||
|
part-updated="ctrl.selectPartUpdated(selectParts, part)"
|
||||||
|
get-options="ctrl.getPartOptions(part)">
|
||||||
|
</influx-query-part-editor>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gf-form">
|
||||||
|
<label class="dropdown"
|
||||||
|
dropdown-typeahead="ctrl.selectMenu"
|
||||||
|
dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gf-form-filler"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gf-form-inline">
|
||||||
|
<div class="gf-form">
|
||||||
|
<label class="gf-form-label query-keyword width-7">
|
||||||
|
<span>GROUP BY</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<influx-query-part-editor
|
||||||
|
ng-repeat="part in ctrl.queryModel.groupByParts"
|
||||||
|
part="part"
|
||||||
|
class="gf-form-label query-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 class="gf-form-filler"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gf-form-inline">
|
||||||
|
<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()">
|
||||||
|
</div>
|
||||||
|
<div class="gf-form">
|
||||||
|
<label class="gf-form-label">Format as</label>
|
||||||
|
<div class="gf-form-select-wrapper">
|
||||||
|
<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>
|
</div>
|
||||||
|
<div class="gf-form-filler"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="gf-form" ng-show="ctrl.target.rawQuery">
|
|
||||||
<input type="text" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" ng-blur="ctrl.refresh()"></input>
|
|
||||||
</div>
|
|
||||||
</query-editor-row>
|
</query-editor-row>
|
||||||
|
|
||||||
<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">
|
|
||||||
<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 class="gf-form-inline query-editor-secondary-row">
|
|
||||||
<div class="gf-form">
|
|
||||||
<label class="gf-form-label query-keyword width-7">
|
|
||||||
<span>GROUP BY</span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
<influx-query-part-editor
|
|
||||||
ng-repeat="part in ctrl.queryModel.groupByParts"
|
|
||||||
part="part"
|
|
||||||
class="gf-form-label tight-form-func"
|
|
||||||
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 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 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()">
|
|
||||||
</div>
|
|
||||||
<div class="gf-form">
|
|
||||||
<label class="gf-form-label">Format as</label>
|
|
||||||
<div class="gf-form-select-wrapper">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
|
|||||||
@ -2,4 +2,4 @@
|
|||||||
<span class="pointer fa fa-remove" ng-click="removeActionInternal()" ></span>
|
<span class="pointer fa fa-remove" ng-click="removeActionInternal()" ></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a ng-click="toggleControls()">{{part.def.type}}</a><span>(</span><span class="query-part-parameters"></span><span>)</span>
|
<a ng-click="toggleControls()" class="query-part-name">{{part.def.type}}</a><span>(</span><span class="query-part-parameters"></span><span>)</span>
|
||||||
|
|||||||
@ -68,6 +68,7 @@
|
|||||||
@import "components/drop";
|
@import "components/drop";
|
||||||
@import "components/query_editor";
|
@import "components/query_editor";
|
||||||
@import "components/tabbed_view";
|
@import "components/tabbed_view";
|
||||||
|
@import "components/query_part";
|
||||||
|
|
||||||
// PAGES
|
// PAGES
|
||||||
@import "pages/login";
|
@import "pages/login";
|
||||||
|
|||||||
@ -49,6 +49,16 @@ $gf-form-margin: 0.25rem;
|
|||||||
@include border-radius($label-border-radius-sm);
|
@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);
|
||||||
|
}
|
||||||
|
|
||||||
.gf-form-checkbox {
|
.gf-form-checkbox {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
padding: $input-padding-y $input-padding-x;
|
padding: $input-padding-y $input-padding-x;
|
||||||
@ -152,10 +162,6 @@ $gf-form-margin: 0.25rem;
|
|||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.query-editor-secondary-row {
|
|
||||||
margin-left: 5.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gf-form-switch {
|
.gf-form-switch {
|
||||||
margin-right: $gf-form-margin;
|
margin-right: $gf-form-margin;
|
||||||
}
|
}
|
||||||
@ -186,3 +192,27 @@ $gf-form-margin: 0.25rem;
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gf-form-query {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.gf-form,
|
||||||
|
.gf-form-filler {
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gf-form-input,
|
||||||
|
.gf-form-select-wrapper,
|
||||||
|
.gf-form-filler,
|
||||||
|
.gf-form-label {
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gf-form-query-content {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|||||||
16
public/sass/components/_query_part.scss
Normal file
16
public/sass/components/_query_part.scss
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
|
||||||
|
.query-part {
|
||||||
|
background-color: $input-bg !important;
|
||||||
|
|
||||||
|
&.show-function-controls {
|
||||||
|
padding-top: 5px;
|
||||||
|
min-width: 100px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-part-name {
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-part-parameters {
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user