From 7ed284fb7baaba27afa19fca92edc5e79dfd63ca Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Wed, 20 Apr 2022 18:57:52 +0200
Subject: [PATCH] fix: Add K display for new logs count values over 1000

---
 .../interfaces/Settings/Logs/PreviewFilterPanel.tsx       | 2 +-
 studio/tests/pages/projects/PreviewFilterPanel.test.js    | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx b/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx
index ccb80f13030..0c895d06900 100644
--- a/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx
+++ b/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx
@@ -84,7 +84,7 @@ const PreviewFilterPanel: FC<Props> = ({
             >
               <div className="absolute z-20">
                 <Typography.Text style={{ fontSize: '0.6rem' }} className="opacity-80">
-                  {newCount}
+                  {newCount > 1000 ? `${Math.floor(newCount / 100) / 10}K` : newCount}
                 </Typography.Text>
               </div>
               <div className="bg-green-800 rounded-full w-full h-full animate-ping opacity-60"></div>
diff --git a/studio/tests/pages/projects/PreviewFilterPanel.test.js b/studio/tests/pages/projects/PreviewFilterPanel.test.js
index b478aabcacf..64f6a249da9 100644
--- a/studio/tests/pages/projects/PreviewFilterPanel.test.js
+++ b/studio/tests/pages/projects/PreviewFilterPanel.test.js
@@ -93,3 +93,11 @@ test.todo('timestamp to/from filter value change')
 //   await screen.findByText('Custom')
 //   await screen.findByTitle(/Clear timestamp filter/)
 // })
+
+
+
+test('shortened count to K', async () => {
+  render(<PreviewFilterPanel newCount={1234} />)
+  await screen.findByText(/1\.2K/)
+})
+