feat(FR-1494): refactor session notification with dedicated component for improved UX (#4359)

yomybaby · yomybaby · commit cf4bbabcce21 · 2025-09-29T13:23:42.000Z
Resolves #4306 ([FR-1494](https://lablup.atlassian.net/browse/FR-1494)) ## Summary Refactored session notification component to improve UX for session creation and app launch. Created a dedicated `BAIComputeSessionNodeNotificationItem` component to handle compute session notifications with better state management and auto-refresh capabilities. ## Changes - Created new `BAIComputeSessionNodeNotificationItem.tsx` component with: - Auto-refresh interval based on session status - Automatic cleanup when session terminates - Improved status tracking and UI feedback - Refactored `BAINodeNotificationItem.tsx` to use the new dedicated component - Fixed ESLint warnings and improved code organization ## Why Per FR-1494, this improves the user experience for session creation and app launch by providing better real-time feedback and status updates through a dedicated notification component. [FR-1494]: https://lablup.atlassian.net/browse/FR-1494?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
diff --git a/react/src/components/BAIComputeSessionNodeNotificationItem.tsx b/react/src/components/BAIComputeSessionNodeNotificationItem.tsx
@@ -0,0 +1,143 @@
+import SessionActionButtons from './ComputeSessionNodeItems/SessionActionButtons';
+import SessionStatusTag from './ComputeSessionNodeItems/SessionStatusTag';
+import { useUpdateEffect } from 'ahooks';
+import { BAIFlex, BAILink, BAINotificationItem } from 'backend.ai-ui';
+import dayjs from 'dayjs';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  fetchQuery,
+  graphql,
+  useFragment,
+  useRelayEnvironment,
+} from 'react-relay';
+import { BAIComputeSessionNodeNotificationItemFragment$key } from 'src/__generated__/BAIComputeSessionNodeNotificationItemFragment.graphql';
+import { BAIComputeSessionNodeNotificationItemRefreshQuery } from 'src/__generated__/BAIComputeSessionNodeNotificationItemRefreshQuery.graphql';
+import {
+  NotificationState,
+  useSetBAINotification,
+} from 'src/hooks/useBAINotification';
+import { useInterval } from 'src/hooks/useIntervalValue';
+
+interface BAINodeNotificationItemProps {
+  notification: NotificationState;
+  sessionFrgmt: BAIComputeSessionNodeNotificationItemFragment$key | null;
+  showDate?: boolean;
+}
+const BAIComputeSessionNodeNotificationItem: React.FC<
+  BAINodeNotificationItemProps
+> = ({ sessionFrgmt, showDate, notification }) => {
+  const { destroyNotification } = useSetBAINotification();
+  const { t } = useTranslation();
+  const node = useFragment(
+    graphql`
+      fragment BAIComputeSessionNodeNotificationItemFragment on ComputeSessionNode {
+        row_id
+        id
+        name
+        status
+        ...SessionActionButtonsFragment
+        ...SessionStatusTagFragment
+      }
+    `,
+    sessionFrgmt,
+  );
+
+  // TODO: delete this when Status subscription is implemented
+  const [delay, setDelay] = useState<number | null>(null);
+  UNSAFE_useAutoRefreshInterval(node?.id || '', delay);
+  useEffect(() => {
+    if (
+      !node?.status ||
+      node?.status === 'TERMINATED' ||
+      node?.status === 'CANCELLED'
+    ) {
+      setDelay(null);
+    } else if (node?.status === 'RUNNING') {
+      setDelay(15000);
+    } else {
+      setDelay(3000);
+    }
+  }, [node?.status]);
+  // ---
+
+  useUpdateEffect(() => {
+    if (node?.status === 'TERMINATED' || node?.status === 'CANCELLED') {
+      setTimeout(() => {
+        destroyNotification(notification.key);
+      }, 3000);
+    }
+  }, [node?.status]);
+
+  return (
+    node && (
+      <BAINotificationItem
+        title={
+          <span>
+            {t('general.Session')}:&nbsp;
+            <BAILink
+              style={{
+                fontWeight: 'normal',
+              }}
+              to={{
+                pathname: '/session',
+                search: node.row_id
+                  ? new URLSearchParams({
+                      sessionDetail: node.row_id,
+                    }).toString()
+                  : undefined,
+              }}
+              onClick={() => {
+                destroyNotification(notification.key);
+              }}
+            >{`${node.name}`}</BAILink>
+          </span>
+        }
+        description={
+          <BAIFlex justify="between">
+            <SessionStatusTag
+              sessionFrgmt={node || null}
+              showQueuePosition={false}
+              showTooltip={false}
+            />
+            <SessionActionButtons
+              compact
+              size="small"
+              sessionFrgmt={node || null}
+              hiddenButtonKeys={['containerCommit']}
+            />
+          </BAIFlex>
+        }
+        footer={
+          showDate ? dayjs(notification.created).format('lll') : undefined
+        }
+      />
+    )
+  );
+};
+
+export default BAIComputeSessionNodeNotificationItem;
+
+const UNSAFE_useAutoRefreshInterval = (
+  sessionId: string,
+  delay: number | null,
+) => {
+  // const [delay, setDelay] = useState<number|null>(3000);
+  const relayEnv = useRelayEnvironment();
+
+  useInterval(() => {
+    fetchQuery<BAIComputeSessionNodeNotificationItemRefreshQuery>(
+      relayEnv,
+      graphql`
+        query BAIComputeSessionNodeNotificationItemRefreshQuery(
+          $id: GlobalIDField!
+        ) {
+          compute_session_node(id: $id) {
+            ...BAINodeNotificationItemFragment
+          }
+        }
+      `,
+      { id: sessionId },
+    ).toPromise();
+  }, delay);
+};
diff --git a/react/src/components/BAINodeNotificationItem.tsx b/react/src/components/BAINodeNotificationItem.tsx
@@ -1,86 +1,40 @@
-import {
-  NotificationState,
-  useSetBAINotification,
-} from '../hooks/useBAINotification';
-import SessionActionButtons from './ComputeSessionNodeItems/SessionActionButtons';
-import SessionStatusTag from './ComputeSessionNodeItems/SessionStatusTag';
-import { BAIFlex, BAILink, BAINotificationItem } from 'backend.ai-ui';
-import dayjs from 'dayjs';
+import { NotificationState } from '../hooks/useBAINotification';
+import BAIComputeSessionNodeNotificationItem from './BAIComputeSessionNodeNotificationItem';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import { graphql, useRefetchableFragment } from 'react-relay';
 import { BAINodeNotificationItemFragment$key } from 'src/__generated__/BAINodeNotificationItemFragment.graphql';
 
