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

Revert: Query editor components from grafana-ui (#57436)

Browse Source 
* Revert: QueryEditor components from grafana-ui

* Use local version of experimental

* Use experimental for query editor components

* Fix type issues in MSSQL

* point to actual version of experimental package

* point to latest version of experimental

Co-authored-by: Erik Sundell <erik.sundell87@gmail.com>
This commit is contained in:
Zoltán Bedi
2022-10-24 17:12:36 +02:00
committed by GitHub
parent 3cbbf706cf
commit c0b778134e
128 changed files with 212 additions and 727 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -255,7 +255,7 @@
"@grafana/aws-sdk": "0.0.37",
"@grafana/data": "workspace:*",
"@grafana/e2e-selectors": "workspace:*",
"@grafana/experimental": "^0.0.2-canary.36",
"@grafana/experimental": "1.0.1",
"@grafana/google-sdk": "0.0.3",
"@grafana/lezer-logql": "0.1.1",
"@grafana/monaco-logql": "^0.0.6",

23
packages/grafana-ui/src/components/QueryEditor/AccessoryButton.tsx
View File

@@ -1,23 +0,0 @@
import { css, cx } from '@emotion/css';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useTheme2, stylesFactory } from '../../themes';
import { Button, ButtonProps } from '../Button';
interface AccessoryButtonProps extends ButtonProps {}
export const AccessoryButton: React.FC<AccessoryButtonProps> = ({ className, ...props }) => {
const theme = useTheme2();
const styles = getButtonStyles(theme);
return <Button {...props} className={cx(className, styles.button)} />;
};
const getButtonStyles = stylesFactory((theme: GrafanaTheme2) => ({
button: css({
paddingLeft: theme.spacing(3 / 2),
paddingRight: theme.spacing(3 / 2),
}),
}));

80
packages/grafana-ui/src/components/QueryEditor/EditorField.tsx
View File

@@ -1,80 +0,0 @@
import { css } from '@emotion/css';
import React, { ComponentProps } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { stylesFactory, useTheme2 } from '../../themes';
import { ReactUtils } from '../../utils';
import { Field } from '../Forms/Field';
import { Icon } from '../Icon/Icon';
import { PopoverContent, Tooltip } from '../Tooltip';
import { Space } from './Space';
interface EditorFieldProps extends ComponentProps<typeof Field> {
label: string;
children: React.ReactElement;
width?: number | string;
optional?: boolean;
tooltip?: PopoverContent;
tooltipInteractive?: boolean;
}
export const EditorField: React.FC<EditorFieldProps> = (props) => {
const { label, optional, tooltip, tooltipInteractive, children, width, ...fieldProps } = props;
const theme = useTheme2();
const styles = getStyles(theme, width);
// Null check for backward compatibility
const childInputId = fieldProps?.htmlFor || ReactUtils?.getChildId(children);
const labelEl = (
<>
<label className={styles.label} htmlFor={childInputId}>
{label}
{optional && <span className={styles.optional}> - optional</span>}
{tooltip && (
<Tooltip placement="top" content={tooltip} theme="info" interactive={tooltipInteractive}>
<Icon name="info-circle" size="sm" className={styles.icon} />
</Tooltip>
)}
</label>
<Space v={0.5} />
</>
);
return (
<div className={styles.root}>
<Field className={styles.field} label={labelEl} {...fieldProps}>
{children}
</Field>
</div>
);
};
const getStyles = stylesFactory((theme: GrafanaTheme2, width?: number | string) => {
return {
root: css({
minWidth: theme.spacing(width ?? 0),
}),
label: css({
fontSize: 12,
fontWeight: theme.typography.fontWeightMedium,
}),
optional: css({
fontStyle: 'italic',
color: theme.colors.text.secondary,
}),
field: css({
marginBottom: 0, // GrafanaUI/Field has a bottom margin which we must remove
}),
icon: css({
color: theme.colors.text.secondary,
marginLeft: theme.spacing(1),
':hover': {
color: theme.colors.text.primary,
},
}),
};
});

9
packages/grafana-ui/src/components/QueryEditor/EditorFieldGroup.tsx
View File

@@ -1,9 +0,0 @@
import React from 'react';
import { Stack } from './Stack';
interface EditorFieldGroupProps {}
export const EditorFieldGroup = ({ children }: React.PropsWithChildren<EditorFieldGroupProps>) => {
return <Stack gap={1}>{children}</Stack>;
};

25
packages/grafana-ui/src/components/QueryEditor/EditorHeader.tsx
View File

@@ -1,25 +0,0 @@
import { css } from '@emotion/css';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { stylesFactory, useTheme2 } from '../../themes';
interface EditorHeaderProps {}
export const EditorHeader = ({ children }: React.PropsWithChildren<EditorHeaderProps>) => {
const theme = useTheme2();
const styles = getStyles(theme);
return <div className={styles.root}>{children}</div>;
};
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
root: css({
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
gap: theme.spacing(3),
minHeight: theme.spacing(4),
}),
}));

49
packages/grafana-ui/src/components/QueryEditor/EditorList.tsx
View File

@@ -1,49 +0,0 @@
import React from 'react';
import { Button } from '../Button';
import { Stack } from './Stack';
interface EditorListProps<T> {
items: Array<Partial<T>>;
renderItem: (
item: Partial<T>,
onChangeItem: (item: Partial<T>) => void,
onDeleteItem: () => void
) => React.ReactElement;
onChange: (items: Array<Partial<T>>) => void;
}
export function EditorList<T>({ items, renderItem, onChange }: EditorListProps<T>) {
const onAddItem = () => {
const newItems = [...items, {}];
onChange(newItems);
};
const onChangeItem = (itemIndex: number, newItem: Partial<T>) => {
const newItems = [...items];
newItems[itemIndex] = newItem;
onChange(newItems);
};
const onDeleteItem = (itemIndex: number) => {
const newItems = [...items];
newItems.splice(itemIndex, 1);
onChange(newItems);
};
return (
<Stack>
{items.map((item, index) => (
<div key={index}>
{renderItem(
item,
(newItem) => onChangeItem(index, newItem),
() => onDeleteItem(index)
)}
</div>
))}
<Button onClick={onAddItem} variant="secondary" size="md" icon="plus" aria-label="Add" type="button" />
</Stack>
);
}

30
packages/grafana-ui/src/components/QueryEditor/EditorRow.tsx
View File

@@ -1,30 +0,0 @@
import { css } from '@emotion/css';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '../../themes';
import { Stack } from './Stack';
interface EditorRowProps {}
export const EditorRow = ({ children }: React.PropsWithChildren<EditorRowProps>) => {
const styles = useStyles2(getStyles);
return (
<div className={styles.root}>
<Stack gap={2}>{children}</Stack>
</div>
);
};
const getStyles = (theme: GrafanaTheme2) => {
return {
root: css({
padding: theme.spacing(1),
backgroundColor: theme.colors.background.secondary,
borderRadius: theme.shape.borderRadius(1),
}),
};
};

