feat(FR-2667): add ReplicaStatusTag component with tooltip

Author: agatha197

react/src/components/DeploymentOwnerInfo.tsx

@@ -0,0 +1,85 @@
+/**
+ @license
+ Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
+ */
+import { DeploymentOwnerInfo_deployment$key } from '../__generated__/DeploymentOwnerInfo_deployment.graphql';
+import { UserOutlined } from '@ant-design/icons';
+import { Avatar, Tooltip, Typography, theme } from 'antd';
+import { BAIFlex } from 'backend.ai-ui';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { graphql, useFragment } from 'react-relay';
+
+interface DeploymentOwnerInfoProps {
+  deploymentFrgmt: DeploymentOwnerInfo_deployment$key | null | undefined;
+}
+
+const DeploymentOwnerInfo: React.FC<DeploymentOwnerInfoProps> = ({
+  deploymentFrgmt,
+}) => {
+  'use memo';
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
+
+  const deployment = useFragment(
+    graphql`
+      fragment DeploymentOwnerInfo_deployment on ModelDeployment {
+        id
+        creator @since(version: "26.4.3") {
+          id
+          basicInfo {
+            email
+            username
+            fullName
+          }
+        }
+      }
+    `,
+    deploymentFrgmt,
+  );
+
+  const email = deployment?.creator?.basicInfo?.email ?? '';
+  const fullName = deployment?.creator?.basicInfo?.fullName ?? '';
+  const username = deployment?.creator?.basicInfo?.username ?? '';
+
+  if (!email) {
+    return <Typography.Text type="secondary">-</Typography.Text>;
+  }
+
+  const initial = (fullName || username || email)
+    .trim()
+    .charAt(0)
+    .toUpperCase();
+  const tooltipLines = [
+    t('deployment.CreatedBy'),
+    fullName || username || email,
+    email,
+  ]
+    .filter(Boolean)
+    .join('\n');
+
+  return (
+    <BAIFlex gap="xs" align="center">
+      <Tooltip
+        title={<span style={{ whiteSpace: 'pre-line' }}>{tooltipLines}</span>}
+      >
+        <Avatar
+          size="small"
+          style={{
+            backgroundColor: token.colorFillSecondary,
+            color: token.colorText,
+            flexShrink: 0,
+          }}
+          icon={!initial ? <UserOutlined /> : undefined}
+        >
+          {initial || null}
+        </Avatar>
+      </Tooltip>
+      <Typography.Text ellipsis={{ tooltip: email }} style={{ maxWidth: 200 }}>
+        {email}
+      </Typography.Text>
+    </BAIFlex>
+  );
+};
+
+export default DeploymentOwnerInfo;

react/src/components/DeploymentStatusTag.tsx

@@ -2,8 +2,8 @@
  @license
  Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
  */
-import { BadgeProps } from 'antd';
-import { BAIBadge, SemanticColor } from 'backend.ai-ui';
+import type { TagProps } from 'antd';
+import { BAITag, type SemanticColor } from 'backend.ai-ui';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -21,14 +21,14 @@ export type DeploymentStatus =
   | 'READY';
 
 /**
- * Maps each deployment status to a semantic color.
+ * Maps each deployment status to a Tag color.
  *
- * - success: HEALTHY, READY — the deployment is fully operational.
- * - info: DEPLOYING, SCALING, PENDING — transient, in-flight states.
- * - warning: DEGRADED, UNHEALTHY, STOPPING — user attention needed or transitioning away.
- * - default: NOT_CHECKED, STOPPED, TERMINATED — neutral / inactive / pre-check states.
+ * - success:    HEALTHY, READY — fully operational.
+ * - processing: DEPLOYING, SCALING, PENDING — transient, in-flight states.
+ * - warning:    DEGRADED, UNHEALTHY, STOPPING — attention needed or transitioning away.
+ * - default:    NOT_CHECKED, STOPPED, TERMINATED — neutral / inactive.
  */
-const deploymentStatusSemanticMap: Record<DeploymentStatus, SemanticColor> = {
+const deploymentStatusColorMap: Record<DeploymentStatus, SemanticColor> = {
   HEALTHY: 'success',
   READY: 'success',
   DEPLOYING: 'info',
@@ -42,15 +42,6 @@ const deploymentStatusSemanticMap: Record<DeploymentStatus, SemanticColor> = {
   TERMINATED: 'default',
 };
 
-/**
- * In-flight statuses that should render with the processing ripple animation.
- */
-const processingStatuses: ReadonlySet<DeploymentStatus> =
-  new Set<DeploymentStatus>(['DEPLOYING', 'SCALING', 'STOPPING']);
-
-/**
- * Maps each deployment status to its i18n translation key under `deployment.status.*`.
- */
 const deploymentStatusI18nMap: Record<DeploymentStatus, string> = {
   HEALTHY: 'deployment.status.Healthy',
   UNHEALTHY: 'deployment.status.Unhealthy',
@@ -65,10 +56,7 @@ const deploymentStatusI18nMap: Record<DeploymentStatus, string> = {
   READY: 'deployment.status.Ready',
 };
 
-export interface DeploymentStatusTagProps extends Omit<
-  BadgeProps,
-  'color' | 'status' | 'styles' | 'text'
-> {
+export interface DeploymentStatusTagProps extends Omit<TagProps, 'color'> {
   /**
    * The deployment-level status to display. Consolidates lifecycle (e.g.
    * `DEPLOYING`, `STOPPED`, `TERMINATED`) and health (e.g. `HEALTHY`,
@@ -78,26 +66,20 @@ export interface DeploymentStatusTagProps extends Omit<
 }
 
 /**
- * DeploymentStatusTag — consolidated lifecycle + health status badge for a
+ * DeploymentStatusTag — consolidated lifecycle + health status tag for a
  * deployment. Used in list rows and detail page headers.
- *
- * In-flight states (`DEPLOYING`, `SCALING`, `STOPPING`) automatically render
- * with a processing ripple animation.
  */
 const DeploymentStatusTag: React.FC<DeploymentStatusTagProps> = ({
   status,
-  ...badgeProps
+  ...tagProps
 }) => {
   'use memo';
   const { t } = useTranslation();
 
   return (
-    <BAIBadge
-      {...badgeProps}
-      color={deploymentStatusSemanticMap[status]}
-      processing={processingStatuses.has(status)}
-      text={t(deploymentStatusI18nMap[status])}
-    />
+    <BAITag {...tagProps} color={deploymentStatusColorMap[status]}>
+      {t(deploymentStatusI18nMap[status])}
+    </BAITag>
   );
 };