= ({ dashboard, onNew, onEd
{dataSourceSrv.getInstanceSettings(annotation.datasource)?.name || annotation.datasource?.uid}
|
- {idx !== 0 && (
- onMove(idx, -1)}
- />
- )}
+ {idx !== 0 && onMove(idx, -1)} />}
|
{dashboard.annotations.list.length > 1 && idx !== dashboard.annotations.list.length - 1 ? (
- onMove(idx, 1)}
- />
+ onMove(idx, 1)} />
) : null}
|
diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.test.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.test.tsx
new file mode 100644
index 00000000000..a694be7c3f6
--- /dev/null
+++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.test.tsx
@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+
+import { locationService, setBackendSrv } from '@grafana/runtime';
+import { configureStore } from 'app/store/configureStore';
+
+import { DashboardModel } from '../../state';
+
+import { DashboardSettings } from './DashboardSettings';
+
+jest.mock('@grafana/runtime', () => ({
+ ...jest.requireActual('@grafana/runtime'),
+ locationService: {
+ partial: jest.fn(),
+ },
+}));
+
+setBackendSrv({
+ get: jest.fn().mockResolvedValue({}),
+} as any);
+
+describe('DashboardSettings', () => {
+ it('pressing escape navigates away correctly', async () => {
+ jest.spyOn(locationService, 'partial');
+ const dashboard = new DashboardModel(
+ {
+ title: 'Foo',
+ },
+ {
+ folderId: 1,
+ }
+ );
+ const store = configureStore();
+ render(
+
+
+
+
+
+ );
+
+ expect(screen.getByText('Foo / Settings')).toBeInTheDocument();
+
+ await userEvent.keyboard('{Escape}');
+
+ expect(locationService.partial).toHaveBeenCalledWith({ editview: null });
+ });
+});
diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
index d8494fe6c59..363eae8acc6 100644
--- a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
@@ -49,7 +49,13 @@ const MakeEditable = (props: { onMakeEditable: () => any }) => (
export function DashboardSettings({ dashboard, editview }: Props) {
const ref = useRef(null);
- const { overlayProps } = useOverlay({}, ref);
+ const { overlayProps } = useOverlay(
+ {
+ isOpen: true,
+ onClose,
+ },
+ ref
+ );
const { dialogProps } = useDialog(
{
'aria-label': 'Dashboard settings',
diff --git a/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx b/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
index 4db46c6143f..5da57c62171 100644
--- a/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
+++ b/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
@@ -73,27 +73,15 @@ export const LinkSettingsList: React.FC = ({ dashboard, o
|
- {idx !== 0 && (
- moveLink(idx, -1)}
- />
- )}
+ {idx !== 0 && moveLink(idx, -1)} />}
|
{links.length > 1 && idx !== links.length - 1 ? (
- moveLink(idx, 1)}
- />
+ moveLink(idx, 1)} />
) : null}
|
- duplicateLink(link, idx)} />
+ duplicateLink(link, idx)} />
|
{
this.setState({ search: '' });
}}
@@ -251,7 +250,6 @@ class UnThemedTransformationsEditor extends React.PureComponent {
this.setState({ showPicker: false });
}}
diff --git a/public/app/features/explore/RichHistory/RichHistoryCard.test.tsx b/public/app/features/explore/RichHistory/RichHistoryCard.test.tsx
index 83b73403dc8..7a450f373a0 100644
--- a/public/app/features/explore/RichHistory/RichHistoryCard.test.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryCard.test.tsx
@@ -18,6 +18,11 @@ const mockDS = mockDataSource({
type: DataSourceType.Alertmanager,
});
+jest.mock('@grafana/runtime', () => ({
+ ...jest.requireActual('@grafana/runtime'),
+ reportInteraction: jest.fn(),
+}));
+
jest.mock('@grafana/runtime/src/services/dataSourceSrv', () => {
return {
getDataSourceSrv: () => ({
diff --git a/public/app/features/explore/RichHistory/RichHistoryCard.tsx b/public/app/features/explore/RichHistory/RichHistoryCard.tsx
index 850c46f9ee8..df3efab5bde 100644
--- a/public/app/features/explore/RichHistory/RichHistoryCard.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryCard.tsx
@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { GrafanaTheme, DataSourceApi, DataQuery } from '@grafana/data';
-import { getDataSourceSrv } from '@grafana/runtime';
+import { config, getDataSourceSrv, reportInteraction } from '@grafana/runtime';
import { stylesFactory, useTheme, TextArea, Button, IconButton } from '@grafana/ui';
import { notifyApp } from 'app/core/actions';
import appEvents from 'app/core/app_events';
@@ -176,12 +176,17 @@ export function RichHistoryCard(props: Props) {
const onRunQuery = async () => {
const queriesToRun = query.queries;
- if (query.datasourceName !== datasourceInstance?.name) {
+ const differentDataSource = query.datasourceName !== datasourceInstance?.name;
+ if (differentDataSource) {
await changeDatasource(exploreId, query.datasourceName, { importQueries: true });
setQueries(exploreId, queriesToRun);
} else {
setQueries(exploreId, queriesToRun);
}
+ reportInteraction('grafana_explore_query_history_run', {
+ queryHistoryEnabled: config.queryHistoryEnabled,
+ differentDataSource,
+ });
};
const onCopyQuery = () => {
@@ -196,6 +201,14 @@ export function RichHistoryCard(props: Props) {
};
const onDeleteQuery = () => {
+ const performDelete = (queryId: string) => {
+ deleteHistoryItem(queryId);
+ dispatch(notifyApp(createSuccessNotification('Query deleted')));
+ reportInteraction('grafana_explore_query_history_deleted', {
+ queryHistoryEnabled: config.queryHistoryEnabled,
+ });
+ };
+
// For starred queries, we want confirmation. For non-starred, we don't.
if (query.starred) {
appEvents.publish(
@@ -204,20 +217,20 @@ export function RichHistoryCard(props: Props) {
text: 'Are you sure you want to permanently delete your starred query?',
yesText: 'Delete',
icon: 'trash-alt',
- onConfirm: () => {
- deleteHistoryItem(query.id);
- dispatch(notifyApp(createSuccessNotification('Query deleted')));
- },
+ onConfirm: () => performDelete(query.id),
})
);
} else {
- deleteHistoryItem(query.id);
- dispatch(notifyApp(createSuccessNotification('Query deleted')));
+ performDelete(query.id);
}
};
const onStarrQuery = () => {
starHistoryItem(query.id, !query.starred);
+ reportInteraction('grafana_explore_query_history_starred', {
+ queryHistoryEnabled: config.queryHistoryEnabled,
+ newValue: !query.starred,
+ });
};
const toggleActiveUpdateComment = () => setActiveUpdateComment(!activeUpdateComment);
@@ -225,6 +238,9 @@ export function RichHistoryCard(props: Props) {
const onUpdateComment = () => {
commentHistoryItem(query.id, comment);
setActiveUpdateComment(false);
+ reportInteraction('grafana_explore_query_history_commented', {
+ queryHistoryEnabled: config.queryHistoryEnabled,
+ });
};
const onCancelUpdateComment = () => {
diff --git a/public/app/features/explore/RichHistory/RichHistoryContainer.test.tsx b/public/app/features/explore/RichHistory/RichHistoryContainer.test.tsx
index dfe279eca66..84d1aca02a9 100644
--- a/public/app/features/explore/RichHistory/RichHistoryContainer.test.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryContainer.test.tsx
@@ -17,6 +17,7 @@ jest.mock('@grafana/runtime', () => ({
getList: () => [],
};
},
+ reportInteraction: jest.fn(),
}));
const setup = (propOverrides?: Partial) => {
diff --git a/public/app/features/explore/RichHistory/RichHistoryContainer.tsx b/public/app/features/explore/RichHistory/RichHistoryContainer.tsx
index 099cea64304..72fb7c125f1 100644
--- a/public/app/features/explore/RichHistory/RichHistoryContainer.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryContainer.tsx
@@ -2,6 +2,7 @@
import React, { useEffect, useState } from 'react';
import { connect, ConnectedProps } from 'react-redux';
+import { config, reportInteraction } from '@grafana/runtime';
import { useTheme2 } from '@grafana/ui';
// Types
import { ExploreItemState, StoreState } from 'app/types';
@@ -86,6 +87,9 @@ export function RichHistoryContainer(props: Props) {
useEffect(() => {
initRichHistory();
+ reportInteraction('grafana_explore_query_history_opened', {
+ queryHistoryEnabled: config.queryHistoryEnabled,
+ });
}, [initRichHistory]);
if (!richHistorySettings) {
diff --git a/public/app/features/explore/RichHistory/RichHistoryStarredTab.test.tsx b/public/app/features/explore/RichHistory/RichHistoryStarredTab.test.tsx
index e0434713f69..4cedf1e8e8f 100644
--- a/public/app/features/explore/RichHistory/RichHistoryStarredTab.test.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryStarredTab.test.tsx
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
import React from 'react';
import { SortOrder } from 'app/core/utils/richHistory';
@@ -44,27 +44,27 @@ const setup = (activeDatasourceOnly = false) => {
},
};
- const wrapper = mount();
- return wrapper;
+ const container = render();
+ return container;
};
describe('RichHistoryStarredTab', () => {
describe('sorter', () => {
it('should render sorter', () => {
- const wrapper = setup();
- expect(wrapper.find({ 'aria-label': 'Sort queries' })).toHaveLength(1);
+ const container = setup();
+ expect(container.queryByLabelText('Sort queries')).toBeInTheDocument();
});
});
describe('select datasource', () => {
it('should render select datasource if activeDatasourceOnly is false', () => {
- const wrapper = setup();
- expect(wrapper.find({ 'aria-label': 'Filter queries for data sources(s)' }).exists()).toBeTruthy();
+ const container = setup();
+ expect(container.queryByLabelText('Filter queries for data sources(s)')).toBeInTheDocument();
});
it('should not render select datasource if activeDatasourceOnly is true', () => {
- const wrapper = setup(true);
- expect(wrapper.find({ 'aria-label': 'Filter queries for data sources(s)' }).exists()).toBeFalsy();
+ const container = setup(true);
+ expect(container.queryByLabelText('Filter queries for data sources(s)')).not.toBeInTheDocument();
});
});
});
diff --git a/public/app/features/explore/spec/queryHistory.test.tsx b/public/app/features/explore/spec/queryHistory.test.tsx
index 4133ce61da5..b2c28ebdf99 100644
--- a/public/app/features/explore/spec/queryHistory.test.tsx
+++ b/public/app/features/explore/spec/queryHistory.test.tsx
@@ -40,9 +40,13 @@ import {
const fetchMock = jest.fn();
const postMock = jest.fn();
const getMock = jest.fn();
+const reportInteractionMock = jest.fn();
jest.mock('@grafana/runtime', () => ({
...jest.requireActual('@grafana/runtime'),
getBackendSrv: () => ({ fetch: fetchMock, post: postMock, get: getMock }),
+ reportInteraction: (...args: object[]) => {
+ reportInteractionMock(...args);
+ },
}));
jest.mock('app/core/services/PreferencesService', () => ({
@@ -78,6 +82,7 @@ describe('Explore: Query History', () => {
fetchMock.mockClear();
postMock.mockClear();
getMock.mockClear();
+ reportInteractionMock.mockClear();
tearDown();
});
@@ -103,6 +108,11 @@ describe('Explore: Query History', () => {
// previously added query is in query history
await openQueryHistory();
await assertQueryHistoryExists(RAW_QUERY);
+
+ expect(reportInteractionMock).toBeCalledTimes(2);
+ expect(reportInteractionMock).toBeCalledWith('grafana_explore_query_history_opened', {
+ queryHistoryEnabled: false,
+ });
});
it('adds recently added query if the query history panel is already open', async () => {
@@ -124,10 +134,7 @@ describe('Explore: Query History', () => {
await assertQueryHistory(['{"expr":"query #2"}', '{"expr":"query #1"}']);
});
- /**
- * TODO: #47635 check why this test times out
- */
- it.skip('updates the state in both Explore panes', async () => {
+ it('updates the state in both Explore panes', async () => {
const urlParams = {
left: serializeStateToUrlParam({
datasource: 'loki',
@@ -156,10 +163,17 @@ describe('Explore: Query History', () => {
starQueryHistory(1, ExploreId.left);
await assertQueryHistoryIsStarred([false, true], ExploreId.left);
await assertQueryHistoryIsStarred([false, true], ExploreId.right);
+ expect(reportInteractionMock).toBeCalledWith('grafana_explore_query_history_starred', {
+ queryHistoryEnabled: false,
+ newValue: true,
+ });
deleteQueryHistory(0, ExploreId.left);
await assertQueryHistory(['{"expr":"query #1"}'], ExploreId.left);
await assertQueryHistory(['{"expr":"query #1"}'], ExploreId.right);
+ expect(reportInteractionMock).toBeCalledWith('grafana_explore_query_history_deleted', {
+ queryHistoryEnabled: false,
+ });
});
it('updates query history settings', async () => {
@@ -195,6 +209,9 @@ describe('Explore: Query History', () => {
await openQueryHistory();
expect(postMock).not.toBeCalledWith('/api/query-history/migrate', { queries: [] });
+ expect(reportInteractionMock).toBeCalledWith('grafana_explore_query_history_opened', {
+ queryHistoryEnabled: false,
+ });
});
it('migrates query history from local storage', async () => {
@@ -222,6 +239,9 @@ describe('Explore: Query History', () => {
url: expect.stringMatching('/api/query-history/migrate'),
})
);
+ expect(reportInteractionMock).toBeCalledWith('grafana_explore_query_history_opened', {
+ queryHistoryEnabled: true,
+ });
});
});
diff --git a/public/app/features/explore/state/history.ts b/public/app/features/explore/state/history.ts
index 23aba3ee9e5..e0fe9e9ee19 100644
--- a/public/app/features/explore/state/history.ts
+++ b/public/app/features/explore/state/history.ts
@@ -1,7 +1,7 @@
import { AnyAction, createAction } from '@reduxjs/toolkit';
import { DataQuery, HistoryItem } from '@grafana/data';
-import { config } from '@grafana/runtime';
+import { config, logError } from '@grafana/runtime';
import { RICH_HISTORY_SETTING_KEYS } from 'app/core/history/richHistoryLocalStorageUtils';
import store from 'app/core/store';
import {
@@ -178,9 +178,10 @@ export const initRichHistory = (): ThunkResult => {
// the migration attempt happens only once per session, and the user is informed about the failure
// in a way that can help with potential investigation.
if (config.queryHistoryEnabled && !queriesMigrated && !migrationFailedDuringThisSession) {
- const migrationStatus = await migrateQueryHistoryFromLocalStorage();
- if (migrationStatus === LocalStorageMigrationStatus.Failed) {
+ const migrationResult = await migrateQueryHistoryFromLocalStorage();
+ if (migrationResult.status === LocalStorageMigrationStatus.Failed) {
dispatch(richHistoryMigrationFailedAction());
+ logError(migrationResult.error!, { explore: { event: 'QueryHistoryMigrationFailed' } });
} else {
store.set(RICH_HISTORY_SETTING_KEYS.migrated, true);
}
diff --git a/public/app/features/expressions/ExpressionDatasource.ts b/public/app/features/expressions/ExpressionDatasource.ts
index 096d8a988dc..5376e396377 100644
--- a/public/app/features/expressions/ExpressionDatasource.ts
+++ b/public/app/features/expressions/ExpressionDatasource.ts
@@ -43,7 +43,7 @@ export class ExpressionDatasourceApi extends DataSourceWithBackend;
export const NotificationsPage = ({ navModel }: Props) => {
- if (!config.featureToggles.persistNotifications) {
- return null;
- }
-
return (
diff --git a/public/app/features/query/state/DashboardQueryRunner/AnnotationsQueryRunner.ts b/public/app/features/query/state/DashboardQueryRunner/AnnotationsQueryRunner.ts
index 4eadff44e59..05b5bf7a3bc 100644
--- a/public/app/features/query/state/DashboardQueryRunner/AnnotationsQueryRunner.ts
+++ b/public/app/features/query/state/DashboardQueryRunner/AnnotationsQueryRunner.ts
@@ -15,7 +15,7 @@ export class AnnotationsQueryRunner implements AnnotationQueryRunner {
return false;
}
- return !Boolean(datasource.annotationQuery && !datasource.annotations);
+ return Boolean(!datasource.annotationQuery || datasource.annotations);
}
run({ annotation, datasource, dashboard, range }: AnnotationQueryRunnerOptions): Observable {
diff --git a/public/app/features/query/state/DashboardQueryRunner/LegacyAnnotationQueryRunner.ts b/public/app/features/query/state/DashboardQueryRunner/LegacyAnnotationQueryRunner.ts
index 5d94911b9ab..f383897f5d9 100644
--- a/public/app/features/query/state/DashboardQueryRunner/LegacyAnnotationQueryRunner.ts
+++ b/public/app/features/query/state/DashboardQueryRunner/LegacyAnnotationQueryRunner.ts
@@ -2,6 +2,7 @@ import { from, Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AnnotationEvent, DataSourceApi } from '@grafana/data';
+import { shouldUseLegacyRunner } from 'app/features/annotations/standardAnnotationSupport';
import { AnnotationQueryRunner, AnnotationQueryRunnerOptions } from './types';
import { handleAnnotationQueryRunnerError } from './utils';
@@ -12,6 +13,10 @@ export class LegacyAnnotationQueryRunner implements AnnotationQueryRunner {
return false;
}
+ if (shouldUseLegacyRunner(datasource)) {
+ return true;
+ }
+
return Boolean(datasource.annotationQuery && !datasource.annotations);
}
diff --git a/public/app/features/query/state/DashboardQueryRunner/UnifiedAlertStatesWorker.test.ts b/public/app/features/query/state/DashboardQueryRunner/UnifiedAlertStatesWorker.test.ts
index f2d1c4eaf8c..744885d9526 100644
--- a/public/app/features/query/state/DashboardQueryRunner/UnifiedAlertStatesWorker.test.ts
+++ b/public/app/features/query/state/DashboardQueryRunner/UnifiedAlertStatesWorker.test.ts
@@ -2,7 +2,9 @@ import { lastValueFrom } from 'rxjs';
import { AlertState, getDefaultTimeRange, TimeRange } from '@grafana/data';
import { backendSrv } from 'app/core/services/backend_srv';
+import { disableRBAC, enableRBAC, grantUserPermissions } from 'app/features/alerting/unified/mocks';
import { Annotation } from 'app/features/alerting/unified/utils/constants';
+import { AccessControlAction } from 'app/types/accessControl';
import { PromAlertingRuleState, PromRuleDTO, PromRulesResponse, PromRuleType } from 'app/types/unified-alerting-dto';
import { silenceConsoleOutput } from '../../../../../test/core/utils/silenceConsoleOutput';
@@ -35,6 +37,10 @@ function getTestContext() {
describe('UnifiedAlertStatesWorker', () => {
const worker = new UnifiedAlertStatesWorker();
+ beforeAll(() => {
+ disableRBAC();
+ });
+
describe('when canWork is called with correct props', () => {
it('then it should return true', () => {
const options = getDefaultOptions();
@@ -200,3 +206,25 @@ describe('UnifiedAlertStatesWorker', () => {
});
});
});
+
+describe('UnifiedAlertStateWorker with RBAC', () => {
+ beforeAll(() => {
+ enableRBAC();
+ grantUserPermissions([]);
+ });
+
+ it('should not do work with insufficient permissions', () => {
+ const worker = new UnifiedAlertStatesWorker();
+ const options = getDefaultOptions();
+
+ expect(worker.canWork(options)).toBe(false);
+ });
+
+ it('should do work with correct permissions', () => {
+ grantUserPermissions([AccessControlAction.AlertingRuleRead, AccessControlAction.AlertingRuleExternalRead]);
+ const workerWithPermissions = new UnifiedAlertStatesWorker();
+
+ const options = getDefaultOptions();
+ expect(workerWithPermissions.canWork(options)).toBe(true);
+ });
+});
diff --git a/public/app/features/query/state/DashboardQueryRunner/UnifiedAlertStatesWorker.ts b/public/app/features/query/state/DashboardQueryRunner/UnifiedAlertStatesWorker.ts
index a9100ce3e60..335b1cd20ca 100644
--- a/public/app/features/query/state/DashboardQueryRunner/UnifiedAlertStatesWorker.ts
+++ b/public/app/features/query/state/DashboardQueryRunner/UnifiedAlertStatesWorker.ts
@@ -3,8 +3,10 @@ import { catchError, map } from 'rxjs/operators';
import { AlertState, AlertStateInfo } from '@grafana/data';
import { getBackendSrv } from '@grafana/runtime';
+import { contextSrv } from 'app/core/services/context_srv';
import { Annotation } from 'app/features/alerting/unified/utils/constants';
import { isAlertingRule } from 'app/features/alerting/unified/utils/rules';
+import { AccessControlAction } from 'app/types';
import { PromAlertingRuleState, PromRulesResponse } from 'app/types/unified-alerting-dto';
import { DashboardQueryRunnerOptions, DashboardQueryRunnerWorker, DashboardQueryRunnerWorkerResult } from './types';
@@ -29,6 +31,14 @@ export class UnifiedAlertStatesWorker implements DashboardQueryRunnerWorker {
return false;
}
+ const hasRuleReadPermission =
+ contextSrv.hasPermission(AccessControlAction.AlertingRuleRead) &&
+ contextSrv.hasPermission(AccessControlAction.AlertingRuleExternalRead);
+
+ if (!hasRuleReadPermission) {
+ return false;
+ }
+
return true;
}
diff --git a/public/app/features/query/state/PanelQueryRunner.ts b/public/app/features/query/state/PanelQueryRunner.ts
index f7ceea18895..dcd7ef65c2a 100644
--- a/public/app/features/query/state/PanelQueryRunner.ts
+++ b/public/app/features/query/state/PanelQueryRunner.ts
@@ -236,9 +236,11 @@ export class PanelQueryRunner {
try {
const ds = await getDataSource(datasource, request.scopedVars);
- // Attach the data source name to each query
+ // Attach the data source to each query
request.targets = request.targets.map((query) => {
- if (!query.datasource) {
+ // When using a data source variable, the panel might have the incorrect datasource
+ // stored, so when running the query make sure it is done with the correct one
+ if (!query.datasource || (query.datasource.uid !== ds.uid && !ds.meta.mixed)) {
query.datasource = ds.getRef();
}
return query;
diff --git a/public/app/features/search/components/ActionRow.tsx b/public/app/features/search/components/ActionRow.tsx
index ef9c5d13c65..12b5c0a67cd 100644
--- a/public/app/features/search/components/ActionRow.tsx
+++ b/public/app/features/search/components/ActionRow.tsx
@@ -1,9 +1,9 @@
import { css } from '@emotion/css';
import React, { FC, ChangeEvent, FormEvent } from 'react';
-import { GrafanaTheme, SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { config } from '@grafana/runtime';
-import { HorizontalGroup, RadioButtonGroup, stylesFactory, useTheme, Checkbox, InlineSwitch } from '@grafana/ui';
+import { HorizontalGroup, RadioButtonGroup, Checkbox, InlineSwitch, useStyles2 } from '@grafana/ui';
import { SortPicker } from 'app/core/components/Select/SortPicker';
import { TagFilter } from 'app/core/components/TagFilter/TagFilter';
import { SearchSrv } from 'app/core/services/search_srv';
@@ -40,8 +40,7 @@ export const ActionRow: FC = ({
hideLayout,
showPreviews,
}) => {
- const theme = useTheme();
- const styles = getStyles(theme);
+ const styles = useStyles2(getStyles);
const previewsEnabled = config.featureToggles.dashboardPreviews;
return (
@@ -78,21 +77,21 @@ export const ActionRow: FC = ({
ActionRow.displayName = 'ActionRow';
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+export const getStyles = (theme: GrafanaTheme2) => {
return {
actionRow: css`
display: none;
- @media only screen and (min-width: ${theme.breakpoints.md}) {
+ ${theme.breakpoints.up('md')} {
display: flex;
justify-content: space-between;
align-items: center;
- padding: ${theme.spacing.lg} 0;
+ padding-bottom: ${theme.spacing(2)};
width: 100%;
}
`,
rowContainer: css`
- margin-right: ${theme.spacing.md};
+ margin-right: ${theme.spacing(1)};
`,
checkboxWrapper: css`
label {
@@ -100,4 +99,4 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
}
`,
};
-});
+};
diff --git a/public/app/features/search/components/DashboardListPage.tsx b/public/app/features/search/components/DashboardListPage.tsx
index ffb8219067e..3ececc199ca 100644
--- a/public/app/features/search/components/DashboardListPage.tsx
+++ b/public/app/features/search/components/DashboardListPage.tsx
@@ -46,8 +46,7 @@ export const DashboardListPage: FC = memo(({ navModel, match, location })
return (
- {/*Todo: remove the false to test, or when we feel confident with thsi approach */}
- {Boolean(config.featureToggles.panelTitleSearch && !window.location.search?.includes('index=sql')) ? (
+ {Boolean(config.featureToggles.panelTitleSearch) ? (
;
+ return ;
}
return ;
}
-function DashbaordSearchNEW({ onCloseSearch }: Props) {
+function DashboardSearchNew({ onCloseSearch }: Props) {
const styles = useStyles2(getStyles);
const { query, onQueryChange } = useSearchQuery({});
@@ -56,7 +56,7 @@ function DashbaordSearchNEW({ onCloseSearch }: Props) {
-
+
@@ -82,7 +82,7 @@ export const DashboardSearchOLD: FC = memo(({ onCloseSearch }) => {
@@ -137,14 +137,19 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
}
`,
container: css`
+ display: flex;
+ flex-direction: column;
max-width: 1400px;
margin: 0 auto;
padding: ${theme.spacing(2)};
+ background: ${theme.colors.background.primary};
+ border: 1px solid ${theme.components.panel.borderColor};
+ margin-top: ${theme.spacing(4)};
height: 100%;
${theme.breakpoints.up('md')} {
- padding: ${theme.spacing(4)};
+ padding: ${theme.spacing(3)};
}
`,
closeBtn: css`
@@ -159,8 +164,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
search: css`
display: flex;
flex-direction: column;
+ overflow: hidden;
height: 100%;
- padding-bottom: ${theme.spacing(3)};
+ padding: ${theme.spacing(2, 0, 3, 0)};
`,
input: css`
box-sizing: border-box;
diff --git a/public/app/features/search/components/ManageDashboardsNew.tsx b/public/app/features/search/components/ManageDashboardsNew.tsx
index 9756f9bf99e..22468b9fc1f 100644
--- a/public/app/features/search/components/ManageDashboardsNew.tsx
+++ b/public/app/features/search/components/ManageDashboardsNew.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
import React, { useState } from 'react';
import { useDebounce } from 'react-use';
@@ -38,8 +38,8 @@ export const ManageDashboardsNew = React.memo(({ folder }: Props) => {
return (
<>
-
-
+
+
({
+ actionBar: css`
+ ${theme.breakpoints.down('sm')} {
+ flex-wrap: wrap;
+ }
+ `,
+ inputWrapper: css`
+ ${theme.breakpoints.down('sm')} {
+ margin-right: 0 !important;
+ }
+ `,
searchInput: css`
margin-bottom: 6px;
min-height: ${theme.spacing(4)};
diff --git a/public/app/features/search/page/components/ActionRow.tsx b/public/app/features/search/page/components/ActionRow.tsx
index c6a86240f05..091a057d2a2 100644
--- a/public/app/features/search/page/components/ActionRow.tsx
+++ b/public/app/features/search/page/components/ActionRow.tsx
@@ -9,8 +9,6 @@ import { TagFilter, TermCount } from 'app/core/components/TagFilter/TagFilter';
import { DashboardQuery, SearchLayout } from '../../types';
-import { getSortOptions } from './sorting';
-
export const layoutOptions = [
{ value: SearchLayout.Folders, icon: 'folder', ariaLabel: 'View by folders' },
{ value: SearchLayout.List, icon: 'list-ul', ariaLabel: 'View as list' },
@@ -26,6 +24,7 @@ interface Props {
onStarredFilterChange?: (event: FormEvent ) => void;
onTagFilterChange: (tags: string[]) => void;
getTagOptions: () => Promise;
+ getSortOptions: () => Promise;
onDatasourceChange: (ds?: string) => void;
query: DashboardQuery;
showStarredFilter?: boolean;
@@ -54,6 +53,7 @@ export const ActionRow: FC = ({
onStarredFilterChange = () => {},
onTagFilterChange,
getTagOptions,
+ getSortOptions,
onDatasourceChange,
query,
showStarredFilter,
@@ -104,11 +104,11 @@ export const getStyles = (theme: GrafanaTheme2) => {
actionRow: css`
display: none;
- @media only screen and (min-width: ${theme.v1.breakpoints.md}) {
+ ${theme.breakpoints.up('md')} {
display: flex;
justify-content: space-between;
align-items: center;
- padding: ${theme.v1.spacing.lg} 0;
+ padding-bottom: ${theme.spacing(2)};
width: 100%;
}
`,
diff --git a/public/app/features/search/page/components/FolderSection.tsx b/public/app/features/search/page/components/FolderSection.tsx
index 39b508b17ab..167cc37afbc 100644
--- a/public/app/features/search/page/components/FolderSection.tsx
+++ b/public/app/features/search/page/components/FolderSection.tsx
@@ -3,9 +3,7 @@ import React, { FC } from 'react';
import { useAsync, useLocalStorage } from 'react-use';
import { GrafanaTheme } from '@grafana/data';
-import { getBackendSrv } from '@grafana/runtime';
import { Card, Checkbox, CollapsableSection, Icon, Spinner, stylesFactory, useTheme } from '@grafana/ui';
-import impressionSrv from 'app/core/services/impression_srv';
import { getSectionStorageKey } from 'app/features/search/utils';
import { useUniqueId } from 'app/plugins/datasource/influxdb/components/useUniqueId';
@@ -58,23 +56,14 @@ export const FolderSection: FC = ({
location: section.uid,
sort: 'name_sort',
};
- if (section.title === 'Starred') {
+ if (section.itemsUIDs) {
query = {
uid: section.itemsUIDs, // array of UIDs
};
folderUid = undefined;
folderTitle = undefined;
- } else if (section.title === 'Recent') {
- const ids = impressionSrv.getDashboardOpened();
- const uids = await getBackendSrv().get(`/api/dashboards/ids/${ids.slice(0, 30).join(',')}`);
- if (uids?.length) {
- query = {
- uid: uids,
- };
- }
- folderUid = undefined;
- folderTitle = undefined;
}
+
const raw = await getGrafanaSearcher().search({ ...query, tags });
const v = raw.view.map(
(item) =>
diff --git a/public/app/features/search/page/components/FolderView.tsx b/public/app/features/search/page/components/FolderView.tsx
index 1ba64cffc0e..ee5c4a53a4b 100644
--- a/public/app/features/search/page/components/FolderView.tsx
+++ b/public/app/features/search/page/components/FolderView.tsx
@@ -6,6 +6,8 @@ import { GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { getBackendSrv } from '@grafana/runtime';
import { Spinner, useStyles2 } from '@grafana/ui';
+import { contextSrv } from 'app/core/core';
+import impressionSrv from 'app/core/services/impression_srv';
import { GENERAL_FOLDER_UID } from '../../constants';
import { getGrafanaSearcher } from '../../service';
@@ -23,11 +25,20 @@ export const FolderView = ({ selection, selectionToggle, onTagSelected, tags, hi
const results = useAsync(async () => {
const folders: DashboardSection[] = [];
if (!hidePseudoFolders) {
- const stars = await getBackendSrv().get('api/user/stars');
- if (stars.length > 0) {
- folders.push({ title: 'Starred', icon: 'star', kind: 'query-star', uid: '__starred', itemsUIDs: stars });
+ if (contextSrv.isSignedIn) {
+ const stars = await getBackendSrv().get('api/user/stars');
+ if (stars.length > 0) {
+ folders.push({ title: 'Starred', icon: 'star', kind: 'query-star', uid: '__starred', itemsUIDs: stars });
+ }
+ }
+
+ const ids = impressionSrv.getDashboardOpened();
+ if (ids.length) {
+ const itemsUIDs = await getBackendSrv().get(`/api/dashboards/ids/${ids.slice(0, 30).join(',')}`);
+ if (itemsUIDs.length) {
+ folders.push({ title: 'Recent', icon: 'clock', kind: 'query-recent', uid: '__recent', itemsUIDs });
+ }
}
- folders.push({ title: 'Recent', icon: 'clock', kind: 'query-recent', uid: '__recent' });
}
folders.push({ title: 'General', url: '/dashboards', kind: 'folder', uid: GENERAL_FOLDER_UID });
@@ -97,7 +108,10 @@ const getStyles = (theme: GrafanaTheme2) => {
display: flex;
flex-direction: column;
background: ${theme.v1.colors.panelBg};
- border-bottom: solid 1px ${theme.v1.colors.border2};
+
+ &:not(:last-child) {
+ border-bottom: solid 1px ${theme.v1.colors.border2};
+ }
`,
sectionItems: css`
margin: 0 24px 0 32px;
diff --git a/public/app/features/search/page/components/SearchView.tsx b/public/app/features/search/page/components/SearchView.tsx
index 43f540bf4ee..45e0ac95f3a 100644
--- a/public/app/features/search/page/components/SearchView.tsx
+++ b/public/app/features/search/page/components/SearchView.tsx
@@ -205,6 +205,7 @@ export const SearchView = ({ showManage, folderDTO, queryText, hidePseudoFolders
onSortChange={onSortChange}
onTagFilterChange={onTagFilterChange}
getTagOptions={getTagOptions}
+ getSortOptions={getGrafanaSearcher().getSortOptions}
onDatasourceChange={onDatasourceChange}
query={query}
/>
diff --git a/public/app/features/search/page/components/columns.tsx b/public/app/features/search/page/components/columns.tsx
index c38a472a704..b13f716db4b 100644
--- a/public/app/features/search/page/components/columns.tsx
+++ b/public/app/features/search/page/components/columns.tsx
@@ -3,7 +3,7 @@ import { isNumber } from 'lodash';
import React from 'react';
import SVG from 'react-inlinesvg';
-import { Field } from '@grafana/data';
+import { Field, getFieldDisplayName } from '@grafana/data';
import { config, getDataSourceSrv } from '@grafana/runtime';
import { Checkbox, Icon, IconButton, IconName, TagList } from '@grafana/ui';
@@ -11,7 +11,6 @@ import { QueryResponse, SearchResultMeta } from '../../service';
import { SelectionChecker, SelectionToggle } from '../selection';
import { TableColumn } from './SearchResultsTable';
-import { getSortFieldDisplayName } from './sorting';
const TYPE_COLUMN_WIDTH = 250;
const DATASOURCE_COLUMN_WIDTH = 200;
@@ -172,7 +171,7 @@ export const generateColumns = (
if (sortField) {
columns.push({
- Header: () => {getSortFieldDisplayName(sortField.name)} ,
+ Header: () => {getFieldDisplayName(sortField)} ,
Cell: (p) => {
let value = sortField.values.get(p.row.index);
try {
@@ -182,7 +181,7 @@ export const generateColumns = (
} catch {}
return (
- {value}
+ {`${value}`}
);
},
@@ -296,7 +295,18 @@ function makeTypeColumn(
}
txt = info.name;
} else {
- icon = `public/img/icons/unicons/question.svg`; // plugin not found
+ switch (type) {
+ case 'row':
+ txt = 'Row';
+ icon = `public/img/icons/unicons/bars.svg`;
+ break;
+ case 'singlestat': // auto-migration
+ txt = 'Singlestat';
+ icon = `public/app/plugins/panel/stat/img/icn-singlestat-panel.svg`;
+ break;
+ default:
+ icon = `public/img/icons/unicons/question.svg`; // plugin not found
+ }
}
}
break;
diff --git a/public/app/features/search/page/components/sorting.ts b/public/app/features/search/page/components/sorting.ts
deleted file mode 100644
index 0046d1b2b55..00000000000
--- a/public/app/features/search/page/components/sorting.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { SelectableValue } from '@grafana/data';
-import { config } from '@grafana/runtime';
-
-// Enterprise only sort field values for dashboards
-const sortFields = [
- { name: 'views_total', display: 'Views total' },
- { name: 'views_last_30_days', display: 'Views 30 days' },
- { name: 'errors_total', display: 'Errors total' },
- { name: 'errors_last_30_days', display: 'Errors 30 days' },
-];
-
-// This should eventually be filled by an API call, but hardcoded is a good start
-export async function getSortOptions(): Promise {
- const opts: SelectableValue[] = [
- { value: 'name_sort', label: 'Alphabetically (A-Z)' },
- { value: '-name_sort', label: 'Alphabetically (Z-A)' },
- ];
-
- if (config.licenseInfo.enabledFeatures.analytics) {
- for (const sf of sortFields) {
- opts.push({ value: `-${sf.name}`, label: `${sf.display} (most)` });
- opts.push({ value: `${sf.name}`, label: `${sf.display} (least)` });
- }
- }
-
- return opts;
-}
-
-/** Given the internal field name, this gives a reasonable display name for the table colum header */
-export function getSortFieldDisplayName(name: string) {
- for (const sf of sortFields) {
- if (sf.name === name) {
- return sf.display;
- }
- }
- return name;
-}
diff --git a/public/app/features/search/service/bluge.ts b/public/app/features/search/service/bluge.ts
index 27814551442..38886ba369b 100644
--- a/public/app/features/search/service/bluge.ts
+++ b/public/app/features/search/service/bluge.ts
@@ -1,6 +1,6 @@
import { lastValueFrom } from 'rxjs';
-import { ArrayVector, DataFrame, DataFrameView, getDisplayProcessor } from '@grafana/data';
+import { ArrayVector, DataFrame, DataFrameView, getDisplayProcessor, SelectableValue } from '@grafana/data';
import { config, getDataSourceSrv } from '@grafana/runtime';
import { TermCount } from 'app/core/components/TagFilter/TagFilter';
import { GrafanaDatasource } from 'app/plugins/datasource/grafana/datasource';
@@ -16,10 +16,6 @@ export class BlugeSearcher implements GrafanaSearcher {
return doSearchQuery(query);
}
- async list(location: string): Promise {
- return doSearchQuery({ query: `list:${location ?? ''}` });
- }
-
async tags(query: SearchQuery): Promise {
const ds = (await getDataSourceSrv().get('-- Grafana --')) as GrafanaDatasource;
const target = {
@@ -46,12 +42,29 @@ export class BlugeSearcher implements GrafanaSearcher {
}
return [];
}
+
+ // This should eventually be filled by an API call, but hardcoded is a good start
+ getSortOptions(): Promise {
+ const opts: SelectableValue[] = [
+ { value: 'name_sort', label: 'Alphabetically (A-Z)' },
+ { value: '-name_sort', label: 'Alphabetically (Z-A)' },
+ ];
+
+ if (config.licenseInfo.enabledFeatures.analytics) {
+ for (const sf of sortFields) {
+ opts.push({ value: `-${sf.name}`, label: `${sf.display} (most)` });
+ opts.push({ value: `${sf.name}`, label: `${sf.display} (least)` });
+ }
+ }
+
+ return Promise.resolve(opts);
+ }
}
const firstPageSize = 50;
const nextPageSizes = 100;
-export async function doSearchQuery(query: SearchQuery): Promise {
+async function doSearchQuery(query: SearchQuery): Promise {
const ds = (await getDataSourceSrv().get('-- Grafana --')) as GrafanaDatasource;
const target = {
...query,
@@ -84,8 +97,19 @@ export async function doSearchQuery(query: SearchQuery): Promise
const meta = first.meta.custom as SearchResultMeta;
if (!meta.locationInfo) {
- meta.locationInfo = {};
+ meta.locationInfo = {}; // always set it so we can append
}
+
+ // Set the field name to a better display name
+ if (meta.sortBy?.length) {
+ const field = first.fields.find((f) => f.name === meta.sortBy);
+ if (field) {
+ const name = getSortFieldDisplayName(field.name);
+ meta.sortBy = name;
+ field.name = name; // make it look nicer
+ }
+ }
+
const view = new DataFrameView(first);
return {
totalRows: meta.count ?? first.length,
@@ -146,3 +170,21 @@ function getTermCountsFrom(frame: DataFrame): TermCount[] {
}
return counts;
}
+
+// Enterprise only sort field values for dashboards
+const sortFields = [
+ { name: 'views_total', display: 'Views total' },
+ { name: 'views_last_30_days', display: 'Views 30 days' },
+ { name: 'errors_total', display: 'Errors total' },
+ { name: 'errors_last_30_days', display: 'Errors 30 days' },
+];
+
+/** Given the internal field name, this gives a reasonable display name for the table colum header */
+function getSortFieldDisplayName(name: string) {
+ for (const sf of sortFields) {
+ if (sf.name === name) {
+ return sf.display;
+ }
+ }
+ return name;
+}
diff --git a/public/app/features/search/service/searcher.ts b/public/app/features/search/service/searcher.ts
index ff6675339d6..c61ed5bc552 100644
--- a/public/app/features/search/service/searcher.ts
+++ b/public/app/features/search/service/searcher.ts
@@ -1,11 +1,17 @@
+import { config } from '@grafana/runtime';
+
import { BlugeSearcher } from './bluge';
+import { SQLSearcher } from './sql';
import { GrafanaSearcher } from './types';
let searcher: GrafanaSearcher | undefined = undefined;
export function getGrafanaSearcher(): GrafanaSearcher {
if (!searcher) {
- searcher = new BlugeSearcher();
+ const useBluge =
+ config.featureToggles.panelTitleSearch && // set in system configs
+ window.location.search.indexOf('index=sql') < 0; // or URL override
+ searcher = useBluge ? new BlugeSearcher() : new SQLSearcher();
}
return searcher!;
}
diff --git a/public/app/features/search/service/sql.ts b/public/app/features/search/service/sql.ts
new file mode 100644
index 00000000000..96e68ac6946
--- /dev/null
+++ b/public/app/features/search/service/sql.ts
@@ -0,0 +1,198 @@
+import { ArrayVector, DataFrame, DataFrameView, FieldType, getDisplayProcessor, SelectableValue } from '@grafana/data';
+import { config } from '@grafana/runtime';
+import { TermCount } from 'app/core/components/TagFilter/TagFilter';
+import { backendSrv } from 'app/core/services/backend_srv';
+
+import { DashboardSearchHit } from '../types';
+
+import { LocationInfo } from './types';
+
+import { DashboardQueryResult, GrafanaSearcher, QueryResponse, SearchQuery } from '.';
+
+interface APIQuery {
+ query?: string;
+ tag?: string[];
+ limit?: number;
+ page?: number;
+ type?: string;
+ // DashboardIds []int64
+ folderIds?: number[];
+ sort?: string;
+
+ // NEW!!!! TODO TODO: needs backend support?
+ dashboardUIDs?: string[];
+}
+
+// Internal object to hold folderId
+interface LocationInfoEXT extends LocationInfo {
+ folderId?: number;
+}
+
+export class SQLSearcher implements GrafanaSearcher {
+ locationInfo: Record = {
+ general: {
+ kind: 'folder',
+ name: 'General',
+ url: '/dashboards',
+ folderId: 0,
+ },
+ }; // share location info with everyone
+
+ async search(query: SearchQuery): Promise {
+ if (query.facet?.length) {
+ throw 'facets not supported!';
+ }
+ const q: APIQuery = {
+ limit: 1000, // 1k max values
+ tag: query.tags,
+ sort: query.sort,
+ };
+
+ if (query.query === '*') {
+ if (query.kind?.length === 1 && query.kind[0] === 'folder') {
+ q.type = 'dash-folder';
+ }
+ } else if (query.query?.length) {
+ q.query = query.query;
+ }
+
+ if (query.uid) {
+ q.query = query.uid.join(', '); // TODO! this will return nothing
+ q.dashboardUIDs = query.uid;
+ } else if (query.location?.length) {
+ let info = this.locationInfo[query.location];
+ if (!info) {
+ // This will load all folder folders
+ await this.doAPIQuery({ type: 'dash-folder', limit: 999 });
+ info = this.locationInfo[query.location];
+ }
+ q.folderIds = [info.folderId ?? 0];
+ }
+ return this.doAPIQuery(q);
+ }
+
+ // returns the appropriate sorting options
+ async getSortOptions(): Promise {
+ // {
+ // "sortOptions": [
+ // {
+ // "description": "Sort results in an alphabetically ascending order",
+ // "displayName": "Alphabetically (A–Z)",
+ // "meta": "",
+ // "name": "alpha-asc"
+ // },
+ // {
+ // "description": "Sort results in an alphabetically descending order",
+ // "displayName": "Alphabetically (Z–A)",
+ // "meta": "",
+ // "name": "alpha-desc"
+ // }
+ // ]
+ // }
+ const opts = await backendSrv.get('/api/search/sorting');
+ return opts.sortOptions.map((v: any) => ({
+ value: v.name,
+ label: v.displayName,
+ }));
+ }
+
+ // NOTE: the bluge query will find tags within the current results, the SQL based one does not
+ async tags(query: SearchQuery): Promise {
+ const terms = (await backendSrv.get('/api/dashboards/tags')) as TermCount[];
+ return terms.sort((a, b) => b.count - a.count);
+ }
+
+ async doAPIQuery(query: APIQuery): Promise {
+ const rsp = (await backendSrv.get('/api/search', query)) as DashboardSearchHit[];
+
+ // Field values (columnar)
+ const kind: string[] = [];
+ const name: string[] = [];
+ const uid: string[] = [];
+ const url: string[] = [];
+ const tags: string[][] = [];
+ const location: string[] = [];
+ const sortBy: number[] = [];
+ let sortMetaName: string | undefined;
+
+ for (let hit of rsp) {
+ const k = hit.type === 'dash-folder' ? 'folder' : 'dashboard';
+ kind.push(k);
+ name.push(hit.title);
+ uid.push(hit.uid!);
+ url.push(hit.url);
+ tags.push(hit.tags);
+ sortBy.push(hit.sortMeta!);
+
+ let v = hit.folderUid;
+ if (!v && k === 'dashboard') {
+ v = 'general';
+ }
+ location.push(v!);
+
+ if (hit.sortMetaName?.length) {
+ sortMetaName = hit.sortMetaName;
+ }
+
+ if (hit.folderUid && hit.folderTitle) {
+ this.locationInfo[hit.folderUid] = {
+ kind: 'folder',
+ name: hit.folderTitle,
+ url: hit.folderUrl!,
+ folderId: hit.folderId,
+ };
+ } else if (k === 'folder') {
+ this.locationInfo[hit.uid!] = {
+ kind: k,
+ name: hit.title!,
+ url: hit.url,
+ folderId: hit.id,
+ };
+ }
+ }
+
+ const data: DataFrame = {
+ fields: [
+ { name: 'kind', type: FieldType.string, config: {}, values: new ArrayVector(kind) },
+ { name: 'name', type: FieldType.string, config: {}, values: new ArrayVector(name) },
+ { name: 'uid', type: FieldType.string, config: {}, values: new ArrayVector(uid) },
+ { name: 'url', type: FieldType.string, config: {}, values: new ArrayVector(url) },
+ { name: 'tags', type: FieldType.other, config: {}, values: new ArrayVector(tags) },
+ { name: 'location', type: FieldType.string, config: {}, values: new ArrayVector(location) },
+ ],
+ length: name.length,
+ meta: {
+ custom: {
+ count: name.length,
+ max_score: 1,
+ locationInfo: this.locationInfo,
+ },
+ },
+ };
+
+ // Add enterprise sort fields as a field in the frame
+ if (sortMetaName?.length && sortBy.length) {
+ data.meta!.custom!.sortBy = sortMetaName;
+ data.fields.push({
+ name: sortMetaName, // Used in display
+ type: FieldType.number,
+ config: {},
+ values: new ArrayVector(sortBy),
+ });
+ }
+
+ for (const field of data.fields) {
+ field.display = getDisplayProcessor({ field, theme: config.theme2 });
+ }
+
+ const view = new DataFrameView(data);
+ return {
+ totalRows: data.length,
+ view,
+
+ // Paging not supported with this version
+ loadMoreItems: async (startIndex: number, stopIndex: number): Promise => {},
+ isItemLoaded: (index: number): boolean => true,
+ };
+ }
+}
diff --git a/public/app/features/search/service/types.ts b/public/app/features/search/service/types.ts
index adff98d3467..1b0d79b9d2a 100644
--- a/public/app/features/search/service/types.ts
+++ b/public/app/features/search/service/types.ts
@@ -1,4 +1,4 @@
-import { DataFrameView } from '@grafana/data';
+import { DataFrameView, SelectableValue } from '@grafana/data';
import { TermCount } from 'app/core/components/TagFilter/TagFilter';
export interface FacetField {
@@ -32,7 +32,6 @@ export interface DashboardQueryResult {
tags: string[];
location: string; // url that can be split
ds_uid: string[];
- score?: number;
}
export interface LocationInfo {
@@ -45,6 +44,7 @@ export interface SearchResultMeta {
count: number;
max_score: number;
locationInfo: Record;
+ sortBy?: string;
}
export interface QueryResponse {
@@ -62,6 +62,6 @@ export interface QueryResponse {
export interface GrafanaSearcher {
search: (query: SearchQuery) => Promise;
- list: (location: string) => Promise;
tags: (query: SearchQuery) => Promise;
+ getSortOptions: () => Promise;
}
diff --git a/public/app/features/serviceaccounts/ServiceAccountProfile.tsx b/public/app/features/serviceaccounts/ServiceAccountProfile.tsx
index e1ab18f7739..ee3bb166da1 100644
--- a/public/app/features/serviceaccounts/ServiceAccountProfile.tsx
+++ b/public/app/features/serviceaccounts/ServiceAccountProfile.tsx
@@ -73,7 +73,7 @@ export function ServiceAccountProfile({
<>
-
+
= ({
className={styles.toggle}
size="md"
name={visible ? 'eye' : 'eye-slash'}
- surface="header"
onClick={() => onToggleVisibility(fieldName, visible)}
/>
diff --git a/public/app/features/transformers/extractFields/extractFields.ts b/public/app/features/transformers/extractFields/extractFields.ts
index 81628b595ed..ede77024b40 100644
--- a/public/app/features/transformers/extractFields/extractFields.ts
+++ b/public/app/features/transformers/extractFields/extractFields.ts
@@ -41,7 +41,8 @@ function addExtractedFields(frame: DataFrame, options: ExtractFieldsOptions): Da
}
const source = findField(frame, options.source);
if (!source) {
- throw new Error('json field not found');
+ // this case can happen when there are multiple queries
+ return frame;
}
const ext = fieldExtractors.getIfExists(options.format ?? FieldExtractorID.Auto);
diff --git a/public/app/features/users/UsersListPage.test.tsx b/public/app/features/users/UsersListPage.test.tsx
index bc334b6287a..e5a2837e98f 100644
--- a/public/app/features/users/UsersListPage.test.tsx
+++ b/public/app/features/users/UsersListPage.test.tsx
@@ -12,6 +12,12 @@ jest.mock('../../core/app_events', () => ({
emit: jest.fn(),
}));
+jest.mock('app/core/services/context_srv', () => ({
+ contextSrv: {
+ user: { orgId: 1 },
+ },
+}));
+
const setup = (propOverrides?: object) => {
const props: Props = {
navModel: {
diff --git a/public/app/features/users/UsersListPage.tsx b/public/app/features/users/UsersListPage.tsx
index f53b3f47b9f..803deead884 100644
--- a/public/app/features/users/UsersListPage.tsx
+++ b/public/app/features/users/UsersListPage.tsx
@@ -5,6 +5,7 @@ import { renderMarkdown } from '@grafana/data';
import { HorizontalGroup, Pagination, VerticalGroup } from '@grafana/ui';
import Page from 'app/core/components/Page/Page';
import { getNavModel } from 'app/core/selectors/navModel';
+import { contextSrv } from 'app/core/services/context_srv';
import { OrgUser, OrgRole, StoreState } from 'app/types';
import InviteesTable from '../invites/InviteesTable';
@@ -106,6 +107,7 @@ export class UsersListPage extends PureComponent {
this.onRoleChange(role, user)}
onRemoveUser={(user) => this.props.removeUser(user.userId)}
/>
diff --git a/public/app/features/users/__snapshots__/UsersListPage.test.tsx.snap b/public/app/features/users/__snapshots__/UsersListPage.test.tsx.snap
index 08b3ba0ec22..01d1dbeeba2 100644
--- a/public/app/features/users/__snapshots__/UsersListPage.test.tsx.snap
+++ b/public/app/features/users/__snapshots__/UsersListPage.test.tsx.snap
@@ -26,6 +26,7 @@ exports[`Render should render List page 1`] = `
{
});
});
+ describe('interpolateMetricsQueryVariables', () => {
+ it('interpolates dimensions correctly', () => {
+ const testQuery = {
+ id: 'a',
+ refId: 'a',
+ region: 'us-east-2',
+ namespace: '',
+ dimensions: { InstanceId: '$dimension' },
+ };
+ const ds = setupMockedDataSource({ variables: [dimensionVariable], mockGetVariableName: false });
+ const result = ds.datasource.interpolateMetricsQueryVariables(testQuery, {
+ dimension: { text: 'foo', value: 'foo' },
+ });
+ expect(result).toStrictEqual({
+ alias: '',
+ metricName: '',
+ namespace: '',
+ period: '',
+ sqlExpression: '',
+ dimensions: { InstanceId: ['foo'] },
+ });
+ });
+ });
+
describe('convertMultiFiltersFormat', () => {
const ds = setupMockedDataSource({ variables: [labelsVariable, dimensionVariable], mockGetVariableName: false });
it('converts keys and values correctly', () => {
diff --git a/public/app/plugins/datasource/cloudwatch/datasource.ts b/public/app/plugins/datasource/cloudwatch/datasource.ts
index 15761c0d7de..582d3016959 100644
--- a/public/app/plugins/datasource/cloudwatch/datasource.ts
+++ b/public/app/plugins/datasource/cloudwatch/datasource.ts
@@ -958,13 +958,7 @@ export class CloudWatchDatasource
namespace: this.replace(query.namespace, scopedVars),
period: this.replace(query.period, scopedVars),
sqlExpression: this.replace(query.sqlExpression, scopedVars),
- dimensions: Object.entries(query.dimensions ?? {}).reduce((prev, [key, value]) => {
- if (Array.isArray(value)) {
- return { ...prev, [key]: value };
- }
-
- return { ...prev, [this.replace(key, scopedVars)]: this.replace(value, scopedVars) };
- }, {}),
+ dimensions: this.convertDimensionFormat(query.dimensions ?? {}, scopedVars),
};
}
}
diff --git a/public/app/plugins/datasource/cloudwatch/specs/datasource.test.ts b/public/app/plugins/datasource/cloudwatch/specs/datasource.test.ts
index df2004957bc..6855148d22a 100644
--- a/public/app/plugins/datasource/cloudwatch/specs/datasource.test.ts
+++ b/public/app/plugins/datasource/cloudwatch/specs/datasource.test.ts
@@ -585,7 +585,11 @@ describe('CloudWatchDatasource', () => {
});
it('should replace correct variables in CloudWatchMetricsQuery', () => {
- const templateSrv: any = { replace: jest.fn(), getVariables: () => [] };
+ const templateSrv: any = {
+ replace: jest.fn(),
+ getVariables: () => [],
+ getVariableName: jest.fn((name: string) => name),
+ };
const { ds } = getTestContext({ templateSrv });
const variableName = 'someVar';
const logQuery: CloudWatchMetricsQuery = {
@@ -608,9 +612,12 @@ describe('CloudWatchDatasource', () => {
ds.interpolateVariablesInQueries([logQuery], {});
- // We interpolate `expression`, `region`, `period`, `alias`, `metricName`, `nameSpace` and `dimensions` in CloudWatchMetricsQuery
+ // We interpolate `expression`, `region`, `period`, `alias`, `metricName`, and `nameSpace` in CloudWatchMetricsQuery
expect(templateSrv.replace).toHaveBeenCalledWith(`$${variableName}`, {});
- expect(templateSrv.replace).toHaveBeenCalledTimes(8);
+ expect(templateSrv.replace).toHaveBeenCalledTimes(7);
+
+ expect(templateSrv.getVariableName).toHaveBeenCalledWith(`$${variableName}`);
+ expect(templateSrv.getVariableName).toHaveBeenCalledTimes(1);
});
});
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
index 155ed2942bc..0ee4faf69ae 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
@@ -31,7 +31,6 @@ export const QueryEditorRow = ({
= ({
+const ArgQueryEditor: React.FC = ({
query,
datasource,
subscriptionId,
@@ -52,12 +54,26 @@ const ArgQueryEditor: React.FC = ({
.catch((err) => setError(ERROR_SOURCE, err));
}, [datasource, onChange, query, setError]);
- return (
-
-
-
+
+
+
+
+
+
+
+ = ({
onQueryChange={onChange}
setError={setError}
/>
-
+
+ );
+ } else {
+ return (
+
+
+
+
-
-
- );
+
+
-
+ if (config.featureToggles.azureMonitorExperimentalUI) {
+ return (
+
+
+
+
+
+
+
+
+
+
+ {!hideFormatAs && (
+
+ )}
-
+ {migrationError && {migrationError.message}}
+
+
+
+
+ );
+ } else {
+ return (
+
+
- {!hideFormatAs && (
- = ({
onQueryChange={onChange}
setError={setError}
/>
- )}
- {migrationError && {migrationError.message}}
-
- );
+ {!hideFormatAs && (
+
+ )}
+
+ {migrationError && {migrationError.message}}
+ Label mappings
{!props.showHelp && (
-
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx
index 1354458a7ac..2ea26ae1f60 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx
@@ -1,16 +1,33 @@
import { css } from '@emotion/css';
import React from 'react';
-import { GrafanaTheme2 } from '@grafana/data';
+import { CoreApp, GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
import { testIds } from '../../components/LokiQueryEditor';
import { LokiQueryField } from '../../components/LokiQueryField';
import { LokiQueryEditorProps } from '../../components/types';
-export function LokiQueryCodeEditor({ query, datasource, range, onRunQuery, onChange, data }: LokiQueryEditorProps) {
+export function LokiQueryCodeEditor({
+ query,
+ datasource,
+ range,
+ onRunQuery,
+ onChange,
+ data,
+ app,
+}: LokiQueryEditorProps) {
const styles = useStyles2(getStyles);
+ // the inner QueryField works like this when a blur event happens:
+ // - if it has an onBlur prop, it calls it
+ // - else it calls onRunQuery (some extra conditions apply)
+ //
+ // we want it to not do anything when a blur event happens in explore mode,
+ // so we set an empty-function in such case. otherwise we set `undefined`,
+ // which will cause it to run the query when blur happens.
+ const onBlur = app === CoreApp.Explore ? () => undefined : undefined;
+
return (
((props)
- {editorMode === QueryEditorMode.Code && }
+ {editorMode === QueryEditorMode.Code && }
{editorMode === QueryEditorMode.Builder && (
{
);
});
+ it('parses query with with unwrap and error filter', () => {
+ expect(
+ buildVisualQueryFromString('sum_over_time({app="frontend"} | logfmt | unwrap duration | __error__="" [1m])')
+ ).toEqual(
+ noErrors({
+ labels: [
+ {
+ op: '=',
+ value: 'frontend',
+ label: 'app',
+ },
+ ],
+ operations: [
+ { id: 'logfmt', params: [] },
+ { id: 'unwrap', params: ['duration'] },
+ { id: '__label_filter_no_errors', params: [] },
+ { id: 'sum_over_time', params: ['1m'] },
+ ],
+ })
+ );
+ });
+
+ it('parses query with with unwrap and label filter', () => {
+ expect(
+ buildVisualQueryFromString('sum_over_time({app="frontend"} | logfmt | unwrap duration | label="value" [1m])')
+ ).toEqual(
+ noErrors({
+ labels: [
+ {
+ op: '=',
+ value: 'frontend',
+ label: 'app',
+ },
+ ],
+ operations: [
+ { id: 'logfmt', params: [] },
+ { id: 'unwrap', params: ['duration'] },
+ { id: '__label_filter', params: ['label', '=', 'value'] },
+ { id: 'sum_over_time', params: ['1m'] },
+ ],
+ })
+ );
+ });
+
it('returns error for query with unwrap and conversion operation', () => {
const context = buildVisualQueryFromString(
'sum_over_time({app="frontend"} | logfmt | unwrap duration(label) [5m])'
diff --git a/public/app/plugins/datasource/loki/querybuilder/parsing.ts b/public/app/plugins/datasource/loki/querybuilder/parsing.ts
index 39b38c0f848..f46bb546d4c 100644
--- a/public/app/plugins/datasource/loki/querybuilder/parsing.ts
+++ b/public/app/plugins/datasource/loki/querybuilder/parsing.ts
@@ -120,7 +120,7 @@ export function handleExpression(expr: string, node: SyntaxNode, context: Contex
}
case 'UnwrapExpr': {
- const { operation, error } = getUnwrap(expr, node);
+ const { operation, error } = handleUnwrapExpr(expr, node, context);
if (operation) {
visQuery.operations.push(operation);
}
@@ -297,25 +297,40 @@ function getLabelFormat(expr: string, node: SyntaxNode): QueryBuilderOperation {
};
}
-function getUnwrap(expr: string, node: SyntaxNode): { operation?: QueryBuilderOperation; error?: string } {
- // Check for nodes not supported in visual builder and return error
- if (node.getChild('ConvOp')) {
+function handleUnwrapExpr(
+ expr: string,
+ node: SyntaxNode,
+ context: Context
+): { operation?: QueryBuilderOperation; error?: string } {
+ const unwrapExprChild = node.getChild('UnwrapExpr');
+ const labelFilterChild = node.getChild('LabelFilter');
+ const unwrapChild = node.getChild('Unwrap');
+
+ if (unwrapExprChild) {
+ handleExpression(expr, unwrapExprChild, context);
+ }
+
+ if (labelFilterChild) {
+ handleExpression(expr, labelFilterChild, context);
+ }
+
+ if (unwrapChild) {
+ if (unwrapChild?.nextSibling?.type.name === 'ConvOp') {
+ return {
+ error: 'Unwrap with conversion operator not supported in query builder',
+ };
+ }
+
return {
- error: 'Unwrap with conversion operator not supported in query builder',
+ operation: {
+ id: 'unwrap',
+ params: [getString(expr, unwrapChild?.nextSibling)],
+ },
};
}
- const id = 'unwrap';
- const string = getString(expr, node.getChild('Identifier'));
-
- return {
- operation: {
- id,
- params: [string],
- },
- };
+ return {};
}
-
function handleRangeAggregation(expr: string, node: SyntaxNode, context: Context) {
const nameNode = node.getChild('RangeOp');
const funcName = getString(expr, nameNode);
diff --git a/public/app/plugins/datasource/loki/syntax.ts b/public/app/plugins/datasource/loki/syntax.ts
index 94a5e54dab4..e203e0b218f 100644
--- a/public/app/plugins/datasource/loki/syntax.ts
+++ b/public/app/plugins/datasource/loki/syntax.ts
@@ -72,6 +72,13 @@ export const PIPE_PARSERS: CompletionItem[] = [
insertText: 'pattern',
documentation: 'Extracting labels from the log line using pattern parser. Only available in Loki 2.3+.',
},
+ {
+ label: 'unpack',
+ insertText: 'unpack',
+ detail: 'unpack identifier',
+ documentation:
+ 'Parses a JSON log line, unpacking all embedded labels in the pack stage. A special property "_entry" will also be used to replace the original log line. Only available in Loki 2.2+.',
+ },
];
export const PIPE_OPERATORS: CompletionItem[] = [
@@ -82,13 +89,6 @@ export const PIPE_OPERATORS: CompletionItem[] = [
documentation:
'Take labels and use the values as sample data for metric aggregations. Only available in Loki 2.0+.',
},
- {
- label: 'unpack',
- insertText: 'unpack',
- detail: 'unpack identifier',
- documentation:
- 'Parses a JSON log line, unpacking all embedded labels in the pack stage. A special property "_entry" will also be used to replace the original log line. Only available in Loki 2.0+.',
- },
{
label: 'label_format',
insertText: 'label_format',
@@ -122,6 +122,18 @@ export const RANGE_VEC_FUNCTIONS = [
detail: 'max_over_time(range-vector)',
documentation: 'The maximum of all values in the specified interval. Only available in Loki 2.0+.',
},
+ {
+ insertText: 'first_over_time',
+ label: 'first_over_time',
+ detail: 'first_over_time(range-vector)',
+ documentation: 'The first of all values in the specified interval. Only available in Loki 2.3+.',
+ },
+ {
+ insertText: 'last_over_time',
+ label: 'last_over_time',
+ detail: 'last_over_time(range-vector)',
+ documentation: 'The last of all values in the specified interval. Only available in Loki 2.3+.',
+ },
{
insertText: 'sum_over_time',
label: 'sum_over_time',
diff --git a/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx
new file mode 100644
index 00000000000..3eed372d2d5
--- /dev/null
+++ b/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx
@@ -0,0 +1,133 @@
+import React from 'react';
+
+import { AnnotationQuery } from '@grafana/data';
+import { EditorRow, EditorField, EditorSwitch, Space, EditorRows } from '@grafana/experimental';
+import { Input } from '@grafana/ui';
+
+import { PromQueryCodeEditor } from '../querybuilder/components/PromQueryCodeEditor';
+import { AutoSizeInput } from '../querybuilder/shared/AutoSizeInput';
+import { PromQuery } from '../types';
+
+import { PromQueryEditorProps } from './types';
+
+type Props = PromQueryEditorProps & {
+ annotation?: AnnotationQuery;
+ onAnnotationChange?: (annotation: AnnotationQuery) => void;
+};
+
+export function AnnotationQueryEditor(props: Props) {
+ // This is because of problematic typing. See AnnotationQueryEditorProps in grafana-data/annotations.ts.
+ const annotation = props.annotation!;
+ const onAnnotationChange = props.onAnnotationChange!;
+ const query = { expr: annotation.expr, refId: annotation.name, interval: annotation.step };
+
+ return (
+ <>
+
+ {
+ onAnnotationChange({
+ ...annotation,
+ expr: query.expr,
+ });
+ }}
+ />
+
+
+ An additional lower limit for the step parameter of the Prometheus query and for the{' '}
+ $__interval and $__rate_interval variables.
+
+ }
+ >
+ {
+ onAnnotationChange({
+ ...annotation,
+ step: ev.currentTarget.value,
+ });
+ }}
+ defaultValue={query.interval}
+ />
+
+
+
+
+
+
+ {
+ onAnnotationChange({
+ ...annotation,
+ titleFormat: event.currentTarget.value,
+ });
+ }}
+ />
+
+
+ {
+ onAnnotationChange({
+ ...annotation,
+ tagKeys: event.currentTarget.value,
+ });
+ }}
+ />
+
+
+ {
+ onAnnotationChange({
+ ...annotation,
+ textFormat: event.currentTarget.value,
+ });
+ }}
+ />
+
+
+ {
+ onAnnotationChange({
+ ...annotation,
+ useValueForTime: event.currentTarget.value,
+ });
+ }}
+ />
+
+
+
+ );
+}
diff --git a/public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx b/public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx
index 1108dff3a9c..412e63f9389 100644
--- a/public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx
+++ b/public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx
@@ -1,7 +1,7 @@
-import React, { FunctionComponent, useMemo } from 'react';
+import React, { FunctionComponent, FormEvent, useMemo, useState } from 'react';
import { config } from '@grafana/runtime';
-import { InlineFormLabel, Input } from '@grafana/ui';
+import { InlineField, InlineFieldRow, InlineSwitch, Input } from '@grafana/ui';
import { HttpSettingsBaseProps } from '@grafana/ui/src/components/DataSourceSettings/types';
import { KnownAzureClouds, AzureCredentials } from './AzureCredentials';
@@ -11,12 +11,38 @@ import { AzureCredentialsForm } from './AzureCredentialsForm';
export const AzureAuthSettings: FunctionComponent = (props: HttpSettingsBaseProps) => {
const { dataSourceConfig, onChange } = props;
+ const [overrideAudienceAllowed] = useState(
+ config.featureToggles.prometheusAzureOverrideAudience || !!dataSourceConfig.jsonData.azureEndpointResourceId
+ );
+ const [overrideAudienceChecked, setOverrideAudienceChecked] = useState(
+ !!dataSourceConfig.jsonData.azureEndpointResourceId
+ );
+
const credentials = useMemo(() => getCredentials(dataSourceConfig), [dataSourceConfig]);
const onCredentialsChange = (credentials: AzureCredentials): void => {
onChange(updateCredentials(dataSourceConfig, credentials));
};
+ const onOverrideAudienceChange = (ev: FormEvent): void => {
+ setOverrideAudienceChecked(ev.currentTarget.checked);
+ if (!ev.currentTarget.checked) {
+ onChange({
+ ...dataSourceConfig,
+ jsonData: { ...dataSourceConfig.jsonData, azureEndpointResourceId: undefined },
+ });
+ }
+ };
+
+ const onResourceIdChange = (ev: FormEvent): void => {
+ if (overrideAudienceChecked) {
+ onChange({
+ ...dataSourceConfig,
+ jsonData: { ...dataSourceConfig.jsonData, azureEndpointResourceId: ev.currentTarget.value },
+ });
+ }
+ };
+
return (
<>
Azure Authentication
@@ -26,26 +52,29 @@ export const AzureAuthSettings: FunctionComponent = (prop
azureCloudOptions={KnownAzureClouds}
onCredentialsChange={onCredentialsChange}
/>
- Azure Configuration
-
-
-
- AAD resource ID
-
-
- onChange({
- ...dataSourceConfig,
- jsonData: { ...dataSourceConfig.jsonData, azureEndpointResourceId: event.currentTarget.value },
- })
- }
- />
-
+ {overrideAudienceAllowed && (
+ <>
+ Azure Configuration
+
+
+
+
+
+
+ {overrideAudienceChecked && (
+
+
+
+
+
+ )}
-
-
+
+ )}
);
};
diff --git a/public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx
index 692e7cfe24d..82d80b12a65 100644
--- a/public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx
@@ -18,7 +18,7 @@ export const ConfigEditor = (props: Props) => {
const alertmanagers = getAllAlertmanagerDataSources();
const azureAuthSettings = {
- azureAuthSupported: config.featureToggles['prometheus_azure_auth'] ?? false,
+ azureAuthSupported: !!config.featureToggles.prometheus_azure_auth,
getAzureAuthEnabled: (config: DataSourceSettings ): boolean => hasCredentials(config),
setAzureAuthEnabled: (config: DataSourceSettings, enabled: boolean) =>
enabled ? setDefaultCredentials(config) : resetCredentials(config),
diff --git a/public/app/plugins/datasource/prometheus/datasource.tsx b/public/app/plugins/datasource/prometheus/datasource.tsx
index 420d203c817..9c5426548d7 100644
--- a/public/app/plugins/datasource/prometheus/datasource.tsx
+++ b/public/app/plugins/datasource/prometheus/datasource.tsx
@@ -40,6 +40,7 @@ import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_sr
import { PromApplication, PromApiFeatures } from 'app/types/unified-alerting-dto';
import { addLabelToQuery } from './add_label_to_query';
+import { AnnotationQueryEditor } from './components/AnnotationQueryEditor';
import PrometheusLanguageProvider from './language_provider';
import { expandRecordingRules } from './language_utils';
import { renderLegendFormat } from './legend';
@@ -61,7 +62,7 @@ import {
} from './types';
import { PrometheusVariableSupport } from './variables';
-export const ANNOTATION_QUERY_STEP_DEFAULT = '60s';
+const ANNOTATION_QUERY_STEP_DEFAULT = '60s';
const GET_AND_POST_METADATA_ENDPOINTS = ['api/v1/query', 'api/v1/query_range', 'api/v1/series', 'api/v1/labels'];
export class PrometheusDatasource
@@ -119,6 +120,14 @@ export class PrometheusDatasource
this.customQueryParameters = new URLSearchParams(instanceSettings.jsonData.customQueryParameters);
this.variables = new PrometheusVariableSupport(this, this.templateSrv, this.timeSrv);
this.exemplarsAvailable = true;
+
+ // This needs to be here and cannot be static because of how annotations typing affects casting of data source
+ // objects to DataSourceApi types.
+ // We don't use the default processing for prometheus.
+ // See standardAnnotationSupport.ts/[shouldUseMappingUI|shouldUseLegacyRunner]
+ this.annotations = {
+ QueryEditor: AnnotationQueryEditor,
+ };
}
init = async () => {
diff --git a/public/app/plugins/datasource/prometheus/module.test.ts b/public/app/plugins/datasource/prometheus/module.test.ts
index af031a9ee84..171fd491637 100644
--- a/public/app/plugins/datasource/prometheus/module.test.ts
+++ b/public/app/plugins/datasource/prometheus/module.test.ts
@@ -1,13 +1,7 @@
-import { ANNOTATION_QUERY_STEP_DEFAULT } from './datasource';
import { plugin as PrometheusDatasourcePlugin } from './module';
describe('module', () => {
it('should have metrics query field in panels and Explore', () => {
expect(PrometheusDatasourcePlugin.components.QueryEditor).toBeDefined();
});
- it('should have stepDefaultValuePlaceholder set in annotations ctrl', () => {
- expect(PrometheusDatasourcePlugin.components.AnnotationsQueryCtrl).toBeDefined();
- const annotationsCtrl = new PrometheusDatasourcePlugin.components.AnnotationsQueryCtrl();
- expect(annotationsCtrl.stepDefaultValuePlaceholder).toEqual(ANNOTATION_QUERY_STEP_DEFAULT);
- });
});
diff --git a/public/app/plugins/datasource/prometheus/module.ts b/public/app/plugins/datasource/prometheus/module.ts
index 06c047eeaf2..ba33b7f90cb 100644
--- a/public/app/plugins/datasource/prometheus/module.ts
+++ b/public/app/plugins/datasource/prometheus/module.ts
@@ -3,15 +3,9 @@ import { DataSourcePlugin } from '@grafana/data';
import PromCheatSheet from './components/PromCheatSheet';
import PromQueryEditorByApp from './components/PromQueryEditorByApp';
import { ConfigEditor } from './configuration/ConfigEditor';
-import { ANNOTATION_QUERY_STEP_DEFAULT, PrometheusDatasource } from './datasource';
-
-class PrometheusAnnotationsQueryCtrl {
- static templateUrl = 'partials/annotations.editor.html';
- stepDefaultValuePlaceholder = ANNOTATION_QUERY_STEP_DEFAULT;
-}
+import { PrometheusDatasource } from './datasource';
export const plugin = new DataSourcePlugin(PrometheusDatasource)
.setQueryEditor(PromQueryEditorByApp)
.setConfigEditor(ConfigEditor)
- .setAnnotationQueryCtrl(PrometheusAnnotationsQueryCtrl)
.setQueryEditorHelp(PromCheatSheet);
diff --git a/public/app/plugins/datasource/prometheus/partials/annotations.editor.html b/public/app/plugins/datasource/prometheus/partials/annotations.editor.html
deleted file mode 100644
index c7c54e816e1..00000000000
--- a/public/app/plugins/datasource/prometheus/partials/annotations.editor.html
+++ /dev/null
@@ -1,39 +0,0 @@
-
-
-
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/LabelParamEditor.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/LabelParamEditor.tsx
index ab95e2798e4..941bb1e11f3 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/LabelParamEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/LabelParamEditor.tsx
@@ -3,7 +3,6 @@ import React, { useState } from 'react';
import { DataSourceApi, SelectableValue, toOption } from '@grafana/data';
import { Select } from '@grafana/ui';
-import { PrometheusDatasource } from '../../datasource';
import { promQueryModeller } from '../PromQueryModeller';
import { getOperationParamId } from '../shared/operationUtils';
import { QueryBuilderLabelFilter, QueryBuilderOperationParamEditorProps } from '../shared/types';
@@ -49,8 +48,8 @@ async function loadGroupByLabels(
): Promise>> {
let labels: QueryBuilderLabelFilter[] = query.labels;
- // This function is used by both Prometheus and Loki and this the only difference
- if (datasource instanceof PrometheusDatasource) {
+ // This function is used by both Prometheus and Loki and this the only difference.
+ if (datasource.type === 'prometheus') {
labels = [{ label: '__name__', op: '=', value: query.metric }, ...query.labels];
}
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.test.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.test.tsx
index a4df0c00284..9fc5fe05d38 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.test.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.test.tsx
@@ -78,6 +78,14 @@ function setup(queryOverrides: Partial = {}) {
},
onRunQuery: jest.fn(),
onChange: jest.fn(),
+ uiOptions: {
+ exemplars: true,
+ type: true,
+ format: true,
+ minStep: true,
+ legend: true,
+ resolution: true,
+ },
};
const { container } = render();
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
index 67ef8b17e7b..a071fe5230f 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
@@ -12,6 +12,15 @@ import { QueryOptionGroup } from '../shared/QueryOptionGroup';
import { getLegendModeLabel, PromQueryLegendEditor } from './PromQueryLegendEditor';
+export interface UIOptions {
+ exemplars: boolean;
+ type: boolean;
+ format: boolean;
+ minStep: boolean;
+ legend: boolean;
+ resolution: boolean;
+}
+
export interface Props {
query: PromQuery;
app?: CoreApp;
@@ -118,11 +127,7 @@ function getCollapsedInfo(query: PromQuery, formatOption: string, queryType: str
items.push(`Legend: ${getLegendModeLabel(query.legendFormat)}`);
items.push(`Format: ${formatOption}`);
-
- if (query.interval) {
- items.push(`Step ${query.interval}`);
- }
-
+ items.push(`Step ${query.interval}`);
items.push(`Type: ${queryType}`);
if (query.exemplar) {
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
index 1c0d61b519a..cbb5f0801bc 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
@@ -20,7 +20,9 @@ import { PromQueryBuilderExplained } from './PromQueryBuilderExplained';
import { PromQueryBuilderOptions } from './PromQueryBuilderOptions';
import { PromQueryCodeEditor } from './PromQueryCodeEditor';
-export const PromQueryEditorSelector = React.memo((props) => {
+type Props = PromQueryEditorProps;
+
+export const PromQueryEditorSelector = React.memo((props) => {
const { onChange, onRunQuery, data, app } = props;
const [parseModalOpen, setParseModalOpen] = useState(false);
const [dataIsStale, setDataIsStale] = useState(false);
diff --git a/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx b/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
index da0feae77c7..194b7ceea09 100644
--- a/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
+++ b/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
@@ -4,7 +4,8 @@ import React, { useEffect, useMemo } from 'react';
import { useDispatch } from 'react-redux';
import { GrafanaTheme2, PanelProps } from '@grafana/data';
-import { CustomScrollbar, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
+import { Alert, CustomScrollbar, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
+import { contextSrv } from 'app/core/services/context_srv';
import alertDef from 'app/features/alerting/state/alertDef';
import { useUnifiedAlertingSelector } from 'app/features/alerting/unified/hooks/useUnifiedAlertingSelector';
import { fetchAllPromRulesAction } from 'app/features/alerting/unified/state/actions';
@@ -17,6 +18,7 @@ import {
} from 'app/features/alerting/unified/utils/datasource';
import { flattenRules, getFirstActiveAt } from 'app/features/alerting/unified/utils/rules';
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
+import { AccessControlAction } from 'app/types';
import { PromRuleWithLocation } from 'app/types/unified-alerting';
import { PromAlertingRuleState } from 'app/types/unified-alerting-dto';
@@ -60,6 +62,15 @@ export function UnifiedAlertList(props: PanelProps) {
const noAlertsMessage = rules.length ? '' : 'No alerts';
+ if (
+ !contextSrv.hasPermission(AccessControlAction.AlertingRuleRead) &&
+ !contextSrv.hasPermission(AccessControlAction.AlertingRuleExternalRead)
+ ) {
+ return (
+ Sorry, you do not have the required permissions to read alert rules
+ );
+ }
+
return (
diff --git a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx
index 7176739fa1f..c42b7a2fdf2 100644
--- a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx
+++ b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx
@@ -316,7 +316,7 @@ export const CandlestickPanel: React.FC = ({
/>
)}
-
+
);
}}
diff --git a/public/app/plugins/panel/canvas/editor/PlacementEditor.tsx b/public/app/plugins/panel/canvas/editor/PlacementEditor.tsx
index 1080cd38179..81cbc37e423 100644
--- a/public/app/plugins/panel/canvas/editor/PlacementEditor.tsx
+++ b/public/app/plugins/panel/canvas/editor/PlacementEditor.tsx
@@ -48,6 +48,12 @@ export const PlacementEditor: FC {
+ setTimeout(() => {
+ settings.scene.select({ targets: [element.div!] });
+ });
+ };
+
const onHorizontalConstraintSelect = (h: SelectableValue) => {
onHorizontalConstraintChange(h.value!);
};
@@ -57,6 +63,7 @@ export const PlacementEditor: FC) => {
@@ -68,16 +75,14 @@ export const PlacementEditor: FC {
element.options.placement![placement] = value ?? element.options.placement![placement];
element.applyLayoutStylesToDiv();
settings.scene.clearCurrentSelection(true);
- // TODO: This needs to have a better sync method with where div is
- setTimeout(() => {
- settings.scene.select({ targets: [element.div!] });
- }, 100);
+ reselectElementAfterChange();
};
const constraint = element.tempConstraint ?? layout ?? {};
diff --git a/public/app/plugins/panel/graph/data_processor.ts b/public/app/plugins/panel/graph/data_processor.ts
index 51d5e068f62..b0db3635b80 100644
--- a/public/app/plugins/panel/graph/data_processor.ts
+++ b/public/app/plugins/panel/graph/data_processor.ts
@@ -1,15 +1,6 @@
import { find } from 'lodash';
-import {
- DataFrame,
- dateTime,
- Field,
- FieldType,
- getColorForTheme,
- getFieldDisplayName,
- getTimeField,
- TimeRange,
-} from '@grafana/data';
+import { DataFrame, dateTime, Field, FieldType, getFieldDisplayName, getTimeField, TimeRange } from '@grafana/data';
import { colors } from '@grafana/ui';
import { applyNullInsertThreshold } from '@grafana/ui/src/components/GraphNG/nullInsertThreshold';
import config from 'app/core/config';
@@ -89,7 +80,7 @@ export class DataProcessor {
const series = new TimeSeries({
datapoints: datapoints || [],
alias: alias,
- color: getColorForTheme(color, config.theme),
+ color: config.theme.visualization.getColorByName(color),
unit: field.config ? field.config.unit : undefined,
dataFrameIndex,
fieldIndex,
diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts
index 4d04007096a..7c2d7ade2e9 100644
--- a/public/app/plugins/panel/graph/module.ts
+++ b/public/app/plugins/panel/graph/module.ts
@@ -8,7 +8,7 @@ import './event_editor';
import { auto } from 'angular';
import { defaults, find, without } from 'lodash';
-import { DataFrame, FieldConfigProperty, getColorForTheme, PanelEvents, PanelPlugin } from '@grafana/data';
+import { DataFrame, FieldConfigProperty, PanelEvents, PanelPlugin } from '@grafana/data';
import { locationService } from '@grafana/runtime';
import { MetricsPanelCtrl } from 'app/angular/panel/metrics_panel_ctrl';
import config from 'app/core/config';
@@ -297,7 +297,7 @@ export class GraphCtrl extends MetricsPanelCtrl {
}
onColorChange = (series: any, color: string) => {
- series.setColor(getColorForTheme(color, config.theme));
+ series.setColor(config.theme.visualization.getColorByName(color));
this.panel.aliasColors[series.alias] = color;
this.render();
};
diff --git a/public/app/plugins/panel/graph/threshold_manager.ts b/public/app/plugins/panel/graph/threshold_manager.ts
index 533ef94392b..599976a8bfb 100644
--- a/public/app/plugins/panel/graph/threshold_manager.ts
+++ b/public/app/plugins/panel/graph/threshold_manager.ts
@@ -2,7 +2,6 @@ import 'vendor/flot/jquery.flot';
import $ from 'jquery';
import { isNumber } from 'lodash';
-import { getColorForTheme } from '@grafana/data';
import { PanelCtrl } from 'app/angular/panel/panel_ctrl';
import { config } from 'app/core/config';
import { CoreEvents } from 'app/types';
@@ -235,12 +234,12 @@ export class ThresholdManager {
if (threshold.yaxis === 'right' && this.hasSecondYAxis) {
options.grid.markings.push({
y2axis: { from: threshold.value, to: limit },
- color: getColorForTheme(fillColor, config.theme),
+ color: config.theme.visualization.getColorByName(fillColor),
});
} else {
options.grid.markings.push({
yaxis: { from: threshold.value, to: limit },
- color: getColorForTheme(fillColor, config.theme),
+ color: config.theme.visualization.getColorByName(fillColor),
});
}
}
@@ -248,12 +247,12 @@ export class ThresholdManager {
if (threshold.yaxis === 'right' && this.hasSecondYAxis) {
options.grid.markings.push({
y2axis: { from: threshold.value, to: threshold.value },
- color: getColorForTheme(lineColor, config.theme),
+ color: config.theme.visualization.getColorByName(lineColor),
});
} else {
options.grid.markings.push({
yaxis: { from: threshold.value, to: threshold.value },
- color: getColorForTheme(lineColor, config.theme),
+ color: config.theme.visualization.getColorByName(lineColor),
});
}
}
diff --git a/public/app/plugins/panel/graph/time_region_manager.ts b/public/app/plugins/panel/graph/time_region_manager.ts
index cd83a083871..8c5272e52cd 100644
--- a/public/app/plugins/panel/graph/time_region_manager.ts
+++ b/public/app/plugins/panel/graph/time_region_manager.ts
@@ -1,7 +1,7 @@
import 'vendor/flot/jquery.flot';
import { map } from 'lodash';
-import { getColorForTheme, dateTime, DateTime, AbsoluteTimeRange, GrafanaTheme } from '@grafana/data';
+import { dateTime, DateTime, AbsoluteTimeRange, GrafanaTheme } from '@grafana/data';
import { config } from 'app/core/config';
type TimeRegionColorDefinition = {
@@ -51,8 +51,8 @@ function getColor(timeRegion: any, theme: GrafanaTheme): TimeRegionColorDefiniti
if (timeRegion.colorMode === 'custom') {
return {
- fill: timeRegion.fill && timeRegion.fillColor ? getColorForTheme(timeRegion.fillColor, theme) : null,
- line: timeRegion.line && timeRegion.lineColor ? getColorForTheme(timeRegion.lineColor, theme) : null,
+ fill: timeRegion.fill && timeRegion.fillColor ? theme.visualization.getColorByName(timeRegion.fillColor) : null,
+ line: timeRegion.line && timeRegion.lineColor ? theme.visualization.getColorByName(timeRegion.lineColor) : null,
};
}
@@ -63,8 +63,8 @@ function getColor(timeRegion: any, theme: GrafanaTheme): TimeRegionColorDefiniti
}
return {
- fill: timeRegion.fill ? getColorForTheme(colorMode.color.fill, theme) : null,
- line: timeRegion.fill ? getColorForTheme(colorMode.color.line, theme) : null,
+ fill: timeRegion.fill ? theme.visualization.getColorByName(colorMode.color.fill) : null,
+ line: timeRegion.fill ? theme.visualization.getColorByName(colorMode.color.line) : null,
};
}
diff --git a/public/app/plugins/panel/heatmap-new/HeatmapPanel.tsx b/public/app/plugins/panel/heatmap-new/HeatmapPanel.tsx
index 09040bb6836..01ce263be9b 100644
--- a/public/app/plugins/panel/heatmap-new/HeatmapPanel.tsx
+++ b/public/app/plugins/panel/heatmap-new/HeatmapPanel.tsx
@@ -115,6 +115,7 @@ export const HeatmapPanel: React.FC = ({
cellGap: options.cellGap,
hideThreshold: options.hideThreshold,
exemplarColor: options.exemplars?.color ?? 'rgba(255,0,255,0.7)',
+ yAxisReverse: options.yAxisReverse,
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [options, data.structureRev]);
diff --git a/public/app/plugins/panel/heatmap-new/migrations.test.ts b/public/app/plugins/panel/heatmap-new/migrations.test.ts
index 276eb7fdb4d..8d8c5bf8018 100644
--- a/public/app/plugins/panel/heatmap-new/migrations.test.ts
+++ b/public/app/plugins/panel/heatmap-new/migrations.test.ts
@@ -43,7 +43,7 @@ describe('Heatmap Migrations', () => {
"mode": "scheme",
"scale": "exponential",
"scheme": "BuGn",
- "steps": 256,
+ "steps": 128,
},
"exemplars": Object {
"color": "rgba(255,0,255,0.7)",
diff --git a/public/app/plugins/panel/heatmap-new/migrations.ts b/public/app/plugins/panel/heatmap-new/migrations.ts
index 9a1530f38d5..7864f8ff4ae 100644
--- a/public/app/plugins/panel/heatmap-new/migrations.ts
+++ b/public/app/plugins/panel/heatmap-new/migrations.ts
@@ -53,7 +53,7 @@ export function angularToReactHeatmap(angular: any): { fieldConfig: FieldConfigS
calculate,
color: {
...defaultPanelOptions.color,
- steps: 256, // best match with existing colors
+ steps: 128, // best match with existing colors
},
cellGap: asNumber(angular.cards?.cardPadding),
cellSize: asNumber(angular.cards?.cardRound),
diff --git a/public/app/plugins/panel/heatmap-new/utils.ts b/public/app/plugins/panel/heatmap-new/utils.ts
index 3197cfab7ac..15b4cb6e5a1 100644
--- a/public/app/plugins/panel/heatmap-new/utils.ts
+++ b/public/app/plugins/panel/heatmap-new/utils.ts
@@ -52,6 +52,7 @@ interface PrepConfigOpts {
exemplarColor: string;
cellGap?: number | null; // in css pixels
hideThreshold?: number;
+ yAxisReverse?: boolean;
}
export function prepConfig(opts: PrepConfigOpts) {
@@ -67,6 +68,7 @@ export function prepConfig(opts: PrepConfigOpts) {
palette,
cellGap,
hideThreshold,
+ yAxisReverse,
} = opts;
const pxRatio = devicePixelRatio;
@@ -210,14 +212,18 @@ export function prepConfig(opts: PrepConfigOpts) {
isTime: false,
// distribution: ScaleDistribution.Ordinal, // does not work with facets/scatter yet
orientation: ScaleOrientation.Vertical,
- direction: ScaleDirection.Up,
+ direction: yAxisReverse ? ScaleDirection.Down : ScaleDirection.Up,
// should be tweakable manually
distribution: shouldUseLogScale ? ScaleDistribution.Log : ScaleDistribution.Linear,
log: 2,
range: shouldUseLogScale
? undefined
: (u, dataMin, dataMax) => {
- const bucketSize = dataRef.current?.yBucketSize;
+ let bucketSize = dataRef.current?.yBucketSize;
+
+ if (bucketSize === 0) {
+ bucketSize = 1;
+ }
if (bucketSize) {
if (dataRef.current?.yLayout === BucketLayout.le) {
@@ -302,7 +308,11 @@ export function prepConfig(opts: PrepConfigOpts) {
gap: cellGap,
hideThreshold,
xAlign: dataRef.current?.xLayout === BucketLayout.le ? -1 : dataRef.current?.xLayout === BucketLayout.ge ? 1 : 0,
- yAlign: dataRef.current?.yLayout === BucketLayout.le ? -1 : dataRef.current?.yLayout === BucketLayout.ge ? 1 : 0,
+ yAlign: ((dataRef.current?.yLayout === BucketLayout.le
+ ? -1
+ : dataRef.current?.yLayout === BucketLayout.ge
+ ? 1
+ : 0) * (yAxisReverse ? -1 : 1)) as -1 | 0 | 1,
disp: {
fill: {
values: (u, seriesIdx) => {
@@ -437,7 +447,7 @@ export function heatmapPathsDense(opts: PathbuilderOpts) {
// detect x and y bin qtys by detecting layout repetition in x & y data
let yBinQty = dlen - ys.lastIndexOf(ys[0]);
let xBinQty = dlen / yBinQty;
- let yBinIncr = ys[1] - ys[0];
+ let yBinIncr = ys[1] - ys[0] || scaleY.max! - scaleY.min!;
let xBinIncr = xs[yBinQty] - xs[0];
// uniform tile sizes based on zoom level
diff --git a/public/app/plugins/panel/heatmap/color_legend.ts b/public/app/plugins/panel/heatmap/color_legend.ts
index d6eb9892d21..71df88abe40 100644
--- a/public/app/plugins/panel/heatmap/color_legend.ts
+++ b/public/app/plugins/panel/heatmap/color_legend.ts
@@ -2,7 +2,7 @@ import * as d3 from 'd3';
import $ from 'jquery';
import { find, isEmpty, isNil, sortBy, uniq } from 'lodash';
-import { PanelEvents, getColorForTheme } from '@grafana/data';
+import { PanelEvents } from '@grafana/data';
import coreModule from 'app/angular/core_module';
import { config } from 'app/core/config';
import { contextSrv } from 'app/core/core';
@@ -273,7 +273,7 @@ function drawSimpleOpacityLegend(elem: JQuery, options: { colorScale: string; ex
.attr('width', rangeStep)
.attr('height', legendHeight)
.attr('stroke-width', 0)
- .attr('fill', getColorForTheme(options.cardColor, config.theme))
+ .attr('fill', config.theme.visualization.getColorByName(options.cardColor))
.style('opacity', (d) => legendOpacityScale(d));
}
}
diff --git a/public/app/plugins/panel/heatmap/rendering.ts b/public/app/plugins/panel/heatmap/rendering.ts
index a397249286c..906224b24e2 100644
--- a/public/app/plugins/panel/heatmap/rendering.ts
+++ b/public/app/plugins/panel/heatmap/rendering.ts
@@ -5,7 +5,6 @@ import { find, isEmpty, isNaN, isNil, isString, map, max, min, toNumber } from '
import {
dateTimeFormat,
formattedValueToString,
- getColorForTheme,
getValueFormat,
LegacyGraphHoverClearEvent,
LegacyGraphHoverEvent,
@@ -660,7 +659,7 @@ export class HeatmapRenderer {
getCardColor(d: { count: any }) {
if (this.panel.color.mode === 'opacity') {
- return getColorForTheme(this.panel.color.cardColor, config.theme);
+ return config.theme.visualization.getColorByName(this.panel.color.cardColor);
} else {
return this.colorScale(d.count);
}
diff --git a/public/app/plugins/panel/nodeGraph/Legend.tsx b/public/app/plugins/panel/nodeGraph/Legend.tsx
index f2f7184b16e..350eaf6b62f 100644
--- a/public/app/plugins/panel/nodeGraph/Legend.tsx
+++ b/public/app/plugins/panel/nodeGraph/Legend.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
import { identity } from 'lodash';
import React, { useCallback } from 'react';
-import { Field, FieldColorModeId, getColorForTheme, GrafanaTheme } from '@grafana/data';
+import { Field, FieldColorModeId, GrafanaTheme } from '@grafana/data';
import { LegendDisplayMode } from '@grafana/schema';
import { Icon, useStyles, useTheme, VizLegend, VizLegendItem, VizLegendListItem } from '@grafana/ui';
@@ -97,14 +97,14 @@ function getColorLegendItems(nodes: NodeDatum[], theme: GrafanaTheme): Array>(props: Props
{allowConfiguration && (
- | 
+{{< figure src="/static/img/docs/alerting/unified/contact-points-template-fields-8-0.png" class="docs-image--no-shadow" max-width= "550px" caption="Default template" >}}
The following example shows the use of a custom template within one of the contact point fields.
-
-
-### Create a message template
-
-> **Note:** Before Grafana v8.2, the configuration of the embedded Alertmanager was shared across organisations. Users of Grafana 8.0 and 8.1 are advised to use the new Grafana 8 alerts only if they have one organisation. Otherwise, silences for the Grafana managed alerts will be visible by all organizations.
-
-1. In the Grafana menu, click the **Alerting** (bell) icon to open the Alerting page listing existing alerts.
-1. In the Alerting page, click **Contact points** to open the page listing existing contact points.
-1. From Alertmanager drop-down, select an external Alertmanager to create and manage templates for the external data source. Otherwise, keep the default option of Grafana.
- {{< figure max-width="250px" src="/static/img/docs/alerting/unified/contact-points-select-am-8-0.gif" caption="Select Alertmanager" >}}
-1. Click **Add template**.
-1. In **Name**, add a descriptive name.
-1. In **Content**, add the content of the template.
-1. Click **Save template** button at the bottom of the page.
- 
-
-The `define` tag in the Content section assigns the template name. This tag is optional, and when omitted, the template name is derived from the **Name** field. When both are specified, it is a best practice to ensure that they are the same.
-
-### Edit a message template
-
-1. In the Alerting page, click **Contact points** to open the page listing existing contact points.
-1. In the Template table, find the template you want to edit, then click the **Edit** (pen icon).
-1. Make your changes, then click **Save template**.
-
-### Delete a message template
-
-1. In the Alerting page, click **Contact points** to open the page listing existing contact points.
-1. In the Template table, find the template you want to delete, then click the **Delete** (trash icon).
-1. In the confirmation dialog, click **Yes, delete** to delete the template.
-
-Use caution when deleting a template since Grafana does not prevent you from deleting templates that are in use.
+{{< figure src="/static/img/docs/alerting/unified/contact-points-use-template-8-0.png" class="docs-image--no-shadow" max-width= "550px" caption="Default template" >}}
### Nested templates
@@ -79,59 +56,6 @@ You can use any of the following built-in template options to embed custom templ
| `default.message` | Provides a formatted summary of firing and resolved alerts. |
| `teams.default.message` | Similar to `default.messsage`, formatted for Microsoft Teams. |
-### Example of a custom template
-
-Here's an example of how to use a custom template. You can also use the default template included in the setup.
-
-Step 1: Configure a template to render a single alert.
-
-```
-{{ define "myalert" }}
- [{{.Status}}] {{ .Labels.alertname }}
-
- Labels:
- {{ range .Labels.SortedPairs }}
- {{ .Name }}: {{ .Value }}
- {{ end }}
-
- {{ if gt (len .Annotations) 0 }}
- Annotations:
- {{ range .Annotations.SortedPairs }}
- {{ .Name }}: {{ .Value }}
- {{ end }}
- {{ end }}
-
- {{ if gt (len .SilenceURL ) 0 }}
- Silence alert: {{ .SilenceURL }}
- {{ end }}
- {{ if gt (len .DashboardURL ) 0 }}
- Go to dashboard: {{ .DashboardURL }}
- {{ end }}
-{{ end }}
-```
-
-Step 2: Configure a template to render entire notification message.
-
-```
-{{ define "mymessage" }}
- {{ if gt (len .Alerts.Firing) 0 }}
- {{ len .Alerts.Firing }} firing:
- {{ range .Alerts.Firing }} {{ template "myalert" .}} {{ end }}
- {{ end }}
- {{ if gt (len .Alerts.Resolved) 0 }}
- {{ len .Alerts.Resolved }} resolved:
- {{ range .Alerts.Resolved }} {{ template "myalert" .}} {{ end }}
- {{ end }}
-{{ end }}
-```
-
-Step 3: Add `mymessage` in the notification message field.
-
-```
-Alert summary:
-{{ template "mymessage" . }}
-```
-
### HTML in message templates
HTML in alerting message templates is escaped. We do not support rendering of HTML in the resulting notification.
diff --git a/docs/sources/alerting/contact-points/message-templating/create-message-template.md b/docs/sources/alerting/contact-points/message-templating/create-message-template.md
new file mode 100644
index 00000000000..9a143aa6754
--- /dev/null
+++ b/docs/sources/alerting/contact-points/message-templating/create-message-template.md
@@ -0,0 +1,32 @@
+---
+aliases:
+ - /docs/grafana/latest/alerting/contact-points/message-templating/
+ - /docs/grafana/latest/alerting/message-templating/
+ - /docs/grafana/latest/alerting/unified-alerting/message-templating/
+keywords:
+ - grafana
+ - alerting
+ - guide
+ - contact point
+ - templating
+title: Create message template
+weight: 100
+---
+
+# Create a message template
+
+You can use message templates to customize notification messages for the contact point types.
+
+To create a message tempplate:
+
+1. In the Grafana menu, click the **Alerting** (bell) icon to open the Alerting page listing existing alerts.
+2. In the Alerting page, click **Contact points** to open the page listing existing contact points.
+3. From Alertmanager drop-down, select an external Alertmanager to create and manage templates for the external data source. Otherwise, keep the default option of Grafana.
+ {{< figure max-width="250px" src="/static/img/docs/alerting/unified/contact-points-select-am-8-0.gif" caption="Select Alertmanager" >}}
+4. Click **Add template**.
+5. In **Name**, add a descriptive name.
+6. In **Content**, add the content of the template.
+7. Click **Save template** button at the bottom of the page.
+