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

Add grafana/experimental package (#42289)

Browse Source 
* Add grafana/experimental package

* CloudWatch: Use experimental for components

* Use canary version of experimental

* Update sort order
This commit is contained in:
Zoltán Bedi 2021-12-06 09:37:54 +01:00 committed by GitHub
parent d41044bd8e
commit fdc7eef0f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 58 additions and 484 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -238,6 +238,7 @@
"@grafana/aws-sdk": "0.0.3",
"@grafana/data": "workspace:*",
"@grafana/e2e-selectors": "workspace:*",
"@grafana/experimental": "canary",
"@grafana/runtime": "workspace:*",
"@grafana/schema": "workspace:*",
"@grafana/slate-react": "0.22.10-grafana",

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

@ -1,15 +1,11 @@
import React, { ChangeEvent } from 'react';
import { Switch, Input } from '@grafana/ui';
import { CloudWatchAnnotationQuery, CloudWatchMetricsQuery } from '../types';
import { PanelData } from '@grafana/data';
import { EditorField, EditorHeader, EditorRow, InlineSelect, Space } from '@grafana/experimental';
import { Input, Switch } from '@grafana/ui';
import { CloudWatchDatasource } from '../datasource';
import { MetricStatEditor } from './MetricStatEditor';
import EditorHeader from './ui/EditorHeader';
import InlineSelect from './ui/InlineSelect';
import { Space } from './ui/Space';
import { useRegions } from '../hooks';
import EditorRow from './ui/EditorRow';
import EditorField from './ui/EditorField';
import { CloudWatchAnnotationQuery, CloudWatchMetricsQuery } from '../types';
import { MetricStatEditor } from './MetricStatEditor';
export type Props = {
query: CloudWatchAnnotationQuery;

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

@ -1,9 +1,9 @@
import React, { useMemo, useState } from 'react';
import { isEqual } from 'lodash';
import React, { useMemo, useState } from 'react';
import { SelectableValue } from '@grafana/data';
import { Dimensions as DimensionsType, CloudWatchMetricsQuery } from '../../types';
import EditorList from '../ui/EditorList';
import { EditorList } from '@grafana/experimental';
import { CloudWatchDatasource } from '../../datasource';
import { CloudWatchMetricsQuery, Dimensions as DimensionsType } from '../../types';
import { FilterItem } from './FilterItem';
export interface Props {

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

@ -1,15 +1,13 @@
import React, { FunctionComponent, useMemo } from 'react';
import { css, cx } from '@emotion/css';
import { Select, stylesFactory, useTheme2 } from '@grafana/ui';
import { useAsyncFn } from 'react-use';
import { GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';
import { InputGroup, AccessoryButton } from '@grafana/experimental';
import { Select, stylesFactory, useTheme2 } from '@grafana/ui';
import { CloudWatchDatasource } from '../../datasource';
import { CloudWatchMetricsQuery, Dimensions } from '../../types';
import { appendTemplateVariables } from '../../utils/utils';
import { DimensionFilterCondition } from './Dimensions';
import InputGroup from '../ui/InputGroup';
import AccessoryButton from '../ui/AccessoryButton';
export interface Props {
query: CloudWatchMetricsQuery;

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

@ -1,14 +1,11 @@
import React from 'react';
import { Switch, Select } from '@grafana/ui';
import { CloudWatchMetricsQuery } from '../../types';
import { CloudWatchDatasource } from '../../datasource';
import EditorRows from '../ui/EditorRows';
import EditorRow from '../ui/EditorRow';
import EditorFieldGroup from '../ui/EditorFieldGroup';
import EditorField from '../ui/EditorField';
import { appendTemplateVariables, toOption } from '../../utils/utils';
import { useDimensionKeys, useMetrics, useNamespaces } from '../../hooks';
import { EditorField, EditorFieldGroup, EditorRow, EditorRows } from '@grafana/experimental';
import { Select, Switch } from '@grafana/ui';
import { Dimensions } from '..';
import { CloudWatchDatasource } from '../../datasource';
import { useDimensionKeys, useMetrics, useNamespaces } from '../../hooks';
import { CloudWatchMetricsQuery } from '../../types';
import { appendTemplateVariables, toOption } from '../../utils/utils';
export type Props = {
query: CloudWatchMetricsQuery;

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

@ -1,22 +1,18 @@
import React, { PureComponent, ChangeEvent } from 'react';
import React, { ChangeEvent, PureComponent } from 'react';
import { QueryEditorProps } from '@grafana/data';
import { EditorField, EditorRow, Space } from '@grafana/experimental';
import { Input } from '@grafana/ui';
import {
CloudWatchQuery,
CloudWatchMetricsQuery,
CloudWatchJsonData,
MetricQueryType,
MetricEditorMode,
} from '../types';
import { CloudWatchDatasource } from '../datasource';
import { Alias, MetricStatEditor, MathExpressionQueryField, SQLBuilderEditor, SQLCodeEditor } from './';
import EditorRow from './ui/EditorRow';
import EditorField from './ui/EditorField';
import { Space } from './ui/Space';
import QueryHeader from './QueryHeader';
import { isMetricsQuery } from '../guards';
import {
CloudWatchJsonData,
CloudWatchMetricsQuery,
CloudWatchQuery,
MetricEditorMode,
MetricQueryType,
} from '../types';
import { Alias, MathExpressionQueryField, MetricStatEditor, SQLBuilderEditor, SQLCodeEditor } from './';
import QueryHeader from './QueryHeader';
export type Props = QueryEditorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData>;

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

@ -3,6 +3,7 @@ import { pick } from 'lodash';
import { SelectableValue } from '@grafana/data';
import { Button, ConfirmModal, RadioButtonGroup } from '@grafana/ui';
import { EditorHeader, InlineSelect, FlexItem } from '@grafana/experimental';
import { CloudWatchDatasource } from '../datasource';
import {
@ -12,9 +13,6 @@ import {
MetricEditorMode,
MetricQueryType,
} from '../types';
import EditorHeader from './ui/EditorHeader';
import InlineSelect from './ui/InlineSelect';
import FlexItem from './ui/FlexItem';
import { useRegions } from '../hooks';
interface QueryHeaderProps {

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

@ -1,15 +1,13 @@
import React, { useCallback, useEffect, useState } from 'react';
import { CloudWatchMetricsQuery } from '../../types';
import { EditorField, EditorRow, EditorRows } from '@grafana/experimental';
import { Input } from '@grafana/ui';
import SQLGenerator from '../../cloudwatch-sql/SQLGenerator';
import { CloudWatchDatasource } from '../../datasource';
import EditorRow from '../ui/EditorRow';
import EditorRows from '../ui/EditorRows';
import EditorField from '../ui/EditorField';
import { CloudWatchMetricsQuery } from '../../types';
import SQLBuilderSelectRow from './SQLBuilderSelectRow';
import SQLFilter from './SQLFilter';
import SQLGroupBy from './SQLGroupBy';
import SQLBuilderSelectRow from './SQLBuilderSelectRow';
import SQLGenerator from '../../cloudwatch-sql/SQLGenerator';
import SQLOrderByGroup from './SQLOrderByGroup';
import { Input } from '@grafana/ui';
import { setSql } from './utils';
export type Props = {

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

@ -1,15 +1,13 @@
import { toOption } from '@grafana/data';
import { Select, Switch } from '@grafana/ui';
import React, { useEffect, useMemo } from 'react';
import { toOption } from '@grafana/data';
import { EditorField, EditorFieldGroup } from '@grafana/experimental';
import { Select, Switch } from '@grafana/ui';
import { STATISTICS } from '../../cloudwatch-sql/language';
import { CloudWatchDatasource } from '../../datasource';
import { useDimensionKeys, useMetrics, useNamespaces } from '../../hooks';
import { CloudWatchMetricsQuery } from '../../types';
import { appendTemplateVariables } from '../../utils/utils';
import EditorField from '../ui/EditorField';
import EditorFieldGroup from '../ui/EditorFieldGroup';
import {
stringArrayToDimensions,
getMetricNameFromExpression,
getNamespaceFromExpression,
getSchemaLabelKeys as getSchemaLabels,
@ -19,6 +17,7 @@ import {
setNamespace,
setSchemaLabels,
setWithSchema,
stringArrayToDimensions,
} from './utils';
interface SQLBuilderSelectRowProps {

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

@ -1,16 +1,14 @@
import { SelectableValue, toOption } from '@grafana/data';
import { Select } from '@grafana/ui';
import React, { useMemo, useState } from 'react';
import { useAsyncFn } from 'react-use';
import { SelectableValue, toOption } from '@grafana/data';
import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import { COMPARISON_OPERATORS, EQUALS } from '../../cloudwatch-sql/language';
import { CloudWatchDatasource } from '../../datasource';
import { QueryEditorExpressionType, QueryEditorOperatorExpression, QueryEditorPropertyType } from '../../expressions';
import { useDimensionKeys } from '../../hooks';
import { CloudWatchMetricsQuery } from '../../types';
import { appendTemplateVariables } from '../../utils/utils';
import AccessoryButton from '../ui/AccessoryButton';
import EditorList from '../ui/EditorList';
import InputGroup from '../ui/InputGroup';
import {
getFlattenedFilters,
getMetricNameFromExpression,

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

@ -1,13 +1,11 @@
import { SelectableValue, toOption } from '@grafana/data';
import { Select } from '@grafana/ui';
import React, { useMemo, useState } from 'react';
import { SelectableValue, toOption } from '@grafana/data';
import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import { CloudWatchDatasource } from '../../datasource';
import { QueryEditorExpressionType, QueryEditorGroupByExpression, QueryEditorPropertyType } from '../../expressions';
import { useDimensionKeys } from '../../hooks';
import { CloudWatchMetricsQuery } from '../../types';
import AccessoryButton from '../ui/AccessoryButton';
import EditorList from '../ui/EditorList';
import InputGroup from '../ui/InputGroup';
import {
getFlattenedGroupBys,
getMetricNameFromExpression,

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

@ -1,13 +1,11 @@
import { SelectableValue, toOption } from '@grafana/data';
import { Select } from '@grafana/ui';
import React from 'react';
import { SelectableValue, toOption } from '@grafana/data';
import { AccessoryButton, EditorField, EditorFieldGroup } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import { ASC, DESC, STATISTICS } from '../../cloudwatch-sql/language';
import { CloudWatchDatasource } from '../../datasource';
import { CloudWatchMetricsQuery } from '../../types';
import { appendTemplateVariables } from '../../utils/utils';
import AccessoryButton from '../ui/AccessoryButton';
import EditorField from '../ui/EditorField';
import EditorFieldGroup from '../ui/EditorFieldGroup';
import { setOrderBy, setSql } from './utils';
interface SQLBuilderSelectRowProps {

23
public/app/plugins/datasource/cloudwatch/components/ui/AccessoryButton.tsx
View File

@ -1,23 +0,0 @@
import { css, cx } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data';
import { stylesFactory, useTheme2 } from '@grafana/ui';
import { Button, ButtonProps } from '@grafana/ui/src/components/Button';
import React from 'react';
interface AccessoryButtonProps extends ButtonProps {}
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),
}),
}));
export default AccessoryButton;

79
public/app/plugins/datasource/cloudwatch/components/ui/EditorField.tsx
View File

@ -1,79 +0,0 @@
import { css } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data';
import { Field, Icon, PopoverContent, stylesFactory, Tooltip, useTheme2, ReactUtils } from '@grafana/ui';
import { Space } from 'app/plugins/datasource/grafana-azure-monitor-datasource/components/Space';
import React from 'react';
interface EditorFieldProps {
label: string;
children: React.ReactElement;
width?: number;
optional?: boolean;
tooltip?: PopoverContent;
}
const EditorField: React.FC<EditorFieldProps> = (props) => {
const { label, optional, tooltip, children } = props;
const theme = useTheme2();
const styles = getStyles(theme, props);
const childInputId = 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">
<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}>
<div className={styles.child}>{children}</div>
</Field>
</div>
);
};
export default EditorField;
const getStyles = stylesFactory((theme: GrafanaTheme2, props: EditorFieldProps) => {
return {
root: css({
minWidth: theme.spacing(props.width ?? 0),
}),
label: css({
fontSize: 12,
}),
optional: css({
fontStyle: 'italic',
color: theme.colors.text.secondary,
}),
field: css({
marginBottom: 0, // GrafanaUI/Field has a bottom margin which we must remove
}),
// TODO: really poor hack to align the switch
// Find a better solution to this
child: css({
display: 'flex',
alignItems: 'center',
minHeight: 30,
}),
icon: css({
color: theme.colors.text.secondary,
marginLeft: theme.spacing(1),
':hover': {
color: theme.colors.text.primary,
},
}),
};
});

10
public/app/plugins/datasource/cloudwatch/components/ui/EditorFieldGroup.tsx
View File

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

28
public/app/plugins/datasource/cloudwatch/components/ui/EditorHeader.tsx
View File

@ -1,28 +0,0 @@
import { css } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data';
import { stylesFactory, useTheme2 } from '@grafana/ui';
import React from 'react';
import Stack from './Stack';
interface EditorHeaderProps {}
const EditorHeader: React.FC<EditorHeaderProps> = ({ children }) => {
const theme = useTheme2();
const styles = getStyles(theme);
return (
<div className={styles.root}>
<Stack gap={3} alignItems="center">
{children}
</Stack>
</div>
);
};
export default EditorHeader;
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
root: css({
padding: theme.spacing(0, 1),
}),
}));

46
public/app/plugins/datasource/cloudwatch/components/ui/EditorList.tsx
View File

@ -1,46 +0,0 @@
import { Button } from '@grafana/ui';
import React, { Fragment } from 'react';
import Stack from './Stack';
interface EditorListProps<T> {
items: T[];
renderItem: (item: Partial<T>, onChangeItem: (item: T) => void, onDeleteItem: () => void) => React.ReactElement;
onChange: (items: Array<Partial<T>>) => void;
}
function EditorList<T>({ items, renderItem, onChange }: EditorListProps<T>) {
const onAddItem = () => {
const newItems = [...items, {}];
onChange(newItems);
};
const onChangeItem = (itemIndex: number, newItem: 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) => (
<Fragment key={index}>
{renderItem(
item,
(newItem) => onChangeItem(index, newItem),
() => onDeleteItem(index)
)}
</Fragment>
))}
<Button onClick={onAddItem} variant="secondary" size="md" icon="plus" aria-label="Add" />
</Stack>
);
}
export default EditorList;

