Skip to content

docs(admin): document Prometheus Query Preset management UI#7445

Open
yomybaby wants to merge 2 commits into
05-18-docs_model-serving_capture_deployment_preset_edit_page_screenshotfrom
05-15-docs_admin_document_prometheus_query_preset_management_ui
Open

docs(admin): document Prometheus Query Preset management UI#7445
yomybaby wants to merge 2 commits into
05-18-docs_model-serving_capture_deployment_preset_edit_page_screenshotfrom
05-15-docs_admin_document_prometheus_query_preset_management_ui

Conversation

@yomybaby
Copy link
Copy Markdown
Member

resolves #NNN (FR-MMM)

Checklist: (if applicable)

  • Documentation
  • Minium required manager version
  • Specific setting for review (eg., KB link, endpoint or how to setup)
  • Minimum requirements to check during review
  • Test case(s) to demonstrate the difference of before/after

Copy link
Copy Markdown
Member Author

yomybaby commented May 16, 2026

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more


How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

  • flow:merge-queue - adds this PR to the back of the merge queue
  • flow:hotfix - for urgent changes, fast-track this PR to the front of the merge queue

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds user manual documentation for the Prometheus Query Preset management UI across all supported documentation locales.

Changes:

  • Adds Prometheus preset list, filter, column settings, create/edit, and delete guidance.
  • Adds localized versions for English, Korean, Japanese, and Thai.
  • References shared screenshots for list and modal workflows.

Reviewed changes

Copilot reviewed 4 out of 16 changed files in this pull request and generated 4 comments.

File Description
packages/backend.ai-webui-docs/src/en/admin_menu/admin_menu.md Adds English Prometheus Query Presets documentation.
packages/backend.ai-webui-docs/src/ko/admin_menu/admin_menu.md Adds Korean localized Prometheus preset documentation.
packages/backend.ai-webui-docs/src/ja/admin_menu/admin_menu.md Adds Japanese localized Prometheus preset documentation.
packages/backend.ai-webui-docs/src/th/admin_menu/admin_menu.md Adds Thai localized Prometheus preset documentation.
Comments suppressed due to low confidence (12)

packages/backend.ai-webui-docs/src/en/admin_menu/admin_menu.md:434

  • This describes every listed column as shown by each row, but the table hides several of these columns by default: id, createdAt, and updatedAt are marked defaultHidden in PrometheusQueryPresetNodes.tsx (and hidden rank/description columns are not mentioned). Readers will not see all of these fields unless they enable them in column settings.
The preset table lists all Prometheus query presets across the cluster. Each row shows:

- **Name**: A unique, human-readable identifier for the preset. The cell also exposes inline **Edit** and **Delete** actions.
- **ID**: The preset's internal identifier.
- **Metric Name**: The metric this preset reports (used as the display label by consumers such as auto-scaling rules).
- **Query Template**: The PromQL expression that will be executed. The cell is **copyable** — hover over the value and click the copy icon to copy the full template to the clipboard. This is useful when you want to paste the template into a Prometheus UI to verify the result.
- **Time Window**: The default look-back window (for example, `5m`) used when the query references a range vector.
- **Category**: The optional category the preset belongs to (with the resolved category name and the category ID).
- **Options**: The optional **Filter Labels** and **Group Labels** that consumers can apply on top of the preset.
- **Created At** / **Updated At**: Timestamps maintained automatically by the server.

packages/backend.ai-webui-docs/src/en/admin_menu/admin_menu.md:436

  • The UI does not allow sorting by any column header. PrometheusQueryPresetNodes.tsx only enables sorters for name, createdAt, and updatedAt, so this instruction is inaccurate for most columns.
You can search and narrow the list with the property filter above the table, and click any column header to change the sort order.

packages/backend.ai-webui-docs/src/en/admin_menu/admin_menu.md:458

  • The documented GraphQL operation name is incorrect. The preview component calls adminPreviewPrometheusQueryPreset, not adminPrometheusQueryPresetPreview, so users/developers following this documentation will look for the wrong API field.
- **Query Template**: The PromQL expression to execute. As you type, a **live preview** area below the field calls the server's `adminPrometheusQueryPresetPreview` query and shows the current value the query returns against your Prometheus instance, so you can verify the template works before saving. The preview is debounced and updates automatically as you edit.

packages/backend.ai-webui-docs/src/ko/admin_menu/admin_menu.md:372

  • This says each row includes all of these fields, but the table hides several listed columns by default: id, createdAt, and updatedAt are defaultHidden in PrometheusQueryPresetNodes.tsx (and hidden rank/description columns are not mentioned). Users will not see all of these fields unless they enable them in column settings.