13
packages/grafana-ui/src/components/QueryEditor/EditorRows.tsx
View File

@@ -1,13 +0,0 @@
import React from 'react';
import { Stack } from './Stack';
interface EditorRowsProps {}
export const EditorRows = ({ children }: React.PropsWithChildren<EditorRowsProps>) => {
return (
<Stack gap={0.5} direction="column">
{children}
</Stack>
);
};

25
packages/grafana-ui/src/components/QueryEditor/EditorSwitch.tsx
View File

@@ -1,25 +0,0 @@
import { css } from '@emotion/css';
import React, { ComponentProps } from 'react';
import { Switch } from '../Switch/Switch';
// Wrapper component around <Switch /> that properly aligns it in <EditorField />
export const EditorSwitch: React.FC<ComponentProps<typeof Switch>> = (props) => {
const styles = getStyles();
return (
<div className={styles.switch}>
<Switch {...props} />
</div>
);
};
const getStyles = () => {
return {
switch: css({
display: 'flex',
alignItems: 'center',
minHeight: 30,
}),
};
};

10
packages/grafana-ui/src/components/QueryEditor/FlexItem.tsx
View File

@@ -1,10 +0,0 @@
import React from 'react';
interface FlexItemProps {
grow?: number;
shrink?: number;
}
export const FlexItem: React.FC<FlexItemProps> = ({ grow, shrink }) => {
return <div style={{ display: 'block', flexGrow: grow, flexShrink: shrink }} />;
};

89
packages/grafana-ui/src/components/QueryEditor/InlineSelect.tsx
View File

@@ -1,89 +0,0 @@
import { css, cx } from '@emotion/css';
import React, { useState } from 'react';
import { GroupBase } from 'react-select';
import { GrafanaTheme2 } from '@grafana/data';
import { stylesFactory, useTheme2 } from '../../themes';
import { Select } from '../Select/Select';
import { SelectContainerProps, SelectContainer as BaseSelectContainer } from '../Select/SelectContainer';
import { SelectCommonProps } from '../Select/types';
interface InlineSelectProps<T> extends SelectCommonProps<T> {
label?: string;
}
export function InlineSelect<T>({ label: labelProp, ...props }: InlineSelectProps<T>) {
const theme = useTheme2();
const [id] = useState(() => Math.random().toString(16).slice(2));
const styles = getSelectStyles(theme);
const components = {
SelectContainer,
ValueContainer,
SingleValue: ValueContainer,
};
return (
<div className={styles.root}>
{labelProp && (
<label className={styles.label} htmlFor={id}>
{labelProp}
{':'}&nbsp;
</label>
)}
{/* @ts-ignore */}
<Select openMenuOnFocus inputId={id} {...props} components={components} />
</div>
);
}
const SelectContainer = <Option, isMulti extends boolean, Group extends GroupBase<Option>>(
props: SelectContainerProps<Option, isMulti, Group>
) => {
const { children } = props;
const theme = useTheme2();
const styles = getSelectStyles(theme);
return (
<BaseSelectContainer {...props} className={cx(props.className, styles.container)}>
{children}
</BaseSelectContainer>
);
};
const ValueContainer = <Option, isMulti extends boolean, Group extends GroupBase<Option>>(
props: SelectContainerProps<Option, isMulti, Group>
) => {
const { className, children } = props;
const theme = useTheme2();
const styles = getSelectStyles(theme);
return <div className={cx(className, styles.valueContainer)}>{children}</div>;
};
const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => ({
root: css({
display: 'flex',
fontSize: 12,
alignItems: 'center',
}),
label: css({
color: theme.colors.text.secondary,
whiteSpace: 'nowrap',
}),
container: css({
background: 'none',
borderColor: 'transparent',
}),
valueContainer: css({
display: 'flex',
alignItems: 'center',
flex: 'initial',
color: theme.colors.text.secondary,
fontSize: 12,
}),
}));

65
packages/grafana-ui/src/components/QueryEditor/InputGroup.story.internal.tsx
View File

@@ -1,65 +0,0 @@
import { ComponentMeta } from '@storybook/react';
import React from 'react';
import { Stack } from '..';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { Input } from '../Input/Input';
import { Select } from '../Select/Select';
import { AccessoryButton } from './AccessoryButton';
import { InputGroup } from './InputGroup';
const meta: ComponentMeta<typeof InputGroup> = {
title: 'Experimental/InputGroup',
component: InputGroup,
decorators: [withCenteredStory],
};
export function WithTextInputs() {
return (
<InputGroup>
<Input placeholder="One" />
<Input placeholder="Two" />
</InputGroup>
);
}
export function WithAccessoryButton() {
return (
<InputGroup>
<Select value={selectOptions[0]} options={selectOptions} onChange={() => {}} />
<AccessoryButton aria-label="Remove group by column" icon="times" variant="secondary" />
</InputGroup>
);
}
export function WithSelectsAndInput() {
return (
<Stack direction="column">
<InputGroup>
<Input invalid placeholder="LHS" />
<Select value={comparitorOptions[0]} options={comparitorOptions} onChange={() => {}} />
<Input placeholder="RHS" />
</InputGroup>
<InputGroup>
<Input placeholder="LHS" />
<Select invalid value={comparitorOptions[0]} options={comparitorOptions} onChange={() => {}} />
<Input placeholder="RHS" />
</InputGroup>
<InputGroup>
<Input placeholder="LHS" />
<Select value={comparitorOptions[0]} options={comparitorOptions} onChange={() => {}} />
<Input invalid placeholder="RHS" />
</InputGroup>
</Stack>
);
}
const selectOptions = [{ label: 'Prometheus', value: 1 }];
const comparitorOptions = [
{ label: '=', value: 1 },
{ label: '<', value: 2 },
{ label: '>', value: 3 },
];
export default meta;

80
packages/grafana-ui/src/components/QueryEditor/InputGroup.tsx
View File

@@ -1,80 +0,0 @@
import { css, cx } from '@emotion/css';
import React, { Children, cloneElement, isValidElement, ReactElement } from 'react';
import { useStyles2 } from '../../themes';
type Child = string | undefined | ReactElement<{ className?: string; invalid?: unknown }>;
interface InputGroupProps {
// we type the children props so we can test them later on
children: Child | Child[];
}
export const InputGroup = ({ children }: InputGroupProps) => {
const styles = useStyles2(getStyles);
// Find children with an invalid prop, and set a class name to raise their z-index so all
// of the invalid border is visible
const modifiedChildren = Children.map(children, (child) => {
if (isValidElement(child) && child.props.invalid) {
return cloneElement(child, { className: cx(child.props.className, styles.invalidChild) });
}
return child;
});
return <div className={styles.root}>{modifiedChildren}</div>;
};
// The later in the array the higher the priority for showing that element's border
const borderPriority = [
'' as const, // lowest priority
'base' as const,
'hovered' as const,
'invalid' as const,
'focused' as const, // highest priority
];
const getStyles = () => ({
root: css({
display: 'flex',
// Style the direct children of the component
'> *': {
'&:not(:first-child)': {
// Negative margin hides the double-border on adjacent selects
marginLeft: -1,
},
'&:first-child': {
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
},
'&:last-child': {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
},
'&:not(:first-child):not(:last-child)': {
borderRadius: 0,
},
//
position: 'relative',
zIndex: borderPriority.indexOf('base'),
// Adjacent borders are overlapping, so raise children up when hovering etc
// so all that child's borders are visible.
'&:hover': {
zIndex: borderPriority.indexOf('hovered'),
},
'&:focus-within': {
zIndex: borderPriority.indexOf('focused'),
},
},
}),
invalidChild: css({
zIndex: borderPriority.indexOf('invalid'),
}),
});

