From 7ce1faaf6c83e6c282e4b7643997d46af8ea05b6 Mon Sep 17 00:00:00 2001
From: michelia <michelia@seal.io>
Date: Tue, 9 Jun 2026 11:11:56 +0800
Subject: [PATCH] fix(usage): format Last Active as local time on GPU & Storage
 tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Last Active column had no renderer, so it dumped the raw ISO timestamp
(gpustack/gpustack#5523). It's a UTC instant (max bucket hour), so format it
to the user's local time with dayjs — matching the Resource Events time
column and the rest of the product. (Token Last Active is a daily date, not
an instant, so it stays a plain date with no timezone shift.)
---
 .../usage/components/gpu-instances-tab.tsx    | 25 ++++++++-----------
 src/pages/usage/components/storage-tab.tsx    | 19 +++++++-------
 2 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/src/pages/usage/components/gpu-instances-tab.tsx b/src/pages/usage/components/gpu-instances-tab.tsx
index 6f5d60eb..754d45b4 100644
--- a/src/pages/usage/components/gpu-instances-tab.tsx
+++ b/src/pages/usage/components/gpu-instances-tab.tsx
@@ -328,6 +328,13 @@ const GpuInstancesTab: React.FC = () => {
         />
       )
     };
+    // Last Active is a UTC instant (max bucket hour) → show formatted local time.
+    const lastActiveCol = {
+      title: intl.formatMessage({ id: 'usage.table.lastActive' }),
+      dataIndex: 'last_active',
+      key: 'last_active',
+      render: (v?: string) => (v ? dayjs(v).format('YYYY-MM-DD HH:mm:ss') : '-')
+    };
     if (activeTableTab === 'gpu_type') {
       return [
         instanceTypeColType,
@@ -337,11 +344,7 @@ const GpuInstancesTab: React.FC = () => {
           dataIndex: 'active_instances',
           key: 'active_instances'
         },
-        {
-          title: intl.formatMessage({ id: 'usage.table.lastActive' }),
-          dataIndex: 'last_active',
-          key: 'last_active'
-        }
+        lastActiveCol
       ];
     }
     if (activeTableTab === 'instance') {
@@ -353,11 +356,7 @@ const GpuInstancesTab: React.FC = () => {
         },
         instanceTypeColInstance,
         ...baseValueCols,
-        {
-          title: intl.formatMessage({ id: 'usage.table.lastActive' }),
-          dataIndex: 'last_active',
-          key: 'last_active'
-        }
+        lastActiveCol
       ];
     }
     // user tab
@@ -368,11 +367,7 @@ const GpuInstancesTab: React.FC = () => {
         key: 'user_name'
       },
       ...baseValueCols,
-      {
-        title: intl.formatMessage({ id: 'usage.table.lastActive' }),
-        dataIndex: 'last_active',
-        key: 'last_active'
-      }
+      lastActiveCol
     ];
   }, [activeTableTab, tableSort, intl]);
 
diff --git a/src/pages/usage/components/storage-tab.tsx b/src/pages/usage/components/storage-tab.tsx
index 5b72681d..2376498b 100644
--- a/src/pages/usage/components/storage-tab.tsx
+++ b/src/pages/usage/components/storage-tab.tsx
@@ -293,6 +293,13 @@ const StorageTab: React.FC = () => {
         render: (v: number) => (v ?? 0).toFixed(2)
       }
     ];
+    // Last Active is a UTC instant (max bucket hour) → show formatted local time.
+    const lastActiveCol = {
+      title: intl.formatMessage({ id: 'usage.table.lastActive' }),
+      dataIndex: 'last_active',
+      key: 'last_active',
+      render: (v?: string) => (v ? dayjs(v).format('YYYY-MM-DD HH:mm:ss') : '-')
+    };
     if (activeTableTab === 'volume') {
       return [
         {
@@ -314,11 +321,7 @@ const StorageTab: React.FC = () => {
           render: (v?: number) => (v ? `${Math.round(v / 1024)}GB` : '-')
         },
         ...valueCols,
-        {
-          title: intl.formatMessage({ id: 'usage.table.lastActive' }),
-          dataIndex: 'last_active',
-          key: 'last_active'
-        }
+        lastActiveCol
       ];
     }
     return [
@@ -333,11 +336,7 @@ const StorageTab: React.FC = () => {
         dataIndex: 'active_volumes',
         key: 'active_volumes'
       },
-      {
-        title: intl.formatMessage({ id: 'usage.table.lastActive' }),
-        dataIndex: 'last_active',
-        key: 'last_active'
-      }
+      lastActiveCol
     ];
   }, [activeTableTab, tableSort, intl]);