();
const [, fetchOrgUsers] = useAsyncFn(async (page) => {
const result = await getOrgUsers(orgId, page);
@@ -45,8 +51,8 @@ const AdminEditOrgPage = ({ match }: Props) => {
fetchOrgUsers(page);
}, [fetchOrg, fetchOrgUsers, page]);
- const onUpdateOrgName = async (name: string) => {
- await updateOrgName(name, orgId);
+ const onUpdateOrgName = async ({ orgName }: OrgNameDTO) => {
+ await updateOrgName(orgName, orgId);
};
const renderMissingPermissionMessage = () => (
@@ -82,21 +88,18 @@ const AdminEditOrgPage = ({ match }: Props) => {
<>
{orgState.value && (
-
+
)}
diff --git a/public/app/features/admin/AdminFeatureTogglesAPI.test.ts b/public/app/features/admin/AdminFeatureTogglesAPI.test.ts
new file mode 100644
index 00000000000..ca6c25be525
--- /dev/null
+++ b/public/app/features/admin/AdminFeatureTogglesAPI.test.ts
@@ -0,0 +1,102 @@
+import { BackendSrvRequest, config } from '@grafana/runtime';
+
+import { getTogglesAPI } from './AdminFeatureTogglesAPI';
+
+// implements @grafana/runtime/BackendSrv
+class MockSrv {
+ constructor() {
+ this.apiCalls = [];
+ }
+
+ apiCalls: Array<{
+ url: string;
+ method: string;
+ }>;
+
+ async get(
+ url: string,
+ params?: BackendSrvRequest['params'],
+ requestId?: BackendSrvRequest['requestId'],
+ options?: Partial
+ ) {
+ this.apiCalls.push({
+ url: url,
+ method: 'get',
+ });
+ if (config.featureToggles.kubernetesFeatureToggles && url.indexOf('current') > -1) {
+ return await { toggles: [] };
+ }
+
+ return await {};
+ }
+
+ async post(url: string, data?: unknown, options?: Partial) {
+ this.apiCalls.push({
+ url: url,
+ method: 'post',
+ });
+ return await {};
+ }
+
+ async patch(url: string, data: unknown, options?: Partial) {
+ this.apiCalls.push({
+ url: url,
+ method: 'patch',
+ });
+ return await {};
+ }
+
+ // these aren't needed for this test
+ async put(url: string, data: unknown, options?: Partial) {
+ return await {};
+ }
+ async delete(url: string, data?: unknown, options?: Partial) {
+ return await {};
+ }
+}
+
+const testBackendSrv = new MockSrv();
+
+jest.mock('@grafana/runtime', () => ({
+ ...jest.requireActual('@grafana/runtime'),
+ getBackendSrv: () => testBackendSrv,
+ config: {
+ featureToggles: {
+ kubernetesFeatureToggles: false,
+ grafanaAPIServerWithExperimentalAPIs: false,
+ },
+ },
+}));
+
+describe('AdminFeatureTogglesApi', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ testBackendSrv.apiCalls.length = 0;
+ });
+
+ const originalToggles = { ...config.featureToggles };
+
+ afterAll(() => {
+ config.featureToggles = originalToggles;
+ });
+
+ it('uses the k8s api when the k8s toggles are on', async () => {
+ config.featureToggles.kubernetesFeatureToggles = true;
+ config.featureToggles.grafanaAPIServerWithExperimentalAPIs = true;
+
+ const togglesApi = getTogglesAPI();
+ await togglesApi.getFeatureToggles();
+ await togglesApi.updateFeatureToggles([]);
+ const expected = [
+ {
+ method: 'get',
+ url: '/apis/featuretoggle.grafana.app/v0alpha1/current',
+ },
+ {
+ method: 'patch',
+ url: '/apis/featuretoggle.grafana.app/v0alpha1/current',
+ },
+ ];
+ expect(testBackendSrv.apiCalls).toEqual(expect.arrayContaining(expected));
+ });
+});
diff --git a/public/app/features/admin/AdminFeatureTogglesAPI.ts b/public/app/features/admin/AdminFeatureTogglesAPI.ts
index 889f6f0759e..62f0c8b5f26 100644
--- a/public/app/features/admin/AdminFeatureTogglesAPI.ts
+++ b/public/app/features/admin/AdminFeatureTogglesAPI.ts
@@ -1,62 +1,74 @@
-import { createApi, BaseQueryFn } from '@reduxjs/toolkit/query/react';
-import { lastValueFrom } from 'rxjs';
-
import { getBackendSrv } from '@grafana/runtime';
-type QueryArgs = {
- url: string;
- method?: string;
- body?: { featureToggles: FeatureToggle[] };
-};
-
-const backendSrvBaseQuery =
- ({ baseUrl }: { baseUrl: string }): BaseQueryFn =>
- async ({ url, method = 'GET', body }) => {
- try {
- const { data } = await lastValueFrom(
- getBackendSrv().fetch({
- url: baseUrl + url,
- method,
- data: body,
- })
- );
- return { data };
- } catch (error) {
- return { error };
- }
- };
-
-export const togglesApi = createApi({
- reducerPath: 'togglesApi',
- baseQuery: backendSrvBaseQuery({ baseUrl: '/api' }),
- endpoints: (builder) => ({
- getManagerState: builder.query({
- query: () => ({ url: '/featuremgmt/state' }),
- }),
- getFeatureToggles: builder.query({
- query: () => ({ url: '/featuremgmt' }),
- }),
- updateFeatureToggles: builder.mutation({
- query: (updatedToggles) => ({
- url: '/featuremgmt',
- method: 'POST',
- body: { featureToggles: updatedToggles },
- }),
- }),
- }),
-});
-
-type FeatureToggle = {
+export type FeatureToggle = {
name: string;
description?: string;
enabled: boolean;
readOnly?: boolean;
+ hidden?: boolean;
};
-type FeatureMgmtState = {
+export type CurrentTogglesState = {
restartRequired: boolean;
allowEditing: boolean;
+ toggles: FeatureToggle[];
};
-export const { useGetManagerStateQuery, useGetFeatureTogglesQuery, useUpdateFeatureTogglesMutation } = togglesApi;
-export type { FeatureToggle, FeatureMgmtState };
+interface ResolvedToggleState {
+ kind: 'ResolvedToggleState';
+ restartRequired?: boolean;
+ allowEditing?: boolean;
+ toggles?: K8sToggleSpec[]; // not used in patch
+ enabled: { [key: string]: boolean };
+}
+
+interface K8sToggleSpec {
+ name: string;
+ description: string;
+ enabled: boolean;
+ writeable: boolean;
+ source: K8sToggleSource;
+}
+
+interface K8sToggleSource {
+ namespace: string;
+ name: string;
+}
+
+interface FeatureTogglesAPI {
+ getFeatureToggles(): Promise;
+ updateFeatureToggles(toggles: FeatureToggle[]): Promise;
+}
+
+class K8sAPI implements FeatureTogglesAPI {
+ baseURL = '/apis/featuretoggle.grafana.app/v0alpha1';
+
+ async getFeatureToggles(): Promise {
+ const current = await getBackendSrv().get(this.baseURL + '/current');
+ return {
+ restartRequired: Boolean(current.restartRequired),
+ allowEditing: Boolean(current.allowEditing),
+ toggles: current.toggles!.map((t) => ({
+ name: t.name,
+ description: t.description!,
+ enabled: t.enabled,
+ readOnly: !Boolean(t.writeable),
+ hidden: false, // only return visible things
+ })),
+ };
+ }
+ updateFeatureToggles(toggles: FeatureToggle[]): Promise {
+ const patchBody: ResolvedToggleState = {
+ kind: 'ResolvedToggleState',
+ enabled: {},
+ };
+ toggles.forEach((t) => {
+ patchBody.enabled[t.name] = t.enabled;
+ });
+ return getBackendSrv().patch(this.baseURL + '/current', patchBody);
+ }
+}
+
+export const getTogglesAPI = (): FeatureTogglesAPI => {
+ return new K8sAPI();
+};
diff --git a/public/app/features/admin/AdminFeatureTogglesPage.tsx b/public/app/features/admin/AdminFeatureTogglesPage.tsx
index 7c7fde06c5f..4d231b644fd 100644
--- a/public/app/features/admin/AdminFeatureTogglesPage.tsx
+++ b/public/app/features/admin/AdminFeatureTogglesPage.tsx
@@ -1,26 +1,24 @@
import { css } from '@emotion/css';
import React, { useState } from 'react';
+import { useAsync } from 'react-use';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2, Icon } from '@grafana/ui';
import { Page } from 'app/core/components/Page/Page';
-import { useGetFeatureTogglesQuery, useGetManagerStateQuery } from './AdminFeatureTogglesAPI';
+import { getTogglesAPI } from './AdminFeatureTogglesAPI';
import { AdminFeatureTogglesTable } from './AdminFeatureTogglesTable';
export default function AdminFeatureTogglesPage() {
- const { data: featureToggles, isLoading, isError } = useGetFeatureTogglesQuery();
- const { data: featureMgmtState } = useGetManagerStateQuery();
+ const [reload] = useState(1);
+ const togglesApi = getTogglesAPI();
+ const featureState = useAsync(() => togglesApi.getFeatureToggles(), [reload]);
const [updateSuccessful, setUpdateSuccessful] = useState(false);
-
const styles = useStyles2(getStyles);
- const getErrorMessage = () => {
- return 'Error fetching feature toggles';
- };
-
const handleUpdateSuccess = () => {
setUpdateSuccessful(true);
+ // setReload(reload+1); << would trigger updating the server state!
};
const EditingAlert = () => {
@@ -30,7 +28,7 @@ export default function AdminFeatureTogglesPage() {
- {featureMgmtState?.restartRequired || updateSuccessful
+ {featureState.value?.restartRequired || updateSuccessful
? 'A restart is pending for your Grafana instance to apply the latest feature toggle changes'
: 'Saving feature toggle changes will prompt a restart of the instance, which may take a few minutes'}
@@ -54,15 +52,16 @@ export default function AdminFeatureTogglesPage() {
return (
-
+
<>
- {isError && getErrorMessage()}
- {isLoading && 'Fetching feature toggles'}
- {featureMgmtState?.allowEditing && }
- {featureToggles && (
+ {featureState.error}
+ {featureState.loading && 'Fetching feature toggles'}
+
+ {featureState.value?.restartRequired && }
+ {featureState.value && (
)}
diff --git a/public/app/features/admin/AdminFeatureTogglesTable.tsx b/public/app/features/admin/AdminFeatureTogglesTable.tsx
index d67a60c71eb..67697699af7 100644
--- a/public/app/features/admin/AdminFeatureTogglesTable.tsx
+++ b/public/app/features/admin/AdminFeatureTogglesTable.tsx
@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react';
import { Switch, InteractiveTable, Tooltip, type CellProps, Button, type SortByFn } from '@grafana/ui';
-import { type FeatureToggle, useUpdateFeatureTogglesMutation } from './AdminFeatureTogglesAPI';
+import { FeatureToggle, getTogglesAPI } from './AdminFeatureTogglesAPI';
interface Props {
featureToggles: FeatureToggle[];
@@ -30,10 +30,12 @@ const sortByEnabled: SortByFn = (a, b) => {
};
export function AdminFeatureTogglesTable({ featureToggles, allowEditing, onUpdateSuccess }: Props) {
+ // sort manually, doesn't look like it can be automatically done in the table
+ featureToggles.sort((a, b) => a.name.localeCompare(b.name));
const serverToggles = useRef(featureToggles);
const [localToggles, setLocalToggles] = useState(featureToggles);
- const [updateFeatureToggles] = useUpdateFeatureTogglesMutation();
const [isSaving, setIsSaving] = useState(false);
+ const togglesApi = getTogglesAPI();
const handleToggleChange = (toggle: FeatureToggle, newValue: boolean) => {
const updatedToggle = { ...toggle, enabled: newValue };
@@ -47,12 +49,10 @@ export function AdminFeatureTogglesTable({ featureToggles, allowEditing, onUpdat
setIsSaving(true);
try {
const modifiedToggles = getModifiedToggles();
- const resp = await updateFeatureToggles(modifiedToggles);
- if (!('error' in resp)) {
- // server toggles successfully updated
- serverToggles.current = [...localToggles];
- onUpdateSuccess();
- }
+ await togglesApi.updateFeatureToggles(modifiedToggles);
+ // Pretend the values came from a new request
+ serverToggles.current = [...localToggles];
+ onUpdateSuccess(); // should trigger a new get
} finally {
setIsSaving(false);
}
diff --git a/public/app/features/admin/UserCreatePage.tsx b/public/app/features/admin/UserCreatePage.tsx
index da72bd30d90..34bdee39089 100644
--- a/public/app/features/admin/UserCreatePage.tsx
+++ b/public/app/features/admin/UserCreatePage.tsx
@@ -1,9 +1,10 @@
import React, { useCallback } from 'react';
+import { useForm } from 'react-hook-form';
import { useHistory } from 'react-router-dom';
import { NavModelItem } from '@grafana/data';
import { getBackendSrv } from '@grafana/runtime';
-import { Form, Button, Input, Field } from '@grafana/ui';
+import { Button, Input, Field } from '@grafana/ui';
import { Page } from 'app/core/components/Page/Page';
interface UserDTO {
@@ -24,6 +25,11 @@ const pageNav: NavModelItem = {
const UserCreatePage = () => {
const history = useHistory();
+ const {
+ handleSubmit,
+ register,
+ formState: { errors },
+ } = useForm({ mode: 'onBlur' });
const onSubmit = useCallback(
async (data: UserDTO) => {
@@ -37,45 +43,34 @@ const UserCreatePage = () => {
return (
-
+
+
+
+
+ value.trim() !== '' && value.length >= 4,
+ })}
+ type="password"
+ />
+
+
+
);
diff --git a/public/app/features/admin/ldap/LdapPage.tsx b/public/app/features/admin/ldap/LdapPage.tsx
index d61c7711ca1..d7bf34f6b87 100644
--- a/public/app/features/admin/ldap/LdapPage.tsx
+++ b/public/app/features/admin/ldap/LdapPage.tsx
@@ -1,9 +1,10 @@
-import React, { PureComponent } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
import { connect, ConnectedProps } from 'react-redux';
import { NavModelItem } from '@grafana/data';
import { featureEnabled } from '@grafana/runtime';
-import { Alert, Button, Field, Form, Input, Stack } from '@grafana/ui';
+import { Alert, Button, Field, Input, Stack } from '@grafana/ui';
import { Page } from 'app/core/components/Page/Page';
import { contextSrv } from 'app/core/core';
import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
@@ -37,10 +38,6 @@ interface OwnProps extends GrafanaRouteComponentProps<{}, { username?: string }>
userError?: LdapError;
}
-interface State {
- isLoading: boolean;
-}
-
interface FormModel {
username: string;
}
@@ -52,101 +49,105 @@ const pageNav: NavModelItem = {
id: 'LDAP',
};
-export class LdapPage extends PureComponent {
- state = {
- isLoading: true,
- };
+export const LdapPage = ({
+ clearUserMappingInfo,
+ queryParams,
+ loadLdapState,
+ loadLdapSyncStatus,
+ loadUserMapping,
+ clearUserError,
+ ldapUser,
+ userError,
+ ldapError,
+ ldapSyncInfo,
+ ldapConnectionInfo,
+}: Props) => {
+ const [isLoading, setIsLoading] = useState(true);
+ const { register, handleSubmit } = useForm();
- async componentDidMount() {
- const { clearUserMappingInfo, queryParams } = this.props;
- await clearUserMappingInfo();
- await this.fetchLDAPStatus();
+ const fetchUserMapping = useCallback(
+ async (username: string) => {
+ return loadUserMapping(username);
+ },
+ [loadUserMapping]
+ );
- if (queryParams.username) {
- await this.fetchUserMapping(queryParams.username);
+ useEffect(() => {
+ const fetchLDAPStatus = async () => {
+ return Promise.all([loadLdapState(), loadLdapSyncStatus()]);
+ };
+
+ async function init() {
+ await clearUserMappingInfo();
+ await fetchLDAPStatus();
+
+ if (queryParams.username) {
+ await fetchUserMapping(queryParams.username);
+ }
+
+ setIsLoading(false);
}
- this.setState({ isLoading: false });
- }
+ init();
+ }, [clearUserMappingInfo, fetchUserMapping, loadLdapState, loadLdapSyncStatus, queryParams]);
- async fetchLDAPStatus() {
- const { loadLdapState, loadLdapSyncStatus } = this.props;
- return Promise.all([loadLdapState(), loadLdapSyncStatus()]);
- }
-
- async fetchUserMapping(username: string) {
- const { loadUserMapping } = this.props;
- return await loadUserMapping(username);
- }
-
- search = (username: string) => {
+ const search = ({ username }: FormModel) => {
if (username) {
- this.fetchUserMapping(username);
+ fetchUserMapping(username);
}
};
- onClearUserError = () => {
- this.props.clearUserError();
+ const onClearUserError = () => {
+ clearUserError();
};
- render() {
- const { ldapUser, userError, ldapError, ldapSyncInfo, ldapConnectionInfo, queryParams } = this.props;
- const { isLoading } = this.state;
- const canReadLDAPUser = contextSrv.hasPermission(AccessControlAction.LDAPUsersRead);
+ const canReadLDAPUser = contextSrv.hasPermission(AccessControlAction.LDAPUsersRead);
+ return (
+
+
+
+ {ldapError && ldapError.title && (
+
+ {ldapError.body}
+
+ )}
- return (
-
-
-
- {ldapError && ldapError.title && (
-
- {ldapError.body}
-
- )}
+
-
+ {featureEnabled('ldapsync') && ldapSyncInfo && }
- {featureEnabled('ldapsync') && ldapSyncInfo && }
-
- {canReadLDAPUser && (
-
- Test user mapping
-
- {userError && userError.title && (
-
- {userError.body}
-
- )}
- {ldapUser && }
-
- )}
-
-
-
- );
- }
-}
+ {canReadLDAPUser && (
+
+ Test user mapping
+
+ {userError && userError.title && (
+
+ {userError.body}
+
+ )}
+ {ldapUser && }
+
+ )}
+
+
+
+ );
+};
const mapStateToProps = (state: StoreState) => ({
ldapConnectionInfo: state.ldap.connectionInfo,
diff --git a/public/app/features/alerting/unified/Analytics.ts b/public/app/features/alerting/unified/Analytics.ts
index 2cc69d578dd..012bbd988e0 100644
--- a/public/app/features/alerting/unified/Analytics.ts
+++ b/public/app/features/alerting/unified/Analytics.ts
@@ -1,6 +1,5 @@
import { dateTime } from '@grafana/data';
-import { faro, LogLevel as GrafanaLogLevel } from '@grafana/faro-web-sdk';
-import { getBackendSrv, logError } from '@grafana/runtime';
+import { createMonitoringLogger, getBackendSrv } from '@grafana/runtime';
import { config, reportInteraction } from '@grafana/runtime/src';
import { contextSrv } from 'app/core/core';
@@ -22,18 +21,14 @@ export const LogMessages = {
unknownMessageFromError: 'unknown messageFromError',
};
-// logInfo from '@grafana/runtime' should be used, but it doesn't handle Grafana JS Agent correctly
-export function logInfo(message: string, context: Record = {}) {
- if (config.grafanaJavascriptAgent.enabled) {
- faro.api.pushLog([message], {
- level: GrafanaLogLevel.INFO,
- context: { ...context, module: 'Alerting' },
- });
- }
+const alertingLogger = createMonitoringLogger('features.alerting', { module: 'Alerting' });
+
+export function logInfo(message: string, context?: Record) {
+ alertingLogger.logInfo(message, context);
}
-export function logAlertingError(error: Error, context: Record = {}) {
- logError(error, { ...context, module: 'Alerting' });
+export function logError(error: Error, context?: Record) {
+ alertingLogger.logError(error, context);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/public/app/features/alerting/unified/api/alertingApi.ts b/public/app/features/alerting/unified/api/alertingApi.ts
index 2ec7fc1d5c6..d4f9118395e 100644
--- a/public/app/features/alerting/unified/api/alertingApi.ts
+++ b/public/app/features/alerting/unified/api/alertingApi.ts
@@ -27,6 +27,12 @@ export const backendSrvBaseQuery = (): BaseQueryFn => async (
export const alertingApi = createApi({
reducerPath: 'alertingApi',
baseQuery: backendSrvBaseQuery(),
- tagTypes: ['AlertmanagerChoice', 'AlertmanagerConfiguration', 'OnCallIntegrations', 'OrgMigrationState'],
+ tagTypes: [
+ 'AlertmanagerChoice',
+ 'AlertmanagerConfiguration',
+ 'OnCallIntegrations',
+ 'OrgMigrationState',
+ 'DataSourceSettings',
+ ],
endpoints: () => ({}),
});
diff --git a/public/app/features/alerting/unified/api/dataSourcesApi.ts b/public/app/features/alerting/unified/api/dataSourcesApi.ts
new file mode 100644
index 00000000000..94bb2de0937
--- /dev/null
+++ b/public/app/features/alerting/unified/api/dataSourcesApi.ts
@@ -0,0 +1,15 @@
+import { DataSourceJsonData, DataSourceSettings } from '@grafana/data';
+
+import { alertingApi } from './alertingApi';
+
+export const dataSourcesApi = alertingApi.injectEndpoints({
+ endpoints: (build) => ({
+ getAllDataSourceSettings: build.query>, void>({
+ query: () => ({ url: 'api/datasources' }),
+ // we'll create individual cache entries for each datasource UID
+ providesTags: (result) => {
+ return result ? result.map(({ uid }) => ({ type: 'DataSourceSettings', id: uid })) : ['DataSourceSettings'];
+ },
+ }),
+ }),
+});
diff --git a/public/app/features/alerting/unified/components/admin/ExternalAlertmanagerDataSources.tsx b/public/app/features/alerting/unified/components/admin/ExternalAlertmanagerDataSources.tsx
index d84f930d3cc..757346b7976 100644
--- a/public/app/features/alerting/unified/components/admin/ExternalAlertmanagerDataSources.tsx
+++ b/public/app/features/alerting/unified/components/admin/ExternalAlertmanagerDataSources.tsx
@@ -5,11 +5,11 @@ import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Badge, CallToActionCard, Card, Icon, LinkButton, Tooltip, useStyles2 } from '@grafana/ui';
-import { ExternalDataSourceAM } from '../../hooks/useExternalAmSelector';
+import { ExternalAlertmanagerDataSourceWithStatus } from '../../hooks/useExternalAmSelector';
import { makeDataSourceLink } from '../../utils/misc';
export interface ExternalAlertManagerDataSourcesProps {
- alertmanagers: ExternalDataSourceAM[];
+ alertmanagers: ExternalAlertmanagerDataSourceWithStatus[];
inactive: boolean;
}
@@ -39,7 +39,7 @@ export function ExternalAlertmanagerDataSources({ alertmanagers, inactive }: Ext
{alertmanagers.length > 0 && (
{alertmanagers.map((am) => (
-
+
))}
)}
@@ -48,20 +48,20 @@ export function ExternalAlertmanagerDataSources({ alertmanagers, inactive }: Ext
}
interface ExternalAMdataSourceCardProps {
- alertmanager: ExternalDataSourceAM;
+ alertmanager: ExternalAlertmanagerDataSourceWithStatus;
inactive: boolean;
}
export function ExternalAMdataSourceCard({ alertmanager, inactive }: ExternalAMdataSourceCardProps) {
const styles = useStyles2(getStyles);
- const { dataSource, status, statusInconclusive, url } = alertmanager;
+ const { dataSourceSettings, status } = alertmanager;
return (
- {dataSource.name}{' '}
- {statusInconclusive && (
+ {dataSourceSettings.name}{' '}
+ {status === 'inconclusive' && (
@@ -90,9 +90,9 @@ export function ExternalAMdataSourceCard({ alertmanager, inactive }: ExternalAMd
/>
)}
- {url}
+ {dataSourceSettings.url}
-
+
Go to datasource
diff --git a/public/app/features/alerting/unified/components/admin/ExternalAlertmanagers.tsx b/public/app/features/alerting/unified/components/admin/ExternalAlertmanagers.tsx
index 1bfb98fe018..ddcf5b9176d 100644
--- a/public/app/features/alerting/unified/components/admin/ExternalAlertmanagers.tsx
+++ b/public/app/features/alerting/unified/components/admin/ExternalAlertmanagers.tsx
@@ -23,6 +23,9 @@ export const ExternalAlertmanagers = () => {
const dispatch = useDispatch();
const externalDsAlertManagers = useExternalDataSourceAlertmanagers();
+ const gmaHandlingAlertmanagers = externalDsAlertManagers.filter(
+ (settings) => settings.dataSourceSettings.jsonData.handleGrafanaManagedAlerts === true
+ );
const {
useSaveExternalAlertmanagersConfigMutation,
@@ -71,7 +74,7 @@ export const ExternalAlertmanagers = () => {
diff --git a/public/app/features/alerting/unified/components/contact-points/utils.ts b/public/app/features/alerting/unified/components/contact-points/utils.ts
index 79a71733fb7..38a69fd3b72 100644
--- a/public/app/features/alerting/unified/components/contact-points/utils.ts
+++ b/public/app/features/alerting/unified/components/contact-points/utils.ts
@@ -1,10 +1,12 @@
import { countBy, split, trim, upperFirst } from 'lodash';
import { ReactNode } from 'react';
+import { config } from '@grafana/runtime';
import {
AlertManagerCortexConfig,
GrafanaManagedContactPoint,
GrafanaManagedReceiverConfig,
+ MatcherOperator,
Route,
} from 'app/plugins/datasource/alertmanager/types';
import { NotifierDTO, NotifierStatus, ReceiversStateDTO } from 'app/types';
@@ -17,6 +19,8 @@ import { getOnCallMetadata, ReceiverPluginMetadata } from '../receivers/grafanaA
import { RECEIVER_META_KEY, RECEIVER_PLUGIN_META_KEY, RECEIVER_STATUS_KEY } from './useContactPoints';
+const AUTOGENERATED_RECEIVER_POLICY_MATCHER_KEY = '__grafana_receiver__';
+
export function isProvisioned(contactPoint: GrafanaManagedContactPoint) {
// for some reason the provenance is on the receiver and not the entire contact point
const provenance = contactPoint.grafana_managed_receiver_configs?.find((receiver) => receiver.provenance)?.provenance;
@@ -126,10 +130,27 @@ export function enhanceContactPointsWithMetadata(
};
});
}
+export function isAutoGeneratedPolicy(route: Route) {
+ const simplifiedRoutingToggleEnabled = config.featureToggles.alertingSimplifiedRouting ?? false;
+ if (!simplifiedRoutingToggleEnabled) {
+ return false;
+ }
+ if (!route.object_matchers) {
+ return false;
+ }
+ return (
+ route.object_matchers.some((objectMatcher) => {
+ return (
+ objectMatcher[0] === AUTOGENERATED_RECEIVER_POLICY_MATCHER_KEY && objectMatcher[1] === MatcherOperator.equal
+ );
+ }) ?? false
+ );
+}
export function getUsedContactPoints(route: Route): string[] {
const childrenContactPoints = route.routes?.flatMap((route) => getUsedContactPoints(route)) ?? [];
- if (route.receiver) {
+ // we don't want to count the autogenerated policy for receiver level, for checking if a contact point is used
+ if (route.receiver && !isAutoGeneratedPolicy(route)) {
return [route.receiver, ...childrenContactPoints];
}
diff --git a/public/app/features/alerting/unified/components/notification-policies/Policy.tsx b/public/app/features/alerting/unified/components/notification-policies/Policy.tsx
index 1266590af80..b6ba61d28c5 100644
--- a/public/app/features/alerting/unified/components/notification-policies/Policy.tsx
+++ b/public/app/features/alerting/unified/components/notification-policies/Policy.tsx
@@ -34,7 +34,7 @@ import { AlertmanagerAction, useAlertmanagerAbilities, useAlertmanagerAbility }
import { INTEGRATION_ICONS } from '../../types/contact-points';
import { normalizeMatchers } from '../../utils/matchers';
import { createContactPointLink, createMuteTimingLink } from '../../utils/misc';
-import { InhertitableProperties, getInheritedProperties } from '../../utils/notification-policies';
+import { InheritableProperties, getInheritedProperties } from '../../utils/notification-policies';
import { Authorize } from '../Authorize';
import { HoverCard } from '../HoverCard';
import { Label } from '../Label';
@@ -53,7 +53,7 @@ interface PolicyComponentProps {
contactPointsState?: ReceiversState;
readOnly?: boolean;
provisioned?: boolean;
- inheritedProperties?: Partial;
+ inheritedProperties?: Partial;
routesMatchingFilters?: RouteWithID[];
// routeAlertGroupsMap?: Map;
@@ -239,7 +239,7 @@ const Policy = (props: PolicyComponentProps) => {
{
const childInheritedProperties = getInheritedProperties(currentRoute, child, inheritedProperties);
// This child is autogenerated if it's the autogenerated root or if it's a child of an autogenerated policy.
const isThisChildAutoGenerated = isAutoGeneratedRootAndSimplifiedEnabled(child) || isAutoGenerated;
- /* pass the "readOnly" prop from the parent, because for any child policy , if its parent it's not editable,
+ /* pass the "readOnly" prop from the parent, because for any child policy , if its parent it's not editable,
then the child policy should not be editable either */
const isThisChildReadOnly = readOnly || provisioned || isAutoGenerated;
@@ -319,7 +319,7 @@ interface MetadataRowProps {
groupBy?: string[];
muteTimings?: string[];
timingOptions?: TimingOptions;
- inheritedProperties?: Partial;
+ inheritedProperties?: Partial;
alertManagerSourceName: string;
receivers: Receiver[];
matchingAlertGroups?: AlertmanagerGroup[];
@@ -571,19 +571,25 @@ function AutogeneratedRootIndicator() {
return Auto-generated policies;
}
-const InheritedProperties: FC<{ properties: InhertitableProperties }> = ({ properties }) => (
+const InheritedProperties: FC<{ properties: InheritableProperties }> = ({ properties }) => (
- {Object.entries(properties).map(([key, value]) => (
-
@@ -248,7 +234,6 @@ interface VariableEditorSettingsEditViewProps {
dashboard: DashboardScene;
onTypeChange: (variableType: EditableVariableType) => void;
onGoBack: () => void;
- onDiscardChanges: () => void;
}
function VariableEditorSettingsView({
@@ -258,7 +243,6 @@ function VariableEditorSettingsView({
dashboard,
onTypeChange,
onGoBack,
- onDiscardChanges,
}: VariableEditorSettingsEditViewProps) {
const parentTab = pageNav.children!.find((p) => p.active)!;
parentTab.parentItem = pageNav;
@@ -271,12 +255,7 @@ function VariableEditorSettingsView({
return (
-
+
);
}
diff --git a/public/app/features/dashboard-scene/settings/variables/VariableEditorForm.tsx b/public/app/features/dashboard-scene/settings/variables/VariableEditorForm.tsx
index 14cecad19ae..3038cb6fe04 100644
--- a/public/app/features/dashboard-scene/settings/variables/VariableEditorForm.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/VariableEditorForm.tsx
@@ -22,10 +22,9 @@ interface VariableEditorFormProps {
variable: SceneVariable;
onTypeChange: (type: EditableVariableType) => void;
onGoBack: () => void;
- onDiscardChanges: () => void;
}
-export function VariableEditorForm({ variable, onTypeChange, onGoBack, onDiscardChanges }: VariableEditorFormProps) {
+export function VariableEditorForm({ variable, onTypeChange, onGoBack }: VariableEditorFormProps) {
const { name, type, label, description, hide } = variable.useState();
const EditorToRender = isEditableVariableType(type) ? getVariableEditor(type) : undefined;
const [runQueryState, onRunQuery] = useAsyncFn(async () => {
@@ -106,13 +105,6 @@ export function VariableEditorForm({ variable, onTypeChange, onGoBack, onDiscard
{runQueryState.loading ? : `Run query`}
)}
-
diff --git a/public/app/features/dashboard-scene/settings/variables/VariableEditorList.tsx b/public/app/features/dashboard-scene/settings/variables/VariableEditorList.tsx
index 8cbe42568ef..27d16634ae8 100644
--- a/public/app/features/dashboard-scene/settings/variables/VariableEditorList.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/VariableEditorList.tsx
@@ -5,7 +5,7 @@ import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
import { selectors } from '@grafana/e2e-selectors';
import { reportInteraction } from '@grafana/runtime';
import { SceneVariable, SceneVariableState } from '@grafana/scenes';
-import { useStyles2, Stack } from '@grafana/ui';
+import { useStyles2, Stack, Button } from '@grafana/ui';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import { VariableEditorListRow } from './VariableEditorListRow';
@@ -80,6 +80,15 @@ export function VariableEditorList({
+
+
+
)}
@@ -94,7 +103,6 @@ function EmptyVariablesList({ onAdd }: { onAdd: () => void }): ReactElement {
title="There are no variables yet"
buttonIcon="calculator-alt"
buttonTitle="Add variable"
- buttonDisabled
infoBox={{
__html: `
Variables enable more interactive and dynamic dashboards. Instead of hard-coding things like server
diff --git a/public/app/features/dashboard-scene/settings/variables/components/QueryEditor.tsx b/public/app/features/dashboard-scene/settings/variables/components/QueryEditor.tsx
new file mode 100644
index 00000000000..18436c85c2b
--- /dev/null
+++ b/public/app/features/dashboard-scene/settings/variables/components/QueryEditor.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+
+import { DataSourceApi, LoadingState, TimeRange } from '@grafana/data';
+import { getTemplateSrv } from '@grafana/runtime';
+import { QueryVariable } from '@grafana/scenes';
+import { Text, Box } from '@grafana/ui';
+import { isLegacyQueryEditor, isQueryEditor } from 'app/features/variables/guard';
+import { VariableQueryEditorType } from 'app/features/variables/types';
+
+type VariableQueryType = QueryVariable['state']['query'];
+
+interface QueryEditorProps {
+ query: VariableQueryType;
+ datasource: DataSourceApi;
+ VariableQueryEditor: VariableQueryEditorType;
+ timeRange: TimeRange;
+ onLegacyQueryChange: (query: VariableQueryType, definition: string) => void;
+ onQueryChange: (query: VariableQueryType) => void;
+}
+
+export function QueryEditor({
+ query,
+ datasource,
+ VariableQueryEditor,
+ onLegacyQueryChange,
+ onQueryChange,
+ timeRange,
+}: QueryEditorProps) {
+ let queryWithDefaults;
+ if (typeof query === 'string') {
+ queryWithDefaults = query || (datasource.variables?.getDefaultQuery?.() ?? '');
+ } else {
+ queryWithDefaults = {
+ ...datasource.variables?.getDefaultQuery?.(),
+ ...query,
+ };
+ }
+
+ if (VariableQueryEditor && isLegacyQueryEditor(VariableQueryEditor, datasource)) {
+ return (
+
+ Query
+
+
+
+
+ );
+ }
+
+ if (VariableQueryEditor && isQueryEditor(VariableQueryEditor, datasource)) {
+ return (
+
+ Query
+
+ {}}
+ data={{ series: [], state: LoadingState.Done, timeRange }}
+ range={timeRange}
+ onBlur={() => {}}
+ history={[]}
+ />
+
+
+ );
+ }
+
+ return null;
+}
diff --git a/public/app/features/dashboard-scene/settings/variables/components/QueryVariableForm.test.tsx b/public/app/features/dashboard-scene/settings/variables/components/QueryVariableForm.test.tsx
new file mode 100644
index 00000000000..8e37364ccc7
--- /dev/null
+++ b/public/app/features/dashboard-scene/settings/variables/components/QueryVariableForm.test.tsx
@@ -0,0 +1,269 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React, { FormEvent } from 'react';
+import { of } from 'rxjs';
+import { MockDataSourceApi } from 'test/mocks/datasource_srv';
+
+import {
+ LoadingState,
+ PanelData,
+ getDefaultTimeRange,
+ toDataFrame,
+ FieldType,
+ VariableSupportType,
+} from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { setRunRequest } from '@grafana/runtime';
+import { VariableRefresh, VariableSort } from '@grafana/schema';
+import { mockDataSource } from 'app/features/alerting/unified/mocks';
+import { LegacyVariableQueryEditor } from 'app/features/variables/editor/LegacyVariableQueryEditor';
+
+import { QueryVariableEditorForm } from './QueryVariableForm';
+
+const defaultDatasource = mockDataSource({
+ name: 'Default Test Data Source',
+ type: 'test',
+});
+
+const promDatasource = mockDataSource({
+ name: 'Prometheus',
+ type: 'prometheus',
+});
+
+jest.mock('@grafana/runtime/src/services/dataSourceSrv', () => ({
+ ...jest.requireActual('@grafana/runtime/src/services/dataSourceSrv'),
+ getDataSourceSrv: () => ({
+ get: async () => ({
+ ...defaultDatasource,
+ variables: {
+ getType: () => VariableSupportType.Custom,
+ query: jest.fn(),
+ editor: jest.fn().mockImplementation(LegacyVariableQueryEditor),
+ },
+ }),
+ getList: () => [defaultDatasource, promDatasource],
+ getInstanceSettings: () => ({ ...defaultDatasource }),
+ }),
+}));
+
+const runRequestMock = jest.fn().mockReturnValue(
+ of({
+ state: LoadingState.Done,
+ series: [
+ toDataFrame({
+ fields: [{ name: 'text', type: FieldType.string, values: ['val1', 'val2', 'val11'] }],
+ }),
+ ],
+ timeRange: getDefaultTimeRange(),
+ })
+);
+
+setRunRequest(runRequestMock);
+
+describe('QueryVariableEditorForm', () => {
+ const mockOnDataSourceChange = jest.fn();
+ const mockOnQueryChange = jest.fn();
+ const mockOnLegacyQueryChange = jest.fn();
+ const mockOnRegExChange = jest.fn();
+ const mockOnSortChange = jest.fn();
+ const mockOnRefreshChange = jest.fn();
+ const mockOnMultiChange = jest.fn();
+ const mockOnIncludeAllChange = jest.fn();
+ const mockOnAllValueChange = jest.fn();
+
+ const defaultProps = {
+ datasource: new MockDataSourceApi(promDatasource.name, undefined, promDatasource.meta),
+ onDataSourceChange: mockOnDataSourceChange,
+ query: 'my-query',
+ onQueryChange: mockOnQueryChange,
+ onLegacyQueryChange: mockOnLegacyQueryChange,
+ timeRange: getDefaultTimeRange(),
+ VariableQueryEditor: LegacyVariableQueryEditor,
+ regex: '.*',
+ onRegExChange: mockOnRegExChange,
+ sort: VariableSort.alphabeticalAsc,
+ onSortChange: mockOnSortChange,
+ refresh: VariableRefresh.onDashboardLoad,
+ onRefreshChange: mockOnRefreshChange,
+ isMulti: true,
+ onMultiChange: mockOnMultiChange,
+ includeAll: true,
+ onIncludeAllChange: mockOnIncludeAllChange,
+ allValue: 'custom all value',
+ onAllValueChange: mockOnAllValueChange,
+ };
+
+ function setup(props?: React.ComponentProps) {
+ return {
+ renderer: render(),
+ user: userEvent.setup(),
+ };
+ }
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('should render the component with initializing the components correctly', () => {
+ const {
+ renderer: { getByTestId, getByRole },
+ } = setup();
+ const dataSourcePicker = getByTestId(selectors.components.DataSourcePicker.container);
+ //const queryEditor = getByTestId('query-editor');
+ const regexInput = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInputV2
+ );
+ const sortSelect = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelectV2
+ );
+ const refreshSelect = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRefreshSelectV2
+ );
+
+ const multiSwitch = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch
+ );
+ const includeAllSwitch = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch
+ );
+ const allValueInput = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput
+ );
+
+ expect(dataSourcePicker).toBeInTheDocument();
+ expect(dataSourcePicker).toHaveTextContent('Default Test Data Source');
+ expect(regexInput).toBeInTheDocument();
+ expect(regexInput).toHaveValue('.*');
+ expect(sortSelect).toBeInTheDocument();
+ expect(sortSelect).toHaveTextContent('Alphabetical (asc)');
+ expect(refreshSelect).toBeInTheDocument();
+ expect(getByRole('radio', { name: 'On dashboard load' })).toBeChecked();
+ expect(multiSwitch).toBeInTheDocument();
+ expect(multiSwitch).toBeChecked();
+ expect(includeAllSwitch).toBeInTheDocument();
+ expect(includeAllSwitch).toBeChecked();
+ expect(allValueInput).toBeInTheDocument();
+ expect(allValueInput).toHaveValue('custom all value');
+ });
+
+ it('should call onDataSourceChange when changing the datasource', async () => {
+ const {
+ renderer: { getByTestId },
+ } = setup();
+ const dataSourcePicker = getByTestId(selectors.components.DataSourcePicker.inputV2);
+ await waitFor(async () => {
+ await userEvent.click(dataSourcePicker); // open the select
+ await userEvent.tab();
+ });
+ expect(mockOnDataSourceChange).toHaveBeenCalledTimes(1);
+ expect(mockOnDataSourceChange).toHaveBeenCalledWith(defaultDatasource);
+ });
+
+ it('should call onQueryChange when changing the query', async () => {
+ const {
+ renderer: { getByTestId },
+ } = setup();
+ const queryEditor = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput
+ );
+
+ await waitFor(async () => {
+ await userEvent.type(queryEditor, '-new');
+ await userEvent.tab();
+ });
+
+ expect(mockOnLegacyQueryChange).toHaveBeenCalledTimes(1);
+ expect(mockOnLegacyQueryChange).toHaveBeenCalledWith('my-query-new', expect.anything());
+ });
+
+ it('should call onRegExChange when changing the regex', async () => {
+ const {
+ renderer: { getByTestId },
+ } = setup();
+ const regexInput = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInputV2
+ );
+ await userEvent.type(regexInput, '{backspace}?');
+ await userEvent.tab();
+ expect(mockOnRegExChange).toHaveBeenCalledTimes(1);
+ expect(
+ ((mockOnRegExChange.mock.calls[0][0] as FormEvent).target as HTMLTextAreaElement).value
+ ).toBe('.?');
+ });
+
+ it('should call onSortChange when changing the sort', async () => {
+ const {
+ renderer: { getByTestId },
+ } = setup();
+ const sortSelect = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelectV2
+ );
+ await userEvent.click(sortSelect); // open the select
+ const anotherOption = await screen.getByText('Alphabetical (desc)');
+ await userEvent.click(anotherOption);
+
+ expect(mockOnSortChange).toHaveBeenCalledTimes(1);
+ expect(mockOnSortChange).toHaveBeenCalledWith(
+ expect.objectContaining({ value: VariableSort.alphabeticalDesc }),
+ expect.anything()
+ );
+ });
+
+ it('should call onRefreshChange when changing the refresh', async () => {
+ const {
+ renderer: { getByTestId },
+ } = setup();
+ const refreshSelect = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRefreshSelectV2
+ );
+ await userEvent.click(refreshSelect); // open the select
+ const anotherOption = await screen.getByText('On time range change');
+ await userEvent.click(anotherOption);
+
+ expect(mockOnRefreshChange).toHaveBeenCalledTimes(1);
+ expect(mockOnRefreshChange).toHaveBeenCalledWith(VariableRefresh.onTimeRangeChanged);
+ });
+
+ it('should call onMultiChange when changing the multi switch', async () => {
+ const {
+ renderer: { getByTestId },
+ } = setup();
+ const multiSwitch = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch
+ );
+ await userEvent.click(multiSwitch);
+ expect(mockOnMultiChange).toHaveBeenCalledTimes(1);
+ expect(
+ (mockOnMultiChange.mock.calls[0][0] as FormEvent).target as HTMLInputElement
+ ).toBeChecked();
+ });
+
+ it('should call onIncludeAllChange when changing the include all switch', async () => {
+ const {
+ renderer: { getByTestId },
+ } = setup();
+ const includeAllSwitch = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch
+ );
+ await userEvent.click(includeAllSwitch);
+ expect(mockOnIncludeAllChange).toHaveBeenCalledTimes(1);
+ expect(
+ (mockOnIncludeAllChange.mock.calls[0][0] as FormEvent).target as HTMLInputElement
+ ).toBeChecked();
+ });
+
+ it('should call onAllValueChange when changing the all value', async () => {
+ const {
+ renderer: { getByTestId },
+ } = setup();
+ const allValueInput = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput
+ );
+ await userEvent.type(allValueInput, ' and another value');
+ await userEvent.tab();
+ expect(mockOnAllValueChange).toHaveBeenCalledTimes(1);
+ expect(
+ ((mockOnAllValueChange.mock.calls[0][0] as FormEvent).target as HTMLInputElement).value
+ ).toBe('custom all value and another value');
+ });
+});
diff --git a/public/app/features/dashboard-scene/settings/variables/components/QueryVariableForm.tsx b/public/app/features/dashboard-scene/settings/variables/components/QueryVariableForm.tsx
new file mode 100644
index 00000000000..0e7d86740cc
--- /dev/null
+++ b/public/app/features/dashboard-scene/settings/variables/components/QueryVariableForm.tsx
@@ -0,0 +1,128 @@
+import React, { FormEvent } from 'react';
+
+import { DataSourceApi, DataSourceInstanceSettings, SelectableValue, TimeRange } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { QueryVariable } from '@grafana/scenes';
+import { VariableRefresh, VariableSort } from '@grafana/schema';
+import { Field } from '@grafana/ui';
+import { QueryEditor } from 'app/features/dashboard-scene/settings/variables/components/QueryEditor';
+import { SelectionOptionsForm } from 'app/features/dashboard-scene/settings/variables/components/SelectionOptionsForm';
+import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker';
+import { QueryVariableRefreshSelect } from 'app/features/variables/query/QueryVariableRefreshSelect';
+import { QueryVariableSortSelect } from 'app/features/variables/query/QueryVariableSortSelect';
+import { VariableQueryEditorType } from 'app/features/variables/types';
+
+import { VariableLegend } from './VariableLegend';
+import { VariableTextAreaField } from './VariableTextAreaField';
+
+type VariableQueryType = QueryVariable['state']['query'];
+
+interface QueryVariableEditorFormProps {
+ datasource: DataSourceApi | undefined;
+ onDataSourceChange: (dsSettings: DataSourceInstanceSettings) => void;
+ query: VariableQueryType;
+ onQueryChange: (query: VariableQueryType) => void;
+ onLegacyQueryChange: (query: VariableQueryType, definition: string) => void;
+ VariableQueryEditor: VariableQueryEditorType | undefined;
+ timeRange: TimeRange;
+ regex: string | null;
+ onRegExChange: (event: FormEvent) => void;
+ sort: VariableSort;
+ onSortChange: (option: SelectableValue) => void;
+ refresh: VariableRefresh;
+ onRefreshChange: (option: VariableRefresh) => void;
+ isMulti: boolean;
+ onMultiChange: (event: FormEvent) => void;
+ includeAll: boolean;
+ onIncludeAllChange: (event: FormEvent) => void;
+ allValue: string;
+ onAllValueChange: (event: FormEvent) => void;
+}
+
+export function QueryVariableEditorForm({
+ datasource,
+ onDataSourceChange,
+ query,
+ onQueryChange,
+ onLegacyQueryChange,
+ VariableQueryEditor,
+ timeRange,
+ regex,
+ onRegExChange,
+ sort,
+ onSortChange,
+ refresh,
+ onRefreshChange,
+ isMulti,
+ onMultiChange,
+ includeAll,
+ onIncludeAllChange,
+ allValue,
+ onAllValueChange,
+}: QueryVariableEditorFormProps) {
+ return (
+ <>
+ Query options
+
+
+
+
+ {datasource && VariableQueryEditor && (
+
+ )}
+
+
+ Optional, if you want to extract part of a series name or metric node segment.
+
+ Named capture groups can be used to separate the display text and value (
+
+ see examples
+
+ ).
+
+ }
+ placeholder="/.*-(?.*)-(?.*)-.*/"
+ onBlur={onRegExChange}
+ testId={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInputV2}
+ width={52}
+ />
+
+
+
+
+
+ Selection options
+
+
+ );
+}
diff --git a/public/app/features/dashboard-scene/settings/variables/components/VariableSelectField.tsx b/public/app/features/dashboard-scene/settings/variables/components/VariableSelectField.tsx
index 17f273dab46..9f0024a7ab1 100644
--- a/public/app/features/dashboard-scene/settings/variables/components/VariableSelectField.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/components/VariableSelectField.tsx
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
-import React, { PropsWithChildren, ReactElement, useId } from 'react';
+import React, { PropsWithChildren, useId } from 'react';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Field, Select, useStyles2 } from '@grafana/ui';
@@ -22,7 +22,7 @@ export function VariableSelectField({
onChange,
testId,
width,
-}: PropsWithChildren>): ReactElement {
+}: PropsWithChildren>) {
const styles = useStyles2(getStyles);
const uniqueId = useId();
const inputId = `variable-select-input-${name}-${uniqueId}`;
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.test.tsx b/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.test.tsx
new file mode 100644
index 00000000000..867ecb3e836
--- /dev/null
+++ b/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.test.tsx
@@ -0,0 +1,288 @@
+import { getByRole, render, screen, act, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { lastValueFrom, of } from 'rxjs';
+
+import {
+ VariableSupportType,
+ PanelData,
+ LoadingState,
+ toDataFrame,
+ getDefaultTimeRange,
+ FieldType,
+} from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { setRunRequest } from '@grafana/runtime';
+import { QueryVariable } from '@grafana/scenes';
+import { VariableRefresh, VariableSort } from '@grafana/schema';
+import { mockDataSource } from 'app/features/alerting/unified/mocks';
+import { LegacyVariableQueryEditor } from 'app/features/variables/editor/LegacyVariableQueryEditor';
+
+import { QueryVariableEditor } from './QueryVariableEditor';
+
+const defaultDatasource = mockDataSource({
+ name: 'Default Test Data Source',
+ type: 'test',
+});
+
+const promDatasource = mockDataSource({
+ name: 'Prometheus',
+ type: 'prometheus',
+});
+
+jest.mock('@grafana/runtime/src/services/dataSourceSrv', () => ({
+ ...jest.requireActual('@grafana/runtime/src/services/dataSourceSrv'),
+ getDataSourceSrv: () => ({
+ get: async () => ({
+ ...defaultDatasource,
+ variables: {
+ getType: () => VariableSupportType.Custom,
+ query: jest.fn(),
+ editor: jest.fn().mockImplementation(LegacyVariableQueryEditor),
+ },
+ }),
+ getList: () => [defaultDatasource, promDatasource],
+ getInstanceSettings: () => ({ ...defaultDatasource }),
+ }),
+}));
+
+const runRequestMock = jest.fn().mockReturnValue(
+ of({
+ state: LoadingState.Done,
+ series: [
+ toDataFrame({
+ fields: [{ name: 'text', type: FieldType.string, values: ['val1', 'val2', 'val11'] }],
+ }),
+ ],
+ timeRange: getDefaultTimeRange(),
+ })
+);
+
+setRunRequest(runRequestMock);
+
+describe('QueryVariableEditor', () => {
+ const onRunQueryMock = jest.fn();
+
+ async function setup(props?: React.ComponentProps) {
+ const variable = new QueryVariable({
+ datasource: {
+ uid: defaultDatasource.uid,
+ type: defaultDatasource.type,
+ },
+ query: 'my-query',
+ regex: '.*',
+ sort: VariableSort.alphabeticalAsc,
+ refresh: VariableRefresh.onDashboardLoad,
+ isMulti: true,
+ includeAll: true,
+ allValue: 'custom all value',
+ });
+
+ return {
+ renderer: await act(() => {
+ return render();
+ }),
+ variable,
+ user: userEvent.setup(),
+ };
+ }
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('should render the component with initializing the components correctly', async () => {
+ const { renderer } = await setup();
+ const dataSourcePicker = renderer.getByTestId(selectors.components.DataSourcePicker.container);
+ const queryEditor = renderer.getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput
+ );
+ const regexInput = renderer.getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInputV2
+ );
+ const sortSelect = renderer.getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelectV2
+ );
+ const refreshSelect = renderer.getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRefreshSelectV2
+ );
+
+ const multiSwitch = renderer.getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch
+ );
+ const includeAllSwitch = renderer.getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch
+ );
+ const allValueInput = renderer.getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput
+ );
+
+ expect(dataSourcePicker).toBeInTheDocument();
+ expect(dataSourcePicker).toHaveTextContent('Default Test Data Source');
+ expect(queryEditor).toBeInTheDocument();
+ expect(queryEditor).toHaveValue('my-query');
+ expect(regexInput).toBeInTheDocument();
+ expect(regexInput).toHaveValue('.*');
+ expect(sortSelect).toBeInTheDocument();
+ expect(sortSelect).toHaveTextContent('Alphabetical (asc)');
+ expect(refreshSelect).toBeInTheDocument();
+ expect(getByRole(refreshSelect, 'radio', { name: 'On dashboard load' })).toBeChecked();
+ expect(multiSwitch).toBeInTheDocument();
+ expect(multiSwitch).toBeChecked();
+ expect(includeAllSwitch).toBeInTheDocument();
+ expect(includeAllSwitch).toBeChecked();
+ expect(allValueInput).toBeInTheDocument();
+ expect(allValueInput).toHaveValue('custom all value');
+ });
+
+ it('should update variable state when changing the datasource', async () => {
+ const {
+ variable,
+ renderer: { getByTestId },
+ user,
+ } = await setup();
+ const dataSourcePicker = getByTestId(selectors.components.DataSourcePicker.container).getElementsByTagName('input');
+
+ await waitFor(async () => {
+ await user.type(dataSourcePicker[0], 'm');
+ await user.tab();
+ await lastValueFrom(variable.validateAndUpdate());
+ });
+
+ expect(variable.state.datasource).toEqual({ uid: 'mock-ds-2', type: 'test' });
+ });
+
+ it('should update the variable state when changing the query', async () => {
+ const {
+ variable,
+ renderer: { getByTestId },
+ user,
+ } = await setup();
+ const queryEditor = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput
+ );
+
+ await waitFor(async () => {
+ await user.type(queryEditor, '-new');
+ await user.tab();
+ await lastValueFrom(variable.validateAndUpdate());
+ });
+
+ expect(variable.state.query).toEqual('my-query-new');
+ expect(onRunQueryMock).toHaveBeenCalledTimes(1);
+ });
+
+ it('should update the variable state when changing the regex', async () => {
+ const {
+ variable,
+ renderer: { getByTestId },
+ user,
+ } = await setup();
+ const regexInput = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInputV2
+ );
+
+ await waitFor(async () => {
+ await user.type(regexInput, '{backspace}?');
+ await user.tab();
+ await lastValueFrom(variable.validateAndUpdate());
+ });
+
+ expect(variable.state.regex).toBe('.?');
+ });
+
+ it('should update the variable state when changing the sort', async () => {
+ const {
+ variable,
+ renderer: { getByTestId },
+ user,
+ } = await setup();
+ const sortSelect = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelectV2
+ );
+
+ await waitFor(async () => {
+ await user.click(sortSelect);
+ const anotherOption = await screen.getByText('Alphabetical (desc)');
+ await user.click(anotherOption);
+ await lastValueFrom(variable.validateAndUpdate());
+ });
+
+ expect(variable.state.sort).toBe(VariableSort.alphabeticalDesc);
+ });
+
+ it('should update the variable state when changing the refresh', async () => {
+ const {
+ variable,
+ renderer: { getByTestId },
+ user,
+ } = await setup();
+ const refreshSelect = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRefreshSelectV2
+ );
+
+ await waitFor(async () => {
+ await user.click(refreshSelect);
+ const anotherOption = await screen.getByText('On time range change');
+ await user.click(anotherOption);
+ await lastValueFrom(variable.validateAndUpdate());
+ });
+
+ expect(variable.state.refresh).toBe(VariableRefresh.onTimeRangeChanged);
+ });
+
+ it('should update the variable state when changing the multi switch', async () => {
+ const {
+ variable,
+ renderer: { getByTestId },
+ user,
+ } = await setup();
+ const multiSwitch = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch
+ );
+
+ await waitFor(async () => {
+ await user.click(multiSwitch);
+ await lastValueFrom(variable.validateAndUpdate());
+ });
+
+ expect(variable.state.isMulti).toBe(false);
+ });
+
+ it('should update the variable state when changing the include all switch', async () => {
+ const {
+ variable,
+ renderer: { getByTestId },
+ user,
+ } = await setup();
+ const includeAllSwitch = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch
+ );
+
+ await waitFor(async () => {
+ await user.click(includeAllSwitch);
+ await lastValueFrom(variable.validateAndUpdate());
+ });
+
+ expect(variable.state.includeAll).toBe(false);
+ });
+
+ it('should update the variable state when changing the all value', async () => {
+ const {
+ variable,
+ renderer: { getByTestId },
+ user,
+ } = await setup();
+ const allValueInput = getByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput
+ );
+
+ await waitFor(async () => {
+ await user.type(allValueInput, ' and another value');
+ await user.tab();
+ await lastValueFrom(variable.validateAndUpdate());
+ });
+
+ expect(variable.state.allValue).toBe('custom all value and another value');
+ });
+});
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx b/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx
index 57cf0b39ef4..0c577d74b6b 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx
@@ -1,12 +1,80 @@
-import React from 'react';
+import React, { FormEvent } from 'react';
+import { useAsync } from 'react-use';
-import { QueryVariable } from '@grafana/scenes';
+import { SelectableValue, DataSourceInstanceSettings } from '@grafana/data';
+import { getDataSourceSrv } from '@grafana/runtime';
+import { QueryVariable, sceneGraph } from '@grafana/scenes';
+import { DataSourceRef, VariableRefresh, VariableSort } from '@grafana/schema';
+import { getVariableQueryEditor } from 'app/features/variables/editor/getVariableQueryEditor';
+
+import { QueryVariableEditorForm } from '../components/QueryVariableForm';
interface QueryVariableEditorProps {
variable: QueryVariable;
- onChange: (variable: QueryVariable) => void;
+ onRunQuery: () => void;
}
+type VariableQueryType = QueryVariable['state']['query'];
-export function QueryVariableEditor(props: QueryVariableEditorProps) {
- return QueryVariableEditor
;
+export function QueryVariableEditor({ variable, onRunQuery }: QueryVariableEditorProps) {
+ const { datasource: datasourceRef, regex, sort, refresh, isMulti, includeAll, allValue, query } = variable.useState();
+ const { value: timeRange } = sceneGraph.getTimeRange(variable).useState();
+
+ const { value: dsConfig } = useAsync(async () => {
+ const datasource = await getDataSourceSrv().get(datasourceRef ?? '');
+ const VariableQueryEditor = await getVariableQueryEditor(datasource);
+
+ return { datasource, VariableQueryEditor };
+ }, [datasourceRef]);
+ const { datasource, VariableQueryEditor } = dsConfig ?? {};
+
+ const onRegExChange = (event: React.FormEvent) => {
+ variable.setState({ regex: event.currentTarget.value });
+ };
+ const onSortChange = (sort: SelectableValue) => {
+ variable.setState({ sort: sort.value });
+ };
+ const onRefreshChange = (refresh: VariableRefresh) => {
+ variable.setState({ refresh: refresh });
+ };
+ const onMultiChange = (event: FormEvent) => {
+ variable.setState({ isMulti: event.currentTarget.checked });
+ };
+ const onIncludeAllChange = (event: FormEvent) => {
+ variable.setState({ includeAll: event.currentTarget.checked });
+ };
+ const onAllValueChange = (event: FormEvent) => {
+ variable.setState({ allValue: event.currentTarget.value });
+ };
+ const onDataSourceChange = (dsInstanceSettings: DataSourceInstanceSettings) => {
+ const datasource: DataSourceRef = { uid: dsInstanceSettings.uid, type: dsInstanceSettings.type };
+ variable.setState({ datasource });
+ };
+ const onQueryChange = (query: VariableQueryType) => {
+ variable.setState({ query });
+ onRunQuery();
+ };
+
+ return (
+
+ );
}
diff --git a/public/app/features/dashboard-scene/settings/variables/utils.test.ts b/public/app/features/dashboard-scene/settings/variables/utils.test.ts
index 6d43b34891a..9725ee5fe5c 100644
--- a/public/app/features/dashboard-scene/settings/variables/utils.test.ts
+++ b/public/app/features/dashboard-scene/settings/variables/utils.test.ts
@@ -8,6 +8,7 @@ import {
DataSourceVariable,
AdHocFiltersVariable,
TextBoxVariable,
+ SceneVariableSet,
} from '@grafana/scenes';
import { DataQuery, DataSourceJsonData, VariableType } from '@grafana/schema';
import { SHARED_DASHBOARD_QUERY } from 'app/plugins/datasource/dashboard';
@@ -31,6 +32,8 @@ import {
EditableVariableType,
getDefinition,
getOptionDataSourceTypes,
+ getNextAvailableId,
+ getVariableDefault,
} from './utils';
const templateSrv = {
@@ -115,7 +118,7 @@ describe('getVariableEditor', () => {
});
it.each(Object.keys(EDITABLE_VARIABLES) as EditableVariableType[])(
- 'should define an editor for every variable type',
+ 'should define an editor for variable type "%s"',
(type) => {
const editor = getVariableEditor(type);
expect(editor).toBeDefined();
@@ -130,7 +133,7 @@ describe('getVariableEditor', () => {
['datasource', DataSourceVariableEditor],
['adhoc', AdHocFiltersVariableEditor],
['textbox', TextBoxVariableEditor],
- ])('should return the correct editor for each variable type', (type, ExpectedVariableEditor) => {
+ ])('should return the correct editor for variable type "%s"', (type, ExpectedVariableEditor) => {
expect(getVariableEditor(type as EditableVariableType)).toBe(ExpectedVariableEditor);
});
});
@@ -249,3 +252,47 @@ describe('getOptionDataSourceTypes', () => {
expect(optionTypes[1].label).toBe('ds1');
});
});
+
+describe('getNextAvailableId', () => {
+ it('should return the initial ID for an empty array', () => {
+ const sceneVariables = new SceneVariableSet({
+ variables: [],
+ });
+
+ expect(getNextAvailableId('query', sceneVariables.state.variables)).toBe('query0');
+ });
+
+ it('should return a non-conflicting ID for a non-empty array', () => {
+ const variable = new QueryVariable({
+ name: 'query0',
+ label: 'test-label',
+ description: 'test-desc',
+ value: ['selected-value'],
+ text: ['selected-value-text'],
+ datasource: { uid: 'fake-std', type: 'fake-std' },
+ query: 'query',
+ includeAll: true,
+ allValue: 'test-all',
+ isMulti: true,
+ });
+
+ const sceneVariables = new SceneVariableSet({
+ variables: [variable],
+ });
+
+ expect(getNextAvailableId('query', sceneVariables.state.variables)).toBe('query1');
+ });
+});
+
+describe('getVariableDefault', () => {
+ it('should return a QueryVariable instance with the correct name', () => {
+ const sceneVariables = new SceneVariableSet({
+ variables: [],
+ });
+
+ const defaultVariable = getVariableDefault(sceneVariables.state.variables);
+
+ expect(defaultVariable).toBeInstanceOf(QueryVariable);
+ expect(defaultVariable.state.name).toBe('query0');
+ });
+});
diff --git a/public/app/features/dashboard-scene/settings/variables/utils.ts b/public/app/features/dashboard-scene/settings/variables/utils.ts
index 4b1514a336e..8b6480b6c9e 100644
--- a/public/app/features/dashboard-scene/settings/variables/utils.ts
+++ b/public/app/features/dashboard-scene/settings/variables/utils.ts
@@ -12,6 +12,7 @@ import {
AdHocFilterSet,
SceneVariable,
MultiValueVariable,
+ SceneVariableState,
} from '@grafana/scenes';
import { VariableType } from '@grafana/schema';
@@ -122,6 +123,25 @@ export function getVariableScene(type: EditableVariableType, initialState: Commo
}
}
+export function getVariableDefault(variables: Array>) {
+ const defaultVariableType = 'query';
+ const nextVariableIdName = getNextAvailableId(defaultVariableType, variables);
+ return new QueryVariable({
+ name: nextVariableIdName,
+ });
+}
+
+export function getNextAvailableId(type: VariableType, variables: Array>): string {
+ let counter = 0;
+ let nextId = `${type}${counter}`;
+
+ while (variables.find((variable) => variable.state.name === nextId)) {
+ nextId = `${type}${++counter}`;
+ }
+
+ return nextId;
+}
+
export function hasVariableOptions(variable: SceneVariable): variable is MultiValueVariable {
// variable options can be defined by state.options or state.intervals in case of interval variable
return 'options' in variable.state || 'intervals' in variable.state;
diff --git a/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx b/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx
index c65584657f9..2e9503c3a11 100644
--- a/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx
+++ b/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx
@@ -15,8 +15,6 @@ import { DashboardInteractions } from '../utils/interactions';
import { SceneShareTabState } from './types';
-const SNAPSHOTS_API_ENDPOINT = '/api/snapshots';
-
const getExpireOptions = () => {
const DEFAULT_EXPIRE_OPTION: SelectableValue = {
label: t('share-modal.snapshot.expire-never', `Never`),
@@ -121,8 +119,7 @@ export class ShareSnapshotTab extends SceneObjectBase {
};
try {
- const results: { deleteUrl: string; url: string } = await getBackendSrv().post(SNAPSHOTS_API_ENDPOINT, cmdData);
- return results;
+ return await getDashboardSnapshotSrv().create(cmdData);
} finally {
if (external) {
DashboardInteractions.publishSnapshotClicked({ expires: cmdData.expires });
diff --git a/public/app/features/dashboard-scene/utils/dashboardSceneGraph.test.ts b/public/app/features/dashboard-scene/utils/dashboardSceneGraph.test.ts
index 44f045df7a8..8b4c65ab284 100644
--- a/public/app/features/dashboard-scene/utils/dashboardSceneGraph.test.ts
+++ b/public/app/features/dashboard-scene/utils/dashboardSceneGraph.test.ts
@@ -11,8 +11,10 @@ import {
import { DashboardControls } from '../scene/DashboardControls';
import { DashboardLinksControls } from '../scene/DashboardLinksControls';
import { DashboardScene, DashboardSceneState } from '../scene/DashboardScene';
+import { VizPanelLinks, VizPanelLinksMenu } from '../scene/PanelLinks';
import { dashboardSceneGraph } from './dashboardSceneGraph';
+import { findVizPanelByKey } from './utils';
describe('dashboardSceneGraph', () => {
describe('getTimePicker', () => {
@@ -75,6 +77,20 @@ describe('dashboardSceneGraph', () => {
expect(dashboardControls).not.toBeNull();
});
});
+
+ describe('getPanelLinks', () => {
+ it('should throw if no links object defined', () => {
+ const scene = buildTestScene();
+ const panelWithNoLinks = findVizPanelByKey(scene, 'panel-1')!;
+ expect(() => dashboardSceneGraph.getPanelLinks(panelWithNoLinks)).toThrow();
+ });
+
+ it('should resolve VizPanelLinks object', () => {
+ const scene = buildTestScene();
+ const panelWithNoLinks = findVizPanelByKey(scene, 'panel-with-links')!;
+ expect(dashboardSceneGraph.getPanelLinks(panelWithNoLinks)).toBeInstanceOf(VizPanelLinks);
+ });
+ });
});
function buildTestScene(overrides?: Partial) {
@@ -121,6 +137,15 @@ function buildTestScene(overrides?: Partial) {
$data: new SceneQueryRunner({ key: 'data-query-runner2', queries: [{ refId: 'A' }] }),
}),
}),
+ new SceneGridItem({
+ body: new VizPanel({
+ title: 'Panel B',
+ key: 'panel-with-links',
+ pluginId: 'table',
+ $data: new SceneQueryRunner({ key: 'data-query-runner3', queries: [{ refId: 'A' }] }),
+ titleItems: [new VizPanelLinks({ menu: new VizPanelLinksMenu({}) })],
+ }),
+ }),
],
}),
...overrides,
diff --git a/public/app/features/dashboard-scene/utils/dashboardSceneGraph.ts b/public/app/features/dashboard-scene/utils/dashboardSceneGraph.ts
index 666b764b001..641b21c7f3b 100644
--- a/public/app/features/dashboard-scene/utils/dashboardSceneGraph.ts
+++ b/public/app/features/dashboard-scene/utils/dashboardSceneGraph.ts
@@ -1,7 +1,8 @@
-import { SceneTimePicker, SceneRefreshPicker } from '@grafana/scenes';
+import { SceneTimePicker, SceneRefreshPicker, VizPanel } from '@grafana/scenes';
import { DashboardControls } from '../scene/DashboardControls';
import { DashboardScene } from '../scene/DashboardScene';
+import { VizPanelLinks } from '../scene/PanelLinks';
function getTimePicker(scene: DashboardScene) {
const dashboardControls = getDashboardControls(scene);
@@ -36,8 +37,21 @@ function getDashboardControls(scene: DashboardScene) {
return null;
}
+function getPanelLinks(panel: VizPanel) {
+ if (
+ panel.state.titleItems &&
+ Array.isArray(panel.state.titleItems) &&
+ panel.state.titleItems[0] instanceof VizPanelLinks
+ ) {
+ return panel.state.titleItems[0];
+ }
+
+ throw new Error('VizPanelLinks links not found');
+}
+
export const dashboardSceneGraph = {
getTimePicker,
getRefreshPicker,
getDashboardControls,
+ getPanelLinks,
};
diff --git a/public/app/features/dashboard-scene/utils/test-utils.ts b/public/app/features/dashboard-scene/utils/test-utils.ts
index aa8a8afe29f..9e6b18d0f97 100644
--- a/public/app/features/dashboard-scene/utils/test-utils.ts
+++ b/public/app/features/dashboard-scene/utils/test-utils.ts
@@ -15,6 +15,7 @@ import { DashboardLoaderSrv, setDashboardLoaderSrv } from 'app/features/dashboar
import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from 'app/features/variables/constants';
import { DashboardDTO } from 'app/types';
+import { VizPanelLinks, VizPanelLinksMenu } from '../scene/PanelLinks';
import { PanelRepeaterGridItem, RepeatDirection } from '../scene/PanelRepeaterGridItem';
import { RowRepeaterBehavior } from '../scene/RowRepeaterBehavior';
@@ -120,7 +121,11 @@ export function buildPanelRepeaterScene(options: SceneOptions) {
y: 0,
width: 10,
height: 10,
- body: new VizPanel({ title: 'Panel $server', pluginId: 'timeseries' }),
+ body: new VizPanel({
+ title: 'Panel $server',
+ pluginId: 'timeseries',
+ titleItems: [new VizPanelLinks({ menu: new VizPanelLinksMenu({}) })],
+ }),
});
const rowChildren = defaults.usePanelRepeater ? repeater : gridItem;
diff --git a/public/app/features/dashboard/components/DashNav/DashNav.tsx b/public/app/features/dashboard/components/DashNav/DashNav.tsx
index 52ced1ac177..ffd013ebcf8 100644
--- a/public/app/features/dashboard/components/DashNav/DashNav.tsx
+++ b/public/app/features/dashboard/components/DashNav/DashNav.tsx
@@ -188,7 +188,13 @@ export const DashNav = React.memo((props) => {
if (dashboard.meta.publicDashboardEnabled) {
// TODO: This will be replaced with the new badge component. Color is required but gets override by css
buttons.push(
-
+
);
}
diff --git a/public/app/features/dashboard/components/DashNav/ShareButton.tsx b/public/app/features/dashboard/components/DashNav/ShareButton.tsx
index b1f3ca69dd7..2ff6ac53448 100644
--- a/public/app/features/dashboard/components/DashNav/ShareButton.tsx
+++ b/public/app/features/dashboard/components/DashNav/ShareButton.tsx
@@ -1,31 +1,13 @@
-import React, { useContext, useEffect } from 'react';
+import React from 'react';
import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
-import { ModalsContext, Button } from '@grafana/ui';
-import { useQueryParams } from 'app/core/hooks/useQueryParams';
+import { locationService } from '@grafana/runtime';
+import { Button } from '@grafana/ui';
import { Trans } from 'app/core/internationalization';
import { DashboardModel } from 'app/features/dashboard/state';
import { DashboardInteractions } from 'app/features/dashboard-scene/utils/interactions';
-import { ShareModal } from '../ShareModal';
-
export const ShareButton = ({ dashboard }: { dashboard: DashboardModel }) => {
- const [queryParams] = useQueryParams();
- const { showModal, hideModal } = useContext(ModalsContext);
-
- useEffect(() => {
- if (!!queryParams.shareView) {
- showModal(ShareModal, {
- dashboard,
- onDismiss: hideModal,
- activeTab: String(queryParams.shareView),
- });
- }
- return () => {
- hideModal();
- };
- }, [showModal, hideModal, dashboard, queryParams.shareView]);
-
return (