40
packages/grafana-ui/src/components/QueryEditor/Space.tsx
View File

@@ -1,40 +0,0 @@
import { css, cx } from '@emotion/css';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { stylesFactory, useTheme2 } from '../../themes';
export interface SpaceProps {
v?: number;
h?: number;
layout?: 'block' | 'inline';
}
export const Space = (props: SpaceProps) => {
const theme = useTheme2();
const styles = getStyles(theme, props);
return <span className={cx(styles.wrapper)} />;
};
Space.defaultProps = {
v: 0,
h: 0,
layout: 'block',
};
const getStyles = stylesFactory((theme: GrafanaTheme2, props: SpaceProps) => ({
wrapper: css([
{
paddingRight: theme.spacing(props.h ?? 0),
paddingBottom: theme.spacing(props.v ?? 0),
},
props.layout === 'inline' && {
display: 'inline-block',
},
props.layout === 'block' && {
display: 'block',
},
]),
}));

31
packages/grafana-ui/src/components/QueryEditor/Stack.tsx
View File

@@ -1,31 +0,0 @@
import { css } from '@emotion/css';
import React, { CSSProperties, useCallback } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '../../themes';
interface StackProps {
direction?: CSSProperties['flexDirection'];
alignItems?: CSSProperties['alignItems'];
wrap?: boolean;
gap?: number;
flexGrow?: CSSProperties['flexGrow'];
}
export const Stack = ({ children, ...props }: React.PropsWithChildren<StackProps>) => {
const styles = useStyles2(useCallback((theme) => getStyles(theme, props), [props]));
return <div className={styles.root}>{children}</div>;
};
const getStyles = (theme: GrafanaTheme2, props: StackProps) => ({
root: css({
display: 'flex',
flexDirection: props.direction ?? 'row',
flexWrap: props.wrap ?? true ? 'wrap' : undefined,
alignItems: props.alignItems,
gap: theme.spacing(props.gap ?? 2),
flexGrow: props.flexGrow,
}),
});

13
packages/grafana-ui/src/components/QueryEditor/index.ts
View File

@@ -1,13 +0,0 @@
export { AccessoryButton } from './AccessoryButton';
export { EditorFieldGroup } from './EditorFieldGroup';
export { EditorHeader } from './EditorHeader';
export { EditorField } from './EditorField';
export { EditorRow } from './EditorRow';
export { EditorList } from './EditorList';
export { EditorRows } from './EditorRows';
export { EditorSwitch } from './EditorSwitch';
export { FlexItem } from './FlexItem';
export { Stack } from './Stack';
export { InlineSelect } from './InlineSelect';
export { InputGroup } from './InputGroup';
export { Space } from './Space';

1
packages/grafana-ui/src/components/index.ts
View File

@@ -276,4 +276,3 @@ export { type GraphNGLegendEvent } from './GraphNG/types';
export * from './PanelChrome/types';
export { Label as BrowserLabel } from './BrowserLabel/Label';
export { PanelContainer } from './PanelContainer/PanelContainer';
export * from './QueryEditor';

3
public/app/features/alerting/unified/AlertsFolderView.tsx
View File

@@ -4,7 +4,8 @@ import React, { useEffect, useState } from 'react';
import { useDebounce } from 'react-use';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Card, FilterInput, Icon, Pagination, Select, Stack, TagList, useStyles2 } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { Card, FilterInput, Icon, Pagination, Select, TagList, useStyles2 } from '@grafana/ui';
import { DEFAULT_PER_PAGE_PAGINATION } from 'app/core/constants';
import { getQueryParamValue } from 'app/core/utils/query';
import { FolderState, useDispatch } from 'app/types';

3
public/app/features/alerting/unified/Receivers.tsx
View File

@@ -4,7 +4,8 @@ import React, { useEffect } from 'react';
import { Redirect, Route, RouteChildrenProps, Switch, useLocation, useParams } from 'react-router-dom';
import { NavModelItem, GrafanaTheme2 } from '@grafana/data';
import { Alert, LoadingPlaceholder, withErrorBoundary, useStyles2, Icon, Stack } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { Alert, LoadingPlaceholder, withErrorBoundary, useStyles2, Icon } from '@grafana/ui';
import { useDispatch } from 'app/types';
import { ContactPointsState } from '../../../types';

3
public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx
View File

@@ -3,8 +3,9 @@ import { debounce } from 'lodash';
import React, { FormEvent } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Stack } from '@grafana/experimental';
import { logInfo } from '@grafana/runtime';
import { Label, Tooltip, Input, Icon, useStyles2, Stack } from '@grafana/ui';
import { Label, Tooltip, Input, Icon, useStyles2 } from '@grafana/ui';
import { LogMessages } from '../../Analytics';

3
public/app/features/alerting/unified/components/expressions/Expression.tsx
View File

@@ -4,7 +4,8 @@ import React, { FC, useCallback, useState } from 'react';
import { DataFrame, dateTimeFormat, GrafanaTheme2, LoadingState, PanelData } from '@grafana/data';
import { isTimeSeries } from '@grafana/data/src/dataframe/utils';
import { AutoSizeInput, Icon, IconButton, Select, Stack, useStyles2 } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { AutoSizeInput, Icon, IconButton, Select, useStyles2 } from '@grafana/ui';
import { ClassicConditions } from 'app/features/expressions/components/ClassicConditions';
import { Math } from 'app/features/expressions/components/Math';
import { Reduce } from 'app/features/expressions/components/Reduce';

3
public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
View File

@@ -3,7 +3,8 @@ import pluralize from 'pluralize';
import React, { FC, useMemo, useState } from 'react';
import { GrafanaTheme2, dateTime, dateTimeFormat } from '@grafana/data';
import { Button, ConfirmModal, Modal, useStyles2, Badge, Icon, Stack } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { Button, ConfirmModal, Modal, useStyles2, Badge, Icon } from '@grafana/ui';
import { contextSrv } from 'app/core/services/context_srv';
import { AlertManagerCortexConfig, Receiver } from 'app/plugins/datasource/alertmanager/types';
import { useDispatch, AccessControlAction, ContactPointsState, NotifiersState, ReceiversState } from 'app/types';

3
public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx
View File

@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Stack, useStyles2 } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { useStyles2 } from '@grafana/ui';
import { HoverCard } from '../HoverCard';

3
public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
View File

