bug fixes (#2067)
## Which issue(s) this PR fixes - Wrong field name in validation (Verbal name is required, but should be Name is required) - For messenger templates we need to keep \n in the beginning of the result -Save and Open in slack button should not close drawer - If user edit templates, button Cancel should return to templates drawer - Cheatsheet should have a scroll, not main drawer - narrow screen issues in cheatsheet - How integration works should have the dynamic integration name (first red mark). Alerting Contact point and notification policy should be mentioned only for Grafana Alerting https://files.slack.com/files-pri/T02S4RCS0-F0592BHP42G/screenshot_2023-05-23_at_11.45.29_am.png - Cheatsheet title doesn't match to template - Image is not rendered in Result of Edit Template https://files.slack.com/files-tmb/T02S4RCS0-F058TEPD214-27c1136ad2/screenshot_2023-05-23_at_1.02.47_pm_720.png - Add description to the Result of conditional template: if True Selected alert will resolve alert group else Selected alert will not resolve alert group. And change the icon from Warning to X - Opening cheatsheet resets the non-saved template](https://github.com/grafana/oncall-private/issues/1824#issuecomment-1560348999)
This commit is contained in:
Yulia Shanyrova
GitHub
parent
83b328a0f6
commit
f299fb9814
9 changed files with 68 additions and 23 deletions
|
|
@ -6,6 +6,12 @@
|
|||
min-width: min-content;
|
||||
}
|
||||
|
||||
.cheatsheet-container > div {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.cheatsheet-item {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@ const IntegrationForm2 = observer((props: IntegrationFormProps) => {
|
|||
<div className={cx('content')}>
|
||||
<VerticalGroup>
|
||||
<GForm form={form} data={data} onSubmit={handleSubmit} />
|
||||
{isTableView && (
|
||||
{isTableView && selectedOption && (
|
||||
<Collapse
|
||||
headerWithBackground
|
||||
className={cx('collapse')}
|
||||
|
|
@ -165,10 +165,10 @@ const IntegrationForm2 = observer((props: IntegrationFormProps) => {
|
|||
<ul className={cx('integration-info-list')}>
|
||||
<li className={cx('integration-info-item')}>Unique URL endpoint for receiving alerts </li>
|
||||
<li className={cx('integration-info-item')}>
|
||||
Templates to interpret alerts, tailored for Grafana Alerting{' '}
|
||||
Templates to interpret alerts, tailored for {selectedOption.display_name}{' '}
|
||||
</li>
|
||||
<li className={cx('integration-info-item')}>Grafana Alerting contact point </li>
|
||||
<li className={cx('integration-info-item')}>Grafana Alerting notification</li>
|
||||
<li className={cx('integration-info-item')}>{selectedOption.display_name} contact point </li>
|
||||
<li className={cx('integration-info-item')}>{selectedOption.display_name} notification</li>
|
||||
</ul>
|
||||
What you’ll need to do next:
|
||||
<ul className={cx('integration-info-list')}>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,14 @@
|
|||
|
||||
.container-wrapper {
|
||||
padding: 8px;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
border: var(--border-strong);
|
||||
padding: 0 16px;
|
||||
|
|
|
|||
|
|
@ -55,6 +55,12 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {
|
|||
LocationHelper.update(locationParams, 'partial');
|
||||
}, []);
|
||||
|
||||
const getCodeEditorHeight = () => {
|
||||
const mainDiv = document.getElementById('content-container-id');
|
||||
const height = mainDiv?.getBoundingClientRect().height - 59;
|
||||
return `${height}px`;
|
||||
};
|
||||
|
||||
const onShowCheatSheet = useCallback(() => {
|
||||
setIsCheatSheetVisible(true);
|
||||
}, []);
|
||||
|
|
@ -166,7 +172,7 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {
|
|||
width={'95%'}
|
||||
>
|
||||
<div className={cx('container-wrapper')}>
|
||||
<div className={cx('container')}>
|
||||
<div className={cx('container')} id={'content-container-id'}>
|
||||
<TemplatesAlertGroupsList
|
||||
alertReceiveChannelId={id}
|
||||
onEditPayload={onEditPayload}
|
||||
|
|
@ -183,7 +189,7 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {
|
|||
<>
|
||||
<div className={cx('template-block-codeeditor')}>
|
||||
<div className={cx('template-editor-block-title')}>
|
||||
<HorizontalGroup justify="space-between">
|
||||
<HorizontalGroup justify="space-between" wrap>
|
||||
<Text>Template editor</Text>
|
||||
|
||||
<Button variant="secondary" fill="outline" onClick={onShowCheatSheet} icon="book" size="sm">
|
||||
|
|
@ -196,7 +202,7 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {
|
|||
value={changedTemplateBody}
|
||||
data={templates}
|
||||
showLineNumbers={true}
|
||||
height={'85vh'}
|
||||
height={getCodeEditorHeight()}
|
||||
onChange={getChangeHandler()}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,3 +13,8 @@
|
|||
.message code {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
.image-result img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,6 @@ const TemplatePreview = observer((props: TemplatePreviewProps) => {
|
|||
}, 1000);
|
||||
|
||||
useEffect(handleTemplateBodyChange, [templateBody, payload]);
|
||||
// onResult(result);
|
||||
|
||||
return result ? (
|
||||
<>
|
||||
|
|
@ -93,12 +92,20 @@ const TemplatePreview = observer((props: TemplatePreviewProps) => {
|
|||
)}
|
||||
</Text>
|
||||
) : (
|
||||
<div
|
||||
className={cx('message')}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: sanitize(result.preview || ''),
|
||||
}}
|
||||
/>
|
||||
<>
|
||||
{templateName.includes('image') ? (
|
||||
<div className={cx('image-result')}>
|
||||
<img src={result.preview} />
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={cx('message')}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: sanitize(result.preview.replace(/\n/g, '<br />') || ''),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -27,6 +27,15 @@
|
|||
padding-left: 0;
|
||||
}
|
||||
|
||||
.alert-groups-list-item {
|
||||
cursor: pointer;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.alert-groups-list-item:hover {
|
||||
background-color: var(--background-secondary);
|
||||
}
|
||||
|
||||
.alert-groups-editor {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,12 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
|
|||
.then((result) => setAlertGroupsList(result.slice(0, 30)));
|
||||
}, []);
|
||||
|
||||
const getCodeEditorHeight = () => {
|
||||
const mainDiv = document.getElementById('content-container-id');
|
||||
const height = mainDiv?.getBoundingClientRect().height - 59;
|
||||
return `${height}px`;
|
||||
};
|
||||
|
||||
const getChangeHandler = () => {
|
||||
return debounce((value: string) => {
|
||||
onEditPayload(value);
|
||||
|
|
@ -65,7 +71,7 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className={cx('template-block-list')}>
|
||||
<div className={cx('template-block-list')} id="content-container-id">
|
||||
{selectedAlertPayload ? (
|
||||
<>
|
||||
{isEditMode ? (
|
||||
|
|
@ -83,7 +89,7 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
|
|||
<MonacoEditor
|
||||
value={JSON.stringify(selectedAlertPayload, null, 4)}
|
||||
data={templates}
|
||||
height={'85vh'}
|
||||
height={getCodeEditorHeight()}
|
||||
onChange={getChangeHandler()}
|
||||
showLineNumbers
|
||||
useAutoCompleteList={false}
|
||||
|
|
@ -110,7 +116,7 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
|
|||
value={JSON.stringify(selectedAlertPayload, null, 4)}
|
||||
data={undefined}
|
||||
disabled
|
||||
height={'85vh'}
|
||||
height={getCodeEditorHeight()}
|
||||
onChange={getChangeHandler()}
|
||||
showLineNumbers
|
||||
useAutoCompleteList={false}
|
||||
|
|
@ -147,7 +153,7 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
|
|||
data={templates}
|
||||
monacoOptions={MONACO_PAYLOAD_OPTIONS}
|
||||
showLineNumbers={false}
|
||||
height={'85vh'}
|
||||
height={getCodeEditorHeight()}
|
||||
onChange={getChangeHandler()}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -175,10 +181,12 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
|
|||
<>
|
||||
{alertGroupsList.map((alertGroup) => {
|
||||
return (
|
||||
<div key={alertGroup.pk}>
|
||||
<Button fill="text" onClick={() => getAlertGroupPayload(alertGroup.pk)}>
|
||||
{getAlertGroupName(alertGroup)}
|
||||
</Button>
|
||||
<div
|
||||
key={alertGroup.pk}
|
||||
onClick={() => getAlertGroupPayload(alertGroup.pk)}
|
||||
className={cx('alert-groups-list-item')}
|
||||
>
|
||||
<Text type="link"> {getAlertGroupName(alertGroup)}</Text>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1059,7 +1059,7 @@ const IntegrationHeader: React.FC<IntegrationHeaderProps> = ({
|
|||
|
||||
if (
|
||||
!alertReceiveChannel.is_available_for_integration_heartbeat ||
|
||||
alertReceiveChannel.heartbeat?.last_heartbeat_time_verbal === null
|
||||
!alertReceiveChannel.heartbeat?.last_heartbeat_time_verbal
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue