opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-02 06:52:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

stackdriver: small fixes after reactifying

Browse Source
This commit is contained in:
Daniel Lee
2019-01-14 18:23:01 +01:00
parent b4a51ad7ce
commit 18abb87cbb
11 changed files with 35 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/core/angular_wrappers.ts
View File

@ -1,6 +1,6 @@
import { react2AngularDirective } from 'app/core/utils/react2angular';
import { QueryEditor } from 'app/plugins/datasource/stackdriver/components/QueryEditor';
import { AnnotationQueryEditor } from 'app/plugins/datasource/stackdriver/components/AnnotationQueryEditor';
import { QueryEditor as StackdriverQueryEditor } from 'app/plugins/datasource/stackdriver/components/QueryEditor';
import { AnnotationQueryEditor as StackdriverAnnotationQueryEditor } from 'app/plugins/datasource/stackdriver/components/AnnotationQueryEditor';
import { PasswordStrength } from './components/PasswordStrength';
import PageHeader from './components/PageHeader/PageHeader';
import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
@ -41,7 +41,7 @@ export function registerAngularDirectives() {
'placeholder',
['variables', { watchDepth: 'reference' }],
]);
react2AngularDirective('queryEditor', QueryEditor, [
react2AngularDirective('stackdriverQueryEditor', StackdriverQueryEditor, [
'target',
'onQueryChange',
'onExecuteQuery',
@ -49,7 +49,7 @@ export function registerAngularDirectives() {
['datasource', { watchDepth: 'reference' }],
['templateSrv', { watchDepth: 'reference' }],
]);
react2AngularDirective('annotationQueryEditor', AnnotationQueryEditor, [
react2AngularDirective('stackdriverAnnotationQueryEditor', StackdriverAnnotationQueryEditor, [
'target',
'onQueryChange',
'onExecuteQuery',

8
public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
View File

@ -52,11 +52,11 @@ export class Aggregations extends React.Component<Props, State> {
this.setState({ aggOptions });
}
onToggleDisplayAdvanced() {
onToggleDisplayAdvanced = () => {
this.setState(state => ({
displayAdvancedOptions: !state.displayAdvancedOptions,
}));
}
};
render() {
const { displayAdvancedOptions, aggOptions } = this.state;
@ -68,7 +68,7 @@ export class Aggregations extends React.Component<Props, State> {
<div className="gf-form">
<label className="gf-form-label query-keyword width-9">Aggregation</label>
<MetricSelect
onChange={value => onChange(value)}
onChange={onChange}
value={crossSeriesReducer}
variables={templateSrv.variables}
options={aggOptions}
@ -78,7 +78,7 @@ export class Aggregations extends React.Component<Props, State> {
</div>
<div className="gf-form gf-form--grow">
<label className="gf-form-label gf-form-label--grow">
<a onClick={() => this.onToggleDisplayAdvanced()}>
<a onClick={this.onToggleDisplayAdvanced}>
<>
<i className={`fa fa-caret-${displayAdvancedOptions ? 'down' : 'right'}`} /> Advanced Options
</>

11
public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
View File

@ -29,10 +29,10 @@ export class AliasBy extends Component<Props, State> {
}
}
onChange(e) {
onChange = e => {
this.setState({ value: e.target.value });
this.propagateOnChange(e.target.value);
}
};
render() {
return (
@ -40,12 +40,7 @@ export class AliasBy extends Component<Props, State> {
<div className="gf-form-inline">
<div className="gf-form">
<label className="gf-form-label query-keyword width-9">Alias By</label>
<input
type="text"
className="gf-form-input width-24"
value={this.state.value}
onChange={e => this.onChange(e)}
/>
<input type="text" className="gf-form-input width-24" value={this.state.value} onChange={this.onChange} />
</div>
<div className="gf-form gf-form--grow">
<div className="gf-form-label gf-form-label--grow" />

2
public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
View File

@ -29,7 +29,7 @@ export const AlignmentPeriods: SFC<Props> = ({
<div className="gf-form">
<label className="gf-form-label query-keyword width-9">Alignment Period</label>
<MetricSelect
onChange={value => onChange(value)}
onChange={onChange}
value={alignmentPeriod}
variables={templateSrv.variables}
options={[

2
public/app/plugins/datasource/stackdriver/components/Alignments.tsx
View File

@ -17,7 +17,7 @@ export const Alignments: SFC<Props> = ({ perSeriesAligner, templateSrv, onChange
<div className="gf-form offset-width-9">
<label className="gf-form-label query-keyword width-15">Aligner</label>
<MetricSelect
onChange={value => onChange(value)}
onChange={onChange}
value={perSeriesAligner}
variables={templateSrv.variables}
options={alignOptions}

6
public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
View File

@ -40,7 +40,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
});
}
onMetricTypeChange({ valueType, metricKind, type, unit }) {
onMetricTypeChange = ({ valueType, metricKind, type, unit }) => {
const { onQueryChange } = this.props;
this.setState(
{
@ -53,7 +53,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
onQueryChange(this.state);
}
);
}
};
onChange(prop, value) {
this.setState({ [prop]: value }, () => {
@ -72,7 +72,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
metricType={metricType}
templateSrv={templateSrv}
datasource={datasource}
onChange={value => this.onMetricTypeChange(value)}
onChange={this.onMetricTypeChange}
>
{metric => (
<>

12
public/app/plugins/datasource/stackdriver/components/Help.tsx
View File

@ -19,13 +19,13 @@ export class Help extends React.Component<Props, State> {
displaRawQuery: false,
};
onHelpClicked() {
onHelpClicked = () => {
this.setState({ displayHelp: !this.state.displayHelp });
}
};
onRawQueryClicked() {
onRawQueryClicked = () => {
this.setState({ displaRawQuery: !this.state.displaRawQuery });
}
};
shouldComponentUpdate(nextProps) {
return nextProps.metricDescriptor !== null;
@ -39,14 +39,14 @@ export class Help extends React.Component<Props, State> {
<>
<div className="gf-form-inline">
<Project datasource={datasource} />
<div className="gf-form" onClick={() => this.onHelpClicked()}>
<div className="gf-form" onClick={this.onHelpClicked}>
<label className="gf-form-label query-keyword pointer">
Show Help <i className={`fa fa-caret-${displayHelp ? 'down' : 'right'}`} />
</label>
</div>
{rawQuery && (
<div className="gf-form" onClick={() => this.onRawQueryClicked()}>
<div className="gf-form" onClick={this.onRawQueryClicked}>
<label className="gf-form-label query-keyword">
Raw Query <i className={`fa fa-caret-${displaRawQuery ? 'down' : 'right'}`} ng-show="ctrl.showHelp" />
</label>

12
public/app/plugins/datasource/stackdriver/components/Metrics.tsx
View File

@ -100,7 +100,7 @@ export class Metrics extends React.Component<Props, State> {
return metricsByService;
}
onServiceChange(service) {
onServiceChange = service => {
const { metricDescriptors } = this.state;
const { templateSrv, metricType } = this.props;
@ -116,13 +116,13 @@ export class Metrics extends React.Component<Props, State> {
if (metrics.length > 0 && !metrics.some(m => m.value === templateSrv.replace(metricType))) {
this.onMetricTypeChange(metrics[0].value);
}
}
};
onMetricTypeChange(value) {
onMetricTypeChange = value => {
const metricDescriptor = this.getSelectedMetricDescriptor(value);
this.setState({ metricDescriptor });
this.props.onChange({ ...metricDescriptor, type: value });
}
};
getServicesList(metricDescriptors: MetricDescriptor[]) {
const services = metricDescriptors.map(m => ({
@ -153,7 +153,7 @@ export class Metrics extends React.Component<Props, State> {
<div className="gf-form">
<span className="gf-form-label width-9 query-keyword">Service</span>
<MetricSelect
onChange={value => this.onServiceChange(value)}
onChange={this.onServiceChange}
value={service}
options={services}
isSearchable={false}
@ -169,7 +169,7 @@ export class Metrics extends React.Component<Props, State> {
<div className="gf-form">
<span className="gf-form-label width-9 query-keyword">Metric</span>
<MetricSelect
onChange={value => this.onMetricTypeChange(value)}
onChange={this.onMetricTypeChange}
value={metricType}
variables={templateSrv.variables}
options={[

6
public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
View File

@ -99,7 +99,7 @@ export class QueryEditor extends React.Component<Props, State> {
this.setState({ lastQuery, lastQueryError });
}
onMetricTypeChange({ valueType, metricKind, type, unit }: MetricDescriptor) {
onMetricTypeChange = ({ valueType, metricKind, type, unit }: MetricDescriptor) => {
const { templateSrv, onQueryChange, onExecuteQuery } = this.props;
const { perSeriesAligner, alignOptions } = getAlignmentPickerData(
{ valueType, metricKind, perSeriesAligner: this.state.perSeriesAligner },
@ -119,7 +119,7 @@ export class QueryEditor extends React.Component<Props, State> {
onExecuteQuery();
}
);
}
};
onPropertyChange(prop, value) {
this.setState({ [prop]: value }, () => {
@ -153,7 +153,7 @@ export class QueryEditor extends React.Component<Props, State> {
metricType={metricType}
templateSrv={templateSrv}
datasource={datasource}
onChange={value => this.onMetricTypeChange(value)}
onChange={this.onMetricTypeChange}
>
{metric => (
<>

4
public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
View File

@ -1,6 +1,6 @@
<annotation-query-editor
<stackdriver-annotation-query-editor
target="ctrl.annotation.target"
on-query-change="(ctrl.onQueryChange)"
datasource="ctrl.datasource"
template-srv="ctrl.templateSrv"
></annotation-query-editor>
></stackdriver-annotation-query-editor>

4
public/app/plugins/datasource/stackdriver/partials/query.editor.html
View File

@ -1,10 +1,10 @@
<query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
<query-editor
<stackdriver-query-editor
target="ctrl.target"
events="ctrl.panelCtrl.events"
datasource="ctrl.datasource"
template-srv="ctrl.templateSrv"
on-query-change="(ctrl.onQueryChange)"
on-execute-query="(ctrl.onExecuteQuery)"
></query-editor>
></stackdriver-query-editor>
</query-editor-row>