@@ -4,7 +4,8 @@ import { useForm, Validate } from 'react-hook-form';
import AutoSizer from 'react-virtualized-auto-sizer';
import { GrafanaTheme2 } from '@grafana/data';
import { Alert, Button, Field, FieldSet, Input, LinkButton, Stack, useStyles2 } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { Alert, Button, Field, FieldSet, Input, LinkButton, useStyles2 } from '@grafana/ui';
import { useCleanup } from 'app/core/hooks/useCleanup';
import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
import { useDispatch } from 'app/types';

3
public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
View File

@@ -4,7 +4,8 @@ import React, { useCallback } from 'react';
import { useFormContext } from 'react-hook-form';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2, Field, Input, InputControl, Label, Tooltip, Icon, Stack } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { useStyles2, Field, Input, InputControl, Label, Tooltip, Icon } from '@grafana/ui';
import { FolderPickerFilter } from 'app/core/components/Select/FolderPicker';
import { contextSrv } from 'app/core/services/context_srv';
import { DashboardSearchHit } from 'app/features/search/types';

2
public/app/features/alerting/unified/components/rule-editor/ExpressionsEditor.tsx
View File

@@ -1,7 +1,7 @@
import React, { FC, useMemo } from 'react';
import { PanelData } from '@grafana/data';
import { Stack } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { isExpressionQuery } from 'app/features/expressions/guards';
import { ExpressionQuery, ExpressionQueryType } from 'app/features/expressions/types';
import { AlertQuery } from 'app/types/unified-alerting-dto';

3
public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
View File

@@ -13,7 +13,8 @@ import {
RelativeTimeRange,
ThresholdsConfig,
} from '@grafana/data';
import { RelativeTimeRangePicker, useStyles2, Tooltip, Icon, Stack } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { RelativeTimeRangePicker, useStyles2, Tooltip, Icon } from '@grafana/ui';
import { isExpressionQuery } from 'app/features/expressions/guards';
import { QueryEditorRow } from 'app/features/query/components/QueryEditorRow';
import { AlertQuery } from 'app/types/unified-alerting-dto';

3
public/app/features/alerting/unified/components/rule-editor/RuleFolderPicker.tsx
View File

@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Icon, Stack, Tooltip, useStyles2 } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { Icon, Tooltip, useStyles2 } from '@grafana/ui';
import { FolderPicker, Props as FolderPickerProps } from 'app/core/components/Select/FolderPicker';
import { PermissionLevelString } from 'app/types';

3
public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx
View File

@@ -3,8 +3,9 @@ import { useFormContext } from 'react-hook-form';
import { LoadingState, PanelData } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { Stack } from '@grafana/experimental';
import { config } from '@grafana/runtime';
import { Alert, Button, Field, InputControl, Stack, Tooltip } from '@grafana/ui';
import { Alert, Button, Field, InputControl, Tooltip } from '@grafana/ui';
import { isExpressionQuery } from 'app/features/expressions/guards';
import { AlertQuery } from 'app/types/unified-alerting-dto';

3
public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx
View File

@@ -3,7 +3,8 @@ import { isEmpty } from 'lodash';
import React, { FC } from 'react';
import { GrafanaTheme2 } from '@grafana/data/src';
import { Stack, useStyles2 } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { useStyles2 } from '@grafana/ui';
import { useRulesSourcesWithRuler } from '../../../hooks/useRuleSourcesWithRuler';
import { RuleFormType } from '../../../types/rule-form';

3
public/app/features/alerting/unified/components/rules/RulesFilter.tsx
View File

@@ -3,8 +3,9 @@ import { debounce } from 'lodash';
import React, { FormEvent, useState } from 'react';
import { DataSourceInstanceSettings, GrafanaTheme, SelectableValue } from '@grafana/data';
import { Stack } from '@grafana/experimental';
import { DataSourcePicker, logInfo } from '@grafana/runtime';
import { Button, Field, Icon, Input, Label, RadioButtonGroup, Stack, Tooltip, useStyles } from '@grafana/ui';
import { Button, Field, Icon, Input, Label, RadioButtonGroup, Tooltip, useStyles } from '@grafana/ui';
import { useQueryParams } from 'app/core/hooks/useQueryParams';
import { PromAlertingRuleState, PromRuleType } from 'app/types/unified-alerting-dto';

3
public/app/features/alerting/unified/components/rules/StateHistory.tsx
View File

@@ -3,7 +3,8 @@ import { groupBy } from 'lodash';
import React, { FC, FormEvent, useCallback, useState } from 'react';
import { AlertState, dateTimeFormat, GrafanaTheme2 } from '@grafana/data';
import { Alert, Field, Icon, Input, Label, LoadingPlaceholder, Stack, Tooltip, useStyles2 } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { Alert, Field, Icon, Input, Label, LoadingPlaceholder, Tooltip, useStyles2 } from '@grafana/ui';
import { StateHistoryItem, StateHistoryItemData } from 'app/types/unified-alerting';
import { GrafanaAlertStateWithReason, PromAlertingRuleState } from 'app/types/unified-alerting-dto';

3
public/app/features/alerting/unified/components/silences/SilencesFilter.tsx
View File

@@ -3,7 +3,8 @@ import { debounce, uniqueId } from 'lodash';
import React, { FormEvent, useState } from 'react';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Label, Icon, Input, Tooltip, RadioButtonGroup, useStyles2, Button, Field, Stack } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { Label, Icon, Input, Tooltip, RadioButtonGroup, useStyles2, Button, Field } from '@grafana/ui';
import { useQueryParams } from 'app/core/hooks/useQueryParams';
import { SilenceState } from 'app/plugins/datasource/alertmanager/types';

3
public/app/features/alerting/unified/components/silences/SilencesTable.tsx
View File

@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
import React, { FC, useMemo } from 'react';
import { GrafanaTheme2, dateMath } from '@grafana/data';
import { Icon, useStyles2, Link, Button, Stack } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { Icon, useStyles2, Link, Button } from '@grafana/ui';
import { useQueryParams } from 'app/core/hooks/useQueryParams';
import { contextSrv } from 'app/core/services/context_srv';
import { AlertmanagerAlert, Silence, SilenceState } from 'app/plugins/datasource/alertmanager/types';

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

@@ -3,8 +3,9 @@ import { useAsync } from 'react-use';
import { AnnotationQuery, DataSourceInstanceSettings, getDataSourceRef } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { Stack } from '@grafana/experimental';
import { DataSourcePicker, getDataSourceSrv, locationService } from '@grafana/runtime';
import { Button, Checkbox, Field, FieldSet, HorizontalGroup, Input, Stack } from '@grafana/ui';
import { Button, Checkbox, Field, FieldSet, HorizontalGroup, Input } from '@grafana/ui';
import { ColorValueEditor } from 'app/core/components/OptionsUI/color';
import StandardAnnotationQueryEditor from 'app/features/annotations/components/StandardAnnotationQueryEditor';

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

