mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: remove usages of FunctionComponent in elasticsearch plugin (#33175)
This commit is contained in:
parent
3b11e7318a
commit
7cfd979cc1
@ -1,5 +1,5 @@
|
||||
import { css } from '@emotion/css';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import React from 'react';
|
||||
import { IconButton } from './IconButton';
|
||||
|
||||
interface Props {
|
||||
@ -13,7 +13,7 @@ interface Props {
|
||||
* A component used to show add & remove buttons for mutable lists of values. Wether to show or not the add or the remove buttons
|
||||
* depends on the `index` and `elements` props. This enforces a consistent experience whenever this pattern is used.
|
||||
*/
|
||||
export const AddRemove: FunctionComponent<Props> = ({ index, onAdd, onRemove, elements }) => {
|
||||
export const AddRemove = ({ index, onAdd, onRemove, elements }: Props) => {
|
||||
return (
|
||||
<div
|
||||
className={css`
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { Icon } from '@grafana/ui';
|
||||
import { cx, css } from '@emotion/css';
|
||||
import React, { FunctionComponent, ComponentProps, ButtonHTMLAttributes } from 'react';
|
||||
import React, { ComponentProps, ButtonHTMLAttributes } from 'react';
|
||||
|
||||
const SROnly = css`
|
||||
clip: rect(0 0 0 0);
|
||||
@ -19,13 +19,13 @@ interface Props {
|
||||
label: string;
|
||||
}
|
||||
|
||||
export const IconButton: FunctionComponent<Props & ButtonHTMLAttributes<HTMLButtonElement>> = ({
|
||||
export const IconButton = ({
|
||||
iconName,
|
||||
onClick,
|
||||
className,
|
||||
label,
|
||||
...buttonProps
|
||||
}) => (
|
||||
}: Props & ButtonHTMLAttributes<HTMLButtonElement>) => (
|
||||
<button className={cx('gf-form-label gf-form-label--btn query-part', className)} onClick={onClick} {...buttonProps}>
|
||||
<span className={SROnly}>{label}</span>
|
||||
<Icon name={iconName} aria-hidden="true" />
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import React from 'react';
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { SelectableValue } from '@grafana/data';
|
||||
import { Segment } from '@grafana/ui';
|
||||
@ -23,7 +23,7 @@ interface Props {
|
||||
value?: string;
|
||||
}
|
||||
|
||||
export const MetricPicker: FunctionComponent<Props> = ({ options, onChange, className, value }) => {
|
||||
export const MetricPicker = ({ options, onChange, className, value }: Props) => {
|
||||
const selectedOption = options.find((option) => option.id === value);
|
||||
|
||||
return (
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { SelectableValue } from '@grafana/data';
|
||||
import { InlineSegmentGroup, Segment, SegmentAsync } from '@grafana/ui';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import React from 'react';
|
||||
import { useFields } from '../../../hooks/useFields';
|
||||
import { useDispatch } from '../../../hooks/useStatelessReducer';
|
||||
import { segmentStyles } from '../styles';
|
||||
@ -26,7 +26,7 @@ interface QueryMetricEditorProps {
|
||||
value: BucketAggregation;
|
||||
}
|
||||
|
||||
export const BucketAggregationEditor: FunctionComponent<QueryMetricEditorProps> = ({ value }) => {
|
||||
export const BucketAggregationEditor = ({ value }: QueryMetricEditorProps) => {
|
||||
const dispatch = useDispatch<BucketAggregationAction>();
|
||||
const getFields = useFields(value.type);
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { InlineField, Input, QueryField } from '@grafana/ui';
|
||||
import { css } from '@emotion/css';
|
||||
import React, { FunctionComponent, useEffect } from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import { AddRemove } from '../../../../AddRemove';
|
||||
import { useDispatch, useStatelessReducer } from '../../../../../hooks/useStatelessReducer';
|
||||
import { Filters } from '../../aggregations';
|
||||
@ -13,7 +13,7 @@ interface Props {
|
||||
value: Filters;
|
||||
}
|
||||
|
||||
export const FiltersSettingsEditor: FunctionComponent<Props> = ({ value }) => {
|
||||
export const FiltersSettingsEditor = ({ value }: Props) => {
|
||||
const upperStateDispatch = useDispatch<BucketAggregationAction<Filters>>();
|
||||
|
||||
const dispatch = useStatelessReducer(
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { InlineField, Input, Select } from '@grafana/ui';
|
||||
import React, { ComponentProps, FunctionComponent } from 'react';
|
||||
import React, { ComponentProps } from 'react';
|
||||
import { useDispatch } from '../../../../hooks/useStatelessReducer';
|
||||
import { SettingsEditorContainer } from '../../SettingsEditorContainer';
|
||||
import { changeBucketAggregationSetting } from '../state/actions';
|
||||
@ -23,7 +23,7 @@ interface Props {
|
||||
bucketAgg: BucketAggregation;
|
||||
}
|
||||
|
||||
export const SettingsEditor: FunctionComponent<Props> = ({ bucketAgg }) => {
|
||||
export const SettingsEditor = ({ bucketAgg }: Props) => {
|
||||
const dispatch = useDispatch();
|
||||
const { metrics } = useQuery();
|
||||
const settingsDescription = useDescription(bucketAgg);
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import React from 'react';
|
||||
import { BucketAggregationEditor } from './BucketAggregationEditor';
|
||||
import { useDispatch } from '../../../hooks/useStatelessReducer';
|
||||
import { addBucketAggregation, removeBucketAggregation } from './state/actions';
|
||||
@ -12,7 +12,7 @@ interface Props {
|
||||
nextId: BucketAggregation['id'];
|
||||
}
|
||||
|
||||
export const BucketAggregationsEditor: FunctionComponent<Props> = ({ nextId }) => {
|
||||
export const BucketAggregationsEditor = ({ nextId }: Props) => {
|
||||
const dispatch = useDispatch<BucketAggregationAction>();
|
||||
const { bucketAggs } = useQuery();
|
||||
const totalBucketAggs = bucketAggs?.length || 0;
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
import { renderHook } from '@testing-library/react-hooks';
|
||||
import { render } from '@testing-library/react';
|
||||
import { ElasticsearchProvider, useQuery } from './ElasticsearchQueryContext';
|
||||
@ -50,7 +50,7 @@ describe('ElasticsearchQueryContext', () => {
|
||||
});
|
||||
|
||||
it('Should return the current query object', () => {
|
||||
const wrapper: FunctionComponent = ({ children }) => (
|
||||
const wrapper = ({ children }: PropsWithChildren<{}>) => (
|
||||
<ElasticsearchProvider
|
||||
datasource={{} as ElasticDatasource}
|
||||
query={query}
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, { Context, createContext, FunctionComponent, useCallback, useContext } from 'react';
|
||||
import React, { Context, createContext, PropsWithChildren, useCallback, useContext } from 'react';
|
||||
import { ElasticDatasource } from '../../datasource';
|
||||
import { combineReducers, useStatelessReducer, DispatchContext } from '../../hooks/useStatelessReducer';
|
||||
import { ElasticsearchQuery } from '../../types';
|
||||
@ -20,14 +20,14 @@ interface Props {
|
||||
range: TimeRange;
|
||||
}
|
||||
|
||||
export const ElasticsearchProvider: FunctionComponent<Props> = ({
|
||||
export const ElasticsearchProvider = ({
|
||||
children,
|
||||
onChange,
|
||||
onRunQuery,
|
||||
query,
|
||||
datasource,
|
||||
range,
|
||||
}) => {
|
||||
}: PropsWithChildren<Props>) => {
|
||||
const onStateChange = useCallback(
|
||||
(query: ElasticsearchQuery) => {
|
||||
onChange(query);
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { act, fireEvent, render, screen } from '@testing-library/react';
|
||||
import { ElasticsearchProvider } from '../ElasticsearchQueryContext';
|
||||
import { MetricEditor } from './MetricEditor';
|
||||
import React, { ReactNode } from 'react';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
import { ElasticDatasource } from '../../../datasource';
|
||||
import { getDefaultTimeRange } from '@grafana/data';
|
||||
import { ElasticsearchQuery } from '../../../types';
|
||||
@ -25,7 +25,7 @@ describe('Metric Editor', () => {
|
||||
|
||||
const getFields: ElasticDatasource['getFields'] = jest.fn(() => from([[]]));
|
||||
|
||||
const wrapper = ({ children }: { children: ReactNode }) => (
|
||||
const wrapper = ({ children }: PropsWithChildren<{}>) => (
|
||||
<ElasticsearchProvider
|
||||
datasource={{ getFields } as ElasticDatasource}
|
||||
query={query}
|
||||
@ -61,7 +61,7 @@ describe('Metric Editor', () => {
|
||||
|
||||
const getFields: ElasticDatasource['getFields'] = jest.fn(() => from([[]]));
|
||||
|
||||
const wrapper = ({ children }: { children: ReactNode }) => (
|
||||
const wrapper = ({ children }: PropsWithChildren<{}>) => (
|
||||
<ElasticsearchProvider
|
||||
datasource={{ getFields } as ElasticDatasource}
|
||||
query={query}
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { SelectableValue } from '@grafana/data';
|
||||
import { InlineSegmentGroup, Segment, SegmentAsync, useTheme } from '@grafana/ui';
|
||||
import { cx } from '@emotion/css';
|
||||
import React, { FunctionComponent, useCallback } from 'react';
|
||||
import React, { useCallback } from 'react';
|
||||
import { useDatasource, useQuery } from '../ElasticsearchQueryContext';
|
||||
import { useDispatch } from '../../../hooks/useStatelessReducer';
|
||||
import { getStyles } from './styles';
|
||||
@ -60,7 +60,7 @@ const getTypeOptions = (
|
||||
);
|
||||
};
|
||||
|
||||
export const MetricEditor: FunctionComponent<Props> = ({ value }) => {
|
||||
export const MetricEditor = ({ value }: Props) => {
|
||||
const styles = getStyles(useTheme(), !!value.hide);
|
||||
const datasource = useDatasource();
|
||||
const query = useQuery();
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, { Fragment, FunctionComponent, useEffect } from 'react';
|
||||
import React, { Fragment, useEffect } from 'react';
|
||||
import { Input, InlineLabel } from '@grafana/ui';
|
||||
import { MetricAggregationAction } from '../../state/types';
|
||||
import { changeMetricAttribute } from '../../state/actions';
|
||||
@ -22,7 +22,7 @@ interface Props {
|
||||
previousMetrics: MetricAggregation[];
|
||||
}
|
||||
|
||||
export const BucketScriptSettingsEditor: FunctionComponent<Props> = ({ value, previousMetrics }) => {
|
||||
export const BucketScriptSettingsEditor = ({ value, previousMetrics }: Props) => {
|
||||
const upperStateDispatch = useDispatch<MetricAggregationAction<BucketScript>>();
|
||||
|
||||
const dispatch = useStatelessReducer(
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { Input, InlineField, Select, InlineSwitch } from '@grafana/ui';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import React from 'react';
|
||||
import { useDispatch } from '../../../../hooks/useStatelessReducer';
|
||||
import { movingAvgModelOptions } from '../../../../query_def';
|
||||
import { isEWMAMovingAverage, isHoltMovingAverage, isHoltWintersMovingAverage, MovingAverage } from '../aggregations';
|
||||
@ -13,7 +13,7 @@ interface Props {
|
||||
// The way we handle changes for those settings is not ideal compared to the other components in the editor
|
||||
// FIXME: using `changeMetricSetting` will cause an error when switching from models that have different options
|
||||
// as they might be incompatible. We should clear all other options on model change.
|
||||
export const MovingAverageSettingsEditor: FunctionComponent<Props> = ({ metric }) => {
|
||||
export const MovingAverageSettingsEditor = ({ metric }: Props) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { InlineField, Input, InlineSwitch } from '@grafana/ui';
|
||||
import React, { FunctionComponent, ComponentProps, useState } from 'react';
|
||||
import React, { ComponentProps, useState } from 'react';
|
||||
import { extendedStats } from '../../../../query_def';
|
||||
import { useDispatch } from '../../../../hooks/useStatelessReducer';
|
||||
import { changeMetricMeta, changeMetricSetting } from '../state/actions';
|
||||
@ -28,7 +28,7 @@ interface Props {
|
||||
previousMetrics: MetricAggregation[];
|
||||
}
|
||||
|
||||
export const SettingsEditor: FunctionComponent<Props> = ({ metric, previousMetrics }) => {
|
||||
export const SettingsEditor = ({ metric, previousMetrics }: Props) => {
|
||||
const dispatch = useDispatch();
|
||||
const description = useDescription(metric);
|
||||
const query = useQuery();
|
||||
@ -124,7 +124,7 @@ interface ExtendedStatSettingProps {
|
||||
onChange: (checked: boolean) => void;
|
||||
value: boolean;
|
||||
}
|
||||
const ExtendedStatSetting: FunctionComponent<ExtendedStatSettingProps> = ({ stat, onChange, value }) => {
|
||||
const ExtendedStatSetting = ({ stat, onChange, value }: ExtendedStatSettingProps) => {
|
||||
// this is needed for the htmlFor prop in the label so that clicking the label will toggle the switch state.
|
||||
const [id] = useState(uniqueId(`es-field-id-`));
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import React from 'react';
|
||||
import { MetricEditor } from './MetricEditor';
|
||||
import { useDispatch } from '../../../hooks/useStatelessReducer';
|
||||
import { MetricAggregationAction } from './state/types';
|
||||
@ -13,7 +13,7 @@ interface Props {
|
||||
nextId: MetricAggregation['id'];
|
||||
}
|
||||
|
||||
export const MetricAggregationsEditor: FunctionComponent<Props> = ({ nextId }) => {
|
||||
export const MetricAggregationsEditor = ({ nextId }: Props) => {
|
||||
const dispatch = useDispatch<MetricAggregationAction>();
|
||||
const { metrics } = useQuery();
|
||||
const totalMetrics = metrics?.length || 0;
|
||||
|
@ -2,7 +2,7 @@ import { GrafanaTheme } from '@grafana/data';
|
||||
import { IconButton, InlineFieldRow, InlineLabel, InlineSegmentGroup, stylesFactory, useTheme } from '@grafana/ui';
|
||||
import { css } from '@emotion/css';
|
||||
import { noop } from 'lodash';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
|
||||
interface Props {
|
||||
label: string;
|
||||
@ -11,13 +11,13 @@ interface Props {
|
||||
hidden?: boolean;
|
||||
}
|
||||
|
||||
export const QueryEditorRow: FunctionComponent<Props> = ({
|
||||
export const QueryEditorRow = ({
|
||||
children,
|
||||
label,
|
||||
onRemoveClick,
|
||||
onHideClick,
|
||||
hidden = false,
|
||||
}) => {
|
||||
}: PropsWithChildren<Props>) => {
|
||||
const theme = useTheme();
|
||||
const styles = getStyles(theme);
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { Icon, InlineSegmentGroup, stylesFactory, useTheme } from '@grafana/ui';
|
||||
import { css, cx } from '@emotion/css';
|
||||
import React, { FunctionComponent, useState } from 'react';
|
||||
import React, { PropsWithChildren, useState } from 'react';
|
||||
import { segmentStyles } from './styles';
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme, hidden: boolean) => {
|
||||
@ -30,7 +30,7 @@ interface Props {
|
||||
hidden?: boolean;
|
||||
}
|
||||
|
||||
export const SettingsEditorContainer: FunctionComponent<Props> = ({ label, children, hidden = false }) => {
|
||||
export const SettingsEditorContainer = ({ label, children, hidden = false }: PropsWithChildren<Props>) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const styles = getStyles(useTheme(), hidden);
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import React from 'react';
|
||||
import { getDefaultTimeRange, QueryEditorProps } from '@grafana/data';
|
||||
import { ElasticDatasource } from '../../datasource';
|
||||
import { ElasticsearchOptions, ElasticsearchQuery } from '../../types';
|
||||
@ -12,13 +12,7 @@ import { useNextId } from '../../hooks/useNextId';
|
||||
|
||||
export type ElasticQueryEditorProps = QueryEditorProps<ElasticDatasource, ElasticsearchQuery, ElasticsearchOptions>;
|
||||
|
||||
export const QueryEditor: FunctionComponent<ElasticQueryEditorProps> = ({
|
||||
query,
|
||||
onChange,
|
||||
onRunQuery,
|
||||
datasource,
|
||||
range,
|
||||
}) => (
|
||||
export const QueryEditor = ({ query, onChange, onRunQuery, datasource, range }: ElasticQueryEditorProps) => (
|
||||
<ElasticsearchProvider
|
||||
datasource={datasource}
|
||||
onChange={onChange}
|
||||
@ -34,7 +28,7 @@ interface Props {
|
||||
value: ElasticsearchQuery;
|
||||
}
|
||||
|
||||
const QueryEditorForm: FunctionComponent<Props> = ({ value }) => {
|
||||
const QueryEditorForm = ({ value }: Props) => {
|
||||
const dispatch = useDispatch();
|
||||
const nextId = useNextId();
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, { ReactNode } from 'react';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
import { ElasticDatasource } from '../datasource';
|
||||
import { from } from 'rxjs';
|
||||
import { ElasticsearchProvider } from '../components/QueryEditor/ElasticsearchQueryContext';
|
||||
@ -24,7 +24,7 @@ describe('useFields hook', () => {
|
||||
|
||||
const getFields: ElasticDatasource['getFields'] = jest.fn(() => from([[]]));
|
||||
|
||||
const wrapper = ({ children }: { children: ReactNode }) => (
|
||||
const wrapper = ({ children }: PropsWithChildren<{}>) => (
|
||||
<ElasticsearchProvider
|
||||
datasource={{ getFields } as ElasticDatasource}
|
||||
query={query}
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
import { renderHook } from '@testing-library/react-hooks';
|
||||
import { ElasticsearchProvider } from '../components/QueryEditor/ElasticsearchQueryContext';
|
||||
import { useNextId } from './useNextId';
|
||||
@ -13,7 +13,7 @@ describe('useNextId', () => {
|
||||
metrics: [{ id: '1', type: 'avg' }],
|
||||
bucketAggs: [{ id: '2', type: 'date_histogram' }],
|
||||
};
|
||||
const wrapper: FunctionComponent = ({ children }) => {
|
||||
const wrapper = ({ children }: PropsWithChildren<{}>) => {
|
||||
return (
|
||||
<ElasticsearchProvider
|
||||
query={query}
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
import { renderHook } from '@testing-library/react-hooks';
|
||||
import { useStatelessReducer, useDispatch, DispatchContext, combineReducers } from './useStatelessReducer';
|
||||
|
||||
@ -39,7 +39,7 @@ describe('useDispatch Hook', () => {
|
||||
|
||||
it('Should return a dispatch function', () => {
|
||||
const dispatch = jest.fn();
|
||||
const wrapper: FunctionComponent = ({ children }) => (
|
||||
const wrapper = ({ children }: PropsWithChildren<{}>) => (
|
||||
<DispatchContext.Provider value={dispatch}>{children}</DispatchContext.Provider>
|
||||
);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user