fix(alert/report): add/edit modal can't be saved (#12311)

* api error from previous prevent the new get api endpoint to be called

* add clear error to hooks
This commit is contained in:
Lily Kuang
2021-01-07 09:38:13 -08:00
committed by GitHub
parent ca07c8cd39
commit 076c31da22
2 changed files with 86 additions and 78 deletions

View File

@@ -540,10 +540,12 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
fetchResource,
createResource,
updateResource,
clearError,
} = useSingleViewResource<AlertObject>('report', t('report'), addDangerToast);
// Functions
const hide = () => {
clearError();
setIsHidden(true);
onHide();
};
@@ -911,91 +913,92 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
};
// Initialize
if (
isEditMode &&
(!currentAlert ||
!currentAlert.id ||
(alert && alert.id !== currentAlert.id) ||
(isHidden && show))
) {
if (alert && alert.id !== null && !loading && !fetchError) {
const id = alert.id || 0;
useEffect(() => {
if (
isEditMode &&
(!currentAlert ||
!currentAlert.id ||
(alert && alert.id !== currentAlert.id) ||
(isHidden && show))
) {
if (alert && alert.id !== null && !loading && !fetchError) {
const id = alert.id || 0;
fetchResource(id);
}
} else if (
!isEditMode &&
(!currentAlert || currentAlert.id || (isHidden && show))
) {
setCurrentAlert({
active: true,
crontab: DEFAULT_CRON_VALUE,
log_retention: DEFAULT_RETENTION,
working_timeout: DEFAULT_WORKING_TIMEOUT,
name: '',
owners: [],
recipients: [],
sql: '',
validator_config_json: {},
validator_type: '',
});
fetchResource(id).then(() => {
if (resource) {
// Add notification settings
const settings = (resource.recipients || []).map(setting => ({
method: setting.type as NotificationMethod,
// @ts-ignore: Type not assignable
recipients:
typeof setting.recipient_config_json === 'string'
? (JSON.parse(setting.recipient_config_json) || {}).target
: setting.recipient_config_json,
options: NOTIFICATION_METHODS as NotificationMethod[], // Need better logic for this
}));
setNotificationSettings([]);
setNotificationAddState('active');
}
}, [alert]);
setNotificationSettings(settings);
setContentType(resource.chart ? 'chart' : 'dashboard');
useEffect(() => {
if (resource) {
// Add notification settings
const settings = (resource.recipients || []).map(setting => ({
method: setting.type as NotificationMethod,
// @ts-ignore: Type not assignable
recipients:
typeof setting.recipient_config_json === 'string'
? (JSON.parse(setting.recipient_config_json) || {}).target
: setting.recipient_config_json,
options: NOTIFICATION_METHODS as NotificationMethod[], // Need better logic for this
}));
const validatorConfig =
typeof resource.validator_config_json === 'string'
? JSON.parse(resource.validator_config_json)
: resource.validator_config_json;
setNotificationSettings(settings);
setContentType(resource.chart ? 'chart' : 'dashboard');
setConditionNotNull(resource.validator_type === 'not null');
const validatorConfig =
typeof resource.validator_config_json === 'string'
? JSON.parse(resource.validator_config_json)
: resource.validator_config_json;
setCurrentAlert({
...resource,
chart: resource.chart
? getChartData(resource.chart) || { value: resource.chart.id }
: undefined,
dashboard: resource.dashboard
? getDashboardData(resource.dashboard) || {
value: resource.dashboard.id,
}
: undefined,
database: resource.database
? getSourceData(resource.database) || {
value: resource.database.id,
}
: undefined,
owners: (resource.owners || []).map(owner => ({
value: owner.id,
label: `${(owner as Owner).first_name} ${
(owner as Owner).last_name
}`,
})),
// @ts-ignore: Type not assignable
validator_config_json:
resource.validator_type === 'not null'
? {
op: 'not null',
}
: validatorConfig,
});
}
setConditionNotNull(resource.validator_type === 'not null');
setCurrentAlert({
...resource,
chart: resource.chart
? getChartData(resource.chart) || { value: resource.chart.id }
: undefined,
dashboard: resource.dashboard
? getDashboardData(resource.dashboard) || {
value: resource.dashboard.id,
}
: undefined,
database: resource.database
? getSourceData(resource.database) || {
value: resource.database.id,
}
: undefined,
owners: (resource.owners || []).map(owner => ({
value: owner.id,
label: `${(owner as Owner).first_name} ${(owner as Owner).last_name}`,
})),
// @ts-ignore: Type not assignable
validator_config_json:
resource.validator_type === 'not null'
? {
op: 'not null',
}
: validatorConfig,
});
}
} else if (
!isEditMode &&
(!currentAlert || currentAlert.id || (isHidden && show))
) {
setCurrentAlert({
active: true,
crontab: DEFAULT_CRON_VALUE,
log_retention: DEFAULT_RETENTION,
working_timeout: DEFAULT_WORKING_TIMEOUT,
name: '',
owners: [],
recipients: [],
sql: '',
validator_config_json: {},
validator_type: '',
});
setNotificationSettings([]);
setNotificationAddState('active');
}
}, [resource]);
// Validation
useEffect(

View File

@@ -328,6 +328,10 @@ export function useSingleViewResource<D extends object = any>(
},
[handleErrorMsg, resourceName, resourceLabel],
);
const clearError = () =>
updateState({
error: null,
});
return {
state,
@@ -338,6 +342,7 @@ export function useSingleViewResource<D extends object = any>(
fetchResource,
createResource,
updateResource,
clearError,
};
}