+const nodeFragmentOperation = graphql`
+  fragment BAINodeNotificationItemFragment on Node
+  @refetchable(queryName: "BAINodeNotificationItemRefetchQuery") {
+    ... on ComputeSessionNode {
+      __typename
+      status
+      name
+      row_id
+      ...BAIComputeSessionNodeNotificationItemFragment
+        @alias(as: "sessionFrgmt")
+    }
+    ... on VirtualFolderNode {
+      __typename
+      status
+    }
+  }
+`;
+
 const BAINodeNotificationItem: React.FC<{
   notification: NotificationState;
   nodeFrgmt: BAINodeNotificationItemFragment$key | null;
   showDate?: boolean;
 }> = ({ notification, nodeFrgmt, showDate }) => {
-  const { destroyNotification } = useSetBAINotification();
-  const { t } = useTranslation();
-  const [node] = useRefetchableFragment(
-    graphql`
-      fragment BAINodeNotificationItemFragment on Node
-      @refetchable(queryName: "BAINodeNotificationItemRefetchQuery") {
-        ... on ComputeSessionNode {
-          __typename
-          status
-          name
-          row_id
-          ...SessionActionButtonsFragment @alias(as: "sessionFrgmt")
-          ...SessionStatusTagFragment @alias(as: "sessionTagFrgmt")
-        }
-        ... on VirtualFolderNode {
-          __typename
-          status
-        }
-      }
-    `,
-    nodeFrgmt,
-  );
+  const [node] = useRefetchableFragment(nodeFragmentOperation, nodeFrgmt);
 
   if (node?.__typename === 'ComputeSessionNode') {
     return (
-      <BAINotificationItem
-        title={
-          <span>
-            {t('general.Session')}:&nbsp;
-            <BAILink
-              style={{
-                fontWeight: 'normal',
-              }}
-              to={{
-                pathname: '/session',
-                search: node.row_id
-                  ? new URLSearchParams({
-                      sessionDetail: node.row_id,
-                    }).toString()
-                  : undefined,
-              }}
-              onClick={() => {
-                destroyNotification(notification.key);
-              }}
-            >{`${node.name}`}</BAILink>
-          </span>
-        }
-        description={
-          <BAIFlex justify="between">
-            <SessionStatusTag
-              sessionFrgmt={node.sessionTagFrgmt || null}
-              showQueuePosition={false}
-              showTooltip={false}
-            />
-            <SessionActionButtons
-              compact
-              size="small"
-              sessionFrgmt={node.sessionFrgmt || null}
-              hiddenButtonKeys={['containerCommit']}
-            />
-          </BAIFlex>
-        }
-        footer={
-          showDate ? dayjs(notification.created).format('lll') : undefined
-        }
+      <BAIComputeSessionNodeNotificationItem
+        notification={notification}
+        sessionFrgmt={node.sessionFrgmt || null}
+        showDate={showDate}
       />
     );
   } else if (node?.__typename === 'VirtualFolderNode') {
