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: Avoid explicit React.FC<Props> when possible (round 2) (#64749)

Browse Source
This commit is contained in:
Ryan McKinley
2023-03-15 07:56:09 -07:00
committed by GitHub
parent 1a16636692
commit 4f13e78d11
147 changed files with 364 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/core/components/OptionsUI/fieldColor.tsx
View File

@@ -17,12 +17,9 @@ import { useStyles2, useTheme2, Field, RadioButtonGroup, Select } from '@grafana
import { ColorValueEditor } from './color';
export const FieldColorEditor: React.FC<FieldConfigEditorProps<FieldColor | undefined, FieldColorConfigSettings>> = ({
value,
onChange,
item,
id,
}) => {
type Props = FieldConfigEditorProps<FieldColor | undefined, FieldColorConfigSettings>;
export const FieldColorEditor = ({ value, onChange, item, id }: Props) => {
const theme = useTheme2();
const styles = useStyles2(getStyles);

8
public/app/core/components/OptionsUI/links.tsx
View File

@@ -8,11 +8,9 @@ import {
} from '@grafana/data';
import { DataLinksInlineEditor } from '@grafana/ui';
export const DataLinksValueEditor: React.FC<FieldConfigEditorProps<DataLink[], DataLinksFieldConfigSettings>> = ({
value,
onChange,
context,
}) => {
type Props = FieldConfigEditorProps<DataLink[], DataLinksFieldConfigSettings>;
export const DataLinksValueEditor = ({ value, onChange, context }: Props) => {
return (
<DataLinksInlineEditor
links={value}

8
public/app/core/components/OptionsUI/number.tsx
View File

@@ -4,11 +4,9 @@ import { FieldConfigEditorProps, NumberFieldConfigSettings } from '@grafana/data
import { NumberInput } from './NumberInput';
export const NumberValueEditor: React.FC<FieldConfigEditorProps<number, NumberFieldConfigSettings>> = ({
value,
onChange,
item,
}) => {
type Props = FieldConfigEditorProps<number, NumberFieldConfigSettings>;
export const NumberValueEditor = ({ value, onChange, item }: Props) => {
const { settings } = item;
const onValueChange = useCallback(

8
public/app/core/components/OptionsUI/slider.tsx
View File

@@ -9,11 +9,9 @@ import { getStyles } from '@grafana/ui/src/components/Slider/styles';
import { NumberInput } from './NumberInput';
export const SliderValueEditor: React.FC<FieldConfigEditorProps<number, SliderFieldConfigSettings>> = ({
value,
onChange,
item,
}) => {
type Props = FieldConfigEditorProps<number, SliderFieldConfigSettings>;
export const SliderValueEditor = ({ value, onChange, item }: Props) => {
// Input reference
const inputRef = useRef<HTMLSpanElement>(null);

4
public/app/core/components/OptionsUI/stats.tsx
View File

@@ -3,12 +3,12 @@ import React from 'react';
import { FieldConfigEditorProps, StatsPickerConfigSettings } from '@grafana/data';
import { StatsPicker } from '@grafana/ui';
export const StatsPickerEditor: React.FC<FieldConfigEditorProps<string[], StatsPickerConfigSettings>> = ({
export const StatsPickerEditor = ({
value,
onChange,
item,
id,
}) => {
}: FieldConfigEditorProps<string[], StatsPickerConfigSettings>) => {
return (
<StatsPicker
stats={value}

8
public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
View File

@@ -13,13 +13,7 @@ export interface QueryOperationActionProps {
active?: boolean;
}
export const QueryOperationAction: React.FC<QueryOperationActionProps> = ({
icon,
active,
disabled,
title,
onClick,
}) => {
export const QueryOperationAction = ({ icon, active, disabled, title, onClick }: QueryOperationActionProps) => {
const styles = useStyles2(getStyles);
return (

2
public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
View File

@@ -18,7 +18,7 @@ interface QueryOperationRowHeaderProps {
id: string;
}
export const QueryOperationRowHeader: React.FC<QueryOperationRowHeaderProps> = ({
export const QueryOperationRowHeader = ({
actionsElement,
disabled,
draggable,

2
public/app/features/commandPalette/KBarResults.tsx
View File

@@ -21,7 +21,7 @@ interface KBarResultsProps {
maxHeight?: number;
}
export const KBarResults: React.FC<KBarResultsProps> = (props) => {
export const KBarResults = (props: KBarResultsProps) => {
const activeRef = React.useRef<HTMLElement>(null);
const parentRef = React.useRef(null);

4
public/app/features/connections/tabs/ConnectData/CategoryHeader/CategoryHeader.tsx
View File

@@ -16,7 +16,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
`,
});
export const CategoryHeader: React.FC<{ iconName: IconName; label: string }> = ({ iconName, label }) => {
type Props = { iconName: IconName; label: string };
export const CategoryHeader = ({ iconName, label }: Props) => {
const styles = useStyles2(getStyles);
return (
<div className={styles.categoryHeader}>

2
public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
View File

@@ -207,7 +207,7 @@ interface AddPanelWidgetHandleProps {
styles: AddPanelStyles;
}
const AddPanelWidgetHandle: React.FC<AddPanelWidgetHandleProps> = ({ children, onBack, onCancel, styles }) => {
const AddPanelWidgetHandle = ({ children, onBack, onCancel, styles }: AddPanelWidgetHandleProps) => {
return (
<div className={cx(styles.headerRow, 'grid-drag-handle')}>
{onBack && (

2
public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx
View File

@@ -6,7 +6,7 @@ import { Button, useStyles2 } from '@grafana/ui';
export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {}
export const ListNewButton: React.FC<Props> = ({ children, ...restProps }) => {
export const ListNewButton = ({ children, ...restProps }: Props) => {
const styles = useStyles2(getStyles);
return (
<div className={styles.buttonWrapper}>

2
public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx
View File

@@ -41,7 +41,7 @@ type LinkSettingsEditProps = {
onGoBack: () => void;
};
export const LinkSettingsEdit: React.FC<LinkSettingsEditProps> = ({ editLinkIdx, dashboard, onGoBack }) => {
export const LinkSettingsEdit = ({ editLinkIdx, dashboard, onGoBack }: LinkSettingsEditProps) => {
const [linkSettings, setLinkSettings] = useState(editLinkIdx !== null ? dashboard.links[editLinkIdx] : newLink);
const onUpdate = (link: DashboardLink) => {

2
public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
View File

@@ -13,7 +13,7 @@ type LinkSettingsListProps = {
onEdit: (idx: number) => void;
};
export const LinkSettingsList: React.FC<LinkSettingsListProps> = ({ dashboard, onNew, onEdit }) => {
export const LinkSettingsList = ({ dashboard, onNew, onEdit }: LinkSettingsListProps) => {
const [links, setLinks] = useState(dashboard.links);
const moveLink = (idx: number, direction: number) => {

4
public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
View File

@@ -23,7 +23,7 @@ interface DynamicConfigValueEditorProps {
searchQuery: string;
}
export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> = ({
export const DynamicConfigValueEditor = ({
property,
context,
registry,
@@ -31,7 +31,7 @@ export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> =
onRemove,
isSystemOverride,
searchQuery,
}) => {
}: DynamicConfigValueEditorProps) => {
const styles = useStyles2(getStyles);
const item = registry?.getIfExists(property.id);

4
public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx
View File

@@ -12,7 +12,7 @@ import { VisualizationSelectPane } from './VisualizationSelectPane';
import { OptionPaneRenderProps } from './types';
import { usePanelLatestData } from './usePanelLatestData';
export const OptionsPane: React.FC<OptionPaneRenderProps> = ({
export const OptionsPane = ({
plugin,
panel,
onFieldConfigsChange,
@@ -20,7 +20,7 @@ export const OptionsPane: React.FC<OptionPaneRenderProps> = ({
onPanelConfigChange,
dashboard,
instanceState,
}) => {
}: OptionPaneRenderProps) => {
const styles = useStyles2(getStyles);
const isVizPickerOpen = useSelector((state) => state.panelEditor.isVizPickerOpen);
const { data } = usePanelLatestData(panel, { withTransforms: true, withFieldConfig: false }, true);

2
public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
View File

@@ -17,7 +17,7 @@ import { OptionSearchEngine } from './state/OptionSearchEngine';
import { getRecentOptions } from './state/getRecentOptions';
import { OptionPaneRenderProps } from './types';
export const OptionsPaneOptions: React.FC<OptionPaneRenderProps> = (props) => {
export const OptionsPaneOptions = (props: OptionPaneRenderProps) => {
const { plugin, dashboard, panel } = props;
const [searchQuery, setSearchQuery] = useState('');
const [listMode, setListMode] = useState(OptionFilter.All);

11
public/app/features/dashboard/components/SaveDashboard/SaveDashboardButton.tsx
View File

@@ -13,7 +13,7 @@ interface SaveDashboardButtonProps {
size?: ComponentSize;
}
export const SaveDashboardButton: React.FC<SaveDashboardButtonProps> = ({ dashboard, onSaveSuccess, size }) => {
export const SaveDashboardButton = ({ dashboard, onSaveSuccess, size }: SaveDashboardButtonProps) => {
return (
<ModalsController>
{({ showModal, hideModal }) => {
@@ -37,12 +37,9 @@ export const SaveDashboardButton: React.FC<SaveDashboardButtonProps> = ({ dashbo
);
};
export const SaveDashboardAsButton: React.FC<SaveDashboardButtonProps & { variant?: ButtonVariant }> = ({
dashboard,
onSaveSuccess,
variant,
size,
}) => {
type Props = SaveDashboardButtonProps & { variant?: ButtonVariant };
export const SaveDashboardAsButton = ({ dashboard, onSaveSuccess, variant, size }: Props) => {
return (
<ModalsController>
{({ showModal, hideModal }) => {

4
public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx
View File

@@ -19,12 +19,12 @@ interface SaveDashboardErrorProxyProps {
onDismiss: () => void;
}
export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = ({
export const SaveDashboardErrorProxy = ({
dashboard,
dashboardSaveModel,
error,
onDismiss,
}) => {
}: SaveDashboardErrorProxyProps) => {
const { onDashboardSave } = useDashboardSave(dashboard);
useEffect(() => {

7
public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx
View File

@@ -14,12 +14,7 @@ interface UnsavedChangesModalProps {
onSaveSuccess?: () => void;
}
export const UnsavedChangesModal: React.FC<UnsavedChangesModalProps> = ({
dashboard,
onSaveSuccess,
onDiscard,
onDismiss,
}) => {
export const UnsavedChangesModal = ({ dashboard, onSaveSuccess, onDiscard, onDismiss }: UnsavedChangesModalProps) => {
return (
<Modal
isOpen={true}

8
public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
View File

@@ -38,13 +38,7 @@ export interface SaveDashboardAsFormProps extends SaveDashboardFormProps {
isNew?: boolean;
}
export const SaveDashboardAsForm: React.FC<SaveDashboardAsFormProps> = ({
dashboard,
isNew,
onSubmit,
onCancel,
onSuccess,
}) => {
export const SaveDashboardAsForm = ({ dashboard, isNew, onSubmit, onCancel, onSuccess }: SaveDashboardAsFormProps) => {
const defaultValues: SaveDashboardAsFormDTO = {
title: isNew ? dashboard.title : `${dashboard.title} Copy`,
$folder: {

2
public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
View File

@@ -7,7 +7,7 @@ import { Button, ClipboardButton, HorizontalGroup, TextArea } from '@grafana/ui'
import { SaveDashboardFormProps } from '../types';
export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard, onCancel }) => {
export const SaveProvisionedDashboardForm = ({ dashboard, onCancel }: SaveDashboardFormProps) => {
const [dashboardJSON, setDashboardJson] = useState(() => {
const clone = dashboard.getSaveModelClone();
delete clone.id;

2
public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
View File

@@ -109,7 +109,7 @@ interface LinkElementProps {
children: JSX.Element;
}
const LinkElement: React.FC<LinkElementProps> = (props) => {
const LinkElement = (props: LinkElementProps) => {
const { link, children, ...rest } = props;
return (

4
public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRows.tsx
View File

@@ -12,12 +12,12 @@ interface TransformationOperationRowsProps {
onChange: (index: number, config: DataTransformerConfig) => void;
}
export const TransformationOperationRows: React.FC<TransformationOperationRowsProps> = ({
export const TransformationOperationRows = ({
data,
onChange,
onRemove,
configs,
}) => {
}: TransformationOperationRowsProps) => {
return (
<>
{configs.map((t, i) => {

2
public/app/features/dashboard/components/VersionHistory/DiffTitle.tsx
View File

@@ -14,7 +14,7 @@ type DiffTitleProps = {
const replaceDiff: Diff = { op: 'replace', originalValue: undefined, path: [''], value: undefined, startLineNumber: 0 };
export const DiffTitle: React.FC<DiffTitleProps> = ({ diff, title }) => {
export const DiffTitle = ({ diff, title }: DiffTitleProps) => {
const styles = useStyles2(getDiffTitleStyles);
return diff ? (

2
public/app/features/dashboard/components/VersionHistory/DiffValues.tsx
View File

@@ -11,7 +11,7 @@ type DiffProps = {
diff: Diff;
};
export const DiffValues: React.FC<DiffProps> = ({ diff }) => {
export const DiffValues = ({ diff }: DiffProps) => {
const styles = useStyles2(getStyles);
const hasLeftValue =
!isUndefined(diff.originalValue) && !isArray(diff.originalValue) && !isObject(diff.originalValue);

2
public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx
View File

@@ -5,7 +5,7 @@ import tinycolor from 'tinycolor2';
import { useTheme2 } from '@grafana/ui';
export const DiffViewer: React.FC<ReactDiffViewerProps> = ({ oldValue, newValue }) => {
export const DiffViewer = ({ oldValue, newValue }: ReactDiffViewerProps) => {
const theme = useTheme2();
const styles = {

2
public/app/features/dashboard/components/VersionHistory/RevertDashboardModal.tsx
View File

@@ -8,7 +8,7 @@ export interface RevertDashboardModalProps {
version: number;
}
export const RevertDashboardModal: React.FC<RevertDashboardModalProps> = ({ hideModal, version }) => {
export const RevertDashboardModal = ({ hideModal, version }: RevertDashboardModalProps) => {
// TODO: how should state.error be handled?
const { state, onRestoreDashboard } = useDashboardRestore(version);

4
public/app/features/dashboard/components/VersionHistory/VersionHistoryButtons.tsx
View File

@@ -10,13 +10,13 @@ type VersionsButtonsType = {
getDiff: () => void;
isLastPage: boolean;
};
export const VersionsHistoryButtons: React.FC<VersionsButtonsType> = ({
export const VersionsHistoryButtons = ({
hasMore,
canCompare,
getVersions,
getDiff,
isLastPage,
}) => (
}: VersionsButtonsType) => (
<Stack>
{hasMore && (
<Button type="button" onClick={() => getVersions(true)} variant="secondary" disabled={isLastPage}>

2
public/app/features/dashboard/components/VersionHistory/VersionHistoryComparison.tsx
View File

@@ -18,7 +18,7 @@ type DiffViewProps = {
diffData: { lhs: unknown; rhs: unknown };
};
export const VersionHistoryComparison: React.FC<DiffViewProps> = ({ baseInfo, newInfo, diffData, isNewLatest }) => {
export const VersionHistoryComparison = ({ baseInfo, newInfo, diffData, isNewLatest }: DiffViewProps) => {
const diff = jsonDiff(diffData.lhs, diffData.rhs);
const styles = useStyles2(getStyles);

4
public/app/features/dashboard/components/VersionHistory/VersionHistoryHeader.tsx
View File

@@ -12,12 +12,12 @@ type VersionHistoryHeaderProps = {
isNewLatest?: boolean;
};
export const VersionHistoryHeader: React.FC<VersionHistoryHeaderProps> = ({
export const VersionHistoryHeader = ({
onClick = noop,
baseVersion = 0,
newVersion = 0,
isNewLatest = false,
}) => {
}: VersionHistoryHeaderProps) => {
const styles = useStyles2(getStyles);
return (

2
public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx
View File

@@ -10,7 +10,7 @@ import { createDashboardModelFixture } from '../state/__fixtures__/dashboardFixt
import { DashboardGrid, Props } from './DashboardGrid';
jest.mock('app/features/dashboard/dashgrid/LazyLoader', () => {
const LazyLoader: React.FC = ({ children }) => {
const LazyLoader = ({ children }: React.PropsWithChildren<{}>) => {
return <>{children}</>;
};
return { LazyLoader };

4
public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx
View File

@@ -183,7 +183,7 @@ export function References(props: ReferenceItemProps) {
);
}
const AccordianReferences: React.FC<AccordianReferencesProps> = ({
const AccordianReferences = ({
data,
interactive = true,
isOpen,
@@ -191,7 +191,7 @@ const AccordianReferences: React.FC<AccordianReferencesProps> = ({
onItemToggle,
openedItems,
createFocusSpanLink,
}) => {
}: AccordianReferencesProps) => {
const isEmpty = !Array.isArray(data) || !data.length;
let arrow: React.ReactNode | null = null;
let HeaderComponent: 'span' | 'a' = 'span';

9
public/app/features/library-panels/components/LibraryPanelCard/LibraryPanelCard.tsx
View File

@@ -17,12 +17,9 @@ export interface LibraryPanelCardProps {
showSecondaryActions?: boolean;
}
export const LibraryPanelCard: React.FC<LibraryPanelCardProps & { children?: JSX.Element | JSX.Element[] }> = ({
libraryPanel,
onClick,
onDelete,
showSecondaryActions,
}) => {
type Props = LibraryPanelCardProps & { children?: JSX.Element | JSX.Element[] };
export const LibraryPanelCard = ({ libraryPanel, onClick, onDelete, showSecondaryActions }: Props) => {
const [showDeletionModal, setShowDeletionModal] = useState(false);
const onDeletePanel = () => {

4
public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx
View File

@@ -23,7 +23,7 @@ interface LibraryPanelViewProps {
perPage?: number;
}
export const LibraryPanelsView: React.FC<LibraryPanelViewProps> = ({
export const LibraryPanelsView = ({
className,
onClickCard,
searchString,
@@ -33,7 +33,7 @@ export const LibraryPanelsView: React.FC<LibraryPanelViewProps> = ({
showSecondaryActions,
currentPanelId: currentPanel,
perPage: propsPerPage = 40,
}) => {
}: LibraryPanelViewProps) => {
const styles = useStyles2(getPanelViewStyles);
const [{ libraryPanels, page, perPage, numberOfPages, loadingState, currentPanelId }, dispatch] = useReducer(
libraryPanelsViewReducer,

9
public/app/features/plugins/sql/components/DatasetSelector.tsx
View File

@@ -14,14 +14,7 @@ interface DatasetSelectorProps extends ResourceSelectorProps {
onChange: (v: SelectableValue) => void;
}
export const DatasetSelector: React.FC<DatasetSelectorProps> = ({
db,
value,
onChange,
disabled,
className,
applyDefault,
}) => {
export const DatasetSelector = ({ db, value, onChange, disabled, className, applyDefault }: DatasetSelectorProps) => {
const state = useAsync(async () => {
const datasets = await db.datasets();
return datasets.map(toOption);

2
public/app/features/plugins/sql/components/TableSelector.tsx
View File

@@ -15,7 +15,7 @@ interface TableSelectorProps extends ResourceSelectorProps {
forceFetch?: boolean;
}
export const TableSelector: React.FC<TableSelectorProps> = ({ db, query, value, className, onChange, forceFetch }) => {
export const TableSelector = ({ db, query, value, className, onChange, forceFetch }: TableSelectorProps) => {
const state = useAsync(async () => {
if (!query.dataset && !forceFetch) {
return [];

9
public/app/features/plugins/sql/components/visual-query-builder/VisualEditor.tsx
View File

@@ -18,14 +18,7 @@ interface VisualEditorProps extends QueryEditorProps {
onValidate: (isValid: boolean) => void;
}
export const VisualEditor: React.FC<VisualEditorProps> = ({
query,
db,
queryRowFilter,
onChange,
onValidate,
range,
}) => {
export const VisualEditor = ({ query, db, queryRowFilter, onChange, onValidate, range }: VisualEditorProps) => {
const state = useAsync(async () => {
const fields = await db.fields(query);
return fields;

4
public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx
View File

@@ -34,9 +34,7 @@ const filterMatch: Array<SelectableValue<FilterByValueMatch>> = [
{ label: 'Match any', value: FilterByValueMatch.any },
];
export const FilterByValueTransformerEditor: React.FC<TransformerUIProps<FilterByValueTransformerOptions>> = (
props
) => {
export const FilterByValueTransformerEditor = (props: TransformerUIProps<FilterByValueTransformerOptions>) => {
const { input, options, onChange } = props;
const styles = getEditorStyles();
const fieldsInfo = useFieldsInfo(input);

6
public/app/features/transformers/FilterByValueTransformer/ValueMatchers/NoopMatcherEditor.tsx
View File

@@ -1,10 +1,8 @@
import React from 'react';
import { ValueMatcherID } from '@grafana/data';
import { ValueMatcherUIProps, ValueMatcherUIRegistryItem } from './types';
import { ValueMatcherUIRegistryItem } from './types';
export const NoopMatcherEditor: React.FC<ValueMatcherUIProps<any>> = () => {
export const NoopMatcherEditor = () => {
return null;
};

2
public/app/features/transformers/calculateHeatmap/HeatmapTransformerEditor.tsx
View File

@@ -23,7 +23,7 @@ const supplier = (
addHeatmapCalculationOptions('', builder, options);
};
export const HeatmapTransformerEditor: React.FC<TransformerUIProps<HeatmapTransformerOptions>> = (props) => {
export const HeatmapTransformerEditor = (props: TransformerUIProps<HeatmapTransformerOptions>) => {
useEffect(() => {
if (!props.options.xBuckets?.mode) {
const opts = getDefaultOptions(supplier);

6
public/app/features/transformers/calculateHeatmap/editor/AxisEditor.tsx
View File

@@ -25,11 +25,7 @@ const logModeOptions: Array<SelectableValue<HeatmapCalculationMode>> = [
},
];
export const AxisEditor: React.FC<StandardEditorProps<HeatmapCalculationBucketConfig, any>> = ({
value,
onChange,
item,
}) => {
export const AxisEditor = ({ value, onChange, item }: StandardEditorProps<HeatmapCalculationBucketConfig>) => {
return (
<HorizontalGroup>
<RadioButtonGroup

6
public/app/features/transformers/editors/GroupByTransformerEditor.tsx
View File

@@ -24,11 +24,11 @@ interface FieldProps {
onConfigChange: (config: GroupByFieldOptions) => void;
}
export const GroupByTransformerEditor: React.FC<TransformerUIProps<GroupByTransformerOptions>> = ({
export const GroupByTransformerEditor = ({
input,
options,
onChange,
}) => {
}: TransformerUIProps<GroupByTransformerOptions>) => {
const fieldNames = useAllFieldNamesFromDataFrames(input);
const onConfigChange = useCallback(
@@ -65,7 +65,7 @@ const options = [
{ label: 'Calculate', value: GroupByOperationID.aggregate },
];
export const GroupByFieldConfiguration: React.FC<FieldProps> = ({ fieldName, config, onConfigChange }) => {
export const GroupByFieldConfiguration = ({ fieldName, config, onConfigChange }: FieldProps) => {
const styles = getStyling();
const onChange = useCallback(

4
public/app/features/transformers/editors/GroupingToMatrixTransformerEditor.tsx
View File

@@ -13,11 +13,11 @@ import { InlineField, InlineFieldRow, Select } from '@grafana/ui';
import { useAllFieldNamesFromDataFrames } from '../utils';
export const GroupingToMatrixTransformerEditor: React.FC<TransformerUIProps<GroupingToMatrixTransformerOptions>> = ({
export const GroupingToMatrixTransformerEditor = ({
input,
options,
onChange,
}) => {
}: TransformerUIProps<GroupingToMatrixTransformerOptions>) => {
const fieldNames = useAllFieldNamesFromDataFrames(input).map((item: string) => ({ label: item, value: item }));
const onSelectColumn = useCallback(

4
public/app/features/transformers/editors/HistogramTransformerEditor.tsx
View File

@@ -8,11 +8,11 @@ import {
import { InlineField, InlineFieldRow, InlineSwitch } from '@grafana/ui';
import { NumberInput } from 'app/core/components/OptionsUI/NumberInput';
export const HistogramTransformerEditor: React.FC<TransformerUIProps<HistogramTransformerOptions>> = ({
export const HistogramTransformerEditor = ({
input,
options,
onChange,
}) => {
}: TransformerUIProps<HistogramTransformerOptions>) => {
const labelWidth = 18;
const onBucketSizeChanged = useCallback(

4
public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
View File

@@ -19,11 +19,11 @@ const modes: Array<SelectableValue<LabelsToFieldsMode>> = [
{ value: LabelsToFieldsMode.Rows, label: 'Rows' },
];
export const LabelsAsFieldsTransformerEditor: React.FC<TransformerUIProps<LabelsToFieldsOptions>> = ({
export const LabelsAsFieldsTransformerEditor = ({
input,
options,
onChange,
}) => {
}: TransformerUIProps<LabelsToFieldsOptions>) => {
const labelWidth = 20;
const { labelNames, selected } = useMemo(() => {

5
public/app/features/transformers/editors/LimitTransformerEditor.tsx
View File

@@ -4,10 +4,7 @@ import { DataTransformerID, standardTransformers, TransformerRegistryItem, Trans
import { LimitTransformerOptions } from '@grafana/data/src/transformations/transformers/limit';
import { InlineField, InlineFieldRow, Input } from '@grafana/ui';
export const LimitTransformerEditor: React.FC<TransformerUIProps<LimitTransformerOptions>> = ({
options,
onChange,
}) => {
export const LimitTransformerEditor = ({ options, onChange }: TransformerUIProps<LimitTransformerOptions>) => {
const onSetLimit = useCallback(
(value: FormEvent<HTMLInputElement>) => {
onChange({

6
public/app/features/transformers/editors/MergeTransformerEditor.tsx
View File

@@ -4,11 +4,7 @@ import { DataTransformerID, standardTransformers, TransformerRegistryItem, Trans
import { MergeTransformerOptions } from '@grafana/data/src/transformations/transformers/merge';
import { FieldValidationMessage } from '@grafana/ui';
export const MergeTransformerEditor: React.FC<TransformerUIProps<MergeTransformerOptions>> = ({
input,
options,
onChange,
}) => {
export const MergeTransformerEditor = ({ input, options, onChange }: TransformerUIProps<MergeTransformerOptions>) => {
if (input.length <= 1) {
// Show warning that merge is useless only apply on a single frame
return <FieldValidationMessage>Merge has no effect when applied on a single frame.</FieldValidationMessage>;

5
public/app/features/transformers/editors/ReduceTransformerEditor.tsx
View File

@@ -13,10 +13,7 @@ import { selectors } from '@grafana/e2e-selectors';
import { LegacyForms, Select, StatsPicker } from '@grafana/ui';
// TODO: Minimal implementation, needs some <3
export const ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransformerOptions>> = ({
options,
onChange,
}) => {
export const ReduceTransformerEditor = ({ options, onChange }: TransformerUIProps<ReduceTransformerOptions>) => {
const modes: Array<SelectableValue<ReduceTransformerMode>> = [
{
label: 'Series to rows',

6
public/app/features/transformers/editors/SeriesToRowsTransformerEditor.tsx
View File

@@ -1,13 +1,11 @@
import React from 'react';
import { DataTransformerID, standardTransformers, TransformerRegistryItem, TransformerUIProps } from '@grafana/data';
import { SeriesToRowsTransformerOptions } from '@grafana/data/src/transformations/transformers/seriesToRows';
export const SeriesToRowsTransformerEditor: React.FC<TransformerUIProps<SeriesToRowsTransformerOptions>> = ({
export const SeriesToRowsTransformerEditor = ({
input,
options,
onChange,
}) => {
}: TransformerUIProps<SeriesToRowsTransformerOptions>) => {
return null;
};

6
public/app/features/transformers/editors/SortByTransformerEditor.tsx
View File

@@ -6,11 +6,7 @@ import { InlineField, InlineSwitch, InlineFieldRow, Select } from '@grafana/ui';
import { useAllFieldNamesFromDataFrames } from '../utils';
export const SortByTransformerEditor: React.FC<TransformerUIProps<SortByTransformerOptions>> = ({
input,
options,
onChange,
}) => {
export const SortByTransformerEditor = ({ input, options, onChange }: TransformerUIProps<SortByTransformerOptions>) => {
const fieldNames = useAllFieldNamesFromDataFrames(input).map((item: string) => ({ label: item, value: item }));
// Only supports single sort for now

4
public/app/features/transformers/extractFields/ExtractFieldsTransformerEditor.tsx
View File

@@ -26,11 +26,11 @@ const fieldNamePickerSettings: StandardEditorsRegistryItem<string, FieldNamePick
editor: () => null,
};
export const extractFieldsTransformerEditor: React.FC<TransformerUIProps<ExtractFieldsOptions>> = ({
export const extractFieldsTransformerEditor = ({
input,
options,
onChange,
}) => {
}: TransformerUIProps<ExtractFieldsOptions>) => {
const onPickSourceField = (source?: string) => {
onChange({
...options,

6
public/app/features/transformers/lookupGazetteer/FieldLookupTransformerEditor.tsx
View File

@@ -31,11 +31,7 @@ const fieldLookupSettings: StandardEditorsRegistryItem<string, GazetteerPathEdit
settings: {},
} as any;
export const FieldLookupTransformerEditor: React.FC<TransformerUIProps<FieldLookupOptions>> = ({
input,
options,
onChange,
}) => {
export const FieldLookupTransformerEditor = ({ input, options, onChange }: TransformerUIProps<FieldLookupOptions>) => {
const onPickLookupField = useCallback(
(value: string | undefined) => {
onChange({

4
public/app/features/transformers/spatial/SpatialTransformerEditor.tsx
View File

@@ -113,7 +113,9 @@ const supplier = (
}
};
export const SetGeometryTransformerEditor: React.FC<TransformerUIProps<SpatialTransformOptions>> = (props) => {
type Props = TransformerUIProps<SpatialTransformOptions>;
export const SetGeometryTransformerEditor = (props: Props) => {
// a new component is created with every change :(
useEffect(() => {
if (!props.options.source?.mode) {

4
public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/ArgQueryEditor.tsx
View File

@@ -44,14 +44,14 @@ function selectSubscriptions(
return querySubscriptions;
}
const ArgQueryEditor: React.FC<ArgQueryEditorProps> = ({
const ArgQueryEditor = ({
query,
datasource,
subscriptionId,
variableOptionGroup,
onChange,
setError,
}) => {
}: ArgQueryEditorProps) => {
const [subscriptions, setSubscriptions] = useState<AzureMonitorOption[]>([]);
useMemo(() => {
datasource

2
public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/QueryField.tsx
View File

@@ -4,7 +4,7 @@ import { CodeEditor } from '@grafana/ui';
import { AzureQueryEditorFieldProps } from '../../types';
const QueryField: React.FC<AzureQueryEditorFieldProps> = ({ query, onQueryChange }) => {
const QueryField = ({ query, onQueryChange }: AzureQueryEditorFieldProps) => {
const onChange = useCallback(
(newQuery: string) => {
onQueryChange({

2
public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/FormatAsField.tsx
View File

@@ -14,7 +14,7 @@ const FORMAT_OPTIONS: Array<SelectableValue<ResultFormat>> = [
{ label: 'Table', value: ResultFormat.Table },
];
const FormatAsField: React.FC<AzureQueryEditorFieldProps> = ({ query, variableOptionGroup, onQueryChange }) => {
const FormatAsField = ({ query, variableOptionGroup, onQueryChange }: AzureQueryEditorFieldProps) => {
const options = useMemo(() => [...FORMAT_OPTIONS, variableOptionGroup], [variableOptionGroup]);
const handleChange = useCallback(

4
public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/LogsQueryEditor.tsx
View File

@@ -24,7 +24,7 @@ interface LogsQueryEditorProps {
hideFormatAs?: boolean;
}
const LogsQueryEditor: React.FC<LogsQueryEditorProps> = ({
const LogsQueryEditor = ({
query,
datasource,
subscriptionId,
@@ -32,7 +32,7 @@ const LogsQueryEditor: React.FC<LogsQueryEditorProps> = ({
onChange,
setError,
hideFormatAs,
}) => {
}: LogsQueryEditorProps) => {
const migrationError = useMigrations(datasource, query, onChange);
const disableRow = (row: ResourceRow, selectedRows: ResourceRowGroup) => {
if (selectedRows.length === 0) {

2
public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/QueryField.tsx
View File

@@ -22,7 +22,7 @@ interface MonacoLanguages {
};
}
const QueryField: React.FC<AzureQueryEditorFieldProps> = ({ query, datasource, onQueryChange }) => {
const QueryField = ({ query, datasource, onQueryChange }: AzureQueryEditorFieldProps) => {
const monacoPromiseRef = useRef<Deferred<MonacoPromise>>();
function getPromise() {
if (!monacoPromiseRef.current) {

4
public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/AggregationField.tsx
View File

@@ -14,13 +14,13 @@ interface AggregationFieldProps extends AzureQueryEditorFieldProps {
isLoading: boolean;
}
const AggregationField: React.FC<AggregationFieldProps> = ({
const AggregationField = ({
query,
variableOptionGroup,
onQueryChange,
aggregationOptions,
isLoading,
}) => {
}: AggregationFieldProps) => {
const handleChange = useCallback(
(change: SelectableValue<string>) => {
if (!change.value) {

2
public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/DimensionFields.tsx
View File

@@ -60,7 +60,7 @@ const useDimensionLabels = (data: PanelData | undefined, query: AzureMonitorQuer
return dimensionLabels;
};
const DimensionFields: React.FC<DimensionFieldsProps> = ({ data, query, dimensionOptions, onQueryChange }) => {
const DimensionFields = ({ data, query, dimensionOptions, onQueryChange }: DimensionFieldsProps) => {
const dimensionFilters = useMemo(
() => query.azureMonitor?.dimensionFilters ?? [],
[query.azureMonitor?.dimensionFilters]

2
public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/LegendFormatField.tsx
View File

@@ -7,7 +7,7 @@ import { Field } from '../Field';
import { setLegendAlias } from './setQueryValue';
const LegendFormatField: React.FC<AzureQueryEditorFieldProps> = ({ onQueryChange, query }) => {
const LegendFormatField = ({ onQueryChange, query }: AzureQueryEditorFieldProps) => {
const [value, setValue] = useState<string>(query.azureMonitor?.alias ?? '');
// As calling onQueryChange initiates a the datasource refresh, we only want to call it once

2
public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricNameField.tsx
View File

@@ -14,7 +14,7 @@ interface MetricNameProps extends AzureQueryEditorFieldProps {
metricNames: AzureMonitorOption[];
}
const MetricNameField: React.FC<MetricNameProps> = ({ metricNames, query, variableOptionGroup, onQueryChange }) => {
const MetricNameField = ({ metricNames, query, variableOptionGroup, onQueryChange }: MetricNameProps) => {
const handleChange = useCallback(
(change: SelectableValue<string>) => {
if (!change.value) {

4
public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricNamespaceField.tsx
View File

@@ -13,12 +13,12 @@ interface MetricNamespaceFieldProps extends AzureQueryEditorFieldProps {
metricNamespaces: AzureMonitorOption[];
}
const MetricNamespaceField: React.FC<MetricNamespaceFieldProps> = ({
const MetricNamespaceField = ({
metricNamespaces,
query,
variableOptionGroup,
onQueryChange,
}) => {
}: MetricNamespaceFieldProps) => {
const handleChange = useCallback(
(change: SelectableValue<string>) => {
if (!change.value) {

4
public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricsQueryEditor.tsx
View File

@@ -29,14 +29,14 @@ interface MetricsQueryEditorProps {
setError: (source: string, error: AzureMonitorErrorish | undefined) => void;
}
const MetricsQueryEditor: React.FC<MetricsQueryEditorProps> = ({
const MetricsQueryEditor = ({
data,
query,
datasource,
variableOptionGroup,
onChange,
setError,
}) => {
}: MetricsQueryEditorProps) => {
const metricsMetadata = useMetricMetadata(query, datasource, onChange);
const metricNamespaces = useMetricNamespaces(query, datasource, onChange, setError);
const metricNames = useMetricNames(query, datasource, onChange, setError);

7
public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/TimeGrainField.tsx
View File

@@ -14,12 +14,7 @@ interface TimeGrainFieldProps extends AzureQueryEditorFieldProps {
timeGrainOptions: AzureMonitorOption[];
}
const TimeGrainField: React.FC<TimeGrainFieldProps> = ({
query,
timeGrainOptions,
variableOptionGroup,
onQueryChange,
}) => {
const TimeGrainField = ({ query, timeGrainOptions, variableOptionGroup, onQueryChange }: TimeGrainFieldProps) => {
const handleChange = useCallback(
(change: SelectableValue<string>) => {
if (!change.value) {

2
public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/TopField.tsx
View File

@@ -7,7 +7,7 @@ import { Field } from '../Field';
import { setTop } from './setQueryValue';
const TopField: React.FC<AzureQueryEditorFieldProps> = ({ onQueryChange, query }) => {
const TopField = ({ onQueryChange, query }: AzureQueryEditorFieldProps) => {
const [value, setValue] = useState<string>(query.azureMonitor?.top ?? '');
// As calling onQueryChange initiates a the datasource refresh, we only want to call it once

8
public/app/plugins/datasource/azuremonitor/components/QueryEditor/QueryEditor.tsx
View File

@@ -27,13 +27,13 @@ export type AzureMonitorQueryEditorProps = QueryEditorProps<
AzureDataSourceJsonData
>;
const QueryEditor: React.FC<AzureMonitorQueryEditorProps> = ({
const QueryEditor = ({
query: baseQuery,
datasource,
onChange,
onRunQuery: baseOnRunQuery,
data,
}) => {
}: AzureMonitorQueryEditorProps) => {
const [errorMessage, setError] = useLastError();
const onRunQuery = useMemo(() => debounce(baseOnRunQuery, 500), [baseOnRunQuery]);
@@ -85,7 +85,7 @@ interface EditorForQueryTypeProps extends Omit<AzureMonitorQueryEditorProps, 'on
setError: (source: string, error: AzureMonitorErrorish | undefined) => void;
}
const EditorForQueryType: React.FC<EditorForQueryTypeProps> = ({
const EditorForQueryType = ({
data,
subscriptionId,
query,
@@ -93,7 +93,7 @@ const EditorForQueryType: React.FC<EditorForQueryTypeProps> = ({
variableOptionGroup,
onChange,
setError,
}) => {
}: EditorForQueryTypeProps) => {
switch (query.queryType) {
case AzureQueryType.AzureMonitor:
return (

2
public/app/plugins/datasource/azuremonitor/components/QueryHeader.tsx
View File

@@ -11,7 +11,7 @@ interface QueryTypeFieldProps {
onQueryChange: (newQuery: AzureMonitorQuery) => void;
}
export const QueryHeader: React.FC<QueryTypeFieldProps> = ({ query, onQueryChange }) => {
export const QueryHeader = ({ query, onQueryChange }: QueryTypeFieldProps) => {
const queryTypes: Array<{ value: AzureQueryType; label: string }> = [
{ value: AzureQueryType.AzureMonitor, label: 'Metrics' },
{ value: AzureQueryType.LogAnalytics, label: 'Logs' },

6
public/app/plugins/datasource/azuremonitor/components/ResourceField/ResourceField.tsx
View File

@@ -24,7 +24,9 @@ interface ResourceFieldProps<T> extends AzureQueryEditorFieldProps {
selectionNotice?: (selectedRows: ResourceRowGroup) => string;
}
const ResourceField: React.FC<ResourceFieldProps<string | AzureMonitorResource>> = ({
type Props = ResourceFieldProps<string | AzureMonitorResource>;
const ResourceField = ({
query,
datasource,
onQueryChange,
@@ -36,7 +38,7 @@ const ResourceField: React.FC<ResourceFieldProps<string | AzureMonitorResource>>
disableRow,
renderAdvanced,
selectionNotice,
}) => {
}: Props) => {
const styles = useStyles2(getStyles);
const [pickerIsOpen, setPickerIsOpen] = useState(false);

2
public/app/plugins/datasource/azuremonitor/components/ResourcePicker/EntryIcon.tsx
View File

@@ -9,7 +9,7 @@ interface EntryIconProps {
isOpen: boolean;
}
export const EntryIcon: React.FC<EntryIconProps> = ({ isOpen, entry: { type } }) => {
export const EntryIcon = ({ isOpen, entry: { type } }: EntryIconProps) => {
switch (type) {
case ResourceRowType.Subscription:
return <Icon name="layer-group" />;

4
public/app/plugins/datasource/azuremonitor/components/ResourcePicker/NestedEntry.tsx
View File

@@ -21,7 +21,7 @@ interface NestedEntryProps {
onSelectedChange: (row: ResourceRow, selected: boolean) => void;
}
export const NestedEntry: React.FC<NestedEntryProps> = ({
export const NestedEntry = ({
entry,
isSelected,
isDisabled,
@@ -31,7 +31,7 @@ export const NestedEntry: React.FC<NestedEntryProps> = ({
scrollIntoView,
onToggleCollapse,
onSelectedChange,
}) => {
}: NestedEntryProps) => {
const theme = useTheme2();
const styles = useStyles2(getStyles);
const hasChildren = !!entry.children;

4
public/app/plugins/datasource/azuremonitor/components/ResourcePicker/NestedRow.tsx
View File

@@ -19,7 +19,7 @@ interface NestedRowProps {
scrollIntoView?: boolean;
}
const NestedRow: React.FC<NestedRowProps> = ({
const NestedRow = ({
row,
selectedRows,
level,
@@ -28,7 +28,7 @@ const NestedRow: React.FC<NestedRowProps> = ({
selectableEntryTypes,
scrollIntoView,
disableRow,
}) => {
}: NestedRowProps) => {
const styles = useStyles2(getStyles);
const [rowStatus, setRowStatus] = useState<'open' | 'closed' | 'loading'>('closed');

4
public/app/plugins/datasource/azuremonitor/components/SubscriptionField.tsx
View File

@@ -15,13 +15,13 @@ interface SubscriptionFieldProps extends AzureQueryEditorFieldProps {
multiSelect?: boolean;
}
const SubscriptionField: React.FC<SubscriptionFieldProps> = ({
const SubscriptionField = ({
query,
subscriptions,
variableOptionGroup,
onQueryChange,
multiSelect = false,
}) => {
}: SubscriptionFieldProps) => {
const handleChange = useCallback(
(change: SelectableValue<string>) => {
if (!change.value) {

2
public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx
View File

@@ -32,7 +32,7 @@ interface SQLBuilderSelectRowProps {
const AGGREGATIONS = STATISTICS.map(toOption);
const SQLBuilderSelectRow: React.FC<SQLBuilderSelectRowProps> = ({ datasource, query, onQueryChange }) => {
const SQLBuilderSelectRow = ({ datasource, query, onQueryChange }: SQLBuilderSelectRowProps) => {
const sql = query.sql ?? {};
const aggregation = sql.select?.name;

4
public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx
View File

@@ -31,7 +31,7 @@ interface SQLFilterProps {
const OPERATORS = COMPARISON_OPERATORS.map(toOption);
const SQLFilter: React.FC<SQLFilterProps> = ({ query, onQueryChange, datasource }) => {
const SQLFilter = ({ query, onQueryChange, datasource }: SQLFilterProps) => {
const filtersFromQuery = useMemo(() => getFlattenedFilters(query.sql ?? {}), [query.sql]);
const [filters, setFilters] = useState<QueryEditorOperatorExpression[]>(filtersFromQuery);
@@ -95,7 +95,7 @@ interface FilterItemProps {
onDelete: () => void;
}
const FilterItem: React.FC<FilterItemProps> = (props) => {
const FilterItem = (props: FilterItemProps) => {
const { datasource, query, filter, onChange, onDelete } = props;
const sql = query.sql ?? {};

4
public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx
View File

@@ -23,7 +23,7 @@ interface SQLGroupByProps {
onQueryChange: (query: CloudWatchMetricsQuery) => void;
}
const SQLGroupBy: React.FC<SQLGroupByProps> = ({ query, datasource, onQueryChange }) => {
const SQLGroupBy = ({ query, datasource, onQueryChange }: SQLGroupByProps) => {
const sql = query.sql ?? {};
const groupBysFromQuery = useMemo(() => getFlattenedGroupBys(query.sql ?? {}), [query.sql]);
const [items, setItems] = useState<QueryEditorGroupByExpression[]>(groupBysFromQuery);
@@ -87,7 +87,7 @@ interface GroupByItemProps {
onDelete: () => void;
}
const GroupByItem: React.FC<GroupByItemProps> = (props) => {
const GroupByItem = (props: GroupByItemProps) => {
const { options, item, onChange, onDelete } = props;
const fieldName = item.property?.name;

2
public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx
View File

@@ -22,7 +22,7 @@ const orderByDirections: Array<SelectableValue<string>> = [
{ label: DESC, value: DESC },
];
const SQLOrderByGroup: React.FC<SQLBuilderSelectRowProps> = ({ query, onQueryChange, datasource }) => {
const SQLOrderByGroup = ({ query, onQueryChange, datasource }: SQLBuilderSelectRowProps) => {
const sql = query.sql ?? {};
const orderBy = sql.orderBy?.name;
const orderByDirection = sql.orderByDirection;

2
public/app/plugins/datasource/graphite/components/FunctionEditor.tsx
View File

@@ -26,7 +26,7 @@ const getStyles = (theme: GrafanaTheme2) => {
};
};
const FunctionEditor: React.FC<FunctionEditorProps> = ({ onMoveLeft, onMoveRight, func, ...props }) => {
const FunctionEditor = ({ onMoveLeft, onMoveRight, func, ...props }: FunctionEditorProps) => {
const styles = useStyles2(getStyles);
const renderContent = ({ updatePopperPosition }: any) => (

2
public/app/plugins/datasource/parca/QueryEditor/EditorRow.tsx
View File

@@ -11,7 +11,7 @@ interface EditorRowProps {
stackProps?: Partial<React.ComponentProps<typeof Stack>>;
}
export const EditorRow: React.FC<EditorRowProps> = ({ children, stackProps }) => {
export const EditorRow = ({ children, stackProps }: EditorRowProps) => {
const styles = useStyles2(getStyles);
return (

2
public/app/plugins/datasource/parca/QueryEditor/EditorRows.tsx
View File

@@ -6,7 +6,7 @@ interface EditorRowsProps {
children: React.ReactNode;
}
export const EditorRows: React.FC<EditorRowsProps> = ({ children }) => {
export const EditorRows = ({ children }: EditorRowsProps) => {
return (
<Stack gap={0.5} direction="column">
{children}

2
public/app/plugins/datasource/phlare/QueryEditor/EditorField.tsx
View File

@@ -12,7 +12,7 @@ interface EditorFieldProps extends ComponentProps<typeof Field> {
tooltip?: PopoverContent;
}
export const EditorField: React.FC<EditorFieldProps> = (props) => {
export const EditorField = (props: EditorFieldProps) => {
const { label, optional, tooltip, children, width, ...fieldProps } = props;
const theme = useTheme2();

2
public/app/plugins/datasource/phlare/QueryEditor/EditorRow.tsx
View File

@@ -11,7 +11,7 @@ interface EditorRowProps {
stackProps?: Partial<React.ComponentProps<typeof Stack>>;
}
export const EditorRow: React.FC<EditorRowProps> = ({ children, stackProps }) => {
export const EditorRow = ({ children, stackProps }: EditorRowProps) => {
const styles = useStyles2(getStyles);
return (

2
public/app/plugins/datasource/phlare/QueryEditor/EditorRows.tsx
View File

@@ -6,7 +6,7 @@ interface EditorRowsProps {
children: React.ReactNode;
}
export const EditorRows: React.FC<EditorRowsProps> = ({ children }) => {
export const EditorRows = ({ children }: EditorRowsProps) => {
return (
<Stack gap={0.5} direction="column">
{children}

164
public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx
View File

@@ -17,93 +17,91 @@ export interface PromExploreExtraFieldProps {
datasource: PrometheusDatasource;
}
export const PromExploreExtraField: React.FC<PromExploreExtraFieldProps> = memo(
({ query, datasource, onChange, onRunQuery }) => {
const rangeOptions = getQueryTypeOptions(true);
const prevQuery = usePrevious(query);
export const PromExploreExtraField = memo(({ query, datasource, onChange, onRunQuery }: PromExploreExtraFieldProps) => {
const rangeOptions = getQueryTypeOptions(true);
const prevQuery = usePrevious(query);
const onExemplarChange = useCallback(
(exemplar: boolean) => {
if (!isEqual(query, prevQuery) || exemplar !== query.exemplar) {
onChange({ ...query, exemplar });
}
},
[prevQuery, query, onChange]
);
function onChangeQueryStep(interval: string) {
onChange({ ...query, interval });
}
function onStepChange(e: React.SyntheticEvent<HTMLInputElement>) {
if (e.currentTarget.value !== query.interval) {
onChangeQueryStep(e.currentTarget.value);
const onExemplarChange = useCallback(
(exemplar: boolean) => {
if (!isEqual(query, prevQuery) || exemplar !== query.exemplar) {
onChange({ ...query, exemplar });
}
}
},
[prevQuery, query, onChange]
);
function onReturnKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
if (e.key === 'Enter' && e.shiftKey) {
onRunQuery();
}
}
const onQueryTypeChange = getQueryTypeChangeHandler(query, onChange);
return (
<div aria-label="Prometheus extra field" className="gf-form-inline" data-testid={testIds.extraFieldEditor}>
{/*Query type field*/}
<div
data-testid={testIds.queryTypeField}
className={cx(
'gf-form explore-input-margin',
css`
flex-wrap: nowrap;
`
)}
aria-label="Query type field"
>
<InlineFormLabel width="auto">Query type</InlineFormLabel>
<RadioButtonGroup
options={rangeOptions}
value={query.range && query.instant ? 'both' : query.instant ? 'instant' : 'range'}
onChange={onQueryTypeChange}
/>
</div>
{/*Step field*/}
<div
data-testid={testIds.stepField}
className={cx(
'gf-form',
css`
flex-wrap: nowrap;
`
)}
aria-label="Step field"
>
<InlineFormLabel
width={6}
tooltip={
'Time units and built-in variables can be used here, for example: $__interval, $__rate_interval, 5s, 1m, 3h, 1d, 1y (Default if no unit is specified: s)'
}
>
Min step
</InlineFormLabel>
<input
type={'text'}
className="gf-form-input width-4"
placeholder={'auto'}
onChange={onStepChange}
onKeyDown={onReturnKeyDown}
value={query.interval ?? ''}
/>
</div>
<PromExemplarField onChange={onExemplarChange} datasource={datasource} query={query} />
</div>
);
function onChangeQueryStep(interval: string) {
onChange({ ...query, interval });
}
);
function onStepChange(e: React.SyntheticEvent<HTMLInputElement>) {
if (e.currentTarget.value !== query.interval) {
onChangeQueryStep(e.currentTarget.value);
}
}
function onReturnKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
if (e.key === 'Enter' && e.shiftKey) {
onRunQuery();
}
}
const onQueryTypeChange = getQueryTypeChangeHandler(query, onChange);
return (
<div aria-label="Prometheus extra field" className="gf-form-inline" data-testid={testIds.extraFieldEditor}>
{/*Query type field*/}
<div
data-testid={testIds.queryTypeField}
className={cx(
'gf-form explore-input-margin',
css`
flex-wrap: nowrap;
`
)}
aria-label="Query type field"
>
<InlineFormLabel width="auto">Query type</InlineFormLabel>
<RadioButtonGroup
options={rangeOptions}
value={query.range && query.instant ? 'both' : query.instant ? 'instant' : 'range'}
onChange={onQueryTypeChange}
/>
</div>
{/*Step field*/}
<div
data-testid={testIds.stepField}
className={cx(
'gf-form',
css`
flex-wrap: nowrap;
`
)}
aria-label="Step field"
>
<InlineFormLabel
width={6}
tooltip={
'Time units and built-in variables can be used here, for example: $__interval, $__rate_interval, 5s, 1m, 3h, 1d, 1y (Default if no unit is specified: s)'
}
>
Min step
</InlineFormLabel>
<input
type={'text'}
className="gf-form-input width-4"
placeholder={'auto'}
onChange={onStepChange}
onKeyDown={onReturnKeyDown}
value={query.interval ?? ''}
/>
</div>
<PromExemplarField onChange={onExemplarChange} datasource={datasource} query={query} />
</div>
);
});
PromExploreExtraField.displayName = 'PromExploreExtraField';

2
public/app/plugins/datasource/testdata/components/ErrorEditor.tsx vendored
View File

@@ -19,7 +19,7 @@ const ERROR_OPTIONS = [
},
];
const FrontendErrorQueryEditor: React.FC<EditorProps> = ({ query, onChange }) => {
const FrontendErrorQueryEditor = ({ query, onChange }: EditorProps) => {
return (
<InlineFieldRow>
<InlineField labelWidth={14} label="Error type">

2
public/app/plugins/panel/barchart/TickSpacingEditor.tsx
View File

@@ -26,7 +26,7 @@ const GAPS_OPTIONS: Array<SelectableValue<number>> = [
},
];
export const TickSpacingEditor: React.FC<StandardEditorProps<number>> = (props) => {
export const TickSpacingEditor = (props: StandardEditorProps<number>) => {
let value = props.value ?? 0;
const isRTL = value < 0;
if (isRTL) {

4
public/app/plugins/panel/candlestick/CandlestickPanel.tsx
View File

@@ -26,7 +26,7 @@ import { drawMarkers, FieldIndices } from './utils';
interface CandlestickPanelProps extends PanelProps<CandlestickOptions> {}
export const CandlestickPanel: React.FC<CandlestickPanelProps> = ({
export const CandlestickPanel = ({
data,
id,
timeRange,
@@ -37,7 +37,7 @@ export const CandlestickPanel: React.FC<CandlestickPanelProps> = ({
fieldConfig,
onChangeTimeRange,
replaceVariables,
}) => {
}: CandlestickPanelProps) => {
const { sync, canAddAnnotations, onThresholdsChange, canEditThresholds, showThresholds, onSplitOpen } =
usePanelContext();

4
public/app/plugins/panel/heatmap/HeatmapPanel.tsx
View File

@@ -26,7 +26,7 @@ import { HeatmapHoverEvent, prepConfig } from './utils';
interface HeatmapPanelProps extends PanelProps<PanelOptions> {}
export const HeatmapPanel: React.FC<HeatmapPanelProps> = ({
export const HeatmapPanel = ({
data,
id,
timeRange,
@@ -38,7 +38,7 @@ export const HeatmapPanel: React.FC<HeatmapPanelProps> = ({
eventBus,
onChangeTimeRange,
replaceVariables,
}) => {
}: HeatmapPanelProps) => {
const theme = useTheme2();
const styles = useStyles2(getStyles);
const { sync } = usePanelContext();

4
public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
View File

@@ -35,7 +35,7 @@ interface TimelinePanelProps extends PanelProps<PanelOptions> {}
/**
* @alpha
*/
export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
export const StateTimelinePanel = ({
data,
timeRange,
timeZone,
@@ -44,7 +44,7 @@ export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
height,
replaceVariables,
onChangeTimeRange,
}) => {
}: TimelinePanelProps) => {
const theme = useTheme2();
const oldConfig = useRef<UPlotConfigBuilder | undefined>(undefined);

4
public/app/plugins/panel/state-timeline/StateTimelineTooltip.tsx
View File

@@ -21,14 +21,14 @@ interface StateTimelineTooltipProps {
onAnnotationAdd?: () => void;
}
export const StateTimelineTooltip: React.FC<StateTimelineTooltipProps> = ({
export const StateTimelineTooltip = ({
data,
alignedData,
seriesIdx,
datapointIdx,
timeZone,
onAnnotationAdd,
}) => {
}: StateTimelineTooltipProps) => {
const theme = useTheme2();
if (!data || datapointIdx == null) {

4
public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
View File

@@ -32,7 +32,7 @@ interface TimelinePanelProps extends PanelProps<PanelOptions> {}
/**
* @alpha
*/
export const StatusHistoryPanel: React.FC<TimelinePanelProps> = ({
export const StatusHistoryPanel = ({
data,
timeRange,
timeZone,
@@ -40,7 +40,7 @@ export const StatusHistoryPanel: React.FC<TimelinePanelProps> = ({
width,
height,
onChangeTimeRange,
}) => {
}: TimelinePanelProps) => {
const theme = useTheme2();
const oldConfig = useRef<UPlotConfigBuilder | undefined>(undefined);

4
public/app/plugins/panel/status-history/StatusHistoryTooltip.tsx
View File

@@ -19,13 +19,13 @@ interface StatusHistoryTooltipProps {
timeZone: TimeZone;
}
export const StatusHistoryTooltip: React.FC<StatusHistoryTooltipProps> = ({
export const StatusHistoryTooltip = ({
data,
alignedData,
seriesIdx,
datapointIdx,
timeZone,
}) => {
}: StatusHistoryTooltipProps) => {
const theme = useTheme2();
if (!data || datapointIdx == null) {

2
public/app/plugins/panel/timeseries/plugins/AnnotationEditorPlugin.tsx
View File

@@ -22,7 +22,7 @@ interface AnnotationEditorPluginProps {
/**
* @alpha
*/
export const AnnotationEditorPlugin: React.FC<AnnotationEditorPluginProps> = ({ data, timeZone, config, children }) => {
export const AnnotationEditorPlugin = ({ data, timeZone, config, children }: AnnotationEditorPluginProps) => {
const plotInstance = useRef<uPlot>();
const [bbox, setBbox] = useState<DOMRect>();
const [isAddingAnnotation, setIsAddingAnnotation] = useState(false);

2
public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin.tsx
View File

@@ -13,7 +13,7 @@ interface AnnotationsPluginProps {
timeZone: TimeZone;
}
export const AnnotationsPlugin: React.FC<AnnotationsPluginProps> = ({ annotations, timeZone, config }) => {
export const AnnotationsPlugin = ({ annotations, timeZone, config }: AnnotationsPluginProps) => {
const theme = useTheme2();
const plotInstance = useRef<uPlot>();

8
public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx
View File

@@ -32,14 +32,14 @@ interface ContextMenuPluginProps {
replaceVariables?: InterpolateFunction;
}
export const ContextMenuPlugin: React.FC<ContextMenuPluginProps> = ({
export const ContextMenuPlugin = ({
data,
config,
onClose,
timeZone,
replaceVariables,
...otherProps
}) => {
}: ContextMenuPluginProps) => {
const plotCanvas = useRef<HTMLDivElement>();
const [coords, setCoords] = useState<ContextMenuSelectionCoords | null>(null);
const [point, setPoint] = useState<ContextMenuSelectionPoint | null>(null);
@@ -208,14 +208,14 @@ interface ContextMenuViewProps {
replaceVariables?: InterpolateFunction;
}
export const ContextMenuView: React.FC<ContextMenuViewProps> = ({
export const ContextMenuView = ({
selection,
timeZone,
defaultItems,
replaceVariables,
data,
...otherProps
}) => {
}: ContextMenuViewProps) => {
const ref = useRef(null);
const onClose = () => {

4
public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
View File

@@ -25,14 +25,14 @@ interface ExemplarMarkerProps {
exemplarColor?: string;
}
export const ExemplarMarker: React.FC<ExemplarMarkerProps> = ({
export const ExemplarMarker = ({
timeZone,
dataFrame,
dataFrameFieldIndex,
config,
getFieldLinks,
exemplarColor,
}) => {
}: ExemplarMarkerProps) => {
const styles = useStyles2(getExemplarMarkerStyles);
const [isOpen, setIsOpen] = useState(false);
const [markerElement, setMarkerElement] = React.useState<HTMLDivElement | null>(null);

4
public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx
View File

@@ -23,13 +23,13 @@ interface ExemplarsPluginProps {
visibleSeries?: VisibleExemplarLabels;
}
export const ExemplarsPlugin: React.FC<ExemplarsPluginProps> = ({
export const ExemplarsPlugin = ({
exemplars,
timeZone,
getFieldLinks,
config,
visibleSeries,
}) => {
}: ExemplarsPluginProps) => {
const plotInstance = useRef<uPlot>();
useLayoutEffect(() => {

2
public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx
View File

@@ -9,7 +9,7 @@ interface ThresholdControlsPluginProps {
onChangeTimeRange: (timeRange: AbsoluteTimeRange) => void;
}
export const OutsideRangePlugin: React.FC<ThresholdControlsPluginProps> = ({ config, onChangeTimeRange }) => {
export const OutsideRangePlugin = ({ config, onChangeTimeRange }: ThresholdControlsPluginProps) => {
const plotInstance = useRef<uPlot>();
const [timevalues, setTimeValues] = useState<number[] | TypedArray>([]);
const [timeRange, setTimeRange] = useState<Scale | undefined>();

6
public/app/plugins/panel/timeseries/plugins/ThresholdControlsPlugin.tsx
View File

@@ -14,11 +14,7 @@ interface ThresholdControlsPluginProps {
onThresholdsChange?: (thresholds: ThresholdsConfig) => void;
}
export const ThresholdControlsPlugin: React.FC<ThresholdControlsPluginProps> = ({
config,
fieldConfig,
onThresholdsChange,
}) => {
export const ThresholdControlsPlugin = ({ config, fieldConfig, onThresholdsChange }: ThresholdControlsPluginProps) => {
const plotInstance = useRef<uPlot>();
const [renderToken, setRenderToken] = useState(0);

4
public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx
View File

@@ -17,14 +17,14 @@ interface ThresholdDragHandleProps {
formatValue: (value: number) => string;
}
export const ThresholdDragHandle: React.FC<ThresholdDragHandleProps> = ({
export const ThresholdDragHandle = ({
step,
y,
dragBounds,
mapPositionToValue,
formatValue,
onChange,
}) => {
}: ThresholdDragHandleProps) => {
const theme = useTheme2();
let yPos = y;
let outOfBounds: OutOfBounds = 'none';

Some files were not shown because too many files have changed in this diff Show More