From b1918eb8c4055157b77a2888744a947efa0f59fd Mon Sep 17 00:00:00 2001
From: Noble Mittal <noblemittal@outlook.com>
Date: Fri, 20 Sep 2024 02:08:23 +0530
Subject: [PATCH] VTAdmin: Show time elapsed in seconds instead of dayjs
 relative time

Signed-off-by: Noble Mittal <noblemittal@outlook.com>
---
 web/vtadmin/src/components/routes/Transactions.tsx |  6 ++++--
 web/vtadmin/src/util/time.ts                       | 10 +++++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/web/vtadmin/src/components/routes/Transactions.tsx b/web/vtadmin/src/components/routes/Transactions.tsx
index f6367e3edc2..8a40a039394 100644
--- a/web/vtadmin/src/components/routes/Transactions.tsx
+++ b/web/vtadmin/src/components/routes/Transactions.tsx
@@ -27,7 +27,7 @@ import { Select } from '../inputs/Select';
 import { FetchTransactionsParams } from '../../api/http';
 import { formatTransactionState } from '../../util/transactions';
 import { ShardLink } from '../links/ShardLink';
-import { formatDateTime, formatRelativeTime } from '../../util/time';
+import { formatDateTime, formatRelativeTimeInSeconds } from '../../util/time';
 import { orderBy } from 'lodash-es';
 
 const COLUMNS = ['ID', 'State', 'Participants', 'Time Created'];
@@ -78,7 +78,9 @@ export const Transactions = () => {
                     </DataCell>
                     <DataCell>
                         <div className="font-sans whitespace-nowrap">{formatDateTime(row.time_created)}</div>
-                        <div className="font-sans text-sm text-secondary">{formatRelativeTime(row.time_created)}</div>
+                        <div className="font-sans text-sm text-secondary">
+                            {formatRelativeTimeInSeconds(row.time_created)}
+                        </div>
                     </DataCell>
                 </tr>
             );
diff --git a/web/vtadmin/src/util/time.ts b/web/vtadmin/src/util/time.ts
index c9f0017d011..82703d60281 100644
--- a/web/vtadmin/src/util/time.ts
+++ b/web/vtadmin/src/util/time.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as dayjs from 'dayjs';
+import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
@@ -44,3 +44,11 @@ export const formatRelativeTime = (timestamp: number | Long | null | undefined):
 export const formatDateTimeShort = (timestamp: number | Long | null | undefined): string | null => {
     return format(timestamp, 'MM/DD/YY HH:mm:ss Z');
 };
+
+export const formatRelativeTimeInSeconds = (timestamp: number | Long | null | undefined): string | null => {
+    const u = parse(timestamp);
+    if (!u) return null;
+    const currentTime = dayjs();
+    const secondsElapsed = currentTime.diff(u, 'second');
+    return `${secondsElapsed} seconds ago`;
+};