프리셋 테이블에는 클러스터에 등록된 모든 프로메테우스 쿼리 프리셋이 표시됩니다. 각 행에는 다음 정보가 포함됩니다.

- **이름**: 프리셋을 식별하기 위한 고유한 이름이며, 사람이 읽기 쉬운 형태입니다. 해당 셀에서는 **수정** 및 **삭제** 인라인 액션도 제공합니다.
- **ID**: 프리셋의 내부 식별자입니다.
- **메트릭 이름**: 이 프리셋이 보고하는 메트릭으로, 오토 스케일링 규칙 등 소비자 측에서 표시 라벨로 사용합니다.
- **쿼리 템플릿**: 실행될 PromQL 표현식입니다. 셀은 **복사 가능**하며, 값 위에 마우스를 올린 뒤 복사 아이콘을 클릭하면 전체 템플릿을 클립보드로 복사할 수 있습니다. 결과를 Prometheus UI에서 직접 확인하고 싶을 때 유용합니다.
- **시간 범위**: 쿼리가 범위 벡터를 사용할 때 적용되는 기본 조회 구간(예: `5m`)입니다.
- **카테고리**: 프리셋이 속하는 선택적 카테고리(이름과 카테고리 ID가 함께 표시됩니다).
- **옵션**: 소비자가 프리셋 위에 추가로 적용할 수 있는 **필터 레이블**과 **그룹 레이블**입니다.
- **생성일** / **수정일**: 서버에서 자동으로 관리되는 타임스탬프입니다.

packages/backend.ai-webui-docs/src/ko/admin_menu/admin_menu.md:374

  • The UI does not support sorting from every column header. PrometheusQueryPresetNodes.tsx only enables sorting for name, createdAt, and updatedAt, so this instruction is inaccurate for most columns.
테이블 상단의 속성 필터로 목록을 검색하고 좁힐 수 있으며, 컬럼 헤더를 클릭하여 정렬 순서를 변경할 수 있습니다.

packages/backend.ai-webui-docs/src/ko/admin_menu/admin_menu.md:396

  • The documented GraphQL operation name is incorrect. The preview component calls adminPreviewPrometheusQueryPreset, not adminPrometheusQueryPresetPreview, so readers will look for the wrong API field.
- **쿼리 템플릿**: 실행할 PromQL 표현식입니다. 입력하는 동안 필드 아래의 **라이브 프리뷰** 영역이 서버의 `adminPrometheusQueryPresetPreview` 쿼리를 호출하여, 작성 중인 템플릿이 실제 Prometheus 인스턴스에서 어떤 값을 반환하는지 즉시 보여줍니다. 따라서 저장하기 전에 템플릿이 의도대로 동작하는지 확인할 수 있습니다. 프리뷰는 디바운스 처리되어 입력에 맞춰 자동으로 갱신됩니다.

packages/backend.ai-webui-docs/src/ja/admin_menu/admin_menu.md:414

  • This says each row includes all of these fields, but the table hides several listed columns by default: id, createdAt, and updatedAt are defaultHidden in PrometheusQueryPresetNodes.tsx (and hidden rank/description columns are not mentioned). Users will not see all of these fields unless they enable them in column settings.
プリセットテーブルには、クラスタ全体に登録されたすべての Prometheus クエリプリセットが表示されます。各行には次の情報が含まれます。

- **名前**: プリセットを識別するための一意で人間が読みやすい名前です。このセルでは、インラインの **編集** および **削除** アクションも利用できます。
- **ID**: プリセットの内部識別子です。
- **メトリクス名**: このプリセットが報告するメトリクスで、オートスケーリングルールなどのコンシューマーが表示ラベルとして使用します。
- **クエリテンプレート**: 実行される PromQL 式です。セルは **コピー可能** で、値にホバーしてコピーアイコンをクリックすると、テンプレート全体をクリップボードにコピーできます。Prometheus UI にテンプレートを貼り付けて結果を確認したい場合に便利です。
- **時間ウィンドウ**: クエリがレンジベクタを参照する場合に使用される既定のルックバック期間(例: `5m`)です。
- **カテゴリ**: プリセットが属する任意のカテゴリ(解決されたカテゴリ名とカテゴリ ID が併せて表示されます)。
- **オプション**: コンシューマーがプリセットに対して追加で適用できる **フィルタラベル** と **グループラベル** です。
- **作成日時** / **更新日時**: サーバーが自動的に管理するタイムスタンプです。

