- {errorData.isNotFoundError ? (
-
-
- 404
- Incident not found
-
-
- Go to incidents page
-
-
-
-
- ) : (
- <>
- {this.renderHeader()}
-
-
-
{this.renderTimeline()}
+ {() => (
+
+ {errorData.isNotFoundError ? (
+
+
+ 404
+ Incident not found
+
+
+ Go to incidents page
+
+
+
- {showIntegrationSettings && (
-
{
- alertReceiveChannelStore.updateItem(incident.alert_receive_channel.id);
- }}
- onUpdateTemplates={() => {
- store.alertGroupStore.getAlert(id);
- }}
- startTab={IntegrationSettingsTab.Templates}
- id={incident.alert_receive_channel.id}
- onHide={() =>
- this.setState({
- showIntegrationSettings: undefined,
- })
- }
- />
- )}
- {showAttachIncidentForm && (
- {
- this.setState({
- showAttachIncidentForm: false,
- });
- }}
- onUpdate={this.update}
- />
- )}
-
- )}
-
+ ) : (
+ <>
+ {this.renderHeader()}
+
+
+
{this.renderTimeline()}
+
+ {showIntegrationSettings && (
+
{
+ alertReceiveChannelStore.updateItem(incident.alert_receive_channel.id);
+ }}
+ onUpdateTemplates={() => {
+ store.alertGroupStore.getAlert(id);
+ }}
+ startTab={IntegrationSettingsTab.Templates}
+ id={incident.alert_receive_channel.id}
+ onHide={() =>
+ this.setState({
+ showIntegrationSettings: undefined,
+ })
+ }
+ />
+ )}
+ {showAttachIncidentForm && (
+ {
+ this.setState({
+ showAttachIncidentForm: false,
+ });
+ }}
+ onUpdate={this.update}
+ />
+ )}
+
+ )}
+
+ )}
);
}
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 +317,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 +409,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)
@@ -419,9 +429,7 @@ class IncidentPage extends React.Component
case 'author':
return (
{
- getLocationSrv().update({ query: { page: 'users', id: entity?.author?.pk } });
- }}
+ onClick={() => LocationHelper.update({ id: entity?.author?.pk, page: 'users' }, 'replace')}
style={{ textDecoration: 'underline', cursor: 'pointer' }}
>
{entity.author?.username}
diff --git a/grafana-plugin/src/pages/incidents/Incidents.tsx b/grafana-plugin/src/pages/incidents/Incidents.tsx
index 3ef595a6..198c2da4 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 { getLocationSrv } from '@grafana/runtime';
import { Button, Icon, Tooltip, VerticalGroup, LoadingPlaceholder, HorizontalGroup } from '@grafana/ui';
import { PluginPage } from 'PluginPage';
import cn from 'classnames/bind';
@@ -8,12 +7,10 @@ import { get } from 'lodash-es';
import { observer } from 'mobx-react';
import moment from 'moment-timezone';
import Emoji from 'react-emoji-render';
-import { AppRootProps } from 'types';
import CursorPagination from 'components/CursorPagination/CursorPagination';
import GTable from 'components/GTable/GTable';
import IntegrationLogo from 'components/IntegrationLogo/IntegrationLogo';
-import PageErrorHandlingWrapper from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper';
import PluginLink from 'components/PluginLink/PluginLink';
import Text from 'components/Text/Text';
import Tutorial from 'components/Tutorial/Tutorial';
@@ -25,11 +22,11 @@ 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';
+import LocationHelper from 'utils/LocationHelper';
import SilenceDropdown from './parts/SilenceDropdown';
@@ -54,7 +51,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 +68,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;
@@ -103,12 +102,10 @@ class Incidents extends React.Component
render() {
return (
-
-
- {this.renderIncidentFilters()}
- {this.renderTable()}
-
-
+
+ {this.renderIncidentFilters()}
+ {this.renderTable()}
+
);
}
@@ -148,7 +145,7 @@ class Incidents extends React.Component
fetchIncidentData = (filters: IncidentsFiltersType, isOnMount: boolean) => {
const { store } = this.props;
store.alertGroupStore.updateIncidentFilters(filters, isOnMount); // this line fetches incidents
- getLocationSrv().update({ query: { page: 'incidents', ...store.alertGroupStore.incidentFilters } });
+ LocationHelper.update({ page: 'incidents', ...store.alertGroupStore.incidentFilters }, 'partial');
};
onChangeCursor = (cursor: string, direction: 'prev' | 'next') => {
@@ -577,7 +574,9 @@ class Incidents extends React.Component
}
setPollingInterval(filters: IncidentsFiltersType = this.state.filters, isOnMount = false) {
- this.pollingIntervalId = setInterval(() => this.fetchIncidentData(filters, isOnMount), POLLING_NUM_SECONDS * 1000);
+ this.pollingIntervalId = setInterval(() => {
+ this.fetchIncidentData(filters, isOnMount);
+ }, POLLING_NUM_SECONDS * 1000);
}
}
diff --git a/grafana-plugin/src/pages/index.tsx b/grafana-plugin/src/pages/index.tsx
index b3fa2499..a837581a 100644
--- a/grafana-plugin/src/pages/index.tsx
+++ b/grafana-plugin/src/pages/index.tsx
@@ -101,7 +101,7 @@ export const pages: { [id: string]: PageDefinition } = [
{
icon: 'cog',
id: 'settings',
- text: 'Organization Settings',
+ text: 'Settings',
hideFromBreadcrumbs: true,
path: getPath('settings'),
},
diff --git a/grafana-plugin/src/pages/integrations/Integrations.tsx b/grafana-plugin/src/pages/integrations/Integrations.tsx
index e3a759b4..a5fb20c4 100644
--- a/grafana-plugin/src/pages/integrations/Integrations.tsx
+++ b/grafana-plugin/src/pages/integrations/Integrations.tsx
@@ -1,12 +1,10 @@
import React from 'react';
-import { getLocationSrv } from '@grafana/runtime';
import { Button, LoadingPlaceholder, VerticalGroup } from '@grafana/ui';
import { PluginPage } from 'PluginPage';
import cn from 'classnames/bind';
import { debounce } from 'lodash-es';
import { observer } from 'mobx-react';
-import { AppRootProps } from 'types';
import GList from 'components/GList/GList';
import IntegrationsFilters, { Filters } from 'components/IntegrationsFilters/IntegrationsFilters';
@@ -27,9 +25,10 @@ import { WithPermissionControl } from 'containers/WithPermissionControl/WithPerm
import { AlertReceiveChannel } from 'models/alert_receive_channel';
import { AlertReceiveChannelOption } from 'models/alert_receive_channel/alert_receive_channel.types';
import { pages } from 'pages';
-import { WithStoreProps } from 'state/types';
+import { PageProps, WithStoreProps } from 'state/types';
import { UserAction } from 'state/userAction';
import { withMobXProviderContext } from 'state/withStore';
+import LocationHelper from 'utils/LocationHelper';
import styles from './Integrations.module.css';
@@ -42,7 +41,7 @@ interface IntegrationsState extends PageBaseState {
integrationSettingsTab?: IntegrationSettingsTab;
}
-interface IntegrationsProps extends WithStoreProps, AppRootProps {}
+interface IntegrationsProps extends WithStoreProps, PageProps {}
@observer
class Integrations extends React.Component {
@@ -62,7 +61,7 @@ class Integrations extends React.Component
setSelectedAlertReceiveChannel = (alertReceiveChannelId: AlertReceiveChannel['id']) => {
const { store } = this.props;
store.selectedAlertReceiveChannel = alertReceiveChannelId;
- getLocationSrv().update({ partial: true, query: { id: alertReceiveChannelId } });
+ LocationHelper.update({ id: alertReceiveChannelId }, 'partial');
};
parseQueryParams = async () => {
@@ -139,110 +138,112 @@ class Integrations extends React.Component
pageName="integrations"
itemNotFoundMessage={`Integration with id=${query?.id} is not found. Please select integration from the list.`}
>
- <>
-
-
-
- {searchResult?.length ? (
-
-
-
- {
- this.setState({ showCreateIntegrationModal: true });
- }}
- icon="plus"
- className={cx('newIntegrationButton')}
- >
- New integration for receiving alerts
-
-
-
-
- {(item) => (
- {
- this.setState({
- alertReceiveChannelToShowSettings: item.id,
- integrationSettingsTab: IntegrationSettingsTab.Heartbeat,
- });
- }}
- />
- )}
-
-
-
-
-
{
- this.setState({
- alertReceiveChannelToShowSettings: store.selectedAlertReceiveChannel,
- integrationSettingsTab,
- });
- }}
- />
-
+ {() => (
+ <>
+
+
+
- ) : searchResult ? (
-
- No integrations found. Review your filter and team settings.
+ {searchResult?.length ? (
+
+
{
this.setState({ showCreateIntegrationModal: true });
}}
+ icon="plus"
+ className={cx('newIntegrationButton')}
>
New integration for receiving alerts
-
- }
+
+
+ {(item) => (
+ {
+ this.setState({
+ alertReceiveChannelToShowSettings: item.id,
+ integrationSettingsTab: IntegrationSettingsTab.Heartbeat,
+ });
+ }}
+ />
+ )}
+
+
+
+
+
{
+ this.setState({
+ alertReceiveChannelToShowSettings: store.selectedAlertReceiveChannel,
+ integrationSettingsTab,
+ });
+ }}
+ />
+
+
+ No integrations found. Review your filter and team settings.
+
+ {
+ this.setState({ showCreateIntegrationModal: true });
+ }}
+ >
+ New integration for receiving alerts
+
+
+
+ }
+ />
+ ) : (
+
+ {alertReceiveChannelToShowSettings && (
+
{
+ alertReceiveChannelStore.updateItem(alertReceiveChannelToShowSettings);
+ }}
+ startTab={integrationSettingsTab}
+ id={alertReceiveChannelToShowSettings}
+ onHide={() => {
+ this.setState({
+ alertReceiveChannelToShowSettings: undefined,
+ integrationSettingsTab: undefined,
+ });
+ LocationHelper.update({ tab: undefined }, 'partial');
+ }}
/>
- ) : (
-
- {alertReceiveChannelToShowSettings && (
-
{
- alertReceiveChannelStore.updateItem(alertReceiveChannelToShowSettings);
- }}
- startTab={integrationSettingsTab}
- id={alertReceiveChannelToShowSettings}
- onHide={() => {
- this.setState({
- alertReceiveChannelToShowSettings: undefined,
- integrationSettingsTab: undefined,
- });
- getLocationSrv().update({ partial: true, query: { tab: undefined } });
- }}
- />
- )}
- {showCreateIntegrationModal && (
- {
- this.setState({ showCreateIntegrationModal: false });
- }}
- onCreate={this.handleCreateNewAlertReceiveChannel}
- />
- )}
-
+ {showCreateIntegrationModal && (
+ {
+ this.setState({ showCreateIntegrationModal: false });
+ }}
+ onCreate={this.handleCreateNewAlertReceiveChannel}
+ />
+ )}
+
+ )}
);
diff --git a/grafana-plugin/src/pages/maintenance/Maintenance.tsx b/grafana-plugin/src/pages/maintenance/Maintenance.tsx
index 4d329475..9ec72ea3 100644
--- a/grafana-plugin/src/pages/maintenance/Maintenance.tsx
+++ b/grafana-plugin/src/pages/maintenance/Maintenance.tsx
@@ -7,7 +7,6 @@ import { observer } from 'mobx-react';
import moment from 'moment-timezone';
import LegacyNavHeading from 'navbar/LegacyNavHeading';
import Emoji from 'react-emoji-render';
-import { AppRootProps } from 'types';
import GTable from 'components/GTable/GTable';
import Text from 'components/Text/Text';
@@ -18,7 +17,7 @@ import { getAlertReceiveChannelDisplayName } from 'models/alert_receive_channel/
import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
import { Maintenance, MaintenanceMode, MaintenanceType } from 'models/maintenance/maintenance.types';
import { pages } from 'pages';
-import { WithStoreProps } from 'state/types';
+import { PageProps, WithStoreProps } from 'state/types';
import { UserAction } from 'state/userAction';
import { withMobXProviderContext } from 'state/withStore';
@@ -26,7 +25,7 @@ import styles from './Maintenance.module.css';
const cx = cn.bind(styles);
-interface MaintenancePageProps extends AppRootProps, WithStoreProps {}
+interface MaintenancePageProps extends PageProps, WithStoreProps {}
interface MaintenancePageState {
maintenanceData?: {
diff --git a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.test.tsx b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.test.tsx
new file mode 100644
index 00000000..463b3256
--- /dev/null
+++ b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.test.tsx
@@ -0,0 +1,86 @@
+import 'jest/matchMedia.ts';
+import React from 'react';
+
+import { describe, expect, test } from '@jest/globals';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import outgoingWebhooksStub from 'jest/outgoingWebhooksStub';
+
+import { OutgoingWebhook } from 'models/outgoing_webhook/outgoing_webhook.types';
+import { OutgoingWebhooks } from 'pages/outgoing_webhooks/OutgoingWebhooks';
+
+const outgoingWebhooks = outgoingWebhooksStub as OutgoingWebhook[];
+const outgoingWebhookStore = () => ({
+ loadItem: () => Promise.resolve(outgoingWebhooks[0]),
+ updateItems: () => Promise.resolve(),
+ getSearchResult: () => outgoingWebhooks,
+ items: outgoingWebhooks.reduce((prev, current) => {
+ prev[current.id] = current;
+ return prev;
+ }, {}),
+});
+
+jest.mock('plugin/GrafanaPluginRootPage.helpers', () => ({
+ isTopNavbar: () => false,
+}));
+
+jest.mock('@grafana/runtime', () => ({
+ config: {
+ featureToggles: {
+ topNav: false,
+ },
+ },
+}));
+
+jest.mock('state/useStore', () => ({
+ useStore: () => ({
+ outgoingWebhookStore: outgoingWebhookStore(),
+ isUserActionAllowed: jest.fn().mockReturnValue(true),
+ }),
+}));
+
+jest.mock('@grafana/runtime', () => ({
+ getLocationSrv: jest.fn(),
+}));
+
+describe('OutgoingWebhooks', () => {
+ const storeMock = {
+ isUserActionAllowed: jest.fn().mockReturnValue(true),
+ outgoingWebhookStore: outgoingWebhookStore(),
+ };
+
+ beforeAll(() => {
+ console.warn = () => {};
+ console.error = () => {};
+ });
+
+ test('It renders all retrieved webhooks', async () => {
+ render(('test__outgoingWebhookEditForm');
+ }
+});
diff --git a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx
index 797fc6d6..1ff3f4d7 100644
--- a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx
+++ b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx
@@ -1,12 +1,10 @@
import React from 'react';
-import { getLocationSrv } from '@grafana/runtime';
import { Button, HorizontalGroup } from '@grafana/ui';
import { PluginPage } from 'PluginPage';
import cn from 'classnames/bind';
import { observer } from 'mobx-react';
import LegacyNavHeading from 'navbar/LegacyNavHeading';
-import { AppRootProps } from 'types';
import GTable from 'components/GTable/GTable';
import PageErrorHandlingWrapper, { PageBaseState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper';
@@ -22,16 +20,16 @@ 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';
+import LocationHelper from 'utils/LocationHelper';
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
- <>
-
-
(
-
-
- Outgoing Webhooks
-
-
-
-
-
- Create
-
-
-
+ {() => (
+ <>
+
+
(
+
+
+ Outgoing Webhooks
+
+
- )}
- rowKey="id"
- columns={columns}
- data={webhooks}
- />
-
- {outgoingWebhookIdToEdit && (
-
- )}
-
+ )}
+ rowKey="id"
+ columns={columns}
+ data={webhooks}
+ />
+
{
this.setState({ outgoingWebhookIdToEdit: id });
- getLocationSrv().update({ partial: true, query: { id } });
+ LocationHelper.update({ id }, 'partial');
};
};
handleOutgoingWebhookFormHide = () => {
this.setState({ outgoingWebhookIdToEdit: undefined });
- getLocationSrv().update({ partial: true, query: { id: undefined } });
+ LocationHelper.update({ id: undefined }, 'partial');
};
}
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index 7f99d9fe..87e02706 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -1,12 +1,10 @@
import React from 'react';
-import { getLocationSrv } from '@grafana/runtime';
import { Button, HorizontalGroup, VerticalGroup, IconButton, ToolbarButton, Icon, Modal } from '@grafana/ui';
import { PluginPage } from 'PluginPage';
import cn from 'classnames/bind';
import dayjs from 'dayjs';
import { observer } from 'mobx-react';
-import { AppRootProps } from 'types';
import PageErrorHandlingWrapper from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper';
import PluginLink from 'components/PluginLink/PluginLink';
@@ -23,10 +21,10 @@ import UsersTimezones from 'containers/UsersTimezones/UsersTimezones';
import { Schedule, ScheduleType, Shift } from 'models/schedule/schedule.types';
import { Timezone } from 'models/timezone/timezone.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';
+import LocationHelper from 'utils/LocationHelper';
import { getStartOfWeek } from './Schedule.helpers';
@@ -34,7 +32,7 @@ import styles from './Schedule.module.css';
const cx = cn.bind(styles);
-interface SchedulePageProps extends AppRootProps, WithStoreProps {}
+interface SchedulePageProps extends PageProps, WithStoreProps {}
interface SchedulePageState {
startMoment: dayjs.Dayjs;
@@ -66,8 +64,10 @@ class SchedulePage extends React.Component
}
async componentDidMount() {
- const { store } = this.props;
- const { id } = getQueryParams();
+ const {
+ store,
+ query: { id },
+ } = this.props;
store.userStore.updateItems();
@@ -86,8 +86,10 @@ class SchedulePage extends React.Component
}
render() {
- const { store } = this.props;
- const { id: scheduleId } = getQueryParams();
+ const {
+ store,
+ query: { id: scheduleId },
+ } = this.props;
const {
startMoment,
@@ -112,139 +114,150 @@ class SchedulePage extends React.Component
return (
-
-
-
-
-
-
-
-
- {schedule?.name}
-
- {schedule &&
-
- {users && (
+ {() => (
+ <>
+
+
+
+
- Current timezone:
-
+
+
+ {schedule?.name}
+
+ {schedule &&
- )}
-
-
-
- Export
-
- {(schedule?.type === ScheduleType.Ical || schedule?.type === ScheduleType.Calendar) && (
-
- Reload
-
+
+ {users && (
+
+ Current timezone:
+
)}
+
+
+
+ Export
+
+ {(schedule?.type === ScheduleType.Ical || schedule?.type === ScheduleType.Calendar) && (
+
+ Reload
+
+ )}
+
+ {
+ this.setState({ showEditForm: true });
+ }}
+ />
+
+
+
- {
- this.setState({ showEditForm: true });
- }}
- />
-
-
-
-
-
-
+
+
-
-
-
-
-
- Today
-
-
-
-
-
-
+
+
+
+
+
+ Today
+
+
+
+
+
+
+
+
+ {startMoment.format('DD MMM')} - {startMoment.add(6, 'day').format('DD MMM')}
+
+
-
- {startMoment.format('DD MMM')} - {startMoment.add(6, 'day').format('DD MMM')}
-
-
-
-
-
-
-
+
+
{
- this.setState({ showEditForm: false });
- }}
- />
- )}
- {showScheduleICalSettings && (
- this.setState({ showScheduleICalSettings: false })}
- >
-
+ {showEditForm && (
+ {
+ this.setState({ showEditForm: false });
+ }}
+ />
+ )}
+ {showScheduleICalSettings && (
+ this.setState({ showScheduleICalSettings: false })}
+ >
+
+ )}
+
)}
@@ -293,8 +306,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;
@@ -418,12 +433,12 @@ 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' } });
- });
+ store.scheduleStore.delete(scheduleId).then(() => LocationHelper.update({ page: 'schedules' }, 'replace'));
};
}
diff --git a/grafana-plugin/src/pages/schedules/Schedules.tsx b/grafana-plugin/src/pages/schedules/Schedules.tsx
index 7b7cdbd1..18d6ca52 100644
--- a/grafana-plugin/src/pages/schedules/Schedules.tsx
+++ b/grafana-plugin/src/pages/schedules/Schedules.tsx
@@ -1,6 +1,5 @@
import React from 'react';
-import { getLocationSrv } from '@grafana/runtime';
import { Button, HorizontalGroup, IconButton, LoadingPlaceholder, VerticalGroup } from '@grafana/ui';
import { PluginPage } from 'PluginPage';
import cn from 'classnames/bind';
@@ -31,6 +30,7 @@ import { getStartOfWeek } from 'pages/schedule/Schedule.helpers';
import { WithStoreProps } from 'state/types';
import { UserAction } from 'state/userAction';
import { withMobXProviderContext } from 'state/withStore';
+import LocationHelper from 'utils/LocationHelper';
import styles from './Schedules.module.css';
@@ -210,7 +210,7 @@ class SchedulesPage extends React.Component {
if (data.type === ScheduleType.API) {
- getLocationSrv().update({ query: { page: 'schedule', id: data.id } });
+ LocationHelper.update({ page: 'schedule', id: data.id }, 'replace');
}
};
@@ -259,9 +259,7 @@ class SchedulesPage extends React.Component {
- return () => {
- getLocationSrv().update({ query: { page: 'schedule', id: scheduleId } });
- };
+ return () => LocationHelper.update({ page: 'schedule', id: scheduleId }, 'replace');
};
renderType = (value: number) => {
diff --git a/grafana-plugin/src/pages/settings/tabs/Cloud/CloudPage.tsx b/grafana-plugin/src/pages/settings/tabs/Cloud/CloudPage.tsx
index 2675f113..17ebd610 100644
--- a/grafana-plugin/src/pages/settings/tabs/Cloud/CloudPage.tsx
+++ b/grafana-plugin/src/pages/settings/tabs/Cloud/CloudPage.tsx
@@ -1,6 +1,5 @@
import React, { useCallback, useEffect, useState } from 'react';
-import { getLocationSrv } from '@grafana/runtime';
import { Field, Input, Button, HorizontalGroup, Icon, VerticalGroup, LoadingPlaceholder } from '@grafana/ui';
import cn from 'classnames/bind';
import { observer } from 'mobx-react';
@@ -15,6 +14,7 @@ import { WithStoreProps } from 'state/types';
import { useStore } from 'state/useStore';
import { withMobXProviderContext } from 'state/withStore';
import { openErrorNotification } from 'utils';
+import LocationHelper from 'utils/LocationHelper';
import styles from './CloudPage.module.css';
@@ -116,7 +116,7 @@ const CloudPage = observer((_props: CloudPageProps) => {
variant="secondary"
size="sm"
className={cx('table-button')}
- onClick={() => getLocationSrv().update({ query: { page: 'users', p: page, id: user.id } })}
+ onClick={() => LocationHelper.update({ page: 'users', p: page, id: user.id }, 'replace')}
>
Configure notifications
diff --git a/grafana-plugin/src/pages/users/Users.tsx b/grafana-plugin/src/pages/users/Users.tsx
index 623b379b..6faa3b55 100644
--- a/grafana-plugin/src/pages/users/Users.tsx
+++ b/grafana-plugin/src/pages/users/Users.tsx
@@ -1,13 +1,11 @@
import React from 'react';
-import { getLocationSrv } from '@grafana/runtime';
import { Alert, Button, HorizontalGroup, Icon, VerticalGroup } from '@grafana/ui';
import { PluginPage } from 'PluginPage';
import cn from 'classnames/bind';
import { debounce } from 'lodash-es';
import { observer } from 'mobx-react';
import LegacyNavHeading from 'navbar/LegacyNavHeading';
-import { AppRootProps } from 'types';
import Avatar from 'components/Avatar/Avatar';
import GTable from 'components/GTable/GTable';
@@ -24,10 +22,10 @@ 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';
+import LocationHelper from 'utils/LocationHelper';
import { getRealFilters, getUserRowClassNameFn } from './Users.helpers';
@@ -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();
@@ -83,11 +81,11 @@ class Users extends React.Component {
return;
}
- getLocationSrv().update({ query: { p: page }, partial: true });
+ LocationHelper.update({ p: page }, 'partial');
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(
@@ -182,74 +180,76 @@ class Users extends React.Component {
pageName="users"
itemNotFoundMessage={`User with id=${query?.id} is not found. Please select user from the list.`}
>
- <>
-
-
-
-
-
-
- Users
-
-
- To manage permissions or add users, please visit{' '}
- Grafana user management
-
+ {() => (
+ <>
+
+
+
-
-
- View my profile
-
-
-
- {store.isUserActionAllowed(UserAction.ViewOtherUsers) ? (
- <>
-
-
-
- Clear filters
+
+
+ View my profile
-
+
+
+ {store.isUserActionAllowed(UserAction.ViewOtherUsers) ? (
+ <>
+
+
+ Clear filters
+
+
-
+
+ ) : (
+
+ You don't have enough permissions to view other users because you are not Admin.{' '}
+ Click here to open your profile
+
+ }
+ severity="info"
/>
-
- ) : (
-
- You don't have enough permissions to view other users because you are not Admin.{' '}
- Click here to open your profile
-
- }
- severity="info"
- />
- )}
+ )}
+
+ {userPkToEdit &&
}
- {userPkToEdit &&
}
-
-
+
+ )}
);
@@ -378,7 +378,7 @@ class Users extends React.Component
{
handleHideUserSettings = () => {
this.setState({ userPkToEdit: undefined });
- getLocationSrv().update({ partial: true, query: { id: undefined } });
+ LocationHelper.update({ id: undefined }, 'partial');
};
handleUserUpdate = () => {
diff --git a/grafana-plugin/src/plugin.json b/grafana-plugin/src/plugin.json
index d753a8e6..93e971a1 100644
--- a/grafana-plugin/src/plugin.json
+++ b/grafana-plugin/src/plugin.json
@@ -34,6 +34,7 @@
"name": "Alert Groups",
"path": "/a/grafana-oncall-app/?page=incidents",
"role": "Viewer",
+ "defaultNav": true,
"addToNav": true
},
{
diff --git a/grafana-plugin/src/plugin/GrafanaPluginRootPage.helpers.tsx b/grafana-plugin/src/plugin/GrafanaPluginRootPage.helpers.tsx
index 23854334..63b461be 100644
--- a/grafana-plugin/src/plugin/GrafanaPluginRootPage.helpers.tsx
+++ b/grafana-plugin/src/plugin/GrafanaPluginRootPage.helpers.tsx
@@ -8,7 +8,17 @@ export function getQueryParams(): any {
const searchParams = new URLSearchParams(window.location.search);
const result = {};
for (const [key, value] of searchParams) {
- result[key] = value;
+ if (result[key]) {
+ // key already existing, we're handling an array
+ if (!Array.isArray(result[key])) {
+ result[key] = new Array(result[key]);
+ }
+
+ result[key].push(value);
+ } else {
+ result[key] = value;
+ }
}
+
return result;
}
diff --git a/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx b/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx
index d2b4cd59..43288bb3 100644
--- a/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx
+++ b/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx
@@ -35,7 +35,7 @@ import 'style/vars.css';
import 'style/global.css';
import 'style/utils.css';
-import { isTopNavbar } from './GrafanaPluginRootPage.helpers';
+import { getQueryParams, isTopNavbar } from './GrafanaPluginRootPage.helpers';
import PluginSetup from './PluginSetup';
export const GrafanaPluginRootPage = (props: AppRootProps) => (
@@ -101,7 +101,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..9f9eccbd 100644
--- a/grafana-plugin/src/state/types.ts
+++ b/grafana-plugin/src/state/types.ts
@@ -1,9 +1,16 @@
+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;
diff --git a/grafana-plugin/src/style/global.css b/grafana-plugin/src/style/global.css
index 07a8af39..fe3e65a2 100644
--- a/grafana-plugin/src/style/global.css
+++ b/grafana-plugin/src/style/global.css
@@ -39,3 +39,7 @@
.navbarRootFallback {
margin-top: 24px;
}
+
+.page-title {
+ margin-bottom: 16px;
+}
diff --git a/grafana-plugin/src/utils/LocationHelper.ts b/grafana-plugin/src/utils/LocationHelper.ts
new file mode 100644
index 00000000..27bfe38f
--- /dev/null
+++ b/grafana-plugin/src/utils/LocationHelper.ts
@@ -0,0 +1,43 @@
+import { KeyValue } from '@grafana/data';
+import { locationService } from '@grafana/runtime';
+
+import { getQueryParams } from 'plugin/GrafanaPluginRootPage.helpers';
+
+class LocationHelper {
+ update(params: KeyValue, method: 'replace' | 'push' | 'partial') {
+ const queryParams = getQueryParams();
+
+ const sortedExistingParams = sort(queryParams);
+ const sortedNewParams = sort(params);
+
+ if (toQueryString(sortedExistingParams) !== toQueryString(sortedNewParams)) {
+ if (method === 'partial') {
+ locationService.partial(params);
+ } else {
+ locationService[method](toQueryString(sortedNewParams));
+ }
+ }
+ }
+}
+
+function toQueryString(queryParams: KeyValue) {
+ const urlParams = new URLSearchParams(queryParams);
+ for (const [key, value] of Object.entries(queryParams)) {
+ if (Array.isArray(value)) {
+ urlParams.delete(key);
+ value.forEach((v) => urlParams.append(key, v));
+ }
+ }
+ return urlParams.toString();
+}
+
+function sort(object: KeyValue) {
+ return Object.keys(object)
+ .sort()
+ .reduce((obj, key) => {
+ obj[key] = object[key];
+ return obj;
+ }, {});
+}
+
+export default new LocationHelper();