feat(FR-1575): merge admin dashboard into user dashboard (#4425)

Resolves #4424 ([FR-1575](https://lablup.atlassian.net/browse/FR-1575))

# Disable Admin Dashboard Menu Item and Enhance Dashboard Page for Superadmins

This PR temporarily disables the Admin Dashboard menu item with a TODO comment to re-enable it when the page is ready. It also enhances the Dashboard page for superadmins by:

1. Renaming "My Sessions" to "Active Sessions" for superadmins
2. Adding Agent Stats component for superadmins when supported by the backend
3. Adding Active Agents component for superadmins

These changes provide superadmins with a more comprehensive view of system activity directly from the dashboard.

**Checklist:**

- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

[FR-1575]: https://lablup.atlassian.net/browse/FR-1575?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: agatha197

react/src/components/MainLayout/WebUISider.tsx

@@ -260,18 +260,19 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
   ]);
 
   const adminMenu: MenuProps['items'] = filterOutEmpty([
+    // TODO: Enable the menu item when the page is ready.
     // WARN: Currently only superadmins can access AdminDashboardPage.
     // To place the Admin Dashboard menu item at the top of adminMenu,
     // add it to adminMenu instead of superAdminMenu:
-    currentUserRole === 'superadmin' && {
-      label: (
-        <WebUILink to="/admin-dashboard">
-          {t('webui.menu.AdminDashboard')}
-        </WebUILink>
-      ),
-      icon: <DashboardOutlined style={{ color: token.colorInfo }} />,
-      key: 'admin-dashboard',
-    },
+    // currentUserRole === 'superadmin' && {
+    //   label: (
+    //     <WebUILink to="/admin-dashboard">
+    //       {t('webui.menu.AdminDashboard')}
+    //     </WebUILink>
+    //   ),
+    //   icon: <DashboardOutlined style={{ color: token.colorInfo }} />,
+    //   key: 'admin-dashboard',
+    // },
     {
       label: <WebUILink to="/credential">{t('webui.menu.Users')}</WebUILink>,
       icon: <UserOutlined style={{ color: token.colorInfo }} />,

react/src/pages/DashboardPage.tsx

@@ -7,7 +7,11 @@ import SessionCountDashboardItem from '../components/SessionCountDashboardItem';
 import TotalResourceWithinResourceGroup, {
   useIsAvailableTotalResourceWithinResourceGroup,
 } from '../components/TotalResourceWithinResourceGroup';
-import { INITIAL_FETCH_KEY, useFetchKey } from '../hooks';
+import {
+  INITIAL_FETCH_KEY,
+  useFetchKey,
+  useSuspendedBackendaiClient,
+} from '../hooks';
 import { useBAISettingUserState } from '../hooks/useBAISetting';
 import {
   useCurrentProjectValue,
@@ -20,6 +24,8 @@ import _ from 'lodash';
 import { Suspense, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery } from 'react-relay';
+import ActiveAgents from 'src/components/ActiveAgents';
+import AgentStats from 'src/components/AgentStats';
 import { useCurrentUserRole } from 'src/hooks/backendai';
 
 const DashboardPage: React.FC = () => {
@@ -29,6 +35,7 @@ const DashboardPage: React.FC = () => {
   const currentProject = useCurrentProjectValue();
   const currentResourceGroup = useCurrentResourceGroupValue();
   const userRole = useCurrentUserRole();
+  const baiClient = useSuspendedBackendaiClient();
 
   const [fetchKey, updateFetchKey] = useFetchKey();
   const [isPendingIntervalRefetch, startIntervalRefetchTransition] =
@@ -40,6 +47,8 @@ const DashboardPage: React.FC = () => {
   const isAvailableTotalResourcePanel =
     useIsAvailableTotalResourceWithinResourceGroup();
 
+  const isAgentStatsSupported = baiClient.supports('agent-stats');
+
   const queryRef = useLazyLoadQuery<DashboardPageQuery>(
     graphql`
       query DashboardPageQuery(
@@ -59,6 +68,7 @@ const DashboardPage: React.FC = () => {
             isSuperAdmin: $isSuperAdmin
             agentNodeFilter: $agentNodeFilter
           )
+        ...AgentStatsFragment @include(if: $isSuperAdmin) @alias
       }
     `,
     {
@@ -98,9 +108,13 @@ const DashboardPage: React.FC = () => {
             }
           >
             <SessionCountDashboardItem
-              title={t('session.MySessions')}
               queryRef={queryRef}
               isRefetching={isPendingIntervalRefetch}
+              title={
+                _.isEqual(userRole, 'superadmin')
+                  ? t('session.ActiveSessions')
+                  : t('session.MySessions')
+              }
             />
           </Suspense>
         ),
@@ -157,6 +171,57 @@ const DashboardPage: React.FC = () => {
         ),
       },
     },
+    _.isEqual(userRole, 'superadmin') &&
+      isAgentStatsSupported &&
+      queryRef.AgentStatsFragment && {
+        id: 'agentStats',
+        rowSpan: 2,
+        columnSpan: 2,
+        definition: {
+          minRowSpan: 2,
+          minColumnSpan: 2,
+        },
+        data: {
+          content: (
+            <Suspense
+              fallback={
+                <Skeleton
+                  active
+                  style={{ padding: `0px ${token.marginMD}px` }}
+                />
+              }
+            >
+              <AgentStats
+                queryRef={queryRef.AgentStatsFragment}
+                isRefetching={isPendingIntervalRefetch}
+              />
+            </Suspense>
+          ),
+        },
+      },
+    _.isEqual(userRole, 'superadmin') && {
+      id: 'activeAgents',
+      rowSpan: 4,
+      columnSpan: 4,
+      definition: {
+        minRowSpan: 3,
+        minColumnSpan: 4,
+      },
+      data: {
+        content: (
+          <Suspense
+            fallback={
+              <Skeleton active style={{ padding: `0px ${token.marginMD}px` }} />
+            }
+          >
+            <ActiveAgents
+              fetchKey={fetchKey}
+              onChangeFetchKey={() => updateFetchKey()}
+            />
+          </Suspense>
+        ),
+      },
+    },
     {
       id: 'recentlyCreatedSession',
       rowSpan: 3,