From 5441a4da95c60d2cd36f6ef1f7e10a4ee13095bf Mon Sep 17 00:00:00 2001 From: Rares Mardare Date: Wed, 21 Sep 2022 14:43:50 +0300 Subject: [PATCH] improvements :) --- .../PageErrorHandlingWrapper.helpers.tsx | 22 +++ .../PageErrorHandlingWrapper.module.css} | 0 .../PageErrorHandlingWrapper.tsx} | 28 ++-- .../WrongTeamDisplayWrapper.helpers.tsx | 22 --- .../escalation-chains/EscalationChains.tsx | 20 +-- .../src/pages/incident/Incident.tsx | 130 ++++++++++-------- .../src/pages/integrations/Integrations.tsx | 20 +-- .../outgoing_webhooks/OutgoingWebhooks.tsx | 30 ++-- .../src/pages/schedules/Schedules.tsx | 20 +-- grafana-plugin/src/pages/users/Users.tsx | 20 +-- 10 files changed, 167 insertions(+), 145 deletions(-) create mode 100644 grafana-plugin/src/components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.helpers.tsx rename grafana-plugin/src/components/{WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.module.css => PageErrorHandlingWrapper/PageErrorHandlingWrapper.module.css} (100%) rename grafana-plugin/src/components/{WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.tsx => PageErrorHandlingWrapper/PageErrorHandlingWrapper.tsx} (79%) delete mode 100644 grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers.tsx diff --git a/grafana-plugin/src/components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.helpers.tsx b/grafana-plugin/src/components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.helpers.tsx new file mode 100644 index 00000000..840e0945 --- /dev/null +++ b/grafana-plugin/src/components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.helpers.tsx @@ -0,0 +1,22 @@ +import { PageErrorData } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper'; + +export function initErrorDataState(): Partial { + return { isWrongTeamError: false, wrongTeamNoPermissions: false }; +} + +export function getWrongTeamResponseInfo({ response }): Partial { + if (response) { + if (response.status === 404) { + return { isNotFoundError: true }; + } else if (response.status === 403 && response.data.error_code === 'wrong_team') { + let res = response.data; + if (res.owner_team) { + return { isWrongTeamError: true, switchToTeam: { name: res.owner_team.name, id: res.owner_team.id } }; + } else { + return { isWrongTeamError: true, wrongTeamNoPermissions: true }; + } + } + } + + return { isNotFoundError: true }; +} diff --git a/grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.module.css b/grafana-plugin/src/components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.module.css similarity index 100% rename from grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.module.css rename to grafana-plugin/src/components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.module.css diff --git a/grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.tsx b/grafana-plugin/src/components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.tsx similarity index 79% rename from grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.tsx rename to grafana-plugin/src/components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.tsx index 6a41c025..33f333e6 100644 --- a/grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.tsx +++ b/grafana-plugin/src/components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.tsx @@ -9,49 +9,51 @@ import { ChangeTeamIcon } from 'icons'; import { GrafanaTeam } from 'models/grafana_team/grafana_team.types'; import { useStore } from 'state/useStore'; -import styles from './WrongTeamDisplayWrapper.module.css'; +import styles from './PageErrorHandlingWrapper.module.css'; import { openWarningNotification } from 'utils'; +import { PropTypes } from 'mobx-react'; const cx = cn.bind(styles); export interface PageBaseState { - wrongTeamData: WrongTeamData; + errorData: PageErrorData; } -export interface WrongTeamData { - notFound?: boolean; - isError?: boolean; +export interface PageErrorData { + isNotFoundError?: boolean; + isWrongTeamError?: boolean; wrongTeamNoPermissions?: boolean; switchToTeam?: { name: string; id: string }; } -export default function WrongTeamDisplayWrapper({ - wrongTeamData, +export default function PageErrorHandlingWrapper({ + errorData, objectName, pageName, itemNotFoundMessage, children, }: { - wrongTeamData: WrongTeamData; + errorData: PageErrorData; objectName: string; pageName: string; - itemNotFoundMessage: string; + itemNotFoundMessage?: string; children: () => JSX.Element; }) { useEffect(() => { - if (!wrongTeamData.isError && wrongTeamData.notFound) { + const { isWrongTeamError, isNotFoundError } = errorData; + if (!isWrongTeamError && isNotFoundError && itemNotFoundMessage) { openWarningNotification(itemNotFoundMessage); } - }, [wrongTeamData.notFound]); + }, [errorData.isNotFoundError]); - if (!wrongTeamData.isError) return children(); + if (!errorData.isWrongTeamError) return children(); const store = useStore(); const currentTeamId = store.userStore.currentUser?.current_team; const currentTeam = store.grafanaTeamStore.items[currentTeamId]?.name; - const { switchToTeam, wrongTeamNoPermissions } = wrongTeamData; + const { switchToTeam, wrongTeamNoPermissions } = errorData; const onTeamChange = async (teamId: GrafanaTeam['id']) => { await store.userStore.updateCurrentUser({ current_team: teamId }); diff --git a/grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers.tsx b/grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers.tsx deleted file mode 100644 index 5c7b5dac..00000000 --- a/grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper'; - -export function initWrongTeamDataState(): Partial { - return { isError: false, wrongTeamNoPermissions: false }; -} - -export function getWrongTeamResponseInfo({ response }): Partial { - if (response) { - if (response.status === 404) { - return { notFound: true }; - } else if (response.status === 403 && response.data.error_code === 'wrong_team') { - let res = response.data; - if (res.owner_team) { - return { isError: true, switchToTeam: { name: res.owner_team.name, id: res.owner_team.id } }; - } else { - return { isError: true, wrongTeamNoPermissions: true }; - } - } - } - - return { notFound: true }; -} diff --git a/grafana-plugin/src/pages/escalation-chains/EscalationChains.tsx b/grafana-plugin/src/pages/escalation-chains/EscalationChains.tsx index 7cd64739..9bddf331 100644 --- a/grafana-plugin/src/pages/escalation-chains/EscalationChains.tsx +++ b/grafana-plugin/src/pages/escalation-chains/EscalationChains.tsx @@ -16,11 +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, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper'; +import PageErrorHandlingWrapper, { PageBaseState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper'; import { getWrongTeamResponseInfo, - initWrongTeamDataState, -} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers'; + initErrorDataState, +} from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.helpers'; import EscalationChainCard from 'containers/EscalationChainCard/EscalationChainCard'; import EscalationChainForm from 'containers/EscalationChainForm/EscalationChainForm'; import EscalationChainSteps from 'containers/EscalationChainSteps/EscalationChainSteps'; @@ -55,7 +55,7 @@ class EscalationChainsPage extends React.Component { - this.setState({ wrongTeamData: initWrongTeamDataState() }); // reset on query parse + this.setState({ errorData: initErrorDataState() }); // reset on query parse const { store, query } = this.props; const { escalationChainStore } = store; @@ -77,7 +77,7 @@ class EscalationChainsPage extends React.Component this.setState({ wrongTeamData: { ...getWrongTeamResponseInfo(error) } })); + .catch((error) => this.setState({ errorData: { ...getWrongTeamResponseInfo(error) } })); if (!escalationChain) { return; @@ -128,15 +128,15 @@ class EscalationChainsPage extends React.Component )} - + ); } diff --git a/grafana-plugin/src/pages/incident/Incident.tsx b/grafana-plugin/src/pages/incident/Incident.tsx index dde6d254..f92a95be 100644 --- a/grafana-plugin/src/pages/incident/Incident.tsx +++ b/grafana-plugin/src/pages/incident/Incident.tsx @@ -29,8 +29,11 @@ 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, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper'; -import { getWrongTeamResponseInfo, initWrongTeamDataState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers'; +import PageErrorHandlingWrapper, { PageBaseState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper'; +import { + getWrongTeamResponseInfo, + initErrorDataState, +} from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.helpers'; import AttachIncidentForm from 'containers/AttachIncidentForm/AttachIncidentForm'; import IntegrationSettings from 'containers/IntegrationSettings/IntegrationSettings'; import { IntegrationSettingsTab } from 'containers/IntegrationSettings/IntegrationSettings.types'; @@ -71,7 +74,7 @@ class IncidentPage extends React.Component state: IncidentPageState = { timelineFilter: 'all', resolutionNoteText: '', - wrongTeamData: initWrongTeamDataState(), + errorData: initErrorDataState(), }; componentDidMount() { @@ -89,7 +92,7 @@ class IncidentPage extends React.Component } update = () => { - this.setState({ wrongTeamData: initWrongTeamDataState() }); // reset wrong team error to false + this.setState({ errorData: initErrorDataState() }); // reset wrong team error to false const { store, @@ -98,7 +101,7 @@ class IncidentPage extends React.Component store.alertGroupStore .getAlert(id) - .catch((error) => this.setState({ wrongTeamData: { ...getWrongTeamResponseInfo(error) } })); + .catch((error) => this.setState({ errorData: { ...getWrongTeamResponseInfo(error) } })); }; render() { @@ -107,14 +110,14 @@ class IncidentPage extends React.Component query: { id, cursor, start, perpage }, } = this.props; - const { wrongTeamData, showIntegrationSettings, showAttachIncidentForm } = this.state; - + const { errorData, showIntegrationSettings, showAttachIncidentForm } = this.state; + const { isNotFoundError, isWrongTeamError } = errorData; const { alertReceiveChannelStore } = store; const { alerts } = store.alertGroupStore; const incident = alerts.get(id); - if (!incident && !wrongTeamData.isError) { + if (!incident && !isNotFoundError && !isWrongTeamError) { return (
@@ -123,60 +126,75 @@ class IncidentPage extends React.Component } return ( - - {() => ( - <> + {() => + errorData.isNotFoundError ? (
- {this.renderHeader()} -
-
- - - -
-
{this.renderTimeline()}
+
+ + 404 + Incident not found + + + +
- {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} + /> + )} + + ) + } + ); } diff --git a/grafana-plugin/src/pages/integrations/Integrations.tsx b/grafana-plugin/src/pages/integrations/Integrations.tsx index 85b8c2b5..c7f81d16 100644 --- a/grafana-plugin/src/pages/integrations/Integrations.tsx +++ b/grafana-plugin/src/pages/integrations/Integrations.tsx @@ -12,11 +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, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper'; +import PageErrorHandlingWrapper, { PageBaseState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper'; import { getWrongTeamResponseInfo, - initWrongTeamDataState, -} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers'; + initErrorDataState, +} from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.helpers'; import AlertReceiveChannelCard from 'containers/AlertReceiveChannelCard/AlertReceiveChannelCard'; import AlertRules from 'containers/AlertRules/AlertRules'; import CreateAlertReceiveChannelContainer from 'containers/CreateAlertReceiveChannelContainer/CreateAlertReceiveChannelContainer'; @@ -48,7 +48,7 @@ class Integrations extends React.Component state: IntegrationsState = { integrationsFilters: { searchTerm: '' }, showCreateIntegrationModal: false, - wrongTeamData: initWrongTeamDataState(), + errorData: initErrorDataState(), }; alertReceiveChanneltoPoll: { [key: string]: number } = {}; @@ -65,7 +65,7 @@ class Integrations extends React.Component }; parseQueryParams = async () => { - this.setState({ wrongTeamData: initWrongTeamDataState() }); // reset wrong team error to false on query parse // reset wrong team error to false + this.setState({ errorData: initErrorDataState() }); // reset wrong team error to false on query parse // reset wrong team error to false const { store, query } = this.props; const { alertReceiveChannelStore } = store; @@ -76,7 +76,7 @@ class Integrations extends React.Component if (query.id) { let alertReceiveChannel = await alertReceiveChannelStore .loadItem(query.id, true) - .catch((error) => this.setState({ wrongTeamData: { ...getWrongTeamResponseInfo(error) } })); + .catch((error) => this.setState({ errorData: { ...getWrongTeamResponseInfo(error) } })); if (!alertReceiveChannel) { return; @@ -124,15 +124,15 @@ class Integrations extends React.Component alertReceiveChannelToShowSettings, integrationSettingsTab, showCreateIntegrationModal, - wrongTeamData, + errorData, } = this.state; const { alertReceiveChannelStore } = store; const searchResult = alertReceiveChannelStore.getSearchResult(); return ( - )} )} - + ); } diff --git a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx index 849fd39a..e48f10aa 100644 --- a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx +++ b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx @@ -10,11 +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, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper'; +import PageErrorHandlingWrapper, { PageBaseState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper'; import { getWrongTeamResponseInfo, - initWrongTeamDataState, -} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers'; + initErrorDataState, +} from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.helpers'; import OutgoingWebhookForm from 'containers/OutgoingWebhookForm/OutgoingWebhookForm'; import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl'; import { ActionDTO } from 'models/action'; @@ -36,7 +36,7 @@ interface OutgoingWebhooksState extends PageBaseState { @observer class OutgoingWebhooks extends React.Component { state: OutgoingWebhooksState = { - wrongTeamData: initWrongTeamDataState(), + errorData: initErrorDataState(), }; async componentDidMount() { @@ -51,7 +51,7 @@ class OutgoingWebhooks extends React.Component { this.setState((prevState) => ({ - wrongTeamData: initWrongTeamDataState(), + errorData: initErrorDataState(), outgoingWebhookIdToEdit: undefined, })); // reset state on query parse @@ -60,12 +60,14 @@ class OutgoingWebhooks extends React.Component this.setState({ wrongTeamData: { ...getWrongTeamResponseInfo(error) } })); - if (id) { - this.setState({ outgoingWebhookIdToEdit: id }); + const outgoingWebhook = await store.outgoingWebhookStore + .loadItem(id, true) + .catch((error) => this.setState({ errorData: { ...getWrongTeamResponseInfo(error) } })); + + if (outgoingWebhook) { + this.setState({ outgoingWebhookIdToEdit: id }); + } } }; @@ -77,7 +79,7 @@ class OutgoingWebhooks extends React.Component )} - + ); } diff --git a/grafana-plugin/src/pages/schedules/Schedules.tsx b/grafana-plugin/src/pages/schedules/Schedules.tsx index 86d59213..97cb3112 100644 --- a/grafana-plugin/src/pages/schedules/Schedules.tsx +++ b/grafana-plugin/src/pages/schedules/Schedules.tsx @@ -28,11 +28,11 @@ 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, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper'; +import PageErrorHandlingWrapper, { PageBaseState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper'; import { getWrongTeamResponseInfo, - initWrongTeamDataState, -} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers'; + initErrorDataState, +} from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.helpers'; import ScheduleForm from 'containers/ScheduleForm/ScheduleForm'; import ScheduleICalSettings from 'containers/ScheduleIcalLink/ScheduleIcalLink'; import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl'; @@ -65,7 +65,7 @@ class SchedulesPage extends React.Component { - this.setState({ wrongTeamData: initWrongTeamDataState() }); // reset wrong team error to false on query parse + this.setState({ errorData: initErrorDataState() }); // reset wrong team error to false on query parse const { store, @@ -89,7 +89,7 @@ class SchedulesPage extends React.Component this.setState({ wrongTeamData: { ...getWrongTeamResponseInfo(error) } })); + .catch((error) => this.setState({ errorData: { ...getWrongTeamResponseInfo(error) } })); if (!schedule) { return; } @@ -114,7 +114,7 @@ class SchedulesPage extends React.Component )} - + ); } diff --git a/grafana-plugin/src/pages/users/Users.tsx b/grafana-plugin/src/pages/users/Users.tsx index aeba9f35..ffdc92c4 100644 --- a/grafana-plugin/src/pages/users/Users.tsx +++ b/grafana-plugin/src/pages/users/Users.tsx @@ -12,11 +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, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper'; +import PageErrorHandlingWrapper, { PageBaseState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper'; import { getWrongTeamResponseInfo, - initWrongTeamDataState, -} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers'; + initErrorDataState, +} from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.helpers'; import UserSettings from 'containers/UserSettings/UserSettings'; import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl'; import { getRole } from 'models/user/user.helpers'; @@ -56,7 +56,7 @@ class Users extends React.Component { roles: [UserRole.ADMIN, UserRole.EDITOR, UserRole.VIEWER], }, - wrongTeamData: initWrongTeamDataState(), + errorData: initErrorDataState(), }; initialUsersLoaded = false; @@ -97,7 +97,7 @@ class Users extends React.Component { } parseParams = async () => { - this.setState({ wrongTeamData: initWrongTeamDataState() }); // reset wrong team error to false on query parse + this.setState({ errorData: initErrorDataState() }); // reset wrong team error to false on query parse const { store, @@ -106,7 +106,7 @@ class Users extends React.Component { if (id) { await (id === 'me' ? store.userStore.loadCurrentUser() : store.userStore.loadUser(String(id), true)).catch( - (error) => this.setState({ wrongTeamData: { ...getWrongTeamResponseInfo(error) } }) + (error) => this.setState({ errorData: { ...getWrongTeamResponseInfo(error) } }) ); const userPkToEdit = String(id === 'me' ? store.userStore.currentUserPk : id); @@ -118,7 +118,7 @@ class Users extends React.Component { }; render() { - const { usersFilters, userPkToEdit, page, wrongTeamData } = this.state; + const { usersFilters, userPkToEdit, page, errorData } = this.state; const { store, query } = this.props; const { userStore } = store; @@ -171,8 +171,8 @@ class Users extends React.Component { const { count, results } = userStore.getSearchResult(); return ( - {
)} - + ); }