diff --git a/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx b/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx index b364eca3..d61b7882 100644 --- a/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx +++ b/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx @@ -51,7 +51,11 @@ const UsersTimezones: FC = (props) => { [userIds, store.userStore.items] ); - const currentMoment = useMemo(() => dayjs().tz(tz), [tz]); + const currentMoment = useMemo(() => { + console.log({ tz }); + console.log(dayjs().format()); + return dayjs().tz(tz); + }, [tz]); const currentTimeX = useMemo(() => { const midnight = dayjs().tz(tz).startOf('day'); diff --git a/grafana-plugin/src/pages/incident/Incident.tsx b/grafana-plugin/src/pages/incident/Incident.tsx index c6377277..585da6d5 100644 --- a/grafana-plugin/src/pages/incident/Incident.tsx +++ b/grafana-plugin/src/pages/incident/Incident.tsx @@ -1,6 +1,5 @@ import React, { useState, SyntheticEvent } from 'react'; -import { AppRootProps } from '@grafana/data'; import { getLocationSrv } from '@grafana/runtime'; import { Button, @@ -49,8 +48,7 @@ import { } from 'models/alertgroup/alertgroup.types'; import { ResolutionNoteSourceTypesToDisplayName } from 'models/resolution_note/resolution_note.types'; import { pages } from 'pages'; -import { getQueryParams } from 'plugin/GrafanaPluginRootPage.helpers'; -import { WithStoreProps } from 'state/types'; +import { PageProps, WithStoreProps } from 'state/types'; import { useStore } from 'state/useStore'; import { UserAction } from 'state/userAction'; import { withMobXProviderContext } from 'state/withStore'; @@ -63,7 +61,7 @@ import styles from './Incident.module.css'; const cx = cn.bind(styles); -interface IncidentPageProps extends WithStoreProps, AppRootProps {} +interface IncidentPageProps extends WithStoreProps, PageProps {} interface IncidentPageState extends PageBaseState { showIntegrationSettings?: boolean; @@ -97,8 +95,10 @@ class IncidentPage extends React.Component update = () => { this.setState({ errorData: initErrorDataState() }); // reset wrong team error to false - const { store } = this.props; - const { id } = getQueryParams(); + const { + store, + query: { id }, + } = this.props; store.alertGroupStore .getAlert(id) @@ -106,8 +106,10 @@ class IncidentPage extends React.Component }; render() { - const { store } = this.props; - const { id, cursor, start, perpage } = getQueryParams(); + const { + store, + query: { id, cursor, start, perpage }, + } = this.props; const { errorData, showIntegrationSettings, showAttachIncidentForm } = this.state; const { isNotFoundError, isWrongTeamError } = errorData; @@ -192,9 +194,11 @@ class IncidentPage extends React.Component } renderHeader = () => { - const { store } = this.props; + const { + store, + query: { id, cursor, start, perpage }, + } = this.props; - const { id, cursor, start, perpage } = getQueryParams(); const { alerts } = store.alertGroupStore; const incident = alerts.get(id); @@ -311,9 +315,11 @@ class IncidentPage extends React.Component }; renderTimeline = () => { - const { store } = this.props; + const { + store, + query: { id }, + } = this.props; - const { id } = getQueryParams(); const incident = store.alertGroupStore.alerts.get(id); if (!incident.render_after_resolve_report_json) { @@ -401,9 +407,11 @@ class IncidentPage extends React.Component }; handleCreateResolutionNote = () => { - const { store } = this.props; + const { + store, + query: { id }, + } = this.props; - const { id } = getQueryParams(); const { resolutionNoteText } = this.state; store.resolutionNotesStore .createResolutionNote(id, resolutionNoteText) diff --git a/grafana-plugin/src/pages/incidents/Incidents.tsx b/grafana-plugin/src/pages/incidents/Incidents.tsx index 718251b5..1c24889f 100644 --- a/grafana-plugin/src/pages/incidents/Incidents.tsx +++ b/grafana-plugin/src/pages/incidents/Incidents.tsx @@ -1,6 +1,5 @@ import React, { ReactElement, SyntheticEvent } from 'react'; -import { AppRootProps } from '@grafana/data'; import { getLocationSrv } from '@grafana/runtime'; import { Button, Icon, Tooltip, VerticalGroup, LoadingPlaceholder, HorizontalGroup } from '@grafana/ui'; import { PluginPage } from 'PluginPage'; @@ -25,9 +24,8 @@ import { Alert, Alert as AlertType, AlertAction } from 'models/alertgroup/alertg import { User } from 'models/user/user.types'; import { pages } from 'pages'; import { getActionButtons, getIncidentStatusTag, renderRelatedUsers } from 'pages/incident/Incident.helpers'; -import { getQueryParams } from 'plugin/GrafanaPluginRootPage.helpers'; import { move } from 'state/helpers'; -import { WithStoreProps } from 'state/types'; +import { PageProps, WithStoreProps } from 'state/types'; import { UserAction } from 'state/userAction'; import { withMobXProviderContext } from 'state/withStore'; @@ -54,7 +52,7 @@ function withSkeleton(fn: (alert: AlertType) => ReactElement | ReactElement[]) { return WithSkeleton; } -interface IncidentsPageProps extends WithStoreProps, AppRootProps {} +interface IncidentsPageProps extends WithStoreProps, PageProps {} interface IncidentsPageState { selectedIncidentIds: Array; @@ -71,8 +69,10 @@ class Incidents extends React.Component constructor(props: IncidentsPageProps) { super(props); - const { store } = props; - const { cursor: cursorQuery, start: startQuery, perpage: perpageQuery } = getQueryParams(); + const { + store, + query: { cursor: cursorQuery, start: startQuery, perpage: perpageQuery }, + } = props; const cursor = cursorQuery || undefined; const start = !isNaN(startQuery) ? Number(startQuery) : 1; diff --git a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx index 6435f10e..c12ff9dd 100644 --- a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx +++ b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { AppRootProps } from '@grafana/data'; import { getLocationSrv } from '@grafana/runtime'; import { Button, HorizontalGroup } from '@grafana/ui'; import { PluginPage } from 'PluginPage'; @@ -22,8 +21,7 @@ import { WithPermissionControl } from 'containers/WithPermissionControl/WithPerm import { ActionDTO } from 'models/action'; import { OutgoingWebhook } from 'models/outgoing_webhook/outgoing_webhook.types'; import { pages } from 'pages'; -import { getQueryParams } from 'plugin/GrafanaPluginRootPage.helpers'; -import { WithStoreProps } from 'state/types'; +import { PageProps, WithStoreProps } from 'state/types'; import { UserAction } from 'state/userAction'; import { withMobXProviderContext } from 'state/withStore'; @@ -31,7 +29,7 @@ import styles from './OutgoingWebhooks.module.css'; const cx = cn.bind(styles); -interface OutgoingWebhooksProps extends WithStoreProps, AppRootProps {} +interface OutgoingWebhooksProps extends WithStoreProps, PageProps {} interface OutgoingWebhooksState extends PageBaseState { outgoingWebhookIdToEdit?: OutgoingWebhook['id'] | 'new'; @@ -43,14 +41,12 @@ class OutgoingWebhooks extends React.Component } async componentDidMount() { - const { store } = this.props; - const { id } = getQueryParams(); + const { + store, + query: { id }, + } = this.props; store.userStore.updateItems(); @@ -87,8 +87,10 @@ class SchedulePage extends React.Component } render() { - const { store } = this.props; - const { id: scheduleId } = getQueryParams(); + const { + store, + query: { id: scheduleId }, + } = this.props; const { startMoment, @@ -299,8 +301,10 @@ class SchedulePage extends React.Component }; updateEvents = () => { - const { store } = this.props; - const { id: scheduleId } = getQueryParams(); + const { + store, + query: { id: scheduleId }, + } = this.props; const { startMoment } = this.state; @@ -424,8 +428,10 @@ class SchedulePage extends React.Component }; updateEventsFor = async (scheduleId: Schedule['id'], withEmpty = true, with_gap = true) => { - const { store } = this.props; - const { id } = getQueryParams(); + const { + store, + query: { id }, + } = this.props; const { scheduleStore } = store; @@ -444,8 +450,10 @@ class SchedulePage extends React.Component }; handleDelete = () => { - const { store } = this.props; - const { id: scheduleId } = getQueryParams(); + const { + store, + query: { id: scheduleId }, + } = this.props; store.scheduleStore.delete(scheduleId).then(() => { getLocationSrv().update({ query: { page: 'schedules' } }); diff --git a/grafana-plugin/src/pages/users/Users.tsx b/grafana-plugin/src/pages/users/Users.tsx index c4a6458d..2e93a12b 100644 --- a/grafana-plugin/src/pages/users/Users.tsx +++ b/grafana-plugin/src/pages/users/Users.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { AppRootProps } from '@grafana/data'; import { getLocationSrv } from '@grafana/runtime'; import { Alert, Button, HorizontalGroup, Icon, VerticalGroup } from '@grafana/ui'; import { PluginPage } from 'PluginPage'; @@ -24,8 +23,7 @@ import { WithPermissionControl } from 'containers/WithPermissionControl/WithPerm import { getRole } from 'models/user/user.helpers'; import { User as UserType, UserRole } from 'models/user/user.types'; import { pages } from 'pages'; -import { getQueryParams } from 'plugin/GrafanaPluginRootPage.helpers'; -import { WithStoreProps } from 'state/types'; +import { PageProps, WithStoreProps } from 'state/types'; import { UserAction } from 'state/userAction'; import { withMobXProviderContext } from 'state/withStore'; @@ -35,7 +33,7 @@ import styles from './Users.module.css'; const cx = cn.bind(styles); -interface UsersProps extends WithStoreProps, AppRootProps {} +interface UsersProps extends WithStoreProps, PageProps {} const ITEMS_PER_PAGE = 100; @@ -65,10 +63,10 @@ class Users extends React.Component { initialUsersLoaded = false; - private userId: string; - async componentDidMount() { - const { p } = getQueryParams(); + const { + query: { p }, + } = this.props; this.setState({ page: p ? Number(p) : 1 }, this.updateUsers); this.parseParams(); @@ -87,7 +85,7 @@ class Users extends React.Component { return await userStore.updateItems(getRealFilters(usersFilters), page); }; - componentDidUpdate() { + componentDidUpdate(prevProps: UsersProps) { const { store } = this.props; if (!this.initialUsersLoaded && store.isUserActionAllowed(UserAction.ViewOtherUsers)) { @@ -95,7 +93,7 @@ class Users extends React.Component { this.initialUsersLoaded = true; } - if (this.userId !== getQueryParams()['id']) { + if (prevProps.query.id !== this.props.query.id) { this.parseParams(); } } @@ -103,10 +101,10 @@ class Users extends React.Component { parseParams = async () => { this.setState({ errorData: initErrorDataState() }); // reset wrong team error to false on query parse - const { store } = this.props; - const { id } = getQueryParams(); - - this.userId = id; + const { + store, + query: { id }, + } = this.props; if (id) { await (id === 'me' ? store.userStore.loadCurrentUser() : store.userStore.loadUser(String(id), true)).catch( diff --git a/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx b/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx index 416b0767..a1565375 100644 --- a/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx +++ b/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx @@ -37,7 +37,7 @@ import 'style/vars.css'; import 'style/global.css'; import 'style/utils.css'; -import { isTopNavbar } from './GrafanaPluginRootPage.helpers'; +import { getQueryParams, isTopNavbar } from './GrafanaPluginRootPage.helpers'; export const GrafanaPluginRootPage = (props: AppRootProps) => ( @@ -156,7 +156,7 @@ export const Root = observer((props: AppRootProps) => { 'u-position-relative' )} > - + ); diff --git a/grafana-plugin/src/state/types.ts b/grafana-plugin/src/state/types.ts index 642df664..5cbc2fa6 100644 --- a/grafana-plugin/src/state/types.ts +++ b/grafana-plugin/src/state/types.ts @@ -1,9 +1,15 @@ +import { AppPluginMeta, KeyValue } from '@grafana/data'; import { RootStore } from 'state/index'; export interface WithStoreProps { store: RootStore; } +export interface PageProps { + meta: AppPluginMeta; + query: KeyValue +} + export interface SelectOption { value: string | number; display_name: string;