>;
+ usages: VariableUsageTree[];
+ usagesNetwork: UsagesToNetwork[];
onAdd: () => void;
onChangeOrder: (fromIndex: number, toIndex: number) => void;
onDuplicate: (identifier: string) => void;
@@ -24,6 +27,8 @@ export interface Props {
export function VariableEditorList({
variables,
+ usages,
+ usagesNetwork,
onChangeOrder,
onDelete,
onDuplicate,
@@ -71,6 +76,8 @@ export function VariableEditorList({
onDelete={onDelete}
onDuplicate={onDuplicate}
onEdit={onEdit}
+ usageTree={usages}
+ usagesNetwork={usagesNetwork}
/>
);
})}
diff --git a/public/app/features/dashboard-scene/settings/variables/VariableEditorListRow.tsx b/public/app/features/dashboard-scene/settings/variables/VariableEditorListRow.tsx
index 9d95b792407..460b82bb351 100644
--- a/public/app/features/dashboard-scene/settings/variables/VariableEditorListRow.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/VariableEditorListRow.tsx
@@ -6,13 +6,18 @@ import { GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { reportInteraction } from '@grafana/runtime';
import { SceneVariable } from '@grafana/scenes';
-import { Button, ConfirmModal, Icon, IconButton, useStyles2, useTheme2 } from '@grafana/ui';
+import { Button, ConfirmModal, Icon, IconButton, Tooltip, useStyles2, useTheme2 } from '@grafana/ui';
+
+import { VariableUsagesButton } from '../../variables/VariableUsagesButton';
+import { UsagesToNetwork, VariableUsageTree, getVariableUsages } from '../../variables/utils';
import { getDefinition } from './utils';
export interface VariableEditorListRowProps {
index: number;
variable: SceneVariable;
+ usageTree: VariableUsageTree[];
+ usagesNetwork: UsagesToNetwork[];
onEdit: (identifier: string) => void;
onDuplicate: (identifier: string) => void;
onDelete: (identifier: string) => void;
@@ -21,6 +26,8 @@ export interface VariableEditorListRowProps {
export function VariableEditorListRow({
index,
variable,
+ usageTree,
+ usagesNetwork,
onEdit: propsOnEdit,
onDuplicate: propsOnDuplicate,
onDelete: propsOnDelete,
@@ -30,6 +37,8 @@ export function VariableEditorListRow({
const definition = getDefinition(variable);
const variableState = variable.state;
const identifier = variableState.name;
+ const usages = getVariableUsages(identifier, usageTree);
+ const passed = usages > 0 || variableState.type === 'adhoc';
const [showDeleteModal, setShowDeleteModal] = useState(false);
const handleDeleteVariableModal = (show: boolean) => () => {
setShowDeleteModal(show);
@@ -79,6 +88,12 @@ export function VariableEditorListRow({
+
+
{
event.preventDefault();
@@ -122,6 +137,35 @@ export function VariableEditorListRow({
);
}
+interface VariableCheckIndicatorProps {
+ passed: boolean;
+}
+
+function VariableCheckIndicator({ passed }: VariableCheckIndicatorProps): ReactElement {
+ const styles = useStyles2(getStyles);
+ if (passed) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ );
+}
+
function getStyles(theme: GrafanaTheme2) {
return {
dragHandle: css({
diff --git a/public/app/features/dashboard-scene/settings/variables/VariablesUnknownTable.test.tsx b/public/app/features/dashboard-scene/settings/variables/VariablesUnknownTable.test.tsx
new file mode 100644
index 00000000000..c05b0c83afe
--- /dev/null
+++ b/public/app/features/dashboard-scene/settings/variables/VariablesUnknownTable.test.tsx
@@ -0,0 +1,151 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import * as runtime from '@grafana/runtime';
+import { TestVariable } from '@grafana/scenes';
+
+import * as utils from '../../variables/utils';
+import { UsagesToNetwork } from '../../variables/utils';
+
+import {
+ SLOW_VARIABLES_EXPANSION_THRESHOLD,
+ VariablesUnknownTable,
+ VariablesUnknownTableProps,
+} from './VariablesUnknownTable';
+
+async function getTestContext(
+ overrides: Partial | undefined = {},
+ usages: UsagesToNetwork[] = []
+) {
+ jest.clearAllMocks();
+ const reportInteractionSpy = jest.spyOn(runtime, 'reportInteraction').mockImplementation();
+ const getUnknownsNetworkSpy = jest.spyOn(utils, 'getUnknownsNetwork').mockResolvedValue(usages);
+ const defaults: VariablesUnknownTableProps = {
+ variables: [],
+ dashboard: null,
+ };
+ const props = { ...defaults, ...overrides };
+ const { rerender } = render();
+ await waitFor(() =>
+ expect(screen.getByRole('heading', { name: /renamed or missing variables/i })).toBeInTheDocument()
+ );
+
+ return { reportInteractionSpy, getUnknownsNetworkSpy, rerender };
+}
+
+describe('VariablesUnknownTable', () => {
+ describe('when rendered', () => {
+ it('then it should render the section header', async () => {
+ await getTestContext();
+ });
+ });
+
+ describe('when expanding the section', () => {
+ it('then it should call getUnknownsNetwork', async () => {
+ const { getUnknownsNetworkSpy } = await getTestContext();
+
+ await userEvent.click(screen.getByRole('heading', { name: /renamed or missing variables/i }));
+ await waitFor(() => expect(getUnknownsNetworkSpy).toHaveBeenCalledTimes(1));
+ });
+
+ it('then it should report the interaction', async () => {
+ const { reportInteractionSpy } = await getTestContext();
+
+ await userEvent.click(screen.getByRole('heading', { name: /renamed or missing variables/i }));
+
+ expect(reportInteractionSpy).toHaveBeenCalledTimes(1);
+ expect(reportInteractionSpy).toHaveBeenCalledWith('Unknown variables section expanded');
+ });
+
+ describe('but when expanding it again without changes to variables or dashboard', () => {
+ it('then it should not call getUnknownsNetwork', async () => {
+ const { getUnknownsNetworkSpy } = await getTestContext();
+
+ await userEvent.click(screen.getByRole('heading', { name: /renamed or missing variables/i }));
+ await waitFor(() => expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true'));
+ expect(getUnknownsNetworkSpy).toHaveBeenCalledTimes(1);
+
+ await userEvent.click(screen.getByRole('heading', { name: /renamed or missing variables/i }));
+ await waitFor(() => expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false'));
+
+ await userEvent.click(screen.getByRole('heading', { name: /renamed or missing variables/i }));
+ await waitFor(() => expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true'));
+
+ expect(getUnknownsNetworkSpy).toHaveBeenCalledTimes(1);
+ });
+ });
+
+ describe('and there are no renamed or missing variables', () => {
+ it('then it should render the correct message', async () => {
+ await getTestContext();
+
+ await userEvent.click(screen.getByRole('heading', { name: /renamed or missing variables/i }));
+
+ expect(screen.getByText('No renamed or missing variables found.')).toBeInTheDocument();
+ });
+ });
+
+ describe('and there are renamed or missing variables', () => {
+ it('then it should render the table', async () => {
+ const variable = new TestVariable({ name: 'Renamed Variable', query: 'A.*', value: '', text: '', options: [] });
+ const usages = [{ variable, nodes: [], edges: [], showGraph: false }];
+ const { reportInteractionSpy } = await getTestContext({}, usages);
+
+ await userEvent.click(screen.getByRole('heading', { name: /renamed or missing variables/i }));
+
+ expect(screen.queryByText('No renamed or missing variables found.')).not.toBeInTheDocument();
+ expect(screen.getByText('Renamed Variable')).toBeInTheDocument();
+ expect(screen.getByLabelText('Show usages')).toBeInTheDocument();
+
+ // make sure we don't report the interaction for slow expansion
+ expect(reportInteractionSpy).toHaveBeenCalledTimes(1);
+ expect(reportInteractionSpy).toHaveBeenCalledWith('Unknown variables section expanded');
+ });
+
+ describe('but when the unknown processing takes a while', () => {
+ let user: ReturnType;
+
+ beforeEach(() => {
+ jest.useFakeTimers();
+ // Need to use delay: null here to work with fakeTimers
+ // see https://github.com/testing-library/user-event/issues/833
+ user = userEvent.setup({ delay: null });
+ });
+
+ afterEach(() => {
+ jest.useRealTimers();
+ });
+
+ it('then it should report slow expansion', async () => {
+ const variable = new TestVariable({
+ name: 'Renamed Variable',
+ query: 'A.*',
+ value: '',
+ text: '',
+ options: [],
+ });
+ const usages = [{ variable, nodes: [], edges: [], showGraph: false }];
+ const { getUnknownsNetworkSpy, reportInteractionSpy } = await getTestContext({}, usages);
+ getUnknownsNetworkSpy.mockImplementation(() => {
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(usages);
+ }, SLOW_VARIABLES_EXPANSION_THRESHOLD);
+ });
+ });
+
+ await user.click(screen.getByRole('heading', { name: /renamed or missing variables/i }));
+
+ jest.advanceTimersByTime(SLOW_VARIABLES_EXPANSION_THRESHOLD);
+
+ // make sure we report the interaction for slow expansion
+ await waitFor(() =>
+ expect(reportInteractionSpy).toHaveBeenCalledWith('Slow unknown variables expansion', {
+ elapsed: expect.any(Number),
+ })
+ );
+ });
+ });
+ });
+ });
+});
diff --git a/public/app/features/dashboard-scene/settings/variables/VariablesUnknownTable.tsx b/public/app/features/dashboard-scene/settings/variables/VariablesUnknownTable.tsx
new file mode 100644
index 00000000000..9b96d5bc9ae
--- /dev/null
+++ b/public/app/features/dashboard-scene/settings/variables/VariablesUnknownTable.tsx
@@ -0,0 +1,154 @@
+import { css } from '@emotion/css';
+import { ReactElement, useEffect, useState } from 'react';
+import { useAsyncFn } from 'react-use';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { reportInteraction } from '@grafana/runtime';
+import { SceneVariable, SceneVariableState } from '@grafana/scenes';
+import { Dashboard } from '@grafana/schema/dist/esm/index.gen';
+import { CollapsableSection, Icon, Spinner, Stack, Tooltip, useStyles2 } from '@grafana/ui';
+import { Trans } from 'app/core/internationalization';
+
+import { VariableUsagesButton } from '../../variables/VariableUsagesButton';
+import { getUnknownsNetwork, UsagesToNetwork } from '../../variables/utils';
+
+export const SLOW_VARIABLES_EXPANSION_THRESHOLD = 1000;
+
+export interface VariablesUnknownTableProps {
+ variables: Array>;
+ dashboard: Dashboard | null;
+}
+
+export function VariablesUnknownTable({ variables, dashboard }: VariablesUnknownTableProps): ReactElement {
+ const [open, setOpen] = useState(false);
+ const [changed, setChanged] = useState(0);
+ const style = useStyles2(getStyles);
+
+ useEffect(() => setChanged((prevState) => prevState + 1), [variables, dashboard]);
+
+ const [{ loading, value: usages }, getUnknowns] = useAsyncFn(async () => {
+ const start = Date.now();
+ const unknownsNetwork = await getUnknownsNetwork(variables, dashboard);
+ const stop = Date.now();
+ const elapsed = stop - start;
+ if (elapsed >= SLOW_VARIABLES_EXPANSION_THRESHOLD) {
+ reportInteraction('Slow unknown variables expansion', { elapsed });
+ }
+ setChanged(0);
+
+ return unknownsNetwork;
+ }, [variables, dashboard]);
+
+ const onToggle = (isOpen: boolean) => {
+ if (isOpen) {
+ reportInteraction('Unknown variables section expanded');
+
+ // make sure we only fetch when opened and variables or dashboard have changed
+ if (changed > 0) {
+ getUnknowns();
+ }
+ }
+
+ setOpen(isOpen);
+ };
+
+ return (
+
+ } isOpen={open} onToggle={onToggle}>
+ {loading || !usages ? (
+
+
+
+ Loading...
+
+
+
+
+ ) : usages.length > 0 ? (
+
+ ) : (
+
+ )}
+
+
+ );
+}
+
+function CollapseLabel(): ReactElement {
+ const style = useStyles2(getStyles);
+ return (
+
+ Renamed or missing variables
+
+
+
+
+ );
+}
+
+function NoUnknowns(): ReactElement {
+ return (
+
+ No renamed or missing variables found.
+
+ );
+}
+
+function UnknownTable({ usages }: { usages: UsagesToNetwork[] }): ReactElement {
+ const style = useStyles2(getStyles);
+ return (
+
+
+
+ |
+ Variable
+ |
+ |
+
+
+
+ {usages.map((usage) => {
+ const name = typeof usage.variable === 'string' ? usage.variable : usage.variable.state.name;
+ return (
+
+ |
+ {name}
+ |
+ |
+ |
+ |
+
+
+ |
+
+ );
+ })}
+
+
+ );
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+ container: css({
+ marginTop: theme.spacing(4),
+ paddingTop: theme.spacing(4),
+ }),
+ infoIcon: css({
+ marginLeft: theme.spacing(1),
+ }),
+ defaultColumn: css({
+ width: '1%',
+ }),
+ firstColumn: css({
+ width: '1%',
+ verticalAlign: 'top',
+ color: theme.colors.text.maxContrast,
+ }),
+ lastColumn: css({
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ width: '100%',
+ textAlign: 'right',
+ }),
+});
diff --git a/public/app/features/dashboard-scene/variables/VariableUsagesButton.tsx b/public/app/features/dashboard-scene/variables/VariableUsagesButton.tsx
new file mode 100644
index 00000000000..bc83a262bc7
--- /dev/null
+++ b/public/app/features/dashboard-scene/variables/VariableUsagesButton.tsx
@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+
+import { reportInteraction } from '@grafana/runtime';
+import { IconButton } from '@grafana/ui';
+import { NetworkGraphModal } from 'app/features/variables/inspect/NetworkGraphModal';
+
+import { UsagesToNetwork } from './utils';
+
+interface Props {
+ id: string;
+ usages: UsagesToNetwork[];
+ isAdhoc: boolean;
+}
+
+export const VariableUsagesButton = ({ id, usages, isAdhoc }: Props) => {
+ const network = useMemo(
+ () => usages.find((n) => (typeof n.variable === 'string' ? n.variable : n.variable.state.name) === id),
+ [usages, id]
+ );
+ if (usages.length === 0 || isAdhoc || !network) {
+ return null;
+ }
+
+ const nodes = network.nodes.map((n) => {
+ if (n.label.includes(`$${id}`)) {
+ return { ...n, color: '#FB7E81' };
+ }
+ return n;
+ });
+
+ return (
+
+ {({ showModal }) => {
+ return (
+ {
+ reportInteraction('Show variable usages');
+ showModal();
+ }}
+ name="code-branch"
+ tooltip="Show usages"
+ />
+ );
+ }}
+
+ );
+};
diff --git a/public/app/features/dashboard-scene/variables/utils.test.ts b/public/app/features/dashboard-scene/variables/utils.test.ts
index 9d5d99e4b88..4ddab168cb2 100644
--- a/public/app/features/dashboard-scene/variables/utils.test.ts
+++ b/public/app/features/dashboard-scene/variables/utils.test.ts
@@ -1,10 +1,17 @@
import { TestVariable } from '@grafana/scenes';
+import { Dashboard } from '@grafana/schema';
import { variableAdapters } from 'app/features/variables/adapters';
import { createCustomVariableAdapter } from 'app/features/variables/custom/adapter';
import { createDataSourceVariableAdapter } from 'app/features/variables/datasource/adapter';
import { createQueryVariableAdapter } from 'app/features/variables/query/adapter';
-import { createDependencyEdges, createDependencyNodes } from './utils';
+import {
+ createDependencyEdges,
+ getVariableName,
+ createDependencyNodes,
+ createUsagesNetwork,
+ transformUsagesToNetwork,
+} from './utils';
variableAdapters.setInit(() => [
createDataSourceVariableAdapter(),
@@ -12,6 +19,54 @@ variableAdapters.setInit(() => [
createQueryVariableAdapter(),
]);
+const dashboardMock: Dashboard = {
+ panels: [
+ {
+ datasource: {
+ type: 'prometheus',
+ uid: 'gdev-prometheus',
+ },
+ targets: [
+ {
+ datasource: {
+ type: 'prometheus',
+ uid: 'gdev-prometheus',
+ },
+ disableTextWrap: false,
+ editorMode: 'code',
+ expr: 'go_gc_duration_seconds{job=$query0)',
+ fullMetaSearch: false,
+ includeNullMetadata: true,
+ instant: false,
+ legendFormat: '__auto',
+ range: true,
+ refId: 'A',
+ useBackend: false,
+ },
+ {
+ datasource: {
+ type: 'prometheus',
+ uid: 'gdev-prometheus',
+ },
+ disableTextWrap: false,
+ editorMode: 'code',
+ expr: 'go_gc_duration_seconds{job=$query1)',
+ fullMetaSearch: false,
+ includeNullMetadata: true,
+ instant: false,
+ legendFormat: '__auto',
+ range: true,
+ refId: 'A',
+ useBackend: false,
+ },
+ ],
+ title: 'Panel Title',
+ type: 'timeseries',
+ },
+ ],
+ schemaVersion: 40,
+};
+
describe('createDependencyNodes', () => {
it('should create node for each variable', () => {
const variables = [
@@ -38,3 +93,73 @@ describe('createDependencyEdges', () => {
expect(graphEdges).toContainEqual({ from: 'C', to: 'B' });
});
});
+
+describe('createUsagesNetwork', () => {
+ it('should create usage network for variables', () => {
+ const variables = [
+ new TestVariable({
+ type: 'query',
+ name: 'query0',
+ loading: false,
+ error: null,
+ }),
+ new TestVariable({
+ type: 'query',
+ name: 'query1',
+ loading: false,
+ error: null,
+ }),
+ ];
+
+ const usagesNetwork = createUsagesNetwork(variables, dashboardMock);
+ expect(usagesNetwork).toHaveLength(2);
+ expect(usagesNetwork[0].variable.state.name).toBe('query0');
+ expect(usagesNetwork[1].variable.state.name).toBe('query1');
+ });
+
+ it('should not create usage network for variables that are not part of the dashboard', () => {
+ const variables = [
+ new TestVariable({
+ type: 'query',
+ name: 'query3',
+ loading: false,
+ error: null,
+ }),
+ ];
+
+ const usagesNetwork = createUsagesNetwork(variables, dashboardMock);
+ expect(usagesNetwork).toHaveLength(0);
+ });
+});
+
+describe('transformUsagesToNetwork', () => {
+ it('should transform usages to network', () => {
+ const variables = [
+ new TestVariable({ name: 'A', query: 'A.*', value: '', text: '', options: [] }),
+ new TestVariable({ name: 'B', query: 'B.*', value: '', text: '', options: [] }),
+ ];
+ const usages = [
+ { variable: variables[0], tree: { key: 'value' } },
+ { variable: variables[1], tree: { key: 'value' } },
+ ];
+
+ const network = transformUsagesToNetwork(usages);
+ expect(network).toHaveLength(2);
+ expect(network[0].nodes).toContainEqual({ id: 'dashboard', label: 'dashboard' });
+ expect(network[0].edges).toHaveLength(2);
+ });
+});
+
+describe('getVariableName', () => {
+ it('should return undefined if no match is found', () => {
+ expect(getVariableName('no variable here')).toBeUndefined();
+ });
+
+ it('should return undefined if variable matches inherited object prop names', () => {
+ expect(getVariableName('${toString}')).toBeUndefined();
+ });
+
+ it('should return the variable name if it exists and does not match inherited object prop names', () => {
+ expect(getVariableName('${myVariable}')).toBe('myVariable');
+ });
+});
diff --git a/public/app/features/dashboard-scene/variables/utils.ts b/public/app/features/dashboard-scene/variables/utils.ts
index d5bc99e401c..dd9595ea547 100644
--- a/public/app/features/dashboard-scene/variables/utils.ts
+++ b/public/app/features/dashboard-scene/variables/utils.ts
@@ -1,5 +1,9 @@
import { SceneVariable, SceneVariableState } from '@grafana/scenes';
-import { GraphEdge, GraphNode } from 'app/features/variables/inspect/utils';
+import { Dashboard } from '@grafana/schema/dist/esm/index.gen';
+import { safeStringifyValue } from 'app/core/utils/explore';
+import { GraphEdge, GraphNode, getPropsWithVariable } from 'app/features/variables/inspect/utils';
+
+export const variableRegex = /\$(\w+)|\[\[(\w+?)(?::(\w+))?\]\]|\${(\w+)(?:\.([^:^\}]+))?(?::([^\}]+))?}/g;
export function createDependencyNodes(variables: Array>): GraphNode[] {
return variables.map((variable) => ({ id: variable.state.name, label: `${variable.state.name}` }));
@@ -26,3 +30,222 @@ export const createDependencyEdges = (variables: Array;
+ tree: unknown;
+}
+
+export interface UsagesToNetwork {
+ /** string when unknown/missing variable otherwise SceneVariable */
+ variable: string | SceneVariable;
+ nodes: GraphNode[];
+ edges: GraphEdge[];
+ showGraph: boolean;
+}
+
+export function createUsagesNetwork(variables: Array>, dashboard: Dashboard) {
+ if (!dashboard) {
+ return [];
+ }
+
+ let usages: VariableUsageTree[] = [];
+
+ for (const variable of variables) {
+ const variableId = variable.state.name;
+ const props = getPropsWithVariable(variableId, { key: 'model', value: dashboard }, {});
+
+ if (Object.keys(props).length) {
+ usages.push({ variable, tree: props });
+ }
+ }
+
+ return usages;
+}
+
+export function transformUsagesToNetwork(
+ usages: Array
+): UsagesToNetwork[] {
+ const results: UsagesToNetwork[] = [];
+
+ for (const usage of usages) {
+ const { variable, tree } = usage;
+ const result: UsagesToNetwork = {
+ variable,
+ nodes: [{ id: 'dashboard', label: 'dashboard' }],
+ edges: [],
+ showGraph: false,
+ };
+ results.push(traverseTree(result, { id: 'dashboard', value: tree }));
+ }
+
+ return results;
+}
+
+export const traverseTree = (usage: UsagesToNetwork, parent: { id: string; value: unknown }): UsagesToNetwork => {
+ const { id, value } = parent;
+ const { nodes, edges } = usage;
+
+ if (value && typeof value === 'string') {
+ const leafId = `${parent.id}-${value}`;
+ nodes.push({ id: leafId, label: value });
+ edges.push({ from: leafId, to: id });
+
+ return usage;
+ }
+
+ if (isRecord(value)) {
+ const keys = Object.keys(value);
+ for (const key of keys) {
+ const leafId = `${parent.id}-${key}`;
+ nodes.push({ id: leafId, label: key });
+ edges.push({ from: leafId, to: id });
+ usage = traverseTree(usage, { id: leafId, value: value[key] });
+ }
+
+ return usage;
+ }
+
+ return usage;
+};
+
+export const getVariableUsages = (variableId: string, usages: VariableUsageTree[]): number => {
+ const usage = usages.find((usage) => usage.variable.state.name === variableId);
+ if (!usage) {
+ return 0;
+ }
+
+ if (isRecord(usage.tree)) {
+ return countLeaves(usage.tree);
+ }
+
+ return 0;
+};
+
+const countLeaves = (object: object): number => {
+ const total = Object.values(object).reduce((count, value) => {
+ if (typeof value === 'object') {
+ return count + countLeaves(value);
+ }
+
+ return count + 1;
+ }, 0);
+
+ return total;
+};
+
+export async function getUnknownsNetwork(
+ variables: Array>,
+ dashboard: Dashboard | null
+): Promise {
+ return new Promise((resolve, reject) => {
+ // can be an expensive call so we avoid blocking the main thread
+ setTimeout(() => {
+ try {
+ const unknowns = createUnknownsNetwork(variables, dashboard);
+ resolve(transformUsagesToNetwork(unknowns));
+ } catch (e) {
+ reject(e);
+ }
+ }, 200);
+ });
+}
+
+type UnknownVariableUsageTree = {
+ variable: string;
+ tree: unknown;
+};
+
+function createUnknownsNetwork(
+ variables: Array>,
+ dashboard: Dashboard | null
+): UnknownVariableUsageTree[] {
+ if (!dashboard) {
+ return [];
+ }
+
+ let unknown: UnknownVariableUsageTree[] = [];
+ const unknownVariables = getUnknownVariableStrings(variables, dashboard);
+ for (const unknownVariable of unknownVariables) {
+ const props = getPropsWithVariable(unknownVariable, { key: 'model', value: dashboard }, {});
+ if (Object.keys(props).length) {
+ unknown.push({ variable: unknownVariable, tree: props });
+ }
+ }
+
+ return unknown;
+}
+
+export const getUnknownVariableStrings = (variables: Array>, model: Dashboard) => {
+ variableRegex.lastIndex = 0;
+ const unknownVariableNames: string[] = [];
+ const modelAsString = safeStringifyValue(model, 2);
+ const matches = modelAsString.match(variableRegex);
+
+ if (!matches) {
+ return unknownVariableNames;
+ }
+
+ for (const match of matches) {
+ if (!match) {
+ continue;
+ }
+
+ if (match.indexOf('$__') !== -1) {
+ // ignore builtin variables
+ continue;
+ }
+
+ if (match.indexOf('${__') !== -1) {
+ // ignore builtin variables
+ continue;
+ }
+
+ if (match.indexOf('$hashKey') !== -1) {
+ // ignore Angular props
+ continue;
+ }
+
+ const variableName = getVariableName(match);
+
+ if (variables.some((variable) => variable.state.name === variableName)) {
+ // ignore defined variables
+ continue;
+ }
+
+ if (unknownVariableNames.find((name) => name === variableName)) {
+ continue;
+ }
+
+ if (variableName) {
+ unknownVariableNames.push(variableName);
+ }
+ }
+
+ return unknownVariableNames;
+};
+
+export function getVariableName(expression: string) {
+ const match = variableRegexExec(expression);
+ if (!match) {
+ return undefined;
+ }
+ const variableName = match.slice(1).find((match) => match !== undefined);
+
+ // ignore variables that match inherited object prop names
+ if (variableName! in {}) {
+ return undefined;
+ }
+
+ return variableName;
+}
+
+// Helper function since lastIndex is not reset
+export const variableRegexExec = (variableString: string) => {
+ variableRegex.lastIndex = 0;
+ return variableRegex.exec(variableString);
+};
+
+function isRecord(value: unknown): value is Record {
+ return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
diff --git a/public/app/features/datasources/components/picker/DataSourcePicker.test.tsx b/public/app/features/datasources/components/picker/DataSourcePicker.test.tsx
index d6accb33324..727cd1a2e59 100644
--- a/public/app/features/datasources/components/picker/DataSourcePicker.test.tsx
+++ b/public/app/features/datasources/components/picker/DataSourcePicker.test.tsx
@@ -1,6 +1,5 @@
import { findByText, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
+import userEvent, { UserEvent } from '@testing-library/user-event';
import {
DataSourceInstanceSettings,
diff --git a/public/app/features/manage-dashboards/utils/validation.ts b/public/app/features/manage-dashboards/utils/validation.ts
index df4b3a1bef8..b6d78b9b952 100644
--- a/public/app/features/manage-dashboards/utils/validation.ts
+++ b/public/app/features/manage-dashboards/utils/validation.ts
@@ -1,6 +1,6 @@
import { t } from 'i18next';
-import { getBackendSrv } from '@grafana/runtime';
+import { getDashboardAPI } from 'app/features/dashboard/api/dashboard_api';
import { validationSrv } from '../services/ValidationSrv';
@@ -47,8 +47,8 @@ export const validateTitle = (newTitle: string, folderUid: string) => {
};
export const validateUid = (value: string) => {
- return getBackendSrv()
- .get(`/api/dashboards/uid/${value}`)
+ return getDashboardAPI()
+ .getDashboardDTO(value)
.then((existingDashboard) => {
return `Dashboard named '${existingDashboard?.dashboard.title}' in folder '${existingDashboard?.meta.folderTitle}' has the same UID`;
})
diff --git a/public/app/features/migrate-to-cloud/api/index.ts b/public/app/features/migrate-to-cloud/api/index.ts
index 85af33ebdfd..c39331c8edb 100644
--- a/public/app/features/migrate-to-cloud/api/index.ts
+++ b/public/app/features/migrate-to-cloud/api/index.ts
@@ -1,5 +1,5 @@
export * from './endpoints.gen';
-import { BaseQueryFn, EndpointDefinition } from '@reduxjs/toolkit/dist/query';
+import { BaseQueryFn, EndpointDefinition } from '@reduxjs/toolkit/query';
import { generatedAPI } from './endpoints.gen';
diff --git a/public/app/features/plugins/admin/api.ts b/public/app/features/plugins/admin/api.ts
index 45f95e16263..0479721f708 100644
--- a/public/app/features/plugins/admin/api.ts
+++ b/public/app/features/plugins/admin/api.ts
@@ -94,6 +94,7 @@ async function getPluginVersions(id: string, isPublished: boolean): Promise
@@ -22,7 +26,7 @@ export function PluginDetailsRightPanel(props: Props): React.ReactElement | null
Installed version:
- {plugin.installedVersion}
+ {plugin.installedVersion}
)}
{info.map((infoItem, index) => {
@@ -32,7 +36,9 @@ export function PluginDetailsRightPanel(props: Props): React.ReactElement | null
Latest version:
- {getLatestCompatibleVersion(plugin.details?.versions)?.version}
+
+ {getLatestCompatibleVersion(plugin.details?.versions)?.version}
+
);
}
@@ -98,3 +104,11 @@ export function PluginDetailsRightPanel(props: Props): React.ReactElement | null
);
}
+
+export const getStyles = (theme: GrafanaTheme2) => {
+ return {
+ pluginVersionDetails: css({
+ wordBreak: 'break-word',
+ }),
+ };
+};
diff --git a/public/app/features/plugins/admin/components/VersionInstallButton.tsx b/public/app/features/plugins/admin/components/VersionInstallButton.tsx
index a26973b704c..58774fc30b8 100644
--- a/public/app/features/plugins/admin/components/VersionInstallButton.tsx
+++ b/public/app/features/plugins/admin/components/VersionInstallButton.tsx
@@ -20,6 +20,7 @@ interface Props {
latestCompatibleVersion?: string;
installedVersion?: string;
disabled: boolean;
+ tooltip?: string;
onConfirmInstallation: () => void;
}
@@ -29,6 +30,7 @@ export const VersionInstallButton = ({
latestCompatibleVersion,
installedVersion,
disabled,
+ tooltip,
onConfirmInstallation,
}: Props) => {
const install = useInstall();
@@ -119,6 +121,8 @@ export const VersionInstallButton = ({
onClick={onInstallClick}
className={styles.button}
hidden={hidden}
+ tooltip={tooltip}
+ tooltipPlacement="bottom-start"
>
{label} {isInstalling ? : getIcon(label)}
diff --git a/public/app/features/plugins/admin/components/VersionList.tsx b/public/app/features/plugins/admin/components/VersionList.tsx
index 56bc3f4f6d6..f910ea19ae0 100644
--- a/public/app/features/plugins/admin/components/VersionList.tsx
+++ b/public/app/features/plugins/admin/components/VersionList.tsx
@@ -1,6 +1,5 @@
import { css } from '@emotion/css';
import { useEffect, useState } from 'react';
-import { satisfies } from 'semver';
import { dateTimeFormatTimeAgo, GrafanaTheme2 } from '@grafana/data';
import { config } from '@grafana/runtime';
@@ -23,8 +22,6 @@ export const VersionList = ({ pluginId, versions = [], installedVersion }: Props
const [isInstalling, setIsInstalling] = useState(false);
- const grafanaVersion = config.buildInfo.version;
-
useEffect(() => {
setIsInstalling(false);
}, [installedVersion]);
@@ -49,10 +46,17 @@ export const VersionList = ({ pluginId, versions = [], installedVersion }: Props
{versions.map((version) => {
+ let tooltip: string | undefined = undefined;
const isInstalledVersion = installedVersion === version.version;
- const versionIsIncompatible = version.grafanaDependency
- ? !satisfies(grafanaVersion, version.grafanaDependency, { includePrerelease: true })
- : false;
+ const canInstall = version.angularDetected ? config.angularSupportEnabled : true;
+
+ if (!canInstall) {
+ tooltip = 'This plugin version is AngularJS type which is not supported';
+ }
+
+ if (!version.isCompatible) {
+ tooltip = 'This plugin version is not compatible with the current Grafana version';
+ }
return (
@@ -73,7 +77,8 @@ export const VersionList = ({ pluginId, versions = [], installedVersion }: Props
latestCompatibleVersion={latestCompatibleVersion?.version}
installedVersion={installedVersion}
onConfirmInstallation={onInstallClick}
- disabled={isInstalledVersion || isInstalling || versionIsIncompatible}
+ disabled={isInstalledVersion || isInstalling || !canInstall || !version.isCompatible || !canInstall}
+ tooltip={tooltip}
/>
@@ -110,6 +115,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
th: {
fontSize: theme.typography.h5.fontSize,
},
+ td: {
+ wordBreak: 'break-word',
+ },
'tbody tr:nth-child(odd)': {
background: theme.colors.emphasize(theme.colors.background.primary, 0.02),
},
diff --git a/public/app/features/plugins/admin/types.ts b/public/app/features/plugins/admin/types.ts
index 2ed5a48d495..d9fee5ffc46 100644
--- a/public/app/features/plugins/admin/types.ts
+++ b/public/app/features/plugins/admin/types.ts
@@ -216,6 +216,7 @@ export interface Version {
createdAt: string;
isCompatible: boolean;
grafanaDependency: string | null;
+ angularDetected?: boolean;
}
export interface PluginDetails {
@@ -319,6 +320,7 @@ export type PluginVersion = {
links: Array<{ rel: string; href: string }>;
isCompatible: boolean;
grafanaDependency: string | null;
+ angularDetected?: boolean;
};
export type InstancePlugin = {
diff --git a/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filters.test.tsx b/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filters.test.tsx
index c53a21e423c..9ae9327dae4 100644
--- a/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filters.test.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filters.test.tsx
@@ -1,6 +1,5 @@
import { act, render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
+import userEvent, { UserEvent } from '@testing-library/user-event';
import * as React from 'react';
import { of } from 'rxjs';
diff --git a/public/app/plugins/datasource/azuremonitor/package.json b/public/app/plugins/datasource/azuremonitor/package.json
index 0f5ddb846d7..1bebca032ee 100644
--- a/public/app/plugins/datasource/azuremonitor/package.json
+++ b/public/app/plugins/datasource/azuremonitor/package.json
@@ -28,6 +28,7 @@
"@grafana/e2e-selectors": "11.4.0-pre",
"@grafana/plugin-configs": "11.4.0-pre",
"@testing-library/dom": "10.4.0",
+ "@testing-library/jest-dom": "6.6.3",
"@testing-library/react": "16.0.1",
"@testing-library/user-event": "14.5.2",
"@types/jest": "29.5.14",
diff --git a/public/app/plugins/datasource/azuremonitor/tsconfig.json b/public/app/plugins/datasource/azuremonitor/tsconfig.json
index baaaea04185..40352099203 100644
--- a/public/app/plugins/datasource/azuremonitor/tsconfig.json
+++ b/public/app/plugins/datasource/azuremonitor/tsconfig.json
@@ -1,6 +1,7 @@
{
"compilerOptions": {
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "types": ["node", "jest", "@testing-library/jest-dom"]
},
"extends": "@grafana/plugin-configs/tsconfig.json",
"include": ["."]
diff --git a/public/app/plugins/datasource/cloud-monitoring/package.json b/public/app/plugins/datasource/cloud-monitoring/package.json
index 7b505cd0eda..b8e82012218 100644
--- a/public/app/plugins/datasource/cloud-monitoring/package.json
+++ b/public/app/plugins/datasource/cloud-monitoring/package.json
@@ -29,6 +29,7 @@
"@grafana/e2e-selectors": "11.4.0-pre",
"@grafana/plugin-configs": "11.4.0-pre",
"@testing-library/dom": "10.4.0",
+ "@testing-library/jest-dom": "6.6.3",
"@testing-library/react": "16.0.1",
"@testing-library/user-event": "14.5.2",
"@types/debounce-promise": "3.1.9",
diff --git a/public/app/plugins/datasource/cloud-monitoring/tsconfig.json b/public/app/plugins/datasource/cloud-monitoring/tsconfig.json
index baaaea04185..40352099203 100644
--- a/public/app/plugins/datasource/cloud-monitoring/tsconfig.json
+++ b/public/app/plugins/datasource/cloud-monitoring/tsconfig.json
@@ -1,6 +1,7 @@
{
"compilerOptions": {
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "types": ["node", "jest", "@testing-library/jest-dom"]
},
"extends": "@grafana/plugin-configs/tsconfig.json",
"include": ["."]
diff --git a/public/app/plugins/datasource/loki/LanguageProvider.test.ts b/public/app/plugins/datasource/loki/LanguageProvider.test.ts
index c397934b356..c801a15c7a5 100644
--- a/public/app/plugins/datasource/loki/LanguageProvider.test.ts
+++ b/public/app/plugins/datasource/loki/LanguageProvider.test.ts
@@ -441,6 +441,14 @@ describe('Language completion provider', () => {
start: 1560153109000,
});
});
+
+ it('should filter internal labels', async () => {
+ const datasourceWithLabels = setup({ foo: [], bar: [], __name__: [], __stream_shard__: [] });
+
+ const instance = new LanguageProvider(datasourceWithLabels);
+ const labels = await instance.fetchLabels();
+ expect(labels).toEqual(['bar', 'foo']);
+ });
});
});
diff --git a/public/app/plugins/datasource/loki/LanguageProvider.ts b/public/app/plugins/datasource/loki/LanguageProvider.ts
index e56acf6f3d7..5d6e5684f2b 100644
--- a/public/app/plugins/datasource/loki/LanguageProvider.ts
+++ b/public/app/plugins/datasource/loki/LanguageProvider.ts
@@ -176,7 +176,7 @@ export default class LokiLanguageProvider extends LanguageProvider {
const labels = res
.slice()
.sort()
- .filter((label) => label !== '__name__');
+ .filter((label: string) => label.startsWith('__') === false);
this.labelKeys = labels;
return this.labelKeys;
}
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index bf8c92baf02..f430b69d65d 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -3336,6 +3336,12 @@
"info-box-content": "Variables enable more interactive and dynamic dashboards. Instead of hard-coding things like server or sensor names in your metric queries you can use variables in their place. Variables are shown as list boxes at the top of the dashboard. These drop-down lists make it easy to change the data being displayed in your dashboard.",
"info-box-content-2": "Check out the <2>Templates and variables documentation for more information.",
"title": "There are no variables added yet"
+ },
+ "unknown-table": {
+ "loading": "Loading...",
+ "no-unknowns": "No renamed or missing variables found.",
+ "renamed-or-missing-variables": "Renamed or missing variables",
+ "variable": "Variable"
}
}
}
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index b6d68de3c92..fe6defcf56c 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -3336,6 +3336,12 @@
"info-box-content": "Väřįäþľęş ęʼnäþľę mőřę įʼnŧęřäčŧįvę äʼnđ đyʼnämįč đäşĥþőäřđş. Ĩʼnşŧęäđ őƒ ĥäřđ-čőđįʼnģ ŧĥįʼnģş ľįĸę şęřvęř őř şęʼnşőř ʼnämęş įʼn yőūř męŧřįč qūęřįęş yőū čäʼn ūşę väřįäþľęş įʼn ŧĥęįř pľäčę. Väřįäþľęş äřę şĥőŵʼn äş ľįşŧ þőχęş äŧ ŧĥę ŧőp őƒ ŧĥę đäşĥþőäřđ. Ŧĥęşę đřőp-đőŵʼn ľįşŧş mäĸę įŧ ęäşy ŧő čĥäʼnģę ŧĥę đäŧä þęįʼnģ đįşpľäyęđ įʼn yőūř đäşĥþőäřđ.",
"info-box-content-2": "Cĥęčĸ őūŧ ŧĥę <2>Ŧęmpľäŧęş äʼnđ väřįäþľęş đőčūmęʼnŧäŧįőʼn ƒőř mőřę įʼnƒőřmäŧįőʼn.",
"title": "Ŧĥęřę äřę ʼnő väřįäþľęş äđđęđ yęŧ"
+ },
+ "unknown-table": {
+ "loading": "Ŀőäđįʼnģ...",
+ "no-unknowns": "Ńő řęʼnämęđ őř mįşşįʼnģ väřįäþľęş ƒőūʼnđ.",
+ "renamed-or-missing-variables": "Ŗęʼnämęđ őř mįşşįʼnģ väřįäþľęş",
+ "variable": "Väřįäþľę"
}
}
}
diff --git a/public/openapi3.json b/public/openapi3.json
index b720c4e8b07..6f003b70069 100644
--- a/public/openapi3.json
+++ b/public/openapi3.json
@@ -1405,6 +1405,16 @@
},
"description": "(empty)"
},
+ "getUsers": {
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/GetUsersBody"
+ }
+ }
+ },
+ "description": "(empty)"
+ },
"goneError": {
"content": {
"application/json": {
@@ -5114,6 +5124,21 @@
},
"type": "object"
},
+ "EmailSchema": {
+ "description": "Implementation of SCIM specification email schema\nhttps://datatracker.ietf.org/doc/html/rfc7643#section-4.1.2",
+ "properties": {
+ "primary": {
+ "type": "boolean"
+ },
+ "type": {
+ "type": "string"
+ },
+ "value": {
+ "type": "string"
+ }
+ },
+ "type": "object"
+ },
"EmbeddedContactPoint": {
"description": "EmbeddedContactPoint is the contact point type that is used\nby grafanas embedded alertmanager implementation.",
"properties": {
@@ -5828,6 +5853,35 @@
},
"type": "object"
},
+ "GetUsersBody": {
+ "properties": {
+ "Resources": {
+ "items": {
+ "$ref": "#/components/schemas/UserSchema"
+ },
+ "type": "array"
+ },
+ "itemsPerPage": {
+ "format": "int64",
+ "type": "integer"
+ },
+ "schemas": {
+ "items": {
+ "type": "string"
+ },
+ "type": "array"
+ },
+ "startIndex": {
+ "format": "int64",
+ "type": "integer"
+ },
+ "totalResults": {
+ "format": "int64",
+ "type": "integer"
+ }
+ },
+ "type": "object"
+ },
"GettableAlertmanagers": {
"properties": {
"data": {
@@ -7124,6 +7178,29 @@
},
"type": "array"
},
+ "MetaSchema": {
+ "description": "Implementation of SCIM specification meta schema\nhttps://datatracker.ietf.org/doc/html/rfc7643#section-3.1",
+ "properties": {
+ "created": {
+ "format": "date-time",
+ "type": "string"
+ },
+ "lastModified": {
+ "format": "date-time",
+ "type": "string"
+ },
+ "location": {
+ "type": "string"
+ },
+ "resourceType": {
+ "type": "string"
+ },
+ "version": {
+ "type": "string"
+ }
+ },
+ "type": "object"
+ },
"Metadata": {
"additionalProperties": {
"type": "boolean"
@@ -7350,6 +7427,24 @@
},
"type": "object"
},
+ "NameSchema": {
+ "description": "Implementation of SCIM specification name schema\nhttps://datatracker.ietf.org/doc/html/rfc7643#section-4.1.1",
+ "properties": {
+ "familyName": {
+ "type": "string"
+ },
+ "formatted": {
+ "type": "string"
+ },
+ "givenName": {
+ "type": "string"
+ },
+ "middleName": {
+ "type": "string"
+ }
+ },
+ "type": "object"
+ },
"NamespaceConfigResponse": {
"additionalProperties": {
"items": {
@@ -12211,6 +12306,45 @@
},
"type": "object"
},
+ "UserSchema": {
+ "description": "Implementation of SCIM specification user schema\nhttps://datatracker.ietf.org/doc/html/rfc7643#section-4.1.1",
+ "properties": {
+ "active": {
+ "type": "boolean"
+ },
+ "displayName": {
+ "type": "string"
+ },
+ "emails": {
+ "items": {
+ "$ref": "#/components/schemas/EmailSchema"
+ },
+ "type": "array"
+ },
+ "externalId": {
+ "type": "string"
+ },
+ "id": {
+ "type": "string"
+ },
+ "meta": {
+ "$ref": "#/components/schemas/MetaSchema"
+ },
+ "name": {
+ "$ref": "#/components/schemas/NameSchema"
+ },
+ "schemas": {
+ "items": {
+ "type": "string"
+ },
+ "type": "array"
+ },
+ "userName": {
+ "type": "string"
+ }
+ },
+ "type": "object"
+ },
"UserSearchHitDTO": {
"properties": {
"authLabels": {
@@ -22484,12 +22618,63 @@
}
},
"/scim/users/": {
+ "delete": {
+ "operationId": "deleteUser",
+ "responses": {
+ "200": {
+ "$ref": "#/components/responses/okResponse"
+ },
+ "400": {
+ "$ref": "#/components/responses/badRequestError"
+ },
+ "401": {
+ "$ref": "#/components/responses/unauthorisedError"
+ },
+ "404": {
+ "$ref": "#/components/responses/notFoundError"
+ },
+ "500": {
+ "$ref": "#/components/responses/internalServerError"
+ }
+ },
+ "summary": "Deletes user.",
+ "tags": [
+ "user"
+ ]
+ },
+ "get": {
+ "operationId": "getUsers",
+ "responses": {
+ "200": {
+ "$ref": "#/components/responses/getUsers"
+ },
+ "400": {
+ "$ref": "#/components/responses/badRequestError"
+ },
+ "401": {
+ "$ref": "#/components/responses/unauthorisedError"
+ },
+ "404": {
+ "$ref": "#/components/responses/notFoundError"
+ },
+ "500": {
+ "$ref": "#/components/responses/internalServerError"
+ }
+ },
+ "summary": "Fetches all users in UserSchema format.",
+ "tags": [
+ "users"
+ ]
+ },
"post": {
"operationId": "createUser",
"responses": {
"200": {
"$ref": "#/components/responses/okResponse"
},
+ "400": {
+ "$ref": "#/components/responses/badRequestError"
+ },
"401": {
"$ref": "#/components/responses/unauthorisedError"
},
@@ -22509,6 +22694,32 @@
]
}
},
+ "/scim/users/:id": {
+ "get": {
+ "operationId": "getUser",
+ "responses": {
+ "200": {
+ "$ref": "#/components/responses/okResponse"
+ },
+ "400": {
+ "$ref": "#/components/responses/badRequestError"
+ },
+ "401": {
+ "$ref": "#/components/responses/unauthorisedError"
+ },
+ "403": {
+ "$ref": "#/components/responses/forbiddenError"
+ },
+ "500": {
+ "$ref": "#/components/responses/internalServerError"
+ }
+ },
+ "summary": "Gets user by id.",
+ "tags": [
+ "user"
+ ]
+ }
+ },
"/search": {
"get": {
"operationId": "search",
diff --git a/scripts/cli/tsconfig.json b/scripts/cli/tsconfig.json
index be60908b35d..9ad59a649d1 100644
--- a/scripts/cli/tsconfig.json
+++ b/scripts/cli/tsconfig.json
@@ -1,5 +1,6 @@
{
"compilerOptions": {
+ "moduleResolution": "node",
"module": "commonjs"
},
"extends": "../../tsconfig.json",
diff --git a/tsconfig.json b/tsconfig.json
index c24104df189..42db6464f66 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,6 +10,7 @@
"useUnknownInCatchVariables": true,
"incremental": true,
"isolatedModules": true,
+ "moduleResolution": "bundler",
"tsBuildInfoFile": "./tsconfig.tsbuildinfo",
"paths": {
"@grafana/schema/dist/esm/*": ["../packages/grafana-schema/src/*"]
diff --git a/yarn.lock b/yarn.lock
index 5dfb36f7583..3d949ee525c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2785,6 +2785,7 @@ __metadata:
"@grafana/ui": "npm:11.4.0-pre"
"@kusto/monaco-kusto": "npm:^10.0.0"
"@testing-library/dom": "npm:10.4.0"
+ "@testing-library/jest-dom": "npm:6.6.3"
"@testing-library/react": "npm:16.0.1"
"@testing-library/user-event": "npm:14.5.2"
"@types/jest": "npm:29.5.14"
@@ -3075,6 +3076,7 @@ __metadata:
"@grafana/schema": "npm:11.4.0-pre"
"@grafana/ui": "npm:11.4.0-pre"
"@testing-library/dom": "npm:10.4.0"
+ "@testing-library/jest-dom": "npm:6.6.3"
"@testing-library/react": "npm:16.0.1"
"@testing-library/user-event": "npm:14.5.2"
"@types/debounce-promise": "npm:3.1.9"
@@ -3990,7 +3992,7 @@ __metadata:
rc-time-picker: "npm:^3.7.3"
rc-tooltip: "npm:6.2.1"
react: "npm:18.2.0"
- react-calendar: "npm:5.1.0"
+ react-calendar: "npm:^5.1.0"
react-colorful: "npm:5.6.1"
react-custom-scrollbars-2: "npm:4.5.0"
react-dom: "npm:18.2.0"
@@ -6463,19 +6465,19 @@ __metadata:
languageName: node
linkType: hard
-"@react-types/menu@npm:3.9.12":
- version: 3.9.12
- resolution: "@react-types/menu@npm:3.9.12"
+"@react-types/menu@npm:3.9.13":
+ version: 3.9.13
+ resolution: "@react-types/menu@npm:3.9.13"
dependencies:
- "@react-types/overlays": "npm:^3.8.10"
- "@react-types/shared": "npm:^3.25.0"
+ "@react-types/overlays": "npm:^3.8.11"
+ "@react-types/shared": "npm:^3.26.0"
peerDependencies:
- react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
- checksum: 10/a6276115c5da08c63b9641b985c366435e69847af680ace5fef32ce2ca6eab9669db5cc8f5a20e01377a54f17392a95864ee40831b13b2258ed6d43bcc1398f5
+ react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+ checksum: 10/ce1d5310e16300e06ad7c4a940525279b54d097242e3c88f3e6272e130d5036f18fda132c78836f8eac1da0a19a5f08d1c560491f8d8a30ff1dab5ea95b89852
languageName: node
linkType: hard
-"@react-types/overlays@npm:3.8.10, @react-types/overlays@npm:^3.8.10":
+"@react-types/overlays@npm:3.8.10":
version: 3.8.10
resolution: "@react-types/overlays@npm:3.8.10"
dependencies:
@@ -6486,6 +6488,17 @@ __metadata:
languageName: node
linkType: hard
+"@react-types/overlays@npm:^3.8.10, @react-types/overlays@npm:^3.8.11":
+ version: 3.8.11
+ resolution: "@react-types/overlays@npm:3.8.11"
+ dependencies:
+ "@react-types/shared": "npm:^3.26.0"
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+ checksum: 10/3906806bda8d953d46409214be98b4e7a58d1b677d29f358f6a28e9a6238d0672b83382527607a69ccc94174c0b156b3f96140b950a4fab5c44775382929d3f9
+ languageName: node
+ linkType: hard
+
"@react-types/shared@npm:3.25.0":
version: 3.25.0
resolution: "@react-types/shared@npm:3.25.0"
@@ -17223,7 +17236,7 @@ __metadata:
"@react-aria/utils": "npm:3.25.3"
"@react-awesome-query-builder/ui": "npm:6.6.4"
"@react-types/button": "npm:3.10.1"
- "@react-types/menu": "npm:3.9.12"
+ "@react-types/menu": "npm:3.9.13"
"@react-types/overlays": "npm:3.8.10"
"@react-types/shared": "npm:3.25.0"
"@reduxjs/toolkit": "npm:2.3.0"
@@ -24738,7 +24751,7 @@ __metadata:
languageName: node
linkType: hard
-"react-calendar@npm:5.1.0":
+"react-calendar@npm:^5.1.0":
version: 5.1.0
resolution: "react-calendar@npm:5.1.0"
dependencies:
|