= ({ silence, className, silencedAlerts, alertM
|
|
- {silencedAlerts.length} |
+ {silencedAlerts.length} |
{startsAtDate?.format(dateDisplayFormat)} {'-'}
diff --git a/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx b/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx
index e5a46123ca1..c49ac6fe094 100644
--- a/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx
@@ -1,15 +1,15 @@
import { MatcherOperator, Silence, SilenceCreatePayload } from 'app/plugins/datasource/alertmanager/types';
import React, { FC, useMemo, useState } from 'react';
-import { Button, Field, FieldSet, Input, LinkButton, TextArea, useStyles } from '@grafana/ui';
+import { Button, Field, FieldSet, Input, LinkButton, TextArea, useStyles2 } from '@grafana/ui';
import {
DefaultTimeZone,
- GrafanaTheme,
parseDuration,
intervalToAbbreviatedDurationString,
addDurationToDate,
dateTime,
isValidDate,
UrlQueryMap,
+ GrafanaTheme2,
} from '@grafana/data';
import { useDebounce } from 'react-use';
import { config } from '@grafana/runtime';
@@ -99,7 +99,7 @@ export const SilencesEditor: FC = ({ silence, alertManagerSourceName }) =
const defaultValues = useMemo(() => getDefaultFormValues(queryParams, silence), [silence, queryParams]);
const formAPI = useForm({ defaultValues });
const dispatch = useDispatch();
- const styles = useStyles(getStyles);
+ const styles = useStyles2(getStyles);
const { loading } = useUnifiedAlertingSelector((state) => state.updateSilence);
@@ -196,7 +196,10 @@ export const SilencesEditor: FC = ({ silence, alertManagerSourceName }) =
error={formState.errors.comment?.message}
invalid={!!formState.errors.comment}
>
-
+
= ({ silence, alertManagerSourceName }) =
error={formState.errors.createdBy?.message}
invalid={!!formState.errors.createdBy}
>
-
+
@@ -228,9 +234,9 @@ export const SilencesEditor: FC = ({ silence, alertManagerSourceName }) =
);
};
-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
field: css`
- margin: ${theme.spacing.sm} 0;
+ margin: ${theme.spacing(1, 0)};
`,
textArea: css`
width: 600px;
@@ -244,7 +250,7 @@ const getStyles = (theme: GrafanaTheme) => ({
justify-content: flex-start;
& > * {
- margin-right: ${theme.spacing.sm};
+ margin-right: ${theme.spacing(1)};
}
`,
});
diff --git a/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx b/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx
new file mode 100644
index 00000000000..13442048a43
--- /dev/null
+++ b/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx
@@ -0,0 +1,109 @@
+import React, { FormEvent, useState } from 'react';
+import { css } from '@emotion/css';
+import { Label, Icon, Input, Tooltip, RadioButtonGroup, useStyles2, Button, Field } from '@grafana/ui';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { useQueryParams } from 'app/core/hooks/useQueryParams';
+import { getSilenceFiltersFromUrlParams } from '../../utils/misc';
+import { SilenceState } from 'app/plugins/datasource/alertmanager/types';
+import { parseMatchers } from '../../utils/alertmanager';
+import { debounce } from 'lodash';
+
+const stateOptions: SelectableValue[] = Object.entries(SilenceState).map(([key, value]) => ({
+ label: key,
+ value,
+}));
+
+export const SilencesFilter = () => {
+ const [queryStringKey, setQueryStringKey] = useState(`queryString-${Math.random() * 100}`);
+ const [queryParams, setQueryParams] = useQueryParams();
+ const { queryString, silenceState } = getSilenceFiltersFromUrlParams(queryParams);
+ const styles = useStyles2(getStyles);
+
+ const handleQueryStringChange = debounce((e: FormEvent) => {
+ const target = e.target as HTMLInputElement;
+ setQueryParams({ queryString: target.value || null });
+ }, 400);
+
+ const handleSilenceStateChange = (state: string) => {
+ setQueryParams({ silenceState: state });
+ };
+
+ const clearFilters = () => {
+ setQueryParams({
+ queryString: null,
+ silenceState: null,
+ });
+ setTimeout(() => setQueryStringKey(''));
+ };
+
+ const inputInvalid = queryString && queryString.length > 3 ? parseMatchers(queryString).length === 0 : false;
+
+ return (
+
+
+
+ Filter silences by matchers using a comma separated list of matchers, ie:
+ {`severity=critical, instance=~cluster-us-.+`}
+
+
+
+
+ {(queryString || silenceState) && (
+
+
+
+ )}
+
{!!silences.length && (
<>
+
{contextSrv.isEditor && (
@@ -45,51 +46,99 @@ const SilencesTable: FC = ({ silences, alertManagerAlerts, alertManagerSo
)}
-
-
-
-
-
-
-
- {contextSrv.isEditor && }
-
-
-
- |
- State |
- Matching labels |
- Alerts |
- Schedule |
- {contextSrv.isEditor && Action | }
-
-
-
- {filteredSilences.map((silence, index) => {
- const silencedAlerts = findSilencedAlerts(silence.id);
- return (
-
- );
- })}
-
-
-
-
- Expired silences are automatically deleted after 5 days.
-
+ {!!filteredSilences.length ? (
+
+
+
+
+
+
+
+ {contextSrv.isEditor && }
+
+
+
+ |
+ State |
+ Matching labels |
+ Alerts |
+ Schedule |
+ {contextSrv.isEditor && Action | }
+
+
+
+ {filteredSilences.map((silence, index) => {
+ const silencedAlerts = findSilencedAlerts(silence.id);
+ return (
+
+ );
+ })}
+
+
+ ) : (
+
+
+ No silences match your filters
+
+ )}
+
+ {showExpiredSilencesBanner && (
+
+
+ Expired silences are automatically deleted after 5 days.
+
+ )}
)}
{!silences.length && }
-
+ No playlist found! ;
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+ return {
+ noResult: css`
+ padding: ${theme.spacing(2)};
+ background: ${theme.colors.secondary.main};
+ font-style: italic;
+ margin-top: ${theme.spacing(2)};
+ `,
+ };
+};
diff --git a/public/app/features/playlist/PlaylistPage.tsx b/public/app/features/playlist/PlaylistPage.tsx
index 69a11f8321f..a2790e9a77e 100644
--- a/public/app/features/playlist/PlaylistPage.tsx
+++ b/public/app/features/playlist/PlaylistPage.tsx
@@ -5,30 +5,44 @@ import Page from 'app/core/components/Page/Page';
import { StoreState } from 'app/types';
import { GrafanaRouteComponentProps } from '../../core/navigation/types';
import { getNavModel } from 'app/core/selectors/navModel';
-import { useAsync } from 'react-use';
+import { useDebounce } from 'react-use';
import { PlaylistDTO } from './types';
-import { Button, Card, ConfirmModal, LinkButton } from '@grafana/ui';
-import { contextSrv } from 'app/core/services/context_srv';
+import { ConfirmModal } from '@grafana/ui';
import PageActionBar from 'app/core/components/PageActionBar/PageActionBar';
import EmptyListCTA from '../../core/components/EmptyListCTA/EmptyListCTA';
import { deletePlaylist, getAllPlaylist } from './api';
import { StartModal } from './StartModal';
+import { PlaylistPageList } from './PlaylistPageList';
+import { EmptyQueryListBanner } from './EmptyQueryListBanner';
interface ConnectedProps {
navModel: NavModel;
}
-
export interface PlaylistPageProps extends ConnectedProps, GrafanaRouteComponentProps {}
export const PlaylistPage: FC = ({ navModel }) => {
const [searchQuery, setSearchQuery] = useState('');
+ const [debouncedSearchQuery, setDebouncedSearchQuery] = useState(searchQuery);
+ const [hasFetched, setHasFetched] = useState(false);
const [startPlaylist, setStartPlaylist] = useState();
const [playlistToDelete, setPlaylistToDelete] = useState();
const [forcePlaylistsFetch, setForcePlaylistsFetch] = useState(0);
- const { value: playlists, loading } = useAsync(async () => {
- return getAllPlaylist(searchQuery) as Promise;
- }, [forcePlaylistsFetch]);
+ const [playlists, setPlaylists] = useState([]);
+
+ useDebounce(
+ async () => {
+ const playlists = await getAllPlaylist(searchQuery);
+ if (!hasFetched) {
+ setHasFetched(true);
+ }
+ setPlaylists(playlists);
+ setDebouncedSearchQuery(searchQuery);
+ },
+ 350,
+ [forcePlaylistsFetch, searchQuery]
+ );
+
const hasPlaylists = playlists && playlists.length > 0;
const onDismissDelete = () => setPlaylistToDelete(undefined);
const onDeletePlaylist = () => {
@@ -41,7 +55,7 @@ export const PlaylistPage: FC = ({ navModel }) => {
});
};
- let content = (
+ const emptyListBanner = (
= ({ navModel }) => {
/>
);
- if (hasPlaylists) {
- content = (
- <>
- {playlists!.map((playlist) => (
-
-
-
- {contextSrv.isEditor && (
- <>
-
- Edit playlist
-
-
-
- )}
-
-
- ))}
-
- );
- }
+ const showSearch = playlists.length > 0 || searchQuery.length > 0 || debouncedSearchQuery.length > 0;
+
return (
-
- {hasPlaylists && (
+
+ {showSearch && (
)}
- {content}
+
+ {!hasPlaylists && searchQuery ? (
+
+ ) : (
+
+ )}
+ {!showSearch && emptyListBanner}
{playlistToDelete && (
void;
+ setPlaylistToDelete: (playlistItem: PlaylistDTO) => void;
+ playlists: PlaylistDTO[] | undefined;
+}
+
+export const PlaylistPageList = ({ playlists, setStartPlaylist, setPlaylistToDelete }: Props) => {
+ return (
+ <>
+ {playlists!.map((playlist: PlaylistDTO) => (
+
+
+
+ {contextSrv.isEditor && (
+ <>
+
+ Edit playlist
+
+
+
+ )}
+
+
+ ))}
+
+ );
+};
diff --git a/public/app/features/plugins/admin/__mocks__/catalogPlugin.mock.ts b/public/app/features/plugins/admin/__mocks__/catalogPlugin.mock.ts
index 5f16a962580..2d0e1d73c9f 100644
--- a/public/app/features/plugins/admin/__mocks__/catalogPlugin.mock.ts
+++ b/public/app/features/plugins/admin/__mocks__/catalogPlugin.mock.ts
@@ -27,6 +27,7 @@ export default {
signatureType: 'community',
updatedAt: '2021-08-25T15:03:49.000Z',
version: '4.2.2',
+ error: undefined,
details: {
grafanaDependency: '>=8.0.0',
pluginDependencies: [],
diff --git a/public/app/features/plugins/admin/helpers.test.ts b/public/app/features/plugins/admin/helpers.test.ts
new file mode 100644
index 00000000000..15f548f2029
--- /dev/null
+++ b/public/app/features/plugins/admin/helpers.test.ts
@@ -0,0 +1,667 @@
+import { RemotePlugin, LocalPlugin } from './types';
+import { getLocalPluginMock, getRemotePluginMock, getCatalogPluginMock } from './__mocks__';
+import { PluginSignatureStatus, PluginSignatureType, PluginType } from '@grafana/data';
+import {
+ mapToCatalogPlugin,
+ mapRemoteToCatalog,
+ mapLocalToCatalog,
+ mergeLocalAndRemote,
+ mergeLocalsAndRemotes,
+ sortPlugins,
+ Sorters,
+} from './helpers';
+
+describe('Plugins/Helpers', () => {
+ let remotePlugin: RemotePlugin;
+ let localPlugin: LocalPlugin;
+
+ beforeEach(() => {
+ remotePlugin = getRemotePluginMock();
+ localPlugin = getLocalPluginMock();
+ });
+
+ describe('mergeLocalsAndRemotes()', () => {
+ const localPlugins = [
+ getLocalPluginMock({ id: 'plugin-1' }),
+ getLocalPluginMock({ id: 'plugin-2' }),
+ getLocalPluginMock({ id: 'plugin-3' }), // only on local
+ ];
+ const remotePlugins = [
+ getRemotePluginMock({ slug: 'plugin-1' }),
+ getRemotePluginMock({ slug: 'plugin-2' }),
+ getRemotePluginMock({ slug: 'plugin-4' }), // only on remote
+ ];
+
+ test('adds all available plugins only once', () => {
+ const merged = mergeLocalsAndRemotes(localPlugins, remotePlugins);
+ const mergedIds = merged.map(({ id }) => id);
+
+ expect(merged.length).toBe(4);
+ expect(mergedIds).toContain('plugin-1');
+ expect(mergedIds).toContain('plugin-2');
+ expect(mergedIds).toContain('plugin-3');
+ expect(mergedIds).toContain('plugin-4');
+ });
+
+ test('merges all plugins with their counterpart (if available)', () => {
+ const merged = mergeLocalsAndRemotes(localPlugins, remotePlugins);
+ const findMerged = (mergedId: string) => merged.find(({ id }) => id === mergedId);
+
+ // Both local & remote counterparts
+ expect(findMerged('plugin-1')).toEqual(
+ mergeLocalAndRemote(getLocalPluginMock({ id: 'plugin-1' }), getRemotePluginMock({ slug: 'plugin-1' }))
+ );
+ expect(findMerged('plugin-2')).toEqual(
+ mergeLocalAndRemote(getLocalPluginMock({ id: 'plugin-2' }), getRemotePluginMock({ slug: 'plugin-2' }))
+ );
+
+ // Only local
+ expect(findMerged('plugin-3')).toEqual(mergeLocalAndRemote(getLocalPluginMock({ id: 'plugin-3' })));
+
+ // Only remote
+ expect(findMerged('plugin-4')).toEqual(mergeLocalAndRemote(undefined, getRemotePluginMock({ slug: 'plugin-4' })));
+ });
+ });
+
+ describe('mergeLocalAndRemote()', () => {
+ test('merges using mapRemoteToCatalog() if there is only a remote version', () => {
+ expect(mergeLocalAndRemote(undefined, remotePlugin)).toEqual(mapRemoteToCatalog(remotePlugin));
+ });
+
+ test('merges using mapLocalToCatalog() if there is only a local version', () => {
+ expect(mergeLocalAndRemote(localPlugin)).toEqual(mapLocalToCatalog(localPlugin));
+ });
+
+ test('merges using mapToCatalogPlugin() if there is both a remote and a local version', () => {
+ expect(mergeLocalAndRemote(localPlugin, remotePlugin)).toEqual(mapToCatalogPlugin(localPlugin, remotePlugin));
+ });
+ });
+
+ describe('mapRemoteToCatalog()', () => {
+ test('maps the remote response (GCOM /api/plugins/) to PluginCatalog', () => {
+ expect(mapRemoteToCatalog(remotePlugin)).toEqual({
+ description: 'Zabbix plugin for Grafana',
+ downloads: 33645089,
+ hasUpdate: false,
+ id: 'alexanderzobnin-zabbix-app',
+ info: {
+ logos: {
+ large: 'https://grafana.com/api/plugins/alexanderzobnin-zabbix-app/versions/4.1.5/logos/large',
+ small: 'https://grafana.com/api/plugins/alexanderzobnin-zabbix-app/versions/4.1.5/logos/small',
+ },
+ },
+ error: undefined,
+ isCore: false,
+ isDev: false,
+ isDisabled: false,
+ isEnterprise: false,
+ isInstalled: false,
+ name: 'Zabbix',
+ orgName: 'Alexander Zobnin',
+ popularity: 0.2111,
+ publishedAt: '2016-04-06T20:23:41.000Z',
+ signature: 'valid',
+ type: 'app',
+ updatedAt: '2021-05-18T14:53:01.000Z',
+ version: '4.1.5',
+ });
+ });
+
+ test('adds the correct signature enum', () => {
+ const pluginWithoutSignature = { ...remotePlugin, signatureType: '', versionSignatureType: '' } as RemotePlugin;
+ // With only "signatureType" -> valid
+ const pluginWithSignature1 = { ...remotePlugin, signatureType: PluginSignatureType.commercial } as RemotePlugin;
+ // With only "versionSignatureType" -> valid
+ const pluginWithSignature2 = { ...remotePlugin, versionSignatureType: PluginSignatureType.core } as RemotePlugin;
+
+ expect(mapRemoteToCatalog(pluginWithoutSignature).signature).toBe(PluginSignatureStatus.missing);
+ expect(mapRemoteToCatalog(pluginWithSignature1).signature).toBe(PluginSignatureStatus.valid);
+ expect(mapRemoteToCatalog(pluginWithSignature2).signature).toBe(PluginSignatureStatus.valid);
+ });
+
+ test('adds an "isEnterprise" field', () => {
+ const enterprisePlugin = { ...remotePlugin, status: 'enterprise' } as RemotePlugin;
+ const notEnterprisePlugin = { ...remotePlugin, status: 'unknown' } as RemotePlugin;
+
+ expect(mapRemoteToCatalog(enterprisePlugin).isEnterprise).toBe(true);
+ expect(mapRemoteToCatalog(notEnterprisePlugin).isEnterprise).toBe(false);
+ });
+
+ test('adds an "isCore" field', () => {
+ const corePlugin = { ...remotePlugin, internal: true } as RemotePlugin;
+ const notCorePlugin = { ...remotePlugin, internal: false } as RemotePlugin;
+
+ expect(mapRemoteToCatalog(corePlugin).isCore).toBe(true);
+ expect(mapRemoteToCatalog(notCorePlugin).isCore).toBe(false);
+ });
+ });
+
+ describe('mapLocalToCatalog()', () => {
+ test('maps local response to PluginCatalog', () => {
+ expect(mapLocalToCatalog(localPlugin)).toEqual({
+ description: 'Zabbix plugin for Grafana',
+ downloads: 0,
+ id: 'alexanderzobnin-zabbix-app',
+ info: {
+ logos: {
+ large: 'public/plugins/alexanderzobnin-zabbix-app/img/icn-zabbix-app.svg',
+ small: 'public/plugins/alexanderzobnin-zabbix-app/img/icn-zabbix-app.svg',
+ },
+ },
+ error: undefined,
+ hasUpdate: false,
+ isCore: false,
+ isDev: false,
+ isDisabled: false,
+ isEnterprise: false,
+ isInstalled: true,
+ name: 'Zabbix',
+ orgName: 'Alexander Zobnin',
+ popularity: 0,
+ publishedAt: '',
+ signature: 'valid',
+ signatureOrg: 'Alexander Zobnin',
+ signatureType: 'community',
+ type: 'app',
+ updatedAt: '2021-08-25',
+ version: '4.2.2',
+ });
+ });
+
+ test('isCore if signature is internal', () => {
+ const pluginWithoutInternalSignature = { ...localPlugin };
+ const pluginWithInternalSignature = { ...localPlugin, signature: 'internal' } as LocalPlugin;
+ expect(mapLocalToCatalog(pluginWithoutInternalSignature).isCore).toBe(false);
+ expect(mapLocalToCatalog(pluginWithInternalSignature).isCore).toBe(true);
+ });
+
+ test('isDev if local.dev', () => {
+ const pluginWithoutDev = { ...localPlugin, dev: false };
+ const pluginWithDev = { ...localPlugin, dev: true };
+ expect(mapLocalToCatalog(pluginWithoutDev).isDev).toBe(false);
+ expect(mapLocalToCatalog(pluginWithDev).isDev).toBe(true);
+ });
+ });
+
+ describe('mapToCatalogPlugin()', () => {
+ test('merges local and remote plugin data correctly', () => {
+ expect(mapToCatalogPlugin(localPlugin, remotePlugin)).toEqual({
+ description: 'Zabbix plugin for Grafana',
+ downloads: 33645089,
+ hasUpdate: false,
+ id: 'alexanderzobnin-zabbix-app',
+ info: {
+ logos: {
+ small: 'https://grafana.com/api/plugins/alexanderzobnin-zabbix-app/versions/4.1.5/logos/small',
+ large: 'https://grafana.com/api/plugins/alexanderzobnin-zabbix-app/versions/4.1.5/logos/large',
+ },
+ },
+ error: undefined,
+ isCore: false,
+ isDev: false,
+ isDisabled: false,
+ isEnterprise: false,
+ isInstalled: true,
+ name: 'Zabbix',
+ orgName: 'Alexander Zobnin',
+ popularity: 0.2111,
+ publishedAt: '2016-04-06T20:23:41.000Z',
+ signature: 'valid',
+ signatureOrg: 'Alexander Zobnin',
+ signatureType: 'community',
+ type: 'app',
+ updatedAt: '2021-05-18T14:53:01.000Z',
+ version: '4.1.5',
+ });
+ });
+
+ test('`.description` - prefers the remote', () => {
+ // Local & Remote
+ expect(
+ mapToCatalogPlugin(
+ { ...localPlugin, info: { ...localPlugin.info, description: 'Local description' } },
+ { ...remotePlugin, description: 'Remote description' }
+ )
+ ).toMatchObject({ description: 'Remote description' });
+
+ // Remote only
+ expect(mapToCatalogPlugin(undefined, { ...remotePlugin, description: 'Remote description' })).toMatchObject({
+ description: 'Remote description',
+ });
+
+ // Local only
+ expect(
+ mapToCatalogPlugin({ ...localPlugin, info: { ...localPlugin.info, description: 'Local description' } })
+ ).toMatchObject({ description: 'Local description' });
+
+ // No local or remote
+ expect(mapToCatalogPlugin()).toMatchObject({ description: '' });
+ });
+
+ test('`.hasUpdate` - prefers the local', () => {
+ // Local & Remote (only if the remote version is greater than the local one)
+ expect(
+ mapToCatalogPlugin(
+ { ...localPlugin, info: { ...localPlugin.info, version: '2.0.0' } },
+ { ...remotePlugin, version: '2.1.0' }
+ )
+ ).toMatchObject({ hasUpdate: true });
+ expect(
+ mapToCatalogPlugin(
+ { ...localPlugin, info: { ...localPlugin.info, version: '2.1.0' } },
+ { ...remotePlugin, version: '2.1.0' }
+ )
+ ).toMatchObject({ hasUpdate: false });
+
+ // Remote only
+ expect(mapToCatalogPlugin(undefined, { ...remotePlugin, version: '2.1.0' })).toMatchObject({
+ hasUpdate: false,
+ });
+
+ // Local only
+ expect(mapToCatalogPlugin({ ...localPlugin })).toMatchObject({ hasUpdate: false });
+ expect(mapToCatalogPlugin({ ...localPlugin, hasUpdate: true })).toMatchObject({ hasUpdate: true });
+ expect(mapToCatalogPlugin({ ...localPlugin, info: { ...localPlugin.info, version: '2.1.0' } })).toMatchObject({
+ hasUpdate: false,
+ });
+
+ // No local or remote
+ expect(mapToCatalogPlugin()).toMatchObject({ hasUpdate: false });
+ });
+
+ test('`.downloads` - relies on the remote', () => {
+ // Local & Remote
+ expect(mapToCatalogPlugin(localPlugin, { ...remotePlugin, downloads: 99 })).toMatchObject({ downloads: 99 });
+
+ // Remote only
+ expect(mapToCatalogPlugin(undefined, { ...remotePlugin, downloads: 99 })).toMatchObject({ downloads: 99 });
+
+ // Local only
+ expect(mapToCatalogPlugin(localPlugin)).toMatchObject({ downloads: 0 });
+
+ // No local or remote
+ expect(mapToCatalogPlugin()).toMatchObject({ downloads: 0 });
+ });
+
+ test('`.isCore` - prefers the remote', () => {
+ // Local & Remote
+ expect(mapToCatalogPlugin(localPlugin, { ...remotePlugin, internal: true })).toMatchObject({ isCore: true });
+
+ // Remote only
+ expect(mapToCatalogPlugin(undefined, { ...remotePlugin, internal: true })).toMatchObject({ isCore: true });
+ expect(mapToCatalogPlugin(undefined, { ...remotePlugin, internal: false })).toMatchObject({ isCore: false });
+
+ // Local only
+ expect(mapToCatalogPlugin({ ...localPlugin, signature: PluginSignatureStatus.internal })).toMatchObject({
+ isCore: true,
+ });
+ expect(mapToCatalogPlugin({ ...localPlugin, signature: PluginSignatureStatus.valid })).toMatchObject({
+ isCore: false,
+ });
+
+ // No local or remote
+ expect(mapToCatalogPlugin()).toMatchObject({ isCore: false });
+ });
+
+ test('`.isDev` - prefers the local', () => {
+ // Local & Remote
+ expect(mapToCatalogPlugin({ ...localPlugin, dev: true }, remotePlugin)).toMatchObject({ isDev: true });
+
+ // Remote only
+ expect(mapToCatalogPlugin(undefined, remotePlugin)).toMatchObject({ isDev: false });
+
+ // Local only
+ expect(mapToCatalogPlugin({ ...localPlugin, dev: true }, undefined)).toMatchObject({ isDev: true });
+ expect(mapToCatalogPlugin({ ...localPlugin, dev: undefined }, undefined)).toMatchObject({ isDev: false });
+
+ // No local or remote
+ expect(mapToCatalogPlugin()).toMatchObject({ isDev: false });
+ });
+
+ test('`.isEnterprise` - prefers the remote', () => {
+ // Local & Remote
+ expect(mapToCatalogPlugin(localPlugin, { ...remotePlugin, status: 'enterprise' })).toMatchObject({
+ isEnterprise: true,
+ });
+ expect(mapToCatalogPlugin(localPlugin, { ...remotePlugin, status: 'unknown' })).toMatchObject({
+ isEnterprise: false,
+ });
+
+ // Remote only
+ expect(mapToCatalogPlugin(undefined, { ...remotePlugin, status: 'enterprise' })).toMatchObject({
+ isEnterprise: true,
+ });
+
+ // Local only
+ expect(mapToCatalogPlugin(localPlugin)).toMatchObject({ isEnterprise: false });
+
+ // No local or remote
+ expect(mapToCatalogPlugin()).toMatchObject({ isEnterprise: false });
+ });
+
+ test('`.isInstalled` - prefers the local', () => {
+ // Local & Remote
+ expect(mapToCatalogPlugin(localPlugin, remotePlugin)).toMatchObject({ isInstalled: true });
+
+ // Remote only
+ expect(mapToCatalogPlugin(undefined, remotePlugin)).toMatchObject({ isInstalled: false });
+
+ // Local only
+ expect(mapToCatalogPlugin(localPlugin, undefined)).toMatchObject({ isInstalled: true });
+
+ // No local or remote
+ expect(mapToCatalogPlugin()).toMatchObject({ isInstalled: false });
+ });
+
+ test('`.name` - prefers the remote', () => {
+ // Local & Remote
+ expect(
+ mapToCatalogPlugin({ ...localPlugin, name: 'Local name' }, { ...remotePlugin, name: 'Remote name' })
+ ).toMatchObject({ name: 'Remote name' });
+
+ // Remote only
+ expect(mapToCatalogPlugin(undefined, { ...remotePlugin, name: 'Remote name' })).toMatchObject({
+ name: 'Remote name',
+ });
+
+ // Local only
+ expect(mapToCatalogPlugin({ ...localPlugin, name: 'Local name' })).toMatchObject({ name: 'Local name' });
+
+ // No local or remote
+ expect(mapToCatalogPlugin()).toMatchObject({ name: '' });
+ });
+
+ test('`.orgName` - prefers the remote', () => {
+ // Local & Remote
+ expect(mapToCatalogPlugin(localPlugin, { ...remotePlugin, orgName: 'Remote org' })).toMatchObject({
+ orgName: 'Remote org',
+ });
+
+ // Remote only
+ expect(mapToCatalogPlugin(undefined, { ...remotePlugin, orgName: 'Remote org' })).toMatchObject({
+ orgName: 'Remote org',
+ });
+
+ // Local only
+ expect(mapToCatalogPlugin(localPlugin)).toMatchObject({ orgName: 'Alexander Zobnin' });
+
+ // No local or remote
+ expect(mapToCatalogPlugin()).toMatchObject({ orgName: '' });
+ });
+
+ test('`.popularity` - prefers the remote', () => {
+ // Local & Remote
+ expect(mapToCatalogPlugin(localPlugin, { ...remotePlugin, popularity: 10 })).toMatchObject({ popularity: 10 });
+
+ // Remote only
+ expect(mapToCatalogPlugin(undefined, { ...remotePlugin, popularity: 10 })).toMatchObject({ popularity: 10 });
+
+ // Local only
+ expect(mapToCatalogPlugin(localPlugin)).toMatchObject({ popularity: 0 });
+
+ // No local or remote
+ expect(mapToCatalogPlugin()).toMatchObject({ popularity: 0 });
+ });
+
+ test('`.publishedAt` - prefers the remote', () => {
+ // Local & Remote
+ expect(mapToCatalogPlugin(localPlugin, { ...remotePlugin, createdAt: '2020-01-01' })).toMatchObject({
+ publishedAt: '2020-01-01',
+ });
+
+ // Remote only
+ expect(mapToCatalogPlugin(undefined, { ...remotePlugin, createdAt: '2020-01-01' })).toMatchObject({
+ publishedAt: '2020-01-01',
+ });
+
+ // Local only
+ expect(mapToCatalogPlugin(localPlugin)).toMatchObject({ publishedAt: '' });
+
+ // No local or remote
+ expect(mapToCatalogPlugin()).toMatchObject({ publishedAt: '' });
+ });
+
+ test('`.type` - prefers the remote', () => {
+ // Local & Remote
+ expect(
+ mapToCatalogPlugin(
+ { ...localPlugin, type: PluginType.app },
+ { ...remotePlugin, typeCode: PluginType.datasource }
+ )
+ ).toMatchObject({
+ type: PluginType.datasource,
+ });
+
+ // Remote only
+ expect(mapToCatalogPlugin(undefined, { ...remotePlugin, typeCode: PluginType.datasource })).toMatchObject({
+ type: PluginType.datasource,
+ });
+
+ // Local only
+ expect(mapToCatalogPlugin({ ...localPlugin, type: PluginType.app })).toMatchObject({
+ type: PluginType.app,
+ });
+
+ // No local or remote
+ expect(mapToCatalogPlugin()).toMatchObject({ type: undefined });
+ });
+
+ test('`.signature` - prefers the local', () => {
+ // Local & Remote
+ expect(
+ mapToCatalogPlugin(
+ { ...localPlugin, signature: PluginSignatureStatus.valid },
+ { ...remotePlugin, signatureType: '', versionSignatureType: '' }
+ )
+ ).toMatchObject({
+ signature: PluginSignatureStatus.valid,
+ });
+ expect(
+ mapToCatalogPlugin(
+ { ...localPlugin, signature: PluginSignatureStatus.missing },
+ {
+ ...remotePlugin,
+ signatureType: PluginSignatureType.grafana,
+ versionSignatureType: PluginSignatureType.grafana,
+ }
+ )
+ ).toMatchObject({
+ signature: PluginSignatureStatus.missing,
+ });
+
+ // Remote only
+ expect(
+ mapToCatalogPlugin(undefined, { ...remotePlugin, signatureType: PluginSignatureType.grafana })
+ ).toMatchObject({
+ signature: PluginSignatureStatus.valid,
+ });
+ expect(
+ mapToCatalogPlugin(undefined, { ...remotePlugin, versionSignatureType: PluginSignatureType.grafana })
+ ).toMatchObject({
+ signature: PluginSignatureStatus.valid,
+ });
+ expect(
+ mapToCatalogPlugin(undefined, { ...remotePlugin, signatureType: '', versionSignatureType: '' })
+ ).toMatchObject({
+ signature: PluginSignatureStatus.missing,
+ });
+
+ // Local only
+ expect(mapToCatalogPlugin({ ...localPlugin, signature: PluginSignatureStatus.valid })).toMatchObject({
+ signature: PluginSignatureStatus.valid,
+ });
+
+ // No local or remote
+ expect(mapToCatalogPlugin()).toMatchObject({ signature: PluginSignatureStatus.missing });
+ });
+
+ test('`.signatureOrg` - prefers the local', () => {
+ // Local & Remote
+ expect(
+ mapToCatalogPlugin(
+ { ...localPlugin, signatureOrg: 'Local Org' },
+ { ...remotePlugin, versionSignedByOrgName: 'Remote Org' }
+ )
+ ).toMatchObject({
+ signatureOrg: 'Local Org',
+ });
+
+ // Remote only
+ expect(mapToCatalogPlugin(undefined, { ...remotePlugin, versionSignedByOrgName: 'Remote Org' })).toMatchObject({
+ signatureOrg: 'Remote Org',
+ });
+
+ // Local only
+ expect(mapToCatalogPlugin({ ...localPlugin, signatureOrg: 'Local Org' })).toMatchObject({
+ signatureOrg: 'Local Org',
+ });
+
+ // No local or remote
+ expect(mapToCatalogPlugin()).toMatchObject({ signatureOrg: undefined });
+ });
+
+ test('`.signatureType` - prefers the local', () => {
+ // Local & Remote
+ expect(
+ mapToCatalogPlugin(
+ { ...localPlugin, signatureType: PluginSignatureType.core },
+ { ...remotePlugin, signatureType: PluginSignatureType.grafana }
+ )
+ ).toMatchObject({
+ signatureType: PluginSignatureType.core,
+ });
+
+ // Remote only
+ expect(
+ mapToCatalogPlugin(undefined, {
+ ...remotePlugin,
+ versionSignatureType: PluginSignatureType.core,
+ signatureType: PluginSignatureType.grafana,
+ })
+ ).toMatchObject({
+ signatureType: PluginSignatureType.core,
+ });
+ expect(
+ mapToCatalogPlugin(undefined, {
+ ...remotePlugin,
+ versionSignatureType: '',
+ signatureType: PluginSignatureType.grafana,
+ })
+ ).toMatchObject({
+ signatureType: PluginSignatureType.grafana,
+ });
+
+ // Local only
+ expect(mapToCatalogPlugin({ ...localPlugin, signatureType: PluginSignatureType.core })).toMatchObject({
+ signatureType: PluginSignatureType.core,
+ });
+
+ // No local or remote
+ expect(mapToCatalogPlugin()).toMatchObject({ signatureType: undefined });
+ });
+
+ test('`.updatedAt` - prefers the remote', () => {
+ // Local & Remote
+ expect(
+ mapToCatalogPlugin(
+ { ...localPlugin, info: { ...localPlugin.info, updated: '2019-01-01' } },
+ { ...remotePlugin, updatedAt: '2020-01-01' }
+ )
+ ).toMatchObject({
+ updatedAt: '2020-01-01',
+ });
+
+ // Remote only
+ expect(mapToCatalogPlugin(undefined, { ...remotePlugin, updatedAt: '2020-01-01' })).toMatchObject({
+ updatedAt: '2020-01-01',
+ });
+
+ // Local only
+ expect(
+ mapToCatalogPlugin({ ...localPlugin, info: { ...localPlugin.info, updated: '2019-01-01' } })
+ ).toMatchObject({
+ updatedAt: '2019-01-01',
+ });
+
+ // No local or remote
+ expect(mapToCatalogPlugin()).toMatchObject({ updatedAt: '' });
+ });
+ });
+
+ describe('sortPlugins()', () => {
+ test('should be possible to sort by `name` ASC', () => {
+ const sorted = sortPlugins(
+ [
+ getCatalogPluginMock({ id: 'zabbix', name: 'Zabbix' }),
+ getCatalogPluginMock({ id: 'snowflake', name: 'Snowflake' }),
+ getCatalogPluginMock({ id: 'jira', name: 'Jira' }),
+ getCatalogPluginMock({ id: 'pie-chart', name: 'Pie Chart' }),
+ getCatalogPluginMock({ id: 'cloud-watch', name: 'CloudWatch' }),
+ ],
+ Sorters.nameAsc
+ );
+
+ expect(sorted.map(({ name }) => name)).toEqual(['CloudWatch', 'Jira', 'Pie Chart', 'Snowflake', 'Zabbix']);
+ });
+
+ test('should be possible to sort by `name` DESC', () => {
+ const sorted = sortPlugins(
+ [
+ getCatalogPluginMock({ id: 'zabbix', name: 'Zabbix' }),
+ getCatalogPluginMock({ id: 'snowflake', name: 'Snowflake' }),
+ getCatalogPluginMock({ id: 'jira', name: 'Jira' }),
+ getCatalogPluginMock({ id: 'pie-chart', name: 'Pie Chart' }),
+ getCatalogPluginMock({ id: 'cloud-watch', name: 'CloudWatch' }),
+ ],
+ Sorters.nameDesc
+ );
+
+ expect(sorted.map(({ name }) => name)).toEqual(['Zabbix', 'Snowflake', 'Pie Chart', 'Jira', 'CloudWatch']);
+ });
+
+ test('should be possible to sort by `updated` (latest first)', () => {
+ const sorted = sortPlugins(
+ [
+ getCatalogPluginMock({ id: 'zabbix', updatedAt: '2010-01-01' }),
+ getCatalogPluginMock({ id: 'snowflake', updatedAt: '2012-01-01' }),
+ getCatalogPluginMock({ id: 'jira', updatedAt: '2005-01-01' }),
+ getCatalogPluginMock({ id: 'pie-chart', updatedAt: '2021-01-01' }),
+ getCatalogPluginMock({ id: 'cloud-watch', updatedAt: '2009-01-01' }),
+ ],
+ Sorters.updated
+ );
+
+ expect(sorted.map(({ id }) => id)).toEqual(['pie-chart', 'snowflake', 'zabbix', 'cloud-watch', 'jira']);
+ });
+
+ test('should be possible to sort by `published` (latest first)', () => {
+ const sorted = sortPlugins(
+ [
+ getCatalogPluginMock({ id: 'zabbix', publishedAt: '2010-01-01' }),
+ getCatalogPluginMock({ id: 'snowflake', publishedAt: '2012-01-01' }),
+ getCatalogPluginMock({ id: 'jira', publishedAt: '2005-01-01' }),
+ getCatalogPluginMock({ id: 'pie-chart', publishedAt: '2021-01-01' }),
+ getCatalogPluginMock({ id: 'cloud-watch', publishedAt: '2009-01-01' }),
+ ],
+ Sorters.published
+ );
+
+ expect(sorted.map(({ id }) => id)).toEqual(['pie-chart', 'snowflake', 'zabbix', 'cloud-watch', 'jira']);
+ });
+
+ test('should be possible to sort by `downloads` (greatest first)', () => {
+ const sorted = sortPlugins(
+ [
+ getCatalogPluginMock({ id: 'zabbix', downloads: 30 }),
+ getCatalogPluginMock({ id: 'snowflake', downloads: 10 }),
+ getCatalogPluginMock({ id: 'jira', downloads: 100 }),
+ getCatalogPluginMock({ id: 'pie-chart', downloads: 350 }),
+ getCatalogPluginMock({ id: 'cloud-watch', downloads: 200 }),
+ ],
+ Sorters.downloads
+ );
+
+ expect(sorted.map(({ id }) => id)).toEqual(['pie-chart', 'cloud-watch', 'jira', 'zabbix', 'snowflake']);
+ });
+ });
+});
diff --git a/public/app/features/plugins/admin/helpers.ts b/public/app/features/plugins/admin/helpers.ts
index c0c591efe01..e6c9b460916 100644
--- a/public/app/features/plugins/admin/helpers.ts
+++ b/public/app/features/plugins/admin/helpers.ts
@@ -17,7 +17,7 @@ export function isOrgAdmin() {
export function mergeLocalsAndRemotes(
local: LocalPlugin[] = [],
remote: RemotePlugin[] = [],
- errors: PluginError[]
+ errors?: PluginError[]
): CatalogPlugin[] {
const catalogPlugins: CatalogPlugin[] = [];
const errorByPluginId = groupErrorsByPluginId(errors);
@@ -145,7 +145,7 @@ export function mapToCatalogPlugin(local?: LocalPlugin, remote?: RemotePlugin, e
const hasUpdate =
local?.hasUpdate || Boolean(remote?.version && local?.info.version && gt(remote?.version, local?.info.version));
const id = remote?.slug || local?.id || '';
- const hasRemoteSignature = remote?.signatureType !== '' || remote?.versionSignatureType !== '';
+ const hasRemoteSignature = remote?.signatureType || remote?.versionSignatureType;
const isDisabled = !!error;
let logos = {
@@ -217,7 +217,7 @@ export const sortPlugins = (plugins: CatalogPlugin[], sortBy: Sorters) => {
return plugins;
};
-function groupErrorsByPluginId(errors: PluginError[]): Record {
+function groupErrorsByPluginId(errors: PluginError[] = []): Record {
return errors.reduce((byId, error) => {
byId[error.pluginId] = error;
return byId;
diff --git a/public/app/features/plugins/admin/pages/Browse.test.tsx b/public/app/features/plugins/admin/pages/Browse.test.tsx
index 871265d4ece..a1a5e347b19 100644
--- a/public/app/features/plugins/admin/pages/Browse.test.tsx
+++ b/public/app/features/plugins/admin/pages/Browse.test.tsx
@@ -170,6 +170,7 @@ describe('Browse list of plugins', () => {
expect(queryByText('Plugin 3')).not.toBeInTheDocument();
});
});
+
describe('when searching', () => {
it('should only list plugins matching search', async () => {
const { queryByText } = renderBrowse('/plugins?filterBy=all&q=zabbix', [
diff --git a/public/app/features/plugins/admin/pages/PluginDetails.test.tsx b/public/app/features/plugins/admin/pages/PluginDetails.test.tsx
index 1b58b6f7161..b1601a4341f 100644
--- a/public/app/features/plugins/admin/pages/PluginDetails.test.tsx
+++ b/public/app/features/plugins/admin/pages/PluginDetails.test.tsx
@@ -9,7 +9,7 @@ import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps
import { CatalogPlugin } from '../types';
import * as api from '../api';
import { mockPluginApis, getCatalogPluginMock, getPluginsStateMock } from '../__mocks__';
-import { PluginErrorCode } from '@grafana/data';
+import { PluginErrorCode, PluginSignatureStatus } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
// Mock the config to enable the plugin catalog
@@ -83,6 +83,51 @@ describe('Plugin details page', () => {
await waitFor(() => expect(queryByText(/licensed under the apache 2.0 license/i)).toBeInTheDocument());
});
+ it('should display the number of downloads in the header', async () => {
+ const downloads = 24324;
+ const { queryByText } = renderPluginDetails({ id, downloads });
+
+ await waitFor(() => expect(queryByText(new Intl.NumberFormat().format(downloads))).toBeInTheDocument());
+ });
+
+ it('should display the version in the header', async () => {
+ const version = '1.3.443';
+ const { queryByText } = renderPluginDetails({ id, version });
+
+ await waitFor(() => expect(queryByText(version)).toBeInTheDocument());
+ });
+
+ it('should display description in the header', async () => {
+ const description = 'This is my description';
+ const { queryByText } = renderPluginDetails({ id, description });
+
+ await waitFor(() => expect(queryByText(description)).toBeInTheDocument());
+ });
+
+ it('should display a "Signed" badge if the plugin signature is verified', async () => {
+ const { queryByText } = renderPluginDetails({ id, signature: PluginSignatureStatus.valid });
+
+ await waitFor(() => expect(queryByText('Signed')).toBeInTheDocument());
+ });
+
+ it('should display a "Missing signature" badge if the plugin signature is missing', async () => {
+ const { queryByText } = renderPluginDetails({ id, signature: PluginSignatureStatus.missing });
+
+ await waitFor(() => expect(queryByText('Missing signature')).toBeInTheDocument());
+ });
+
+ it('should display a "Modified signature" badge if the plugin signature is modified', async () => {
+ const { queryByText } = renderPluginDetails({ id, signature: PluginSignatureStatus.modified });
+
+ await waitFor(() => expect(queryByText('Modified signature')).toBeInTheDocument());
+ });
+
+ it('should display a "Invalid signature" badge if the plugin signature is invalid', async () => {
+ const { queryByText } = renderPluginDetails({ id, signature: PluginSignatureStatus.invalid });
+
+ await waitFor(() => expect(queryByText('Invalid signature')).toBeInTheDocument());
+ });
+
it('should display version history in case it is available', async () => {
const { queryByText, getByText, getByRole } = renderPluginDetails({
id,
diff --git a/public/app/features/query/components/QueryEditorRowHeader.tsx b/public/app/features/query/components/QueryEditorRowHeader.tsx
index 5cff58352fc..83a3d89b8de 100644
--- a/public/app/features/query/components/QueryEditorRowHeader.tsx
+++ b/public/app/features/query/components/QueryEditorRowHeader.tsx
@@ -147,6 +147,7 @@ const getStyles = (theme: GrafanaTheme) => {
align-items: center;
flex-grow: 1;
margin-left: ${theme.spacing.xs};
+ overflow: hidden;
&:hover {
.query-name-wrapper {
diff --git a/public/app/features/templating/formatRegistry.ts b/public/app/features/templating/formatRegistry.ts
index 1934add8c23..a6f11e7d9eb 100644
--- a/public/app/features/templating/formatRegistry.ts
+++ b/public/app/features/templating/formatRegistry.ts
@@ -16,10 +16,29 @@ export interface FormatRegistryItem extends RegistryItem {
formatter(options: FormatOptions, variable: VariableModel): string;
}
+export enum FormatRegistryID {
+ lucene = 'lucene',
+ raw = 'raw',
+ regex = 'regex',
+ pipe = 'pipe',
+ distributed = 'distributed',
+ csv = 'csv',
+ html = 'html',
+ json = 'json',
+ percentEncode = 'percentencode',
+ singleQuote = 'singlequote',
+ doubleQuote = 'doublequote',
+ sqlString = 'sqlstring',
+ date = 'date',
+ glob = 'glob',
+ text = 'text',
+ queryParam = 'queryparam',
+}
+
export const formatRegistry = new Registry(() => {
const formats: FormatRegistryItem[] = [
{
- id: 'lucene',
+ id: FormatRegistryID.lucene,
name: 'Lucene',
description: 'Values are lucene escaped and multi-valued variables generate an OR expression',
formatter: ({ value }) => {
@@ -39,13 +58,13 @@ export const formatRegistry = new Registry(() => {
},
},
{
- id: 'raw',
+ id: FormatRegistryID.raw,
name: 'raw',
description: 'Keep value as is',
formatter: ({ value }) => value,
},
{
- id: 'regex',
+ id: FormatRegistryID.regex,
name: 'Regex',
description: 'Values are regex escaped and multi-valued variables generate a (|) expression',
formatter: ({ value }) => {
@@ -61,7 +80,7 @@ export const formatRegistry = new Registry(() => {
},
},
{
- id: 'pipe',
+ id: FormatRegistryID.pipe,
name: 'Pipe',
description: 'Values are separated by | character',
formatter: ({ value }) => {
@@ -72,7 +91,7 @@ export const formatRegistry = new Registry(() => {
},
},
{
- id: 'distributed',
+ id: FormatRegistryID.distributed,
name: 'Distributed',
description: 'Multiple values are formatted like variable=value',
formatter: ({ value }, variable) => {
@@ -91,7 +110,7 @@ export const formatRegistry = new Registry(() => {
},
},
{
- id: 'csv',
+ id: FormatRegistryID.csv,
name: 'Csv',
description: 'Comma-separated values',
formatter: ({ value }) => {
@@ -102,7 +121,7 @@ export const formatRegistry = new Registry(() => {
},
},
{
- id: 'html',
+ id: FormatRegistryID.html,
name: 'HTML',
description: 'HTML escaping of values',
formatter: ({ value }) => {
@@ -113,7 +132,7 @@ export const formatRegistry = new Registry(() => {
},
},
{
- id: 'json',
+ id: FormatRegistryID.json,
name: 'JSON',
description: 'JSON stringify valu',
formatter: ({ value }) => {
@@ -121,7 +140,7 @@ export const formatRegistry = new Registry(() => {
},
},
{
- id: 'percentencode',
+ id: FormatRegistryID.percentEncode,
name: 'Percent encode',
description: 'Useful for URL escaping values',
formatter: ({ value }) => {
@@ -133,7 +152,7 @@ export const formatRegistry = new Registry(() => {
},
},
{
- id: 'singlequote',
+ id: FormatRegistryID.singleQuote,
name: 'Single quote',
description: 'Single quoted values',
formatter: ({ value }) => {
@@ -146,7 +165,7 @@ export const formatRegistry = new Registry(() => {
},
},
{
- id: 'doublequote',
+ id: FormatRegistryID.doubleQuote,
name: 'Double quote',
description: 'Double quoted values',
formatter: ({ value }) => {
@@ -159,7 +178,7 @@ export const formatRegistry = new Registry(() => {
},
},
{
- id: 'sqlstring',
+ id: FormatRegistryID.sqlString,
name: 'SQL string',
description: 'SQL string quoting and commas for use in IN statements and other scenarios',
formatter: ({ value }) => {
@@ -172,7 +191,7 @@ export const formatRegistry = new Registry(() => {
},
},
{
- id: 'date',
+ id: FormatRegistryID.date,
name: 'Date',
description: 'Format date in different ways',
formatter: ({ value, args }) => {
@@ -191,7 +210,7 @@ export const formatRegistry = new Registry(() => {
},
},
{
- id: 'glob',
+ id: FormatRegistryID.glob,
name: 'Glob',
description: 'Format multi-valued variables using glob syntax, example {value1,value2}',
formatter: ({ value }) => {
@@ -202,7 +221,7 @@ export const formatRegistry = new Registry(() => {
},
},
{
- id: 'text',
+ id: FormatRegistryID.text,
name: 'Text',
description: 'Format variables in their text representation. Example in multi-variable scenario A + B + C.',
formatter: (options, variable) => {
@@ -220,7 +239,7 @@ export const formatRegistry = new Registry(() => {
},
},
{
- id: 'queryparam',
+ id: FormatRegistryID.queryParam,
name: 'Query parameter',
description:
'Format variables as URL parameters. Example in multi-variable scenario A + B + C => var-foo=A&var-foo=B&var-foo=C.',
diff --git a/public/app/features/templating/template_srv.test.ts b/public/app/features/templating/template_srv.test.ts
index f0b85fe347f..26724604cab 100644
--- a/public/app/features/templating/template_srv.test.ts
+++ b/public/app/features/templating/template_srv.test.ts
@@ -5,6 +5,7 @@ import { VariableAdapter, variableAdapters } from '../variables/adapters';
import { createQueryVariableAdapter } from '../variables/query/adapter';
import { createAdHocVariableAdapter } from '../variables/adhoc/adapter';
import { VariableModel } from '../variables/types';
+import { FormatRegistryID } from './formatRegistry';
variableAdapters.setInit(() => [
(createQueryVariableAdapter() as unknown) as VariableAdapter,
@@ -660,6 +661,46 @@ describe('templateSrv', () => {
});
});
+ describe('adhoc variables', () => {
+ beforeEach(() => {
+ _templateSrv = initTemplateSrv([
+ {
+ type: 'adhoc',
+ name: 'adhoc',
+ filters: [
+ {
+ condition: '',
+ key: 'alertstate',
+ operator: '=',
+ value: 'firing',
+ },
+ {
+ condition: '',
+ key: 'alertname',
+ operator: '=',
+ value: 'ExampleAlertAlwaysFiring',
+ },
+ ],
+ },
+ ]);
+ });
+
+ it(`should not be handled by any registry items except for queryparam`, () => {
+ const registryItems = Object.values(FormatRegistryID);
+ for (const registryItem of registryItems) {
+ if (registryItem === FormatRegistryID.queryParam) {
+ continue;
+ }
+
+ const firstTarget = _templateSrv.replace(`\${adhoc:${registryItem}}`, {});
+ expect(firstTarget).toBe('');
+
+ const secondTarget = _templateSrv.replace('${adhoc}', {}, registryItem);
+ expect(secondTarget).toBe('');
+ }
+ });
+ });
+
describe('queryparam', () => {
beforeEach(() => {
_templateSrv = initTemplateSrv([
@@ -675,11 +716,29 @@ describe('templateSrv', () => {
current: { value: ['value1', 'value2'] },
options: [{ value: 'value1' }, { value: 'value2' }],
},
+ {
+ type: 'adhoc',
+ name: 'adhoc',
+ filters: [
+ {
+ condition: '',
+ key: 'alertstate',
+ operator: '=',
+ value: 'firing',
+ },
+ {
+ condition: '',
+ key: 'alertname',
+ operator: '=',
+ value: 'ExampleAlertAlwaysFiring',
+ },
+ ],
+ },
]);
});
it('query variable with single value with queryparam format should return correct queryparam', () => {
- const target = _templateSrv.replace('${single:queryparam}', {});
+ const target = _templateSrv.replace(`\${single:queryparam}`, {});
expect(target).toBe('var-single=value1');
});
@@ -689,7 +748,7 @@ describe('templateSrv', () => {
});
it('query variable with multi value with queryparam format should return correct queryparam', () => {
- const target = _templateSrv.replace('${multi:queryparam}', {});
+ const target = _templateSrv.replace(`\${multi:queryparam}`, {});
expect(target).toBe('var-multi=value1&var-multi=value2');
});
@@ -697,5 +756,15 @@ describe('templateSrv', () => {
const target = _templateSrv.replace('${multi}', {}, 'queryparam');
expect(target).toBe('var-multi=value1&var-multi=value2');
});
+
+ it('query variable with adhoc value with queryparam format should return correct queryparam', () => {
+ const target = _templateSrv.replace(`\${adhoc:queryparam}`, {});
+ expect(target).toBe('var-adhoc=alertstate%7C%3D%7Cfiring&var-adhoc=alertname%7C%3D%7CExampleAlertAlwaysFiring');
+ });
+
+ it('query variable with multi value and queryparam format should return correct queryparam', () => {
+ const target = _templateSrv.replace('${adhoc}', {}, 'queryparam');
+ expect(target).toBe('var-adhoc=alertstate%7C%3D%7Cfiring&var-adhoc=alertname%7C%3D%7CExampleAlertAlwaysFiring');
+ });
});
});
diff --git a/public/app/features/templating/template_srv.ts b/public/app/features/templating/template_srv.ts
index 0a5ceabd8c8..a642954d7eb 100644
--- a/public/app/features/templating/template_srv.ts
+++ b/public/app/features/templating/template_srv.ts
@@ -1,12 +1,13 @@
-import { isString, property, escape } from 'lodash';
+import { escape, isString, property } from 'lodash';
import { deprecationWarning, ScopedVars, TimeRange } from '@grafana/data';
import { getFilteredVariables, getVariables, getVariableWithName } from '../variables/state/selectors';
import { variableRegex } from '../variables/utils';
import { isAdHoc } from '../variables/guard';
import { VariableModel } from '../variables/types';
import { setTemplateSrv, TemplateSrv as BaseTemplateSrv } from '@grafana/runtime';
-import { FormatOptions, formatRegistry } from './formatRegistry';
+import { FormatOptions, formatRegistry, FormatRegistryID } from './formatRegistry';
import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from '../variables/state/types';
+import { safeStringifyValue } from '../../core/utils/explore';
interface FieldAccessorCache {
[key: string]: (obj: any) => any;
@@ -115,6 +116,10 @@ export class TemplateSrv implements BaseTemplateSrv {
return '';
}
+ if (isAdHoc(variable) && format !== FormatRegistryID.queryParam) {
+ return '';
+ }
+
// if it's an object transform value to string
if (!Array.isArray(value) && typeof value === 'object') {
value = `${value}`;
@@ -125,7 +130,7 @@ export class TemplateSrv implements BaseTemplateSrv {
}
if (!format) {
- format = 'glob';
+ format = FormatRegistryID.glob;
}
// some formats have arguments that come after ':' character
@@ -141,7 +146,7 @@ export class TemplateSrv implements BaseTemplateSrv {
if (!formatItem) {
console.error(`Variable format ${format} not found. Using glob format as fallback.`);
- formatItem = formatRegistry.get('glob');
+ formatItem = formatRegistry.get(FormatRegistryID.glob);
}
const options: FormatOptions = { value, args, text: text ?? value };
@@ -270,6 +275,13 @@ export class TemplateSrv implements BaseTemplateSrv {
return match;
}
+ if (isAdHoc(variable)) {
+ const value = safeStringifyValue(variable.filters);
+ const text = variable.id;
+
+ return this.formatValue(value, fmt, variable, text);
+ }
+
const systemValue = this.grafanaVariables[variable.current.value];
if (systemValue) {
return this.formatValue(systemValue, fmt, variable);
@@ -282,7 +294,7 @@ export class TemplateSrv implements BaseTemplateSrv {
value = this.getAllValue(variable);
text = ALL_VARIABLE_TEXT;
// skip formatting of custom all values
- if (variable.allValue && fmt !== 'text' && fmt !== 'queryparam') {
+ if (variable.allValue && fmt !== FormatRegistryID.text && fmt !== FormatRegistryID.queryParam) {
return this.replace(value);
}
}
diff --git a/public/app/features/users/UsersTable.tsx b/public/app/features/users/UsersTable.tsx
index 85e3cd18c1f..cac71231311 100644
--- a/public/app/features/users/UsersTable.tsx
+++ b/public/app/features/users/UsersTable.tsx
@@ -35,7 +35,7 @@ const UsersTable: FC = (props) => {
return (
- 
+
|
@@ -57,6 +57,7 @@ const UsersTable: FC = (props) => {
onRoleChange(newRole, user)}
@@ -65,7 +66,13 @@ const UsersTable: FC = (props) => {
{canRemoveFromOrg && (
|
- | | | | 
}
-