fix: use starts_at instead of created_at for session reservation & el…

…apsed time (#2584)

<!--
Please precisely, concisely, and concretely describe what this PR changes, the rationale behind codes,
and how it affects the users and other developers.
-->

### This PR resolves [#2582 ](#2582) issue
### TL;DR

This PR resolves issue that session reservation time and session elapsed time were incorrectly displayed

###  Why make this change?

session reservation time should mean session start time, not session creation time
session elapsed time should be  caculated by session start time,  not session creation time

### What changed?

session reservation time means session start time
session elapsed time is calculated based on the session start time and session terminate time
session elapsed time is displayed only after the session starts

### How to test?

1. set a session start time
2. start a session
3. check that reservation time is displayed correctly
4. check that elapsed time is displayed after the session starts and elapsed time is calculated correctly

react/src/index.tsx

@@ -13,6 +13,7 @@ import { useSuspendedBackendaiClient } from './hooks';
 import { useCurrentResourceGroupValue } from './hooks/useCurrentProject';
 import { ThemeModeProvider } from './hooks/useThemeMode';
 import { Tag, theme } from 'antd';
+import dayjs from 'dayjs';
 import { Provider as JotaiProvider } from 'jotai';
 import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom/client';
@@ -334,11 +335,14 @@ const ReservationTimeCounter = (props: ReactWebComponentProps) => {
   const { token } = theme.useToken();
 
   const { parsedValue } = useWebComponentInfo<{
-    created_at: string;
+    starts_at: string;
     terminated_at: string;
   }>();
 
   const baiClient = useSuspendedBackendaiClient();
+
+  if (dayjs(parsedValue.starts_at).isAfter(dayjs())) return null;
+
   return (
     <Flex>
       <Tag
@@ -361,7 +365,7 @@ const ReservationTimeCounter = (props: ReactWebComponentProps) => {
         <BAIIntervalText
           callback={() => {
             return baiClient.utils.elapsedTime(
-              parsedValue.created_at,
+              parsedValue.starts_at,
               parsedValue.terminated_at || null,
             );
           }}

src/components/backend-ai-session-list.ts

@@ -3883,13 +3883,15 @@ ${rowData.item[this.sessionNameField]}</pre
       // language=HTML
       html`
         <div class="layout vertical" style="padding:3px auto;">
-          <span>${rowData.item.created_at_hr}</span>
+          <span>
+            ${rowData.item.starts_at_hr || rowData.item.created_at_hr}
+          </span>
           <backend-ai-session-reservation-timer
             value="${JSON.stringify({
-              created_at: rowData.item.created_at,
+              starts_at: rowData.item.starts_at || rowData.item.created_at,
               terminated_at: rowData.item.terminated_at,
             })}"
-          />
+          ></backend-ai-session-reservation-timer>
         </div>
       `,
       root,