Skip to content

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

ux(): big progress on updating query editors

parent 24a7d4f8
Showing with 85 additions and 53 deletions
public/app/features/panel/partials/query_editor_row.html
<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 @@ ...@@ -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">
......
public/app/plugins/datasource/influxdb/partials/query.editor.html
<query-editor-row ctrl="ctrl"> <query-editor-row ctrl="ctrl">
<div ng-hide="ctrl.target.rawQuery" class="gf-form-inline">
<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>
<div ng-hide="ctrl.target.rawQuery">
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">FROM</label> <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> <metric-segment segment="ctrl.policySegment" get-options="ctrl.getPolicySegments()" on-change="ctrl.policyChanged()"></metric-segment>
<metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements()" on-change="ctrl.measurementChanged()"></metric-segment> <metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements()" on-change="ctrl.measurementChanged()"></metric-segment>
</div>
<label class="gf-form-label query-keyword"> <div class="gf-form">
WHERE <label class="gf-form-label query-keyword">WHERE</label>
</label>
<div ng-repeat="segment in ctrl.tagSegments"> <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> <metric-segment segment="segment" get-options="ctrl.getTagsOrValues(segment, $index)" on-change="ctrl.tagSegmentUpdated(segment, $index)"></metric-segment>
</div> </div>
</div> </div>
<div class="gf-form" ng-show="ctrl.target.rawQuery"> <div class="gf-form-filler"></div>
<input type="text" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" ng-blur="ctrl.refresh()"></input>
</div> </div>
</query-editor-row>
<div ng-hide="ctrl.target.rawQuery"> <div class="gf-form-inline" ng-repeat="selectParts in ctrl.queryModel.selectModels">
<div class="gf-form-inline query-editor-secondary-row" ng-repeat="selectParts in ctrl.queryModel.selectModels">
<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">
<span ng-show="$index === 0">SELECT</span> <span ng-show="$index === 0">SELECT</span>
</label> </label>
</div>
<div class="gf-form" ng-repeat="part in selectParts">
<influx-query-part-editor <influx-query-part-editor
ng-repeat="part in selectParts" class="gf-form-label query-part"
class="gf-form-label tight-form-func"
part="part" part="part"
remove-action="ctrl.removeSelectPart(selectParts, part)" remove-action="ctrl.removeSelectPart(selectParts, part)"
part-updated="ctrl.selectPartUpdated(selectParts, part)" part-updated="ctrl.selectPartUpdated(selectParts, part)"
get-options="ctrl.getPartOptions(part)"> get-options="ctrl.getPartOptions(part)">
</influx-query-part-editor> </influx-query-part-editor>
</div>
<div class="gf-form">
<label class="dropdown" <label class="dropdown"
dropdown-typeahead="ctrl.selectMenu" dropdown-typeahead="ctrl.selectMenu"
dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)"> dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
</label> </label>
</div> </div>
<div class="gf-form-filler"></div>
</div> </div>
<div class="gf-form-inline query-editor-secondary-row">
<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">
<span>GROUP BY</span> <span>GROUP BY</span>
</label> </label>
<influx-query-part-editor <influx-query-part-editor
ng-repeat="part in ctrl.queryModel.groupByParts" ng-repeat="part in ctrl.queryModel.groupByParts"
part="part" part="part"
class="gf-form-label tight-form-func" 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> <metric-segment segment="ctrl.groupBySegment" get-options="ctrl.getGroupByOptions()" on-change="ctrl.groupByAction(part, $index)"></metric-segment>
</div> </div>
</div>
<div ng-hide="ctrl.target.rawQuery" ng-if="false"> <div class="gf-form-filler"></div>
<div class="tight-form" ng-repeat="selectParts in ctrl.queryModel.selectModels"> </div>
<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>
<div class="gf-form-inline query-editor-secondary-row"> <div class="gf-form-inline">
<div class="gf-form max-width-30"> <div class="gf-form max-width-30">
<label class="gf-form-label query-keyword width-7">ALIAS BY</label> <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()"> <input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()">
...@@ -101,5 +83,7 @@ ...@@ -101,5 +83,7 @@
<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> <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> <div class="gf-form-filler"></div>
</div>
</query-editor-row>
public/app/plugins/datasource/influxdb/partials/query_part.html
...@@ -2,4 +2,4 @@ ...@@ -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>
public/sass/_grafana.scss
...@@ -68,6 +68,7 @@ ...@@ -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";
......
public/sass/components/_gf-form.scss
...@@ -49,6 +49,16 @@ $gf-form-margin: 0.25rem; ...@@ -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; ...@@ -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; ...@@ -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;
}
public/sass/components/_query_part.scss 0 → 100644
.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 {
}
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