mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: more typing improvements to @grafana/ui (#56544)
* improve grafana-ui types * more type improvements * better useState type
This commit is contained in:
Ashley Harrison
GitHub
parent
a4c5801440
commit
ff41b9544b
@ -1356,21 +1356,9 @@ exports[`better eslint`] = {
|
||||
"packages/grafana-ui/src/components/Layout/Layout.story.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Link/Link.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/List/List.story.internal.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Logs/LogRowContext.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Logs/LogRowContextProvider.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "1"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "2"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "3"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "4"]
|
||||
[0, 0, 0, "Do not use any type assertions.", "1"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Logs/LogRows.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
@ -1387,12 +1375,6 @@ exports[`better eslint`] = {
|
||||
"packages/grafana-ui/src/components/Menu/MenuItem.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Menu/hooks.ts:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "1"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "2"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "3"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Modal/ModalsContext.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],
|
||||
@ -1419,14 +1401,7 @@ exports[`better eslint`] = {
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "3"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/QueryField/QueryField.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "2"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "1"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "2"]
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Segment/Segment.story.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
@ -1513,9 +1488,6 @@ exports[`better eslint`] = {
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "4"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "5"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Select/utils.ts:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/SetInterval/SetInterval.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
],
|
||||
@ -1553,21 +1525,13 @@ exports[`better eslint`] = {
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "19"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "20"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Sparkline/Sparkline.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/StatsPicker/StatsPicker.story.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "2"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Table/BarGaugeCell.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Table/CellActions.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "1"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "2"]
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Table/DefaultCell.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||
@ -1583,9 +1547,7 @@ exports[`better eslint`] = {
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Table/HeaderRow.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "1"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "2"]
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Table/JSONViewCell.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||
@ -1607,11 +1569,10 @@ exports[`better eslint`] = {
|
||||
"packages/grafana-ui/src/components/Table/TableCell.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "1"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "2"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "3"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "4"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "5"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "6"]
|
||||
[0, 0, 0, "Do not use any type assertions.", "2"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "3"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "4"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "5"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Table/TableCellInspectModal.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
@ -1649,21 +1610,15 @@ exports[`better eslint`] = {
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "3"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "4"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "5"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "6"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "7"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "6"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "7"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "8"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "9"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "10"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "11"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "12"]
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "11"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Tags/Tag.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "1"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
@ -1671,28 +1626,12 @@ exports[`better eslint`] = {
|
||||
],
|
||||
"packages/grafana-ui/src/components/TimeSeries/TimeSeries.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "1"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "2"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "3"]
|
||||
[0, 0, 0, "Do not use any type assertions.", "1"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/TimeSeries/utils.ts:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "1"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "2"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "3"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Tooltip/Tooltip.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Tooltip/types.ts:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "2"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/VizLegend/types.ts:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
@ -1707,8 +1646,7 @@ exports[`better eslint`] = {
|
||||
],
|
||||
"packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "2"]
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/uPlot/Plot.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
@ -1770,10 +1708,6 @@ exports[`better eslint`] = {
|
||||
"packages/grafana-ui/src/options/builder/hideSeries.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||
],
|
||||
"packages/grafana-ui/src/options/builder/legend.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
|
||||
],
|
||||
"packages/grafana-ui/src/options/builder/stacking.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
],
|
||||
|
||||
@ -12,8 +12,7 @@ export const Link = forwardRef<HTMLAnchorElement, Props>(({ href, children, ...r
|
||||
const validUrl = locationUtil.stripBaseFromUrl(textUtil.sanitizeUrl(href ?? ''));
|
||||
|
||||
return (
|
||||
// @ts-ignore
|
||||
<RouterLink ref={ref as React.Ref<HTMLAnchorElement>} to={validUrl} {...rest}>
|
||||
<RouterLink ref={ref} to={validUrl} {...rest}>
|
||||
{children}
|
||||
</RouterLink>
|
||||
);
|
||||
|
||||
@ -6,7 +6,7 @@ import tinycolor from 'tinycolor2';
|
||||
import { InlineList } from './InlineList';
|
||||
import { List } from './List';
|
||||
|
||||
export default {
|
||||
const meta: Meta = {
|
||||
title: 'Layout/List',
|
||||
component: List,
|
||||
parameters: {
|
||||
@ -26,7 +26,9 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
const generateListItems = (numberOfItems: number) => {
|
||||
return [...new Array(numberOfItems)].map((item, i) => {
|
||||
|
||||
@ -135,7 +135,7 @@ export const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps
|
||||
}) => {
|
||||
const { commonStyles, logs } = useStyles2(getLogRowContextStyles);
|
||||
const [scrollTop, setScrollTop] = useState(0);
|
||||
const listContainerRef = useRef<HTMLDivElement>() as React.RefObject<HTMLDivElement>;
|
||||
const listContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
// We want to scroll to bottom only when we receive first 10 log lines
|
||||
|
||||
@ -151,7 +151,7 @@ export const LogRowContextProvider: React.FunctionComponent<LogRowContextProvide
|
||||
// React Hook that creates an object state value called result to component state and a setter function called setResult
|
||||
// The initial value for result is null
|
||||
// Used for sorting the response from backend
|
||||
const [result, setResult] = useState<ResultType>(null as any as ResultType);
|
||||
const [result, setResult] = useState<ResultType | null>(null);
|
||||
|
||||
// React Hook that creates an object state value called hasMoreContextRows to component state and a setter function called setHasMoreContextRows
|
||||
// The initial value for hasMoreContextRows is {before: true, after: true}
|
||||
@ -177,20 +177,22 @@ export const LogRowContextProvider: React.FunctionComponent<LogRowContextProvide
|
||||
let hasMoreLogsBefore = true,
|
||||
hasMoreLogsAfter = true;
|
||||
|
||||
const currentResultBefore = currentResult?.data[0];
|
||||
const currentResultAfter = currentResult?.data[1];
|
||||
const valueBefore = value.data[0];
|
||||
const valueAfter = value.data[1];
|
||||
if (currentResult) {
|
||||
const currentResultBefore = currentResult.data[0];
|
||||
const currentResultAfter = currentResult.data[1];
|
||||
const valueBefore = value.data[0];
|
||||
const valueAfter = value.data[1];
|
||||
|
||||
// checks if there are more log rows in a given direction
|
||||
// if after fetching additional rows the length of result is the same,
|
||||
// we can assume there are no logs in that direction within a given time range
|
||||
if (currentResult && (!valueBefore || currentResultBefore.length === valueBefore.length)) {
|
||||
hasMoreLogsBefore = false;
|
||||
}
|
||||
// checks if there are more log rows in a given direction
|
||||
// if after fetching additional rows the length of result is the same,
|
||||
// we can assume there are no logs in that direction within a given time range
|
||||
if (!valueBefore || currentResultBefore.length === valueBefore.length) {
|
||||
hasMoreLogsBefore = false;
|
||||
}
|
||||
|
||||
if (currentResult && (!valueAfter || currentResultAfter.length === valueAfter.length)) {
|
||||
hasMoreLogsAfter = false;
|
||||
if (!valueAfter || currentResultAfter.length === valueAfter.length) {
|
||||
hasMoreLogsAfter = false;
|
||||
}
|
||||
}
|
||||
|
||||
setHasMoreContextRows({
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import { RefObject, useEffect, useState } from 'react';
|
||||
import { useEffectOnce } from 'react-use';
|
||||
|
||||
import { MenuItemElement } from './MenuItem';
|
||||
|
||||
const modulo = (a: number, n: number) => ((a % n) + n) % n;
|
||||
const UNFOCUSED = -1;
|
||||
|
||||
@ -42,15 +40,19 @@ export const useMenuFocus = ({
|
||||
}, [isMenuOpen, openedWithArrow, setOpenedWithArrow]);
|
||||
|
||||
useEffect(() => {
|
||||
const menuItems = localRef?.current?.querySelectorAll(`[data-role="menuitem"]`);
|
||||
(menuItems?.[focusedItem] as MenuItemElement)?.focus();
|
||||
const menuItems = localRef?.current?.querySelectorAll<HTMLElement | HTMLButtonElement | HTMLAnchorElement>(
|
||||
`[data-role="menuitem"]`
|
||||
);
|
||||
menuItems?.[focusedItem]?.focus();
|
||||
menuItems?.forEach((menuItem, i) => {
|
||||
(menuItem as MenuItemElement).tabIndex = i === focusedItem ? 0 : -1;
|
||||
menuItem.tabIndex = i === focusedItem ? 0 : -1;
|
||||
});
|
||||
}, [localRef, focusedItem]);
|
||||
|
||||
useEffectOnce(() => {
|
||||
const firstMenuItem = localRef?.current?.querySelector(`[data-role="menuitem"]`) as MenuItemElement | null;
|
||||
const firstMenuItem = localRef?.current?.querySelector<HTMLElement | HTMLButtonElement | HTMLAnchorElement>(
|
||||
`[data-role="menuitem"]`
|
||||
);
|
||||
if (firstMenuItem) {
|
||||
firstMenuItem.tabIndex = 0;
|
||||
}
|
||||
@ -58,7 +60,9 @@ export const useMenuFocus = ({
|
||||
});
|
||||
|
||||
const handleKeys = (event: React.KeyboardEvent) => {
|
||||
const menuItems = localRef?.current?.querySelectorAll(`[data-role="menuitem"]`);
|
||||
const menuItems = localRef?.current?.querySelectorAll<HTMLElement | HTMLButtonElement | HTMLAnchorElement>(
|
||||
`[data-role="menuitem"]`
|
||||
);
|
||||
const menuItemsCount = menuItems?.length ?? 0;
|
||||
|
||||
switch (event.key) {
|
||||
@ -91,7 +95,7 @@ export const useMenuFocus = ({
|
||||
case 'Enter':
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
(menuItems?.[focusedItem] as MenuItemElement)?.click();
|
||||
menuItems?.[focusedItem]?.click();
|
||||
break;
|
||||
case 'Escape':
|
||||
event.preventDefault();
|
||||
|
||||
@ -4,7 +4,7 @@ import { debounce } from 'lodash';
|
||||
import React, { Context, PureComponent } from 'react';
|
||||
import { Value } from 'slate';
|
||||
import Plain from 'slate-plain-serializer';
|
||||
import { Editor, Plugin } from 'slate-react';
|
||||
import { Editor, EventHook, Plugin } from 'slate-react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
import { selectors } from '@grafana/e2e-selectors';
|
||||
@ -42,7 +42,7 @@ export interface QueryFieldProps extends Themeable2 {
|
||||
onBlur?: () => void;
|
||||
onChange?: (value: string) => void;
|
||||
onRichValueChange?: (value: Value) => void;
|
||||
onClick?: (event: Event | React.MouseEvent, editor: Editor, next: () => any) => any;
|
||||
onClick?: EventHook<React.MouseEvent<Element, MouseEvent>>;
|
||||
onTypeahead?: (typeahead: TypeaheadInput) => Promise<TypeaheadOutput>;
|
||||
onWillApplySuggestion?: (suggestion: string, state: SuggestionsState) => string;
|
||||
placeholder?: string;
|
||||
|
||||
@ -13,7 +13,7 @@ export const defaultIntervals = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '
|
||||
|
||||
export interface Props {
|
||||
intervals?: string[];
|
||||
onRefresh?: () => any;
|
||||
onRefresh?: () => void;
|
||||
onIntervalChanged: (interval: string) => void;
|
||||
value?: string;
|
||||
tooltip?: string;
|
||||
@ -50,8 +50,7 @@ export class RefreshPicker extends PureComponent<Props> {
|
||||
|
||||
onChangeSelect = (item: SelectableValue<string>) => {
|
||||
const { onIntervalChanged } = this.props;
|
||||
if (onIntervalChanged) {
|
||||
// @ts-ignore
|
||||
if (onIntervalChanged && item.value) {
|
||||
onIntervalChanged(item.value);
|
||||
}
|
||||
};
|
||||
@ -127,7 +126,7 @@ export class RefreshPicker extends PureComponent<Props> {
|
||||
<ButtonSelect
|
||||
value={selectedValue}
|
||||
options={options}
|
||||
onChange={this.onChangeSelect as any}
|
||||
onChange={this.onChangeSelect}
|
||||
variant={variant}
|
||||
title="Set auto refresh interval"
|
||||
data-testid={selectors.components.RefreshPicker.intervalButtonV2}
|
||||
|
||||
@ -5,7 +5,10 @@ import { SelectableOptGroup } from './types';
|
||||
/**
|
||||
* Normalize the value format to SelectableValue[] | []. Only used for single select
|
||||
*/
|
||||
export const cleanValue = (value: any, options: Array<SelectableValue | SelectableOptGroup | SelectableOptGroup[]>) => {
|
||||
export const cleanValue = (
|
||||
value: unknown,
|
||||
options: Array<SelectableValue | SelectableOptGroup | SelectableOptGroup[]>
|
||||
) => {
|
||||
if (Array.isArray(value)) {
|
||||
const filtered = value.filter(Boolean);
|
||||
return filtered?.length ? filtered : undefined;
|
||||
|
||||
@ -148,7 +148,7 @@ export class Sparkline extends PureComponent<SparklineProps, State> {
|
||||
|
||||
for (let i = 0; i < data.fields.length; i++) {
|
||||
const field = data.fields[i];
|
||||
const config = field.config as FieldConfig<GraphFieldConfig>;
|
||||
const config: FieldConfig<GraphFieldConfig> = field.config;
|
||||
const customConfig: GraphFieldConfig = {
|
||||
...defaultConfig,
|
||||
...config.custom,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { isFunction } from 'lodash';
|
||||
import React, { FC } from 'react';
|
||||
|
||||
import { ThresholdsConfig, ThresholdsMode, VizOrientation, getFieldConfigWithMinMax, LinkModel } from '@grafana/data';
|
||||
import { ThresholdsConfig, ThresholdsMode, VizOrientation, getFieldConfigWithMinMax } from '@grafana/data';
|
||||
|
||||
import { BarGauge, BarGaugeDisplayMode } from '../BarGauge/BarGauge';
|
||||
import { DataLinksContextMenu, DataLinksContextMenuApi } from '../DataLinks/DataLinksContextMenu';
|
||||
@ -44,7 +44,7 @@ export const BarGaugeCell: FC<TableCellProps> = (props) => {
|
||||
|
||||
const getLinks = () => {
|
||||
if (!isFunction(field.getLinks)) {
|
||||
return [] as LinkModel[];
|
||||
return [];
|
||||
}
|
||||
|
||||
return field.getLinks({ valueRowIndex: row.index });
|
||||
|
||||
@ -13,15 +13,20 @@ interface CellActionProps extends TableCellProps {
|
||||
previewMode: 'text' | 'code';
|
||||
}
|
||||
|
||||
interface CommonButtonProps {
|
||||
size: IconSize;
|
||||
tooltipPlacement: TooltipPlacement;
|
||||
}
|
||||
|
||||
export function CellActions({ field, cell, previewMode, onCellFilterAdded }: CellActionProps) {
|
||||
const [isInspecting, setIsInspecting] = useState(false);
|
||||
|
||||
const isRightAligned = getTextAlign(field) === 'flex-end';
|
||||
const showFilters = Boolean(field.config.filterable) && cell.value !== undefined;
|
||||
const inspectEnabled = Boolean((field.config.custom as TableFieldOptions)?.inspect);
|
||||
const commonButtonProps = {
|
||||
size: 'sm' as IconSize,
|
||||
tooltipPlacement: 'top' as TooltipPlacement,
|
||||
const commonButtonProps: CommonButtonProps = {
|
||||
size: 'sm',
|
||||
tooltipPlacement: 'top',
|
||||
};
|
||||
|
||||
const onFilterFor = useCallback(
|
||||
|
||||
@ -51,7 +51,7 @@ function renderHeaderCell(column: any, tableStyles: TableStyles, showTypeIcons?:
|
||||
}
|
||||
|
||||
headerProps.style.position = 'absolute';
|
||||
headerProps.style.justifyContent = (column as any).justifyContent;
|
||||
headerProps.style.justifyContent = column.justifyContent;
|
||||
|
||||
return (
|
||||
<div className={tableStyles.headerCell} {...headerProps} role="columnheader">
|
||||
|
||||
@ -15,7 +15,7 @@ export interface Props {
|
||||
|
||||
export const TableCell: FC<Props> = ({ cell, tableStyles, onCellFilterAdded, columnIndex, columnCount, userProps }) => {
|
||||
const cellProps = cell.getCellProps();
|
||||
const field = (cell.column as any as GrafanaTableColumn).field;
|
||||
const field = (cell.column as unknown as GrafanaTableColumn).field;
|
||||
|
||||
if (!field?.display) {
|
||||
return null;
|
||||
|
||||
@ -174,7 +174,7 @@ export function calculateUniqueFieldValues(rows: any[], field?: Field) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const set: Record<string, any> = {};
|
||||
const set: Record<string, string> = {};
|
||||
|
||||
for (let index = 0; index < rows.length; index++) {
|
||||
const value = rowToFieldValue(rows[index], field);
|
||||
|
||||
@ -11,7 +11,7 @@ import { Icon } from '../Icon/Icon';
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
export type OnTagClick = (name: string, event: React.MouseEvent<HTMLElement>) => any;
|
||||
export type OnTagClick = (name: string, event: React.MouseEvent<HTMLElement>) => void;
|
||||
|
||||
export interface Props extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
|
||||
/** Name of the tag to display */
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/** @jsxRuntime classic */
|
||||
/** @jsx jsx */
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { css, CSSInterpolation, cx } from '@emotion/css';
|
||||
import { jsx } from '@emotion/react';
|
||||
import classnames from 'classnames';
|
||||
import { Profiler, ProfilerOnRenderCallback, useState, FC } from 'react';
|
||||
@ -174,7 +174,7 @@ const getStylesObjects = (theme: GrafanaTheme2) => {
|
||||
};
|
||||
};
|
||||
|
||||
function getStylesObjectMain(theme: GrafanaTheme2): any {
|
||||
function getStylesObjectMain(theme: GrafanaTheme2): CSSInterpolation {
|
||||
return {
|
||||
background: 'blue',
|
||||
border: '1px solid red',
|
||||
@ -187,7 +187,7 @@ function getStylesObjectMain(theme: GrafanaTheme2): any {
|
||||
};
|
||||
}
|
||||
|
||||
function getStylesObjectChild(theme: GrafanaTheme2): any {
|
||||
function getStylesObjectChild(theme: GrafanaTheme2): CSSInterpolation {
|
||||
return {
|
||||
padding: '2px',
|
||||
fontSize: '10px',
|
||||
|
||||
@ -53,7 +53,7 @@ export class UnthemedTimeSeries extends Component<TimeSeriesProps> {
|
||||
{...this.props}
|
||||
prepConfig={this.prepConfig}
|
||||
propsToDiff={propsToDiff}
|
||||
renderLegend={this.renderLegend as any}
|
||||
renderLegend={this.renderLegend}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -173,13 +173,13 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{
|
||||
for (let i = 1; i < frame.fields.length; i++) {
|
||||
const field = frame.fields[i];
|
||||
|
||||
const config = {
|
||||
const config: FieldConfig<GraphFieldConfig> = {
|
||||
...field.config,
|
||||
custom: {
|
||||
...defaultConfig,
|
||||
...field.config.custom,
|
||||
},
|
||||
} as FieldConfig<GraphFieldConfig>;
|
||||
};
|
||||
|
||||
const customConfig: GraphFieldConfig = config.custom!;
|
||||
|
||||
|
||||
@ -66,8 +66,9 @@ export const Tooltip = React.memo(({ children, theme, interactive, show, placeme
|
||||
{typeof content === 'string' && content}
|
||||
{React.isValidElement(content) && React.cloneElement(content)}
|
||||
{typeof content === 'function' &&
|
||||
update &&
|
||||
content({
|
||||
updatePopperPosition: update as any,
|
||||
updatePopperPosition: update,
|
||||
})}
|
||||
</div>
|
||||
</Portal>
|
||||
|
||||
@ -7,7 +7,7 @@ export interface PopoverContentProps {
|
||||
updatePopperPosition?: () => void;
|
||||
}
|
||||
|
||||
export type PopoverContent = string | React.ReactElement<any> | ((props: PopoverContentProps) => JSX.Element);
|
||||
export type PopoverContent = string | React.ReactElement | ((props: PopoverContentProps) => JSX.Element);
|
||||
|
||||
export type TooltipPlacement =
|
||||
| 'auto-start'
|
||||
|
||||
@ -29,7 +29,7 @@ export class UnitPicker extends PureComponent<UnitPickerProps> {
|
||||
const unitGroups = getValueFormats();
|
||||
|
||||
// Need to transform the data structure to work well with Select
|
||||
const groupOptions = unitGroups.map((group) => {
|
||||
const groupOptions: CascaderOption[] = unitGroups.map((group) => {
|
||||
const options = group.submenu.map((unit) => {
|
||||
const sel = {
|
||||
label: unit.text,
|
||||
@ -60,7 +60,7 @@ export class UnitPicker extends PureComponent<UnitPickerProps> {
|
||||
allowCustomValue
|
||||
changeOnSelect={false}
|
||||
formatCreateLabel={formatCreateLabel}
|
||||
options={groupOptions as CascaderOption[]}
|
||||
options={groupOptions}
|
||||
placeholder="Choose"
|
||||
onSelect={this.props.onChange}
|
||||
/>
|
||||
|
||||
@ -22,7 +22,7 @@ export interface Props<T> {
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
export const VizLegendListItem = <T extends unknown = any>({
|
||||
export const VizLegendListItem = <T = unknown,>({
|
||||
item,
|
||||
onLabelClick,
|
||||
onLabelMouseEnter,
|
||||
|
||||
@ -31,7 +31,7 @@ export interface VizTooltipContentProps<T extends Dimensions = any> {
|
||||
|
||||
export interface VizTooltipProps {
|
||||
/** Element used as tooltips content */
|
||||
content?: React.ReactElement<any>;
|
||||
content?: React.ReactElement;
|
||||
|
||||
/** Optional component to be used as a tooltip content */
|
||||
tooltipComponent?: React.ComponentType<VizTooltipContentProps>;
|
||||
|
||||
@ -61,7 +61,7 @@ export function addLegendOptions<T extends OptionsWithLegend>(
|
||||
name: 'Values',
|
||||
category: ['Legend'],
|
||||
description: 'Select values or calculations to show in legend',
|
||||
editor: standardEditorsRegistry.get('stats-picker').editor as any,
|
||||
editor: standardEditorsRegistry.get('stats-picker').editor,
|
||||
defaultValue: [],
|
||||
settings: {
|
||||
allowMultiple: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user