lablup · yomybaby · Oct 21, 2025
diff --git a/packages/backend.ai-ui/src/components/BAIStatistic.tsx b/packages/backend.ai-ui/src/components/BAIStatistic.tsx
@@ -1,5 +1,5 @@
 import BAIFlex from './BAIFlex';
-import { theme, Typography, Tooltip } from 'antd';
+import { theme, Typography, Tooltip, Progress } from 'antd';
 import _ from 'lodash';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,8 +11,9 @@ export interface BAIStatisticProps {
   unit?: string;
   precision?: number;
   infinityDisplay?: string;
-  showProgress?: boolean;
+  progressMode?: 'ghost' | 'hidden' | 'normal';
   progressSteps?: number;
+  style?: React.CSSProperties;
 }
 
 const BAIStatistic: React.FC<BAIStatisticProps> = ({
@@ -22,11 +23,13 @@ const BAIStatistic: React.FC<BAIStatisticProps> = ({
   unit = '',
   precision = 2,
   infinityDisplay = '∞',
-  showProgress = false,
-  progressSteps = 12,
+  progressMode = 'hidden',
+  progressSteps = 20,
+  style,
 }) => {
   const { token } = theme.useToken();
   const { t } = useTranslation();
+  const showProgress = progressMode !== 'hidden';
 
   // Format number with precision
   const formatNumber = (value: number): string => {
@@ -41,26 +44,22 @@ const BAIStatistic: React.FC<BAIStatisticProps> = ({
     : formatNumber(current);
   const displayTotal = total !== undefined ? formatNumber(total) : undefined;
 
-  // Calculate progress position
-  const calculateProgress = (): number => {
+  const calculatePercent = (): number => {
     if (!showProgress || total === undefined || total === Infinity) return 0;
-    if (!_.isFinite(current) || !isFinite(total) || total === 0)
-      return progressSteps;
-    return _.isUndefined(current)
-      ? 0
-      : Math.round((current / total) * progressSteps);
+    if (!_.isFinite(current) || !isFinite(total) || total === 0) return 100;
+    return _.isUndefined(current) ? 0 : Math.round((current / total) * 100);
   };
 
-  const currentPosition = calculateProgress();
+  const percent = calculatePercent();
 
   return (
-    <BAIFlex direction="column" align="start">
+    <BAIFlex direction="column" align="start" style={style}>
       <Typography.Text
         style={{
           fontSize: token.fontSizeLG,
-          fontWeight: 600,
           marginBottom: 16,
           lineHeight: '1em',
+          color: token.colorTextSecondary,
         }}
       >
         {title}
@@ -95,37 +94,42 @@ const BAIStatistic: React.FC<BAIStatisticProps> = ({
               style={{
                 fontSize: 32,
                 lineHeight: '1em',
-                fontWeight: 700,
-                color: token.colorSuccess,
               }}
             >
               {displayCurrent}
             </Typography.Text>
-            {unit && <Typography.Text>{unit}</Typography.Text>}
+            {unit && (
+              <Typography.Text
+                style={{
+                  color: token.colorTextSecondary,
+                }}
+              >
+                {unit}
+              </Typography.Text>
+            )}
           </>
         )}
       </BAIFlex>
 
-      {showProgress && total !== undefined && (
+      {progressMode === 'normal' && total !== undefined ? (
         <Tooltip title={`${displayCurrent} ${unit} / ${displayTotal} ${unit}`}>
-          <BAIFlex direction="row" gap={2}>
-            {_.map(_.range(progressSteps), (i) => (
-              <BAIFlex
-                key={i}
-                style={{
-                  width: 5,
-                  height: 12,
-                  borderRadius: 2.5,
-                  backgroundColor:
-                    i < currentPosition
-                      ? token.colorSuccess
-                      : token.colorTextDisabled,
-                }}
-              />
-            ))}
-          </BAIFlex>
+          <Progress
+            percent={percent}
+            style={{ width: 100 }}
+            strokeColor={token.colorTextTertiary}
+            status="active"
+            steps={progressSteps}
+            size={[3, 10]}
+            showInfo={false}
+          />
         </Tooltip>
-      )}
+      ) : progressMode === 'ghost' ? (
+        <Progress
+          showInfo={false}
+          trailColor={'transparent'}
+          size={[100, 10]}
+        />
+      ) : null}
     </BAIFlex>
   );
 };

diff --git a/packages/backend.ai-ui/src/components/ResourceStatistics.tsx b/packages/backend.ai-ui/src/components/ResourceStatistics.tsx
@@ -1,7 +1,7 @@
 import { convertToBinaryUnit, getDisplayUnitToInputSizeUnit } from '../helper';
 import BAIFlex from './BAIFlex';
 import BAIRowWrapWithDividers from './BAIRowWrapWithDividers';
-import BAIStatistic from './BAIStatistic';
+import BAIStatistic, { BAIStatisticProps } from './BAIStatistic';
 import { Empty, theme } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -28,7 +28,7 @@ interface ResourceData {
 interface ResourceStatisticsProps {
   resourceData: ResourceData;
   displayType: 'used' | 'free';
-  showProgress?: boolean;
+  progressMode?: BAIStatisticProps['progressMode'];
   precision?: number;
   progressSteps?: number;
 }
@@ -55,8 +55,8 @@ export const convertToNumber = (value: any): number => {
 const ResourceStatistics: React.FC<ResourceStatisticsProps> = ({
   resourceData,
   displayType,
-  showProgress = false,
-  progressSteps = 12,
+  progressMode = 'hidden',
+  progressSteps,
   precision = 2,
 }) => {
   const { t } = useTranslation();
@@ -85,7 +85,7 @@ const ResourceStatistics: React.FC<ResourceStatisticsProps> = ({
             total={resourceData.cpu[displayType].total}
             title={resourceData.cpu.metadata.title}
             unit={resourceData.cpu.metadata.displayUnit}
-            showProgress={showProgress}
+            progressMode={progressMode}
             progressSteps={progressSteps}
             precision={precision}
           />
@@ -96,7 +96,7 @@ const ResourceStatistics: React.FC<ResourceStatisticsProps> = ({
             total={resourceData.memory[displayType].total}
             title={resourceData.memory.metadata.title}
             unit={resourceData.memory.metadata.displayUnit}
-            showProgress={showProgress}
+            progressMode={progressMode}
             progressSteps={progressSteps}
             precision={precision}
           />
@@ -107,7 +107,7 @@ const ResourceStatistics: React.FC<ResourceStatisticsProps> = ({
         <BAIRowWrapWithDividers
           dividerColor={token.colorBorder}
           style={{
-            backgroundColor: token.colorSuccessBg,
+            backgroundColor: token.colorBgLayout,
             borderRadius: token.borderRadiusLG,
             padding: token.padding,
           }}
@@ -119,7 +119,7 @@ const ResourceStatistics: React.FC<ResourceStatisticsProps> = ({
               total={acc[displayType].total}
               title={acc.metadata.title}
               unit={acc.metadata.displayUnit}
-              showProgress={showProgress}
+              progressMode={progressMode}
               progressSteps={progressSteps}
               precision={precision}
             />

diff --git a/react/src/components/AgentStats.tsx b/react/src/components/AgentStats.tsx
@@ -215,7 +215,7 @@ const AgentStats: React.FC<AgentStatsProps> = ({
         <ResourceStatistics
           resourceData={agentStatsData}
           displayType={displayType === 'used' ? 'used' : 'free'}
-          showProgress={true}
+          progressMode="normal"
         />
       )}
     </BAIFlex>

diff --git a/react/src/components/MyResource.tsx b/react/src/components/MyResource.tsx
@@ -181,7 +181,7 @@ const MyResource: React.FC<MyResourceProps> = ({
       <ResourceStatistics
         resourceData={resourceData}
         displayType="used"
-        showProgress={true}
+        progressMode="normal"
       />
     </BAIFlex>
   );

diff --git a/react/src/components/MyResourceWithinResourceGroup.tsx b/react/src/components/MyResourceWithinResourceGroup.tsx
@@ -248,7 +248,7 @@ const MyResourceWithinResourceGroup: React.FC<
         <ResourceStatistics
           resourceData={resourceData}
           displayType={displayType}
-          showProgress={false}
+          progressMode="ghost"
         />
       )}
     </BAIFlex>

diff --git a/react/src/components/SessionCountDashboardItem.tsx b/react/src/components/SessionCountDashboardItem.tsx
@@ -1,11 +1,11 @@
 import BAIFetchKeyButton from './BAIFetchKeyButton';
-import BAIPanelItem from './BAIPanelItem';
 import { theme } from 'antd';
 import {
   BAIBoardItemTitle,
   BAIFlex,
   BAIFlexProps,
   BAIRowWrapWithDividers,
+  BAIStatistic,
 } from 'backend.ai-ui';
 import _ from 'lodash';
 import { useTransition } from 'react';
@@ -72,7 +72,15 @@ const SessionCountDashboardItem: React.FC<SessionCountDashboardItemProps> = ({
   const { myInteractive, myBatch, myInference, myUpload } = data || {};
 
   const renderBAIPanelItem = (title: string, value: number) => (
-    <BAIPanelItem title={title} value={value} />
+    <BAIStatistic
+      title={title}
+      current={value}
+      progressMode="hidden"
+      style={{
+        // to match the height of BAIStatistic with progress bar without progress bar
+        paddingBottom: 22,
+      }}
+    />
   );
 
   return (
@@ -81,8 +89,7 @@ const SessionCountDashboardItem: React.FC<SessionCountDashboardItemProps> = ({
       align="stretch"
       style={{
         paddingLeft: token.paddingXL,
-        paddingRight: token.paddingXL,
-        height: '100%',
+        paddingRight: token.padding,
         ...props.style,
       }}
       {..._.omit(props, ['style'])}
@@ -92,6 +99,7 @@ const SessionCountDashboardItem: React.FC<SessionCountDashboardItemProps> = ({
         title={title}
         extra={
           <BAIFetchKeyButton
+            size="small"
             loading={isPendingRefetch || isRefetching}
             value=""
             onChange={() => {
@@ -107,27 +115,12 @@ const SessionCountDashboardItem: React.FC<SessionCountDashboardItemProps> = ({
             type="text"
             style={{
               backgroundColor: 'transparent',
-              margin: -token.marginXS,
             }}
           />
         }
       />
-
-      {/* Scrollable Content Section */}
-      <BAIFlex
-        direction="column"
-        align="stretch"
-        style={{
-          flex: 1,
-          overflowY: 'auto',
-          overflowX: 'hidden',
-        }}
-      >
+      <BAIFlex direction="row" wrap="wrap" gap={'lg'}>
         <BAIRowWrapWithDividers
-          columnGap={token.marginXXL}
-          rowGap={token.margin}
-          dividerWidth={1}
-          dividerInset={token.marginXS}
           style={{
             paddingBlock: token.padding,
           }}

diff --git a/react/src/components/TotalResourceWithinResourceGroup.tsx b/react/src/components/TotalResourceWithinResourceGroup.tsx
@@ -350,7 +350,7 @@ const TotalResourceWithinResourceGroup: React.FC<
       <ResourceStatistics
         resourceData={resourceData}
         displayType={displayType}
-        showProgress={true}
+        progressMode="normal"
       />
     </BAIFlex>
   );