Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 hibigandgithub-actions[bot]
|
d0d713f20b |
@@ -124,24 +124,13 @@ Always check `@gpustack/core-ui` first. Frequently reused:
|
|||||||
- **Form fields**: `BaseSelect`, `Input` (labeled).
|
- **Form fields**: `BaseSelect`, `Input` (labeled).
|
||||||
- **Text overflow**: `AutoTooltip`.
|
- **Text overflow**: `AutoTooltip`.
|
||||||
- **Icons**: `IconFont`.
|
- **Icons**: `IconFont`.
|
||||||
- **Tags & status** (4 variants): see the section below.
|
- **Status display** (success/failed/processing/warning): `StatusTag`.
|
||||||
- **Permission-gated visibility**: `Access` / `useAccess`.
|
- **Permission-gated visibility**: `Access` / `useAccess`.
|
||||||
- **Request hooks**: `useRequest` / `useQueryData` / `useQueryDataList`.
|
- **Request hooks**: `useRequest` / `useQueryData` / `useQueryDataList`.
|
||||||
- **Table data fetching**: `useTableFetch`.
|
- **Table data fetching**: `useTableFetch`.
|
||||||
- **Submit guard** (prevent double-submit): `useSubmitLock`.
|
- **Submit guard** (prevent double-submit): `useSubmitLock`.
|
||||||
- **Tabbed forms**: `ScrollSpyTabs`.
|
- **Tabbed forms**: `ScrollSpyTabs`.
|
||||||
|
|
||||||
# Tags & status indicators
|
|
||||||
|
|
||||||
Four core-ui components cover tag/status display in tables and lists. Pick by **what the value means**, not by how it looks — don't reach for a generic antd `Tag`:
|
|
||||||
|
|
||||||
- **`StatusTag`** — semantic status with a **dynamic message/detail** (tooltip, download, extra content). Use when a row's status carries variable text, e.g. a failed job with an error message. Colors come from `StatusColorMap` (error/warning/transitioning/success/inactive).
|
|
||||||
- **`StatusDot`** — colored dot + short label, **no message**. Use for a plain status/type cell where the value is a fixed enum (e.g. an event-type or log column). Same `StatusColorMap` palette; `inactive` dot is quaternary. If the status needs dynamic text, use `StatusTag` instead.
|
|
||||||
- **`ThemeTag`** — a **standalone category label** (independent content, e.g. a permission scope or a model name). Default neutral; wraps antd `Tag`.
|
|
||||||
- **`TextAttribute`** — a small neutral pill that is a **subordinate annotation following a primary text** (e.g. `key-name [custom]`), not a standalone tag. Manages its own leading margin. Two variants: `filled` (default) and `outlined`. Ref the name column in `src/pages/api-keys/hooks/use-keys-columns.tsx`.
|
|
||||||
|
|
||||||
Rule of thumb: semantic + dynamic text → `StatusTag`; semantic + fixed enum → `StatusDot`; independent category → `ThemeTag`; annotation of nearby text → `TextAttribute`.
|
|
||||||
|
|
||||||
# Dynamic add-item form fields
|
# Dynamic add-item form fields
|
||||||
|
|
||||||
When building a form, select the add-item component from the **shape of the field's data** (its schema). Match the schema, don't hand-roll a list UI:
|
When building a form, select the add-item component from the **shape of the field's data** (its schema). Match the schema, don't hand-roll a list UI:
|
||||||
|
|||||||
+1
-1
@@ -17,7 +17,7 @@
|
|||||||
"@ant-design/pro-components": "3.1.0-0",
|
"@ant-design/pro-components": "3.1.0-0",
|
||||||
"@antv/g6": "^5.0.51",
|
"@antv/g6": "^5.0.51",
|
||||||
"@braintree/sanitize-url": "^7.1.1",
|
"@braintree/sanitize-url": "^7.1.1",
|
||||||
"@gpustack/core-ui": "^1.0.42",
|
"@gpustack/core-ui": "^1.0.38",
|
||||||
"@huggingface/gguf": "^0.1.7",
|
"@huggingface/gguf": "^0.1.7",
|
||||||
"@huggingface/hub": "^0.15.1",
|
"@huggingface/hub": "^0.15.1",
|
||||||
"@huggingface/tasks": "^0.11.6",
|
"@huggingface/tasks": "^0.11.6",
|
||||||
|
|||||||
Generated
+5
-5
@@ -24,8 +24,8 @@ importers:
|
|||||||
specifier: ^7.1.1
|
specifier: ^7.1.1
|
||||||
version: 7.1.2
|
version: 7.1.2
|
||||||
'@gpustack/core-ui':
|
'@gpustack/core-ui':
|
||||||
specifier: ^1.0.42
|
specifier: ^1.0.38
|
||||||
version: 1.0.42(czdvzceysqw7iv6pct2ucnb23e)
|
version: 1.0.38(czdvzceysqw7iv6pct2ucnb23e)
|
||||||
'@huggingface/gguf':
|
'@huggingface/gguf':
|
||||||
specifier: ^0.1.7
|
specifier: ^0.1.7
|
||||||
version: 0.1.18
|
version: 0.1.18
|
||||||
@@ -1481,8 +1481,8 @@ packages:
|
|||||||
resolution: {integrity: sha512-KWk80UPIzPmUg+P0rKh6TqspRw0G6eux1PuJr+zz47ftMaZ9QDwbGzHZbtzWkl5hgayM/qrKRutllRC7D/vVXQ==, tarball: https://registry.npmjs.org/@formatjs/intl-utils/-/intl-utils-2.3.0.tgz}
|
resolution: {integrity: sha512-KWk80UPIzPmUg+P0rKh6TqspRw0G6eux1PuJr+zz47ftMaZ9QDwbGzHZbtzWkl5hgayM/qrKRutllRC7D/vVXQ==, tarball: https://registry.npmjs.org/@formatjs/intl-utils/-/intl-utils-2.3.0.tgz}
|
||||||
deprecated: the package is rather renamed to @formatjs/ecma-abstract with some changes in functionality (primarily selectUnit is removed and we don't plan to make any further changes to this package
|
deprecated: the package is rather renamed to @formatjs/ecma-abstract with some changes in functionality (primarily selectUnit is removed and we don't plan to make any further changes to this package
|
||||||
|
|
||||||
'@gpustack/core-ui@1.0.42':
|
'@gpustack/core-ui@1.0.38':
|
||||||
resolution: {integrity: sha512-upMClTHU+xAqd8dlx0w1S9XWHlog5g1hcOCulTk2rmMXqgl66QHfqhEFhJnWIGe1xc8tEj6rW3r5Sirif+qswA==, tarball: https://registry.npmjs.org/@gpustack/core-ui/-/core-ui-1.0.42.tgz}
|
resolution: {integrity: sha512-7+38qgsFwubb1HyQreICkG1aWcXHM48MXoLY8D14aO6GYWYaO6G4NSkBrXHgpAnB4y3ReYfObH8l3Naq/0YgZw==, tarball: https://registry.npmjs.org/@gpustack/core-ui/-/core-ui-1.0.38.tgz}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
'@ant-design/icons': ^6.1.0
|
'@ant-design/icons': ^6.1.0
|
||||||
'@ant-design/pro-components': 3.1.0-0
|
'@ant-design/pro-components': 3.1.0-0
|
||||||
@@ -10802,7 +10802,7 @@ snapshots:
|
|||||||
|
|
||||||
'@formatjs/intl-utils@2.3.0': {}
|
'@formatjs/intl-utils@2.3.0': {}
|
||||||
|
|
||||||
'@gpustack/core-ui@1.0.42(czdvzceysqw7iv6pct2ucnb23e)':
|
'@gpustack/core-ui@1.0.38(czdvzceysqw7iv6pct2ucnb23e)':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@ant-design/icons': 6.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
'@ant-design/icons': 6.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||||
'@ant-design/pro-components': 3.1.0-0(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
'@ant-design/pro-components': 3.1.0-0(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||||
|
|||||||
@@ -1,24 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
||||||
<defs>
|
|
||||||
<!-- 顶面填充（亮面，高透明度） -->
|
|
||||||
<linearGradient id="cube-top-grad" x1="12" y1="2" x2="12" y2="12" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0%" stop-color="#f759ab" stop-opacity="0.18"/>
|
|
||||||
<stop offset="100%" stop-color="#c41d7f" stop-opacity="0.1"/>
|
|
||||||
</linearGradient>
|
|
||||||
<!-- 左侧面填充（暗面，低透明度） -->
|
|
||||||
<linearGradient id="cube-left-grad" x1="2" y1="7" x2="12" y2="17" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0%" stop-color="#c41d7f" stop-opacity="0.12"/>
|
|
||||||
<stop offset="100%" stop-color="#c41d7f" stop-opacity="0.04"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="cube-stroke-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0%" stop-color="#f759ab"/>
|
|
||||||
<stop offset="100%" stop-color="#c41d7f"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<!-- 顶面填充 -->
|
|
||||||
<polygon points="12,2 21.5,6.7 12,11.5 2.5,6.7" fill="url(#cube-top-grad)" />
|
|
||||||
<!-- 左侧面填充 -->
|
|
||||||
<polygon points="2.5,6.7 12,11.5 12,21.3 2.5,16.5" fill="url(#cube-left-grad)" />
|
|
||||||
<!-- 立方体全纯线外骨架（细化为圆角衔接） -->
|
|
||||||
<path d="M12 2L2.5 6.7M12 2l9.5 4.7M21.5 6.7L12 11.5M2.5 6.7L12 11.5M2.5 6.7v9.8l9.5 4.8M21.5 6.7v9.8l-9.5 4.8M12 11.5v9.8" stroke="url(#cube-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1,22 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
||||||
<defs>
|
|
||||||
<!-- 1. 定义专属微通透渐变填充 -->
|
|
||||||
<linearGradient id="img-fill-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0%" stop-color="#d46b08" stop-opacity="0.12"/>
|
|
||||||
<stop offset="100%" stop-color="#d46b08" stop-opacity="0.04"/>
|
|
||||||
</linearGradient>
|
|
||||||
<!-- 2. 定义边框高精度渐变（亮橙到深橙，拉开层次） -->
|
|
||||||
<linearGradient id="img-stroke-grad" x1="4" y1="4" x2="20" y2="20" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0%" stop-color="#fa8c16"/>
|
|
||||||
<stop offset="100%" stop-color="#d46b08"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<!-- 3. 精装底色充填层 -->
|
|
||||||
<rect x="3" y="3" width="18" height="18" rx="4" fill="url(#img-fill-grad)" />
|
|
||||||
<!-- 4. 高级柔和微圆角边框层 -->
|
|
||||||
<rect x="3" y="3" width="18" height="18" rx="4" stroke="url(#img-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<!-- 内部几何现代山脉线条 -->
|
|
||||||
<path d="M3 16l4-4a2 2 0 0 1 2.8 0l5.2 5.2M13 15l2.5-2.5a2 2 0 0 1 2.8 0l2.7 2.7" stroke="url(#img-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<!-- 标志性通透小钻石 -->
|
|
||||||
<rect x="14" y="6" width="4" height="4" rx="1.5" transform="rotate(45 16 8)" fill="#fa8c16" fill-opacity="0.3" stroke="url(#img-stroke-grad)" stroke-width="1"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1,17 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="chat-fill-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0%" stop-color="#389e0d" stop-opacity="0.1"/>
|
|
||||||
<stop offset="100%" stop-color="#389e0d" stop-opacity="0.02"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="chat-stroke-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0%" stop-color="#73d13d"/>
|
|
||||||
<stop offset="100%" stop-color="#389e0d"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<!-- 主现代对话框体（全部改为圆润R角，精装填充） -->
|
|
||||||
<path d="M18 4H6a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h7.5l3.5 3.5a1 1 0 0 0 1.5-.5V17a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3z" fill="url(#chat-fill-grad)" stroke="url(#chat-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<!-- 内部通透对话线条（细化为圆角代码采样块感） -->
|
|
||||||
<rect x="7" y="8" width="8" height="1.5" rx="0.75" fill="#73d13d" fill-opacity="0.3"/>
|
|
||||||
<rect x="7" y="11.5" width="10" height="1.5" rx="0.75" fill="#73d13d" fill-opacity="0.2"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,19 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="rank-fill-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0%" stop-color="#08979c" stop-opacity="0.1"/>
|
|
||||||
<stop offset="100%" stop-color="#08979c" stop-opacity="0.01"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="rank-stroke-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0%" stop-color="#36cfc9"/>
|
|
||||||
<stop offset="100%" stop-color="#08979c"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<!-- 数据权重条（全部改为高级圆角） -->
|
|
||||||
<rect x="11" y="4" width="10" height="2.5" rx="1.25" fill="#36cfc9" fill-opacity="0.1" stroke="url(#rank-stroke-grad)" stroke-width="1.5"/>
|
|
||||||
<rect x="11" y="9" width="7.5" height="2.5" rx="1.25" fill="#36cfc9" fill-opacity="0.05" stroke="url(#rank-stroke-grad)" stroke-width="1.5"/>
|
|
||||||
<rect x="11" y="14" width="5" height="2.5" rx="1.25" stroke="url(#rank-stroke-grad)" stroke-width="1.5"/>
|
|
||||||
<!-- 基准线与立体双向指引箭头（优化为圆角） -->
|
|
||||||
<path d="M3 17l3 3 3-3M6 4v16" stroke="url(#rank-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<path d="M4.5 5.5L6 4l1.5 1.5" stroke="url(#rank-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1,18 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="stt-fill-grad" x1="12" y1="3" x2="12" y2="14" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0%" stop-color="#40a9ff" stop-opacity="0.2"/>
|
|
||||||
<stop offset="100%" stop-color="#1677ff" stop-opacity="0.05"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="stt-stroke-grad" x1="12" y1="3" x2="12" y2="21" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0%" stop-color="#40a9ff"/>
|
|
||||||
<stop offset="100%" stop-color="#1677ff"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<!-- 麦克风核心体：精装通透填充 -->
|
|
||||||
<rect x="8.5" y="3" width="7" height="11" rx="3.5" fill="url(#stt-fill-grad)" stroke="url(#stt-stroke-grad)" stroke-width="1.8" />
|
|
||||||
<!-- 内部音膜立体结构线（细化为点状） -->
|
|
||||||
<line x1="10" y1="8" x2="14" y2="8" stroke="url(#stt-stroke-grad)" stroke-width="1" stroke-dasharray="1 2"/>
|
|
||||||
<!-- 悬挂外托架与底座（全部改为高级圆角） -->
|
|
||||||
<path d="M5 10a7 7 0 0 0 14 0M12 17v4M8 21h8" stroke="url(#stt-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,23 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
||||||
<defs>
|
|
||||||
<!-- 1. 核心高通透深蓝渐变充填 -->
|
|
||||||
<linearGradient id="tts-v2-fill" x1="12" y1="2" x2="12" y2="22" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0%" stop-color="#2f54eb" stop-opacity="0.15"/>
|
|
||||||
<stop offset="100%" stop-color="#1d39c4" stop-opacity="0.03"/>
|
|
||||||
</linearGradient>
|
|
||||||
<!-- 2. 精准调校的专属蓝色渐变边框 -->
|
|
||||||
<linearGradient id="tts-v2-stroke" x1="4" y1="4" x2="20" y2="20" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0%" stop-color="#2f54eb"/>
|
|
||||||
<stop offset="100%" stop-color="#1d39c4"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<!-- 左侧：低频辅助声波（大间距，带现代圆角） -->
|
|
||||||
<rect x="4" y="8" width="2.2" height="8" rx="1.1" stroke="url(#tts-v2-stroke)" stroke-width="1.8" stroke-linecap="round"/>
|
|
||||||
|
|
||||||
<!-- 中央：核心高频声波主体（拉大宽度，注入通透水晶质感） -->
|
|
||||||
<rect x="10.4" y="2" width="3.2" height="20" rx="1.6" fill="url(#tts-v2-fill)" stroke="url(#tts-v2-stroke)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
|
|
||||||
<!-- 右侧：高频衰减声波（保持几何对称与呼吸感） -->
|
|
||||||
<rect x="17.8" y="5" width="2.2" height="14" rx="1.1" stroke="url(#tts-v2-stroke)" stroke-width="1.8" stroke-linecap="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1,3 +0,0 @@
|
|||||||
.ant-alert-with-description .ant-alert-title {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
@@ -1,5 +1,4 @@
|
|||||||
@import './table.less';
|
@import './table.less';
|
||||||
@import './alert.less';
|
|
||||||
|
|
||||||
.m-b-20 {
|
.m-b-20 {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
|||||||
@@ -43,10 +43,6 @@ export default {
|
|||||||
DatePicker: {
|
DatePicker: {
|
||||||
fontSizeLG: 14
|
fontSizeLG: 14
|
||||||
},
|
},
|
||||||
Alert: {
|
|
||||||
withDescriptionPadding: '12px 16px',
|
|
||||||
withDescriptionIconSize: 18
|
|
||||||
},
|
|
||||||
Menu: {
|
Menu: {
|
||||||
iconSize: 16,
|
iconSize: 16,
|
||||||
iconMarginInlineEnd: 12,
|
iconMarginInlineEnd: 12,
|
||||||
|
|||||||
@@ -26,8 +26,8 @@ export default {
|
|||||||
cellPaddingInline: 16,
|
cellPaddingInline: 16,
|
||||||
cellPaddingBlock: 6,
|
cellPaddingBlock: 6,
|
||||||
cellFontSize: 14,
|
cellFontSize: 14,
|
||||||
rowSelectedHoverBg: 'rgb(247 247 247)',
|
rowSelectedHoverBg: 'rgb(249 249 249)',
|
||||||
rowHoverBg: 'rgb(247 247 247)',
|
rowHoverBg: 'rgb(249 249 249)',
|
||||||
rowSelectedBg: 'transparent',
|
rowSelectedBg: 'transparent',
|
||||||
headerSortActiveBg: 'transparent',
|
headerSortActiveBg: 'transparent',
|
||||||
headerSortHoverBg: 'transparent',
|
headerSortHoverBg: 'transparent',
|
||||||
@@ -47,13 +47,6 @@ export default {
|
|||||||
DatePicker: {
|
DatePicker: {
|
||||||
fontSizeLG: 14
|
fontSizeLG: 14
|
||||||
},
|
},
|
||||||
Alert: {
|
|
||||||
withDescriptionPadding: '12px 16px',
|
|
||||||
withDescriptionIconSize: 18
|
|
||||||
},
|
|
||||||
Card: {
|
|
||||||
headerHeight: 50
|
|
||||||
},
|
|
||||||
Menu: {
|
Menu: {
|
||||||
iconSize: 16,
|
iconSize: 16,
|
||||||
iconMarginInlineEnd: 12,
|
iconMarginInlineEnd: 12,
|
||||||
@@ -123,7 +116,7 @@ export default {
|
|||||||
borderRadiusLG: 6,
|
borderRadiusLG: 6,
|
||||||
borderRadius: 4,
|
borderRadius: 4,
|
||||||
borderRadiusSM: 3,
|
borderRadiusSM: 3,
|
||||||
colorBgContainer: '#fdfdfd',
|
colorBgContainer: '#fff',
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
motion: true
|
motion: true
|
||||||
}
|
}
|
||||||
|
|||||||
+15
-2
@@ -21,6 +21,8 @@ html {
|
|||||||
--color-fill-sider: #f4f5f4;
|
--color-fill-sider: #f4f5f4;
|
||||||
--color-bg-1: #f4f5f4;
|
--color-bg-1: #f4f5f4;
|
||||||
--color-scroll-bg: #d9d9d9;
|
--color-scroll-bg: #d9d9d9;
|
||||||
|
--color-fill-2: #fff;
|
||||||
|
--color-fill-3: #f3f6fa;
|
||||||
--color-logs-bg: #1e1e1e;
|
--color-logs-bg: #1e1e1e;
|
||||||
--color-logs-text: #d4d4d4;
|
--color-logs-text: #d4d4d4;
|
||||||
--layout-content-blockpadding: 24px;
|
--layout-content-blockpadding: 24px;
|
||||||
@@ -74,6 +76,7 @@ html {
|
|||||||
--ant-rate-star-color: #fadb14;
|
--ant-rate-star-color: #fadb14;
|
||||||
--color-fill-spin-bg: rgba(255, 255, 255, 15%);
|
--color-fill-spin-bg: rgba(255, 255, 255, 15%);
|
||||||
--width-tooltip-max: 420px;
|
--width-tooltip-max: 420px;
|
||||||
|
--color-bg-tooltip: '#fff';
|
||||||
--color-modal-content-bg: rgba(255, 255, 255, 90%);
|
--color-modal-content-bg: rgba(255, 255, 255, 90%);
|
||||||
--color-modal-box-shadow: 0 4px 16px rgba(0, 0, 0, 10%);
|
--color-modal-box-shadow: 0 4px 16px rgba(0, 0, 0, 10%);
|
||||||
--color-spotlight-bg: rgba(255, 255, 255, 100%);
|
--color-spotlight-bg: rgba(255, 255, 255, 100%);
|
||||||
@@ -88,7 +91,6 @@ html {
|
|||||||
// ======== container ============
|
// ======== container ============
|
||||||
--color-border-container: #ededed;
|
--color-border-container: #ededed;
|
||||||
--color-text-table-header: #71717a;
|
--color-text-table-header: #71717a;
|
||||||
--seal-table-row-min-height: 68px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme='realDark'] {
|
html[data-theme='realDark'] {
|
||||||
@@ -98,6 +100,7 @@ html[data-theme='realDark'] {
|
|||||||
--color-editor-dark: #00101f;
|
--color-editor-dark: #00101f;
|
||||||
--color-editor-light: #fafafa;
|
--color-editor-light: #fafafa;
|
||||||
--color-fill-spin-bg: rgba(55, 55, 55, 50%);
|
--color-fill-spin-bg: rgba(55, 55, 55, 50%);
|
||||||
|
--color-bg-tooltip: #424242;
|
||||||
--color-editor-header-bg: #292929;
|
--color-editor-header-bg: #292929;
|
||||||
--color-progress-text: rgba(255, 255, 255, 80%);
|
--color-progress-text: rgba(255, 255, 255, 80%);
|
||||||
--color-modal-content-bg: #1f1f1f;
|
--color-modal-content-bg: #1f1f1f;
|
||||||
@@ -112,9 +115,19 @@ html[data-theme='realDark'] {
|
|||||||
.ant-result-image {
|
.ant-result-image {
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ant-pro-page-container-affix .ant-pro-page-container-warp {
|
||||||
|
background-color: #292929 !important;
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme='light'] {
|
html[data-theme='light'] {
|
||||||
|
.ant-pro-page-container-affix .ant-pro-page-container-warp {
|
||||||
|
background-color: #fff !important;
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
background-color: #f4f5f6;
|
background-color: #f4f5f6;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -197,7 +210,7 @@ body {
|
|||||||
|
|
||||||
tr > td {
|
tr > td {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
height: var(--seal-table-row-min-height);
|
height: 68px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,38 +8,24 @@ const findValidJSONStrings = (inputStr: string) => {
|
|||||||
const openingBraceIndex = inputStr.indexOf('{', startIndex);
|
const openingBraceIndex = inputStr.indexOf('{', startIndex);
|
||||||
if (openingBraceIndex === -1) break; // No more opening braces
|
if (openingBraceIndex === -1) break; // No more opening braces
|
||||||
|
|
||||||
// find the matching closing brace, ignoring braces inside string
|
let closingBraceIndex = openingBraceIndex;
|
||||||
// literals (e.g. a state_message containing `{`/`}`)
|
|
||||||
let closingBraceIndex = -1;
|
|
||||||
let braceCount = 0;
|
let braceCount = 0;
|
||||||
let inString = false;
|
|
||||||
let escaped = false;
|
|
||||||
|
|
||||||
for (let i = openingBraceIndex; i < inputStr.length; i++) {
|
// find couple of braces
|
||||||
const char = inputStr[i];
|
while (closingBraceIndex < inputStr.length) {
|
||||||
if (inString) {
|
if (inputStr[closingBraceIndex] === '{') {
|
||||||
if (escaped) {
|
|
||||||
escaped = false;
|
|
||||||
} else if (char === '\\') {
|
|
||||||
escaped = true;
|
|
||||||
} else if (char === '"') {
|
|
||||||
inString = false;
|
|
||||||
}
|
|
||||||
} else if (char === '"') {
|
|
||||||
inString = true;
|
|
||||||
} else if (char === '{') {
|
|
||||||
braceCount++;
|
braceCount++;
|
||||||
} else if (char === '}') {
|
} else if (inputStr[closingBraceIndex] === '}') {
|
||||||
braceCount--;
|
braceCount--;
|
||||||
if (braceCount === 0) {
|
|
||||||
closingBraceIndex = i;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
if (braceCount === 0) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
closingBraceIndex++;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (closingBraceIndex === -1) {
|
if (braceCount !== 0) {
|
||||||
// no matching closing brace yet, wait for more data
|
// no matching closing brace
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -51,11 +37,11 @@ const findValidJSONStrings = (inputStr: string) => {
|
|||||||
try {
|
try {
|
||||||
const parsedData = JSON.parse(jsonString);
|
const parsedData = JSON.parse(jsonString);
|
||||||
validJSONStrings.push(parsedData);
|
validJSONStrings.push(parsedData);
|
||||||
|
startIndex = closingBraceIndex + 1;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// skip the malformed segment instead of breaking, otherwise it jams
|
// mabye invalid JSON
|
||||||
// the buffer and every later event on this stream is lost
|
break;
|
||||||
}
|
}
|
||||||
startIndex = closingBraceIndex + 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -43,11 +43,8 @@ export const createAxiosToken = (): CancelTokenSource => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const sliceData = (data: string, loaded: number, loadedSize: any) => {
|
export const sliceData = (data: string, loaded: number, loadedSize: any) => {
|
||||||
// `loaded` is a byte count while `data` is a UTF-16 string; with any
|
|
||||||
// non-ASCII payload the two drift apart, so track consumed characters by
|
|
||||||
// string length only
|
|
||||||
const result = data.slice(loadedSize.current);
|
const result = data.slice(loadedSize.current);
|
||||||
loadedSize.current = data.length;
|
loadedSize.current = loaded;
|
||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,208 +0,0 @@
|
|||||||
import { convertFileSize } from '@/utils';
|
|
||||||
import { useIntl } from '@umijs/max';
|
|
||||||
import { Flex, Popover, theme } from 'antd';
|
|
||||||
import { createStyles } from 'antd-style';
|
|
||||||
import type { GlobalToken } from 'antd/es/theme';
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
export interface DualArcGaugeItem {
|
|
||||||
index: number;
|
|
||||||
label?: string;
|
|
||||||
memory: {
|
|
||||||
total: number; // bytes
|
|
||||||
used: number; // bytes — outer arc (semantic color)
|
|
||||||
allocated: number; // bytes — inner arc (blue)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DualArcGaugeProps {
|
|
||||||
data: DualArcGaugeItem[];
|
|
||||||
}
|
|
||||||
|
|
||||||
// guage external radius: 20, internal radius: 16, stroke width: 2
|
|
||||||
const CX = 25;
|
|
||||||
const CY = 24;
|
|
||||||
const R_OUT = 20;
|
|
||||||
const R_IN = 16;
|
|
||||||
const SW = 2.5;
|
|
||||||
const L_OUT = Math.PI * R_OUT;
|
|
||||||
const L_IN = Math.PI * R_IN;
|
|
||||||
const arcPath = (r: number) =>
|
|
||||||
`M ${CX - r} ${CY} A ${r} ${r} 0 0 1 ${CX + r} ${CY}`;
|
|
||||||
const P_OUT = arcPath(R_OUT);
|
|
||||||
const P_IN = arcPath(R_IN);
|
|
||||||
|
|
||||||
const clamp01 = (n: number) => Math.min(Math.max(n, 0), 1);
|
|
||||||
|
|
||||||
// Used color: green < 75%, yellow < 90%, red >= 90%
|
|
||||||
const usedColor = (ratio: number, token: GlobalToken) => {
|
|
||||||
if (ratio >= 0.9) return token.colorError;
|
|
||||||
if (ratio >= 0.75) return token.colorWarning;
|
|
||||||
return token.colorSuccess;
|
|
||||||
};
|
|
||||||
|
|
||||||
const useStyles = createStyles(({ css, token }) => ({
|
|
||||||
row: css`
|
|
||||||
width: fit-content;
|
|
||||||
padding: 3px 6px;
|
|
||||||
border-radius: ${token.borderRadius}px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.15s;
|
|
||||||
&:hover {
|
|
||||||
background-color: ${token.colorFillTertiary};
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
index: css`
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: ${token.colorTextSecondary};
|
|
||||||
border-bottom: 1px dashed var(--ant-blue-6);
|
|
||||||
padding-bottom: 3px;
|
|
||||||
line-height: 1.2;
|
|
||||||
`,
|
|
||||||
popTitle: css`
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: ${token.colorText};
|
|
||||||
margin-bottom: 6px;
|
|
||||||
`,
|
|
||||||
popList: css`
|
|
||||||
font-size: 12px;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
`,
|
|
||||||
metric: css`
|
|
||||||
white-space: nowrap;
|
|
||||||
`,
|
|
||||||
dot: css`
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
border-radius: 50%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
`,
|
|
||||||
value: css`
|
|
||||||
min-width: 64px;
|
|
||||||
text-align: right;
|
|
||||||
font-weight: 500;
|
|
||||||
color: ${token.colorText};
|
|
||||||
`,
|
|
||||||
label: css`
|
|
||||||
color: ${token.colorTextTertiary};
|
|
||||||
`
|
|
||||||
}));
|
|
||||||
|
|
||||||
const DualArcGauge: React.FC<DualArcGaugeProps> = ({ data }) => {
|
|
||||||
const intl = useIntl();
|
|
||||||
const { styles } = useStyles();
|
|
||||||
const { token } = theme.useToken();
|
|
||||||
|
|
||||||
const trackColor = token.colorFillSecondary;
|
|
||||||
const allocColor = 'var(--ant-blue-6)';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Flex vertical gap={2} style={{ width: 'fit-content' }}>
|
|
||||||
{data.map((item) => {
|
|
||||||
const { total = 0, used = 0, allocated = 0 } = item.memory || {};
|
|
||||||
const usedR = total > 0 ? clamp01(used / total) : 0;
|
|
||||||
const allocR = total > 0 ? clamp01(allocated / total) : 0;
|
|
||||||
const pct = Math.round(usedR * 100);
|
|
||||||
const uc = usedColor(usedR, token);
|
|
||||||
// set dim color for allocated if used is 0, otherwise use the same color as used
|
|
||||||
const allocDotColor =
|
|
||||||
allocated > 0 ? allocColor : token.colorTextQuaternary;
|
|
||||||
|
|
||||||
const content = (
|
|
||||||
<div>
|
|
||||||
<div className={styles.popTitle}>
|
|
||||||
[{item.index}]{item.label ? ` ${item.label}` : ''} ·{' '}
|
|
||||||
{convertFileSize(total)}
|
|
||||||
</div>
|
|
||||||
<Flex vertical gap={4} className={styles.popList}>
|
|
||||||
<Flex align="center" gap={6} className={styles.metric}>
|
|
||||||
<span className={styles.dot} style={{ background: uc }} />
|
|
||||||
<span className={styles.value}>{convertFileSize(used)}</span>
|
|
||||||
<span className={styles.label}>
|
|
||||||
{intl.formatMessage({ id: 'resources.table.used' })}
|
|
||||||
</span>
|
|
||||||
</Flex>
|
|
||||||
<Flex align="center" gap={6} className={styles.metric}>
|
|
||||||
<span
|
|
||||||
className={styles.dot}
|
|
||||||
style={{ background: allocDotColor }}
|
|
||||||
/>
|
|
||||||
<span className={styles.value}>
|
|
||||||
{convertFileSize(allocated)}
|
|
||||||
</span>
|
|
||||||
<span className={styles.label}>
|
|
||||||
{intl.formatMessage({ id: 'resources.table.allocated' })}
|
|
||||||
</span>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Popover
|
|
||||||
key={item.index}
|
|
||||||
content={content}
|
|
||||||
placement="right"
|
|
||||||
trigger={['hover', 'click']}
|
|
||||||
>
|
|
||||||
<Flex align="center" gap={6} className={styles.row}>
|
|
||||||
<svg
|
|
||||||
viewBox="0 0 50 28"
|
|
||||||
width={54}
|
|
||||||
height={30}
|
|
||||||
style={{ overflow: 'visible', flexShrink: 0 }}
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d={P_OUT}
|
|
||||||
fill="none"
|
|
||||||
strokeWidth={SW}
|
|
||||||
stroke={trackColor}
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d={P_IN}
|
|
||||||
fill="none"
|
|
||||||
strokeWidth={SW}
|
|
||||||
stroke={trackColor}
|
|
||||||
/>
|
|
||||||
{usedR > 0 && (
|
|
||||||
<path
|
|
||||||
d={P_OUT}
|
|
||||||
fill="none"
|
|
||||||
strokeWidth={SW}
|
|
||||||
stroke={uc}
|
|
||||||
strokeDasharray={`${(usedR * L_OUT).toFixed(1)} ${L_OUT.toFixed(1)}`}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{allocR > 0 && (
|
|
||||||
<path
|
|
||||||
d={P_IN}
|
|
||||||
fill="none"
|
|
||||||
strokeWidth={SW}
|
|
||||||
style={{ stroke: allocColor }}
|
|
||||||
strokeDasharray={`${(allocR * L_IN).toFixed(1)} ${L_IN.toFixed(1)}`}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<text
|
|
||||||
x={CX}
|
|
||||||
y={CY - 0.5}
|
|
||||||
textAnchor="middle"
|
|
||||||
fontSize={9.5}
|
|
||||||
fontWeight={500}
|
|
||||||
fill={uc}
|
|
||||||
style={{ fontVariantNumeric: 'tabular-nums' }}
|
|
||||||
>
|
|
||||||
{pct}%
|
|
||||||
</text>
|
|
||||||
</svg>
|
|
||||||
{<span className={styles.index}>[{item.index}]</span>}
|
|
||||||
</Flex>
|
|
||||||
</Popover>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DualArcGauge;
|
|
||||||
@@ -60,8 +60,7 @@ const ModelTag: React.FC<ModelTagProps> = ({ categoryKey, size }) => {
|
|||||||
opacity: 1,
|
opacity: 1,
|
||||||
paddingInline: 8,
|
paddingInline: 8,
|
||||||
borderRadius: 12,
|
borderRadius: 12,
|
||||||
transform: 'scale(0.9)',
|
transform: 'scale(0.9)'
|
||||||
backgroundColor: 'transparent'
|
|
||||||
}}
|
}}
|
||||||
color={config.color}
|
color={config.color}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -6,12 +6,10 @@ import {
|
|||||||
AutoTooltip,
|
AutoTooltip,
|
||||||
DropdownButtons,
|
DropdownButtons,
|
||||||
IconFont,
|
IconFont,
|
||||||
icons,
|
icons
|
||||||
TextAttribute,
|
|
||||||
ThemeTag
|
|
||||||
} from '@gpustack/core-ui';
|
} from '@gpustack/core-ui';
|
||||||
import { useIntl } from '@umijs/max';
|
import { useIntl } from '@umijs/max';
|
||||||
import { MenuProps, Tooltip } from 'antd';
|
import { MenuProps, Tag, Tooltip } from 'antd';
|
||||||
import { ColumnsType } from 'antd/lib/table';
|
import { ColumnsType } from 'antd/lib/table';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
@@ -141,14 +139,23 @@ const useModelsColumns = ({
|
|||||||
key: 'name',
|
key: 'name',
|
||||||
sorter: tableSorter(1),
|
sorter: tableSorter(1),
|
||||||
render: (text: string, record: ListItem) => (
|
render: (text: string, record: ListItem) => (
|
||||||
<span className="flex items-center gap-8">
|
<span className="flex items-center">
|
||||||
<AutoTooltip ghost style={{ maxWidth: 400 }} title={text}>
|
<AutoTooltip ghost style={{ maxWidth: 400 }} title={text}>
|
||||||
<span className="text-primary">{text}</span>
|
<span className="text-primary">{text}</span>
|
||||||
</AutoTooltip>
|
</AutoTooltip>
|
||||||
{record.is_custom && (
|
{record.is_custom && (
|
||||||
<TextAttribute>
|
<Tag
|
||||||
|
style={{
|
||||||
|
marginLeft: 8,
|
||||||
|
borderRadius: 12,
|
||||||
|
color: 'var(--ant-color-text-tertiary)',
|
||||||
|
borderColor: 'var(--ant-color-split)',
|
||||||
|
backgroundColor: 'transparent'
|
||||||
|
}}
|
||||||
|
variant="outlined"
|
||||||
|
>
|
||||||
{intl.formatMessage({ id: 'playground.params.custom' })}
|
{intl.formatMessage({ id: 'playground.params.custom' })}
|
||||||
</TextAttribute>
|
</Tag>
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
)
|
)
|
||||||
@@ -196,13 +203,26 @@ const useModelsColumns = ({
|
|||||||
)}
|
)}
|
||||||
{(record.scope?.includes('inference') ||
|
{(record.scope?.includes('inference') ||
|
||||||
record.scope?.includes('*')) && (
|
record.scope?.includes('*')) && (
|
||||||
<ThemeTag>
|
<div
|
||||||
|
style={{
|
||||||
|
border: '1px solid var(--ant-color-split)',
|
||||||
|
color: 'var(--ant-color-text-tertiary)',
|
||||||
|
backgroundColor: 'var(--ant-color-fill-quaternary)',
|
||||||
|
borderRadius: 4,
|
||||||
|
fontSize: 13,
|
||||||
|
paddingInline: 8,
|
||||||
|
flexGrow: 0,
|
||||||
|
maxWidth: '100%',
|
||||||
|
width: 'max-content',
|
||||||
|
display: 'flex'
|
||||||
|
}}
|
||||||
|
>
|
||||||
<AutoTooltip ghost>
|
<AutoTooltip ghost>
|
||||||
{record.allowed_model_names?.length
|
{record.allowed_model_names?.length
|
||||||
? record.allowed_model_names.join(', ')
|
? record.allowed_model_names.join(', ')
|
||||||
: intl.formatMessage({ id: 'apikeys.models.all' })}
|
: intl.formatMessage({ id: 'apikeys.models.all' })}
|
||||||
</AutoTooltip>
|
</AutoTooltip>
|
||||||
</ThemeTag>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -120,19 +120,13 @@ const CommunityBackends: React.FC<{
|
|||||||
|
|
||||||
const renderItem = (item: ListItem) => {
|
const renderItem = (item: ListItem) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<BackendCard
|
||||||
style={{
|
active={currentData?.id === item.id}
|
||||||
backgroundColor: 'var(--ant-color-bg-container)'
|
data={item}
|
||||||
}}
|
layout="community"
|
||||||
>
|
onClick={handleOnClickItem}
|
||||||
<BackendCard
|
actionsRenderer={actionsRenderer}
|
||||||
active={currentData?.id === item.id}
|
/>
|
||||||
data={item}
|
|
||||||
layout="community"
|
|
||||||
onClick={handleOnClickItem}
|
|
||||||
actionsRenderer={actionsRenderer}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ const Title = styled.div`
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
background-color: var(--ant-color-bg-elevated);
|
background-color: var(--ant-color-bg-container);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
|
|||||||
@@ -358,9 +358,6 @@ const Clusters: React.FC = () => {
|
|||||||
dataList={list}
|
dataList={list}
|
||||||
provider={options.parent?.provider}
|
provider={options.parent?.provider}
|
||||||
clusterId={options.parent?.id}
|
clusterId={options.parent?.id}
|
||||||
gridTemplate={options.gridTemplate}
|
|
||||||
prefixWidth={options.prefixWidth}
|
|
||||||
columns={options.columns}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -2,14 +2,13 @@ import { PageAction } from '@/config';
|
|||||||
import { PageActionType } from '@/config/types';
|
import { PageActionType } from '@/config/types';
|
||||||
import {
|
import {
|
||||||
CellContent,
|
CellContent,
|
||||||
type ChildGridOptions,
|
|
||||||
DeleteModal,
|
DeleteModal,
|
||||||
ExpandedRowGrid,
|
RowChildren,
|
||||||
TableRowProvider
|
TableRowProvider
|
||||||
} from '@gpustack/core-ui';
|
} from '@gpustack/core-ui';
|
||||||
import { useIntl } from '@umijs/max';
|
import { useIntl } from '@umijs/max';
|
||||||
import { useMemoizedFn } from 'ahooks';
|
import { useMemoizedFn } from 'ahooks';
|
||||||
import { message } from 'antd';
|
import { Col, message, Row } from 'antd';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import React, { useRef, useState } from 'react';
|
import React, { useRef, useState } from 'react';
|
||||||
import { deleteWorkerPool, updateWorkerPool } from '../apis';
|
import { deleteWorkerPool, updateWorkerPool } from '../apis';
|
||||||
@@ -17,10 +16,7 @@ import { ProviderType } from '../config';
|
|||||||
import { NodePoolFormData, NodePoolListItem } from '../config/types';
|
import { NodePoolFormData, NodePoolListItem } from '../config/types';
|
||||||
import usePoolsColumns from '../hooks/use-pools-columns';
|
import usePoolsColumns from '../hooks/use-pools-columns';
|
||||||
import AddPool from './add-pool';
|
import AddPool from './add-pool';
|
||||||
interface PoolRowsProps extends Pick<
|
interface PoolRowsProps {
|
||||||
ChildGridOptions,
|
|
||||||
'gridTemplate' | 'prefixWidth' | 'columns'
|
|
||||||
> {
|
|
||||||
dataList: NodePoolListItem[];
|
dataList: NodePoolListItem[];
|
||||||
provider: ProviderType;
|
provider: ProviderType;
|
||||||
clusterId: number | string;
|
clusterId: number | string;
|
||||||
@@ -29,35 +25,9 @@ interface PoolRowsProps extends Pick<
|
|||||||
const PoolRows: React.FC<PoolRowsProps> = ({
|
const PoolRows: React.FC<PoolRowsProps> = ({
|
||||||
dataList,
|
dataList,
|
||||||
provider,
|
provider,
|
||||||
clusterId,
|
clusterId
|
||||||
gridTemplate,
|
|
||||||
prefixWidth = 0,
|
|
||||||
columns: parentColumns
|
|
||||||
}) => {
|
}) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
|
||||||
// The child row shares the parent's column grid; cells flow left-to-right and
|
|
||||||
// only declare a span, keyed on the pool column's OWN dataIndex — never on a
|
|
||||||
// parent cluster column key. Parent layout: name (1) | provider…state middle
|
|
||||||
// region | created_at (1) | operations (1). The three middle pool columns
|
|
||||||
// cover that region: `replicas`→state (last, 1 track), `image_name`→
|
|
||||||
// models+workers (2 tracks), `instance_type` absorbs the rest (plugins +
|
|
||||||
// provider + gpus).
|
|
||||||
const columnCount = parentColumns?.length ?? 0;
|
|
||||||
const middleSpan = Math.max(columnCount - 3, 1);
|
|
||||||
const spanFor = (dataIndex: string): number => {
|
|
||||||
switch (dataIndex) {
|
|
||||||
case 'instance_type':
|
|
||||||
return Math.max(middleSpan - 3, 1);
|
|
||||||
case 'image_name':
|
|
||||||
return 2;
|
|
||||||
case 'replicas':
|
|
||||||
return 1;
|
|
||||||
default:
|
|
||||||
// name / created_at / operations align 1:1 with their parent column.
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const modalRef = useRef<any>(null);
|
const modalRef = useRef<any>(null);
|
||||||
const [addPoolStatus, setAddPoolStatus] = useState<{
|
const [addPoolStatus, setAddPoolStatus] = useState<{
|
||||||
open: boolean;
|
open: boolean;
|
||||||
@@ -92,10 +62,8 @@ const PoolRows: React.FC<PoolRowsProps> = ({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleOnCell = async (
|
const handleOnCell = async (row: NodePoolListItem, dataIndex: string) => {
|
||||||
row: NodePoolListItem,
|
console.log('handleOncell===', row, dataIndex);
|
||||||
_data: { dataIndex: string; newValue: any; oldValue: any }
|
|
||||||
) => {
|
|
||||||
try {
|
try {
|
||||||
await updateWorkerPool({
|
await updateWorkerPool({
|
||||||
data: row,
|
data: row,
|
||||||
@@ -150,33 +118,31 @@ const PoolRows: React.FC<PoolRowsProps> = ({
|
|||||||
<>
|
<>
|
||||||
{dataList?.map((data: NodePoolListItem) => {
|
{dataList?.map((data: NodePoolListItem) => {
|
||||||
return (
|
return (
|
||||||
<TableRowProvider
|
<div
|
||||||
key={data.id}
|
key={data.id}
|
||||||
value={{ row: data, onCell: handleOnCell }}
|
style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}
|
||||||
>
|
>
|
||||||
<ExpandedRowGrid
|
<TableRowProvider value={{ row: data, onCell: handleOnCell }}>
|
||||||
gridTemplate={gridTemplate}
|
<RowChildren>
|
||||||
prefixWidth={prefixWidth}
|
<Row style={{ width: '100%' }} align="middle">
|
||||||
>
|
{columns.map((col: Record<string, any>) => {
|
||||||
{columns.map((col: Record<string, any>) => (
|
return (
|
||||||
<ExpandedRowGrid.Cell
|
<Col
|
||||||
key={col.dataIndex || col.key}
|
key={col.dataIndex || col.key}
|
||||||
span={spanFor(col.dataIndex)}
|
span={col.span}
|
||||||
style={{
|
style={{
|
||||||
color: 'var(--ant-color-text-secondary)',
|
paddingInline: 0,
|
||||||
// CellContent shrinks to its content inside the flex
|
...(col.style || {})
|
||||||
// cell, so its own align class can't center it —
|
}}
|
||||||
// center at the cell level instead.
|
>
|
||||||
justifyContent: col.align
|
<CellContent {..._.omit(col, ['key'])}></CellContent>
|
||||||
}}
|
</Col>
|
||||||
>
|
);
|
||||||
<CellContent
|
})}
|
||||||
{..._.omit(col, ['key', 'style', 'span'])}
|
</Row>
|
||||||
></CellContent>
|
</RowChildren>
|
||||||
</ExpandedRowGrid.Cell>
|
</TableRowProvider>
|
||||||
))}
|
</div>
|
||||||
</ExpandedRowGrid>
|
|
||||||
</TableRowProvider>
|
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
<AddPool
|
<AddPool
|
||||||
|
|||||||
@@ -153,7 +153,7 @@ const useClusterColumns = (
|
|||||||
span: 3,
|
span: 3,
|
||||||
render: (text: string, record: ClusterListItem) => (
|
render: (text: string, record: ClusterListItem) => (
|
||||||
<>
|
<>
|
||||||
<AutoTooltip ghost title={text} minWidth={20}>
|
<AutoTooltip ghost title={text}>
|
||||||
<span className="text-primary">{record.name}</span>
|
<span className="text-primary">{record.name}</span>
|
||||||
</AutoTooltip>
|
</AutoTooltip>
|
||||||
{record.is_default && (
|
{record.is_default && (
|
||||||
@@ -176,7 +176,6 @@ const useClusterColumns = (
|
|||||||
dataIndex: 'provider',
|
dataIndex: 'provider',
|
||||||
sorter: tableSorter(2),
|
sorter: tableSorter(2),
|
||||||
span: spans.provider,
|
span: spans.provider,
|
||||||
minWidth: 110,
|
|
||||||
render: (value: string) => (
|
render: (value: string) => (
|
||||||
<AutoTooltip ghost minWidth={20}>
|
<AutoTooltip ghost minWidth={20}>
|
||||||
{ProviderLabelMap[value]}
|
{ProviderLabelMap[value]}
|
||||||
@@ -186,7 +185,7 @@ const useClusterColumns = (
|
|||||||
{
|
{
|
||||||
title: intl.formatMessage({ id: 'dashboard.totalgpus' }),
|
title: intl.formatMessage({ id: 'dashboard.totalgpus' }),
|
||||||
dataIndex: 'gpus',
|
dataIndex: 'gpus',
|
||||||
width: 100,
|
span: 2,
|
||||||
sorter: tableSorter(3),
|
sorter: tableSorter(3),
|
||||||
render: (value: number) => <span>{value}</span>
|
render: (value: number) => <span>{value}</span>
|
||||||
},
|
},
|
||||||
@@ -195,15 +194,13 @@ const useClusterColumns = (
|
|||||||
dataIndex: 'models',
|
dataIndex: 'models',
|
||||||
sorter: tableSorter(4),
|
sorter: tableSorter(4),
|
||||||
span: spans.deployments,
|
span: spans.deployments,
|
||||||
maxWidth: 150,
|
|
||||||
render: (value: number) => <span>{value}</span>
|
render: (value: number) => <span>{value}</span>
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: intl.formatMessage({ id: 'resources.nodes' }),
|
title: intl.formatMessage({ id: 'resources.nodes' }),
|
||||||
dataIndex: 'workers',
|
dataIndex: 'workers',
|
||||||
minWidth: 100,
|
|
||||||
maxWidth: 120,
|
|
||||||
sorter: tableSorter(5),
|
sorter: tableSorter(5),
|
||||||
|
span: spans.workers,
|
||||||
render: (value: number, record: ClusterListItem) => (
|
render: (value: number, record: ClusterListItem) => (
|
||||||
<span>
|
<span>
|
||||||
{record.ready_workers} / {record.workers}
|
{record.ready_workers} / {record.workers}
|
||||||
@@ -214,8 +211,6 @@ const useClusterColumns = (
|
|||||||
title: intl.formatMessage({ id: 'common.table.status' }),
|
title: intl.formatMessage({ id: 'common.table.status' }),
|
||||||
dataIndex: 'state',
|
dataIndex: 'state',
|
||||||
span: spans.status,
|
span: spans.status,
|
||||||
minWidth: 80,
|
|
||||||
align: 'center',
|
|
||||||
render: (value: number, record: ClusterListItem) => (
|
render: (value: number, record: ClusterListItem) => (
|
||||||
<StatusTag
|
<StatusTag
|
||||||
statusValue={{
|
statusValue={{
|
||||||
@@ -230,7 +225,7 @@ const useClusterColumns = (
|
|||||||
title: intl.formatMessage({ id: 'common.table.createTime' }),
|
title: intl.formatMessage({ id: 'common.table.createTime' }),
|
||||||
dataIndex: 'created_at',
|
dataIndex: 'created_at',
|
||||||
sorter: tableSorter(6),
|
sorter: tableSorter(6),
|
||||||
width: 180,
|
span: spans.createTime,
|
||||||
render: (value: string) => (
|
render: (value: string) => (
|
||||||
<AutoTooltip ghost minWidth={20}>
|
<AutoTooltip ghost minWidth={20}>
|
||||||
{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
|
{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
|
||||||
|
|||||||
@@ -43,9 +43,12 @@ const usePoolsColumns = (
|
|||||||
showTitle: false
|
showTitle: false
|
||||||
},
|
},
|
||||||
span: 3,
|
span: 3,
|
||||||
|
style: {
|
||||||
|
paddingInline: 'var(--ant-table-cell-padding-inline)'
|
||||||
|
},
|
||||||
render: (text: string) => (
|
render: (text: string) => (
|
||||||
<AutoTooltip title={text} ghost minWidth={20}>
|
<AutoTooltip title={text} ghost minWidth={20}>
|
||||||
<span className="text-primary">{text}</span>
|
{text}
|
||||||
</AutoTooltip>
|
</AutoTooltip>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
@@ -57,6 +60,9 @@ const usePoolsColumns = (
|
|||||||
showTitle: false
|
showTitle: false
|
||||||
},
|
},
|
||||||
span: 4,
|
span: 4,
|
||||||
|
style: {
|
||||||
|
paddingLeft: 62
|
||||||
|
},
|
||||||
render: (text: string, record: ListItem) => (
|
render: (text: string, record: ListItem) => (
|
||||||
<AutoTooltip
|
<AutoTooltip
|
||||||
title={
|
title={
|
||||||
@@ -92,6 +98,9 @@ const usePoolsColumns = (
|
|||||||
ellipsis: {
|
ellipsis: {
|
||||||
showTitle: false
|
showTitle: false
|
||||||
},
|
},
|
||||||
|
style: {
|
||||||
|
paddingLeft: 56
|
||||||
|
},
|
||||||
render: (text: string) => (
|
render: (text: string) => (
|
||||||
<AutoTooltip
|
<AutoTooltip
|
||||||
title={
|
title={
|
||||||
@@ -116,7 +125,9 @@ const usePoolsColumns = (
|
|||||||
dataIndex: 'replicas',
|
dataIndex: 'replicas',
|
||||||
span: 6,
|
span: 6,
|
||||||
key: 'replicas',
|
key: 'replicas',
|
||||||
align: 'center',
|
style: {
|
||||||
|
paddingLeft: 50
|
||||||
|
},
|
||||||
editable: {
|
editable: {
|
||||||
valueType: 'number',
|
valueType: 'number',
|
||||||
title: intl.formatMessage({ id: 'models.table.replicas.edit' })
|
title: intl.formatMessage({ id: 'models.table.replicas.edit' })
|
||||||
@@ -154,6 +165,9 @@ const usePoolsColumns = (
|
|||||||
ellipsis: {
|
ellipsis: {
|
||||||
showTitle: false
|
showTitle: false
|
||||||
},
|
},
|
||||||
|
style: {
|
||||||
|
paddingLeft: 42
|
||||||
|
},
|
||||||
render: (text: string) => (
|
render: (text: string) => (
|
||||||
<AutoTooltip ghost minWidth={20}>
|
<AutoTooltip ghost minWidth={20}>
|
||||||
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
|
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
|
||||||
@@ -165,6 +179,9 @@ const usePoolsColumns = (
|
|||||||
key: 'operations',
|
key: 'operations',
|
||||||
dataIndex: 'operations',
|
dataIndex: 'operations',
|
||||||
span: 3,
|
span: 3,
|
||||||
|
style: {
|
||||||
|
paddingLeft: 36
|
||||||
|
},
|
||||||
render: (text: string, record: ListItem) => (
|
render: (text: string, record: ListItem) => (
|
||||||
<DropdownButtons
|
<DropdownButtons
|
||||||
items={actionItems}
|
items={actionItems}
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
import PluginExtraFields from '@/components/plugin-extra-fields';
|
|
||||||
import { AutoTooltip, IconFont, ThemeTag } from '@gpustack/core-ui';
|
import { AutoTooltip, IconFont, ThemeTag } from '@gpustack/core-ui';
|
||||||
import { useIntl } from '@umijs/max';
|
import { useIntl } from '@umijs/max';
|
||||||
import { Flex, Tag } from 'antd';
|
import { Flex, Tag } from 'antd';
|
||||||
@@ -272,10 +271,6 @@ const InstanceTypeItem: React.FC<InstanceTypeItemProps> = ({ item }) => {
|
|||||||
{cpuManufacturer}
|
{cpuManufacturer}
|
||||||
</ThemeTag>
|
</ThemeTag>
|
||||||
)}
|
)}
|
||||||
<PluginExtraFields
|
|
||||||
name="InstanceTypeBillingBadge"
|
|
||||||
context={{ instanceType: item }}
|
|
||||||
/>
|
|
||||||
</Flex>
|
</Flex>
|
||||||
</Title>
|
</Title>
|
||||||
<InstanceMetadataSection spec={specData}></InstanceMetadataSection>
|
<InstanceMetadataSection spec={specData}></InstanceMetadataSection>
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
import PluginExtraFields from '@/components/plugin-extra-fields';
|
|
||||||
import { FileSkeletonRows } from '@/pages/llmodels/components/model-source/file-skeleton';
|
import { FileSkeletonRows } from '@/pages/llmodels/components/model-source/file-skeleton';
|
||||||
import { TemplateCard } from '@gpustack/core-ui';
|
import { TemplateCard } from '@gpustack/core-ui';
|
||||||
import { Empty, Flex, Spin } from 'antd';
|
import { Empty, Flex, Spin } from 'antd';
|
||||||
@@ -41,10 +40,6 @@ const InstanceTypeList: React.FC<InstanceTypeListProps> = ({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Flex orientation="vertical" gap={16}>
|
<Flex orientation="vertical" gap={16}>
|
||||||
<PluginExtraFields
|
|
||||||
name="InstanceTypeBillingProvider"
|
|
||||||
context={{ instanceTypes: dataList }}
|
|
||||||
/>
|
|
||||||
{dataList.map((item) => {
|
{dataList.map((item) => {
|
||||||
const name = item.name;
|
const name = item.name;
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -28,13 +28,21 @@ interface ColumnsHookProps {
|
|||||||
const getKindLabel = (record: ListItem) => {
|
const getKindLabel = (record: ListItem) => {
|
||||||
if (record.spec?.nfs)
|
if (record.spec?.nfs)
|
||||||
return (
|
return (
|
||||||
<ThemeTag color="cyan" icon={<FolderOutlined />}>
|
<ThemeTag
|
||||||
|
style={{ width: 'fit-content' }}
|
||||||
|
color="cyan"
|
||||||
|
icon={<FolderOutlined />}
|
||||||
|
>
|
||||||
{StorageTypeKindLabelMap.nfs}
|
{StorageTypeKindLabelMap.nfs}
|
||||||
</ThemeTag>
|
</ThemeTag>
|
||||||
);
|
);
|
||||||
if (record.spec?.s3)
|
if (record.spec?.s3)
|
||||||
return (
|
return (
|
||||||
<ThemeTag color="green" icon={<IconFont type="icon-database" />}>
|
<ThemeTag
|
||||||
|
style={{ width: 'fit-content' }}
|
||||||
|
color="green"
|
||||||
|
icon={<IconFont type="icon-database" />}
|
||||||
|
>
|
||||||
{StorageTypeKindLabelMap.s3}
|
{StorageTypeKindLabelMap.s3}
|
||||||
</ThemeTag>
|
</ThemeTag>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import { getGPUStackPlugin } from '@/plugins';
|
|||||||
import { DownOutlined, QuestionCircleOutlined } from '@ant-design/icons';
|
import { DownOutlined, QuestionCircleOutlined } from '@ant-design/icons';
|
||||||
import {
|
import {
|
||||||
AlertBlockInfo,
|
AlertBlockInfo,
|
||||||
CardRadioGroup,
|
TooltipList,
|
||||||
Transfer as TransferInner
|
Transfer as TransferInner
|
||||||
} from '@gpustack/core-ui';
|
} from '@gpustack/core-ui';
|
||||||
import { useIntl } from '@umijs/max';
|
import { useIntl } from '@umijs/max';
|
||||||
@@ -15,8 +15,9 @@ import {
|
|||||||
Dropdown,
|
Dropdown,
|
||||||
DropdownProps,
|
DropdownProps,
|
||||||
Empty,
|
Empty,
|
||||||
Flex,
|
|
||||||
Form,
|
Form,
|
||||||
|
Radio,
|
||||||
|
RadioChangeEvent,
|
||||||
Tooltip
|
Tooltip
|
||||||
} from 'antd';
|
} from 'antd';
|
||||||
import {
|
import {
|
||||||
@@ -79,9 +80,9 @@ const Label = styled.div`
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: 16px;
|
margin-block: 8px 12px;
|
||||||
font-size: 13px;
|
font-size: 14px;
|
||||||
color: var(--ant-color-text-secondary);
|
color: var(--ant-color-text-tertiary);
|
||||||
`;
|
`;
|
||||||
|
|
||||||
interface AccessControlFormProps {
|
interface AccessControlFormProps {
|
||||||
@@ -106,14 +107,6 @@ type AllowedUsersOverride = {
|
|||||||
routeId?: number;
|
routeId?: number;
|
||||||
action: PageActionType;
|
action: PageActionType;
|
||||||
}>;
|
}>;
|
||||||
// Optional trigger (e.g. an "Add" button) rendered by the host in its
|
|
||||||
// own layout slot while `Field` renders the body. Same props as Field
|
|
||||||
// so the plugin can gate visibility on action/routeId.
|
|
||||||
Action?: React.ComponentType<{
|
|
||||||
form: any;
|
|
||||||
routeId?: number;
|
|
||||||
action: PageActionType;
|
|
||||||
}>;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Extra policy entries prepended to the radio list (rendered before
|
// Extra policy entries prepended to the radio list (rendered before
|
||||||
@@ -230,7 +223,9 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleOnPolicyChange = async (policy: string) => {
|
const handleOnPolicyChange = async (e: RadioChangeEvent) => {
|
||||||
|
console.log('policy changed:', e.target.value);
|
||||||
|
const policy = e.target.value;
|
||||||
if (policy === ALLOWED_PRINCIPALS_POLICY) {
|
if (policy === ALLOWED_PRINCIPALS_POLICY) {
|
||||||
form.setFieldsValue({ users: formDataCacheRef.current?.users || [] });
|
form.setFieldsValue({ users: formDataCacheRef.current?.users || [] });
|
||||||
} else {
|
} else {
|
||||||
@@ -396,29 +391,33 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
|
|||||||
: undefined
|
: undefined
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Label>{intl.formatMessage({ id: 'models.table.accessScope' })}</Label>
|
<Label>
|
||||||
|
{intl.formatMessage({ id: 'models.table.accessScope' })}
|
||||||
|
<Tooltip
|
||||||
|
title={
|
||||||
|
<TooltipList
|
||||||
|
list={buildAccessScopeTips(
|
||||||
|
allowedUsersOverride,
|
||||||
|
prependedPolicies
|
||||||
|
)}
|
||||||
|
></TooltipList>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<QuestionCircleOutlined />
|
||||||
|
</Tooltip>
|
||||||
|
</Label>
|
||||||
|
|
||||||
<Form.Item<AccessControlFormData>
|
<Form.Item<AccessControlFormData> name="access_policy" noStyle>
|
||||||
name="access_policy"
|
<Radio.Group
|
||||||
style={{
|
|
||||||
marginBottom: 16
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CardRadioGroup
|
|
||||||
onChange={handleOnPolicyChange}
|
onChange={handleOnPolicyChange}
|
||||||
|
style={{ marginBottom: 12 }}
|
||||||
options={[
|
options={[
|
||||||
...prependedPolicies.map((p) => ({
|
...prependedPolicies.map((p) => ({
|
||||||
label: intl.formatMessage({ id: p.labelId }),
|
label: intl.formatMessage({ id: p.labelId }),
|
||||||
description: intl.formatMessage({ id: p.tipsId ?? p.labelId }),
|
|
||||||
value: p.policyValue
|
value: p.policyValue
|
||||||
})),
|
})),
|
||||||
{
|
{
|
||||||
label: intl.formatMessage({
|
label: intl.formatMessage({ id: 'models.accessSettings.authed' }),
|
||||||
id: 'models.accessSettings.authed'
|
|
||||||
}),
|
|
||||||
description: intl.formatMessage({
|
|
||||||
id: 'models.accessSettings.authed.tips'
|
|
||||||
}),
|
|
||||||
value: 'authed'
|
value: 'authed'
|
||||||
},
|
},
|
||||||
allowedUsersOverride
|
allowedUsersOverride
|
||||||
@@ -426,52 +425,23 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
|
|||||||
label: intl.formatMessage({
|
label: intl.formatMessage({
|
||||||
id: allowedUsersOverride.labelId
|
id: allowedUsersOverride.labelId
|
||||||
}),
|
}),
|
||||||
description: intl.formatMessage({
|
|
||||||
id:
|
|
||||||
allowedUsersOverride.tipsId ??
|
|
||||||
'models.accessSettings.allowedUsers.tips'
|
|
||||||
}),
|
|
||||||
value: allowedUsersOverride.policyValue
|
value: allowedUsersOverride.policyValue
|
||||||
}
|
}
|
||||||
: {
|
: {
|
||||||
label: intl.formatMessage({
|
label: intl.formatMessage({
|
||||||
id: 'models.accessSettings.allowedUsers'
|
id: 'models.accessSettings.allowedUsers'
|
||||||
}),
|
}),
|
||||||
description: intl.formatMessage({
|
|
||||||
id: 'models.accessSettings.allowedUsers.tips'
|
|
||||||
}),
|
|
||||||
value: ALLOWED_PRINCIPALS_POLICY
|
value: ALLOWED_PRINCIPALS_POLICY
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: intl.formatMessage({
|
label: intl.formatMessage({
|
||||||
id: 'models.accessSettings.public'
|
id: 'models.accessSettings.public'
|
||||||
}),
|
}),
|
||||||
description: intl.formatMessage({
|
|
||||||
id: 'models.accessSettings.public.desc'
|
|
||||||
}),
|
|
||||||
value: 'public'
|
value: 'public'
|
||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
/>
|
></Radio.Group>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
{allowedUsersOverride?.Action && accessPolicy === overridePolicyValue && (
|
|
||||||
<Flex
|
|
||||||
justify="space-between"
|
|
||||||
align="center"
|
|
||||||
style={{ marginBottom: 8 }}
|
|
||||||
>
|
|
||||||
<Label style={{ marginBottom: 0 }}>
|
|
||||||
{intl.formatMessage({
|
|
||||||
id: 'models.accessSettings.grantedPrincipals'
|
|
||||||
})}
|
|
||||||
</Label>
|
|
||||||
<allowedUsersOverride.Action
|
|
||||||
form={form}
|
|
||||||
routeId={currentData?.id}
|
|
||||||
action={action}
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
{accessPolicy === 'public' && (
|
{accessPolicy === 'public' && (
|
||||||
<div style={{ marginBlock: '16px 12px' }}>
|
<div style={{ marginBlock: '16px 12px' }}>
|
||||||
<AlertBlockInfo
|
<AlertBlockInfo
|
||||||
@@ -479,13 +449,6 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
|
|||||||
message={intl.formatMessage({
|
message={intl.formatMessage({
|
||||||
id: 'models.accessSettings.public.tips'
|
id: 'models.accessSettings.public.tips'
|
||||||
})}
|
})}
|
||||||
overlayScrollerProps={{
|
|
||||||
styles: {
|
|
||||||
wrapper: {
|
|
||||||
paddingLeft: 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
></AlertBlockInfo>
|
></AlertBlockInfo>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -130,9 +130,7 @@ const AccessControlModal: React.FC<
|
|||||||
<AlertBlockInfo
|
<AlertBlockInfo
|
||||||
type="warning"
|
type="warning"
|
||||||
style={{ marginBottom: 16 }}
|
style={{ marginBottom: 16 }}
|
||||||
contentStyle={{
|
contentStyle={{ paddingInline: 0 }}
|
||||||
paddingInline: 0
|
|
||||||
}}
|
|
||||||
message={intl.formatMessage({
|
message={intl.formatMessage({
|
||||||
id: 'models.button.accessSettings.tips'
|
id: 'models.button.accessSettings.tips'
|
||||||
})}
|
})}
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
|
import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
|
||||||
import { AutoTooltip, ExpandedRowGrid } from '@gpustack/core-ui';
|
import { AutoTooltip, RowChildren } from '@gpustack/core-ui';
|
||||||
|
import { Col, Row } from 'antd';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { ModelInstanceListItem } from '../../config/types';
|
import { ModelInstanceListItem } from '../../config/types';
|
||||||
@@ -10,17 +11,11 @@ import DistributeInfoCell from '../instance-cells/distribute-info-cell';
|
|||||||
import DownloadingStatusCell from '../instance-cells/downloading-status-cell';
|
import DownloadingStatusCell from '../instance-cells/downloading-status-cell';
|
||||||
import InstanceStatusCell from '../instance-cells/instance-status-cell';
|
import InstanceStatusCell from '../instance-cells/instance-status-cell';
|
||||||
import NameCell from '../instance-cells/name-cell';
|
import NameCell from '../instance-cells/name-cell';
|
||||||
|
|
||||||
interface InstanceItemProps {
|
interface InstanceItemProps {
|
||||||
instanceData: ModelInstanceListItem;
|
instanceData: ModelInstanceListItem;
|
||||||
workerList: WorkerListItem[];
|
workerList: WorkerListItem[];
|
||||||
modelData?: any;
|
modelData?: any;
|
||||||
defaultOpenId: string;
|
defaultOpenId: string;
|
||||||
// Column grid shared from the parent SealTable so this child row aligns
|
|
||||||
// its cells to the parent columns instead of guessing paddings.
|
|
||||||
gridTemplate?: string;
|
|
||||||
prefixWidth?: number;
|
|
||||||
columns?: any[];
|
|
||||||
handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
|
handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -29,67 +24,79 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
|
|||||||
workerList,
|
workerList,
|
||||||
modelData,
|
modelData,
|
||||||
defaultOpenId,
|
defaultOpenId,
|
||||||
gridTemplate,
|
|
||||||
prefixWidth = 0,
|
|
||||||
columns,
|
|
||||||
handleChildSelect
|
handleChildSelect
|
||||||
}) => {
|
}) => {
|
||||||
// The child row shares the parent's column grid; cells flow left-to-right and
|
|
||||||
// only declare a span, so there is no dependency on parent column keys.
|
|
||||||
// Parent layout: name (1) | middle plugin/source region | replicas,
|
|
||||||
// created_at, operation (last 3). The middle absorbs whatever columns sit
|
|
||||||
// between name and replicas (cluster_id, source, any plugin column).
|
|
||||||
const columnCount = columns?.length ?? 0;
|
|
||||||
const middleSpan = Math.max(columnCount - 4, 1);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ExpandedRowGrid
|
<div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
|
||||||
gridTemplate={gridTemplate}
|
<RowChildren>
|
||||||
prefixWidth={prefixWidth}
|
<Row
|
||||||
style={{ color: 'var(--ant-color-text-secondary)' }}
|
style={{ width: '100%', color: 'var(--ant-color-text-secondary)' }}
|
||||||
>
|
align="middle"
|
||||||
<ExpandedRowGrid.Cell span={1}>
|
>
|
||||||
<NameCell
|
<Col
|
||||||
record={instanceData}
|
span={6}
|
||||||
modelData={modelData}
|
style={{
|
||||||
defaultOpenId={defaultOpenId}
|
paddingInline: 'var(--ant-table-cell-padding-inline)'
|
||||||
></NameCell>
|
}}
|
||||||
</ExpandedRowGrid.Cell>
|
>
|
||||||
<ExpandedRowGrid.Cell
|
<NameCell
|
||||||
span={middleSpan}
|
record={instanceData}
|
||||||
style={{ flexWrap: 'wrap', gap: 8 }}
|
modelData={modelData}
|
||||||
>
|
defaultOpenId={defaultOpenId}
|
||||||
<CPUOffloadingCell record={instanceData}></CPUOffloadingCell>
|
></NameCell>
|
||||||
<DistributeInfoCell
|
</Col>
|
||||||
record={instanceData}
|
<Col span={7}>
|
||||||
workerList={workerList}
|
<span
|
||||||
></DistributeInfoCell>
|
style={{
|
||||||
</ExpandedRowGrid.Cell>
|
paddingLeft: '58px',
|
||||||
<ExpandedRowGrid.Cell span={1} style={{ gap: 4 }}>
|
flexWrap: 'wrap',
|
||||||
<InstanceStatusCell
|
gap: '8px'
|
||||||
record={instanceData}
|
}}
|
||||||
onSelect={handleChildSelect}
|
className="flex align-center"
|
||||||
/>
|
>
|
||||||
<DownloadingStatusCell
|
<CPUOffloadingCell record={instanceData}></CPUOffloadingCell>
|
||||||
backend={modelData?.backend}
|
<DistributeInfoCell
|
||||||
distributed_servers={instanceData.distributed_servers}
|
record={instanceData}
|
||||||
workerList={workerList}
|
workerList={workerList}
|
||||||
record={instanceData}
|
></DistributeInfoCell>
|
||||||
></DownloadingStatusCell>
|
</span>
|
||||||
</ExpandedRowGrid.Cell>
|
</Col>
|
||||||
<ExpandedRowGrid.Cell span={1}>
|
<Col span={4}>
|
||||||
<AutoTooltip ghost>
|
<span
|
||||||
{dayjs(instanceData.created_at).format('YYYY-MM-DD HH:mm:ss')}
|
style={{ paddingLeft: '40px', gap: 4 }}
|
||||||
</AutoTooltip>
|
className="flex-center"
|
||||||
</ExpandedRowGrid.Cell>
|
>
|
||||||
<ExpandedRowGrid.Cell span={1}>
|
<InstanceStatusCell
|
||||||
<ActionsCell
|
record={instanceData}
|
||||||
record={instanceData}
|
onSelect={handleChildSelect}
|
||||||
modelData={modelData}
|
/>
|
||||||
onSelect={handleChildSelect}
|
<DownloadingStatusCell
|
||||||
></ActionsCell>
|
backend={modelData?.backend}
|
||||||
</ExpandedRowGrid.Cell>
|
distributed_servers={instanceData.distributed_servers}
|
||||||
</ExpandedRowGrid>
|
workerList={workerList}
|
||||||
|
record={instanceData}
|
||||||
|
></DownloadingStatusCell>
|
||||||
|
</span>
|
||||||
|
</Col>
|
||||||
|
<Col span={4}>
|
||||||
|
<span style={{ paddingLeft: 43 }} className="flex">
|
||||||
|
<AutoTooltip ghost>
|
||||||
|
{dayjs(instanceData.created_at).format('YYYY-MM-DD HH:mm:ss')}
|
||||||
|
</AutoTooltip>
|
||||||
|
</span>
|
||||||
|
</Col>
|
||||||
|
<Col span={3}>
|
||||||
|
<div style={{ paddingLeft: 36 }}>
|
||||||
|
<ActionsCell
|
||||||
|
record={instanceData}
|
||||||
|
modelData={modelData}
|
||||||
|
onSelect={handleChildSelect}
|
||||||
|
></ActionsCell>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</RowChildren>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
export default InstanceItem;
|
export default InstanceItem;
|
||||||
|
|||||||
@@ -17,9 +17,6 @@ interface InstanceItemProps {
|
|||||||
workerList: WorkerListItem[];
|
workerList: WorkerListItem[];
|
||||||
modelData?: any;
|
modelData?: any;
|
||||||
currentExpanded?: string;
|
currentExpanded?: string;
|
||||||
gridTemplate?: string;
|
|
||||||
prefixWidth?: number;
|
|
||||||
columns?: any[];
|
|
||||||
handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
|
handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -28,9 +25,6 @@ const Instances: React.FC<InstanceItemProps> = ({
|
|||||||
workerList,
|
workerList,
|
||||||
modelData,
|
modelData,
|
||||||
currentExpanded,
|
currentExpanded,
|
||||||
gridTemplate,
|
|
||||||
prefixWidth,
|
|
||||||
columns,
|
|
||||||
handleChildSelect
|
handleChildSelect
|
||||||
}) => {
|
}) => {
|
||||||
const [firstLoad, setFirstLoad] = React.useState(true);
|
const [firstLoad, setFirstLoad] = React.useState(true);
|
||||||
@@ -61,9 +55,6 @@ const Instances: React.FC<InstanceItemProps> = ({
|
|||||||
instanceData={item}
|
instanceData={item}
|
||||||
defaultOpenId={firstLoad ? defaultOpenId : ''}
|
defaultOpenId={firstLoad ? defaultOpenId : ''}
|
||||||
handleChildSelect={handleChildSelect}
|
handleChildSelect={handleChildSelect}
|
||||||
gridTemplate={gridTemplate}
|
|
||||||
prefixWidth={prefixWidth}
|
|
||||||
columns={columns}
|
|
||||||
></InstanceItem>
|
></InstanceItem>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|||||||
@@ -1,13 +1,12 @@
|
|||||||
import PluginExtraFields from '@/components/plugin-extra-fields';
|
|
||||||
import {
|
import {
|
||||||
IconFont,
|
IconFont,
|
||||||
StatusDot,
|
StatusTag,
|
||||||
TagsWrapper,
|
TagsWrapper,
|
||||||
TemplateCard,
|
TemplateCard,
|
||||||
ThemeTag
|
ThemeTag
|
||||||
} from '@gpustack/core-ui';
|
} from '@gpustack/core-ui';
|
||||||
import { useIntl, useNavigate } from '@umijs/max';
|
import { useIntl, useNavigate } from '@umijs/max';
|
||||||
import { Button, Tooltip } from 'antd';
|
import { Button } from 'antd';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import React, { useMemo } from 'react';
|
import React, { useMemo } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
@@ -21,11 +20,7 @@ import {
|
|||||||
MyModelsStatusValueMap
|
MyModelsStatusValueMap
|
||||||
} from '../config';
|
} from '../config';
|
||||||
import { categoryToPathMap } from '../config/button-actions';
|
import { categoryToPathMap } from '../config/button-actions';
|
||||||
import {
|
import { getModelLogo } from '../utils/model-logo';
|
||||||
defaultModelLogo,
|
|
||||||
getCategoryLogo,
|
|
||||||
getModelLogo
|
|
||||||
} from '../utils/model-logo';
|
|
||||||
|
|
||||||
const CardWrapper = styled.div`
|
const CardWrapper = styled.div`
|
||||||
&:hover {
|
&:hover {
|
||||||
@@ -170,11 +165,6 @@ const ModelItem: React.FC<{
|
|||||||
navigate(`/playground/chat?model=${modelName}`);
|
navigate(`/playground/chat?model=${modelName}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Logo priority: brand logo matched from the name → tinted category
|
|
||||||
// icon (from model_icons) → generic default image.
|
|
||||||
const brandLogo = getModelLogo(model.name);
|
|
||||||
const categoryLogo = brandLogo ? null : getCategoryLogo(model.categories);
|
|
||||||
|
|
||||||
// context length
|
// context length
|
||||||
const maxToken = useMemo(() => {
|
const maxToken = useMemo(() => {
|
||||||
const meta = model.meta || {};
|
const meta = model.meta || {};
|
||||||
@@ -193,23 +183,6 @@ const ModelItem: React.FC<{
|
|||||||
return _.round(max_tokens / 1024);
|
return _.round(max_tokens / 1024);
|
||||||
}, [model]);
|
}, [model]);
|
||||||
|
|
||||||
// Ready is the normal state — show just the dot (no label); other states
|
|
||||||
// (Not Ready / Stopped) keep their label so the problem is legible.
|
|
||||||
const statusNode = (
|
|
||||||
<StatusDot
|
|
||||||
statusValue={{
|
|
||||||
status: MyModelsStatusMap[model.status],
|
|
||||||
text:
|
|
||||||
model.status === MyModelsStatusValueMap.Ready ||
|
|
||||||
!MyModelsStatusLabelMap[model.status]
|
|
||||||
? ''
|
|
||||||
: intl.formatMessage({
|
|
||||||
id: MyModelsStatusLabelMap[model.status]
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CardWrapper>
|
<CardWrapper>
|
||||||
<TemplateCard
|
<TemplateCard
|
||||||
@@ -221,39 +194,19 @@ const ModelItem: React.FC<{
|
|||||||
header={
|
header={
|
||||||
<Header>
|
<Header>
|
||||||
<span className="text gap-16">
|
<span className="text gap-16">
|
||||||
{brandLogo ? (
|
<ModelLogo src={getModelLogo(model.name)} alt="" />
|
||||||
<ModelLogo src={brandLogo} alt="" />
|
<span>{model.name}</span>
|
||||||
) : categoryLogo ? (
|
|
||||||
<ModelLogo src={categoryLogo} alt="" />
|
|
||||||
) : (
|
|
||||||
<ModelLogo src={defaultModelLogo} alt="" />
|
|
||||||
)}
|
|
||||||
<span className="flex-center" style={{ gap: 8, minWidth: 0 }}>
|
|
||||||
<span>{model.name}</span>
|
|
||||||
{/* Status moved to a compact dot right after the name, freeing
|
|
||||||
the header's right side for the price summary. The dot keeps
|
|
||||||
the state message on hover (StatusDot has no built-in one). */}
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontWeight: 400,
|
|
||||||
fontSize: 'var(--font-size-small)'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{model.state_message ? (
|
|
||||||
<Tooltip title={model.state_message}>
|
|
||||||
<span style={{ display: 'inline-flex' }}>
|
|
||||||
{statusNode}
|
|
||||||
</span>
|
|
||||||
</Tooltip>
|
|
||||||
) : (
|
|
||||||
statusNode
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span className="flex-center gap-8">
|
|
||||||
<PluginExtraFields name="ModelPriceSummary" context={{ model }} />
|
|
||||||
</span>
|
</span>
|
||||||
|
<StatusTag
|
||||||
|
maxTooltipWidth={400}
|
||||||
|
statusValue={{
|
||||||
|
status: MyModelsStatusMap[model.status],
|
||||||
|
text: intl.formatMessage({
|
||||||
|
id: MyModelsStatusLabelMap[model.status] || ''
|
||||||
|
}),
|
||||||
|
message: model.state_message
|
||||||
|
}}
|
||||||
|
></StatusTag>
|
||||||
</Header>
|
</Header>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -441,9 +441,6 @@ const Models: React.FC<ModelsProps> = ({
|
|||||||
modelData={options.parent}
|
modelData={options.parent}
|
||||||
workerList={workerList}
|
workerList={workerList}
|
||||||
handleChildSelect={handleChildSelect}
|
handleChildSelect={handleChildSelect}
|
||||||
gridTemplate={options.gridTemplate}
|
|
||||||
prefixWidth={options.prefixWidth}
|
|
||||||
columns={options.columns}
|
|
||||||
></Instances>
|
></Instances>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -248,13 +248,7 @@ const Models = forwardRef((props, ref) => {
|
|||||||
chunkInstanceRequedtRef.current = setModelInstanceChunkRequest({
|
chunkInstanceRequedtRef.current = setModelInstanceChunkRequest({
|
||||||
url: `${MODEL_INSTANCE_API}`,
|
url: `${MODEL_INSTANCE_API}`,
|
||||||
params: {},
|
params: {},
|
||||||
handler: updateInstanceHandler,
|
handler: updateInstanceHandler
|
||||||
beforeReconnect() {
|
|
||||||
// treat the reconnect snapshot as the new baseline, otherwise
|
|
||||||
// instances deleted while the stream was down linger in the cache
|
|
||||||
// (their DELETE events are never re-sent)
|
|
||||||
cacheInsDataListRef.current = [];
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// ignore
|
// ignore
|
||||||
@@ -458,20 +452,6 @@ const Models = forwardRef((props, ref) => {
|
|||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// watch events can still be lost (stream hiccup, reconnect gap); a low
|
|
||||||
// frequency relist keeps the instance cache eventually consistent, so a
|
|
||||||
// missed DELETE event can't leave a stale instance behind for good
|
|
||||||
useEffect(() => {
|
|
||||||
const timer = setInterval(() => {
|
|
||||||
if (!isPageHidden.current) {
|
|
||||||
getAllModelInstances();
|
|
||||||
}
|
|
||||||
}, 60 * 1000);
|
|
||||||
return () => {
|
|
||||||
clearInterval(timer);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const setDisableExpand = useMemoizedFn((record: any) => {
|
const setDisableExpand = useMemoizedFn((record: any) => {
|
||||||
return !record?.replicas;
|
return !record?.replicas;
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -153,50 +153,26 @@ const BasicForm: React.FC<BasicFormProps> = (props) => {
|
|||||||
// Use the seed callback (not handleClusterChange) so this auto-pick refreshes
|
// Use the seed callback (not handleClusterChange) so this auto-pick refreshes
|
||||||
// options without firing an evaluate request before a model is selected.
|
// options without firing an evaluate request before a model is selected.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Options derive from clusterList: an empty source list means clusters
|
if (!clusterOptions?.length) {
|
||||||
// are still loading — leave the field alone until they arrive.
|
|
||||||
if (!clusterList?.length) {
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// Scope off the live form value, not the `useWatch` snapshot: the scope
|
|
||||||
// field's default lands in a child effect that flushes before this one,
|
|
||||||
// while the watch still reports the previous render's null — scoping off
|
|
||||||
// the watch would seed a cluster from the unscoped list here and only
|
|
||||||
// re-scope a render later.
|
|
||||||
const liveScopeOrgId = form.getFieldValue('organization_id') ?? null;
|
|
||||||
const scoped = clusterList.filter(
|
|
||||||
(item) =>
|
|
||||||
liveScopeOrgId == null || item.owner_principal_id === liveScopeOrgId
|
|
||||||
);
|
|
||||||
const current = form.getFieldValue('cluster_id');
|
const current = form.getFieldValue('cluster_id');
|
||||||
if (!scoped.length) {
|
const stillValid = clusterOptions.some((c) => c.value === current);
|
||||||
// Clusters are loaded but the picked org owns none. Any leftover
|
|
||||||
// selection points at another org's cluster (seeded before the scope
|
|
||||||
// settled) and would make requests fail with "Cluster not found" —
|
|
||||||
// clear it so the required rule surfaces instead. Create only: an
|
|
||||||
// edit's cluster is existing data, not a seed.
|
|
||||||
if (action === PageAction.CREATE && current != null) {
|
|
||||||
form.setFieldValue('cluster_id', undefined);
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const stillValid = scoped.some((c) => c.value === current);
|
|
||||||
if (current != null && stillValid) {
|
if (current != null && stillValid) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const next =
|
const next =
|
||||||
scoped.find((c) => c.is_default)?.value ??
|
clusterOptions.find((c) => c.is_default)?.value ??
|
||||||
scoped.find((c) => c.state === ClusterStatusValueMap.Ready)?.value ??
|
clusterOptions.find((c) => c.state === ClusterStatusValueMap.Ready)
|
||||||
scoped[0]?.value ??
|
?.value ??
|
||||||
|
clusterOptions[0]?.value ??
|
||||||
null;
|
null;
|
||||||
if (next == null || next === current) {
|
if (next == null || next === current) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
form.setFieldValue('cluster_id', next);
|
form.setFieldValue('cluster_id', next);
|
||||||
onClusterSeed?.(next);
|
onClusterSeed?.(next);
|
||||||
// `clusterOptions` is the re-run trigger for scope changes: it recomputes
|
}, [clusterOptions, form, onClusterSeed]);
|
||||||
// whenever the watched org scope or the cluster list settles.
|
|
||||||
}, [clusterOptions, clusterList, action, form, onClusterSeed]);
|
|
||||||
|
|
||||||
const clusterOptionRender = (option: any) => {
|
const clusterOptionRender = (option: any) => {
|
||||||
const { data } = option;
|
const { data } = option;
|
||||||
|
|||||||
@@ -268,7 +268,7 @@ const useModelsColumns = ({
|
|||||||
dataIndex: 'created_at',
|
dataIndex: 'created_at',
|
||||||
key: 'created_at',
|
key: 'created_at',
|
||||||
sorter: tableSorter(5),
|
sorter: tableSorter(5),
|
||||||
width: 180,
|
span: spans.createTime,
|
||||||
render: (text: number) => (
|
render: (text: number) => (
|
||||||
<AutoTooltip ghost>
|
<AutoTooltip ghost>
|
||||||
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
|
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
import PluginExtraFields from '@/components/plugin-extra-fields';
|
|
||||||
import useTableFetch from '@/hooks/use-table-fetch';
|
import useTableFetch from '@/hooks/use-table-fetch';
|
||||||
import { SyncOutlined } from '@ant-design/icons';
|
import { SyncOutlined } from '@ant-design/icons';
|
||||||
import {
|
import {
|
||||||
@@ -269,10 +268,6 @@ const UserModels: React.FC = () => {
|
|||||||
</Space>
|
</Space>
|
||||||
}
|
}
|
||||||
></PageTools>
|
></PageTools>
|
||||||
<PluginExtraFields
|
|
||||||
name="ModelBillingProvider"
|
|
||||||
context={{ models: dataList }}
|
|
||||||
/>
|
|
||||||
<InfiniteScrollerProvider
|
<InfiniteScrollerProvider
|
||||||
value={{
|
value={{
|
||||||
total: dataSource.totalPage,
|
total: dataSource.totalPage,
|
||||||
|
|||||||
@@ -44,7 +44,6 @@ const MODEL_ICON_RULES: [string, string][] = [
|
|||||||
// 其余厂商/系列 → 对应 logo（按子串命中）
|
// 其余厂商/系列 → 对应 logo（按子串命中）
|
||||||
['gemini', 'google'],
|
['gemini', 'google'],
|
||||||
['gpt', 'openai'],
|
['gpt', 'openai'],
|
||||||
['hy', 'hunyuan'],
|
|
||||||
['openai', 'openai'],
|
['openai', 'openai'],
|
||||||
['internvl', 'opengvlab'],
|
['internvl', 'opengvlab'],
|
||||||
['minicpm', 'openbmb'],
|
['minicpm', 'openbmb'],
|
||||||
@@ -72,40 +71,13 @@ const MODEL_ICON_RULES: [string, string][] = [
|
|||||||
['alibaba', 'alibaba']
|
['alibaba', 'alibaba']
|
||||||
];
|
];
|
||||||
|
|
||||||
// Default llm logo, used as the ultimate fallback when neither a brand
|
|
||||||
// logo nor a model-category icon can be resolved.
|
|
||||||
export const defaultModelLogo = iconMap[DEFAULT_ICON];
|
|
||||||
|
|
||||||
// 模型类别 → model_icons 下的类别图标文件名。
|
|
||||||
const CATEGORY_ICON_MAP: Record<string, string> = {
|
|
||||||
llm: 'llm',
|
|
||||||
embedding: 'embedding',
|
|
||||||
reranker: 'reranker',
|
|
||||||
image: 'image',
|
|
||||||
text_to_speech: 'tts',
|
|
||||||
speech_to_text: 'stt'
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Resolve a category icon (from model_icons) for a model's categories.
|
* Resolve a model logo from its name.
|
||||||
* Returns the first matching category icon url, or null when none match.
|
|
||||||
*/
|
|
||||||
export const getCategoryLogo = (categories?: string[]): string | null => {
|
|
||||||
const iconName = categories
|
|
||||||
?.map((category) => CATEGORY_ICON_MAP[category])
|
|
||||||
.find((name) => name && iconMap[name]);
|
|
||||||
|
|
||||||
return iconName ? iconMap[iconName] : null;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Resolve a brand logo from a model name.
|
|
||||||
* 1. Match against the keyword rules in order (first substring hit wins).
|
* 1. Match against the keyword rules in order (first substring hit wins).
|
||||||
* 2. Fall back to a direct match where the name contains an icon filename.
|
* 2. Fall back to a direct match where the name contains an icon filename.
|
||||||
* 3. Return null when nothing matches — the caller then falls back to a
|
* 3. Fall back to the default llm icon.
|
||||||
* category-based icon (see `categoryConfig`) rather than a default image.
|
|
||||||
*/
|
*/
|
||||||
export const getModelLogo = (modelName?: string): string | null => {
|
export const getModelLogo = (modelName?: string): string => {
|
||||||
const name = (modelName || '').toLowerCase();
|
const name = (modelName || '').toLowerCase();
|
||||||
|
|
||||||
const rule = MODEL_ICON_RULES.find(([keyword]) => name.includes(keyword));
|
const rule = MODEL_ICON_RULES.find(([keyword]) => name.includes(keyword));
|
||||||
@@ -118,5 +90,5 @@ export const getModelLogo = (modelName?: string): string | null => {
|
|||||||
.sort((a, b) => b.length - a.length)
|
.sort((a, b) => b.length - a.length)
|
||||||
.find((iconName) => name.includes(iconName));
|
.find((iconName) => name.includes(iconName));
|
||||||
|
|
||||||
return directHit ? iconMap[directHit] : null;
|
return iconMap[directHit || DEFAULT_ICON] || iconMap[DEFAULT_ICON];
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -177,7 +177,6 @@ const ModelItem: React.FC<ModelItemProps> = ({
|
|||||||
<span>
|
<span>
|
||||||
<AutoComplete
|
<AutoComplete
|
||||||
loading={loading}
|
loading={loading}
|
||||||
allowClear
|
|
||||||
showSearch={{
|
showSearch={{
|
||||||
filterOption: (inputValue, option: any) => {
|
filterOption: (inputValue, option: any) => {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -2,19 +2,24 @@ import ProviderLogo from '@/pages/maas-provider/components/provider-logo';
|
|||||||
import { DeleteOutlined } from '@ant-design/icons';
|
import { DeleteOutlined } from '@ant-design/icons';
|
||||||
import {
|
import {
|
||||||
AutoTooltip,
|
AutoTooltip,
|
||||||
ChildGridOptions,
|
|
||||||
DropdownButtons,
|
DropdownButtons,
|
||||||
ExpandedRowGrid,
|
RowChildren,
|
||||||
StatusTag
|
StatusTag
|
||||||
} from '@gpustack/core-ui';
|
} from '@gpustack/core-ui';
|
||||||
import { useIntl } from '@umijs/max';
|
import { useIntl } from '@umijs/max';
|
||||||
import { Tag } from 'antd';
|
import { Col, Row, Tag } from 'antd';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { TargetStatus, TargetStatusLabelMap } from '../config';
|
import { TargetStatus, TargetStatusLabelMap } from '../config';
|
||||||
import { RouteTarget } from '../config/types';
|
import { RouteTarget } from '../config/types';
|
||||||
|
|
||||||
|
const CellContent = styled.div`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
`;
|
||||||
|
|
||||||
const FilesTag = styled(Tag)`
|
const FilesTag = styled(Tag)`
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -24,33 +29,20 @@ const FilesTag = styled(Tag)`
|
|||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type SharedGrid = Pick<
|
interface ProviderModelProps {
|
||||||
ChildGridOptions,
|
|
||||||
'gridTemplate' | 'prefixWidth' | 'columns'
|
|
||||||
>;
|
|
||||||
|
|
||||||
interface ProviderModelProps extends SharedGrid {
|
|
||||||
dataList: RouteTarget[];
|
dataList: RouteTarget[];
|
||||||
onSelect: (val: any, record: any) => void;
|
onSelect: (val: any, record: any) => void;
|
||||||
sourceModels: any[];
|
sourceModels: any[];
|
||||||
modelList?: Global.BaseOption<number>[];
|
modelList?: Global.BaseOption<number>[];
|
||||||
}
|
}
|
||||||
|
|
||||||
interface TargetItemProps extends SharedGrid {
|
interface TargetItemProps {
|
||||||
onSelect: (val: any, record: any) => void;
|
onSelect: (val: any, record: any) => void;
|
||||||
data: any;
|
data: any;
|
||||||
sourceModels: any[];
|
sourceModels: any[];
|
||||||
modelList?: Global.BaseOption<number>[];
|
modelList?: Global.BaseOption<number>[];
|
||||||
}
|
}
|
||||||
|
|
||||||
// Sub-column inside the merged `targets` cell.
|
|
||||||
const subCellStyle: React.CSSProperties = {
|
|
||||||
minWidth: 0,
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
paddingInline: 'var(--ant-table-cell-padding-inline)'
|
|
||||||
};
|
|
||||||
|
|
||||||
export const childActionList = [
|
export const childActionList = [
|
||||||
{
|
{
|
||||||
key: 'delete',
|
key: 'delete',
|
||||||
@@ -66,24 +58,10 @@ const RouteItem: React.FC<TargetItemProps> = ({
|
|||||||
onSelect,
|
onSelect,
|
||||||
data,
|
data,
|
||||||
sourceModels,
|
sourceModels,
|
||||||
modelList,
|
modelList
|
||||||
gridTemplate,
|
|
||||||
prefixWidth = 0,
|
|
||||||
columns
|
|
||||||
}) => {
|
}) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
|
||||||
// The child row shares the parent's column grid. Cells flow left-to-right,
|
|
||||||
// so each cell only declares how many parent columns it spans. Parent layout
|
|
||||||
// is always: name (1) | middle plugin region | created_at (1) | operations (1).
|
|
||||||
// Enterprise inserts plugin columns (org, quota) into the middle region.
|
|
||||||
const columnCount = columns?.length ?? 0;
|
|
||||||
const middleSpan = Math.max(columnCount - 3, 1);
|
|
||||||
// With ≥3 middle tracks (enterprise: org / targets / quota) give source,
|
|
||||||
// weight and status their own tracks; source pins to the first middle track,
|
|
||||||
// status to the last, weight absorbs whatever is between.
|
|
||||||
const splitMiddle = middleSpan >= 3;
|
|
||||||
|
|
||||||
const renderProviderSource = () => {
|
const renderProviderSource = () => {
|
||||||
const model = sourceModels.find((item: any) => {
|
const model = sourceModels.find((item: any) => {
|
||||||
if (data.model_id) {
|
if (data.model_id) {
|
||||||
@@ -105,82 +83,88 @@ const RouteItem: React.FC<TargetItemProps> = ({
|
|||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const sourceNode = renderProviderSource();
|
|
||||||
const weightNode =
|
|
||||||
data.fallback_status_codes && data.fallback_status_codes?.length > 0 ? (
|
|
||||||
<>
|
|
||||||
{data.weight > 0 && <span style={{ marginInline: 8 }}>/</span>}
|
|
||||||
<span>{intl.formatMessage({ id: 'routes.table.label.fallback' })}</span>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<AutoTooltip ghost>
|
|
||||||
{intl.formatMessage({ id: 'routes.form.target.weight' })}:{' '}
|
|
||||||
{data.weight || 0}
|
|
||||||
</AutoTooltip>
|
|
||||||
);
|
|
||||||
const statusNode = (
|
|
||||||
<StatusTag
|
|
||||||
statusValue={{
|
|
||||||
status: TargetStatus[data.state],
|
|
||||||
text: TargetStatusLabelMap[data.state],
|
|
||||||
message: ''
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ExpandedRowGrid
|
<div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
|
||||||
gridTemplate={gridTemplate}
|
<RowChildren>
|
||||||
prefixWidth={prefixWidth}
|
<Row
|
||||||
style={{ color: 'var(--ant-color-text-secondary)' }}
|
gutter={16}
|
||||||
>
|
style={{ width: '100%', color: 'var(--ant-color-text-secondary)' }}
|
||||||
<ExpandedRowGrid.Cell span={1} style={{ height: '100%', gap: 4 }}>
|
|
||||||
<AutoTooltip ghost>{data.name}</AutoTooltip>
|
|
||||||
{!!data.overridden_model_name && !!data.model_id && (
|
|
||||||
<FilesTag color="purple" variant="outlined">
|
|
||||||
<span style={{ opacity: 1 }}>LoRA</span>
|
|
||||||
</FilesTag>
|
|
||||||
)}
|
|
||||||
</ExpandedRowGrid.Cell>
|
|
||||||
{splitMiddle ? (
|
|
||||||
// Enterprise: org / targets / quota → one track each.
|
|
||||||
<>
|
|
||||||
<ExpandedRowGrid.Cell span={1}>{sourceNode}</ExpandedRowGrid.Cell>
|
|
||||||
<ExpandedRowGrid.Cell span={middleSpan - 2}>
|
|
||||||
{weightNode}
|
|
||||||
</ExpandedRowGrid.Cell>
|
|
||||||
<ExpandedRowGrid.Cell span={1}>{statusNode}</ExpandedRowGrid.Cell>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
// Only `targets` exists: share the one track via a 5:2:3 sub-grid.
|
|
||||||
// A raw grid div (not <Cell>) because it needs `display: grid`.
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
gridColumn: `span ${middleSpan}`,
|
|
||||||
minWidth: 0,
|
|
||||||
display: 'grid',
|
|
||||||
gridTemplateColumns: 'minmax(0, 5fr) minmax(0, 2fr) minmax(0, 3fr)',
|
|
||||||
alignItems: 'center'
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<div style={subCellStyle}>{sourceNode}</div>
|
<Col span={5}>
|
||||||
<div style={subCellStyle}>{weightNode}</div>
|
<CellContent
|
||||||
<div style={subCellStyle}>{statusNode}</div>
|
style={{
|
||||||
</div>
|
gap: 4,
|
||||||
)}
|
paddingInline: 'var(--ant-table-cell-padding-inline)'
|
||||||
<ExpandedRowGrid.Cell span={1} style={{ height: '100%' }}>
|
}}
|
||||||
<AutoTooltip ghost minWidth={20}>
|
>
|
||||||
{dayjs(data.created_at).format('YYYY-MM-DD HH:mm:ss')}
|
<AutoTooltip ghost>{data.name}</AutoTooltip>
|
||||||
</AutoTooltip>
|
{!!data.overridden_model_name && !!data.model_id && (
|
||||||
</ExpandedRowGrid.Cell>
|
<FilesTag color="purple" variant="outlined">
|
||||||
<ExpandedRowGrid.Cell span={1} style={{ height: '100%' }}>
|
<span style={{ opacity: 1 }}>LoRA</span>
|
||||||
<DropdownButtons
|
</FilesTag>
|
||||||
items={childActionList}
|
)}
|
||||||
onSelect={(val) => onSelect(val, data)}
|
</CellContent>
|
||||||
></DropdownButtons>
|
</Col>
|
||||||
</ExpandedRowGrid.Cell>
|
<Col span={5} style={{ paddingLeft: 64 }}>
|
||||||
</ExpandedRowGrid>
|
<CellContent>{renderProviderSource()}</CellContent>
|
||||||
|
</Col>
|
||||||
|
<Col span={2}>
|
||||||
|
<CellContent>
|
||||||
|
{data.fallback_status_codes &&
|
||||||
|
data.fallback_status_codes?.length > 0 ? (
|
||||||
|
<>
|
||||||
|
{data.weight > 0 && (
|
||||||
|
<span style={{ marginInline: 8 }}>/</span>
|
||||||
|
)}
|
||||||
|
<span>
|
||||||
|
{intl.formatMessage({
|
||||||
|
id: 'routes.table.label.fallback'
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<AutoTooltip ghost>
|
||||||
|
{intl.formatMessage({ id: 'routes.form.target.weight' })}:{' '}
|
||||||
|
{data.weight || 0}
|
||||||
|
</AutoTooltip>
|
||||||
|
)}
|
||||||
|
</CellContent>
|
||||||
|
</Col>
|
||||||
|
<Col span={3}>
|
||||||
|
<CellContent>
|
||||||
|
<AutoTooltip ghost>
|
||||||
|
<StatusTag
|
||||||
|
statusValue={{
|
||||||
|
status: TargetStatus[data.state],
|
||||||
|
text: TargetStatusLabelMap[data.state],
|
||||||
|
message: ''
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</AutoTooltip>
|
||||||
|
</CellContent>
|
||||||
|
</Col>
|
||||||
|
<Col span={5}>
|
||||||
|
<CellContent style={{ paddingLeft: 45 }}>
|
||||||
|
<AutoTooltip ghost minWidth={20}>
|
||||||
|
{dayjs(data.created_at).format('YYYY-MM-DD HH:mm:ss')}
|
||||||
|
</AutoTooltip>
|
||||||
|
</CellContent>
|
||||||
|
</Col>
|
||||||
|
<Col span={4}>
|
||||||
|
<CellContent
|
||||||
|
style={{
|
||||||
|
paddingLeft: 38
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DropdownButtons
|
||||||
|
items={childActionList}
|
||||||
|
onSelect={(val) => onSelect(val, data)}
|
||||||
|
></DropdownButtons>
|
||||||
|
</CellContent>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</RowChildren>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -188,10 +172,7 @@ const RouteTargets: React.FC<ProviderModelProps> = ({
|
|||||||
dataList,
|
dataList,
|
||||||
onSelect,
|
onSelect,
|
||||||
modelList,
|
modelList,
|
||||||
sourceModels,
|
sourceModels
|
||||||
gridTemplate,
|
|
||||||
prefixWidth,
|
|
||||||
columns
|
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
@@ -202,9 +183,6 @@ const RouteTargets: React.FC<ProviderModelProps> = ({
|
|||||||
onSelect={onSelect}
|
onSelect={onSelect}
|
||||||
sourceModels={sourceModels}
|
sourceModels={sourceModels}
|
||||||
modelList={modelList}
|
modelList={modelList}
|
||||||
gridTemplate={gridTemplate}
|
|
||||||
prefixWidth={prefixWidth}
|
|
||||||
columns={columns}
|
|
||||||
></RouteItem>
|
></RouteItem>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -232,7 +232,7 @@ const useAccessColumns = ({
|
|||||||
title: intl.formatMessage({ id: 'common.table.createTime' }),
|
title: intl.formatMessage({ id: 'common.table.createTime' }),
|
||||||
dataIndex: 'created_at',
|
dataIndex: 'created_at',
|
||||||
sorter: tableSorter(6),
|
sorter: tableSorter(6),
|
||||||
width: 180,
|
span: createTimeSpan,
|
||||||
render: (value: string) => (
|
render: (value: string) => (
|
||||||
<AutoTooltip ghost minWidth={20}>
|
<AutoTooltip ghost minWidth={20}>
|
||||||
{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
|
{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
|
||||||
|
|||||||
@@ -291,9 +291,6 @@ const ModelRoutes: React.FC = () => {
|
|||||||
dataList={list}
|
dataList={list}
|
||||||
onSelect={onChildSelect}
|
onSelect={onChildSelect}
|
||||||
sourceModels={sourceModels}
|
sourceModels={sourceModels}
|
||||||
gridTemplate={options.gridTemplate}
|
|
||||||
prefixWidth={options.prefixWidth}
|
|
||||||
columns={options.columns}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -300,7 +300,6 @@ const Workers: React.FC<WorkersProps> = ({ clusterId, source }) => {
|
|||||||
></FilterBar>
|
></FilterBar>
|
||||||
<ConfigProvider renderEmpty={renderEmpty}>
|
<ConfigProvider renderEmpty={renderEmpty}>
|
||||||
<Table
|
<Table
|
||||||
tableLayout="auto"
|
|
||||||
columns={columns}
|
columns={columns}
|
||||||
sortDirections={TABLE_SORT_DIRECTIONS}
|
sortDirections={TABLE_SORT_DIRECTIONS}
|
||||||
showSorterTooltip={false}
|
showSorterTooltip={false}
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ import { Tooltip } from 'antd';
|
|||||||
import { ColumnsType } from 'antd/lib/table';
|
import { ColumnsType } from 'antd/lib/table';
|
||||||
import { useAtom, useAtomValue } from 'jotai';
|
import { useAtom, useAtomValue } from 'jotai';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import { useEffect, useMemo, useState } from 'react';
|
import { useMemo } from 'react';
|
||||||
import semverCoerce from 'semver/functions/coerce';
|
import semverCoerce from 'semver/functions/coerce';
|
||||||
import semverGt from 'semver/functions/gt';
|
import semverGt from 'semver/functions/gt';
|
||||||
import { status, WorkerStatusMap, WorkerStatusMapValue } from '../config';
|
import { status, WorkerStatusMap, WorkerStatusMapValue } from '../config';
|
||||||
@@ -143,57 +143,15 @@ const GPUCell = ({ devices }: { devices: GPUDeviceItem[] }) => (
|
|||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
|
||||||
// index + ProgressBar
|
|
||||||
const VRAMItem = ({
|
|
||||||
item,
|
|
||||||
autoOpen
|
|
||||||
}: {
|
|
||||||
item: GPUDeviceItem;
|
|
||||||
autoOpen: boolean;
|
|
||||||
}) => {
|
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setOpen(autoOpen);
|
|
||||||
}, [autoOpen]);
|
|
||||||
|
|
||||||
const percent = item.memory?.used
|
|
||||||
? _.round(item.memory?.utilization_rate, 0)
|
|
||||||
: _.round((item.memory?.allocated / item.memory?.total) * 100, 0);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Tooltip
|
|
||||||
title={<InfoColumn fieldList={fieldList} data={item.memory} />}
|
|
||||||
open={open}
|
|
||||||
onOpenChange={setOpen}
|
|
||||||
>
|
|
||||||
<span className="flex-center" style={{ cursor: 'pointer' }}>
|
|
||||||
<span
|
|
||||||
className="m-r-5"
|
|
||||||
style={{ display: 'flex', width: 25, lineHeight: 1.2 }}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
paddingBottom: 2,
|
|
||||||
borderBottom: '1px dashed var(--ant-blue-6)'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
[{item.index}]
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<ProgressBar percent={percent} />
|
|
||||||
</span>
|
|
||||||
</Tooltip>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const VRAMCell = ({
|
const VRAMCell = ({
|
||||||
devices,
|
devices,
|
||||||
|
intl,
|
||||||
rIndex,
|
rIndex,
|
||||||
loadend,
|
loadend,
|
||||||
firstLoad
|
firstLoad
|
||||||
}: {
|
}: {
|
||||||
devices: GPUDeviceItem[];
|
devices: GPUDeviceItem[];
|
||||||
|
intl: any;
|
||||||
rIndex: number;
|
rIndex: number;
|
||||||
loadend: boolean;
|
loadend: boolean;
|
||||||
firstLoad: boolean;
|
firstLoad: boolean;
|
||||||
@@ -202,11 +160,36 @@ const VRAMCell = ({
|
|||||||
{_.map(
|
{_.map(
|
||||||
_.sortBy(devices || [], ['index']),
|
_.sortBy(devices || [], ['index']),
|
||||||
(item: GPUDeviceItem, index: number) => (
|
(item: GPUDeviceItem, index: number) => (
|
||||||
<VRAMItem
|
<span key={index} className="flex-center">
|
||||||
key={index}
|
<span
|
||||||
item={item}
|
className="m-r-5"
|
||||||
autoOpen={rIndex === 0 && index === 0 && loadend && firstLoad}
|
style={{ display: 'flex', width: 25, lineHeight: 1 }}
|
||||||
/>
|
>
|
||||||
|
[{item.index}]
|
||||||
|
</span>
|
||||||
|
<ProgressBar
|
||||||
|
defaultOpen={rIndex === 0 && index === 0 && loadend && firstLoad}
|
||||||
|
percent={
|
||||||
|
item.memory?.used
|
||||||
|
? _.round(item.memory?.utilization_rate, 0)
|
||||||
|
: _.round(
|
||||||
|
(item.memory?.allocated / item.memory?.total) * 100,
|
||||||
|
0
|
||||||
|
)
|
||||||
|
}
|
||||||
|
label={<InfoColumn fieldList={fieldList} data={item.memory} />}
|
||||||
|
/>
|
||||||
|
{item.memory.is_unified_memory && (
|
||||||
|
<Tooltip
|
||||||
|
title={intl.formatMessage({ id: 'resources.table.unified' })}
|
||||||
|
>
|
||||||
|
<InfoCircleOutlined
|
||||||
|
className="m-l-5"
|
||||||
|
style={{ color: 'var(--ant-blue-5)' }}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
)
|
)
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
@@ -515,7 +498,6 @@ const useWorkerColumns = ({
|
|||||||
{
|
{
|
||||||
title: 'GPU',
|
title: 'GPU',
|
||||||
dataIndex: 'gpu',
|
dataIndex: 'gpu',
|
||||||
minWidth: 100,
|
|
||||||
render: (_, record) =>
|
render: (_, record) =>
|
||||||
statusAvailable(record) ? (
|
statusAvailable(record) ? (
|
||||||
<GPUCell devices={record?.status?.gpu_devices} />
|
<GPUCell devices={record?.status?.gpu_devices} />
|
||||||
@@ -526,11 +508,11 @@ const useWorkerColumns = ({
|
|||||||
{
|
{
|
||||||
title: intl.formatMessage({ id: 'resources.table.vram' }),
|
title: intl.formatMessage({ id: 'resources.table.vram' }),
|
||||||
dataIndex: 'vram',
|
dataIndex: 'vram',
|
||||||
minWidth: 100,
|
|
||||||
render: (_, record, rIndex) =>
|
render: (_, record, rIndex) =>
|
||||||
statusAvailable(record) ? (
|
statusAvailable(record) ? (
|
||||||
<VRAMCell
|
<VRAMCell
|
||||||
devices={record?.status?.gpu_devices}
|
devices={record?.status?.gpu_devices}
|
||||||
|
intl={intl}
|
||||||
rIndex={rIndex}
|
rIndex={rIndex}
|
||||||
loadend={loadend}
|
loadend={loadend}
|
||||||
firstLoad={firstLoad}
|
firstLoad={firstLoad}
|
||||||
@@ -542,7 +524,6 @@ const useWorkerColumns = ({
|
|||||||
{
|
{
|
||||||
title: intl.formatMessage({ id: 'resources.table.disk' }),
|
title: intl.formatMessage({ id: 'resources.table.disk' }),
|
||||||
dataIndex: 'storage',
|
dataIndex: 'storage',
|
||||||
minWidth: 100,
|
|
||||||
render: (_, record) => (
|
render: (_, record) => (
|
||||||
<span className="flex-center flex-full">
|
<span className="flex-center flex-full">
|
||||||
{statusAvailable(record) ? (
|
{statusAvailable(record) ? (
|
||||||
|
|||||||
@@ -8,11 +8,10 @@
|
|||||||
* tab (date range + "filter by user" for managers); the resource-type /
|
* tab (date range + "filter by user" for managers); the resource-type /
|
||||||
* event-type selects ride in the bar's ``extra`` slot.
|
* event-type selects ride in the bar's ``extra`` slot.
|
||||||
*/
|
*/
|
||||||
import { type StatusType } from '@/config/types';
|
import { SimpleSelect } from '@gpustack/core-ui';
|
||||||
import { SimpleSelect, StatusDot } from '@gpustack/core-ui';
|
|
||||||
import { useAccess, useIntl } from '@umijs/max';
|
import { useAccess, useIntl } from '@umijs/max';
|
||||||
import { useMemoizedFn } from 'ahooks';
|
import { useMemoizedFn } from 'ahooks';
|
||||||
import { Input, Select, Table } from 'antd';
|
import { Input, Select, Table, Tag } from 'antd';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||||
@@ -24,11 +23,11 @@ import useQueryResourceEvents from './services/use-query-resource-events';
|
|||||||
// Only these four are ever emitted (see resource_event_logger): create/delete
|
// Only these four are ever emitted (see resource_event_logger): create/delete
|
||||||
// + the metering-window pair. updated/attached/detached exist as enum values
|
// + the metering-window pair. updated/attached/detached exist as enum values
|
||||||
// but are intentionally not recorded, so they're not offered as filters.
|
// but are intentionally not recorded, so they're not offered as filters.
|
||||||
const EVENT_STATUS: Record<string, StatusType> = {
|
const EVENT_COLOR: Record<string, string> = {
|
||||||
created: 'success',
|
created: 'green',
|
||||||
deleted: 'error',
|
deleted: 'red',
|
||||||
phase_to_metered: 'transitioning',
|
phase_to_metered: 'blue',
|
||||||
phase_left_metered: 'warning'
|
phase_left_metered: 'orange'
|
||||||
};
|
};
|
||||||
|
|
||||||
// Humanize a failure phase enum for display, e.g. "SSHPublicKeyCreateFailed" →
|
// Humanize a failure phase enum for display, e.g. "SSHPublicKeyCreateFailed" →
|
||||||
@@ -187,12 +186,7 @@ const ResourceEvents: React.FC = () => {
|
|||||||
dataIndex: 'event_type',
|
dataIndex: 'event_type',
|
||||||
key: 'event_type',
|
key: 'event_type',
|
||||||
render: (v: string) => (
|
render: (v: string) => (
|
||||||
<StatusDot
|
<Tag color={EVENT_COLOR[v] ?? 'default'}>{EVENT_LABEL[v] ?? v}</Tag>
|
||||||
statusValue={{
|
|
||||||
status: EVENT_STATUS[v] ?? 'inactive',
|
|
||||||
text: EVENT_LABEL[v] ?? v
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
),
|
),
|
||||||
width: 180
|
width: 180
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user