feat(FR-2827): make deployment tags clickable to filter the list

yomybaby · yomybaby · commit 3438fb6a7039 · 2026-05-07T14:17:41.000+08:00
Resolves #7273(FR-2827) Deployment tags rendered in the list table and the detail Overview card are now interactive. Clicking a tag navigates to the deployment list filtered by that tag using the existing iContains filter shape (`/deployments?filter={"tags":{"iContains":"<tag>"}}`), so users can use a tag as a one-click pivot to find related deployments. The URL filter is built once via a small shared helper exported from `DeploymentList.tsx` (`buildDeploymentTagFilterUrl`) and reused by the detail Overview component. List-side click also stops propagation so a future row-click handler would not fire when a user clicks a tag inside a row.
diff --git a/packages/backend.ai-ui/src/components/BAIGraphQLPropertyFilter.tsx b/packages/backend.ai-ui/src/components/BAIGraphQLPropertyFilter.tsx
@@ -475,9 +475,12 @@ const BAIGraphQLPropertyFilter: React.FC<BAIGraphQLPropertyFilterProps> = ({
     onChange: propOnChange,
   });
 
-  const [conditions, setConditions] = useState<FilterCondition[]>(() =>
-    convertGraphQLFilterToConditions(value, filterProperties),
-  );
+  // Reassign sequential ids: the converter generates random ids per call,
+  // which would change every render and remount every Tag.
+  const conditions = convertGraphQLFilterToConditions(
+    value,
+    filterProperties,
+  ).map((c, i) => ({ ...c, id: `cond-${i}` }));
 
   const [search, setSearch] = useState<string>('');
   const [selectedDate, setSelectedDate] = useState<dayjs.Dayjs | null>(null);
