From f97384c2f9de148c69e96e698c52f68f546bcea1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= Date: Mon, 15 Mar 2021 15:11:52 +0100 Subject: [PATCH] Replace AppEvents with notifyApp in Explore (#31864) * Replace AppEvents with notifyApp in Explore * Replace AppEvents with notifyApp in Explore-related components --- public/app/core/utils/richHistory.ts | 14 ++++++++------ public/app/core/utils/shortLinks.ts | 11 ++++++----- .../app/features/explore/ExploreQueryInspector.tsx | 8 +++++--- .../explore/RichHistory/RichHistoryCard.tsx | 11 +++++++---- .../explore/RichHistory/RichHistorySettings.tsx | 7 +++++-- .../cloudwatch/components/LogsQueryField.tsx | 8 +++++--- .../app/plugins/datasource/jaeger/QueryField.tsx | 12 +++++++----- .../app/plugins/datasource/zipkin/QueryField.tsx | 12 +++++++----- 8 files changed, 50 insertions(+), 33 deletions(-) diff --git a/public/app/core/utils/richHistory.ts b/public/app/core/utils/richHistory.ts index 972d7fb1460..b2ba4bb76f4 100644 --- a/public/app/core/utils/richHistory.ts +++ b/public/app/core/utils/richHistory.ts @@ -2,9 +2,11 @@ import _ from 'lodash'; // Services & Utils -import { DataQuery, DataSourceApi, dateTimeFormat, AppEvents, urlUtil, ExploreUrlState } from '@grafana/data'; -import appEvents from 'app/core/app_events'; +import { DataQuery, DataSourceApi, dateTimeFormat, urlUtil, ExploreUrlState } from '@grafana/data'; import store from 'app/core/store'; +import { dispatch } from 'app/store/store'; +import { notifyApp } from 'app/core/actions'; +import { createErrorNotification } from 'app/core/copy/appNotification'; // Types import { RichHistoryQuery } from 'app/types/explore'; @@ -76,7 +78,7 @@ export function addToRichHistory( store.setObject(RICH_HISTORY_KEY, updatedHistory); return updatedHistory; } catch (error) { - appEvents.emit(AppEvents.alertError, [error]); + dispatch(notifyApp(createErrorNotification(error))); return richHistory; } } @@ -109,7 +111,7 @@ export function updateStarredInRichHistory(richHistory: RichHistoryQuery[], ts: store.setObject(RICH_HISTORY_KEY, updatedHistory); return updatedHistory; } catch (error) { - appEvents.emit(AppEvents.alertError, [error]); + dispatch(notifyApp(createErrorNotification(error))); return richHistory; } } @@ -131,7 +133,7 @@ export function updateCommentInRichHistory( store.setObject(RICH_HISTORY_KEY, updatedHistory); return updatedHistory; } catch (error) { - appEvents.emit(AppEvents.alertError, [error]); + dispatch(notifyApp(createErrorNotification(error))); return richHistory; } } @@ -142,7 +144,7 @@ export function deleteQueryInRichHistory(richHistory: RichHistoryQuery[], ts: nu store.setObject(RICH_HISTORY_KEY, updatedHistory); return updatedHistory; } catch (error) { - appEvents.emit(AppEvents.alertError, [error]); + dispatch(notifyApp(createErrorNotification(error))); return richHistory; } } diff --git a/public/app/core/utils/shortLinks.ts b/public/app/core/utils/shortLinks.ts index c1bae64991a..07430542dc8 100644 --- a/public/app/core/utils/shortLinks.ts +++ b/public/app/core/utils/shortLinks.ts @@ -1,8 +1,9 @@ import memoizeOne from 'memoize-one'; import { getBackendSrv, config } from '@grafana/runtime'; -import { AppEvents } from '@grafana/data'; -import appEvents from 'app/core/app_events'; import { copyStringToClipboard } from './explore'; +import { dispatch } from 'app/store/store'; +import { notifyApp } from 'app/core/actions'; +import { createErrorNotification, createSuccessNotification } from 'app/core/copy/appNotification'; function buildHostUrl() { return `${window.location.protocol}//${window.location.host}${config.appSubUrl}`; @@ -21,7 +22,7 @@ export const createShortLink = memoizeOne(async function (path: string) { return shortLink.url; } catch (err) { console.error('Error when creating shortened link: ', err); - appEvents.emit(AppEvents.alertError, ['Error generating shortened link']); + dispatch(notifyApp(createErrorNotification('Error generating shortened link'))); } }); @@ -29,8 +30,8 @@ export const createAndCopyShortLink = async (path: string) => { const shortLink = await createShortLink(path); if (shortLink) { copyStringToClipboard(shortLink); - appEvents.emit(AppEvents.alertSuccess, ['Shortened link copied to clipboard']); + dispatch(notifyApp(createSuccessNotification('Shortened link copied to clipboard'))); } else { - appEvents.emit(AppEvents.alertError, ['Error generating shortened link']); + dispatch(notifyApp(createErrorNotification('Error generating shortened link'))); } }; diff --git a/public/app/features/explore/ExploreQueryInspector.tsx b/public/app/features/explore/ExploreQueryInspector.tsx index 824f8221407..f1c5d1e9ab9 100644 --- a/public/app/features/explore/ExploreQueryInspector.tsx +++ b/public/app/features/explore/ExploreQueryInspector.tsx @@ -1,8 +1,7 @@ import React, { useState } from 'react'; import { Button, JSONFormatter, LoadingPlaceholder, TabbedContainer, TabConfig } from '@grafana/ui'; -import { AppEvents, PanelData, TimeZone } from '@grafana/data'; +import { PanelData, TimeZone } from '@grafana/data'; -import appEvents from 'app/core/app_events'; import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard'; import { StoreState, ExploreItemState, ExploreId } from 'app/types'; import { hot } from 'react-hot-loader'; @@ -12,6 +11,9 @@ import { useEffectOnce } from 'react-use'; import { getBackendSrv } from 'app/core/services/backend_srv'; import { InspectStatsTab } from '../dashboard/components/Inspector/InspectStatsTab'; import { getPanelInspectorStyles } from '../dashboard/components/Inspector/styles'; +import { dispatch } from 'app/store/store'; +import { notifyApp } from 'app/core/actions'; +import { createSuccessNotification } from 'app/core/copy/appNotification'; function stripPropsFromResponse(response: any) { // ignore silent requests and return early @@ -73,7 +75,7 @@ export function ExploreQueryInspector(props: Props) { }; const onClipboardSuccess = () => { - appEvents.emit(AppEvents.alertSuccess, ['Content copied to clipboard']); + dispatch(notifyApp(createSuccessNotification('Content copied to clipboard'))); }; const [allNodesExpanded, setAllNodesExpanded] = useState(false); diff --git a/public/app/features/explore/RichHistory/RichHistoryCard.tsx b/public/app/features/explore/RichHistory/RichHistoryCard.tsx index 1c18adfae4d..9afb595ac5c 100644 --- a/public/app/features/explore/RichHistory/RichHistoryCard.tsx +++ b/public/app/features/explore/RichHistory/RichHistoryCard.tsx @@ -4,12 +4,15 @@ import { hot } from 'react-hot-loader'; import { css, cx } from 'emotion'; import { stylesFactory, useTheme, TextArea, Button, IconButton } from '@grafana/ui'; import { getDataSourceSrv } from '@grafana/runtime'; -import { GrafanaTheme, AppEvents, DataSourceApi } from '@grafana/data'; +import { GrafanaTheme, DataSourceApi } from '@grafana/data'; import { RichHistoryQuery, ExploreId } from 'app/types/explore'; import { createUrlFromRichHistory, createQueryText } from 'app/core/utils/richHistory'; import { createAndCopyShortLink } from 'app/core/utils/shortLinks'; import { copyStringToClipboard } from 'app/core/utils/explore'; import appEvents from 'app/core/app_events'; +import { dispatch } from 'app/store/store'; +import { notifyApp } from 'app/core/actions'; +import { createSuccessNotification } from 'app/core/copy/appNotification'; import { StoreState } from 'app/types'; import { updateRichHistory } from '../state/history'; @@ -179,7 +182,7 @@ export function RichHistoryCard(props: Props) { const onCopyQuery = () => { const queriesToCopy = query.queries.map((q) => createQueryText(q, queryDsInstance)).join('\n'); copyStringToClipboard(queriesToCopy); - appEvents.emit(AppEvents.alertSuccess, ['Query copied to clipboard']); + dispatch(notifyApp(createSuccessNotification('Query copied to clipboard'))); }; const onCreateShortLink = async () => { @@ -198,13 +201,13 @@ export function RichHistoryCard(props: Props) { icon: 'trash-alt', onConfirm: () => { updateRichHistory(query.ts, 'delete'); - appEvents.emit(AppEvents.alertSuccess, ['Query deleted']); + dispatch(notifyApp(createSuccessNotification('Query deleted'))); }, }) ); } else { updateRichHistory(query.ts, 'delete'); - appEvents.emit(AppEvents.alertSuccess, ['Query deleted']); + dispatch(notifyApp(createSuccessNotification('Query deleted'))); } }; diff --git a/public/app/features/explore/RichHistory/RichHistorySettings.tsx b/public/app/features/explore/RichHistory/RichHistorySettings.tsx index 4faec840871..6ab3a959b17 100644 --- a/public/app/features/explore/RichHistory/RichHistorySettings.tsx +++ b/public/app/features/explore/RichHistory/RichHistorySettings.tsx @@ -1,9 +1,12 @@ import React from 'react'; import { css } from 'emotion'; import { stylesFactory, useTheme, Select, Button, Switch, Field } from '@grafana/ui'; -import { GrafanaTheme, AppEvents } from '@grafana/data'; +import { GrafanaTheme } from '@grafana/data'; import appEvents from 'app/core/app_events'; import { ShowConfirmModalEvent } from '../../../types/events'; +import { dispatch } from 'app/store/store'; +import { notifyApp } from 'app/core/actions'; +import { createSuccessNotification } from 'app/core/copy/appNotification'; export interface RichHistorySettingsProps { retentionPeriod: number; @@ -67,7 +70,7 @@ export function RichHistorySettings(props: RichHistorySettingsProps) { icon: 'trash-alt', onConfirm: () => { deleteRichHistory(); - appEvents.emit(AppEvents.alertSuccess, ['Query history deleted']); + dispatch(notifyApp(createSuccessNotification('Query history deleted'))); }, }) ); diff --git a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx index 4badb8f16df..2259c334517 100644 --- a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx @@ -21,14 +21,16 @@ import { Editor, Node, Plugin } from 'slate'; import syntax from '../syntax'; // Types -import { AbsoluteTimeRange, AppEvents, ExploreQueryFieldProps, SelectableValue } from '@grafana/data'; +import { AbsoluteTimeRange, ExploreQueryFieldProps, SelectableValue } from '@grafana/data'; import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery } from '../types'; import { CloudWatchDatasource } from '../datasource'; import { LanguageMap, languages as prismLanguages } from 'prismjs'; import { CloudWatchLanguageProvider } from '../language_provider'; import { css } from 'emotion'; import { ExploreId } from 'app/types'; -import { appEvents } from 'app/core/core'; +import { dispatch } from 'app/store/store'; +import { notifyApp } from 'app/core/actions'; +import { createErrorNotification } from 'app/core/copy/appNotification'; import { InputActionMeta } from '@grafana/ui/src/components/Select/types'; import { getStatsGroups } from '../utils/query/getStatsGroups'; @@ -119,7 +121,7 @@ export class CloudWatchLogsQueryField extends React.PureComponent { this.setState({ serviceOptions }); } } catch (error) { - appEvents.emit(AppEvents.alertError, ['Failed to load services from Jaeger', error]); + dispatch(notifyApp(createErrorNotification('Failed to load services from Jaeger', error))); } } @@ -153,7 +155,7 @@ export class JaegerQueryField extends React.PureComponent { try { return await datasource.metadataRequest(url); } catch (error) { - appEvents.emit(AppEvents.alertError, ['Failed to load operations from Jaeger', error]); + dispatch(notifyApp(createErrorNotification('Failed to load operations from Jaeger', error))); } return []; }; @@ -176,7 +178,7 @@ export class JaegerQueryField extends React.PureComponent { try { return await datasource.metadataRequest(url, traceSearch); } catch (error) { - appEvents.emit(AppEvents.alertError, ['Failed to load traces from Jaeger', error]); + dispatch(notifyApp(createErrorNotification('Failed to load traces from Jaeger', error))); } return []; }; diff --git a/public/app/plugins/datasource/zipkin/QueryField.tsx b/public/app/plugins/datasource/zipkin/QueryField.tsx index 3575433fc39..c4eaf371b72 100644 --- a/public/app/plugins/datasource/zipkin/QueryField.tsx +++ b/public/app/plugins/datasource/zipkin/QueryField.tsx @@ -1,14 +1,16 @@ -import { AppEvents, ExploreQueryFieldProps } from '@grafana/data'; +import { ExploreQueryFieldProps } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; import { ButtonCascader, CascaderOption } from '@grafana/ui'; import { fromPairs } from 'lodash'; import React, { useCallback, useMemo, useState } from 'react'; import { useAsyncFn, useMount, useMountedState } from 'react-use'; import { AsyncState } from 'react-use/lib/useAsyncFn'; -import { appEvents } from '../../../core/core'; import { apiPrefix } from './constants'; import { ZipkinDatasource, ZipkinQuery } from './datasource'; import { ZipkinSpan } from './types'; +import { dispatch } from 'app/store/store'; +import { notifyApp } from 'app/core/actions'; +import { createErrorNotification } from 'app/core/copy/appNotification'; type Props = ExploreQueryFieldProps; @@ -74,7 +76,7 @@ export function useServices(datasource: ZipkinDatasource): AsyncState