diff --git a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx index 19ba39db649..1a06d0ee475 100644 --- a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +++ b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx @@ -5,7 +5,6 @@ import { css } from '@emotion/css'; // Types import { DashboardModel } from '../../state'; -import { CoreEvents } from 'app/types'; // Components import { defaultIntervals, RefreshPicker, stylesFactory } from '@grafana/ui'; @@ -14,7 +13,8 @@ import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePicker // Utils & Services import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv'; import { appEvents } from 'app/core/core'; -import { ShiftTimeEvent, ShiftTimeEventPayload, ZoomOutEvent } from '../../../../types/events'; +import { ShiftTimeEvent, ShiftTimeEventPayload, TimeRangeUpdatedEvent, ZoomOutEvent } from '../../../../types/events'; +import { Unsubscribable } from 'rxjs'; export interface Props { dashboard: DashboardModel; @@ -22,21 +22,16 @@ export interface Props { } export class DashNavTimeControls extends Component { + private sub?: Unsubscribable; + componentDidMount() { - // Only reason for this is that sometimes time updates can happen via redux location changes - // and this happens before timeSrv has had chance to update state (as it listens to angular route-updated) - // This can be removed after timeSrv listens redux location - this.props.dashboard.on(CoreEvents.timeRangeUpdated, this.triggerForceUpdate); + this.sub = this.props.dashboard.events.subscribe(TimeRangeUpdatedEvent, () => this.forceUpdate()); } componentWillUnmount() { - this.props.dashboard.off(CoreEvents.timeRangeUpdated, this.triggerForceUpdate); + this.sub?.unsubscribe(); } - triggerForceUpdate = () => { - this.forceUpdate(); - }; - onChangeRefreshInterval = (interval: string) => { getTimeSrv().setAutoRefresh(interval); this.forceUpdate(); diff --git a/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx b/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx index bbcb3354b9f..96a46604631 100644 --- a/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx +++ b/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx @@ -1,5 +1,5 @@ -import React, { FC, useReducer } from 'react'; -import { Icon, IconName, Tooltip } from '@grafana/ui'; +import React, { FC } from 'react'; +import { Icon, IconName, Tooltip, useForceUpdate } from '@grafana/ui'; import { sanitizeUrl } from '@grafana/data/src/text/sanitize'; import { DashboardLinksDashboard } from './DashboardLinksDashboard'; import { getLinkSrv } from '../../../panel/panellinks/link_srv'; @@ -8,8 +8,8 @@ import { DashboardModel } from '../../state'; import { DashboardLink } from '../../state/DashboardModel'; import { linkIconMap } from '../LinksSettings/LinkSettingsEdit'; import { useEffectOnce } from 'react-use'; -import { CoreEvents } from 'app/types'; import { selectors } from '@grafana/e2e-selectors'; +import { TimeRangeUpdatedEvent } from 'app/types/events'; export interface Props { dashboard: DashboardModel; @@ -17,15 +17,11 @@ export interface Props { } export const DashboardLinks: FC = ({ dashboard, links }) => { - // Emulate forceUpdate (https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate) - const [, forceUpdate] = useReducer((x) => x + 1, 0); + const forceUpdate = useForceUpdate(); useEffectOnce(() => { - dashboard.on(CoreEvents.timeRangeUpdated, forceUpdate); - - return () => { - dashboard.off(CoreEvents.timeRangeUpdated, forceUpdate); - }; + const sub = dashboard.events.subscribe(TimeRangeUpdatedEvent, forceUpdate); + return () => sub.unsubscribe(); }); if (!links.length) { diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index 11a401e63de..7ec69c5fc52 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.tsx @@ -148,7 +148,7 @@ export class UnthemedDashboardPage extends PureComponent { const prevUrlParams = prevProps.queryParams; const urlParams = this.props.queryParams; - if (urlParams?.from !== prevUrlParams?.from && urlParams?.to !== prevUrlParams?.to) { + if (urlParams?.from !== prevUrlParams?.from || urlParams?.to !== prevUrlParams?.to) { getTimeSrv().updateTimeRangeFromUrl(); } diff --git a/public/app/features/dashboard/state/DashboardModel.ts b/public/app/features/dashboard/state/DashboardModel.ts index 073d336431e..462b9dfca0b 100644 --- a/public/app/features/dashboard/state/DashboardModel.ts +++ b/public/app/features/dashboard/state/DashboardModel.ts @@ -41,7 +41,7 @@ import { variableAdapters } from 'app/features/variables/adapters'; import { onTimeRangeUpdated } from 'app/features/variables/state/actions'; import { dispatch } from '../../../store/store'; import { isAllVariable } from '../../variables/utils'; -import { DashboardPanelsChangedEvent, RefreshEvent, RenderEvent } from 'app/types/events'; +import { DashboardPanelsChangedEvent, RefreshEvent, RenderEvent, TimeRangeUpdatedEvent } from 'app/types/events'; import { getTimeSrv } from '../services/TimeSrv'; export interface CloneOptions { @@ -318,7 +318,7 @@ export class DashboardModel { } timeRangeUpdated(timeRange: TimeRange) { - this.events.emit(CoreEvents.timeRangeUpdated, timeRange); + this.events.publish(new TimeRangeUpdatedEvent(timeRange)); dispatch(onTimeRangeUpdated(timeRange)); } diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts index 90673c52254..54a24833cb3 100644 --- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts +++ b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts @@ -16,9 +16,10 @@ import { auto } from 'angular'; import { getProcessedDataFrames } from 'app/features/query/state/runRequest'; import { DataProcessor } from '../graph/data_processor'; import { LegacyResponseData, PanelEvents, DataFrame, rangeUtil } from '@grafana/data'; -import { CoreEvents } from 'app/types'; import { TemplateSrv } from 'app/features/templating/template_srv'; import { TimeSrv } from 'app/features/dashboard/services/TimeSrv'; +import appEvents from 'app/core/app_events'; +import { ZoomOutEvent } from 'app/types/events'; const X_BUCKET_NUMBER_DEFAULT = 30; const Y_BUCKET_NUMBER_DEFAULT = 10; @@ -160,7 +161,7 @@ export class HeatmapCtrl extends MetricsPanelCtrl { } zoomOut(evt: any) { - this.publishAppEvent(CoreEvents.zoomOut, 2); + appEvents.publish(new ZoomOutEvent(2)); } onRender() { diff --git a/public/app/types/events.ts b/public/app/types/events.ts index 875634d4028..77bc4911a6a 100644 --- a/public/app/types/events.ts +++ b/public/app/types/events.ts @@ -90,30 +90,18 @@ export interface PanelChangeViewPayload {} * Events */ -export const dashLinksUpdated = eventFactory('dash-links-updated'); -export const searchQuery = eventFactory('search-query'); - export const dsRequestResponse = eventFactory('ds-request-response'); export const dsRequestError = eventFactory('ds-request-error'); - export const toggleSidemenuMobile = eventFactory('toggle-sidemenu-mobile'); export const toggleSidemenuHidden = eventFactory('toggle-sidemenu-hidden'); - -export const toggleKioskMode = eventFactory('toggle-kiosk-mode'); - -export const timeRangeUpdated = eventFactory('time-range-updated'); export const templateVariableValueUpdated = eventFactory('template-variable-value-updated'); - export const graphClicked = eventFactory('graph-click'); +/** + * @internal + */ export const thresholdChanged = eventFactory('threshold-changed'); -export const zoomOut = eventFactory('zoom-out'); - -export const shiftTime = eventFactory('shift-time'); - -export const routeUpdated = eventFactory('$routeUpdate'); - /** * Used for syncing queries badge count in panel edit queries tab * Think we can get rid of this soon @@ -209,3 +197,7 @@ export class AnnotationQueryStarted extends BusEventWithPayload export class AnnotationQueryFinished extends BusEventWithPayload { static type = 'annotation-query-finished'; } + +export class TimeRangeUpdatedEvent extends BusEventWithPayload { + static type = 'time-range-updated'; +}