@@ -3,6 +3,7 @@ import React, { useMemo, useEffect } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import { PanelPlugin, GrafanaTheme2, FeatureState } from '@grafana/data';
import { Stack } from '@grafana/experimental';
import { config } from '@grafana/runtime';
import {
Drawer,
@@ -19,7 +20,6 @@ import {
FeatureBadge,
Select,
ClipboardButton,
Stack,
Icon,
} from '@grafana/ui';
import { contextSrv } from 'app/core/services/context_srv';

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

@@ -6,6 +6,7 @@ import { Subscription } from 'rxjs';
import { FieldConfigSource, GrafanaTheme2, NavModel, NavModelItem, PageLayoutType } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { Stack } from '@grafana/experimental';
import { config, locationService } from '@grafana/runtime';
import {
Button,
@@ -14,7 +15,6 @@ import {
ModalsController,
PageToolbar,
RadioButtonGroup,
Stack,
stylesFactory,
Themeable2,
ToolbarButton,

3
public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
View File

@@ -1,7 +1,8 @@
import React, { useMemo, useState } from 'react';
import { selectors } from '@grafana/e2e-selectors';
import { Button, Checkbox, Form, Stack, TextArea } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { Button, Checkbox, Form, TextArea } from '@grafana/ui';
import { DashboardModel } from 'app/features/dashboard/state';
import { SaveDashboardData, SaveDashboardOptions } from '../types';

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

@@ -3,7 +3,8 @@ import { saveAs } from 'file-saver';
import React, { useCallback, useState } from 'react';
import { GrafanaTheme } from '@grafana/data';
import { Button, ClipboardButton, HorizontalGroup, Stack, stylesFactory, TextArea, useTheme } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { Button, ClipboardButton, HorizontalGroup, stylesFactory, TextArea, useTheme } from '@grafana/ui';
import { SaveDashboardFormProps } from '../types';

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

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from 'react';
import { useAsync } from 'react-use';
import { selectors } from '@grafana/e2e-selectors';
import { Stack } from '@grafana/experimental';
import { locationService } from '@grafana/runtime';
import {
Button,
@@ -12,7 +13,6 @@ import {
Input,
RadioButtonGroup,
Spinner,
Stack,
TextArea,
} from '@grafana/ui';
import { getGrafanaStorage } from 'app/features/storage/storage';

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

@@ -1,6 +1,7 @@
import React from 'react';
import { Tooltip, Button, Stack } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { Tooltip, Button } from '@grafana/ui';
type VersionsButtonsType = {
hasMore: boolean;

3
public/app/features/expressions/components/Condition.tsx
View File

@@ -2,7 +2,8 @@ import { css, cx } from '@emotion/css';
import React, { FC, FormEvent } from 'react';
import { GrafanaTheme, SelectableValue } from '@grafana/data';
import { Button, ButtonSelect, Icon, InlineFieldRow, Input, Select, Stack, useStyles } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { Button, ButtonSelect, Icon, InlineFieldRow, Input, Select, useStyles } from '@grafana/ui';
import alertDef, { EvalFunction } from '../../alerting/state/alertDef';
import { ClassicCondition, ReducerType } from '../types';

3
public/app/features/expressions/components/Math.tsx
View File

@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
import React, { ChangeEvent, FC } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Icon, InlineField, InlineLabel, Stack, TextArea, useStyles2 } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { Icon, InlineField, InlineLabel, TextArea, useStyles2 } from '@grafana/ui';
import { HoverCard } from 'app/features/alerting/unified/components/HoverCard';
import { ExpressionQuery } from '../types';

3
public/app/features/inspector/QueryInspector.tsx
View File

@@ -4,8 +4,9 @@ import { Subscription } from 'rxjs';
import { DataFrame } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { Stack } from '@grafana/experimental';
import { config, RefreshEvent } from '@grafana/runtime';
import { Button, ClipboardButton, JSONFormatter, LoadingPlaceholder, Stack } from '@grafana/ui';
import { Button, ClipboardButton, JSONFormatter, LoadingPlaceholder } from '@grafana/ui';
import { backendSrv } from 'app/core/services/backend_srv';
import { supportsDataQuery } from 'app/features/dashboard/components/PanelEditor/utils';
import { PanelModel } from 'app/features/dashboard/state';

14
public/app/features/org/UserInviteForm.tsx
View File

@@ -1,19 +1,9 @@
import React from 'react';
import { locationUtil } from '@grafana/data';
import { Stack } from '@grafana/experimental';
import { locationService } from '@grafana/runtime';
import {
Button,
LinkButton,
Input,
Switch,
RadioButtonGroup,
Form,
Field,
InputControl,
FieldSet,
Stack,
} from '@grafana/ui';
import { Button, LinkButton, Input, Switch, RadioButtonGroup, Form, Field, InputControl, FieldSet } from '@grafana/ui';
import { getConfig } from 'app/core/config';
import { OrgRole, useDispatch } from 'app/types';

3
public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx
View File

@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2, Icon, Stack } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { useStyles2, Icon } from '@grafana/ui';
import { Version, CatalogPlugin, PluginIconName } from '../types';

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

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
import { useAsync } from 'react-use';
import { QueryEditorProps } from '@grafana/data';
import { Space } from '@grafana/ui';
import { Space } from '@grafana/experimental';
import { SqlDatasource } from '../datasource/SqlDatasource';
import { applyQueryDefaults } from '../defaults';

16
public/app/features/plugins/sql/components/QueryHeader.tsx
View File

@@ -2,20 +2,8 @@ import React, { useCallback, useState } from 'react';
import { useCopyToClipboard } from 'react-use';
import { SelectableValue } from '@grafana/data';
import {
Button,
EditorField,
EditorHeader,
EditorRow,
FlexItem,
InlineField,
InlineSelect,
InlineSwitch,
RadioButtonGroup,
Select,
Space,
Tooltip,
} from '@grafana/ui';
import { EditorField, EditorHeader, EditorRow, FlexItem, InlineSelect, Space } from '@grafana/experimental';
import { Button, InlineField, InlineSwitch, RadioButtonGroup, Select, Tooltip } from '@grafana/ui';
import { QueryWithDefaults } from '../defaults';
import { SQLQuery, QueryFormat, QueryRowFilter, QUERY_FORMAT_OPTIONS, DB, EditorMode } from '../types';

3
public/app/features/plugins/sql/components/visual-query-builder/GroupByRow.tsx
View File

@@ -1,7 +1,8 @@
import React, { useCallback } from 'react';
import { SelectableValue, toOption } from '@grafana/data';
import { AccessoryButton, EditorList, InputGroup, Select } from '@grafana/ui';
import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import { QueryEditorGroupByExpression } from '../../expressions';
import { SQLExpression } from '../../types';

3
public/app/features/plugins/sql/components/visual-query-builder/OrderByRow.tsx
View File

@@ -2,7 +2,8 @@ import { uniqueId } from 'lodash';
import React, { useCallback } from 'react';
import { SelectableValue, toOption } from '@grafana/data';
import { EditorField, Input, InputGroup, RadioButtonGroup, Select, Space } from '@grafana/ui';
import { EditorField, InputGroup, Space } from '@grafana/experimental';
import { Input, RadioButtonGroup, Select } from '@grafana/ui';
import { SQLExpression } from '../../types';
import { setPropertyField } from '../../utils/sql.utils';

3
public/app/features/plugins/sql/components/visual-query-builder/SelectRow.tsx
View File

@@ -3,7 +3,8 @@ import { uniqueId } from 'lodash';
import React, { useCallback } from 'react';
import { SelectableValue, toOption } from '@grafana/data';
import { Button, EditorField, Select, Stack, useStyles2 } from '@grafana/ui';
import { EditorField, Stack } from '@grafana/experimental';
import { Button, Select, useStyles2 } from '@grafana/ui';
import { QueryEditorExpressionType, QueryEditorFunctionExpression } from '../../expressions';
import { SQLExpression } from '../../types';

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

@@ -1,7 +1,7 @@
import React from 'react';
import { useAsync } from 'react-use';
import { EditorRows, EditorRow, EditorField } from '@grafana/ui';
import { EditorRows, EditorRow, EditorField } from '@grafana/experimental';
import { DB, QueryEditorProps, QueryRowFilter } from '../../types';
import { QueryToolbox } from '../query-editor-raw/QueryToolbox';

3
public/app/features/scenes/SceneListPage.tsx
View File

@@ -1,7 +1,8 @@
// Libraries
import React, { FC } from 'react';
import { Card, Stack } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { Card } from '@grafana/ui';
import { Page } from 'app/core/components/Page/Page';
// Types

3
public/app/features/scenes/components/NestedScene.tsx
View File

@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Button, Stack, ToolbarButton, useStyles2 } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { Button, ToolbarButton, useStyles2 } from '@grafana/ui';
import { SceneObjectBase } from '../core/SceneObjectBase';
import { SceneObject, SceneLayoutChildState, SceneComponentProps, SceneLayout } from '../core/types';

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

@@ -11,7 +11,8 @@ import {
LabelsToFieldsMode,
LabelsToFieldsOptions,
} from '@grafana/data/src/transformations/transformers/labelsToFields';
import { InlineField, InlineFieldRow, RadioButtonGroup, Select, FilterPill, Stack } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { InlineField, InlineFieldRow, RadioButtonGroup, Select, FilterPill } from '@grafana/ui';
const modes: Array<SelectableValue<LabelsToFieldsMode>> = [
{ value: LabelsToFieldsMode.Columns, label: 'Columns' },

3
public/app/features/variables/editor/VariableEditorList.tsx
View File

@@ -2,8 +2,9 @@ import React, { ReactElement } from 'react';
import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
import { selectors } from '@grafana/e2e-selectors';
import { Stack } from '@grafana/experimental';
import { reportInteraction } from '@grafana/runtime';
import { Button, Stack } from '@grafana/ui';
import { Button } from '@grafana/ui';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import { VariablesDependenciesButton } from '../inspect/VariablesDependenciesButton';

3
public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx
View File

@@ -1,7 +1,8 @@
import React, { FC, useMemo } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField, Select } from '@grafana/ui';
import { EditorField } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import { getAggregationOptionsByMetric } from '../functions';
import { MetricDescriptor, MetricKind, ValueTypes } from '../types';

3
public/app/plugins/datasource/cloud-monitoring/components/AliasBy.tsx
View File

@@ -1,7 +1,8 @@
import { debounce } from 'lodash';
import React, { FunctionComponent, useState } from 'react';
import { EditorField, Input } from '@grafana/ui';
import { EditorField } from '@grafana/experimental';
import { Input } from '@grafana/ui';
export interface Props {
refId: string;

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

@@ -1,7 +1,7 @@
import React, { FC, useMemo } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField, EditorFieldGroup } from '@grafana/ui';
import { EditorField, EditorFieldGroup } from '@grafana/experimental';
import { ALIGNMENT_PERIODS } from '../constants';
import CloudMonitoringDatasource from '../datasource';

3
public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx
View File

@@ -2,7 +2,8 @@ import React, { useState } from 'react';
import { useDebounce } from 'react-use';
import { QueryEditorProps, toOption } from '@grafana/data';
import { EditorField, EditorRows, Input } from '@grafana/ui';
import { EditorField, EditorRows } from '@grafana/experimental';
import { Input } from '@grafana/ui';
import CloudMonitoringDatasource from '../datasource';
import {

3
public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx
View File

@@ -1,7 +1,8 @@
import React, { FunctionComponent } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField, EditorRow, HorizontalGroup, Switch } from '@grafana/ui';
import { EditorField, EditorRow } from '@grafana/experimental';
import { HorizontalGroup, Switch } from '@grafana/ui';
import { GRAPH_PERIODS } from '../constants';

3
public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx
View File

@@ -1,7 +1,8 @@
import React, { FunctionComponent, useMemo } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField, EditorFieldGroup, MultiSelect } from '@grafana/ui';
import { EditorField, EditorFieldGroup } from '@grafana/experimental';
import { MultiSelect } from '@grafana/ui';
import { SYSTEM_LABELS } from '../constants';
import { labelsToGroupedOptions } from '../functions';

3
public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx
View File

@@ -1,7 +1,8 @@
import React, { FunctionComponent, useMemo } from 'react';
import { SelectableValue, toOption } from '@grafana/data';
import { AccessoryButton, EditorField, EditorList, EditorRow, HorizontalGroup, Select } from '@grafana/ui';
import { AccessoryButton, EditorField, EditorList, EditorRow } from '@grafana/experimental';
import { HorizontalGroup, Select } from '@grafana/ui';
import { labelsToGroupedOptions, stringArrayToFilters } from '../functions';

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

@@ -1,7 +1,8 @@
import React from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField, Select } from '@grafana/ui';
import { EditorField } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import { LOOKBACK_PERIODS } from '../constants';

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