packages/backend.ai-webui-docs/src/ja/admin_menu/admin_menu.md:416

  • The UI does not support sorting from every column header. PrometheusQueryPresetNodes.tsx only enables sorting for name, createdAt, and updatedAt, so this instruction is inaccurate for most columns.
テーブル上部のプロパティフィルタで一覧を検索・絞り込みでき、任意の列見出しをクリックすることで並び順を変更できます。

packages/backend.ai-webui-docs/src/ja/admin_menu/admin_menu.md:438

  • The documented GraphQL operation name is incorrect. The preview component calls adminPreviewPrometheusQueryPreset, not adminPrometheusQueryPresetPreview, so readers will look for the wrong API field.
- **クエリテンプレート**: 実行する PromQL 式です。入力中、フィールドの下にある **ライブプレビュー** 領域がサーバーの `adminPrometheusQueryPresetPreview` クエリを呼び出し、現在のテンプレートが Prometheus インスタンスに対して返す値をその場で表示します。これにより、保存前にテンプレートが期待どおり動作することを確認できます。プレビューはデバウンス処理され、編集に応じて自動的に更新されます。

packages/backend.ai-webui-docs/src/th/admin_menu/admin_menu.md:409

  • This says each row includes all of these fields, but the table hides several listed columns by default: id, createdAt, and updatedAt are defaultHidden in PrometheusQueryPresetNodes.tsx (and hidden rank/description columns are not mentioned). Users will not see all of these fields unless they enable them in column settings.
ตารางพรีเซตจะแสดงพรีเซตคำสั่ง Prometheus ทั้งหมดในคลัสเตอร์ แต่ละแถวจะแสดงข้อมูลต่อไปนี้

- **ชื่อ**: ตัวระบุพรีเซตที่ไม่ซ้ำกันและอ่านง่ายสำหรับมนุษย์ เซลล์นี้ยังมีการกระทำแบบอินไลน์ **แก้ไข** และ **ลบ** ด้วย
- **ID**: ตัวระบุภายในของพรีเซต
- **ชื่อเมตริก**: เมตริกที่พรีเซตนี้รายงาน (ใช้เป็นป้ายแสดงผลโดยผู้บริโภค เช่น กฎ Auto Scaling)
- **เทมเพลตคำสั่ง**: นิพจน์ PromQL ที่จะถูกเรียกใช้ เซลล์นี้ **คัดลอกได้** โดยวางเมาส์เหนือค่าแล้วคลิกไอคอนคัดลอกเพื่อคัดลอกเทมเพลตทั้งหมดไปยังคลิปบอร์ด มีประโยชน์เมื่อต้องการวางเทมเพลตในหน้า Prometheus UI เพื่อตรวจสอบผลลัพธ์
- **ช่วงเวลา**: ช่วงเวลามองย้อนกลับเริ่มต้น (เช่น `5m`) ที่ใช้เมื่อคำสั่งอ้างอิง range vector
- **หมวดหมู่**: หมวดหมู่ที่เลือกได้ที่พรีเซตอยู่ (พร้อมชื่อหมวดหมู่ที่แก้ค่าแล้วและรหัสหมวดหมู่)
- **ตัวเลือก**: **ป้ายกำกับตัวกรอง** และ **ป้ายกำกับกลุ่ม** ที่เลือกได้ ซึ่งผู้บริโภคสามารถนำมาใช้บนพรีเซตได้
- **สร้างเมื่อ** / **อัปเดตเมื่อ**: ตราเวลาที่เซิร์ฟเวอร์ดูแลให้โดยอัตโนมัติ

packages/backend.ai-webui-docs/src/th/admin_menu/admin_menu.md:411

  • The UI does not support sorting from every column header. PrometheusQueryPresetNodes.tsx only enables sorting for name, createdAt, and updatedAt, so this instruction is inaccurate for most columns.
คุณสามารถค้นหาและจำกัดรายการได้ด้วยตัวกรองคุณสมบัติด้านบนของตาราง และคลิกหัวคอลัมน์ใด ๆ เพื่อเปลี่ยนลำดับการเรียง

packages/backend.ai-webui-docs/src/th/admin_menu/admin_menu.md:433

  • The documented GraphQL operation name is incorrect. The preview component calls adminPreviewPrometheusQueryPreset, not adminPrometheusQueryPresetPreview, so readers will look for the wrong API field.
