root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: version info modal

Browse Source
This commit is contained in:
jialin
2024-07-12 12:06:17 +08:00
parent c5327d3e56
commit 320db56fbe
38 changed files with 334 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/api-keys/apis/index.ts
+1 -3
View File
@@ -3,9 +3,7 @@ import { FormData, ListItem } from '../config/types';
export const APIS_KEYS_API = '/api-keys';
export async function queryApisKeysList(
params: Global.Pagination & { query?: string }
) {
export async function queryApisKeysList(params: Global.SearchParams) {
return request<Global.PageResponse<ListItem>>(`${APIS_KEYS_API}`, {
method: 'GET',
params
src/pages/api-keys/index.tsx
+2 -2
View File
@@ -42,7 +42,7 @@ const Models: React.FC = () => {
const [queryParams, setQueryParams] = useState({
page: 1,
perPage: 10,
query: ''
search: ''
});
const handleShowSizeChange = (page: number, size: number) => {
@@ -90,7 +90,7 @@ const Models: React.FC = () => {
const handleNameChange = (e: any) => {
setQueryParams({
...queryParams,
query: e.target.value
search: e.target.value
});
};
src/pages/llmodels/apis/index.ts
+1 -1
View File
@@ -13,7 +13,7 @@ export const MODEL_INSTANCE_API = '/model-instances';
// ===================== Models =====================
export async function queryModelsList(
params: Global.Pagination & { query?: string },
params: Global.SearchParams,
options?: any
) {
return request<Global.PageResponse<ListItem>>(`${MODELS_API}`, {
src/pages/llmodels/components/instance-item.tsx
+31 -18
View File
@@ -1,9 +1,13 @@
import DropdownButtons from '@/components/drop-down-buttons';
import RowChildren from '@/components/seal-table/components/row-children';
import StatusTag from '@/components/status-tag';
import { DeleteOutlined, FieldTimeOutlined } from '@ant-design/icons';
import {
DeleteOutlined,
FieldTimeOutlined,
InfoCircleOutlined
} from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Col, Row, Space } from 'antd';
import { Col, Row, Space, Tooltip } from 'antd';
import dayjs from 'dayjs';
import _ from 'lodash';
import React from 'react';
@@ -59,35 +63,44 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
});
};
const getWorkerIp = (item: ModelInstanceListItem) => {
const renderWorkerInfo = (item: ModelInstanceListItem) => {
let workerIp = '-';
if (item.worker_ip) {
return item.port ? `${item.worker_ip}:${item.port}` : item.worker_ip;
workerIp = item.port ? `${item.worker_ip}:${item.port}` : item.worker_ip;
}
return '-';
return (
<div>
<div>{item.worker_name}</div>
<div>{workerIp}</div>
</div>
);
};
return (
<Space size={16} direction="vertical" style={{ width: '100%' }}>
{_.map(list, (item: ModelInstanceListItem, index: number) => {
return (
<div
className="_2Q2Yw"
key={`${item.id}`}
style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}
>
<RowChildren key={`${item.id}_row`}>
<Row style={{ width: '100%' }} align="middle">
<Col span={4}>{item.name}</Col>
<Col span={3}>{item.worker_name || '-'}</Col>
<Col span={4}>
<span>
{item.source === 'huggingface'
? item.huggingface_filename
: item.ollama_library_model_name}
</span>
<Col
span={5}
style={{
paddingInline: 'var(--ant-table-cell-padding-inline)'
}}
>
<Tooltip title={renderWorkerInfo(item)}>
<span className="m-r-5">{item.name}</span>
<InfoCircleOutlined />
</Tooltip>
</Col>
<Col span={3}>
<Col span={6}></Col>
<Col span={4}>
<span
style={{ paddingLeft: '0px' }}
style={{ paddingLeft: '56px' }}
className="flex justify-center"
>
{item.state && (
@@ -107,11 +120,11 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
</span>
</Col>
<Col span={5}>
<span style={{ paddingLeft: 36 }}>
<span style={{ paddingLeft: 38 }}>
{dayjs(item.updated_at).format('YYYY-MM-DD HH:mm:ss')}
</span>
</Col>
<Col span={5}>
<Col span={4}>
<div style={{ paddingLeft: 39 }}>
<DropdownButtons
items={setChildActionList(item)}
src/pages/llmodels/components/table-list.tsx
+11 -5
View File
@@ -337,15 +337,21 @@ const Models: React.FC<ModelsProps> = ({
dataIndex="name"
key="name"
width={400}
span={6}
span={5}
/>
<SealColumn
title={intl.formatMessage({ id: 'models.form.source' })}
dataIndex="source"
key="source"
span={4}
render={(text) => {
return modelSourceMap[text] || '-';
span={6}
render={(text, record: ListItem) => {
return (
<span>
{record.source === modelSourceMap.huggingface_value
? `${modelSourceMap.huggingface} / ${record.huggingface_filename}`
: `${modelSourceMap.ollama_library} / ${record.ollama_library_model_name}`}
</span>
);
}}
/>
<SealColumn
@@ -369,7 +375,7 @@ const Models: React.FC<ModelsProps> = ({
}}
/>
<SealColumn
span={5}
span={4}
title={intl.formatMessage({ id: 'common.table.operation' })}
key="operation"
render={(text, record) => {
src/pages/llmodels/config/index.ts
+4 -1
View File
@@ -15,7 +15,10 @@ export const ollamaModelOptions = [
export const modelSourceMap: Record<string, string> = {
huggingface: 'Hugging Face',
ollama_library: 'Ollama Library',
s3: 'S3'
s3: 'S3',
huggingface_value: 'huggingface',
ollama_library_value: 'ollama_library',
s3_value: 's3'
};
export const InstanceStatusMap = {
src/pages/llmodels/config/types.ts
+2
View File
@@ -2,6 +2,8 @@ export interface ListItem {
source: string;
huggingface_repo_id: string;
huggingface_file_name: string;
huggingface_filename: string;
ollama_library_model_name: string;
s3Address: string;
name: string;
description: string;
src/pages/llmodels/index.tsx
+2 -2
View File
@@ -24,7 +24,7 @@ const Models: React.FC = () => {
const [queryParams, setQueryParams] = useState({
page: 1,
perPage: 10,
query: ''
search: ''
});
// request data
@@ -110,7 +110,7 @@ const Models: React.FC = () => {
(e: any) => {
setQueryParams({
...queryParams,
query: e.target.value
search: e.target.value
});
},
[queryParams]
src/pages/playground/components/message-item.tsx
+7 -4
View File
@@ -122,13 +122,16 @@ const MessageItem: React.FC<{
<div className="delete-btn">
<Space size={5}>
{message.content && (
<CopyButton text={message.content} size="small"></CopyButton>
<CopyButton
text={message.content}
size="small"
shape="default"
type="default"
fontSize="12px"
></CopyButton>
)}
<Button
type="text"
shape="circle"
size="small"
style={{ color: 'var(--ant-color-primary)' }}
onClick={handleDelete}
icon={<MinusCircleOutlined />}
></Button>
src/pages/playground/components/view-code-modal.tsx
+2 -2
View File
@@ -66,7 +66,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
const systemList = systemMessage
? [{ role: 'system', content: systemMessage }]
: [];
const code = `import OpenAI from "openai";\nconst openai = new OpenAI({\n"base_url": "/v1-openai", \n "gpustack_api_key": "$\{GPUSTACK_API_KEY}"\n });\n\nasync function main(){\nconst params = ${JSON.stringify(
const code = `import OpenAI from "openai";\nconst openai = new OpenAI();\n\nasync function main(){\nconst params = ${JSON.stringify(
{
...parameters,
messages: [...systemList, ...messageList]
@@ -92,7 +92,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
const systemList = systemMessage
? [{ role: 'system', content: systemMessage }]
: [];
const code = `from openai import OpenAI\nclient = OpenAI({\n "base_url": "/v1-openai", \n "gpustack_api_key": "$\{GPUSTACK_API_KEY}"\n })\n\ncompletion = client.chat.completions.create(\n${formattedParams} messages=${JSON.stringify([...systemList, ...messageList], null, 2)})\nprint(completion.choices[0].message)`;
const code = `from openai import OpenAI\nclient = OpenAI()\n\ncompletion = client.chat.completions.create(\n${formattedParams} messages=${JSON.stringify([...systemList, ...messageList], null, 2)})\nprint(completion.choices[0].message)`;
setCodeValue(code);
}
formatCode();
src/pages/resources/apis/index.ts
+2 -6
View File
@@ -4,18 +4,14 @@ import { GPUDeviceItem, ListItem } from '../config/types';
export const WORKERS_API = '/workers';
export const GPU_DEVICES_API = '/gpu-devices';
export async function queryWorkersList(
params: Global.Pagination & { query?: string }
) {
export async function queryWorkersList(params: Global.SearchParams) {
return request<Global.PageResponse<ListItem>>(`${WORKERS_API}`, {
methos: 'GET',
params
});
}
export async function queryGpuDevicesList(
params: Global.Pagination & { query?: string }
) {
export async function queryGpuDevicesList(params: Global.SearchParams) {
return request<Global.PageResponse<GPUDeviceItem>>(`${GPU_DEVICES_API}`, {
methos: 'GET',
params
src/pages/resources/components/gpus.tsx
+2 -2
View File
@@ -22,7 +22,7 @@ const GPUList: React.FC = () => {
const [queryParams, setQueryParams] = useState({
page: 1,
perPage: 10,
query: ''
search: ''
});
const handleShowSizeChange = (current: number, size: number) => {
setQueryParams({
@@ -67,7 +67,7 @@ const GPUList: React.FC = () => {
const handleNameChange = (e: any) => {
setQueryParams({
...queryParams,
query: e.target.value
search: e.target.value
});
};
src/pages/resources/components/workers.tsx
+2 -2
View File
@@ -27,7 +27,7 @@ const Resources: React.FC = () => {
const [queryParams, setQueryParams] = useState({
page: 1,
perPage: 10,
query: ''
search: ''
});
const fetchData = async () => {
@@ -73,7 +73,7 @@ const Resources: React.FC = () => {
const handleNameChange = (e: any) => {
setQueryParams({
...queryParams,
query: e.target.value
search: e.target.value
});
};
src/pages/users/apis/index.ts
+1 -3
View File
@@ -3,9 +3,7 @@ import { FormData, ListItem } from '../config/types';
export const USERS_API = '/users';
export async function queryUsersList(
params: Global.Pagination & { query?: string }
) {
export async function queryUsersList(params: Global.SearchParams) {
return request<Global.PageResponse<ListItem>>(`${USERS_API}`, {
methos: 'GET',
params
src/pages/users/index.tsx
+2 -2
View File
@@ -43,7 +43,7 @@ const Users: React.FC = () => {
const [queryParams, setQueryParams] = useState({
page: 1,
perPage: 10,
query: ''
search: ''
});
const ActionList = [
@@ -104,7 +104,7 @@ const Users: React.FC = () => {
const handleNameChange = (e: any) => {
setQueryParams({
...queryParams,
query: e.target.value
search: e.target.value
});
};