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

Webhook form - changed Forward all (#4622)

Browse source 
# What this PR does

- added validation for `Data` field, backend seems to be a bit clumsy on
validating that field
- Changed `Fordwar All` / `Customise data` to be more straightforward
for the user

## Which issue(s) this PR closes

Closes https://github.com/grafana/oncall/issues/4412
This commit is contained in:
Rares Mardare 2024-07-08 15:18:06 +03:00 • committed by GitHub
parent 3f8087281c
commit 22556f4905
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 82 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.tsx
View file

@ -78,6 +78,10 @@ function prepareForSave(rawData: Partial<ApiSchemas['Webhook']>, selectedPreset:
delete data[field];
});
if (data.forward_all) {
data.data = null;
}
return data;
}

128
grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookFormFields.tsx
View file

@ -1,12 +1,13 @@
import React from 'react';
import { SelectableValue } from '@grafana/data';
import { Button, Field, Input, Select, Switch, useStyles2 } from '@grafana/ui';
import { Button, Field, Input, RadioButtonList, Select, Switch, useStyles2 } from '@grafana/ui';
import Emoji from 'react-emoji-render';
import { Controller, useFormContext } from 'react-hook-form';
import { MonacoEditor } from 'components/MonacoEditor/MonacoEditor';
import { MONACO_EDITABLE_CONFIG } from 'components/MonacoEditor/MonacoEditor.config';
import { RenderConditionally } from 'components/RenderConditionally/RenderConditionally';
import { GSelect } from 'containers/GSelect/GSelect';
import { Labels } from 'containers/Labels/Labels';
import { AlertReceiveChannelHelper } from 'models/alert_receive_channel/alert_receive_channel.helpers';
@ -29,6 +30,21 @@ interface OutgoingWebhookFormFieldsProps {
onTemplateEditClick: (params: TemplateParams) => void;
}
const FORWARD = 'forward';
const CUSTOMIZE = 'customise';
const FORWARD_RADIO_OPTIONS = [
{
label: 'Forward whole payload data',
value: FORWARD,
boolean: true,
},
{
label: 'Customise forwarded data',
value: CUSTOMIZE,
boolean: false,
},
];
export const OutgoingWebhookFormFields = ({
preset,
hasLabelsFeature,
@ -42,7 +58,6 @@ export const OutgoingWebhookFormFields = ({
} = useFormContext<ApiSchemas['Webhook']>();
const forwardAll = watch(WebhookFormFieldName.ForwardAll);
const styles = useStyles2(getStyles);
const controls = (
@ -175,6 +190,7 @@ export const OutgoingWebhookFormFields = ({
/>
)}
<Controller
rules={{ required: 'Webhook URL is required' }}
name={WebhookFormFieldName.Url}
control={control}
render={({ field }) => (
@ -299,55 +315,67 @@ export const OutgoingWebhookFormFields = ({
</Field>
)}
/>
<Controller
name={WebhookFormFieldName.ForwardAll}
control={control}
render={({ field }) => (
<Field
label="Forward All"
description="Forwards whole payload of the alert group and context data to the webhook's url as POST/PUT data"
invalid={Boolean(errors.forward_all)}
error={errors.forward_all?.message}
>
<Switch value={field.value} onChange={field.onChange} />
</Field>
)}
/>
<Controller
name={WebhookFormFieldName.Data}
control={control}
render={({ field }) => (
<Field
label="Data"
description={`Available variables: {{ event }}, {{ user }}, {{ alert_group }}, {{ alert_group_id }}, {{ alert_payload }}, {{ integration }}, {{ notified_users }}, {{ users_to_be_notified }}, {{ responses }}${
hasLabelsFeature ? ' {{ webhook }}' : ''
}`}
>
<div className={styles.formRow}>
<div className={styles.formField}>
<MonacoEditor
data={{}}
showLineNumbers={false}
monacoOptions={{ ...MONACO_EDITABLE_CONFIG, readOnly: forwardAll }}
value={field.value}
onChange={field.onChange}
/>
</div>
<Button
icon="edit"
variant="secondary"
onClick={() =>
onTemplateEditClick({
name: field.name,
value: field.value,
displayName: 'Webhook Data',
})
}
<RenderConditionally shouldRender={!preset?.controlled_fields.includes(WebhookFormFieldName.ForwardAll)}>
<Field>
<Controller
name={WebhookFormFieldName.ForwardAll}
control={control}
render={({ field }) => (
<RadioButtonList
name="forwardData"
options={FORWARD_RADIO_OPTIONS}
value={FORWARD_RADIO_OPTIONS.find((opt) => opt.boolean === field.value)?.value}
onChange={(value) => field.onChange(value === FORWARD)}
/>
</div>
</Field>
)}
/>
)}
/>
</Field>
<RenderConditionally
shouldRender={!forwardAll}
render={() => (
<Controller
name={WebhookFormFieldName.Data}
rules={{ required: 'Data is required' }}
control={control}
render={({ field }) => (
<Field
label="Data"
invalid={Boolean(errors.data)}
error={errors.data?.message}
description={`Available variables: {{ event }}, {{ user }}, {{ alert_group }}, {{ alert_group_id }}, {{ alert_payload }}, {{ integration }}, {{ notified_users }}, {{ users_to_be_notified }}, {{ responses }}${
hasLabelsFeature ? ' {{ webhook }}' : ''
}`}
>
<div className={styles.formRow}>
<div className={styles.formField}>
<MonacoEditor
data={{}}
showLineNumbers={false}
monacoOptions={{ ...MONACO_EDITABLE_CONFIG }}
value={field.value}
onChange={field.onChange}
/>
</div>
<Button
icon="edit"
variant="secondary"
onClick={() =>
onTemplateEditClick({
name: field.name,
value: field.value,
displayName: 'Webhook Data',
})
}
/>
</div>
</Field>
)}
/>
)}
/>
</RenderConditionally>
</>
);