feat(FR-2672): add AdminDeploymentListPage with extended filters gated by feature flag

Author: agatha197

react/src/components/DeploymentList.tsx

@@ -7,6 +7,7 @@ import {
   DeploymentList_modelDeploymentConnection$key,
 } from '../__generated__/DeploymentList_modelDeploymentConnection.graphql';
 import { useSuspendedBackendaiClient } from '../hooks';
+import BAIRadioGroup from './BAIRadioGroup';
 import DeploymentOwnerInfo from './DeploymentOwnerInfo';
 import DeploymentStatusTag, { DeploymentStatus } from './DeploymentStatusTag';
 import { Typography, theme } from 'antd';
@@ -17,6 +18,7 @@ import {
   filterOutEmpty,
   filterOutNullAndUndefined,
   type BAIColumnType,
+  type BAITableProps,
   type GraphQLFilter,
 } from 'backend.ai-ui';
 import dayjs from 'dayjs';
@@ -26,26 +28,13 @@ import { useTranslation } from 'react-i18next';
 import { graphql, useFragment } from 'react-relay';
 
 type DeploymentEdge = NonNullable<
-  NonNullable<
-    DeploymentList_modelDeploymentConnection$data['edges']
-  >[number]
+  NonNullable<DeploymentList_modelDeploymentConnection$data['edges']>[number]
 >;
 type DeploymentNode = NonNullable<DeploymentEdge['node']>;
 
