From bc227dc450f54ee2359af3ee9ed099e59e38431f Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Tue, 21 Feb 2023 15:19:16 +0100
Subject: [PATCH] fix(ui): fix alert trigger name

---
 .../components/Alerts/AlertListItem.tsx       | 42 ++++++++++++-------
 .../Dashboard/components/Alerts/NewAlert.tsx  |  8 +++-
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
index 024cc734c..071dd204c 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
@@ -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 '}
diff --git a/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx b/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
index 717c7ea59..67a6bb459 100644
--- a/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
@@ -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>
     </>