centralcloud/oncall-engine
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improvements :)

Browse source
This commit is contained in:
Rares Mardare 2022-09-21 14:43:50 +03:00
parent 761a79e116
commit 5441a4da95
10 changed files with 167 additions and 145 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
grafana-plugin/src/components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.helpers.tsx Normal file
View file

@ -0,0 +1,22 @@
import { PageErrorData } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper';
export function initErrorDataState(): Partial<PageErrorData> {
return { isWrongTeamError: false, wrongTeamNoPermissions: false };
}
export function getWrongTeamResponseInfo({ response }): Partial<PageErrorData> {
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 };
}

0
grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.module.css → grafana-plugin/src/components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.module.css
View file

28
grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.tsx → grafana-plugin/src/components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.tsx
View file

@ -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 });

22
grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers.tsx
View file

@ -1,22 +0,0 @@
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) {
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 };
}

20
grafana-plugin/src/pages/escalation-chains/EscalationChains.tsx
View file

@ -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<EscalationChainsPageProps, Es
showCreateEscalationChainModal: false,
escalationChainIdToCopy: undefined,
selectedEscalationChain: undefined,
wrongTeamData: initWrongTeamDataState(),
errorData: initErrorDataState(),
};
async componentDidMount() {
@ -63,7 +63,7 @@ class EscalationChainsPage extends React.Component<EscalationChainsPageProps, Es
}
parseQueryParams = async () => {
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<EscalationChainsPageProps, Es
if (query.id) {
let escalationChain = await escalationChainStore
.loadItem(query.id, true)
.catch((error) => this.setState({ wrongTeamData: { ...getWrongTeamResponseInfo(error) } }));
.catch((error) => this.setState({ errorData: { ...getWrongTeamResponseInfo(error) } }));
if (!escalationChain) {
return;
@ -128,15 +128,15 @@ class EscalationChainsPage extends React.Component<EscalationChainsPageProps, Es
escalationChainIdToCopy,
escalationChainsFilters,
selectedEscalationChain,
wrongTeamData,
errorData,
} = this.state;
const { escalationChainStore } = store;
const searchResult = escalationChainStore.getSearchResult(escalationChainsFilters.searchTerm);
return (
<WrongTeamDisplayWrapper
wrongTeamData={wrongTeamData}
<PageErrorHandlingWrapper
errorData={errorData}
objectName="escalation"
pageName="escalations"
itemNotFoundMessage={`Escalation chain with id=${query?.id} is not found. Please select escalation chain from the list.`}
@ -216,7 +216,7 @@ class EscalationChainsPage extends React.Component<EscalationChainsPageProps, Es
)}
</>
)}
</WrongTeamDisplayWrapper>
</PageErrorHandlingWrapper>
);
}

130
grafana-plugin/src/pages/incident/Incident.tsx
View file

@ -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<IncidentPageProps, IncidentPageState>
state: IncidentPageState = {
timelineFilter: 'all',
resolutionNoteText: '',
wrongTeamData: initWrongTeamDataState(),
errorData: initErrorDataState(),
};
componentDidMount() {
@ -89,7 +92,7 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
}
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<IncidentPageProps, IncidentPageState>
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<IncidentPageProps, IncidentPageState>
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 (
<div className={cx('root')}>
<LoadingPlaceholder text="Loading alert group..." />
@ -123,60 +126,75 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
}
return (
<WrongTeamDisplayWrapper
wrongTeamData={wrongTeamData}
<PageErrorHandlingWrapper
errorData={errorData}
objectName="alert group"
pageName="incidents"
itemNotFoundMessage={`Incident with id=${id} is not found. Please select incident from the list.`}
>
{() => (
<>
{() =>
errorData.isNotFoundError ? (
<div className={cx('root')}>
{this.renderHeader()}
<div className={cx('content')}>
<div className={cx('column')}>
<Incident incident={incident} datetimeReference={this.getIncidentDatetimeReference(incident)} />
<GroupedIncidentsList
id={incident.pk}
getIncidentDatetimeReference={this.getIncidentDatetimeReference}
/>
<AttachedIncidentsList id={incident.pk} getUnattachClickHandler={this.getUnattachClickHandler} />
</div>
<div className={cx('column')}>{this.renderTimeline()}</div>
<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>
{showIntegrationSettings && (
<IntegrationSettings
alertGroupId={incident.pk}
onUpdate={() => {
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 && (
<AttachIncidentForm
id={id}
onHide={() => {
this.setState({
showAttachIncidentForm: false,
});
}}
onUpdate={this.update}
/>
)}
</>
)}
</WrongTeamDisplayWrapper>
) : (
<>
<div className={cx('root')}>
{this.renderHeader()}
<div className={cx('content')}>
<div className={cx('column')}>
<Incident incident={incident} datetimeReference={this.getIncidentDatetimeReference(incident)} />
<GroupedIncidentsList
id={incident.pk}
getIncidentDatetimeReference={this.getIncidentDatetimeReference}
/>
<AttachedIncidentsList id={incident.pk} getUnattachClickHandler={this.getUnattachClickHandler} />
</div>
<div className={cx('column')}>{this.renderTimeline()}</div>
</div>
</div>
{showIntegrationSettings && (
<IntegrationSettings
alertGroupId={incident.pk}
onUpdate={() => {
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 && (
<AttachIncidentForm
id={id}
onHide={() => {
this.setState({
showAttachIncidentForm: false,
});
}}
onUpdate={this.update}
/>
)}
</>
)
}
</PageErrorHandlingWrapper>
);
}

20
grafana-plugin/src/pages/integrations/Integrations.tsx
View file

@ -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<IntegrationsProps, IntegrationsState>
state: IntegrationsState = {
integrationsFilters: { searchTerm: '' },
showCreateIntegrationModal: false,
wrongTeamData: initWrongTeamDataState(),
errorData: initErrorDataState(),
};
alertReceiveChanneltoPoll: { [key: string]: number } = {};
@ -65,7 +65,7 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
};
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<IntegrationsProps, IntegrationsState>
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<IntegrationsProps, IntegrationsState>
alertReceiveChannelToShowSettings,
integrationSettingsTab,
showCreateIntegrationModal,
wrongTeamData,
errorData,
} = this.state;
const { alertReceiveChannelStore } = store;
const searchResult = alertReceiveChannelStore.getSearchResult();
return (
<WrongTeamDisplayWrapper
wrongTeamData={wrongTeamData}
<PageErrorHandlingWrapper
errorData={errorData}
objectName="integration"
pageName="integrations"
itemNotFoundMessage={`Integration with id=${query?.id} is not found. Please select integration from the list.`}
@ -246,7 +246,7 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
)}
</>
)}
</WrongTeamDisplayWrapper>
</PageErrorHandlingWrapper>
);
}

