mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Explore: use GrafanaTheme2 (AdHocFilter component) (#37434)
* Explore: use GrafanaTheme2 and useStyles2 instead of the old ones * Explore: delete files and components that were'nt being used
This commit is contained in:
Olof Bourghardt
GitHub
@@ -1,100 +0,0 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { InfluxLogsQueryField, pairsAreValid } from './InfluxLogsQueryField';
|
||||
import { InfluxDatasourceMock } from '../datasource.mock';
|
||||
import InfluxDatasource from '../datasource';
|
||||
import { InfluxQuery } from '../types';
|
||||
import { ButtonCascader } from '@grafana/ui';
|
||||
import { KeyValuePair } from '../../../../features/explore/AdHocFilterField';
|
||||
|
||||
describe('pairsAreValid()', () => {
|
||||
describe('when all pairs are fully defined', () => {
|
||||
it('should return true', () => {
|
||||
const pairs = [
|
||||
{
|
||||
key: 'a',
|
||||
operator: '=',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
key: 'b',
|
||||
operator: '!=',
|
||||
value: '2',
|
||||
},
|
||||
];
|
||||
|
||||
expect(pairsAreValid(pairs as any)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when no pairs are defined at all', () => {
|
||||
it('should return true', () => {
|
||||
expect(pairsAreValid([])).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when pairs are undefined', () => {
|
||||
it('should return true', () => {
|
||||
expect(pairsAreValid((undefined as unknown) as KeyValuePair[])).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when one or more pairs are only partially defined', () => {
|
||||
it('should return false', () => {
|
||||
const pairs = [
|
||||
{
|
||||
key: 'a',
|
||||
operator: undefined,
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
key: 'b',
|
||||
operator: '!=',
|
||||
value: '2',
|
||||
},
|
||||
];
|
||||
|
||||
expect(pairsAreValid(pairs as any)).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('InfluxLogsQueryField', () => {
|
||||
it('should load and show correct measurements and fields in cascader', async () => {
|
||||
const wrapper = getInfluxLogsQueryField();
|
||||
// Looks strange but we do async stuff in didMount and this will push the stack at the end of eval loop, effectively
|
||||
// waiting for the didMount to finish.
|
||||
await new Promise((resolve) => setImmediate(resolve));
|
||||
wrapper.update();
|
||||
const cascader = wrapper.find(ButtonCascader);
|
||||
expect(cascader.prop('options')).toEqual([
|
||||
{ label: 'logs', value: 'logs', children: [{ label: 'description', value: 'description', children: [] }] },
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
function getInfluxLogsQueryField(props?: any) {
|
||||
const datasource: InfluxDatasource = new InfluxDatasourceMock(
|
||||
props?.measurements || {
|
||||
logs: [{ name: 'description', type: 'string' }],
|
||||
}
|
||||
) as any;
|
||||
|
||||
const defaultProps = {
|
||||
datasource,
|
||||
history: [] as any[],
|
||||
onRunQuery: () => {},
|
||||
onChange: (query: InfluxQuery) => {},
|
||||
query: {
|
||||
refId: '',
|
||||
} as InfluxQuery,
|
||||
};
|
||||
return mount(
|
||||
<InfluxLogsQueryField
|
||||
{...{
|
||||
...defaultProps,
|
||||
...props,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,167 +0,0 @@
|
||||
import React from 'react';
|
||||
import { ExploreQueryFieldProps } from '@grafana/data';
|
||||
import { ButtonCascader, CascaderOption } from '@grafana/ui';
|
||||
|
||||
import InfluxQueryModel from '../influx_query_model';
|
||||
import { AdHocFilterField, KeyValuePair } from 'app/features/explore/AdHocFilterField';
|
||||
import { getTemplateSrv, TemplateSrv } from '@grafana/runtime';
|
||||
import InfluxDatasource from '../datasource';
|
||||
import { InfluxQueryBuilder } from '../query_builder';
|
||||
import { InfluxOptions, InfluxQuery } from '../types';
|
||||
|
||||
export interface Props extends ExploreQueryFieldProps<InfluxDatasource, InfluxQuery, InfluxOptions> {}
|
||||
|
||||
export interface State {
|
||||
measurements: CascaderOption[];
|
||||
measurement: string | null;
|
||||
field: string | null;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
interface ChooserOptions {
|
||||
measurement: string | null;
|
||||
field: string | null;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
// Helper function for determining if a collection of pairs are valid
|
||||
// where a valid pair is either fully defined, or not defined at all, but not partially defined
|
||||
export function pairsAreValid(pairs: KeyValuePair[]) {
|
||||
return (
|
||||
!pairs ||
|
||||
pairs.every((pair) => {
|
||||
const allDefined = !!(pair.key && pair.operator && pair.value);
|
||||
const allEmpty = pair.key === undefined && pair.operator === undefined && pair.value === undefined;
|
||||
return allDefined || allEmpty;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
function getChooserText({ measurement, field, error }: ChooserOptions): string {
|
||||
if (error) {
|
||||
return '(No measurement found)';
|
||||
}
|
||||
if (measurement) {
|
||||
return `Measurements (${measurement}/${field})`;
|
||||
}
|
||||
return 'Measurements';
|
||||
}
|
||||
|
||||
export class InfluxLogsQueryField extends React.PureComponent<Props, State> {
|
||||
templateSrv: TemplateSrv = getTemplateSrv();
|
||||
state: State = {
|
||||
measurements: [],
|
||||
measurement: null,
|
||||
field: null,
|
||||
error: null,
|
||||
};
|
||||
|
||||
async componentDidMount() {
|
||||
const { datasource } = this.props;
|
||||
try {
|
||||
const queryBuilder = new InfluxQueryBuilder({ measurement: '', tags: [] }, datasource.database);
|
||||
const measureMentsQuery = queryBuilder.buildExploreQuery('MEASUREMENTS');
|
||||
const influxMeasurements = await datasource.metricFindQuery(measureMentsQuery);
|
||||
|
||||
const measurements = [];
|
||||
for (let index = 0; index < influxMeasurements.length; index++) {
|
||||
const measurementObj = influxMeasurements[index];
|
||||
const queryBuilder = new InfluxQueryBuilder(
|
||||
{ measurement: measurementObj.text, tags: [] },
|
||||
datasource.database
|
||||
);
|
||||
const fieldsQuery = queryBuilder.buildExploreQuery('FIELDS');
|
||||
const influxFields = await datasource.metricFindQuery(fieldsQuery);
|
||||
const fields: any[] = influxFields.map((field: any): any => ({
|
||||
label: field.text,
|
||||
value: field.text,
|
||||
children: [],
|
||||
}));
|
||||
measurements.push({
|
||||
label: measurementObj.text,
|
||||
value: measurementObj.text,
|
||||
children: fields,
|
||||
});
|
||||
}
|
||||
this.setState({ measurements });
|
||||
} catch (error) {
|
||||
const message = error && error.message ? error.message : error;
|
||||
console.error(error);
|
||||
this.setState({ error: message });
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props) {
|
||||
if (prevProps.query.measurement && !this.props.query.measurement) {
|
||||
this.setState({ measurement: null, field: null });
|
||||
}
|
||||
}
|
||||
|
||||
onMeasurementsChange = async (values: string[]) => {
|
||||
const { query } = this.props;
|
||||
const measurement = values[0];
|
||||
const field = values[1];
|
||||
|
||||
this.setState({ measurement, field }, () => {
|
||||
this.onPairsChanged((query as any).tags);
|
||||
});
|
||||
};
|
||||
|
||||
onPairsChanged = (pairs: KeyValuePair[]) => {
|
||||
const { query } = this.props;
|
||||
const { measurement, field } = this.state;
|
||||
const queryModel = new InfluxQueryModel(
|
||||
{
|
||||
...query,
|
||||
resultFormat: 'table',
|
||||
groupBy: [],
|
||||
select: [[{ type: 'field', params: [field ?? ''] }]],
|
||||
tags: pairs,
|
||||
limit: '1000',
|
||||
measurement: measurement ?? '',
|
||||
},
|
||||
this.templateSrv
|
||||
);
|
||||
|
||||
this.props.onChange(queryModel.target);
|
||||
|
||||
// Only run the query if measurement & field are set, and there are no invalid pairs
|
||||
if (measurement && field && pairsAreValid(pairs)) {
|
||||
this.props.onRunQuery();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { datasource } = this.props;
|
||||
const { measurements, measurement, field, error } = this.state;
|
||||
const cascadeText = getChooserText({ measurement, field, error });
|
||||
const hasMeasurement = measurements && measurements.length > 0;
|
||||
|
||||
return (
|
||||
<div className="gf-form-inline gf-form-inline--nowrap">
|
||||
<div className="gf-form flex-shrink-0">
|
||||
<ButtonCascader
|
||||
options={measurements}
|
||||
disabled={!hasMeasurement}
|
||||
value={[measurement ?? '', field ?? '']}
|
||||
onChange={this.onMeasurementsChange}
|
||||
>
|
||||
{cascadeText}
|
||||
</ButtonCascader>
|
||||
</div>
|
||||
<div className="flex-shrink-1 flex-flow-column-nowrap">
|
||||
{measurement && (
|
||||
<AdHocFilterField
|
||||
onPairsChanged={this.onPairsChanged}
|
||||
datasource={datasource}
|
||||
extendedOptions={{ measurement }}
|
||||
/>
|
||||
)}
|
||||
{error ? (
|
||||
<span className="gf-form-label gf-form-label--transparent gf-form-label--error m-l-2">{error}</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user