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: replace React.FC<Props> with simple function component (#54123)

Browse Source
This commit is contained in:
Ryan McKinley
2022-08-24 13:54:34 -07:00
committed by GitHub
parent 277ea836b6
commit b483ac322f
53 changed files with 63 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
contribute/style-guides/styling.md
View File

@@ -104,7 +104,7 @@ interface Props {
className?: string;
}
const ComponentA: React.FC<Props> = ({ className }) => {
function ComponentA({ className }: Props) {
const finalClassName = cx(
className,
css`
@@ -113,5 +113,5 @@ const ComponentA: React.FC<Props> = ({ className }) => {
);
return <div className={finalClassName}>As red as you can ge</div>;
};
}
```

4
docs/sources/developers/plugins/add-support-for-variables.md
View File

@@ -31,11 +31,11 @@ For panels, the `replaceVariables` function is available in the PanelProps.
Add `replaceVariables` to the argument list, and pass it a user-defined template string.
```ts
export const SimplePanel: React.FC<Props> = ({ options, data, width, height, replaceVariables }) => {
export function SimplePanel({ options, data, width, height, replaceVariables }: Props) {
const query = replaceVariables('Now displaying $service');
return <div>{query}</div>;
};
}
```
## Interpolate variables in data source plugins

4
docs/sources/developers/plugins/migration-guide.md
View File

@@ -708,9 +708,9 @@ import { PanelProps } from '@grafana/data';
interface Props extends PanelProps<SimpleOptions> {}
export const MyPanel: React.FC<Props> = ({ options, data, width, height }) => {
export function MyPanel({ options, data, width, height }: Props) {
// ...
};
}
```
#### Migrate a data source plugin

4
docs/sources/developers/plugins/working-with-data-frames.md
View File

@@ -52,11 +52,11 @@ frame.name = 'http_requests_total';
When you're building a panel plugin, the data frames returned by the data source are available from the `data` prop in your panel component.
```ts
const SimplePanel: React.FC<Props> = ({ data }) => {
function SimplePanel({ data: Props }) {
const frame = data.series[0];
// ...
};
}
```
Before you start reading the data, think about what data you expect. For example, to visualize a time series we'd need at least one time field, and one number field.

4
packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
View File

@@ -114,14 +114,14 @@ export const TimePickerContentWithScreenSize: React.FC<PropsWithScreenSize> = (p
);
};
export const TimePickerContent: React.FC<Props> = (props) => {
export const TimePickerContent = (props: Props) => {
const { widthOverride } = props;
const theme = useTheme2();
const isFullscreen = (widthOverride || window.innerWidth) >= theme.breakpoints.values.lg;
return <TimePickerContentWithScreenSize {...props} isFullscreen={isFullscreen} />;
};
const NarrowScreenForm: React.FC<FormProps> = (props) => {
const NarrowScreenForm = (props: FormProps) => {
const { value, hideQuickRanges, onChange, timeZone, historyOptions = [], showHistory } = props;
const theme = useTheme2();
const styles = getNarrowScreenStyles(theme);

2
packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.tsx
View File

@@ -44,7 +44,7 @@ const ERROR_MESSAGES = {
range: '"From" can\'t be after "To"',
};
export const TimeRangeForm: React.FC<Props> = (props) => {
export const TimeRangeForm = (props: Props) => {
const { value, isFullscreen = false, timeZone, onApply: onApplyFromProps, isReversed, fiscalYearStartMonth } = props;
const [fromValue, toValue] = valueToState(value.raw.from, value.raw.to, timeZone);
const style = useStyles2(getStyles);

4
packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx
View File

@@ -36,7 +36,7 @@ interface Props {
placeholderEmpty?: ReactNode;
}
export const TimeRangeList: React.FC<Props> = (props) => {
export const TimeRangeList = (props: Props) => {
const styles = getStyles();
const { title, options, placeholderEmpty } = props;
@@ -60,7 +60,7 @@ export const TimeRangeList: React.FC<Props> = (props) => {
);
};
const Options: React.FC<Props> = ({ options, value, onChange, title }) => {
const Options = ({ options, value, onChange, title }: Props) => {
const styles = getOptionsStyles();
return (

2
packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx
View File

@@ -28,7 +28,7 @@ export interface Props {
inputId?: string;
}
export const TimeZonePicker: React.FC<Props> = (props) => {
export const TimeZonePicker = (props: Props) => {
const {
onChange,
width,

2
packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx
View File

@@ -9,7 +9,7 @@ interface Props {
title: string | ReactNode;
}
export const TimeZoneTitle: React.FC<Props> = ({ title }) => {
export const TimeZoneTitle = ({ title }: Props) => {
const styles = useStyles2(getStyles);
if (!title) {

2
packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx
View File

@@ -22,7 +22,7 @@ const weekStarts: Array<SelectableValue<string>> = [
{ value: 'monday', label: 'Monday' },
];
export const WeekStartPicker: React.FC<Props> = (props) => {
export const WeekStartPicker = (props: Props) => {
const { onChange, width, autoFocus = false, onBlur, value, disabled = false, inputId } = props;
const onChangeWeekStart = useCallback(

2
packages/grafana-ui/src/components/Modal/ModalTabsHeader.tsx
View File

@@ -23,7 +23,7 @@ interface Props {
onChangeTab(tab: ModalTab): void;
}
export const ModalTabsHeader: React.FC<Props> = ({ icon, title, tabs, activeTab, onChangeTab }) => {
export const ModalTabsHeader = ({ icon, title, tabs, activeTab, onChangeTab }: Props) => {
return (
<ModalHeader icon={icon} title={title}>
<TabsBar hideBorder={true}>

4
packages/grafana-ui/src/components/Pagination/Pagination.tsx
View File

@@ -19,14 +19,14 @@ export interface Props {
className?: string;
}
export const Pagination: React.FC<Props> = ({
export const Pagination = ({
currentPage,
numberOfPages,
onNavigate,
hideWhenSinglePage,
showSmallVersion,
className,
}) => {
}: Props) => {
const styles = useStyles2(getStyles);
const pageLengthToCondense = showSmallVersion ? 1 : 8;

2
packages/grafana-ui/src/components/Typeahead/PartialHighlighter.tsx
View File

@@ -27,7 +27,7 @@ function getStartIndices(parts: HighlightPart[], length: number): number[] {
return indices;
}
export const PartialHighlighter: React.FC<Props> = (props: Props) => {
export const PartialHighlighter = (props: Props) => {
let { highlightParts, text, highlightClassName } = props;
if (!highlightParts?.length) {

2
packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx
View File

@@ -34,7 +34,7 @@ interface Props {
height: number;
}
export const TypeaheadInfo: React.FC<Props> = ({ item, height }) => {
export const TypeaheadInfo = ({ item, height }: Props) => {
const visible = item && !!item.documentation;
const label = item ? item.label : '';
const documentation = renderMarkdown(item?.documentation);

2
packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx
View File

@@ -60,7 +60,7 @@ const getStyles = (theme: GrafanaTheme) => ({
`,
});
export const TypeaheadItem: React.FC<Props> = (props: Props) => {
export const TypeaheadItem = (props: Props) => {
const styles = useStyles(getStyles);
const { isSelected, item, prefix, style, onMouseEnter, onMouseLeave, onClickItem } = props;

2
public/app/core/components/CloseButton/CloseButton.tsx
View File

@@ -10,7 +10,7 @@ type Props = {
style?: React.CSSProperties;
};
export const CloseButton: React.FC<Props> = ({ onClick, 'aria-label': ariaLabel, style }) => {
export const CloseButton = ({ onClick, 'aria-label': ariaLabel, style }: Props) => {
const styles = useStyles2(getStyles);
return (
<IconButton aria-label={ariaLabel ?? 'Close'} className={styles} name="times" onClick={onClick} style={style} />

2
public/app/core/components/OptionsUI/string.tsx
View File

@@ -7,7 +7,7 @@ interface Props extends StandardEditorProps<string, StringFieldConfigSettings> {
suffix?: ReactNode;
}
export const StringValueEditor: React.FC<Props> = ({ value, onChange, item, suffix }) => {
export const StringValueEditor = ({ value, onChange, item, suffix }: Props) => {
const Component = item.settings?.useTextarea ? TextArea : Input;
const onValueChange = useCallback(
(e: React.SyntheticEvent) => {

2
public/app/core/components/TimePicker/TimePickerWithHistory.tsx
View File

@@ -9,7 +9,7 @@ const LOCAL_STORAGE_KEY = 'grafana.dashboard.timepicker.history';
interface Props extends Omit<TimeRangePickerProps, 'history' | 'theme'> {}
export const TimePickerWithHistory: React.FC<Props> = (props) => {
export const TimePickerWithHistory = (props: Props) => {
return (
<LocalStorageValueProvider<TimeRange[]> storageKey={LOCAL_STORAGE_KEY} defaultValue={[]}>
{(values, onSaveToStore) => {

4
public/app/features/admin/UserListAdminPage.tsx
View File

@@ -55,7 +55,7 @@ interface OwnProps {}
type Props = OwnProps & ConnectedProps<typeof connector>;
const UserListAdminPageUnConnected: React.FC<Props> = ({
const UserListAdminPageUnConnected = ({
fetchUsers,
query,
changeQuery,
@@ -67,7 +67,7 @@ const UserListAdminPageUnConnected: React.FC<Props> = ({
changeFilter,
filters,
isLoading,
}) => {
}: Props) => {
const styles = useStyles2(getStyles);
useEffect(() => {

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

@@ -58,7 +58,7 @@ const getCopiedPanelPlugins = () => {
return sortBy(copiedPanels, 'sort');
};
export const AddPanelWidgetUnconnected: React.FC<Props> = ({ panel, dashboard }) => {
export const AddPanelWidgetUnconnected = ({ panel, dashboard }: Props) => {
const [addPanelView, setAddPanelView] = useState(false);
const onCancelAddPanel = (evt: React.MouseEvent<HTMLButtonElement>) => {

2
public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx
View File

@@ -19,7 +19,7 @@ type Props = {
export const newAnnotationName = 'New annotation';
export const AnnotationSettingsEdit: React.FC<Props> = ({ editIdx, dashboard }) => {
export const AnnotationSettingsEdit = ({ editIdx, dashboard }: Props) => {
const [annotation, setAnnotation] = useState(dashboard.annotations.list[editIdx]);
const { value: ds } = useAsync(() => {

2
public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx
View File

@@ -14,7 +14,7 @@ type Props = {
onEdit: (idx: number) => void;
};
export const AnnotationSettingsList: React.FC<Props> = ({ dashboard, onNew, onEdit }) => {
export const AnnotationSettingsList = ({ dashboard, onNew, onEdit }: Props) => {
const [annotations, updateAnnotations] = useState(dashboard.annotations.list);
const onMove = (idx: number, direction: number) => {

2
public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx
View File

@@ -24,7 +24,7 @@ const connector = connect(null, mapDispatchToProps);
type Props = DeleteDashboardModalProps & ConnectedProps<typeof connector>;
const DeleteDashboardModalUnconnected: React.FC<Props> = ({ hideModal, cleanUpDashboardAndVariables, dashboard }) => {
const DeleteDashboardModalUnconnected = ({ hideModal, cleanUpDashboardAndVariables, dashboard }: Props) => {
const isProvisioned = dashboard.meta.provisioned;
const { onDeleteDashboard } = useDashboardDelete(dashboard.uid, cleanUpDashboardAndVariables);

4
public/app/features/dashboard/components/Inspector/InspectContent.tsx
View File

@@ -31,7 +31,7 @@ interface Props {
onClose: () => void;
}
export const InspectContent: React.FC<Props> = ({
export const InspectContent = ({
panel,
plugin,
dashboard,
@@ -43,7 +43,7 @@ export const InspectContent: React.FC<Props> = ({
defaultTab,
onDataOptionsChange,
onClose,
}) => {
}: Props) => {
const [currentTab, setCurrentTab] = useState(defaultTab ?? InspectTab.Data);
if (!plugin) {

2
public/app/features/dashboard/components/Inspector/PanelInspector.tsx
View File

@@ -26,7 +26,7 @@ export interface ConnectedProps {
export type Props = OwnProps & ConnectedProps;
const PanelInspectorUnconnected: React.FC<Props> = ({ panel, dashboard, plugin }) => {
const PanelInspectorUnconnected = ({ panel, dashboard, plugin }: Props) => {
const [dataOptions, setDataOptions] = useState<GetDataOptions>({
withTransforms: false,
withFieldConfig: true,

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

@@ -18,7 +18,7 @@ interface Props {
dashboardId: number;
}
export const DashboardLinksDashboard: React.FC<Props> = (props) => {
export const DashboardLinksDashboard = (props: Props) => {
const { link, linkInfo } = props;
const listRef = useRef<HTMLUListElement>(null);
const [dropdownCssClass, setDropdownCssClass] = useState('invisible');

2
public/app/features/dimensions/editors/IconSelector.tsx
View File

@@ -9,7 +9,7 @@ interface Props {
onChange: (v: string) => void;
}
const IconSelector: React.FC<Props> = ({ value, onChange }) => {
const IconSelector = ({ value, onChange }: Props) => {
const [icons, setIcons] = useState<SelectableValue[]>(value ? [{ value, label: value }] : []);
const [icon, setIcon] = useState<string>();
const iconRoot = (window as any).__grafana_public_path__ + 'img/icons/unicons/';

4
public/app/features/explore/LogsMetaRow.tsx
View File

@@ -18,7 +18,7 @@ export type Props = {
clearDetectedFields: () => void;
};
export const LogsMetaRow: React.FC<Props> = React.memo(
export const LogsMetaRow = React.memo(
({
meta,
dedupStrategy,
@@ -29,7 +29,7 @@ export const LogsMetaRow: React.FC<Props> = React.memo(
forceEscape,
onEscapeNewlines,
logRows,
}) => {
}: Props) => {
const logsMetaItem: Array<LogsMetaItem | MetaItemProps> = [...meta];
// Add deduplication info

2
public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx
View File

@@ -98,7 +98,7 @@ interface Props extends AddLibraryPanelContentsProps {
isOpen?: boolean;
}
export const AddLibraryPanelModal: React.FC<Props> = ({ isOpen = false, panel, initialFolderId, ...props }) => {
export const AddLibraryPanelModal = ({ isOpen = false, panel, initialFolderId, ...props }: Props) => {
return (
<Modal title="Create library panel" isOpen={isOpen} onDismiss={props.onDismiss}>
<AddLibraryPanelContents panel={panel} initialFolderId={initialFolderId} onDismiss={props.onDismiss} />

2
public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx
View File

@@ -12,7 +12,7 @@ interface Props {
formatDate?: (dateString: DateTimeInput, format?: string) => string;
}
export const LibraryPanelInformation: React.FC<Props> = ({ panel, formatDate }) => {
export const LibraryPanelInformation = ({ panel, formatDate }: Props) => {
const styles = useStyles(getStyles);
if (!isPanelModelLibraryPanel(panel)) {

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

@@ -17,14 +17,7 @@ interface Props {
onDiscard: () => void;
}
export const SaveLibraryPanelModal: React.FC<Props> = ({
panel,
folderId,
isUnsavedPrompt,
onDismiss,
onConfirm,
onDiscard,
}) => {
export const SaveLibraryPanelModal = ({ panel, folderId, isUnsavedPrompt, onDismiss, onConfirm, onDiscard }: Props) => {
const [searchString, setSearchString] = useState('');
const dashState = useAsync(async () => {
const searchHits = await getConnectedDashboards(panel.libraryPanel.uid);

2
public/app/features/library-panels/components/UnlinkModal/UnlinkModal.tsx
View File

@@ -8,7 +8,7 @@ interface Props {
onDismiss: () => void;
}
export const UnlinkModal: React.FC<Props> = ({ isOpen, onConfirm, onDismiss }) => {
export const UnlinkModal = ({ isOpen, onConfirm, onDismiss }: Props) => {
return (
<ConfirmModal
title="Do you really want to unlink this panel?"

2
public/app/features/live/pages/PipelineTable.tsx
View File

@@ -22,7 +22,7 @@ interface Props {
selectRule?: Rule;
}
export const PipelineTable: React.FC<Props> = (props) => {
export const PipelineTable = (props: Props) => {
const { rules } = props;
const [isOpen, setOpen] = useState(false);
const [selectedRule, setSelectedRule] = useState<Rule>();

2
public/app/features/live/pages/RuleModal.tsx
View File

@@ -31,7 +31,7 @@ const tabs: TabInfo[] = [
{ label: 'Test', isTest: true, icon: 'flask' },
];
export const RuleModal: React.FC<Props> = (props) => {
export const RuleModal = (props: Props) => {
const { isOpen, onClose, clickColumn } = props;
const [rule, setRule] = useState<Rule>(props.rule);
const [activeTab, setActiveTab] = useState<TabInfo | undefined>(tabs.find((t) => t.type === clickColumn));

2
public/app/features/live/pages/RuleSettingsArray.tsx
View File

@@ -13,7 +13,7 @@ interface Props {
entitiesInfo: PipeLineEntitiesInfo;
}
export const RuleSettingsArray: React.FC<Props> = ({ onChange, value, ruleType, entitiesInfo }) => {
export const RuleSettingsArray = ({ onChange, value, ruleType, entitiesInfo }: Props) => {
const [index, setIndex] = useState<number>(0);
const arr = value ?? [];
const onRuleChange = (v: RuleSetting) => {

2
public/app/features/live/pages/RuleSettingsEditor.tsx
View File

@@ -11,7 +11,7 @@ interface Props {
entitiesInfo: PipeLineEntitiesInfo;
}
export const RuleSettingsEditor: React.FC<Props> = ({ onChange, value, ruleType, entitiesInfo }) => {
export const RuleSettingsEditor = ({ onChange, value, ruleType, entitiesInfo }: Props) => {
return (
<>
<Select

2
public/app/features/live/pages/RuleTest.tsx
View File

@@ -11,7 +11,7 @@ interface Props {
rule: Rule;
}
export const RuleTest: React.FC<Props> = (props) => {
export const RuleTest = (props: Props) => {
const [response, setResponse] = useState<ChannelFrame[]>();
const [data, setData] = useState<string>();
const styles = useStyles(getStyles);

2
public/app/features/panel/components/VizTypePicker/VizTypePickerPlugin.tsx
View File

@@ -11,7 +11,7 @@ interface Props {
disabled: boolean;
}
export const VizTypePickerPlugin: React.FC<Props> = ({ isCurrent, plugin, onClick, disabled }) => {
export const VizTypePickerPlugin = ({ isCurrent, plugin, onClick, disabled }: Props) => {
return (
<PanelTypeCard
title={plugin.name}

2
public/app/features/transformers/FilterByValueTransformer/FilterByValueFilterEditor.tsx
View File

@@ -18,7 +18,7 @@ export interface DataFrameFieldsInfo {
fieldByDisplayName: Record<string, Field>;
}
export const FilterByValueFilterEditor: React.FC<Props> = (props) => {
export const FilterByValueFilterEditor = (props: Props) => {
const { onDelete, onChange, filter, fieldsInfo } = props;
const { fieldsAsOptions, fieldByDisplayName } = fieldsInfo;
const fieldName = getFieldName(filter, fieldsAsOptions) ?? '';

2
public/app/plugins/datasource/cloud-monitoring/components/Experimental/LookbackPeriodSelect.tsx
View File

@@ -12,7 +12,7 @@ export interface Props {
current?: string;
}
export const LookbackPeriodSelect: React.FC<Props> = ({ refId, current, templateVariableOptions, onChange }) => {
export const LookbackPeriodSelect = ({ refId, current, templateVariableOptions, onChange }: Props) => {
const options = LOOKBACK_PERIODS.map((lp) => ({
...lp,
label: lp.text,

2
public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx
View File

@@ -14,7 +14,7 @@ export interface Props {
datasource: CloudMonitoringDatasource;
}
export const SLO: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
export const SLO = ({ refId, query, templateVariableOptions, onChange, datasource }: Props) => {
const [slos, setSLOs] = useState<Array<SelectableValue<string>>>([]);
const { projectName, serviceId } = query;

2
public/app/plugins/datasource/cloud-monitoring/components/Experimental/Selector.tsx
View File

@@ -15,7 +15,7 @@ export interface Props {
datasource: CloudMonitoringDatasource;
}
export const Selector: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
export const Selector = ({ refId, query, templateVariableOptions, onChange, datasource }: Props) => {
return (
<EditorField label="Selector" htmlFor={`${refId}-slo-selector`}>
<Select

2
public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx
View File

@@ -14,7 +14,7 @@ export interface Props {
datasource: CloudMonitoringDatasource;
}
export const Service: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
export const Service = ({ refId, query, templateVariableOptions, onChange, datasource }: Props) => {
const [services, setServices] = useState<Array<SelectableValue<string>>>([]);
const { projectName } = query;

2
public/app/plugins/datasource/cloud-monitoring/components/SLO/SLO.tsx
View File

@@ -16,7 +16,7 @@ export interface Props {
datasource: CloudMonitoringDatasource;
}
export const SLO: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
export const SLO = ({ refId, query, templateVariableOptions, onChange, datasource }: Props) => {
const [slos, setSLOs] = useState<Array<SelectableValue<string>>>([]);
const { projectName, serviceId } = query;

2
public/app/plugins/datasource/cloud-monitoring/components/SLO/Selector.tsx
View File

@@ -16,7 +16,7 @@ export interface Props {
datasource: CloudMonitoringDatasource;
}
export const Selector: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
export const Selector = ({ refId, query, templateVariableOptions, onChange, datasource }: Props) => {
return (
<QueryEditorRow label="Selector" htmlFor={`${refId}-slo-selector`}>
<Select

2
public/app/plugins/datasource/cloud-monitoring/components/SLO/Service.tsx
View File

@@ -16,7 +16,7 @@ export interface Props {
datasource: CloudMonitoringDatasource;
}
export const Service: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
export const Service = ({ refId, query, templateVariableOptions, onChange, datasource }: Props) => {
const [services, setServices] = useState<Array<SelectableValue<string>>>([]);
const { projectName } = query;

8
public/app/plugins/datasource/cloudwatch/components/Dimensions/Dimensions.tsx
View File

@@ -45,13 +45,7 @@ const filterConditionsToDimensions = (filters: DimensionFilterCondition[]) => {
}, {});
};
export const Dimensions: React.FC<Props> = ({
metricStat,
datasource,
dimensionKeys,
disableExpressions,
onChange,
}) => {
export const Dimensions = ({ metricStat, datasource, dimensionKeys, disableExpressions, onChange }: Props) => {
const dimensionFilters = useMemo(() => dimensionsToFilterConditions(metricStat.dimensions), [metricStat.dimensions]);
const [items, setItems] = useState<DimensionFilterCondition[]>(dimensionFilters);
const onDimensionsChange = (newItems: Array<Partial<DimensionFilterCondition>>) => {

2
public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.tsx
View File

@@ -32,7 +32,7 @@ const filterConditionsToMultiFilters = (filters: MultiFilterCondition[]) => {
return res;
};
export const MultiFilter: React.FC<Props> = ({ filters, onChange, keyPlaceholder }) => {
export const MultiFilter = ({ filters, onChange, keyPlaceholder }: Props) => {
const [items, setItems] = useState<MultiFilterCondition[]>([]);
useEffect(() => setItems(filters ? multiFiltersToFilterConditions(filters) : []), [filters]);
const onFiltersChange = (newItems: Array<Partial<MultiFilterCondition>>) => {

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

@@ -17,7 +17,7 @@ const GRAPHITE_QUERY_VARIABLE_TYPE_OPTIONS = [
{ label: 'Metric Name Query', value: GraphiteQueryType.MetricName },
];
export const GraphiteVariableEditor: React.FC<Props> = (props) => {
export const GraphiteVariableEditor = (props: Props) => {
const { query, onChange } = props;
const [value, setValue] = useState(convertToGraphiteQueryObject(query));

2
public/app/plugins/datasource/jaeger/components/ConfigEditor.tsx
View File

@@ -10,7 +10,7 @@ import { TraceToMetricsSettings } from 'app/core/components/TraceToMetrics/Trace
export type Props = DataSourcePluginOptionsEditorProps;
export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
return (
<>
<DataSourceHttpSettings

2
public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
View File

@@ -14,7 +14,7 @@ import { ServiceGraphSettings } from './ServiceGraphSettings';
export type Props = DataSourcePluginOptionsEditorProps;
export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
return (
<>
<DataSourceHttpSettings

2
public/app/plugins/datasource/zipkin/ConfigEditor.tsx
View File

@@ -10,7 +10,7 @@ import { TraceToMetricsSettings } from 'app/core/components/TraceToMetrics/Trace
export type Props = DataSourcePluginOptionsEditorProps;
export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
return (
<>
<DataSourceHttpSettings

2
public/app/plugins/panel/histogram/HistogramPanel.tsx
View File

@@ -9,7 +9,7 @@ import { PanelOptions } from './models.gen';
type Props = PanelProps<PanelOptions>;
export const HistogramPanel: React.FC<Props> = ({ data, options, width, height }) => {
export const HistogramPanel = ({ data, options, width, height }: Props) => {
const theme = useTheme2();
const histogram = useMemo(() => {