IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: remove usages of FunctionComponent in elasticsearch plugin (#33175)

Browse Source
This commit is contained in:
Giordano Ricci 2021-05-04 16:23:19 +01:00 committed by GitHub
parent 3b11e7318a
commit 7cfd979cc1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 48 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx
View File

@ -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`

6
public/app/plugins/datasource/elasticsearch/components/IconButton.tsx
View File

@ -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" />

4
public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx
View File

@ -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 (

4
public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/BucketAggregationEditor.tsx
View File

@ -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);

4
public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
View File

@ -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(

4
public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/index.tsx
View File

@ -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);

4
public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/index.tsx
View File

@ -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;

4
public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.test.tsx
View File

@ -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}

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

@ -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);

6
public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.test.tsx
View File

@ -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}

4
public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx
View File

@ -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();

4
public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx
View File

@ -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(

4
public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx
View File

@ -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 (

6
public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
View File

@ -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-`));

4
public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/index.tsx
View File

@ -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;

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

@ -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);

4
public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx
View File

@ -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);

12
public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
View File

@ -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();

4
public/app/plugins/datasource/elasticsearch/hooks/useFields.test.tsx
View File

@ -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}

4
public/app/plugins/datasource/elasticsearch/hooks/useNextId.test.tsx
View File

@ -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}

4
public/app/plugins/datasource/elasticsearch/hooks/useStatelessReducer.test.tsx
View File

@ -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>
);