VTAdmin: Show time elapsed in seconds instead of dayjs relative time

Signed-off-by: Noble Mittal <[email protected]>

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>
             );

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`;
+};