not found notification
This commit is contained in:
parent
49ea882fcf
commit
761a79e116
8 changed files with 84 additions and 58 deletions
|
|
@ -1,5 +1,9 @@
|
|||
import { WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
|
||||
|
||||
export function initWrongTeamDataState(): Partial<WrongTeamData> {
|
||||
return { isError: false, wrongTeamNoPermissions: false };
|
||||
}
|
||||
|
||||
export function getWrongTeamResponseInfo({ response }): Partial<WrongTeamData> {
|
||||
if (response) {
|
||||
if (response.status === 404) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
import { Button, VerticalGroup } from '@grafana/ui';
|
||||
import cn from 'classnames/bind';
|
||||
|
|
@ -10,6 +10,7 @@ import { GrafanaTeam } from 'models/grafana_team/grafana_team.types';
|
|||
import { useStore } from 'state/useStore';
|
||||
|
||||
import styles from './WrongTeamDisplayWrapper.module.css';
|
||||
import { openWarningNotification } from 'utils';
|
||||
|
||||
const cx = cn.bind(styles);
|
||||
|
||||
|
|
@ -24,21 +25,25 @@ export interface WrongTeamData {
|
|||
switchToTeam?: { name: string; id: string };
|
||||
}
|
||||
|
||||
export function initWrongTeamDataState(): Partial<WrongTeamData> {
|
||||
return { isError: false, wrongTeamNoPermissions: false };
|
||||
}
|
||||
|
||||
export default function WrongTeamDisplayWrapper({
|
||||
wrongTeamData,
|
||||
objectName,
|
||||
pageName,
|
||||
itemNotFoundMessage,
|
||||
children,
|
||||
}: {
|
||||
wrongTeamData: WrongTeamData;
|
||||
objectName: string;
|
||||
pageName: string;
|
||||
itemNotFoundMessage: string;
|
||||
children: () => JSX.Element;
|
||||
}) {
|
||||
useEffect(() => {
|
||||
if (!wrongTeamData.isError && wrongTeamData.notFound) {
|
||||
openWarningNotification(itemNotFoundMessage);
|
||||
}
|
||||
}, [wrongTeamData.notFound]);
|
||||
|
||||
if (!wrongTeamData.isError) return children();
|
||||
|
||||
const store = useStore();
|
||||
|
|
|
|||
|
|
@ -16,8 +16,11 @@ import Text from 'components/Text/Text';
|
|||
import Tutorial from 'components/Tutorial/Tutorial';
|
||||
import { TutorialStep } from 'components/Tutorial/Tutorial.types';
|
||||
import WithConfirm from 'components/WithConfirm/WithConfirm';
|
||||
import WrongTeamDisplayWrapper, { initWrongTeamDataState, PageBaseState, WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
|
||||
import { getWrongTeamResponseInfo } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
|
||||
import WrongTeamDisplayWrapper, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
|
||||
import {
|
||||
getWrongTeamResponseInfo,
|
||||
initWrongTeamDataState,
|
||||
} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
|
||||
import EscalationChainCard from 'containers/EscalationChainCard/EscalationChainCard';
|
||||
import EscalationChainForm from 'containers/EscalationChainForm/EscalationChainForm';
|
||||
import EscalationChainSteps from 'containers/EscalationChainSteps/EscalationChainSteps';
|
||||
|
|
@ -60,7 +63,7 @@ class EscalationChainsPage extends React.Component<EscalationChainsPageProps, Es
|
|||
}
|
||||
|
||||
parseQueryParams = async () => {
|
||||
this.setState({ wrongTeamData: initWrongTeamDataState() }); // reset wrong team error to false on query parse
|
||||
this.setState({ wrongTeamData: initWrongTeamDataState() }); // reset on query parse
|
||||
|
||||
const { store, query } = this.props;
|
||||
const { escalationChainStore } = store;
|
||||
|
|
@ -83,10 +86,6 @@ class EscalationChainsPage extends React.Component<EscalationChainsPageProps, Es
|
|||
escalationChain = escalationChainStore.items[query.id];
|
||||
if (escalationChain) {
|
||||
selectedEscalationChain = escalationChain.id;
|
||||
} else {
|
||||
openWarningNotification(
|
||||
`Escalation chain with id=${query?.id} is not found. Please select escalation chain from the list.`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -123,7 +122,7 @@ class EscalationChainsPage extends React.Component<EscalationChainsPageProps, Es
|
|||
}
|
||||
|
||||
render() {
|
||||
const { store } = this.props;
|
||||
const { store, query } = this.props;
|
||||
const {
|
||||
showCreateEscalationChainModal,
|
||||
escalationChainIdToCopy,
|
||||
|
|
@ -136,7 +135,12 @@ class EscalationChainsPage extends React.Component<EscalationChainsPageProps, Es
|
|||
const searchResult = escalationChainStore.getSearchResult(escalationChainsFilters.searchTerm);
|
||||
|
||||
return (
|
||||
<WrongTeamDisplayWrapper wrongTeamData={wrongTeamData} objectName="escalation" pageName="escalations">
|
||||
<WrongTeamDisplayWrapper
|
||||
wrongTeamData={wrongTeamData}
|
||||
objectName="escalation"
|
||||
pageName="escalations"
|
||||
itemNotFoundMessage={`Escalation chain with id=${query?.id} is not found. Please select escalation chain from the list.`}
|
||||
>
|
||||
{() => (
|
||||
<>
|
||||
<div className={cx('root')}>
|
||||
|
|
|
|||
|
|
@ -29,8 +29,8 @@ import IntegrationLogo from 'components/IntegrationLogo/IntegrationLogo';
|
|||
import PluginLink from 'components/PluginLink/PluginLink';
|
||||
import SourceCode from 'components/SourceCode/SourceCode';
|
||||
import Text from 'components/Text/Text';
|
||||
import WrongTeamDisplayWrapper, { initWrongTeamDataState, PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
|
||||
import { getWrongTeamResponseInfo } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
|
||||
import WrongTeamDisplayWrapper, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
|
||||
import { getWrongTeamResponseInfo, initWrongTeamDataState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
|
||||
import AttachIncidentForm from 'containers/AttachIncidentForm/AttachIncidentForm';
|
||||
import IntegrationSettings from 'containers/IntegrationSettings/IntegrationSettings';
|
||||
import { IntegrationSettingsTab } from 'containers/IntegrationSettings/IntegrationSettings.types';
|
||||
|
|
@ -89,7 +89,7 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
|
|||
}
|
||||
|
||||
update = () => {
|
||||
this.setState({ wrongTeamData: initWrongTeamDataState() }); // reset wrong team error to false on query parse // reset wrong team error to false
|
||||
this.setState({ wrongTeamData: initWrongTeamDataState() }); // reset wrong team error to false
|
||||
|
||||
const {
|
||||
store,
|
||||
|
|
@ -114,24 +114,6 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
|
|||
|
||||
const incident = alerts.get(id);
|
||||
|
||||
// if (notFound) {
|
||||
// return (
|
||||
// <div className={cx('root')}>
|
||||
// <div className={cx('not-found')}>
|
||||
// <VerticalGroup spacing="lg" align="center">
|
||||
// <Text.Title level={1}>404</Text.Title>
|
||||
// <Text.Title level={4}>Incident not found</Text.Title>
|
||||
// <PluginLink query={{ page: 'incidents', cursor, start, perpage }}>
|
||||
// <Button variant="secondary" icon="arrow-left" size="md">
|
||||
// Go to incidents page
|
||||
// </Button>
|
||||
// </PluginLink>
|
||||
// </VerticalGroup>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
if (!incident && !wrongTeamData.isError) {
|
||||
return (
|
||||
<div className={cx('root')}>
|
||||
|
|
@ -141,7 +123,12 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
|
|||
}
|
||||
|
||||
return (
|
||||
<WrongTeamDisplayWrapper wrongTeamData={wrongTeamData} objectName="alert group" pageName="incidents">
|
||||
<WrongTeamDisplayWrapper
|
||||
wrongTeamData={wrongTeamData}
|
||||
objectName="alert group"
|
||||
pageName="incidents"
|
||||
itemNotFoundMessage={`Incident with id=${id} is not found. Please select incident from the list.`}
|
||||
>
|
||||
{() => (
|
||||
<>
|
||||
<div className={cx('root')}>
|
||||
|
|
|
|||
|
|
@ -12,8 +12,11 @@ import IntegrationsFilters, { Filters } from 'components/IntegrationsFilters/Int
|
|||
import Text from 'components/Text/Text';
|
||||
import Tutorial from 'components/Tutorial/Tutorial';
|
||||
import { TutorialStep } from 'components/Tutorial/Tutorial.types';
|
||||
import WrongTeamDisplayWrapper, { initWrongTeamDataState, PageBaseState, WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
|
||||
import { getWrongTeamResponseInfo } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
|
||||
import WrongTeamDisplayWrapper, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
|
||||
import {
|
||||
getWrongTeamResponseInfo,
|
||||
initWrongTeamDataState,
|
||||
} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
|
||||
import AlertReceiveChannelCard from 'containers/AlertReceiveChannelCard/AlertReceiveChannelCard';
|
||||
import AlertRules from 'containers/AlertRules/AlertRules';
|
||||
import CreateAlertReceiveChannelContainer from 'containers/CreateAlertReceiveChannelContainer/CreateAlertReceiveChannelContainer';
|
||||
|
|
@ -81,10 +84,6 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
|
|||
|
||||
if (alertReceiveChannel.id) {
|
||||
selectedAlertReceiveChannel = alertReceiveChannel.id;
|
||||
} else {
|
||||
openWarningNotification(
|
||||
`Integration with id=${query?.id} is not found. Please select integration from the list.`
|
||||
);
|
||||
}
|
||||
|
||||
if (query.tab) {
|
||||
|
|
@ -119,7 +118,7 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
|
|||
}
|
||||
|
||||
render() {
|
||||
const { store } = this.props;
|
||||
const { store, query } = this.props;
|
||||
const {
|
||||
integrationsFilters,
|
||||
alertReceiveChannelToShowSettings,
|
||||
|
|
@ -132,7 +131,12 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
|
|||
const searchResult = alertReceiveChannelStore.getSearchResult();
|
||||
|
||||
return (
|
||||
<WrongTeamDisplayWrapper wrongTeamData={wrongTeamData} objectName="integration" pageName="integrations">
|
||||
<WrongTeamDisplayWrapper
|
||||
wrongTeamData={wrongTeamData}
|
||||
objectName="integration"
|
||||
pageName="integrations"
|
||||
itemNotFoundMessage={`Integration with id=${query?.id} is not found. Please select integration from the list.`}
|
||||
>
|
||||
{() => (
|
||||
<>
|
||||
<div className={cx('root')}>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,11 @@ import GTable from 'components/GTable/GTable';
|
|||
import PluginLink from 'components/PluginLink/PluginLink';
|
||||
import Text from 'components/Text/Text';
|
||||
import WithConfirm from 'components/WithConfirm/WithConfirm';
|
||||
import WrongTeamDisplayWrapper, { initWrongTeamDataState, PageBaseState, WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
|
||||
import { getWrongTeamResponseInfo } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
|
||||
import WrongTeamDisplayWrapper, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
|
||||
import {
|
||||
getWrongTeamResponseInfo,
|
||||
initWrongTeamDataState,
|
||||
} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
|
||||
import OutgoingWebhookForm from 'containers/OutgoingWebhookForm/OutgoingWebhookForm';
|
||||
import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl';
|
||||
import { ActionDTO } from 'models/action';
|
||||
|
|
@ -73,7 +76,7 @@ class OutgoingWebhooks extends React.Component<OutgoingWebhooksProps, OutgoingWe
|
|||
};
|
||||
|
||||
render() {
|
||||
const { store } = this.props;
|
||||
const { store, query } = this.props;
|
||||
const { outgoingWebhookIdToEdit, wrongTeamData } = this.state;
|
||||
|
||||
const webhooks = store.outgoingWebhookStore.getSearchResult();
|
||||
|
|
@ -97,7 +100,12 @@ class OutgoingWebhooks extends React.Component<OutgoingWebhooksProps, OutgoingWe
|
|||
];
|
||||
|
||||
return (
|
||||
<WrongTeamDisplayWrapper wrongTeamData={wrongTeamData} objectName="outgoing webhook" pageName="outgoing_webhooks">
|
||||
<WrongTeamDisplayWrapper
|
||||
wrongTeamData={wrongTeamData}
|
||||
objectName="outgoing webhook"
|
||||
pageName="outgoing_webhooks"
|
||||
itemNotFoundMessage={`Outgoing webhook with id=${query?.id} is not found. Please select outgoing webhook from the list.`}
|
||||
>
|
||||
{() => (
|
||||
<>
|
||||
<div className={cx('root')}>
|
||||
|
|
|
|||
|
|
@ -28,14 +28,15 @@ import { SchedulesFiltersType } from 'components/SchedulesFilters/SchedulesFilte
|
|||
import Text from 'components/Text/Text';
|
||||
import Tutorial from 'components/Tutorial/Tutorial';
|
||||
import { TutorialStep } from 'components/Tutorial/Tutorial.types';
|
||||
import WrongTeamDisplayWrapper, { initWrongTeamDataState, PageBaseState, WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
|
||||
import { getWrongTeamResponseInfo } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
|
||||
import GSelect from 'containers/GSelect/GSelect';
|
||||
import WrongTeamDisplayWrapper, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
|
||||
import {
|
||||
getWrongTeamResponseInfo,
|
||||
initWrongTeamDataState,
|
||||
} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
|
||||
import ScheduleForm from 'containers/ScheduleForm/ScheduleForm';
|
||||
import ScheduleICalSettings from 'containers/ScheduleIcalLink/ScheduleIcalLink';
|
||||
import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl';
|
||||
import { Schedule, ScheduleEvent } from 'models/schedule/schedule.types';
|
||||
import { PRIVATE_CHANNEL_NAME } from 'models/slack_channel/slack_channel.config';
|
||||
import { getSlackChannelName } from 'models/slack_channel/slack_channel.helpers';
|
||||
import { WithStoreProps } from 'state/types';
|
||||
import { UserAction } from 'state/userAction';
|
||||
|
|
@ -111,7 +112,7 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
|
|||
};
|
||||
|
||||
render() {
|
||||
const { store } = this.props;
|
||||
const { store, query } = this.props;
|
||||
const { expandedSchedulesKeys, scheduleIdToDelete, scheduleIdToEdit, scheduleIdToExport } = this.state;
|
||||
const { filters, wrongTeamData } = this.state;
|
||||
const { scheduleStore } = store;
|
||||
|
|
@ -161,7 +162,12 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
|
|||
const offset = moment().tz(timezoneStr).format('Z');
|
||||
|
||||
return (
|
||||
<WrongTeamDisplayWrapper wrongTeamData={wrongTeamData} objectName="schedule" pageName="schedules">
|
||||
<WrongTeamDisplayWrapper
|
||||
wrongTeamData={wrongTeamData}
|
||||
objectName="schedule"
|
||||
pageName="schedules"
|
||||
itemNotFoundMessage={`Schedule with id=${query?.id} is not found. Please select schedule from the list.`}
|
||||
>
|
||||
{() => (
|
||||
<>
|
||||
<div className={cx('root')}>
|
||||
|
|
|
|||
|
|
@ -12,8 +12,11 @@ import GTable from 'components/GTable/GTable';
|
|||
import PluginLink from 'components/PluginLink/PluginLink';
|
||||
import Text from 'components/Text/Text';
|
||||
import UsersFilters from 'components/UsersFilters/UsersFilters';
|
||||
import WrongTeamDisplayWrapper, { initWrongTeamDataState, PageBaseState, WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
|
||||
import { getWrongTeamResponseInfo } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
|
||||
import WrongTeamDisplayWrapper, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
|
||||
import {
|
||||
getWrongTeamResponseInfo,
|
||||
initWrongTeamDataState,
|
||||
} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
|
||||
import UserSettings from 'containers/UserSettings/UserSettings';
|
||||
import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl';
|
||||
import { getRole } from 'models/user/user.helpers';
|
||||
|
|
@ -116,7 +119,7 @@ class Users extends React.Component<UsersProps, UsersState> {
|
|||
|
||||
render() {
|
||||
const { usersFilters, userPkToEdit, page, wrongTeamData } = this.state;
|
||||
const { store } = this.props;
|
||||
const { store, query } = this.props;
|
||||
const { userStore } = store;
|
||||
|
||||
const columns = [
|
||||
|
|
@ -168,7 +171,12 @@ class Users extends React.Component<UsersProps, UsersState> {
|
|||
const { count, results } = userStore.getSearchResult();
|
||||
|
||||
return (
|
||||
<WrongTeamDisplayWrapper wrongTeamData={wrongTeamData} objectName="user" pageName="users">
|
||||
<WrongTeamDisplayWrapper
|
||||
wrongTeamData={wrongTeamData}
|
||||
objectName="user"
|
||||
pageName="users"
|
||||
itemNotFoundMessage={`User with id=${query?.id} is not found. Please select user from the list.`}
|
||||
>
|
||||
{() => (
|
||||
<>
|
||||
<div className={cx('root')}>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue