mirror of
https://github.com/grafana/grafana.git
synced 2025-08-06 03:19:30 +08:00
remove not used stuff
This commit is contained in:
Erik Sundell
@ -25,6 +25,7 @@ interface State extends Target {
|
||||
alignOptions: any[];
|
||||
lastQuery: string;
|
||||
lastQueryError: string;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const DefaultTarget: State = {
|
||||
@ -62,31 +63,29 @@ export class QueryEditor extends React.Component<Props, State> {
|
||||
}
|
||||
|
||||
onDataReceived(dataList) {
|
||||
const anySeriesFromQuery = dataList.find(item => item.refId === this.props.target.refId);
|
||||
if (anySeriesFromQuery) {
|
||||
this.setState({ lastQuery: decodeURIComponent(anySeriesFromQuery.meta.rawQuery), lastQueryError: '' });
|
||||
const series = dataList.find(item => item.refId === this.props.target.refId);
|
||||
if (series) {
|
||||
this.setState({ lastQuery: decodeURIComponent(series.meta.rawQuery), lastQueryError: '' });
|
||||
}
|
||||
}
|
||||
|
||||
onDataError(err) {
|
||||
if (err) {
|
||||
let lastQuery;
|
||||
let lastQueryError;
|
||||
if (err.data && err.data.error) {
|
||||
lastQueryError = this.props.datasource.formatStackdriverError(err);
|
||||
} else if (err.data && err.data.results) {
|
||||
const queryRes = err.data.results[this.props.target.refId];
|
||||
lastQuery = decodeURIComponent(queryRes.meta.rawQuery);
|
||||
if (queryRes && queryRes.error) {
|
||||
try {
|
||||
lastQueryError = JSON.parse(queryRes.error).error.message;
|
||||
} catch {
|
||||
lastQueryError = queryRes.error;
|
||||
}
|
||||
let lastQuery;
|
||||
let lastQueryError;
|
||||
if (err.data && err.data.error) {
|
||||
lastQueryError = this.props.datasource.formatStackdriverError(err);
|
||||
} else if (err.data && err.data.results) {
|
||||
const queryRes = err.data.results[this.props.target.refId];
|
||||
lastQuery = decodeURIComponent(queryRes.meta.rawQuery);
|
||||
if (queryRes && queryRes.error) {
|
||||
try {
|
||||
lastQueryError = JSON.parse(queryRes.error).error.message;
|
||||
} catch {
|
||||
lastQueryError = queryRes.error;
|
||||
}
|
||||
}
|
||||
this.setState({ lastQuery, lastQueryError });
|
||||
}
|
||||
this.setState({ lastQuery, lastQueryError });
|
||||
}
|
||||
|
||||
handleMetricTypeChange({ valueType, metricKind, type, unit }) {
|
||||
@ -110,43 +109,8 @@ export class QueryEditor extends React.Component<Props, State> {
|
||||
);
|
||||
}
|
||||
|
||||
handleFilterChange(filters) {
|
||||
this.setState({ filters }, () => {
|
||||
this.props.onQueryChange(this.state);
|
||||
this.props.onExecuteQuery();
|
||||
});
|
||||
}
|
||||
|
||||
handleGroupBysChange(groupBys) {
|
||||
this.setState({ groupBys }, () => {
|
||||
this.props.onQueryChange(this.state);
|
||||
this.props.onExecuteQuery();
|
||||
});
|
||||
}
|
||||
|
||||
handleAggregationChange(value) {
|
||||
this.setState({ crossSeriesReducer: value }, () => {
|
||||
this.props.onQueryChange(this.state);
|
||||
this.props.onExecuteQuery();
|
||||
});
|
||||
}
|
||||
|
||||
handleAlignmentChange(value) {
|
||||
this.setState({ perSeriesAligner: value }, () => {
|
||||
this.props.onQueryChange(this.state);
|
||||
this.props.onExecuteQuery();
|
||||
});
|
||||
}
|
||||
|
||||
handleAlignmentPeriodChange(value) {
|
||||
this.setState({ alignmentPeriod: value }, () => {
|
||||
this.props.onQueryChange(this.state);
|
||||
this.props.onExecuteQuery();
|
||||
});
|
||||
}
|
||||
|
||||
handleAliasByChange(value) {
|
||||
this.setState({ aliasBy: value }, () => {
|
||||
handleChange(prop, value) {
|
||||
this.setState({ [prop]: value }, () => {
|
||||
this.props.onQueryChange(this.state);
|
||||
this.props.onExecuteQuery();
|
||||
});
|
||||
@ -179,8 +143,8 @@ export class QueryEditor extends React.Component<Props, State> {
|
||||
{metric => (
|
||||
<React.Fragment>
|
||||
<Filter
|
||||
filtersChanged={value => this.handleFilterChange(value)}
|
||||
groupBysChanged={value => this.handleGroupBysChange(value)}
|
||||
filtersChanged={value => this.handleChange('filters', value)}
|
||||
groupBysChanged={value => this.handleChange('groupBys', value)}
|
||||
target={this.state}
|
||||
uiSegmentSrv={uiSegmentSrv}
|
||||
templateSrv={templateSrv}
|
||||
@ -192,7 +156,7 @@ export class QueryEditor extends React.Component<Props, State> {
|
||||
templateSrv={templateSrv}
|
||||
crossSeriesReducer={crossSeriesReducer}
|
||||
groupBys={groupBys}
|
||||
onChange={value => this.handleAggregationChange(value)}
|
||||
onChange={value => this.handleChange('crossSeriesReducer', value)}
|
||||
>
|
||||
{displayAdvancedOptions =>
|
||||
displayAdvancedOptions && (
|
||||
@ -201,17 +165,17 @@ export class QueryEditor extends React.Component<Props, State> {
|
||||
metricDescriptor={metric}
|
||||
templateSrv={templateSrv}
|
||||
perSeriesAligner={perSeriesAligner}
|
||||
onChange={value => this.handleAlignmentChange(value)}
|
||||
onChange={value => this.handleChange('perSeriesAligner', value)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</Aggregations>
|
||||
<AliasBy value={aliasBy} onChange={value => this.handleAliasByChange(value)} />
|
||||
<AliasBy value={aliasBy} onChange={value => this.handleChange('aliasBy', value)} />
|
||||
|
||||
<AlignmentPeriods
|
||||
templateSrv={templateSrv}
|
||||
alignmentPeriod={alignmentPeriod}
|
||||
onChange={value => this.handleAlignmentPeriodChange(value)}
|
||||
onChange={value => this.handleChange('alignmentPeriod', value)}
|
||||
/>
|
||||
|
||||
<Help datasource={datasource} rawQuery={lastQuery} lastQueryError={lastQueryError} />
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label query-keyword width-9">Aggregation</label>
|
||||
<stackdriver-picker
|
||||
onChange="ctrl.handleAggregationChange"
|
||||
selected="ctrl.target.crossSeriesReducer"
|
||||
options="ctrl.aggOptions"
|
||||
searchable="true"
|
||||
placeholder="'Select Aggregation'"
|
||||
className="'width-15'"
|
||||
template-variables="ctrl.templateSrv.variables"
|
||||
group-name="'Aggregations'"
|
||||
></stackdriver-picker>
|
||||
</div>
|
||||
<div class="gf-form gf-form--grow">
|
||||
<label class="gf-form-label gf-form-label--grow">
|
||||
<a ng-click="ctrl.target.showAggregationOptions = !ctrl.target.showAggregationOptions">
|
||||
<i class="fa fa-caret-down" ng-show="ctrl.target.showAggregationOptions"></i>
|
||||
<i class="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions"></i> Advanced Options
|
||||
</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gf-form-group" ng-if="ctrl.target.showAggregationOptions">
|
||||
<div class="gf-form offset-width-9">
|
||||
<label class="gf-form-label query-keyword width-15">Aligner</label>
|
||||
<stackdriver-picker
|
||||
onChange="ctrl.handleAlignmentChange"
|
||||
selected="ctrl.target.perSeriesAligner"
|
||||
options="ctrl.alignOptions"
|
||||
searchable="true"
|
||||
placeholder="'Select Alignment'"
|
||||
className="'width-15'"
|
||||
template-variables="ctrl.templateSrv.variables"
|
||||
group-name="'Alignment Options'"
|
||||
></stackdriver-picker>
|
||||
|
||||
<div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label query-keyword width-9">Alignment Period</label>
|
||||
<stackdriver-picker
|
||||
onChange="ctrl.handleAlignmentPeriodChange"
|
||||
selected="ctrl.target.alignmentPeriod"
|
||||
options="ctrl.alignmentPeriods"
|
||||
searchable="true"
|
||||
placeholder="'Select Alignment'"
|
||||
className="'width-15'"
|
||||
template-variables="ctrl.templateSrv.variables"
|
||||
group-name="'Alignment Periods'"
|
||||
></stackdriver-picker>
|
||||
</div>
|
||||
|
||||
<div class="gf-form gf-form--grow">
|
||||
<label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow"> {{ ctrl.formatAlignmentText() }} </label>
|
||||
</div>
|
||||
</div>
|
||||
@ -8,81 +8,4 @@
|
||||
on-execute-query="(ctrl.handleExecuteQuery)"
|
||||
ui-segment-srv="ctrl.uiSegmentSrv"
|
||||
></query-editor>
|
||||
<!-- <metric-picker target="ctrl.target" default-project="ctrl.target.defaultProject" metric-type="ctrl.target.metricType" template-srv="ctrl.templateSrv" datasource="ctrl.datasource" on-change="ctrl.handleMetricTypeChange"></metric-picker>
|
||||
<stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" loading="ctrl.loadLabelsPromise" label-data="ctrl.labelData"
|
||||
></stackdriver-filter>
|
||||
<aggregation-picker value-type="ctrl.target.valueType" metric-kind="ctrl.target.metricKind" aggregation="ctrl.target.aggregation" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()" template-srv="ctrl.templateSrv" datasource="ctrl.datasource" on-change="ctrl.handleAggregationChange"></aggregation-picker>
|
||||
|
||||
<stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation> -->
|
||||
<!-- <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"
|
||||
></stackdriver-filter>
|
||||
<stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation> -->
|
||||
<!-- <div class="gf-form-inline">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label query-keyword width-9">Alias By</span>
|
||||
<input type="text" class="gf-form-input width-24" ng-model="ctrl.target.aliasBy" ng-change="ctrl.refresh()"
|
||||
ng-model-options="{ debounce: 500 }" />
|
||||
</div>
|
||||
<div class="gf-form gf-form--grow">
|
||||
<div class="gf-form-label gf-form-label--grow"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="gf-form-inline">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-9 query-keyword">Project</span>
|
||||
<input class="gf-form-input width-15" disabled type="text" ng-model='ctrl.target.defaultProject' />
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
|
||||
Show Help
|
||||
<i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
|
||||
<i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
|
||||
</label>
|
||||
</div>
|
||||
<div class="gf-form" ng-show="ctrl.lastQueryMeta">
|
||||
<label class="gf-form-label query-keyword" ng-click="ctrl.showLastQuery = !ctrl.showLastQuery">
|
||||
Raw Query
|
||||
<i class="fa fa-caret-down" ng-show="ctrl.showLastQuery"></i>
|
||||
<i class="fa fa-caret-right" ng-hide="ctrl.showLastQuery"></i>
|
||||
</label>
|
||||
</div>
|
||||
<div class="gf-form gf-form--grow">
|
||||
<div class="gf-form-label gf-form-label--grow"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="gf-form" ng-show="ctrl.showLastQuery">
|
||||
<pre class="gf-form-pre">{{ctrl.lastQueryMeta.rawQueryString}}</pre>
|
||||
</div>
|
||||
<div class="gf-form grafana-info-box" style="padding: 0" ng-show="ctrl.showHelp">
|
||||
<pre class="gf-form-pre alert alert-info" style="margin-right: 0"><h5>Alias Patterns</h5>Format the legend keys any way you want by using alias patterns.
|
||||
|
||||
Format the legend keys any way you want by using alias patterns.<br /> <br />
|
||||
|
||||
Example: <code ng-non-bindable>{{metric.name}} - {{metric.label.instance_name}}</code><br />
|
||||
Result: <code ng-non-bindable>cpu/usage_time - server1-europe-west-1</code><br /><br />
|
||||
|
||||
<strong>Patterns</strong><br />
|
||||
<ul>
|
||||
<li>
|
||||
<code ng-non-bindable>{{metric.type}}</code> = metric type e.g. compute.googleapis.com/instance/cpu/usage_time
|
||||
</li>
|
||||
<li>
|
||||
<code ng-non-bindable>{{metric.name}}</code> = name part of metric e.g. instance/cpu/usage_time
|
||||
</li>
|
||||
<li>
|
||||
<code ng-non-bindable>{{metric.service}}</code> = service part of metric e.g. compute
|
||||
</li>
|
||||
<li>
|
||||
<code ng-non-bindable>{{metric.label.label_name}}</code> = Metric label metadata e.g.
|
||||
metric.label.instance_name
|
||||
</li>
|
||||
<li>
|
||||
<code ng-non-bindable>{{resource.label.label_name}}</code> = Resource label metadata e.g. resource.label.zone
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="gf-form" ng-show="ctrl.lastQueryError">
|
||||
<pre class="gf-form-pre alert alert-error">{{ctrl.lastQueryError}}</pre>
|
||||
</div> -->
|
||||
</query-editor-row>
|
||||
|
||||
@ -1,117 +0,0 @@
|
||||
import coreModule from 'app/core/core_module';
|
||||
import _ from 'lodash';
|
||||
import { alignmentPeriods } from './constants';
|
||||
import { getAlignmentOptionsByMetric, getAggregationOptionsByMetric } from './functions';
|
||||
import kbn from 'app/core/utils/kbn';
|
||||
|
||||
export class StackdriverAggregation {
|
||||
constructor() {
|
||||
return {
|
||||
templateUrl: 'public/app/plugins/datasource/stackdriver/partials/query.aggregation.html',
|
||||
controller: 'StackdriverAggregationCtrl',
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
target: '=',
|
||||
alignmentPeriod: '<',
|
||||
refresh: '&',
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class StackdriverAggregationCtrl {
|
||||
alignmentPeriods: any[];
|
||||
aggOptions: any[];
|
||||
alignOptions: any[];
|
||||
target: any;
|
||||
|
||||
/** @ngInject */
|
||||
constructor(private $scope, private templateSrv) {
|
||||
this.$scope.ctrl = this;
|
||||
this.target = $scope.target;
|
||||
this.alignmentPeriods = alignmentPeriods.map(ap => ({
|
||||
...ap,
|
||||
label: ap.text,
|
||||
}));
|
||||
this.setAggOptions();
|
||||
this.setAlignOptions();
|
||||
const self = this;
|
||||
$scope.$on('metricTypeChanged', () => {
|
||||
self.setAggOptions();
|
||||
self.setAlignOptions();
|
||||
});
|
||||
}
|
||||
|
||||
setAlignOptions() {
|
||||
this.alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
|
||||
...a,
|
||||
label: a.text,
|
||||
}));
|
||||
}
|
||||
|
||||
setAggOptions() {
|
||||
let aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
|
||||
...a,
|
||||
label: a.text,
|
||||
}));
|
||||
if (!aggregations.find(o => o.value === this.templateSrv.replace(this.target.crossSeriesReducer))) {
|
||||
this.deselectAggregationOption('REDUCE_NONE');
|
||||
}
|
||||
|
||||
if (this.target.groupBys.length > 0) {
|
||||
aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
|
||||
this.deselectAggregationOption('REDUCE_NONE');
|
||||
}
|
||||
this.aggOptions = [
|
||||
this.getTemplateVariablesGroup(),
|
||||
{
|
||||
label: 'Aggregations',
|
||||
options: aggregations,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
handleAlignmentChange(value) {
|
||||
this.target.perSeriesAligner = value;
|
||||
this.$scope.refresh();
|
||||
}
|
||||
|
||||
handleAggregationChange(value) {
|
||||
this.target.crossSeriesReducer = value;
|
||||
this.$scope.refresh();
|
||||
}
|
||||
|
||||
handleAlignmentPeriodChange(value) {
|
||||
this.target.alignmentPeriod = value;
|
||||
this.$scope.refresh();
|
||||
}
|
||||
|
||||
formatAlignmentText() {
|
||||
const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind);
|
||||
const selectedAlignment = alignments.find(
|
||||
ap => ap.value === this.templateSrv.replace(this.target.perSeriesAligner)
|
||||
);
|
||||
return `${kbn.secondsToHms(this.$scope.alignmentPeriod)} interval (${
|
||||
selectedAlignment ? selectedAlignment.text : ''
|
||||
})`;
|
||||
}
|
||||
|
||||
deselectAggregationOption(notValidOptionValue: string) {
|
||||
const aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind);
|
||||
const newValue = aggregations.find(o => o.value !== notValidOptionValue);
|
||||
this.target.crossSeriesReducer = newValue ? newValue.value : '';
|
||||
}
|
||||
|
||||
getTemplateVariablesGroup() {
|
||||
return {
|
||||
label: 'Template Variables',
|
||||
options: this.templateSrv.variables.map(v => ({
|
||||
label: `$${v.name}`,
|
||||
value: `$${v.name}`,
|
||||
})),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
coreModule.directive('stackdriverAggregation', StackdriverAggregation);
|
||||
coreModule.controller('StackdriverAggregationCtrl', StackdriverAggregationCtrl);
|
||||
@ -5,64 +5,18 @@ import './query_filter_ctrl';
|
||||
import { StackdriverPicker } from './components/StackdriverPicker';
|
||||
import { react2AngularDirective } from 'app/core/utils/react2angular';
|
||||
import { registerAngularDirectives } from './angular_wrappers';
|
||||
import { Target, QueryMeta } from './types';
|
||||
|
||||
export const DefaultTarget = {
|
||||
defaultProject: 'loading project...',
|
||||
metricType: '',
|
||||
service: '',
|
||||
metric: '',
|
||||
unit: '',
|
||||
crossSeriesReducer: 'REDUCE_MEAN',
|
||||
alignmentPeriod: 'stackdriver-auto',
|
||||
perSeriesAligner: 'ALIGN_MEAN',
|
||||
groupBys: [],
|
||||
filters: [],
|
||||
showAggregationOptions: false,
|
||||
aliasBy: '',
|
||||
metricKind: '',
|
||||
valueType: '',
|
||||
};
|
||||
import { Target } from './types';
|
||||
|
||||
export class StackdriverQueryCtrl extends QueryCtrl {
|
||||
static templateUrl = 'partials/query.editor.html';
|
||||
target: Target;
|
||||
|
||||
defaults = {
|
||||
defaultProject: 'loading project...',
|
||||
metricType: '',
|
||||
service: '',
|
||||
metric: '',
|
||||
unit: '',
|
||||
crossSeriesReducer: 'REDUCE_MEAN',
|
||||
alignmentPeriod: 'stackdriver-auto',
|
||||
perSeriesAligner: 'ALIGN_MEAN',
|
||||
groupBys: [],
|
||||
filters: [],
|
||||
showAggregationOptions: false,
|
||||
aliasBy: '',
|
||||
metricKind: '',
|
||||
valueType: '',
|
||||
};
|
||||
|
||||
showHelp: boolean;
|
||||
showLastQuery: boolean;
|
||||
lastQueryMeta: QueryMeta;
|
||||
lastQueryError?: string;
|
||||
labelData: QueryMeta;
|
||||
|
||||
loadLabelsPromise: Promise<any>;
|
||||
templateSrv: any;
|
||||
$rootScope: any;
|
||||
uiSegmentSrv: any;
|
||||
|
||||
/** @ngInject */
|
||||
constructor($scope, $injector, templateSrv, $rootScope, uiSegmentSrv) {
|
||||
constructor($scope, $injector, templateSrv, uiSegmentSrv) {
|
||||
super($scope, $injector);
|
||||
this.templateSrv = templateSrv;
|
||||
this.$rootScope = $rootScope;
|
||||
this.uiSegmentSrv = uiSegmentSrv;
|
||||
_.defaultsDeep(this.target, this.defaults);
|
||||
react2AngularDirective('stackdriverPicker', StackdriverPicker, [
|
||||
'options',
|
||||
'onChange',
|
||||
@ -74,6 +28,8 @@ export class StackdriverQueryCtrl extends QueryCtrl {
|
||||
['templateVariables', { watchDepth: 'reference' }],
|
||||
]);
|
||||
registerAngularDirectives();
|
||||
this.handleQueryChange = this.handleQueryChange.bind(this);
|
||||
this.handleExecuteQuery = this.handleExecuteQuery.bind(this);
|
||||
}
|
||||
|
||||
handleQueryChange(target: Target) {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { StackdriverAggregationCtrl } from '../query_aggregation_ctrl';
|
||||
const StackdriverAggregationCtrl = ({}, {}) => {};
|
||||
|
||||
describe('StackdriverAggregationCtrl', () => {
|
||||
let ctrl;
|
||||
|
||||
Reference in New Issue
Block a user