Commit 5909f9ef by Torkel Ödegaard

feat: more work on metrics tab reworkings

parent 5fcb9662
...@@ -4,7 +4,6 @@ graphite: ...@@ -4,7 +4,6 @@ graphite:
- "8080:80" - "8080:80"
- "2003:2003" - "2003:2003"
volumes: volumes:
- /var/docker/gfdev/graphite:/opt/graphite/storage/whisper
- /etc/localtime:/etc/localtime:ro - /etc/localtime:/etc/localtime:ro
- /etc/timezone:/etc/timezone:ro - /etc/timezone:/etc/timezone:ro
......
...@@ -109,7 +109,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ ...@@ -109,7 +109,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
baseUrl: ds.meta.baseUrl, baseUrl: ds.meta.baseUrl,
name: 'query-ctrl-' + ds.meta.id, name: 'query-ctrl-' + ds.meta.id,
bindings: {target: "=", panelCtrl: "=", datasource: "="}, bindings: {target: "=", panelCtrl: "=", datasource: "="},
attrs: {"target": "target", "panel-ctrl": "ctrl", datasource: "datasource"}, attrs: {"target": "target", "panel-ctrl": "ctrl.panelCtrl", datasource: "datasource"},
Component: dsModule.QueryCtrl Component: dsModule.QueryCtrl
}; };
}); });
...@@ -127,7 +127,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ ...@@ -127,7 +127,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
baseUrl: ds.meta.baseUrl, baseUrl: ds.meta.baseUrl,
name: 'query-options-ctrl-' + ds.meta.id, name: 'query-options-ctrl-' + ds.meta.id,
bindings: {panelCtrl: "="}, bindings: {panelCtrl: "="},
attrs: {"panel-ctrl": "ctrl"}, attrs: {"panel-ctrl": "ctrl.panelCtrl"},
Component: dsModule.QueryOptionsCtrl Component: dsModule.QueryOptionsCtrl
}; };
}); });
......
...@@ -5,6 +5,5 @@ define([ ...@@ -5,6 +5,5 @@ define([
'./query_ctrl', './query_ctrl',
'./panel_editor_tab', './panel_editor_tab',
'./query_editor_row', './query_editor_row',
'./metrics_ds_selector',
'./query_troubleshooter', './query_troubleshooter',
], function () {}); ], function () {});
...@@ -10,6 +10,7 @@ import * as rangeUtil from 'app/core/utils/rangeutil'; ...@@ -10,6 +10,7 @@ import * as rangeUtil from 'app/core/utils/rangeutil';
import * as dateMath from 'app/core/utils/datemath'; import * as dateMath from 'app/core/utils/datemath';
import {Subject} from 'vendor/npm/rxjs/Subject'; import {Subject} from 'vendor/npm/rxjs/Subject';
import {metricsTabDirective} from './metrics_tab';
class MetricsPanelCtrl extends PanelCtrl { class MetricsPanelCtrl extends PanelCtrl {
scope: any; scope: any;
...@@ -61,7 +62,7 @@ class MetricsPanelCtrl extends PanelCtrl { ...@@ -61,7 +62,7 @@ class MetricsPanelCtrl extends PanelCtrl {
} }
private onInitMetricsPanelEditMode() { private onInitMetricsPanelEditMode() {
this.addEditorTab('Metrics', 'public/app/partials/metrics.html'); this.addEditorTab('Metrics', metricsTabDirective);
this.addEditorTab('Time range', 'public/app/features/panel/partials/panelTime.html'); this.addEditorTab('Time range', 'public/app/features/panel/partials/panelTime.html');
} }
......
///<reference path="../../headers/common.d.ts" /> ///<reference path="../../headers/common.d.ts" />
import angular from 'angular';
import _ from 'lodash'; import _ from 'lodash';
import appEvents from 'app/core/app_events'; import {DashboardModel} from '../dashboard/model';
var module = angular.module('grafana.directives'); export class MetricsTabCtrl {
var template = `
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label">
<i class="icon-gf icon-gf-datasources"></i>
</label>
<label class="gf-form-label">
Data Source
</label>
<metric-segment segment="ctrl.dsSegment"
get-options="ctrl.getOptions(true)"
on-change="ctrl.datasourceChanged()"></metric-segment>
</div>
<div class="gf-form gf-form--offset-1">
<button class="btn btn-inverse gf-form-btn" ng-click="ctrl.addDataQuery()" ng-hide="ctrl.current.meta.mixed">
<i class="fa fa-plus"></i>&nbsp;
Add Query
</button>
<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>
</div>
</div>
</div>
</div>
`;
export class MetricsDsSelectorCtrl {
dsSegment: any; dsSegment: any;
mixedDsSegment: any; mixedDsSegment: any;
dsName: string; dsName: string;
panel: any;
panelCtrl: any; panelCtrl: any;
datasources: any[]; datasources: any[];
current: any; current: any;
lastResponse: any; nextRefId: string;
responseData: any; dashboard: DashboardModel;
showResponse: boolean;
/** @ngInject */ /** @ngInject */
constructor($scope, private uiSegmentSrv, datasourceSrv) { constructor($scope, private uiSegmentSrv, datasourceSrv) {
this.panelCtrl = $scope.ctrl;
$scope.ctrl = this;
this.panel = this.panelCtrl.panel;
this.dashboard = this.panelCtrl.dashboard;
this.datasources = datasourceSrv.getMetricSources(); this.datasources = datasourceSrv.getMetricSources();
var dsValue = this.panelCtrl.panel.datasource || null; var dsValue = this.panelCtrl.panel.datasource || null;
...@@ -70,9 +37,9 @@ export class MetricsDsSelectorCtrl { ...@@ -70,9 +37,9 @@ export class MetricsDsSelectorCtrl {
this.dsSegment = uiSegmentSrv.newSegment({value: this.current.name, selectMode: true}); this.dsSegment = uiSegmentSrv.newSegment({value: this.current.name, selectMode: true});
this.mixedDsSegment = uiSegmentSrv.newSegment({value: 'Add Query', selectMode: true}); this.mixedDsSegment = uiSegmentSrv.newSegment({value: 'Add Query', selectMode: true});
this.nextRefId = this.getNextQueryLetter();
} }
getOptions(includeBuiltin) { getOptions(includeBuiltin) {
return Promise.resolve(this.datasources.filter(value => { return Promise.resolve(this.datasources.filter(value => {
return includeBuiltin || !value.meta.builtIn; return includeBuiltin || !value.meta.builtIn;
...@@ -86,7 +53,6 @@ export class MetricsDsSelectorCtrl { ...@@ -86,7 +53,6 @@ export class MetricsDsSelectorCtrl {
if (ds) { if (ds) {
this.current = ds; this.current = ds;
this.panelCtrl.setDatasource(ds); this.panelCtrl.setDatasource(ds);
this.responseData = null;
} }
} }
...@@ -100,22 +66,27 @@ export class MetricsDsSelectorCtrl { ...@@ -100,22 +66,27 @@ export class MetricsDsSelectorCtrl {
} }
} }
getNextQueryLetter() {
return this.dashboard.getNextQueryLetter(this.panel);
}
addDataQuery() { addDataQuery() {
var target: any = {isNew: true}; var target: any = {
isNew: true,
refId: this.getNextQueryLetter()
};
this.panelCtrl.panel.targets.push(target); this.panelCtrl.panel.targets.push(target);
this.nextRefId = this.getNextQueryLetter();
} }
} }
module.directive('metricsDsSelector', function() { /** @ngInject **/
export function metricsTabDirective() {
'use strict';
return { return {
restrict: 'E', restrict: 'E',
template: template, scope: true,
controller: MetricsDsSelectorCtrl, templateUrl: 'public/app/partials/metrics.html',
bindToController: true, controller: MetricsTabCtrl,
controllerAs: 'ctrl',
transclude: true,
scope: {
panelCtrl: "="
}
}; };
}); }
<metrics-ds-selector panel-ctrl="ctrl"></metrics-ds-selector> <div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label">
<i class="icon-gf icon-gf-datasources"></i>
</label>
<label class="gf-form-label">
Data Source
</label>
<metric-segment segment="ctrl.dsSegment"
get-options="ctrl.getOptions(true)"
on-change="ctrl.datasourceChanged()"></metric-segment>
</div>
</div>
</div>
<div class="query-editor-rows gf-form-group"> <div class="query-editor-rows gf-form-group">
<div ng-repeat="target in ctrl.panel.targets" ng-class="{'gf-form-disabled': target.hide}"> <div ng-repeat="target in ctrl.panel.targets" ng-class="{'gf-form-disabled': target.hide}">
...@@ -8,15 +24,39 @@ ...@@ -8,15 +24,39 @@
</plugin-component> </plugin-component>
</rebuild-on-change> </rebuild-on-change>
</div> </div>
<div class="gf-form-query">
<div class="gf-form gf-form-query-letter-cell">
<label class="gf-form-label">
<span class="gf-form-query-letter-cell-carret">
<i class="fa fa-caret-down"></i>
</span>
<span class="gf-form-query-letter-cell-letter">{{ctrl.nextRefId}}</span>
</label>
<button class="btn btn-inverse gf-form-btn" ng-click="ctrl.addDataQuery()" ng-hide="ctrl.current.meta.mixed">
Add Query
</button>
<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>
</div>
</div>
</div>
</div> </div>
<query-troubleshooter panel-ctrl="ctrl"></query-troubleshooter> <query-troubleshooter panel-ctrl="ctrl.panelCtrl"></query-troubleshooter>
<div class="gf-form-group"> <collapse-box title="Advanced Options & Data source help">
<collapse-box-body>
<div class="gf-form-group">
<rebuild-on-change property="ctrl.panel.datasource" show-null="true"> <rebuild-on-change property="ctrl.panel.datasource" show-null="true">
<plugin-component type="query-options-ctrl"> <plugin-component type="query-options-ctrl">
</plugin-component> </plugin-component>
</rebuild-on-change> </rebuild-on-change>
</div> </div>
</collapse-box-body>
</collapse-box>
<div class="clearfix"></div> <div class="clearfix"></div>
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