From 1df6910decd08f661b144c3db298de5093944df1 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 5 Jul 2022 10:00:49 +0200
Subject: [PATCH] fix(ui) - slowest domain metric data as per the api changes

---
 .../PredefinedWidgets/SlowestDomains/SlowestDomains.tsx     | 6 +++---
 .../app/components/Dashboard/Widgets/SlowestDomains/Bar.js  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx
index 0f2e6bf54..c6adbeff6 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx
@@ -10,7 +10,7 @@ interface Props {
 }
 function SlowestDomains(props: Props) {
     const { data, metric } = props;
-    const firstAvg = metric.data.chart[0] && metric.data.chart[0].errorsCount;
+    const firstAvg = metric.data.chart[0] && metric.data.chart[0].value;
     return (
         <NoContent
           size="small"
@@ -22,8 +22,8 @@ function SlowestDomains(props: Props) {
               <Bar
                 key={i}
                 className="mb-2"
-                avg={numberWithCommas(Math.round(item.errorsCount))}
-                width={Math.round((item.errorsCount * 100) / firstAvg) - 10}
+                avg={numberWithCommas(Math.round(item.value))}
+                width={Math.round((item.value * 100) / firstAvg) - 10}
                 domain={item.domain}
                 color={Styles.colors[i]}
               />
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestDomains/Bar.js b/frontend/app/components/Dashboard/Widgets/SlowestDomains/Bar.js
index e680a0efb..99ed6af05 100644
--- a/frontend/app/components/Dashboard/Widgets/SlowestDomains/Bar.js
+++ b/frontend/app/components/Dashboard/Widgets/SlowestDomains/Bar.js
@@ -6,7 +6,7 @@ const Bar = ({ className = '', width = 0, avg, domain, color }) => {
     <div className={className}>
       <div className="flex items-center">
         <div className={stl.bar} style={{ width: `${width < 5 ? 5 : width }%`, backgroundColor: color }}></div>
-        <div className="ml-2">
+        <div className="ml-2 shrink-0">
           <span className="font-medium">{avg}</span>
           <span> ms</span>
         </div>