-/**
- * Deployment sort direction as emitted by the server-side `DeploymentOrderBy`
- * input. Parent pages own the URL state and pass the current value through.
- */
-export type DeploymentSortOrder = 'ASC' | 'DESC';
-
-/**
- * Structured sort value matching the server-side `DeploymentOrderBy` shape.
- * `field` is one of the `DeploymentOrderField` enum values
- * (`NAME`, `CREATED_AT`, `DOMAIN`, `PROJECT`, `RESOURCE_GROUP`, `TAG`, ...).
- */
-export interface DeploymentSort {
+interface DeploymentSort {
   field: string;
-  order: DeploymentSortOrder;
+  order: 'ASC' | 'DESC';
 }
 
 /** Maps BAITable column keys (camelCase) → server-side enum field. */
@@ -58,17 +47,24 @@ const COLUMN_KEY_TO_FIELD: Record<string, string> = {
   tag: 'TAG',
 };
 
-const FIELD_TO_COLUMN_KEY: Record<string, string> = _.invert(
-  COLUMN_KEY_TO_FIELD,
-);
+/** All valid order strings accepted by BAITable for deployments. */
+export const availableDeploymentOrderValues = [
+  'name',
+  '-name',
+  'createdAt',
+  '-createdAt',
+] as const;
+
+export type DeploymentOrderValue =
+  (typeof availableDeploymentOrderValues)[number];
 
 /**
- * BAITable exchanges sort state via a single string (e.g. `'name'`,
- * `'-createdAt'`). Convert that string to the structured `DeploymentSort`
- * shape the parent (and server-side `DeploymentOrderBy`) expects, and vice
- * versa.
+ * Convert a BAITable order string (e.g. `'-createdAt'`) to the structured
+ * `DeploymentSort` shape expected by the server `DeploymentOrderBy` input.
+ * Returns `undefined` for unrecognised keys so callers can safely skip
+ * building the `orderBy` variable.
  */
-const tableOrderToSort = (
+export const tableOrderToSort = (
   order: string | null | undefined,
 ): DeploymentSort | undefined => {
   if (!order) return undefined;
@@ -79,20 +75,6 @@ const tableOrderToSort = (
   return { field, order: descending ? 'DESC' : 'ASC' };
 };
 
-const sortToTableOrder = (
-  sort: DeploymentSort | undefined,
-): string | undefined => {
-  if (!sort) return undefined;
-  const columnKey = FIELD_TO_COLUMN_KEY[sort.field];
-  if (!columnKey) return undefined;
-  return sort.order === 'DESC' ? `-${columnKey}` : columnKey;
-};
-
-/**
- * Safely parse the stringified filter prop into a `GraphQLFilter` object.
- * Invalid JSON and non-object values are treated as "no filter" so the
- * component degrades gracefully when the URL state is malformed.
- */
 const parseFilterString = (
   filter: string | undefined,
 ): GraphQLFilter | undefined => {
@@ -113,48 +95,25 @@ const stringifyFilter = (filter: GraphQLFilter | undefined): string => {
   return JSON.stringify(filter);
 };
 
-export interface DeploymentListProps {
-  /**
-   * Relay fragment reference for a `ModelDeploymentConnection`. The owning
-   * page (e.g. `DeploymentListPage` / `AdminDeploymentListPage`) passes the
-   * connection read from its own query.
-   */
-  deploymentsFrgmt: DeploymentList_modelDeploymentConnection$key;
+export type DeploymentStatusCategory = 'running' | 'finished';
 
-  /**
-   * Current filter value. Expected to be a JSON-serialized
-   * `GraphQLFilter` (as produced by `BAIGraphQLPropertyFilter`). Empty string
-   * or `undefined` means "no filter".
-   *
-   * The parent owns the URL state; this component parses on the way in and
-   * serializes on the way out.
-   */
+export interface DeploymentListProps extends Omit<
+  BAITableProps<DeploymentNode>,
+  'dataSource' | 'columns' | 'onChangeOrder'
+> {
+  deploymentsFrgmt: DeploymentList_modelDeploymentConnection$key;
   filter?: string;
   setFilter: (value: string) => void;
-
-  /** Current server-side sort (field + direction). */
-  sort?: DeploymentSort;
-  setSort: (value: DeploymentSort | undefined) => void;
-
-  /** 1-indexed page number. */
-  page: number;
-  setPage: (value: number) => void;
-
-  /** Rows per page. */
-  pageSize: number;
-  setPageSize: (value: number) => void;
-
+  onChangeOrder?: (order: string | null) => void;
+  statusCategory?: DeploymentStatusCategory;
+  onStatusCategoryChange?: (value: DeploymentStatusCategory) => void;
   /**
    * `'user'` — standard user-owned list (myDeployments / projectDeployments).
    * `'admin'` — admin list. Shows the Owner column and — when the manager
    * supports `model-deployment-extended-filter` (>= 26.4.3) — exposes
    * Domain / Project / Resource Group filters.
    */
   mode: 'user' | 'admin';
-
-  /** Whether the table body should show the loading spinner. */
-  loading?: boolean;
-
   /** Called when a row name is clicked. Receives the deployment global ID. */
   onRowClick?: (deploymentId: string) => void;
 }
@@ -163,15 +122,12 @@ const DeploymentList: React.FC<DeploymentListProps> = ({
   deploymentsFrgmt,
   filter,
   setFilter,
-  sort,
-  setSort,
-  page,
-  setPage,
-  pageSize,
-  setPageSize,
+  onChangeOrder,
+  statusCategory = 'running',
+  onStatusCategoryChange,
   mode,
-  loading,
   onRowClick,
+  ...tableProps
 }) => {
   'use memo';
   const { t } = useTranslation();
@@ -198,9 +154,7 @@ const DeploymentList: React.FC<DeploymentListProps> = ({
             totalReplicas: replicas {
               count
             }
-            runningReplicas: replicas(
-              filter: { status: { equals: RUNNING } }
-            ) {
+            runningReplicas: replicas(filter: { status: { equals: RUNNING } }) {
               count
             }
             currentRevision @since(version: "26.4.3") {
@@ -281,7 +235,7 @@ const DeploymentList: React.FC<DeploymentListProps> = ({
     {
       key: 'name',
       title: t('deployment.Name'),
-      dataIndex: ['metadata', 'name'],
+      dataIndex: 'name',
       sorter: true,
       fixed: 'left' as const,
       render: (_text, row) => {
@@ -315,9 +269,6 @@ const DeploymentList: React.FC<DeploymentListProps> = ({
         const running = row.runningReplicas?.count ?? 0;
         const desired = row.replicaState?.desiredReplicaCount ?? 0;
         const total = row.totalReplicas?.count ?? desired;
-        // Prefer desired count as the denominator so ongoing (scaling)
-        // deployments still surface the intended replica target. Fall back
-        // to the observed total if desired is not reported.
         const denominator = desired > 0 ? desired : total;
         return (
           <Typography.Text>
@@ -335,7 +286,8 @@ const DeploymentList: React.FC<DeploymentListProps> = ({
       render: (_text, row) => {
         const modelName =
           row.currentRevision?.modelMountConfig?.vfolder?.name ?? null;
-        if (!modelName) return <Typography.Text type="secondary">-</Typography.Text>;
+        if (!modelName)
+          return <Typography.Text type="secondary">-</Typography.Text>;
         return (
           <Typography.Text
             ellipsis={{ tooltip: modelName }}
@@ -349,7 +301,7 @@ const DeploymentList: React.FC<DeploymentListProps> = ({
     {
       key: 'createdAt',
       title: t('deployment.CreatedAt'),
-      dataIndex: ['metadata', 'createdAt'],
+      dataIndex: 'createdAt',
       sorter: true,
       render: (_text, row) => {
         const createdAt = row.metadata?.createdAt;
@@ -363,38 +315,42 @@ const DeploymentList: React.FC<DeploymentListProps> = ({
     },
   ]);
 
+  // Merge fragment-derived total into the pagination config supplied by the
+  // parent so callers don't need to separately query for count.
+  const paginationWithTotal =
+    tableProps.pagination === false
+      ? (false as const)
+      : { ...tableProps.pagination, total: totalCount };
+
   return (
     <BAIFlex direction="column" align="stretch" gap="sm">
+      <BAIRadioGroup
+        value={statusCategory}
+        onChange={(e) => onStatusCategoryChange?.(e.target.value)}
+        options={[
+          { label: t('deployment.Running'), value: 'running' },
+          { label: t('deployment.status.Terminated'), value: 'finished' },
+        ]}
+      />
       <BAIGraphQLPropertyFilter
         style={{ marginBottom: token.marginXS }}
         filterProperties={filterProperties}
         value={filterValue}
         onChange={(next) => {
           setFilter(stringifyFilter(next));
-          // Reset pagination when filters change.
-          setPage(1);
         }}
       />
       <BAITable<DeploymentNode>
         rowKey="id"
         scroll={{ x: 'max-content' }}
-        loading={loading}
+        showSorterTooltip={false}
+        {...tableProps}
         dataSource={deployments}
         columns={columns}
-        showSorterTooltip={false}
-        order={sortToTableOrder(sort)}
         onChangeOrder={(order) => {
-          setSort(tableOrderToSort(order));
-        }}
-        pagination={{
-          current: page,
-          pageSize,
-          total: totalCount,
-          onChange: (nextPage, nextPageSize) => {
-            if (nextPage !== page) setPage(nextPage);
-            if (nextPageSize !== pageSize) setPageSize(nextPageSize);
-          },
+          onChangeOrder?.(order || null);
         }}
+        pagination={paginationWithTotal}
       />
     </BAIFlex>
   );

react/src/components/DeploymentOwnerInfo.tsx

@@ -3,9 +3,7 @@
  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 { Tooltip, Typography } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useFragment } from 'react-relay';
@@ -19,7 +17,6 @@ const DeploymentOwnerInfo: React.FC<DeploymentOwnerInfoProps> = ({
 }) => {
   'use memo';
   const { t } = useTranslation();
-  const { token } = theme.useToken();
 
   const deployment = useFragment(
     graphql`
@@ -46,10 +43,6 @@ const DeploymentOwnerInfo: React.FC<DeploymentOwnerInfoProps> = ({
     return <Typography.Text type="secondary">-</Typography.Text>;
   }
 
-  const initial = (fullName || username || email)
-    .trim()
-    .charAt(0)
-    .toUpperCase();
   const tooltipLines = [
     t('deployment.CreatedBy'),
     fullName || username || email,
@@ -59,26 +52,13 @@ const DeploymentOwnerInfo: React.FC<DeploymentOwnerInfoProps> = ({
     .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 }}>
+    <Tooltip
+      title={<span style={{ whiteSpace: 'pre-line' }}>{tooltipLines}</span>}
+    >
+      <Typography.Text ellipsis={{ tooltip: false }} style={{ maxWidth: 200 }}>
         {email}
       </Typography.Text>
-    </BAIFlex>
+    </Tooltip>
   );
 };