@@ -1,7 +1,7 @@
import React, { useCallback, useEffect, useState } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorRows } from '@grafana/ui';
import { EditorRows } from '@grafana/experimental';
import CloudMonitoringDatasource from '../datasource';
import { getAlignmentPickerData } from '../functions';

3
public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx
View File

@@ -3,7 +3,8 @@ import { startCase, uniqBy } from 'lodash';
import React, { useCallback, useEffect, useState } from 'react';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { EditorField, EditorFieldGroup, EditorRow, getSelectStyles, Select, useStyles2, useTheme2 } from '@grafana/ui';
import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/experimental';
import { getSelectStyles, Select, useStyles2, useTheme2 } from '@grafana/ui';
import CloudMonitoringDatasource from '../datasource';
import { MetricDescriptor, MetricQuery } from '../types';

3
public/app/plugins/datasource/cloud-monitoring/components/Preprocessor.tsx
View File

@@ -1,7 +1,8 @@
import React, { FunctionComponent, useMemo } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField, RadioButtonGroup } from '@grafana/ui';
import { EditorField } from '@grafana/experimental';
import { RadioButtonGroup } from '@grafana/ui';
import { getAlignmentPickerData } from '../functions';
import { MetricDescriptor, MetricKind, MetricQuery, PreprocessorType, ValueTypes } from '../types';

