Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Slack channel and user group values not populating on first visit of schedule notification settings #4671

Merged
merged 2 commits into from
Jul 15, 2024
Merged

Fix Slack channel and user group values not populating on first visit of schedule notification settings #4671

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
54f601a
dereference items before passing to GSelect, add missing observers
brojd Jul 15, 2024
ace9ef0
reorder imports
brojd Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 33 additions & 11 deletions grafana-plugin/src/components/Policy/EscalationPolicy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,11 @@ class _EscalationPolicy extends React.Component<EscalationPolicyProps, any> {
data,
isDisabled,
theme,
store: { userStore },
store: {
userStore,
// dereferencing items is needed to rerender GSelect
userStore: { items: userItems },
},
} = this.props;
const { notify_to_users_queue } = data;
const styles = getEscalationPolicyStyles(theme);
Expand All @@ -187,7 +191,7 @@ class _EscalationPolicy extends React.Component<EscalationPolicyProps, any> {
onChange={this.getOnChangeHandler('notify_to_users_queue')}
getOptionLabel={({ value }: SelectableValue) => <UserTooltip id={value} />}
width={'auto'}
items={userStore.items}
items={userItems}
fetchItemsFn={userStore.fetchItems}
fetchItemFn={async (id) => await userStore.fetchItemById({ userPk: id, skipIfAlreadyPending: true })}
getSearchResult={() => UserHelper.getSearchResult(userStore)}
Expand Down Expand Up @@ -352,7 +356,12 @@ class _EscalationPolicy extends React.Component<EscalationPolicyProps, any> {
data,
theme,
isDisabled,
store: { grafanaTeamStore, scheduleStore },
store: {
scheduleStore,
// dereferencing items is needed to rerender GSelect
grafanaTeamStore: { items: grafanaTeamItems },
scheduleStore: { items: scheduleItems },
},
} = this.props;
const { notify_schedule } = data;
const styles = getEscalationPolicyStyles(theme);
Expand All @@ -362,7 +371,7 @@ class _EscalationPolicy extends React.Component<EscalationPolicyProps, any> {
<GSelect<Schedule>
allowClear
disabled={isDisabled}
items={scheduleStore.items}
items={scheduleItems}
fetchItemsFn={scheduleStore.updateItems}
fetchItemFn={scheduleStore.updateItem}
getSearchResult={scheduleStore.getSearchResult}
Expand All @@ -373,7 +382,7 @@ class _EscalationPolicy extends React.Component<EscalationPolicyProps, any> {
value={notify_schedule}
onChange={this.getOnChangeHandler('notify_schedule')}
getOptionLabel={(item: SelectableValue) => {
const team = grafanaTeamStore.items[scheduleStore.items[item.value].team];
const team = grafanaTeamItems[scheduleStore.items[item.value].team];
return (
<>
<Text>{item.label} </Text>
Expand All @@ -391,7 +400,11 @@ class _EscalationPolicy extends React.Component<EscalationPolicyProps, any> {
data,
theme,
isDisabled,
store: { userGroupStore },
store: {
userGroupStore,
// dereferencing items is needed to rerender GSelect
userGroupStore: { items: userGroupItems },
},
} = this.props;

const { notify_to_group } = data;
Expand All @@ -402,7 +415,7 @@ class _EscalationPolicy extends React.Component<EscalationPolicyProps, any> {
<GSelect<UserGroup>
allowClear
disabled={isDisabled}
items={userGroupStore.items}
items={userGroupItems}
fetchItemsFn={userGroupStore.updateItems}
fetchItemFn={userGroupStore.fetchItemById}
getSearchResult={userGroupStore.getSearchResult}
Expand All @@ -423,7 +436,12 @@ class _EscalationPolicy extends React.Component<EscalationPolicyProps, any> {
data,
theme,
isDisabled,
store: { grafanaTeamStore, outgoingWebhookStore },
store: {
grafanaTeamStore,
outgoingWebhookStore,
// dereferencing items is needed to rerender GSelect
outgoingWebhookStore: { items: outgoingWebhookItems },
},
} = this.props;

const { custom_webhook } = data;
Expand All @@ -433,7 +451,7 @@ class _EscalationPolicy extends React.Component<EscalationPolicyProps, any> {
<WithPermissionControlTooltip key="custom-webhook" userAction={UserActions.EscalationChainsWrite}>
<GSelect<ApiSchemas['Webhook']>
disabled={isDisabled}
items={outgoingWebhookStore.items}
items={outgoingWebhookItems}
fetchItemsFn={outgoingWebhookStore.updateItems}
fetchItemFn={outgoingWebhookStore.updateItem}
getSearchResult={outgoingWebhookStore.getSearchResult}
Expand Down Expand Up @@ -466,15 +484,19 @@ class _EscalationPolicy extends React.Component<EscalationPolicyProps, any> {
const {
data,
isDisabled,
store: { grafanaTeamStore },
store: {
grafanaTeamStore,
// dereferencing items is needed to rerender GSelect
grafanaTeamStore: { items: grafanaTeamItems },
},
} = this.props;
const { notify_to_team_members } = data;

return (
<WithPermissionControlTooltip key="notify_to_team_members" userAction={UserActions.EscalationChainsWrite}>
<GSelect<GrafanaTeam>
disabled={isDisabled}
items={grafanaTeamStore.items}
items={grafanaTeamItems}
fetchItemsFn={grafanaTeamStore.updateItems}
fetchItemFn={grafanaTeamStore.fetchItemById}
getSearchResult={grafanaTeamStore.getSearchResult}
Expand Down
14 changes: 10 additions & 4 deletions grafana-plugin/src/containers/AlertRules/parts/connectors/MSTeamsConnector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useCallback } from 'react';

import { HorizontalGroup, InlineSwitch } from '@grafana/ui';
import cn from 'classnames/bind';
import { observer } from 'mobx-react';

import { GSelect } from 'containers/GSelect/GSelect';
import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
Expand All @@ -18,11 +19,16 @@ interface MSTeamsConnectorProps {
channelFilterId: ChannelFilter['id'];
}

export const MSTeamsConnector = (props: MSTeamsConnectorProps) => {
export const MSTeamsConnector = observer((props: MSTeamsConnectorProps) => {
const { channelFilterId } = props;

const store = useStore();
const { alertReceiveChannelStore, msteamsChannelStore } = store;
const {
alertReceiveChannelStore,
msteamsChannelStore,
// dereferencing items is needed to rerender GSelect
msteamsChannelStore: { items: msteamsChannelItems },
} = store;

const channelFilter = store.alertReceiveChannelStore.channelFilters[channelFilterId];

Expand Down Expand Up @@ -57,7 +63,7 @@ export const MSTeamsConnector = (props: MSTeamsConnectorProps) => {
<GSelect<MSTeamsChannel>
allowClear
className={cx('select', 'control')}
items={msteamsChannelStore.items}
items={msteamsChannelItems}
fetchItemsFn={msteamsChannelStore.updateItems}
fetchItemFn={msteamsChannelStore.updateById}
getSearchResult={msteamsChannelStore.getSearchResult}
Expand All @@ -71,4 +77,4 @@ export const MSTeamsConnector = (props: MSTeamsConnectorProps) => {
</HorizontalGroup>
</div>
);
};
});
9 changes: 6 additions & 3 deletions grafana-plugin/src/containers/AlertRules/parts/connectors/SlackConnector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useCallback } from 'react';

import { HorizontalGroup, InlineSwitch } from '@grafana/ui';
import cn from 'classnames/bind';
import { observer } from 'mobx-react';

import { GSelect } from 'containers/GSelect/GSelect';
import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
Expand All @@ -19,14 +20,16 @@ interface SlackConnectorProps {
channelFilterId: ChannelFilter['id'];
}

export const SlackConnector = (props: SlackConnectorProps) => {
export const SlackConnector = observer((props: SlackConnectorProps) => {
const { channelFilterId } = props;

const store = useStore();
const {
organizationStore: { currentOrganization },
alertReceiveChannelStore,
slackChannelStore,
// dereferencing items is needed to rerender GSelect
slackChannelStore: { items: slackChannelItems },
} = store;

const channelFilter = store.alertReceiveChannelStore.channelFilters[channelFilterId];
Expand Down Expand Up @@ -57,7 +60,7 @@ export const SlackConnector = (props: SlackConnectorProps) => {
<GSelect<SlackChannel>
allowClear
className={cx('select', 'control')}
items={slackChannelStore.items}
items={slackChannelItems}
fetchItemsFn={slackChannelStore.updateItems}
fetchItemFn={slackChannelStore.updateItem}
getSearchResult={getSearchResult}
Expand Down Expand Up @@ -94,4 +97,4 @@ export const SlackConnector = (props: SlackConnectorProps) => {

return results;
}
};
});
14 changes: 10 additions & 4 deletions grafana-plugin/src/containers/AlertRules/parts/connectors/TelegramConnector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useCallback } from 'react';

import { HorizontalGroup, InlineSwitch } from '@grafana/ui';
import cn from 'classnames/bind';
import { observer } from 'mobx-react';

import { GSelect } from 'containers/GSelect/GSelect';
import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
Expand All @@ -18,9 +19,14 @@ interface TelegramConnectorProps {
channelFilterId: ChannelFilter['id'];
}

export const TelegramConnector = ({ channelFilterId }: TelegramConnectorProps) => {
export const TelegramConnector = observer(({ channelFilterId }: TelegramConnectorProps) => {
const store = useStore();
const { alertReceiveChannelStore, telegramChannelStore } = store;
const {
alertReceiveChannelStore,
telegramChannelStore,
// dereferencing items is needed to rerender GSelect
telegramChannelStore: { items: telegramChannelItems },
} = store;

const channelFilter = store.alertReceiveChannelStore.channelFilters[channelFilterId];

Expand Down Expand Up @@ -49,7 +55,7 @@ export const TelegramConnector = ({ channelFilterId }: TelegramConnectorProps) =
<GSelect<TelegramChannel>
allowClear
className={cx('select', 'control')}
items={telegramChannelStore.items}
items={telegramChannelItems}
fetchItemsFn={telegramChannelStore.updateItems}
fetchItemFn={telegramChannelStore.updateById}
getSearchResult={telegramChannelStore.getSearchResult}
Expand All @@ -63,4 +69,4 @@ export const TelegramConnector = ({ channelFilterId }: TelegramConnectorProps) =
</HorizontalGroup>
</div>
);
};
});
8 changes: 6 additions & 2 deletions grafana-plugin/src/containers/AttachIncidentForm/AttachIncidentForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,11 @@ const GroupedAlertNumber = observer(({ value }: GroupedAlertNumberProps) => {
export const AttachIncidentForm = observer(({ id, onUpdate, onHide }: AttachIncidentFormProps) => {
const store = useStore();

const { alertGroupStore } = store;
const {
alertGroupStore,
// dereferencing alerts is needed to rerender GSelect
alertGroupStore: { alerts: alertGroupAlerts },
} = store;

const [selected, setSelected] = useState<ApiSchemas['AlertGroup']['pk']>(undefined);

Expand Down Expand Up @@ -75,7 +79,7 @@ export const AttachIncidentForm = observer(({ id, onUpdate, onHide }: AttachInci
>
<WithPermissionControlTooltip userAction={UserActions.AlertGroupsWrite}>
<GSelect<ApiSchemas['AlertGroup']>
items={Object.fromEntries(alertGroupStore.alerts)}
items={Object.fromEntries(alertGroupAlerts)}
fetchItemsFn={async (query: string) => {
await alertGroupStore.fetchAlertGroups(false, query);
}}
Expand Down
15 changes: 11 additions & 4 deletions grafana-plugin/src/containers/EscalationChainForm/EscalationChainForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { ChangeEvent, FC, useCallback, useState } from 'react';

import { Button, Field, HorizontalGroup, Input, Modal } from '@grafana/ui';
import cn from 'classnames/bind';
import { observer } from 'mobx-react';

import { GSelect } from 'containers/GSelect/GSelect';
import { EscalationChain } from 'models/escalation_chain/escalation_chain.types';
Expand All @@ -26,11 +27,17 @@ interface EscalationChainFormProps {

const cx = cn.bind(styles);

export const EscalationChainForm: FC<EscalationChainFormProps> = (props) => {
export const EscalationChainForm: FC<EscalationChainFormProps> = observer((props) => {
const { escalationChainId, onHide, onSubmit: onSubmitProp, mode } = props;

const store = useStore();
const { escalationChainStore, userStore, grafanaTeamStore } = store;
const {
escalationChainStore,
userStore,
grafanaTeamStore,
// dereferencing items is needed to rerender GSelect
grafanaTeamStore: { items: grafanaTeamItems },
} = store;

const user = userStore.currentUser;

Expand Down Expand Up @@ -93,7 +100,7 @@ export const EscalationChainForm: FC<EscalationChainFormProps> = (props) => {
<div className={cx('root')}>
<Field label="Assign to team">
<GSelect<GrafanaTeam>
items={grafanaTeamStore.items}
items={grafanaTeamItems}
fetchItemsFn={grafanaTeamStore.updateItems}
fetchItemFn={grafanaTeamStore.fetchItemById}
getSearchResult={grafanaTeamStore.getSearchResult}
Expand Down Expand Up @@ -125,4 +132,4 @@ export const EscalationChainForm: FC<EscalationChainFormProps> = (props) => {
</div>
</Modal>
);
};
});
9 changes: 7 additions & 2 deletions grafana-plugin/src/containers/GrafanaTeamSelect/GrafanaTeamSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,12 @@ export const GrafanaTeamSelect = observer(
({ onSelect, onHide, withoutModal, defaultValue }: GrafanaTeamSelectProps) => {
const store = useStore();

const { userStore, grafanaTeamStore } = store;
const {
userStore,
grafanaTeamStore,
// dereferencing items is needed to rerender GSelect
grafanaTeamStore: { items: grafanaTeamItems },
} = store;
const user = userStore.currentUser;

const [selectedTeam, setSelectedTeam] = useState<GrafanaTeam['id']>(defaultValue);
Expand Down Expand Up @@ -53,7 +58,7 @@ export const GrafanaTeamSelect = observer(

const select = (
<GSelect<GrafanaTeam>
items={grafanaTeamStore.items}
items={grafanaTeamItems}
fetchItemsFn={grafanaTeamStore.updateItems}
fetchItemFn={grafanaTeamStore.fetchItemById}
getSearchResult={grafanaTeamStore.getSearchResult}
Expand Down
10 changes: 8 additions & 2 deletions grafana-plugin/src/containers/IntegrationForm/IntegrationForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,13 @@ export const IntegrationForm = observer(
const history = useHistory();
const styles = useStyles2(getIntegrationFormStyles);
const isNew = id === 'new';
const { userStore, grafanaTeamStore, alertReceiveChannelStore } = store;
const {
userStore,
grafanaTeamStore,
// dereferencing items is needed to rerender GSelect
grafanaTeamStore: { items: grafanaTeamItems },
alertReceiveChannelStore,
} = store;

const data: Partial<ApiSchemas['AlertReceiveChannel']> = isNew
? {
Expand Down Expand Up @@ -234,7 +240,7 @@ export const IntegrationForm = observer(
placeholder="Assign to team"
{...field}
{...{
items: grafanaTeamStore.items,
items: grafanaTeamItems,
fetchItemsFn: grafanaTeamStore.updateItems,
fetchItemFn: grafanaTeamStore.fetchItemById,
getSearchResult: grafanaTeamStore.getSearchResult,
Expand Down
8 changes: 6 additions & 2 deletions grafana-plugin/src/containers/MaintenanceForm/MaintenanceForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,11 @@ interface FormFields {

export const MaintenanceForm = observer((props: MaintenanceFormProps) => {
const { onUpdate, onHide, initialData = {} } = props;
const { alertReceiveChannelStore } = useStore();
const {
alertReceiveChannelStore,
// dereferencing items is needed to rerender GSelect
alertReceiveChannelStore: { items: alertReceiveChannelItems },
} = useStore();

const onSubmit = useCallback(async (data) => {
try {
Expand Down Expand Up @@ -87,7 +91,7 @@ export const MaintenanceForm = observer((props: MaintenanceFormProps) => {
>
<GSelect<ApiSchemas['AlertReceiveChannel']>
disabled
items={alertReceiveChannelStore.items}
items={alertReceiveChannelItems}
fetchItemsFn={alertReceiveChannelStore.fetchItems}
fetchItemFn={alertReceiveChannelStore.fetchItemById}
getSearchResult={() => AlertReceiveChannelHelper.getSearchResult(alertReceiveChannelStore)}
Expand Down
Loading
Loading