30
public/app/plugins/datasource/cloudwatch/components/ui/EditorRow.tsx
View File

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

14
public/app/plugins/datasource/cloudwatch/components/ui/EditorRows.tsx
View File

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

12
public/app/plugins/datasource/cloudwatch/components/ui/FlexItem.tsx
View File

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

89
public/app/plugins/datasource/cloudwatch/components/ui/InlineSelect.tsx
View File

@ -1,89 +0,0 @@
import { css, cx } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data';
import { Select, stylesFactory, useTheme2 } from '@grafana/ui';
import {
SelectContainerProps,
SelectContainer as BaseSelectContainer,
} from '@grafana/ui/src/components/Select/SelectContainer';
import { SelectCommonProps } from '@grafana/ui/src/components/Select/types';
import React, { useState } from 'react';
import { GroupBase } from 'react-select';
interface InlineSelectProps<T> extends SelectCommonProps<T> {
label?: string;
}
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>
)}
<Select openMenuOnFocus inputId={id} {...props} width="auto" components={components} />
</div>
);
}
export default InlineSelect;
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,
}),
container: css({
background: 'none',
borderColor: 'transparent',
}),
valueContainer: css({
display: 'flex',
alignItems: 'center',
flex: 'initial',
color: theme.colors.text.secondary,
fontSize: 12,
}),
}));