- **เทมเพลตคำสั่ง**: นิพจน์ PromQL ที่จะถูกเรียกใช้ ขณะที่คุณพิมพ์ พื้นที่ **ตัวอย่างแบบสด** ใต้ฟิลด์จะเรียก query `adminPrometheusQueryPresetPreview` ของเซิร์ฟเวอร์และแสดงค่าปัจจุบันที่คำสั่งของคุณตอบกลับจากอินสแตนซ์ Prometheus เพื่อให้คุณตรวจสอบได้ว่าเทมเพลตทำงานก่อนบันทึก ตัวอย่างถูก debounce และอัปเดตอัตโนมัติเมื่อคุณแก้ไข

Comment thread packages/backend.ai-webui-docs/src/en/admin_menu/admin_menu.md Outdated
Comment thread packages/backend.ai-webui-docs/src/ko/admin_menu/admin_menu.md Outdated
Comment thread packages/backend.ai-webui-docs/src/ja/admin_menu/admin_menu.md Outdated
Comment thread packages/backend.ai-webui-docs/src/th/admin_menu/admin_menu.md Outdated
@agatha197 agatha197 force-pushed the 05-15-docs_model-serving_add_deployment_preset_management_documentation branch from 6bcfb43 to 7f47284 Compare May 18, 2026 03:54
@agatha197 agatha197 force-pushed the 05-15-docs_admin_document_prometheus_query_preset_management_ui branch from d8003f3 to 0c412ff Compare May 18, 2026 03:54
@agatha197 agatha197 changed the base branch from 05-15-docs_model-serving_add_deployment_preset_management_documentation to graphite-base/7445 May 18, 2026 05:42
@agatha197 agatha197 force-pushed the 05-15-docs_admin_document_prometheus_query_preset_management_ui branch from 0c412ff to 10d4a7e Compare May 18, 2026 05:51
@agatha197 agatha197 force-pushed the graphite-base/7445 branch from 7f47284 to 0e1a8dc Compare May 18, 2026 05:51
@agatha197 agatha197 changed the base branch from graphite-base/7445 to 05-15-docs_model-serving_add_deployment_preset_management_documentation May 18, 2026 05:51
@agatha197 agatha197 changed the base branch from 05-15-docs_model-serving_add_deployment_preset_management_documentation to graphite-base/7445 May 18, 2026 06:29
@agatha197 agatha197 deleted the branch 05-18-docs_model-serving_capture_deployment_preset_edit_page_screenshot May 18, 2026 06:45
@agatha197 agatha197 closed this May 18, 2026
@agatha197 agatha197 reopened this May 18, 2026
@github-actions github-actions Bot added the size:S 10~30 LoC label May 18, 2026
@github-actions github-actions Bot removed the size:L 100~500 LoC label May 18, 2026
@agatha197 agatha197 changed the base branch from graphite-base/7445 to 05-15-docs_model-serving_add_deployment_preset_management_documentation May 18, 2026 07:13
@agatha197 agatha197 changed the base branch from 05-15-docs_model-serving_add_deployment_preset_management_documentation to 05-18-docs_model-serving_capture_deployment_preset_edit_page_screenshot May 18, 2026 07:23
yomybaby added 2 commits May 18, 2026 16:28
Part of the recent main-branch docs catch-up plan (Work Item 2).

FR-2451 added a full CRUD + filter + sort + persisted column settings + live-preview UI for Prometheus query presets under the admin serving page. Source PRs:
- FR-2451 #7082 / #7084 / #7085 / #7086 / #7094 / #7095 / #7221
- FR-2809 #7240 (live query template preview)
- FR-2810 #7242 (batch canonical names on admin preset list)

New H2 "Prometheus Query Presets" added under admin_menu.md with:
- Admin-only :::note callout
- List & Filter (with copyable Query Template cell)
- Column Settings Persistence
- Create a Preset (with live preview)
- Edit a Preset (with live preview)
- Delete a Preset (BAIConfirmModalWithInput typed confirm + :::danger admonition)

Updated in all 4 languages (en/ko/ja/th). Screenshots flagged with TODO markers for separate capture. UI labels verified against resources/i18n.
…R D)

Captures all 3 planned screenshots × 4 languages (12 PNGs):
- admin_prometheus_preset_list.png
- admin_prometheus_preset_create_modal.png
- admin_prometheus_preset_edit_modal.png

Note: live preview area on isla-sorna shows "Query execution failed" (no Prometheus reachable on test backend), but the preview area itself is visible in the captures — which satisfies the TODO. Re-capture against a backend with a working Prometheus endpoint if numeric preview values are needed for the docs.

Captured at 2× zoom via Portless dev, per-locale via window.switchLanguage().
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:L 100~500 LoC

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants