ux: metrics tab add query feature

This commit is contained in:
Torkel Ödegaard 2017-06-13 18:31:43 -04:00
parent 9ff4ab1236
commit c771dd4bd2
2 changed files with 32 additions and 33 deletions

View File

@ -62,11 +62,17 @@ export class MetricsTabCtrl {
mixedDatasourceChanged() { mixedDatasourceChanged() {
var target: any = {isNew: true}; var target: any = {isNew: true};
var ds = _.find(this.datasources, {name: this.mixedDsSegment.value}); var ds = _.find(this.datasources, {name: this.mixedDsSegment.value});
if (ds) { if (ds) {
target.datasource = ds.name; target.datasource = ds.name;
this.panelCtrl.addDataQuery(target); this.panelCtrl.addQuery(target);
this.mixedDsSegment.value = '';
} }
// metric segments are really bad, requires hacks to update
const segment = this.uiSegmentSrv.newSegment({value: 'Add Query', selectMode: true, fake: true});
this.mixedDsSegment.value = segment.value;
this.mixedDsSegment.html = segment.html;
this.mixedDsSegment.text = segment.text;
} }
addQuery() { addQuery() {

View File

@ -14,39 +14,32 @@
</span> </span>
<span class="gf-form-query-letter-cell-letter">{{ctrl.panelCtrl.nextRefId}}</span> <span class="gf-form-query-letter-cell-letter">{{ctrl.panelCtrl.nextRefId}}</span>
</label> </label>
<button class="btn btn-inverse gf-form-btn" ng-click="ctrl.addQuery()" ng-hide="ctrl.current.meta.mixed"> <button class="btn btn-secondary gf-form-btn" ng-click="ctrl.addQuery()" ng-hide="ctrl.current.meta.mixed">
Add Query Add Query
</button> </button>
<div class="dropdown" ng-if="ctrl.current.meta.mixed"> <div class="dropdown" ng-if="ctrl.current.meta.mixed">
<metric-segment segment="ctrl.mixedDsSegment" get-options="ctrl.getOptions(false)" on-change="ctrl.mixedDatasourceChanged()"></metric-segment> <metric-segment segment="ctrl.mixedDsSegment" get-options="ctrl.getOptions(false)" on-change="ctrl.mixedDatasourceChanged()"></metric-segment>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<query-troubleshooter panel-ctrl="ctrl.panelCtrl"></query-troubleshooter> <!-- <query&#45;troubleshooter panel&#45;ctrl="ctrl.panelCtrl"></query&#45;troubleshooter> -->
<collapse-box title="Data Source: {{ctrl.dsSegment.value}}"> <div class="gf-form-group">
<collapse-box-body> <div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label">
Panel Data Source
</label>
<metric-segment segment="ctrl.dsSegment" get-options="ctrl.getOptions(true)" on-change="ctrl.datasourceChanged()"></metric-segment>
</div>
</div>
</div>
<div class="gf-form-group"> <rebuild-on-change property="ctrl.panel.datasource" show-null="true">
<div class="gf-form-inline"> <plugin-component type="query-options-ctrl">
<div class="gf-form"> </plugin-component>
<label class="gf-form-label"> </rebuild-on-change>
Panel Data Source </div>
</label>
<metric-segment segment="ctrl.dsSegment" get-options="ctrl.getOptions(true)" on-change="ctrl.datasourceChanged()"></metric-segment>
</div>
</div>
</div>
<rebuild-on-change property="ctrl.panel.datasource" show-null="true">
<plugin-component type="query-options-ctrl">
</plugin-component>
</rebuild-on-change>
</collapse-box-body>
</collapse-box>
<div class="clearfix"></div>