mirror of
https://github.com/grafana/grafana.git
synced 2025-08-26 09:31:45 +08:00
Stackdriver: Project selector (#22447)
* clean PR #17366 * udpate vendor * [WIP] Implement projects management for stackdriver * [WIP] Implement projects management for stackdriver * [WIP] Implement projects management for stackdriver * Implement projects management for stackdriver * [WIP][Tests] Fix errors * clean anonymous struct * remove await * don't store project list * Add default project on query editor * gofmt * Fix tests * Move test data source to backend * Use segment instead of dropdown. remove ensure default project since it's not being used anymore. * Fix broken annotation editor * Load gceDefaultAccount only once when in the config page * Reset error message on auth type change * Add metric find query for projects * Remove debug code * Fix broken tests * Fix typings * Fix lint error * Slightly different approach - now having a distiction between config page default project, and project that is selectable from the dropdown in the query editor. * Fix broken tests * Attempt to fix strict ts errors * Prevent state from being set multiple times * Remove noOptionsMessage since it seems to be obosolete in react select * One more attempt to solve ts strict error * Interpolate project template variable. Make sure its loaded correctly when opening variable query editor first time * Implicit any fix * fix: typescript strict null check fixes * Return empty array in case project endpoint fails * Rename project to projectName to prevent clashing with legacy query prop * Fix broken test * fix: Stackdriver - template replace on filter label should have a regex format as that escapes the dots in the label name which is not valid. Co-authored-by: Labesse Kévin <kevin@labesse.me> Co-authored-by: Elias Cédric Laouiti <elias@abtasty.com> Co-authored-by: Daniel Lee <dan.limerick@gmail.com>
This commit is contained in:
Erik Sundell
@ -1,20 +1,18 @@
|
||||
import React from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import _ from 'lodash';
|
||||
|
||||
import { TemplateSrv } from 'app/features/templating/template_srv';
|
||||
import { SelectableValue } from '@grafana/data';
|
||||
import StackdriverDatasource from '../datasource';
|
||||
import appEvents from 'app/core/app_events';
|
||||
import { Segment } from '@grafana/ui';
|
||||
import { MetricDescriptor } from '../types';
|
||||
import { CoreEvents } from 'app/types';
|
||||
|
||||
export interface Props {
|
||||
onChange: (metricDescriptor: MetricDescriptor) => void;
|
||||
templateSrv: TemplateSrv;
|
||||
templateVariableOptions: Array<SelectableValue<string>>;
|
||||
datasource: StackdriverDatasource;
|
||||
defaultProject: string;
|
||||
projectName: string;
|
||||
metricType: string;
|
||||
children?: (renderProps: any) => JSX.Element;
|
||||
}
|
||||
@ -26,72 +24,44 @@ interface State {
|
||||
service: string;
|
||||
metric: string;
|
||||
metricDescriptor: MetricDescriptor;
|
||||
defaultProject: string;
|
||||
projectName: string;
|
||||
}
|
||||
|
||||
export class Metrics extends React.Component<Props, State> {
|
||||
state: State = {
|
||||
export function Metrics(props: Props) {
|
||||
const [state, setState] = useState<State>({
|
||||
metricDescriptors: [],
|
||||
metrics: [],
|
||||
services: [],
|
||||
service: '',
|
||||
metric: '',
|
||||
metricDescriptor: null,
|
||||
defaultProject: '',
|
||||
projectName: null,
|
||||
});
|
||||
|
||||
const { services, service, metrics } = state;
|
||||
const { metricType, templateVariableOptions, projectName } = props;
|
||||
|
||||
const loadMetricDescriptors = async () => {
|
||||
if (projectName) {
|
||||
const metricDescriptors = await props.datasource.getMetricTypes(props.projectName);
|
||||
const services = getServicesList(metricDescriptors);
|
||||
const metrics = getMetricsList(metricDescriptors);
|
||||
const service = metrics.length > 0 ? metrics[0].service : '';
|
||||
const metricDescriptor = getSelectedMetricDescriptor(metricDescriptors, props.metricType);
|
||||
setState({ ...state, metricDescriptors, services, metrics, service: service, metricDescriptor });
|
||||
}
|
||||
};
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
}
|
||||
useEffect(() => {
|
||||
loadMetricDescriptors();
|
||||
}, [projectName]);
|
||||
|
||||
componentDidMount() {
|
||||
this.setState({ defaultProject: this.props.defaultProject }, () => {
|
||||
this.getCurrentProject()
|
||||
.then(this.loadMetricDescriptors.bind(this))
|
||||
.then(this.initializeServiceAndMetrics.bind(this));
|
||||
});
|
||||
}
|
||||
const getSelectedMetricDescriptor = (metricDescriptors: MetricDescriptor[], metricType: string) => {
|
||||
return metricDescriptors.find(md => md.type === props.templateSrv.replace(metricType));
|
||||
};
|
||||
|
||||
async getCurrentProject() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
try {
|
||||
if (!this.state.defaultProject || this.state.defaultProject === 'loading project...') {
|
||||
const defaultProject = await this.props.datasource.getDefaultProject();
|
||||
this.setState({ defaultProject });
|
||||
}
|
||||
resolve(this.state.defaultProject);
|
||||
} catch (error) {
|
||||
appEvents.emit(CoreEvents.dsRequestError, error);
|
||||
reject();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async loadMetricDescriptors() {
|
||||
if (this.state.defaultProject !== 'loading project...') {
|
||||
const metricDescriptors = await this.props.datasource.getMetricTypes(this.state.defaultProject);
|
||||
this.setState({ metricDescriptors });
|
||||
return metricDescriptors;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
async initializeServiceAndMetrics() {
|
||||
const { metricDescriptors } = this.state;
|
||||
const services = this.getServicesList(metricDescriptors);
|
||||
const metrics = this.getMetricsList(metricDescriptors);
|
||||
const service = metrics.length > 0 ? metrics[0].service : '';
|
||||
const metricDescriptor = this.getSelectedMetricDescriptor(this.props.metricType);
|
||||
this.setState({ metricDescriptors, services, metrics, service: service, metricDescriptor });
|
||||
}
|
||||
|
||||
getSelectedMetricDescriptor(metricType: string) {
|
||||
return this.state.metricDescriptors.find(md => md.type === this.props.templateSrv.replace(metricType));
|
||||
}
|
||||
|
||||
getMetricsList(metricDescriptors: MetricDescriptor[]) {
|
||||
const selectedMetricDescriptor = this.getSelectedMetricDescriptor(this.props.metricType);
|
||||
const getMetricsList = (metricDescriptors: MetricDescriptor[]) => {
|
||||
const selectedMetricDescriptor = getSelectedMetricDescriptor(metricDescriptors, props.metricType);
|
||||
if (!selectedMetricDescriptor) {
|
||||
return [];
|
||||
}
|
||||
@ -104,11 +74,11 @@ export class Metrics extends React.Component<Props, State> {
|
||||
description: m.description,
|
||||
}));
|
||||
return metricsByService;
|
||||
}
|
||||
};
|
||||
|
||||
onServiceChange = ({ value: service }: any) => {
|
||||
const { metricDescriptors } = this.state;
|
||||
const { metricType, templateSrv } = this.props;
|
||||
const onServiceChange = ({ value: service }: any) => {
|
||||
const { metricDescriptors } = state;
|
||||
const { metricType, templateSrv } = props;
|
||||
|
||||
const metrics = metricDescriptors
|
||||
.filter(m => m.service === templateSrv.replace(service))
|
||||
@ -119,74 +89,70 @@ export class Metrics extends React.Component<Props, State> {
|
||||
description: m.description,
|
||||
}));
|
||||
|
||||
this.setState({ service, metrics });
|
||||
|
||||
if (metrics.length > 0 && !metrics.some(m => m.value === templateSrv.replace(metricType))) {
|
||||
this.onMetricTypeChange(metrics[0]);
|
||||
onMetricTypeChange(metrics[0], { service, metrics });
|
||||
} else {
|
||||
setState({ ...state, service, metrics });
|
||||
}
|
||||
};
|
||||
|
||||
onMetricTypeChange = ({ value }: any) => {
|
||||
const metricDescriptor = this.getSelectedMetricDescriptor(value);
|
||||
this.setState({ metricDescriptor });
|
||||
this.props.onChange({ ...metricDescriptor, type: value });
|
||||
const onMetricTypeChange = ({ value }: any, extra: any = {}) => {
|
||||
const metricDescriptor = getSelectedMetricDescriptor(state.metricDescriptors, value);
|
||||
setState({ ...state, metricDescriptor, ...extra });
|
||||
props.onChange({ ...metricDescriptor, type: value });
|
||||
};
|
||||
|
||||
getServicesList(metricDescriptors: MetricDescriptor[]) {
|
||||
const getServicesList = (metricDescriptors: MetricDescriptor[]) => {
|
||||
const services = metricDescriptors.map(m => ({
|
||||
value: m.service,
|
||||
label: _.startCase(m.serviceShortName),
|
||||
}));
|
||||
|
||||
return services.length > 0 ? _.uniqBy(services, s => s.value) : [];
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { services, service, metrics } = this.state;
|
||||
const { metricType, templateVariableOptions } = this.props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="gf-form-inline">
|
||||
<span className="gf-form-label width-9 query-keyword">Service</span>
|
||||
<Segment
|
||||
onChange={this.onServiceChange}
|
||||
value={[...services, ...templateVariableOptions].find(s => s.value === service)}
|
||||
options={[
|
||||
{
|
||||
label: 'Template Variables',
|
||||
options: templateVariableOptions,
|
||||
},
|
||||
...services,
|
||||
]}
|
||||
placeholder="Select Services"
|
||||
></Segment>
|
||||
<div className="gf-form gf-form--grow">
|
||||
<div className="gf-form-label gf-form-label--grow" />
|
||||
</div>
|
||||
console.log('rerender', { service, metricType });
|
||||
return (
|
||||
<>
|
||||
<div className="gf-form-inline">
|
||||
<span className="gf-form-label width-9 query-keyword">Service</span>
|
||||
<Segment
|
||||
onChange={onServiceChange}
|
||||
value={[...services, ...templateVariableOptions].find(s => s.value === service)}
|
||||
options={[
|
||||
{
|
||||
label: 'Template Variables',
|
||||
options: templateVariableOptions,
|
||||
},
|
||||
...services,
|
||||
]}
|
||||
placeholder="Select Services"
|
||||
></Segment>
|
||||
<div className="gf-form gf-form--grow">
|
||||
<div className="gf-form-label gf-form-label--grow" />
|
||||
</div>
|
||||
<div className="gf-form-inline">
|
||||
<span className="gf-form-label width-9 query-keyword">Metric</span>
|
||||
</div>
|
||||
<div className="gf-form-inline">
|
||||
<span className="gf-form-label width-9 query-keyword">Metric</span>
|
||||
|
||||
<Segment
|
||||
className="query-part"
|
||||
onChange={this.onMetricTypeChange}
|
||||
value={[...metrics, ...templateVariableOptions].find(s => s.value === metricType)}
|
||||
options={[
|
||||
{
|
||||
label: 'Template Variables',
|
||||
options: templateVariableOptions,
|
||||
},
|
||||
...metrics,
|
||||
]}
|
||||
placeholder="Select Metric"
|
||||
></Segment>
|
||||
<div className="gf-form gf-form--grow">
|
||||
<div className="gf-form-label gf-form-label--grow" />
|
||||
</div>
|
||||
<Segment
|
||||
className="query-part"
|
||||
onChange={onMetricTypeChange}
|
||||
value={[...metrics, ...templateVariableOptions].find(s => s.value === metricType)}
|
||||
options={[
|
||||
{
|
||||
label: 'Template Variables',
|
||||
options: templateVariableOptions,
|
||||
},
|
||||
...metrics,
|
||||
]}
|
||||
placeholder="Select Metric"
|
||||
></Segment>
|
||||
<div className="gf-form gf-form--grow">
|
||||
<div className="gf-form-label gf-form-label--grow" />
|
||||
</div>
|
||||
{this.props.children(this.state.metricDescriptor)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
{props.children(state.metricDescriptor)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user