3
public/app/plugins/datasource/cloud-monitoring/components/Project.tsx
View File

@@ -1,7 +1,8 @@
import React, { useEffect, useMemo, useState } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField, Select } from '@grafana/ui';
import { EditorField } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import CloudMonitoringDatasource from '../datasource';

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

@@ -1,7 +1,7 @@
import React, { PureComponent } from 'react';
import { QueryEditorProps, toOption } from '@grafana/data';
import { EditorRows } from '@grafana/ui';
import { EditorRows } from '@grafana/experimental';
import CloudMonitoringDatasource from '../datasource';
import { CloudMonitoringQuery, MetricQuery, QueryType, SLOQuery, CloudMonitoringOptions } from '../types';

3
public/app/plugins/datasource/cloud-monitoring/components/QueryHeader.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { EditorHeader, FlexItem, InlineSelect, RadioButtonGroup } from '@grafana/ui';
import { EditorHeader, FlexItem, InlineSelect } from '@grafana/experimental';
import { RadioButtonGroup } from '@grafana/ui';
import { QUERY_TYPES } from '../constants';
import { EditorMode, CloudMonitoringQuery, QueryType, SLOQuery, MetricQuery } from '../types';

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

@@ -1,7 +1,8 @@
import React, { useEffect, useState } from 'react';
import { SelectableValue } from '@grafana/data';
import { Select, EditorField } from '@grafana/ui';
import { EditorField } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import CloudMonitoringDatasource from '../datasource';
import { SLOQuery } from '../types';

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

@@ -1,7 +1,7 @@
import React, { useMemo } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/ui';
import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/experimental';
import { ALIGNMENT_PERIODS, SLO_BURN_RATE_SELECTOR_NAME } from '../constants';
import CloudMonitoringDatasource from '../datasource';

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

@@ -1,7 +1,8 @@
import React from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField, Select } from '@grafana/ui';
import { EditorField } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import { SELECTORS } from '../constants';
import CloudMonitoringDatasource from '../datasource';

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

@@ -1,7 +1,8 @@
import React, { useEffect, useState } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField, Select } from '@grafana/ui';
import { EditorField } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import CloudMonitoringDatasource from '../datasource';
import { SLOQuery } from '../types';

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

@@ -1,7 +1,7 @@
import React from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorRow } from '@grafana/ui';
import { EditorRow } from '@grafana/experimental';
import CloudMonitoringDatasource from '../datasource';
import { CustomMetaData, MetricDescriptor, MetricQuery, SLOQuery } from '../types';

3
public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx
View File

@@ -1,7 +1,8 @@
import React, { ChangeEvent } from 'react';
import { QueryEditorProps } from '@grafana/data';
import { Alert, EditorField, EditorHeader, EditorRow, EditorSwitch, InlineSelect, Input, Space } from '@grafana/ui';
import { EditorField, EditorHeader, EditorRow, EditorSwitch, InlineSelect, Space } from '@grafana/experimental';
import { Alert, Input } from '@grafana/ui';
import { CloudWatchDatasource } from '../datasource';
import { isCloudWatchAnnotationQuery } from '../guards';

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

@@ -2,7 +2,7 @@ import { isEqual } from 'lodash';
import React, { useMemo, useState } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorList } from '@grafana/ui';
import { EditorList } from '@grafana/experimental';
import { CloudWatchDatasource } from '../../datasource';
import { Dimensions as DimensionsType, MetricStat } from '../../types';

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

@@ -3,7 +3,8 @@ import React, { FunctionComponent, useMemo } from 'react';
import { useAsyncFn } from 'react-use';
import { GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';
import { AccessoryButton, InputGroup, Select, stylesFactory, useTheme2 } from '@grafana/ui';
import { AccessoryButton, InputGroup } from '@grafana/experimental';
import { Select, stylesFactory, useTheme2 } from '@grafana/ui';
import { CloudWatchDatasource } from '../../datasource';
import { Dimensions, MetricStat } from '../../types';

3
public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx
View File

@@ -1,7 +1,8 @@
import React from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField, EditorFieldGroup, EditorRow, EditorRows, EditorSwitch, Select } from '@grafana/ui';
import { EditorField, EditorFieldGroup, EditorRow, EditorRows, EditorSwitch } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import { Dimensions } from '..';
import { CloudWatchDatasource } from '../../datasource';

3
public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.tsx
View File

@@ -1,8 +1,9 @@
import React, { ChangeEvent, useState } from 'react';
import { QueryEditorProps } from '@grafana/data';
import { EditorField, EditorRow, Space } from '@grafana/experimental';
import { config } from '@grafana/runtime';
import { EditorField, EditorRow, Input, Space } from '@grafana/ui';
import { Input } from '@grafana/ui';
import { MathExpressionQueryField, MetricStatEditor, SQLBuilderEditor, SQLCodeEditor } from '../';
import { CloudWatchDatasource } from '../../datasource';

3
public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryHeader.tsx
View File

@@ -1,7 +1,8 @@
import React, { useCallback, useState } from 'react';
import { SelectableValue } from '@grafana/data';
import { Button, ConfirmModal, FlexItem, InlineSelect, RadioButtonGroup } from '@grafana/ui';
import { FlexItem, InlineSelect } from '@grafana/experimental';
import { Button, ConfirmModal, RadioButtonGroup } from '@grafana/ui';
import { CloudWatchDatasource } from '../../datasource';
import { CloudWatchMetricsQuery, CloudWatchQuery, MetricEditorMode, MetricQueryType } from '../../types';

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

@@ -2,7 +2,7 @@ import { pick } from 'lodash';
import React from 'react';
import { SelectableValue, ExploreMode } from '@grafana/data';
import { EditorHeader, InlineSelect } from '@grafana/ui';
import { EditorHeader, InlineSelect } from '@grafana/experimental';
import { CloudWatchDatasource } from '../datasource';
import { useRegions } from '../hooks';

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

@@ -1,6 +1,7 @@
import React, { useCallback, useEffect, useState } from 'react';
import { EditorField, EditorRow, EditorRows, Input } from '@grafana/ui';
import { EditorField, EditorRow, EditorRows } from '@grafana/experimental';
import { Input } from '@grafana/ui';
import SQLGenerator from '../../cloudwatch-sql/SQLGenerator';
import { CloudWatchDatasource } from '../../datasource';

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

@@ -1,7 +1,8 @@
import React, { useEffect, useMemo } from 'react';
import { SelectableValue, toOption } from '@grafana/data';
import { EditorField, EditorFieldGroup, EditorSwitch, Select } from '@grafana/ui';
import { EditorField, EditorFieldGroup, EditorSwitch } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import { STATISTICS } from '../../cloudwatch-sql/language';
import { CloudWatchDatasource } from '../../datasource';

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