30
grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx
View file

@ -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<OutgoingWebhooksProps, OutgoingWebhooksState> {
state: OutgoingWebhooksState = {
wrongTeamData: initWrongTeamDataState(),
errorData: initErrorDataState(),
};
async componentDidMount() {
@ -51,7 +51,7 @@ class OutgoingWebhooks extends React.Component<OutgoingWebhooksProps, OutgoingWe
parseQueryParams = async () => {
this.setState((prevState) => ({
wrongTeamData: initWrongTeamDataState(),
errorData: initErrorDataState(),
outgoingWebhookIdToEdit: undefined,
})); // reset state on query parse
@ -60,12 +60,14 @@ class OutgoingWebhooks extends React.Component<OutgoingWebhooksProps, OutgoingWe
query: { id },
} = this.props;
await store.outgoingWebhookStore
.loadItem(id, true)
.catch((error) => 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<OutgoingWebhooksProps, OutgoingWe
render() {
const { store, query } = this.props;
const { outgoingWebhookIdToEdit, wrongTeamData } = this.state;
const { outgoingWebhookIdToEdit, errorData } = this.state;
const webhooks = store.outgoingWebhookStore.getSearchResult();
@ -100,8 +102,8 @@ class OutgoingWebhooks extends React.Component<OutgoingWebhooksProps, OutgoingWe
];
return (
<WrongTeamDisplayWrapper
wrongTeamData={wrongTeamData}
<PageErrorHandlingWrapper
errorData={errorData}
objectName="outgoing webhook"
pageName="outgoing_webhooks"
itemNotFoundMessage={`Outgoing webhook with id=${query?.id} is not found. Please select outgoing webhook from the list.`}
@ -141,7 +143,7 @@ class OutgoingWebhooks extends React.Component<OutgoingWebhooksProps, OutgoingWe
)}
</>
)}
</WrongTeamDisplayWrapper>
</PageErrorHandlingWrapper>
);
}

20
grafana-plugin/src/pages/schedules/Schedules.tsx
View file

@ -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<SchedulesPageProps, SchedulesPageSta
selectedDate: moment().startOf('day').format('YYYY-MM-DD'),
},
expandedSchedulesKeys: [],
wrongTeamData: initWrongTeamDataState(),
errorData: initErrorDataState(),
};
componentDidMount() {
@ -79,7 +79,7 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
}
parseQueryParams = 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,
@ -89,7 +89,7 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
if (id) {
const schedule = await store.scheduleStore
.loadItem(id, true)
.catch((error) => this.setState({ wrongTeamData: { ...getWrongTeamResponseInfo(error) } }));
.catch((error) => this.setState({ errorData: { ...getWrongTeamResponseInfo(error) } }));
if (!schedule) {
return;
}
@ -114,7 +114,7 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
render() {
const { store, query } = this.props;
const { expandedSchedulesKeys, scheduleIdToDelete, scheduleIdToEdit, scheduleIdToExport } = this.state;
const { filters, wrongTeamData } = this.state;
const { filters, errorData } = this.state;
const { scheduleStore } = store;
const columns = [
@ -162,8 +162,8 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
const offset = moment().tz(timezoneStr).format('Z');
return (
<WrongTeamDisplayWrapper
wrongTeamData={wrongTeamData}
<PageErrorHandlingWrapper
errorData={errorData}
objectName="schedule"
pageName="schedules"
itemNotFoundMessage={`Schedule with id=${query?.id} is not found. Please select schedule from the list.`}
@ -267,7 +267,7 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
)}
</>
)}
</WrongTeamDisplayWrapper>
</PageErrorHandlingWrapper>
);
}

20
grafana-plugin/src/pages/users/Users.tsx
View file

@ -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<UsersProps, UsersState> {
roles: [UserRole.ADMIN, UserRole.EDITOR, UserRole.VIEWER],
},
wrongTeamData: initWrongTeamDataState(),
errorData: initErrorDataState(),
};
initialUsersLoaded = false;
@ -97,7 +97,7 @@ class Users extends React.Component<UsersProps, UsersState> {
}
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<UsersProps, UsersState> {
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<UsersProps, UsersState> {
};
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<UsersProps, UsersState> {
const { count, results } = userStore.getSearchResult();
return (
<WrongTeamDisplayWrapper
wrongTeamData={wrongTeamData}
<PageErrorHandlingWrapper
errorData={errorData}
objectName="user"
pageName="users"
itemNotFoundMessage={`User with id=${query?.id} is not found. Please select user from the list.`}
@ -245,7 +245,7 @@ class Users extends React.Component<UsersProps, UsersState> {
</div>
</>
)}
</WrongTeamDisplayWrapper>
</PageErrorHandlingWrapper>
);
}