IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat: more work on metrics tab reworkings

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-05-19 21:32:23 +02:00
parent 5fcb966297
commit 5909f9ef92
6 changed files with 80 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docker/blocks/graphite/fig
View File

@ -4,7 +4,6 @@ graphite:
- "8080:80"
- "2003:2003"
volumes:
- /var/docker/gfdev/graphite:/opt/graphite/storage/whisper
- /etc/localtime:/etc/localtime:ro
- /etc/timezone:/etc/timezone:ro

4
public/app/core/directives/plugin_component.ts
View File

@ -109,7 +109,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
baseUrl: ds.meta.baseUrl,
name: 'query-ctrl-' + ds.meta.id,
bindings: {target: "=", panelCtrl: "=", datasource: "="},
attrs: {"target": "target", "panel-ctrl": "ctrl", datasource: "datasource"},
attrs: {"target": "target", "panel-ctrl": "ctrl.panelCtrl", datasource: "datasource"},
Component: dsModule.QueryCtrl
};
});
@ -127,7 +127,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
baseUrl: ds.meta.baseUrl,
name: 'query-options-ctrl-' + ds.meta.id,
bindings: {panelCtrl: "="},
attrs: {"panel-ctrl": "ctrl"},
attrs: {"panel-ctrl": "ctrl.panelCtrl"},
Component: dsModule.QueryOptionsCtrl
};
});

1
public/app/features/panel/all.js
View File

@ -5,6 +5,5 @@ define([
'./query_ctrl',
'./panel_editor_tab',
'./query_editor_row',
'./metrics_ds_selector',
'./query_troubleshooter',
], function () {});

3
public/app/features/panel/metrics_panel_ctrl.ts
View File

@ -10,6 +10,7 @@ import * as rangeUtil from 'app/core/utils/rangeutil';
import * as dateMath from 'app/core/utils/datemath';
import {Subject} from 'vendor/npm/rxjs/Subject';
import {metricsTabDirective} from './metrics_tab';
class MetricsPanelCtrl extends PanelCtrl {
scope: any;
@ -61,7 +62,7 @@ class MetricsPanelCtrl extends PanelCtrl {
}
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');
}

83
public/app/features/panel/metrics_ds_selector.ts → public/app/features/panel/metrics_tab.ts
View File

@ -1,59 +1,26 @@
///<reference path="../../headers/common.d.ts" />
import angular from 'angular';
import _ from 'lodash';
import appEvents from 'app/core/app_events';
import {DashboardModel} from '../dashboard/model';
var module = angular.module('grafana.directives');
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 {
export class MetricsTabCtrl {
dsSegment: any;
mixedDsSegment: any;
dsName: string;
panel: any;
panelCtrl: any;
datasources: any[];
current: any;
lastResponse: any;
responseData: any;
showResponse: boolean;
nextRefId: string;
dashboard: DashboardModel;
/** @ngInject */
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();
var dsValue = this.panelCtrl.panel.datasource || null;
@ -70,9 +37,9 @@ export class MetricsDsSelectorCtrl {
this.dsSegment = uiSegmentSrv.newSegment({value: this.current.name, selectMode: true});
this.mixedDsSegment = uiSegmentSrv.newSegment({value: 'Add Query', selectMode: true});
this.nextRefId = this.getNextQueryLetter();
}
getOptions(includeBuiltin) {
return Promise.resolve(this.datasources.filter(value => {
return includeBuiltin || !value.meta.builtIn;
@ -86,7 +53,6 @@ export class MetricsDsSelectorCtrl {
if (ds) {
this.current = ds;
this.panelCtrl.setDatasource(ds);
this.responseData = null;
}
}
@ -100,22 +66,27 @@ export class MetricsDsSelectorCtrl {
}
}
getNextQueryLetter() {
return this.dashboard.getNextQueryLetter(this.panel);
}
addDataQuery() {
var target: any = {isNew: true};
var target: any = {
isNew: true,
refId: this.getNextQueryLetter()
};
this.panelCtrl.panel.targets.push(target);
this.nextRefId = this.getNextQueryLetter();
}
}
module.directive('metricsDsSelector', function() {
/** @ngInject **/
export function metricsTabDirective() {
'use strict';
return {
restrict: 'E',
template: template,
controller: MetricsDsSelectorCtrl,
bindToController: true,
controllerAs: 'ctrl',
transclude: true,
scope: {
panelCtrl: "="
}
scope: true,
templateUrl: 'public/app/partials/metrics.html',
controller: MetricsTabCtrl,
};
});
}

58
public/app/partials/metrics.html
View File

@ -1,5 +1,21 @@
<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 ng-repeat="target in ctrl.panel.targets" ng-class="{'gf-form-disabled': target.hide}">
@ -7,16 +23,40 @@
<plugin-component type="query-ctrl">
</plugin-component>
</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>
<query-troubleshooter panel-ctrl="ctrl"></query-troubleshooter>
<query-troubleshooter panel-ctrl="ctrl.panelCtrl"></query-troubleshooter>
<div class="gf-form-group">
<rebuild-on-change property="ctrl.panel.datasource" show-null="true">
<plugin-component type="query-options-ctrl">
</plugin-component>
</rebuild-on-change>
</div>
<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">
<plugin-component type="query-options-ctrl">
</plugin-component>
</rebuild-on-change>
</div>
</collapse-box-body>
</collapse-box>
<div class="clearfix"></div>