@@ -2,7 +2,8 @@ import React, { useMemo, useState } from 'react';
import { useAsyncFn } from 'react-use';
import { SelectableValue, toOption } from '@grafana/data';
import { AccessoryButton, EditorList, InputGroup, Select } from '@grafana/ui';
import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import { COMPARISON_OPERATORS, EQUALS } from '../../cloudwatch-sql/language';
import { CloudWatchDatasource } from '../../datasource';

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

@@ -1,7 +1,8 @@
import React, { useMemo, useState } from 'react';
import { SelectableValue, toOption } from '@grafana/data';
import { AccessoryButton, EditorList, InputGroup, Select } from '@grafana/ui';
import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import { CloudWatchDatasource } from '../../datasource';
import { QueryEditorExpressionType, QueryEditorGroupByExpression, QueryEditorPropertyType } from '../../expressions';

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

@@ -1,7 +1,8 @@
import React from 'react';
import { SelectableValue, toOption } from '@grafana/data';
import { AccessoryButton, EditorField, EditorFieldGroup, InputGroup, Select } from '@grafana/ui';
import { AccessoryButton, EditorField, EditorFieldGroup, InputGroup } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import { ASC, DESC, STATISTICS } from '../../cloudwatch-sql/language';
import { CloudWatchDatasource } from '../../datasource';

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

@@ -1,7 +1,7 @@
import { isEqual } from 'lodash';
import React, { useEffect, useState } from 'react';
import { EditorList } from '@grafana/ui';
import { EditorList } from '@grafana/experimental';
import { MultiFilters } from '../../types';

3
public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
View File

@@ -2,7 +2,8 @@ import { css, cx } from '@emotion/css';
import React, { FunctionComponent, useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { AccessoryButton, Input, InputGroup, stylesFactory, useTheme2 } from '@grafana/ui';
import { AccessoryButton, InputGroup } from '@grafana/experimental';
import { Input, stylesFactory, useTheme2 } from '@grafana/ui';
import { MultiFilterCondition } from './MultiFilter';

3
public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx
View File

@@ -1,7 +1,8 @@
import React from 'react';
import { AnnotationQuery } from '@grafana/data';
import { EditorField, EditorRow, Input } from '@grafana/ui';
import { EditorField, EditorRow } from '@grafana/experimental';
import { Input } from '@grafana/ui';
import { ElasticsearchQuery } from '../../types';

2
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ArgQueryEditor/ArgQueryEditor.tsx
View File

@@ -1,7 +1,7 @@
import { intersection } from 'lodash';
import React, { useState, useMemo } from 'react';
import { EditorFieldGroup, EditorRow, EditorRows } from '@grafana/ui';
import { EditorFieldGroup, EditorRow, EditorRows } from '@grafana/experimental';
import Datasource from '../../datasource';
import { AzureMonitorErrorish, AzureMonitorOption, AzureMonitorQuery } from '../../types';

3
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/Field.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { EditorField, InlineField } from '@grafana/ui';
import { EditorField } from '@grafana/experimental';
import { InlineField } from '@grafana/ui';
import { Props as InlineFieldProps } from '@grafana/ui/src/components/Forms/InlineField';
interface Props extends InlineFieldProps {

3
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/LogsQueryEditor.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { Alert, EditorFieldGroup, EditorRow, EditorRows } from '@grafana/ui';
import { EditorFieldGroup, EditorRow, EditorRows } from '@grafana/experimental';
import { Alert } from '@grafana/ui';
import Datasource from '../../datasource';
import { AzureMonitorErrorish, AzureMonitorOption, AzureMonitorQuery } from '../../types';

3
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/DimensionFields.tsx
View File

@@ -1,7 +1,8 @@
import React, { useEffect, useMemo, useState } from 'react';
import { SelectableValue, DataFrame, PanelData, Labels } from '@grafana/data';
import { Select, HorizontalGroup, MultiSelect, EditorList, AccessoryButton } from '@grafana/ui';
import { EditorList, AccessoryButton } from '@grafana/experimental';
import { Select, HorizontalGroup, MultiSelect } from '@grafana/ui';
import { AzureMetricDimension, AzureMonitorOption, AzureMonitorQuery, AzureQueryEditorFieldProps } from '../../types';
import { Field } from '../Field';

2
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { PanelData } from '@grafana/data/src/types';
import { EditorRows, EditorRow, EditorFieldGroup } from '@grafana/ui';
import { EditorRows, EditorRow, EditorFieldGroup } from '@grafana/experimental';
import type Datasource from '../../datasource';
import type { AzureMonitorQuery, AzureMonitorOption, AzureMonitorErrorish, AzureMetricResource } from '../../types';

2
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryHeader.tsx
View File

@@ -1,7 +1,7 @@
import React, { useCallback } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorHeader, InlineSelect } from '@grafana/ui';
import { EditorHeader, InlineSelect } from '@grafana/experimental';
import { AzureMonitorQuery, AzureQueryType } from '../types';

3
public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx
View File

@@ -2,7 +2,8 @@
import React, { memo } from 'react';
import { AnnotationQuery } from '@grafana/data';
import { EditorField, EditorRow, Input } from '@grafana/ui';
import { EditorField, EditorRow } from '@grafana/experimental';
import { Input } from '@grafana/ui';
// Types
import { getNormalizedLokiQuery } from '../queryUtils';

3
public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx
View File

@@ -2,8 +2,9 @@ import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react';
import { CoreApp, LoadingState } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { EditorHeader, EditorRows, FlexItem, Space } from '@grafana/experimental';
import { reportInteraction } from '@grafana/runtime';
import { Button, ConfirmModal, EditorHeader, EditorRows, FlexItem, Space } from '@grafana/ui';
import { Button, ConfirmModal } from '@grafana/ui';
import { QueryEditorModeToggle } from 'app/plugins/datasource/prometheus/querybuilder/shared/QueryEditorModeToggle';
import { QueryHeaderSwitch } from 'app/plugins/datasource/prometheus/querybuilder/shared/QueryHeaderSwitch';
import { QueryEditorMode } from 'app/plugins/datasource/prometheus/querybuilder/shared/types';

2
public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx
View File

@@ -1,7 +1,7 @@
import React, { useEffect, useMemo, useState } from 'react';
import { DataSourceApi, getDefaultTimeRange, LoadingState, PanelData, SelectableValue } from '@grafana/data';
import { EditorRow } from '@grafana/ui';
import { EditorRow } from '@grafana/experimental';
import { LabelFilters } from 'app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters';
import { OperationExplainedBox } from 'app/plugins/datasource/prometheus/querybuilder/shared/OperationExplainedBox';
import { OperationList } from 'app/plugins/datasource/prometheus/querybuilder/shared/OperationList';

2
public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderExplained.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { Stack } from '@grafana/ui';
import { Stack } from '@grafana/experimental';
import { OperationExplainedBox } from 'app/plugins/datasource/prometheus/querybuilder/shared/OperationExplainedBox';
import { OperationListExplained } from 'app/plugins/datasource/prometheus/querybuilder/shared/OperationListExplained';
import { RawQuery } from 'app/plugins/datasource/prometheus/querybuilder/shared/RawQuery';

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