From 4aa80a23b5417bb16b28bf2dfebbb9924c064bbb Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 18 Nov 2022 12:35:36 +0100
Subject: [PATCH] change(ui) - alert list item number formatting

---
 .../components/Dashboard/components/Alerts/AlertListItem.tsx   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
index aaecc0b14..3e8a68f11 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Icon } from 'UI';
 import { checkForRecent } from 'App/date';
 import { withSiteId, alertEdit } from 'App/routes';
+import { numberWithCommas } from 'App/utils';
 // @ts-ignore
 import { DateTime } from 'luxon';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
@@ -108,7 +109,7 @@ function AlertListItem(props: Props) {
         {' is '}
         <span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas' }}>
           {alert.query.operator}
-          {alert.query.right} {alert.metric.unit}
+          {numberWithCommas(alert.query.right)} {alert.metric.unit}
         </span>
         {' over the past '}
         <span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas' }}>{getThreshold(alert.currentPeriod)}</span>