Skip to content

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

ux(): updated query editor test

parent 4377e95c
Showing with 105 additions and 46 deletions
public/app/core/directives/dropdown_typeahead.js
......@@ -9,10 +9,10 @@ function (_, $, coreModule) {
coreModule.default.directive('dropdownTypeahead', function($compile) {
var inputTemplate = '<input type="text"'+
' class="tight-form-input input-medium tight-form-input"' +
' class="gf-form-input input-medium tight-form-input"' +
' spellcheck="false" style="display:none"></input>';
var buttonTemplate = '<a class="tight-form-item tight-form-func dropdown-toggle"' +
var buttonTemplate = '<a class="gf-form-label tight-form-func dropdown-toggle"' +
' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' +
' data-placement="top"><i class="fa fa-plus"></i></a>';
......
public/app/core/directives/metric_segment.js
......@@ -8,10 +8,10 @@ function (_, $, coreModule) {
coreModule.default.directive('metricSegment', function($compile, $sce) {
var inputTemplate = '<input type="text" data-provide="typeahead" ' +
' class="tight-form-clear-input input-medium"' +
' class="gf-form-input input-medium"' +
' spellcheck="false" style="display:none"></input>';
var buttonTemplate = '<a class="tight-form-item" ng-class="segment.cssClass" ' +
var buttonTemplate = '<a class="gf-form-label" ng-class="segment.cssClass" ' +
'tabindex="1" give-focus="segment.focus" ng-bind-html="segment.html"></a>';
return {
......
public/app/features/panel/partials/query_editor_row.html
<div class="tight-form">
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label">
{{ctrl.target.refId}}
</label>
<label class="gf-form-label">
<a ng-click="ctrl.toggleHideQuery()" role="menuitem">
<i class="fa fa-eye"></i>
</a>
</label>
</div>
<div ng-transclude style="max-width: 100%; flex-grow: 10;">
</div>
<div class="gf-form">
<label class="gf-form-label">
<a class="pointer" tabindex="1" ng-click="ctrl.toggleEditorMode()">
<i class="fa fa-pencil"></i>
</a>
</label>
<label class="gf-form-label dropdown">
<a class="pointer dropdown-toggle" data-toggle="dropdown" tabindex="1">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem">
<a tabindex="1" ng-click="ctrl.duplicateQuery()">Duplicate</a>
</li>
<li role="menuitem">
<a tabindex="1" ng-click="ctrl.moveQuery(-1)">Move up</a>
</li>
<li role="menuitem">
<a tabindex="1" ng-click="ctrl.moveQuery(1)">Move down</a>
</li>
</ul>
</label>
</div>
</div>
<div class="tight-form" ng-if="false">
<ul class="tight-form-list pull-right">
<li ng-show="ctrl.error" class="tight-form-item">
<a bs-tooltip="ctrl.error" style="color: rgb(229, 189, 28)" role="menuitem">
......
public/app/partials/metrics.html
<div class="editor-row">
<div class="tight-form-container">
<div class="query-editor-rows">
<div ng-repeat="target in ctrl.panel.targets" ng-class="{'tight-form-disabled': target.hide}">
<rebuild-on-change property="ctrl.panel.datasource || target.datasource" show-null="true">
<plugin-component type="query-ctrl">
......
public/app/plugins/datasource/influxdb/partials/query.editor.html
<query-editor-row ctrl="ctrl">
<ul class="tight-form-list" ng-hide="ctrl.target.rawQuery">
<li class="tight-form-item query-keyword" style="width: 75px">
FROM
</li>
<li>
<metric-segment segment="ctrl.policySegment" get-options="ctrl.getPolicySegments()" on-change="ctrl.policyChanged()"></metric-segment>
</li>
<li>
<metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements()" on-change="ctrl.measurementChanged()"></metric-segment>
</li>
<li class="tight-form-item query-keyword" style="padding-left: 15px; padding-right: 15px;">
<div ng-hide="ctrl.target.rawQuery" class="gf-form-inline">
<label class="gf-form-label query-keyword width-6">FROM</label>
<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>
<label class="gf-form-label query-keyword">
WHERE
</li>
<li ng-repeat="segment in ctrl.tagSegments">
</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>
</li>
</ul>
</div>
</div>
<div class="tight-form-flex-wrapper" ng-show="ctrl.target.rawQuery">
<input type="text" class="tight-form-clear-input" ng-model="ctrl.target.query" spellcheck="false" style="width: 100%;" ng-blur="ctrl.refresh()"></input>
<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>
<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;">
......@@ -53,21 +73,16 @@
</div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
ALIAS BY
</li>
<li>
<input type="text" class="tight-form-clear-input input-xlarge" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()">
</li>
<li class="tight-form-item">
Format as
</li>
<li>
<select class="input-small tight-form-input" style="width: 104px" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select>
</li>
</ul>
<div class="clearfix"></div>
<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 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>
public/sass/components/_gf-form.scss
......@@ -3,7 +3,6 @@ $gf-form-label-margin: 0.25rem;
.gf-form {
margin-bottom: $gf-form-margin;
margin-right: $gf-form-margin;
display: flex;
flex-direction: row;
align-items: center;
......@@ -67,6 +66,7 @@ $gf-form-label-margin: 0.25rem;
display: block;
width: 100%;
padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin;
font-size: $font-size-base;
line-height: $input-line-height;
color: $input-color;
......@@ -139,8 +139,8 @@ $gf-form-label-margin: 0.25rem;
}
}
.gf-form-select-wrapper + .gf-form-select-wrapper {
margin-left: $gf-form-label-margin;
.gf-form-select-wrapper + .gf-form-select-wrapper {
margin-left: $gf-form-label-margin;
}
.gf-form-btn {
......@@ -149,3 +149,8 @@ $gf-form-label-margin: 0.25rem;
flex-shrink: 0;
flex-grow: 0;
}
.query-editor-secondary-row {
margin-left: 5.2rem;
}
public/sass/components/_query_editor.scss
......@@ -4,13 +4,13 @@
}
.query-segment-key {
border-right: none;
padding-right: 1px;
//border-right: none;
//padding-right: 1px;
}
.query-segment-operator {
padding-right: 1px;
border-right: none;
//padding-right: 1px;
//border-right: none;
color: $orange;
}
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