feat(FR-2451): implement Prometheus Query Preset list table

react/src/components/AutoScalingRulePresetTab.tsx

@@ -2,18 +2,168 @@
  @license
  Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
  */
-import { Skeleton } from 'antd';
-import { BAIFlex } from 'backend.ai-ui';
-import React from 'react';
+import {
+  AutoScalingRulePresetTabQuery,
+  AutoScalingRulePresetTabQuery$variables,
+  QueryDefinitionFilter,
+} from '../__generated__/AutoScalingRulePresetTabQuery.graphql';
+import { useBAIPaginationOptionStateOnSearchParam } from '../hooks/reactPaginationQueryOptions';
+import PrometheusQueryPresetList from './PrometheusQueryPresetList';
+import { PlusOutlined } from '@ant-design/icons';
+import { Button, Skeleton } from 'antd';
+import {
+  BAIFetchKeyButton,
+  BAIFlex,
+  BAIGraphQLPropertyFilter,
+  type GraphQLFilter,
+  INITIAL_FETCH_KEY,
+  useFetchKey,
+} from 'backend.ai-ui';
+import * as _ from 'lodash-es';
+import { parseAsJson, useQueryStates } from 'nuqs';
+import React, { Suspense, useDeferredValue } from 'react';
+import { useTranslation } from 'react-i18next';
+import { graphql, useLazyLoadQuery } from 'react-relay';
 
 const AutoScalingRulePresetTab: React.FC = () => {
   'use memo';
-  // Placeholder for the Prometheus Query Preset admin CRUD tab (FR-2451).
-  // Subsequent PRs in the stack will replace this with a real list, create modal,
-  // edit modal with live preview, and delete flow.
+  const { t } = useTranslation();
+
+  const [queryParam, setQueryParam] = useQueryStates(
+    {
+      filter: parseAsJson<GraphQLFilter>((value) => value as GraphQLFilter),
+    },
+    { history: 'push' },
+  );
+
+  const {
+    baiPaginationOption,
+    tablePaginationOption,
+    setTablePaginationOption,
+  } = useBAIPaginationOptionStateOnSearchParam({
+    current: 1,
+    pageSize: 10,
+  });
+
+  const [fetchKey, updateFetchKey] = useFetchKey();
+
+  // QueryDefinitionFilter only supports a flat `name` filter today, so collapse
+  // any AND/OR wrapper produced by BAIGraphQLPropertyFilter back to a flat object.
+  const flattenGraphQLFilter = (
+    filter: GraphQLFilter | null | undefined,
+  ): QueryDefinitionFilter | null => {
+    if (!filter) return null;
+    if (filter.AND && Array.isArray(filter.AND)) {
+      return Object.assign({}, ...filter.AND) as QueryDefinitionFilter;
+    }
+    if (filter.OR && Array.isArray(filter.OR)) {
+      return Object.assign({}, ...filter.OR) as QueryDefinitionFilter;
+    }
+    return filter as QueryDefinitionFilter;
+  };
+
+  const queryVariables: AutoScalingRulePresetTabQuery$variables = {
+    offset: baiPaginationOption.offset,
+    limit: baiPaginationOption.limit,
+    filter: flattenGraphQLFilter(queryParam.filter),
+  };
+
+  const deferredQueryVariables = useDeferredValue(queryVariables);
+  const deferredFetchKey = useDeferredValue(fetchKey);
+
+  const { prometheusQueryPresets } =
+    useLazyLoadQuery<AutoScalingRulePresetTabQuery>(
+      graphql`
+        query AutoScalingRulePresetTabQuery(
+          $offset: Int
+          $limit: Int
+          $filter: QueryDefinitionFilter
+        ) {
+          prometheusQueryPresets(
+            offset: $offset
+            limit: $limit
+            filter: $filter
+          ) {
+            count
+            edges {
+              node {
+                id
+                ...PrometheusQueryPresetListFragment
+              }
+            }
+          }
+        }
+      `,
+      deferredQueryVariables,
+      {
+        fetchPolicy:
+          deferredFetchKey === INITIAL_FETCH_KEY
+            ? 'store-and-network'
+            : 'network-only',
+        fetchKey:
+          deferredFetchKey === INITIAL_FETCH_KEY ? undefined : deferredFetchKey,
+      },
+    );
+
+  const isPending =
+    deferredQueryVariables !== queryVariables || deferredFetchKey !== fetchKey;
+
+  const presetNodes = _.compact(
+    _.map(prometheusQueryPresets?.edges, (edge) => edge?.node),
+  );
+
   return (
-    <BAIFlex direction="column" align="stretch" gap={'sm'}>
-      <Skeleton active />
+    <BAIFlex direction="column" align="stretch" gap="sm">
+      <BAIFlex direction="row" justify="between" wrap="wrap" gap="sm">
+        <BAIFlex gap="sm" align="start" wrap="wrap" style={{ flexShrink: 1 }}>
+          <BAIGraphQLPropertyFilter
+            combinationMode="AND"
+            value={queryParam.filter ?? undefined}
+            onChange={(value) => {
+              setQueryParam({ filter: value ?? null });
+              setTablePaginationOption({ current: 1 });
+            }}
+            filterProperties={[
+              {
+                key: 'name',
+                propertyLabel: t('prometheusQueryPreset.Name'),
+                type: 'string',
+              },
+            ]}
+          />
+        </BAIFlex>
+        <BAIFlex gap="xs">
+          <BAIFetchKeyButton
+            value={fetchKey}
+            onChange={updateFetchKey}
+            loading={isPending}
+          />
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            disabled
+            // TODO(needs-frontend): wire up create modal in FR-2451 sub-task 3
+          >
+            {t('prometheusQueryPreset.AddPreset')}
+          </Button>
+        </BAIFlex>
+      </BAIFlex>
+      <Suspense fallback={<Skeleton active />}>
+        <PrometheusQueryPresetList
+          presetsFrgmt={presetNodes}
+          loading={isPending}
+          pagination={{
+            pageSize: tablePaginationOption.pageSize,
+            current: tablePaginationOption.current,
+            total: prometheusQueryPresets?.count,
+            onChange(current, pageSize) {
+              if (_.isNumber(current) && _.isNumber(pageSize)) {
+                setTablePaginationOption({ current, pageSize });
+              }
+            },
+          }}
+        />
+      </Suspense>
     </BAIFlex>
   );
 };

