jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix alert trigger name

Browse source
This commit is contained in:
nick-delirium 2023-02-21 15:19:16 +01:00
parent f13aadb34a
commit bc227dc450
2 changed files with 34 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
View file

@ -42,9 +42,8 @@ const getNotifyChannel = (alert: Record<string, any>, webhooks: Array<any>) => {
' (' +
alert.msteamsInput
.map((channelId: number) => {
return (
webhooks.find((hook) => hook.webhookId === channelId && hook.type === 'msteams')?.name
);
return webhooks.find((hook) => hook.webhookId === channelId && hook.type === 'msteams')
?.name;
})
.join(', ') +
')'
@ -58,7 +57,7 @@ const getNotifyChannel = (alert: Record<string, any>, webhooks: Array<any>) => {
}
}
if (alert.msteams) {
str += (str === '' ? '' : ' and ') + 'MS Teams'
str += (str === '' ? '' : ' and ') + 'MS Teams';
if (alert.msteamsInput.length > 0) {
str += getMsTeamsChannels();
}
@ -79,10 +78,11 @@ interface Props extends RouteComponentProps {
init: (alert: Alert) => void;
demo?: boolean;
webhooks: Array<any>;
triggerOptions: Record<string, any>;
}
function AlertListItem(props: Props) {
const { alert, siteId, history, init, demo, webhooks } = props;
const { alert, siteId, history, init, demo, webhooks, triggerOptions } = props;
if (!alert) {
return null;
@ -95,6 +95,11 @@ function AlertListItem(props: Props) {
history.push(path);
};
const formTriggerName = () =>
Number.isInteger(alert.query.left) && triggerOptions
? triggerOptions.find((opt: { value: any, label: string }) => opt.value === alert.query.left).label
: alert.query.left;
return (
<div
className={cn('px-6', !demo ? 'hover:bg-active-blue cursor-pointer border-t' : '')}
@ -118,29 +123,36 @@ function AlertListItem(props: Props) {
{demo
? DateTime.fromMillis(+new Date()).toFormat('LLL dd, yyyy, hh:mm a')
: checkForRecent(
DateTime.fromMillis(alert.createdAt || +new Date()),
'LLL dd, yyyy, hh:mm a'
)}
DateTime.fromMillis(alert.createdAt || +new Date()),
'LLL dd, yyyy, hh:mm a'
)}
</div>
</div>
<div className="color-gray-medium px-2 pb-2">
{'When the '}
<span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas' }}>{alert.detectionMethod}</span>
<span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas' }}>
{alert.detectionMethod}
</span>
{' of '}
<span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas' }}>{alert.seriesName || alert.query.left}</span>
<span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas' }}>
{triggerOptions ? formTriggerName() : alert.seriesName}
</span>
{' is '}
<span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas' }}>
{alert.query.operator}
{numberWithCommas(alert.query.right)}{alert.change === 'percent' ? '%' : alert.metric?.unit}
{numberWithCommas(alert.query.right)}
{alert.change === 'percent' ? '%' : alert.metric?.unit}
</span>
{' over the past '}
<span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas' }}>{getThreshold(
alert.currentPeriod)}</span>
<span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas' }}>
{getThreshold(alert.currentPeriod)}
</span>
{alert.detectionMethod === 'change' ? (
<>
{' compared to the previous '}
<span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas ' }}>{getThreshold(
alert.previousPeriod)}</span>
<span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas ' }}>
{getThreshold(alert.previousPeriod)}
</span>
</>
) : null}
{', notify me on '}

8
frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
View file

@ -278,7 +278,13 @@ const NewAlert = (props: IProps) => {
<div className="bg-white mt-4 border rounded mb-10">
{instance && (
<AlertListItem alert={instance} demo siteId="" init={() => null} webhooks={webhooks} />
<AlertListItem
alert={instance}
triggerOptions={triggerOptions}
demo
siteId=""
init={() => null}
webhooks={webhooks} />
)}
</div>
</>