feat(alert/report): add 'not null' condition option to modal (#12077)
This commit is contained in:
parent
90ca49f3d6
commit
08b3ebea5e
|
|
@ -74,6 +74,10 @@ const CONDITIONS = [
|
|||
label: t('!= (Is Not Equal)'),
|
||||
value: '!=',
|
||||
},
|
||||
{
|
||||
label: t('Not Null'),
|
||||
value: 'not null',
|
||||
},
|
||||
];
|
||||
|
||||
const RETENTION_OPTIONS = [
|
||||
|
|
@ -215,6 +219,10 @@ export const StyledInputContainer = styled.div`
|
|||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
input[disabled] {
|
||||
color: ${({ theme }) => theme.colors.grayscale.base};
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 160px;
|
||||
resize: none;
|
||||
|
|
@ -455,7 +463,9 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
|
|||
> | null>();
|
||||
const [isHidden, setIsHidden] = useState<boolean>(true);
|
||||
const [contentType, setContentType] = useState<string>('dashboard');
|
||||
|
||||
// Dropdown options
|
||||
const [conditionNotNull, setConditionNotNull] = useState<boolean>(false);
|
||||
const [sourceOptions, setSourceOptions] = useState<MetaObject[]>([]);
|
||||
const [dashboardOptions, setDashboardOptions] = useState<MetaObject[]>([]);
|
||||
const [chartOptions, setChartOptions] = useState<MetaObject[]>([]);
|
||||
|
|
@ -536,6 +546,10 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
|
|||
|
||||
const data: any = {
|
||||
...currentAlert,
|
||||
validator_type: conditionNotNull ? 'not null' : 'operator',
|
||||
validator_config_json: conditionNotNull
|
||||
? {}
|
||||
: currentAlert?.validator_config_json,
|
||||
chart: contentType === 'chart' ? currentAlert?.chart?.value : undefined,
|
||||
dashboard:
|
||||
contentType === 'dashboard'
|
||||
|
|
@ -566,7 +580,11 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
|
|||
delete data.last_value;
|
||||
delete data.last_value_row_json;
|
||||
|
||||
updateResource(update_id, data).then(() => {
|
||||
updateResource(update_id, data).then(response => {
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (onAdd) {
|
||||
onAdd();
|
||||
}
|
||||
|
|
@ -577,6 +595,10 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
|
|||
} else if (currentAlert) {
|
||||
// Create
|
||||
createResource(data).then(response => {
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (onAdd) {
|
||||
onAdd(response);
|
||||
}
|
||||
|
|
@ -787,6 +809,8 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
|
|||
};
|
||||
|
||||
const onConditionChange = (op: Operator) => {
|
||||
setConditionNotNull(op === 'not null');
|
||||
|
||||
const config = {
|
||||
op,
|
||||
threshold: currentAlert
|
||||
|
|
@ -851,8 +875,9 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
|
|||
} else if (
|
||||
!!currentAlert.database &&
|
||||
currentAlert.sql?.length &&
|
||||
!!currentAlert.validator_config_json?.op &&
|
||||
currentAlert.validator_config_json?.threshold !== undefined
|
||||
(conditionNotNull || !!currentAlert.validator_config_json?.op) &&
|
||||
(conditionNotNull ||
|
||||
currentAlert.validator_config_json?.threshold !== undefined)
|
||||
) {
|
||||
setDisableSave(false);
|
||||
} else {
|
||||
|
|
@ -890,6 +915,13 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
|
|||
setNotificationSettings(settings);
|
||||
setContentType(resource.chart ? 'chart' : 'dashboard');
|
||||
|
||||
const validatorConfig =
|
||||
typeof resource.validator_config_json === 'string'
|
||||
? JSON.parse(resource.validator_config_json)
|
||||
: resource.validator_config_json;
|
||||
|
||||
setConditionNotNull(resource.validator_type === 'not null');
|
||||
|
||||
setCurrentAlert({
|
||||
...resource,
|
||||
chart: resource.chart
|
||||
|
|
@ -913,9 +945,11 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
|
|||
})),
|
||||
// @ts-ignore: Type not assignable
|
||||
validator_config_json:
|
||||
typeof resource.validator_config_json === 'string'
|
||||
? JSON.parse(resource.validator_config_json)
|
||||
: resource.validator_config_json,
|
||||
resource.validator_type === 'not null'
|
||||
? {
|
||||
op: 'not null',
|
||||
}
|
||||
: validatorConfig,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -935,7 +969,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
|
|||
sql: '',
|
||||
type: isReport ? 'Report' : 'Alert',
|
||||
validator_config_json: {},
|
||||
validator_type: 'not null',
|
||||
validator_type: '',
|
||||
});
|
||||
|
||||
setNotificationSettings([]);
|
||||
|
|
@ -960,6 +994,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
|
|||
currentAlert.chart,
|
||||
contentType,
|
||||
notificationSettings,
|
||||
conditionNotNull,
|
||||
]
|
||||
: [],
|
||||
);
|
||||
|
|
@ -1138,6 +1173,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
|
|||
<input
|
||||
type="number"
|
||||
name="threshold"
|
||||
disabled={conditionNotNull}
|
||||
value={
|
||||
currentAlert && currentAlert.validator_config_json
|
||||
? currentAlert.validator_config_json.threshold || ''
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export type MetaObject = {
|
|||
value?: number | string;
|
||||
};
|
||||
|
||||
export type Operator = '<' | '>' | '<=' | '>=' | '==' | '!=';
|
||||
export type Operator = '<' | '>' | '<=' | '>=' | '==' | '!=' | 'not null';
|
||||
|
||||
export type AlertObject = {
|
||||
active?: boolean;
|
||||
|
|
|
|||
|
|
@ -254,18 +254,23 @@ export function useSingleViewResource<D extends object = any>(
|
|||
({ json = {} }) => {
|
||||
updateState({
|
||||
resource: json.result,
|
||||
error: null,
|
||||
});
|
||||
return json.id;
|
||||
},
|
||||
createErrorHandler(errMsg =>
|
||||
createErrorHandler(errMsg => {
|
||||
handleErrorMsg(
|
||||
t(
|
||||
'An error occurred while creating %ss: %s',
|
||||
resourceLabel,
|
||||
JSON.stringify(errMsg),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
updateState({
|
||||
error: errMsg,
|
||||
});
|
||||
}),
|
||||
)
|
||||
.finally(() => {
|
||||
updateState({ loading: false });
|
||||
|
|
@ -287,18 +292,25 @@ export function useSingleViewResource<D extends object = any>(
|
|||
({ json = {} }) => {
|
||||
updateState({
|
||||
resource: json.result,
|
||||
error: null,
|
||||
});
|
||||
return json.result;
|
||||
},
|
||||
createErrorHandler(errMsg =>
|
||||
createErrorHandler(errMsg => {
|
||||
handleErrorMsg(
|
||||
t(
|
||||
'An error occurred while fetching %ss: %s',
|
||||
resourceLabel,
|
||||
JSON.stringify(errMsg),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
updateState({
|
||||
error: errMsg,
|
||||
});
|
||||
|
||||
return errMsg;
|
||||
}),
|
||||
)
|
||||
.finally(() => {
|
||||
updateState({ loading: false });
|
||||
|
|
|
|||
Loading…
Reference in New Issue