react/src/components/PrometheusQueryPresetList.tsx

@@ -0,0 +1,131 @@
+/**
+ @license
+ Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
+ */
+import {
+  PrometheusQueryPresetListFragment$data,
+  PrometheusQueryPresetListFragment$key,
+} from '../__generated__/PrometheusQueryPresetListFragment.graphql';
+import { localeCompare } from '../helper';
+import { Typography } from 'antd';
+import {
+  BAIColumnsType,
+  BAITable,
+  BAITableProps,
+  filterOutNullAndUndefined,
+} from 'backend.ai-ui';
+import dayjs from 'dayjs';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { graphql, useFragment } from 'react-relay';
+
+type PrometheusQueryPresetRow = PrometheusQueryPresetListFragment$data[number];
+
+interface PrometheusQueryPresetListProps extends Omit<
+  BAITableProps<PrometheusQueryPresetRow>,
+  'dataSource' | 'columns'
+> {
+  presetsFrgmt: PrometheusQueryPresetListFragment$key;
+}
+
+const PrometheusQueryPresetList: React.FC<PrometheusQueryPresetListProps> = ({
+  presetsFrgmt,
+  ...tableProps
+}) => {
+  'use memo';
+  const { t } = useTranslation();
+
+  const presets = useFragment(
+    graphql`
+      fragment PrometheusQueryPresetListFragment on QueryDefinition
+      @relay(plural: true) {
+        id
+        name
+        description
+        rank
+        categoryId
+        metricName
+        queryTemplate
+        timeWindow
+        options {
+          filterLabels
+          groupLabels
+        }
+        createdAt
+        updatedAt
+        category @since(version: "26.4.3") {
+          id
+          name
+        }
+      }
+    `,
+    presetsFrgmt,
+  );
+
+  const columns: BAIColumnsType<PrometheusQueryPresetRow> = [
+    {
+      title: t('prometheusQueryPreset.Name'),
+      dataIndex: 'name',
+      key: 'name',
+      sorter: (a, b) => localeCompare(a?.name, b?.name),
+      render: (name: string) => name,
+    },
+    {
+      title: t('prometheusQueryPreset.MetricName'),
+      dataIndex: 'metricName',
+      key: 'metricName',
+      render: (metricName: string) => metricName ?? '-',
+    },
+    {
+      title: t('prometheusQueryPreset.QueryTemplate'),
+      dataIndex: 'queryTemplate',
+      key: 'queryTemplate',
+      render: (queryTemplate: string) =>
+        queryTemplate ? (
+          <Typography.Text
+            code
+            ellipsis={{ tooltip: queryTemplate }}
+            style={{ maxWidth: 320 }}
+          >
+            {queryTemplate}
+          </Typography.Text>
+        ) : (
+          '-'
+        ),
+    },
+    {
+      title: t('prometheusQueryPreset.TimeWindow'),
+      dataIndex: 'timeWindow',
+      key: 'timeWindow',
+      render: (timeWindow: string | null | undefined) => timeWindow ?? '-',
+    },
+    {
+      title: t('prometheusQueryPreset.CreatedAt'),
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      render: (createdAt: string | null | undefined) =>
+        createdAt ? dayjs(createdAt).format('lll') : '-',
+    },
+    {
+      title: t('prometheusQueryPreset.UpdatedAt'),
+      dataIndex: 'updatedAt',
+      key: 'updatedAt',
+      render: (updatedAt: string | null | undefined) =>
+        updatedAt ? dayjs(updatedAt).format('lll') : '-',
+    },
+  ];
+
+  return (
+    <BAITable
+      size="small"
+      scroll={{ x: 'max-content' }}
+      rowKey="id"
+      dataSource={filterOutNullAndUndefined(presets)}
+      columns={columns}
+      showSorterTooltip={false}
+      {...tableProps}
+    />
+  );
+};
+
+export default PrometheusQueryPresetList;