53
public/app/plugins/datasource/cloudwatch/components/ui/InputGroup.tsx
View File

@ -1,53 +0,0 @@
import React from 'react';
import { css } from '@emotion/css';
import { stylesFactory, useTheme2 } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
interface InputGroupProps {}
const InputGroup: React.FC<InputGroupProps> = ({ children }) => {
const theme = useTheme2();
const styles = useStyles(theme);
return <div className={styles.root}>{children}</div>;
};
const useStyles = stylesFactory((theme: GrafanaTheme2) => ({
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: 1,
'&:hover': {
zIndex: 2,
},
'&:focus-within': {
zIndex: 2,
},
},
}),
}));
export default InputGroup;

1
public/app/plugins/datasource/cloudwatch/components/ui/Space.tsx
View File

@ -1 +0,0 @@
export { Space } from '../../../grafana-azure-monitor-datasource/components/Space';

30
public/app/plugins/datasource/cloudwatch/components/ui/Stack.tsx
View File

@ -1,30 +0,0 @@
import React, { CSSProperties } from 'react';
import { css } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data';
import { stylesFactory, useTheme2 } from '@grafana/ui';
interface StackProps {
direction?: CSSProperties['flexDirection'];
alignItems?: CSSProperties['alignItems'];
wrap?: boolean;
gap?: number;
}
const Stack: React.FC<StackProps> = ({ children, ...props }) => {
const theme = useTheme2();
const styles = useStyles(theme, props);
return <div className={styles.root}>{children}</div>;
};
const useStyles = stylesFactory((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),
}),
}));
export default Stack;

12
yarn.lock
View File

@ -3493,6 +3493,17 @@ __metadata:
languageName: node
linkType: hard
"@grafana/experimental@npm:canary":
version: 0.0.1-pre-ba33f35900
resolution: "@grafana/experimental@npm:0.0.1-pre-ba33f35900"
peerDependencies:
"@emotion/css": 11.1.3
react: 17.0.1
react-select: 5.2.1
checksum: 610482f4d5b9be408e029ade6c6434232a1e67f12ccd8c71ad35bc99b87ff2be74befcabf75e0ef61261ba6055db19395478ab208c7c5454f0b9af209f1d7167
languageName: node
linkType: hard
"@grafana/runtime@workspace:*, @grafana/runtime@workspace:packages/grafana-runtime":
version: 0.0.0-use.local
resolution: "@grafana/runtime@workspace:packages/grafana-runtime"
@ -19379,6 +19390,7 @@ __metadata:
"@grafana/e2e": "workspace:*"
"@grafana/e2e-selectors": "workspace:*"
"@grafana/eslint-config": 2.5.1
"@grafana/experimental": canary
"@grafana/runtime": "workspace:*"
"@grafana/schema": "workspace:*"
"@grafana/slate-react": 0.22.10-grafana