From 08d9a74055bfd70e2003d3fb6762a3d2b2b629e7 Mon Sep 17 00:00:00 2001
From: Vikrant Gupta <vikrant@signoz.io>
Date: Thu, 8 May 2025 13:44:02 +0530
Subject: [PATCH] fix(api-key): make the expires in human readable in api keys 
 (#7864)

* fix(api-key): human readable expires in

* fix(api-key): human readable expires in
---
 frontend/src/container/APIKeys/APIKeys.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/container/APIKeys/APIKeys.tsx b/frontend/src/container/APIKeys/APIKeys.tsx
index 191725e806..1593908f0e 100644
--- a/frontend/src/container/APIKeys/APIKeys.tsx
+++ b/frontend/src/container/APIKeys/APIKeys.tsx
@@ -27,6 +27,7 @@ import axios, { AxiosError } from 'axios';
 import cx from 'classnames';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
 import { useGetAllAPIKeys } from 'hooks/APIKeys/useGetAllAPIKeys';
 import { useNotifications } from 'hooks/useNotifications';
 import {
@@ -52,6 +53,8 @@ import { useCopyToClipboard } from 'react-use';
 import { APIKeyProps } from 'types/api/pat/types';
 import { USER_ROLES } from 'types/roles';
 
+dayjs.extend(relativeTime);
+
 export const showErrorNotification = (
 	notifications: NotificationInstance,
 	err: Error,
@@ -495,7 +498,7 @@ function APIKeys(): JSX.Element {
 										expiresIn <= 3 ? 'danger' : 'warning',
 									)}
 								>
-									<span className="dot" /> Expires in {expiresIn} Days
+									<span className="dot" /> Expires {dayjs().to(expiresOn)}
 								</div>
 							)}