react/src/pages/AdminServingPage.tsx

@@ -242,8 +242,8 @@ const AdminServingPage: React.FC = () => {
           label: t('adminModelCard.ModelStoreManagement'),
         },
         isSuperAdmin && {
-          key: 'auto-scaling-rule',
-          label: t('webui.menu.AutoScalingRule'),
+          key: 'prometheus-preset',
+          label: t('webui.menu.PrometheusPreset'),
         },
       ])}
     >
@@ -254,7 +254,7 @@ const AdminServingPage: React.FC = () => {
             <AdminModelCardListPage />
           </BAIErrorBoundary>
         )}
-        {queryParam.tab === 'auto-scaling-rule' && isSuperAdmin && (
+        {queryParam.tab === 'prometheus-preset' && isSuperAdmin && (
           <BAIErrorBoundary>
             <AutoScalingRulePresetTab />
           </BAIErrorBoundary>

resources/i18n/en.json

@@ -1747,6 +1747,15 @@
   "projectSelect": {
     "ProjectAdminBadge": "Project Admin"
   },
+  "prometheusQueryPreset": {
+    "AddPreset": "Add Preset",
+    "CreatedAt": "Created At",
+    "MetricName": "Metric Name",
+    "Name": "Name",
+    "QueryTemplate": "Query Template",
+    "TimeWindow": "Time Window",
+    "UpdatedAt": "Updated At"
+  },
   "rbac": {
     "Activate": "Activate",
     "ActivateRole": "Activate Role",
@@ -3059,6 +3068,7 @@
       "Project": "Project",
       "ProjectMembers": "Users",
       "Projects": "Projects",
+      "PrometheusPreset": "Prometheus Preset",
       "RBACManagement": "RBAC Management",
       "Remaining": "Remaining",
       "Reservoir": "Reservoir",

resources/i18n/ko.json

@@ -3063,6 +3063,7 @@
       "Project": "프로젝트",
       "ProjectMembers": "사용자",
       "Projects": "프로젝트",
+      "PrometheusPreset": "프로메테우스 프리셋",
       "RBACManagement": "RBAC 관리",
       "Remaining": "가용량",
       "Reservoir": "리저버",