@@ -505,15 +508,11 @@ const BAIGraphQLPropertyFilter: React.FC<BAIGraphQLPropertyFilterProps> = ({
   const [isValid, setIsValid] = useState(true);
   const [isFocused, setIsFocused] = useState(false);
 
-  const propertyOptions = useMemo(
-    () =>
-      filterProperties.map((property) => ({
-        label: property.propertyLabel,
-        value: property.key,
-        filter: property,
-      })),
-    [filterProperties],
-  );
+  const propertyOptions = filterProperties.map((property) => ({
+    label: property.propertyLabel,
+    value: property.key,
+    filter: property,
+  }));
 
   const availableOperators = useMemo(() => {
     const mode = getEffectiveValueMode(selectedProperty);
@@ -536,7 +535,6 @@ const BAIGraphQLPropertyFilter: React.FC<BAIGraphQLPropertyFilterProps> = ({
   }, [availableOperators, t]);
 
   const updateConditions = (newConditions: FilterCondition[]) => {
-    setConditions(newConditions);
     const filter = convertConditionsToGraphQLFilter(
       newConditions,
       filterProperties,
diff --git a/react/src/components/DeploymentConfigurationSection.tsx b/react/src/components/DeploymentConfigurationSection.tsx
@@ -9,6 +9,7 @@ import DeploymentRevisionDetail from './DeploymentRevisionDetail';
 import DeploymentRevisionDetailDrawer from './DeploymentRevisionDetailDrawer';
 import DeploymentRevisionHistoryTab from './DeploymentRevisionHistoryTab';
 import DeploymentSettingModal from './DeploymentSettingModal';
+import DeploymentTagChips from './DeploymentTagChips';
 import ErrorBoundaryWithNullFallback from './ErrorBoundaryWithNullFallback';
 import {
   CheckOutlined,
@@ -24,7 +25,6 @@ import {
   Descriptions,
   Empty,
   Skeleton,
-  Tag,
   Typography,
   theme,
 } from 'antd';
@@ -64,12 +64,6 @@ const DeploymentOverviewContent: React.FC<{
   const projectName =
     deployment?.metadata.projectV2?.basicInfo?.name ??
     deployment?.metadata.projectId;
-  const tags = (deployment?.metadata.tags ?? []).flatMap((tag) =>
-    tag
-      .split(',')
-      .map((t) => t.trim())
-      .filter(Boolean),
-  );
 
   const deploymentItems = filterOutEmpty([
     {
@@ -114,16 +108,12 @@ const DeploymentOverviewContent: React.FC<{
     {
       key: 'tags',
       label: t('deployment.Tags'),
-      children:
-        tags.length > 0 ? (
-          <BAIFlex direction="row" wrap="wrap" gap="xxs">
-            {tags.map((tag) => (
-              <Tag key={tag}>{tag}</Tag>
-            ))}
-          </BAIFlex>
-        ) : (
-          renderFallback()
-        ),
+      children: (
+        <DeploymentTagChips
+          metadataFrgmt={deployment?.metadata ?? null}
+          fallback={renderFallback()}
+        />
+      ),
     },
     {
       key: 'desired-replicas',
@@ -299,14 +289,14 @@ const DeploymentConfigurationCards: React.FC<{
           ...DeploymentSettingModal_deployment
           metadata {
             name
-            tags
             projectId
             domainName
             projectV2 @since(version: "26.4.3") {
               basicInfo {
                 name
               }
             }
+            ...DeploymentTagChips_metadata
           }
           networkAccess {
             openToPublic
diff --git a/react/src/components/DeploymentList.tsx b/react/src/components/DeploymentList.tsx
@@ -12,8 +12,9 @@ import { useSuspendedBackendaiClient } from '../hooks';
 import BAIRadioGroup from './BAIRadioGroup';
 import DeploymentOwnerInfo from './DeploymentOwnerInfo';
 import DeploymentStatusTag, { DeploymentStatus } from './DeploymentStatusTag';
+import DeploymentTagChips from './DeploymentTagChips';
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
-import { Alert, App, Tag, Typography, theme } from 'antd';
+import { Alert, App, Typography, theme } from 'antd';
 import {
   BAIConfirmModalWithInput,
   BAIFlex,
@@ -83,26 +84,6 @@ export const tableOrderToSort = (
   return { field, order: descending ? 'DESC' : 'ASC' };
 };
 
-const parseFilterString = (
-  filter: string | undefined,
-): GraphQLFilter | undefined => {
-  if (!filter) return undefined;
-  try {
-    const parsed = JSON.parse(filter);
-    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
-      return parsed as GraphQLFilter;
-    }
-    return undefined;
-  } catch {
-    return undefined;
-  }
-};
-
-const stringifyFilter = (filter: GraphQLFilter | undefined): string => {
-  if (!filter || Object.keys(filter).length === 0) return '';
-  return JSON.stringify(filter);
-};
-
 export type DeploymentStatusCategory = 'running' | 'finished';
 
 export interface DeploymentListProps extends Omit<
@@ -113,8 +94,8 @@ export interface DeploymentListProps extends Omit<
     | DeploymentList_modelDeploymentConnection$key
     | null
     | undefined;
-  filter?: string;
-  setFilter: (value: string) => void;
+  filter?: GraphQLFilter;
+  setFilter: (value: GraphQLFilter | null | undefined) => void;
   onChangeOrder?: (order: string | null) => void;
   statusCategory?: DeploymentStatusCategory;
   onStatusCategoryChange?: (value: DeploymentStatusCategory) => void;
@@ -182,7 +163,7 @@ const DeploymentList: React.FC<DeploymentListProps> = ({
               createdAt
               domainName
               projectId
-              tags
+              ...DeploymentTagChips_metadata
             }
             networkAccess {
               endpointUrl
@@ -223,8 +204,6 @@ const DeploymentList: React.FC<DeploymentListProps> = ({
   const supportsExtendedFilter =
     baiClient?.supports('model-deployment-extended-filter') ?? false;
 
-  const filterValue = parseFilterString(filter);
-
   const baseFilterProperties = [
     {
       key: 'name',
@@ -372,23 +351,13 @@ const DeploymentList: React.FC<DeploymentListProps> = ({
     {
       key: 'tags',
       title: t('deployment.Tags'),
-      render: (_text, row) => {
-        const tags = (row.metadata?.tags ?? []).flatMap((tag) =>
-          tag
-            .split(',')
-            .map((t) => t.trim())
-            .filter(Boolean),
-        );
-        if (tags.length === 0)
-          return <Typography.Text type="secondary">-</Typography.Text>;
-        return (
-          <BAIFlex wrap="wrap" gap="xxs">
-            {tags.map((tag) => (
-              <Tag key={tag}>{tag}</Tag>
-            ))}
-          </BAIFlex>
-        );
-      },
+      render: (_text, row) => (
+        <DeploymentTagChips
+          metadataFrgmt={row.metadata}
+          stopRowClick
+          fallback={<Typography.Text type="secondary">-</Typography.Text>}
+        />
+      ),
     },
     {
       key: 'createdAt',
@@ -441,9 +410,9 @@ const DeploymentList: React.FC<DeploymentListProps> = ({
             />
             <BAIGraphQLPropertyFilter
               filterProperties={filterProperties}
-              value={filterValue}
+              value={filter}
               onChange={(next) => {
-                setFilter(stringifyFilter(next));
+                setFilter(next);
               }}
             />
           </BAIFlex>
diff --git a/react/src/components/DeploymentTagChips.tsx b/react/src/components/DeploymentTagChips.tsx
@@ -0,0 +1,92 @@
+/**
+ @license
+ Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
+ */
+import type { DeploymentTagChips_metadata$key } from '../__generated__/DeploymentTagChips_metadata.graphql';
+import { useWebUINavigate } from '../hooks';
+import { Tag } from 'antd';
+import { BAIFlex } from 'backend.ai-ui';
+import React from 'react';
+import { graphql, useFragment } from 'react-relay';
+
+interface DeploymentTagChipsProps {
+  metadataFrgmt: DeploymentTagChips_metadata$key | null | undefined;
+  /**
+   * When true, click and Enter/Space keypress events stop bubbling so the
+   * surrounding row click handler does not also fire (used inside the
+   * deployment list table).
+   */
+  stopRowClick?: boolean;
+  /** Rendered when there are no tags to display. */
+  fallback?: React.ReactNode;
+}
+
+/**
+ * Render a deployment metadata's tags as clickable chips. Activating a chip
+ * (mouse click or keyboard Enter/Space) navigates to the deployment list
+ * pre-filtered by that tag using `iContains`. Tag entries are split on
+ * commas so legacy comma-joined values render as individual chips.
+ */
+const DeploymentTagChips: React.FC<DeploymentTagChipsProps> = ({
+  metadataFrgmt,
+  stopRowClick = false,
+  fallback = null,
+}) => {
+  'use memo';
+  const webuiNavigate = useWebUINavigate();
+
+  const metadata = useFragment(
+    graphql`
+      fragment DeploymentTagChips_metadata on ModelDeploymentMetadata {
+        tags
+      }
+    `,
+    metadataFrgmt ?? null,
+  );
+
+  const tags = (metadata?.tags ?? []).flatMap((tag) =>
+    tag
+      .split(',')
+      .map((t) => t.trim())
+      .filter(Boolean),
+  );
+
+  if (tags.length === 0) return <>{fallback}</>;
+
+  const navigateToFiltered = (tag: string) => {
+    const filter = JSON.stringify({ tags: { iContains: tag } });
+
+    webuiNavigate({
+      pathname: '/deployments',
+      search: new URLSearchParams({ filter }).toString(),
+    });
+  };
+
+  return (
+    <BAIFlex wrap="wrap" gap="xxs">
+      {tags.map((tag) => (
+        <Tag
+          key={tag}
+          role="button"
+          tabIndex={0}
+          style={{ cursor: 'pointer' }}
+          onClick={(e) => {
+            if (stopRowClick) e.stopPropagation();
+            navigateToFiltered(tag);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              if (stopRowClick) e.stopPropagation();
+              navigateToFiltered(tag);
+            }
+          }}
+        >
+          {tag}
+        </Tag>
+      ))}
+    </BAIFlex>
+  );
+};
+
+export default DeploymentTagChips;
diff --git a/react/src/pages/AdminDeploymentListPage.tsx b/react/src/pages/AdminDeploymentListPage.tsx
@@ -30,31 +30,17 @@ import {
   BAICard,
   BAIFetchKeyButton,
   filterOutEmpty,
+  GraphQLFilter,
   INITIAL_FETCH_KEY,
   toLocalId,
   useFetchKey,
 } from 'backend.ai-ui';
-import { parseAsString, parseAsStringLiteral, useQueryStates } from 'nuqs';
+import { parseAsJson, parseAsStringLiteral, useQueryStates } from 'nuqs';
 import React, { Suspense, useDeferredValue, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery } from 'react-relay';
 import { useSearchParams } from 'react-router-dom';
 
-const parseFilterVariable = (
-  filter: string | null | undefined,
-): DeploymentFilter | undefined => {
-  if (!filter) return undefined;
-  try {
-    const parsed = JSON.parse(filter);
-    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
-      return parsed as DeploymentFilter;
-    }
-    return undefined;
-  } catch {
-    return undefined;
-  }
-};
-
 const AdminDeploymentListPageContent: React.FC = () => {
   'use memo';
   const webUINavigate = useWebUINavigate();
@@ -72,7 +58,7 @@ const AdminDeploymentListPageContent: React.FC = () => {
 
   const [queryParams, setQueryParams] = useQueryStates(
     {
-      filter: parseAsString.withDefault(''),
+      filter: parseAsJson<GraphQLFilter>((value) => value as GraphQLFilter),
       order: parseAsStringLiteral(availableDeploymentOrderValues),
       statusCategory: parseAsStringLiteral<DeploymentStatusCategory>([
         'running',
@@ -96,7 +82,7 @@ const AdminDeploymentListPageContent: React.FC = () => {
       : { status: { notIn: finishedStatuses } };
   const queryVariables = {
     filter: {
-      ...parseFilterVariable(queryParams.filter),
+      ...((queryParams.filter ?? {}) as DeploymentFilter),
       ...statusCategoryFilter,
     },
     orderBy: sort
@@ -150,9 +136,9 @@ const AdminDeploymentListPageContent: React.FC = () => {
       <DeploymentList
         mode="admin"
         deploymentsFrgmt={adminDeployments}
-        filter={queryParams.filter}
+        filter={queryParams.filter ?? undefined}
         setFilter={(value) => {
-          setQueryParams({ filter: value || null });
+          setQueryParams({ filter: value ?? null });
           setTablePaginationOption({ current: 1 });
         }}
         order={queryParams.order ?? undefined}
diff --git a/react/src/pages/DeploymentListPage.tsx b/react/src/pages/DeploymentListPage.tsx
