Skip to content

N
nexpie-grafana-theme
Commit 18abb87c by Daniel Lee
Options

stackdriver: small fixes after reactifying

parent b4a51ad7
Showing with 35 additions and 40 deletions
public/app/core/angular_wrappers.ts
import { react2AngularDirective } from 'app/core/utils/react2angular'; import { react2AngularDirective } from 'app/core/utils/react2angular';
import { QueryEditor } from 'app/plugins/datasource/stackdriver/components/QueryEditor'; import { QueryEditor as StackdriverQueryEditor } from 'app/plugins/datasource/stackdriver/components/QueryEditor';
import { AnnotationQueryEditor } from 'app/plugins/datasource/stackdriver/components/AnnotationQueryEditor'; import { AnnotationQueryEditor as StackdriverAnnotationQueryEditor } from 'app/plugins/datasource/stackdriver/components/AnnotationQueryEditor';
import { PasswordStrength } from './components/PasswordStrength'; import { PasswordStrength } from './components/PasswordStrength';
import PageHeader from './components/PageHeader/PageHeader'; import PageHeader from './components/PageHeader/PageHeader';
import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA'; import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
...@@ -41,7 +41,7 @@ export function registerAngularDirectives() { ...@@ -41,7 +41,7 @@ export function registerAngularDirectives() {
'placeholder', 'placeholder',
['variables', { watchDepth: 'reference' }], ['variables', { watchDepth: 'reference' }],
]); ]);
react2AngularDirective('queryEditor', QueryEditor, [ react2AngularDirective('stackdriverQueryEditor', StackdriverQueryEditor, [
'target', 'target',
'onQueryChange', 'onQueryChange',
'onExecuteQuery', 'onExecuteQuery',
...@@ -49,7 +49,7 @@ export function registerAngularDirectives() { ...@@ -49,7 +49,7 @@ export function registerAngularDirectives() {
['datasource', { watchDepth: 'reference' }], ['datasource', { watchDepth: 'reference' }],
['templateSrv', { watchDepth: 'reference' }], ['templateSrv', { watchDepth: 'reference' }],
]); ]);
react2AngularDirective('annotationQueryEditor', AnnotationQueryEditor, [ react2AngularDirective('stackdriverAnnotationQueryEditor', StackdriverAnnotationQueryEditor, [
'target', 'target',
'onQueryChange', 'onQueryChange',
'onExecuteQuery', 'onExecuteQuery',
......
public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
...@@ -52,11 +52,11 @@ export class Aggregations extends React.Component<Props, State> { ...@@ -52,11 +52,11 @@ export class Aggregations extends React.Component<Props, State> {
this.setState({ aggOptions }); this.setState({ aggOptions });
} }
onToggleDisplayAdvanced() { onToggleDisplayAdvanced = () => {
this.setState(state => ({ this.setState(state => ({
displayAdvancedOptions: !state.displayAdvancedOptions, displayAdvancedOptions: !state.displayAdvancedOptions,
})); }));
} };
render() { render() {
const { displayAdvancedOptions, aggOptions } = this.state; const { displayAdvancedOptions, aggOptions } = this.state;
...@@ -68,7 +68,7 @@ export class Aggregations extends React.Component<Props, State> { ...@@ -68,7 +68,7 @@ export class Aggregations extends React.Component<Props, State> {
<div className="gf-form"> <div className="gf-form">
<label className="gf-form-label query-keyword width-9">Aggregation</label> <label className="gf-form-label query-keyword width-9">Aggregation</label>
<MetricSelect <MetricSelect
onChange={value => onChange(value)} onChange={onChange}
value={crossSeriesReducer} value={crossSeriesReducer}
variables={templateSrv.variables} variables={templateSrv.variables}
options={aggOptions} options={aggOptions}
...@@ -78,7 +78,7 @@ export class Aggregations extends React.Component<Props, State> { ...@@ -78,7 +78,7 @@ export class Aggregations extends React.Component<Props, State> {
</div> </div>
<div className="gf-form gf-form--grow"> <div className="gf-form gf-form--grow">
<label className="gf-form-label gf-form-label--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 <i className={`fa fa-caret-${displayAdvancedOptions ? 'down' : 'right'}`} /> Advanced Options
</> </>
......
public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
...@@ -29,10 +29,10 @@ export class AliasBy extends Component<Props, State> { ...@@ -29,10 +29,10 @@ export class AliasBy extends Component<Props, State> {
} }
} }
onChange(e) { onChange = e => {
this.setState({ value: e.target.value }); this.setState({ value: e.target.value });
this.propagateOnChange(e.target.value); this.propagateOnChange(e.target.value);
} };
render() { render() {
return ( return (
...@@ -40,12 +40,7 @@ export class AliasBy extends Component<Props, State> { ...@@ -40,12 +40,7 @@ export class AliasBy extends Component<Props, State> {
<div className="gf-form-inline"> <div className="gf-form-inline">
<div className="gf-form"> <div className="gf-form">
<label className="gf-form-label query-keyword width-9">Alias By</label> <label className="gf-form-label query-keyword width-9">Alias By</label>
<input <input type="text" className="gf-form-input width-24" value={this.state.value} onChange={this.onChange} />
type="text"
className="gf-form-input width-24"
value={this.state.value}
onChange={e => this.onChange(e)}
/>
</div> </div>
<div className="gf-form gf-form--grow"> <div className="gf-form gf-form--grow">
<div className="gf-form-label gf-form-label--grow" /> <div className="gf-form-label gf-form-label--grow" />
......
public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
...@@ -29,7 +29,7 @@ export const AlignmentPeriods: SFC<Props> = ({ ...@@ -29,7 +29,7 @@ export const AlignmentPeriods: SFC<Props> = ({
<div className="gf-form"> <div className="gf-form">
<label className="gf-form-label query-keyword width-9">Alignment Period</label> <label className="gf-form-label query-keyword width-9">Alignment Period</label>
<MetricSelect <MetricSelect
onChange={value => onChange(value)} onChange={onChange}
value={alignmentPeriod} value={alignmentPeriod}
variables={templateSrv.variables} variables={templateSrv.variables}
options={[ options={[
......
public/app/plugins/datasource/stackdriver/components/Alignments.tsx
...@@ -17,7 +17,7 @@ export const Alignments: SFC<Props> = ({ perSeriesAligner, templateSrv, onChange ...@@ -17,7 +17,7 @@ export const Alignments: SFC<Props> = ({ perSeriesAligner, templateSrv, onChange
<div className="gf-form offset-width-9"> <div className="gf-form offset-width-9">
<label className="gf-form-label query-keyword width-15">Aligner</label> <label className="gf-form-label query-keyword width-15">Aligner</label>
<MetricSelect <MetricSelect
onChange={value => onChange(value)} onChange={onChange}
value={perSeriesAligner} value={perSeriesAligner}
variables={templateSrv.variables} variables={templateSrv.variables}
options={alignOptions} options={alignOptions}
......
public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
...@@ -40,7 +40,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> { ...@@ -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; const { onQueryChange } = this.props;
this.setState( this.setState(
{ {
...@@ -53,7 +53,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> { ...@@ -53,7 +53,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
onQueryChange(this.state); onQueryChange(this.state);
} }
); );
} };
onChange(prop, value) { onChange(prop, value) {
this.setState({ [prop]: value }, () => { this.setState({ [prop]: value }, () => {
...@@ -72,7 +72,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> { ...@@ -72,7 +72,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
metricType={metricType} metricType={metricType}
templateSrv={templateSrv} templateSrv={templateSrv}
datasource={datasource} datasource={datasource}
onChange={value => this.onMetricTypeChange(value)} onChange={this.onMetricTypeChange}
> >
{metric => ( {metric => (
<> <>
......
public/app/plugins/datasource/stackdriver/components/Help.tsx
...@@ -19,13 +19,13 @@ export class Help extends React.Component<Props, State> { ...@@ -19,13 +19,13 @@ export class Help extends React.Component<Props, State> {
displaRawQuery: false, displaRawQuery: false,
}; };
onHelpClicked() { onHelpClicked = () => {
this.setState({ displayHelp: !this.state.displayHelp }); this.setState({ displayHelp: !this.state.displayHelp });
} };
onRawQueryClicked() { onRawQueryClicked = () => {
this.setState({ displaRawQuery: !this.state.displaRawQuery }); this.setState({ displaRawQuery: !this.state.displaRawQuery });
} };
shouldComponentUpdate(nextProps) { shouldComponentUpdate(nextProps) {
return nextProps.metricDescriptor !== null; return nextProps.metricDescriptor !== null;
...@@ -39,14 +39,14 @@ export class Help extends React.Component<Props, State> { ...@@ -39,14 +39,14 @@ export class Help extends React.Component<Props, State> {
<> <>
<div className="gf-form-inline"> <div className="gf-form-inline">
<Project datasource={datasource} /> <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"> <label className="gf-form-label query-keyword pointer">
Show Help <i className={`fa fa-caret-${displayHelp ? 'down' : 'right'}`} /> Show Help <i className={`fa fa-caret-${displayHelp ? 'down' : 'right'}`} />
</label> </label>
</div> </div>
{rawQuery && ( {rawQuery && (
<div className="gf-form" onClick={() => this.onRawQueryClicked()}> <div className="gf-form" onClick={this.onRawQueryClicked}>
<label className="gf-form-label query-keyword"> <label className="gf-form-label query-keyword">
Raw Query <i className={`fa fa-caret-${displaRawQuery ? 'down' : 'right'}`} ng-show="ctrl.showHelp" /> Raw Query <i className={`fa fa-caret-${displaRawQuery ? 'down' : 'right'}`} ng-show="ctrl.showHelp" />
</label> </label>
......
public/app/plugins/datasource/stackdriver/components/Metrics.tsx
...@@ -100,7 +100,7 @@ export class Metrics extends React.Component<Props, State> { ...@@ -100,7 +100,7 @@ export class Metrics extends React.Component<Props, State> {
return metricsByService; return metricsByService;
} }
onServiceChange(service) { onServiceChange = service => {
const { metricDescriptors } = this.state; const { metricDescriptors } = this.state;
const { templateSrv, metricType } = this.props; const { templateSrv, metricType } = this.props;
...@@ -116,13 +116,13 @@ export class Metrics extends React.Component<Props, State> { ...@@ -116,13 +116,13 @@ export class Metrics extends React.Component<Props, State> {
if (metrics.length > 0 && !metrics.some(m => m.value === templateSrv.replace(metricType))) { if (metrics.length > 0 && !metrics.some(m => m.value === templateSrv.replace(metricType))) {
this.onMetricTypeChange(metrics[0].value); this.onMetricTypeChange(metrics[0].value);
} }
} };
onMetricTypeChange(value) { onMetricTypeChange = value => {
const metricDescriptor = this.getSelectedMetricDescriptor(value); const metricDescriptor = this.getSelectedMetricDescriptor(value);
this.setState({ metricDescriptor }); this.setState({ metricDescriptor });
this.props.onChange({ ...metricDescriptor, type: value }); this.props.onChange({ ...metricDescriptor, type: value });
} };
getServicesList(metricDescriptors: MetricDescriptor[]) { getServicesList(metricDescriptors: MetricDescriptor[]) {
const services = metricDescriptors.map(m => ({ const services = metricDescriptors.map(m => ({
...@@ -153,7 +153,7 @@ export class Metrics extends React.Component<Props, State> { ...@@ -153,7 +153,7 @@ export class Metrics extends React.Component<Props, State> {
<div className="gf-form"> <div className="gf-form">
<span className="gf-form-label width-9 query-keyword">Service</span> <span className="gf-form-label width-9 query-keyword">Service</span>
<MetricSelect <MetricSelect
onChange={value => this.onServiceChange(value)} onChange={this.onServiceChange}
value={service} value={service}
options={services} options={services}
isSearchable={false} isSearchable={false}
...@@ -169,7 +169,7 @@ export class Metrics extends React.Component<Props, State> { ...@@ -169,7 +169,7 @@ export class Metrics extends React.Component<Props, State> {
<div className="gf-form"> <div className="gf-form">
<span className="gf-form-label width-9 query-keyword">Metric</span> <span className="gf-form-label width-9 query-keyword">Metric</span>
<MetricSelect <MetricSelect
onChange={value => this.onMetricTypeChange(value)} onChange={this.onMetricTypeChange}
value={metricType} value={metricType}
variables={templateSrv.variables} variables={templateSrv.variables}
options={[ options={[
......
public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
...@@ -99,7 +99,7 @@ export class QueryEditor extends React.Component<Props, State> { ...@@ -99,7 +99,7 @@ export class QueryEditor extends React.Component<Props, State> {
this.setState({ lastQuery, lastQueryError }); this.setState({ lastQuery, lastQueryError });
} }
onMetricTypeChange({ valueType, metricKind, type, unit }: MetricDescriptor) { onMetricTypeChange = ({ valueType, metricKind, type, unit }: MetricDescriptor) => {
const { templateSrv, onQueryChange, onExecuteQuery } = this.props; const { templateSrv, onQueryChange, onExecuteQuery } = this.props;
const { perSeriesAligner, alignOptions } = getAlignmentPickerData( const { perSeriesAligner, alignOptions } = getAlignmentPickerData(
{ valueType, metricKind, perSeriesAligner: this.state.perSeriesAligner }, { valueType, metricKind, perSeriesAligner: this.state.perSeriesAligner },
...@@ -119,7 +119,7 @@ export class QueryEditor extends React.Component<Props, State> { ...@@ -119,7 +119,7 @@ export class QueryEditor extends React.Component<Props, State> {
onExecuteQuery(); onExecuteQuery();
} }
); );
} };
onPropertyChange(prop, value) { onPropertyChange(prop, value) {
this.setState({ [prop]: value }, () => { this.setState({ [prop]: value }, () => {
...@@ -153,7 +153,7 @@ export class QueryEditor extends React.Component<Props, State> { ...@@ -153,7 +153,7 @@ export class QueryEditor extends React.Component<Props, State> {
metricType={metricType} metricType={metricType}
templateSrv={templateSrv} templateSrv={templateSrv}
datasource={datasource} datasource={datasource}
onChange={value => this.onMetricTypeChange(value)} onChange={this.onMetricTypeChange}
> >
{metric => ( {metric => (
<> <>
......
public/app/plugins/datasource/stackdriver/partials/annotations.editor.html
<annotation-query-editor <stackdriver-annotation-query-editor
target="ctrl.annotation.target" target="ctrl.annotation.target"
on-query-change="(ctrl.onQueryChange)" on-query-change="(ctrl.onQueryChange)"
datasource="ctrl.datasource" datasource="ctrl.datasource"
template-srv="ctrl.templateSrv" template-srv="ctrl.templateSrv"
></annotation-query-editor> ></stackdriver-annotation-query-editor>
public/app/plugins/datasource/stackdriver/partials/query.editor.html
<query-editor-row query-ctrl="ctrl" has-text-edit-mode="false"> <query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
<query-editor <stackdriver-query-editor
target="ctrl.target" target="ctrl.target"
events="ctrl.panelCtrl.events" events="ctrl.panelCtrl.events"
datasource="ctrl.datasource" datasource="ctrl.datasource"
template-srv="ctrl.templateSrv" template-srv="ctrl.templateSrv"
on-query-change="(ctrl.onQueryChange)" on-query-change="(ctrl.onQueryChange)"
on-execute-query="(ctrl.onExecuteQuery)" on-execute-query="(ctrl.onExecuteQuery)"
></query-editor> ></stackdriver-query-editor>
</query-editor-row> </query-editor-row>
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