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

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,