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

style: ui for no data in table list

Browse Source
This commit is contained in:
jialin
2025-10-16 11:11:39 +08:00
parent ca9ceda2f7
commit e2da7c5f96
29 changed files with 546 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/apis/index.ts
+2 -8
View File
@@ -5,6 +5,7 @@ import { request } from '@umijs/max';
import qs from 'query-string';
import {
AccessControlFormData,
BackendItem,
CatalogItem,
CatalogSpec,
EvaluateResult,
@@ -405,14 +406,7 @@ export async function evaluationsModelSpec(
export async function queryBackendList(params?: { cluster_id: number }) {
return request<{
items: {
backend_name: string;
backend_show_name: string;
from_config: boolean;
default_version: string;
default_backend_param: string[];
versions: string[];
}[];
items: BackendItem[];
}>(BACKEND_LIST_API, {
method: 'GET',
params
src/pages/llmodels/catalog.tsx
+14
View File
@@ -1,4 +1,5 @@
import { modelsExpandKeysAtom } from '@/atoms/models';
import IconFont from '@/components/icon-font';
import PageTools from '@/components/page-tools';
import BaseSelect from '@/components/seal-form/base/select';
import { PageAction } from '@/config';
@@ -14,6 +15,7 @@ import { useAtom } from 'jotai';
import _ from 'lodash';
import React, { useCallback, useEffect, useState } from 'react';
import styled from 'styled-components';
import NoResult from '../_components/no-result';
import { createModel, queryCatalogList } from './apis';
import CatalogList from './components/catalog-list';
import DelopyBuiltInModal from './components/deploy-builtin-modal';
@@ -297,6 +299,18 @@ const Catalog: React.FC = () => {
activeId={-1}
isFirst={isFirst}
></CatalogList>
<NoResult
loading={dataSource.loading}
loadend={!isFirst}
dataSource={dataSource.dataList}
image={<IconFont type="icon-layers" />}
filters={queryParams}
noFoundText={intl.formatMessage({
id: 'noresult.catalog.nofound'
})}
title={intl.formatMessage({ id: 'noresult.catalog.title' })}
subTitle={intl.formatMessage({ id: 'noresult.catalog.subTitle' })}
></NoResult>
</ScrollerContext.Provider>
<PageWrapper>
<Pagination
src/pages/llmodels/components/catalog-list.tsx
+2
View File
@@ -2,6 +2,7 @@ import CatalogSkelton from '@/components/templates/card-skelton';
import breakpoints from '@/config/breakpoints';
import InfiniteScroller from '@/pages/_components/infinite-scroller';
import { useScrollerContext } from '@/pages/_components/infinite-scroller/use-scroller-context';
import { useIntl } from '@umijs/max';
import { Col, FloatButton, Row, Spin } from 'antd';
import _ from 'lodash';
import ResizeObserver from 'rc-resize-observer';
@@ -55,6 +56,7 @@ const ListSkeleton: React.FC<{
};
const CatalogList: React.FC<CatalogListProps> = (props) => {
const intl = useIntl();
const { dataList, loading, activeId, isFirst, onDeploy } = props;
const {
total,
src/pages/llmodels/components/table-list.tsx
+26
View File
@@ -2,6 +2,7 @@ import { modelsExpandKeysAtom } from '@/atoms/models';
import DeleteModal from '@/components/delete-modal';
import DropDownActions from '@/components/drop-down-actions';
import DropdownButtons from '@/components/drop-down-buttons';
import IconFont from '@/components/icon-font';
import { PageSize } from '@/components/logs-viewer/config';
import PageTools from '@/components/page-tools';
import BaseSelect from '@/components/seal-form/base/select';
@@ -12,6 +13,7 @@ import useBodyScroll from '@/hooks/use-body-scroll';
import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
import NoResult from '@/pages/_components/no-result';
import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
import { handleBatchRequest } from '@/utils';
import { DownOutlined, SearchOutlined, SyncOutlined } from '@ant-design/icons';
@@ -704,6 +706,30 @@ const Models: React.FC<ModelsProps> = ({
loadChildren={getModelInstances}
loadChildrenAPI={generateChildrenRequestAPI}
renderChildren={renderChildren}
empty={
<NoResult
loading={loading}
loadend={loadend}
dataSource={dataSource}
image={<IconFont type="icon-rocket-launch1" />}
filters={queryParams}
noFoundText={intl.formatMessage({
id: 'noresult.mymodels.nofound'
})}
title={intl.formatMessage({ id: 'noresult.deployments.title' })}
subTitle={intl.formatMessage({
id: 'noresult.deployments.subTitle'
})}
>
<Button
type="primary"
iconPosition="end"
onClick={() => handleClickDropdown({ key: 'catalog' })}
>
{intl?.formatMessage?.({ id: 'models.table.button.deploy' })}
</Button>
</NoResult>
}
pagination={{
showSizeChanger: true,
pageSize: queryParams.perPage,
src/pages/llmodels/config/backend-parameters/index.ts
+1 -1
View File
@@ -5,7 +5,7 @@ import vllmParameters from './vllm-parameters';
export const backendOptionsMap = {
llamaBox: 'llama-box',
vllm: 'vLLM',
voxBox: 'vox-box',
voxBox: 'VoxBox',
ascendMindie: 'MindIE',
custom: 'Custom'
};
src/pages/llmodels/config/button-actions.ts
-6
View File
@@ -13,12 +13,6 @@ export const modalConfig: Record<
width: 'calc(100vw - 220px)',
source: modelSourceMap.huggingface_value
},
ollama_library: {
show: true,
width: 600,
isGGUF: true,
source: modelSourceMap.ollama_library_value
},
modelscope: {
show: true,
width: 'calc(100vw - 220px)',
src/pages/llmodels/config/types.ts
+11
View File
@@ -264,3 +264,14 @@ export interface AccessControlFormData {
access_policy: 'public' | 'authed' | 'allowed_users';
users: { id: number }[];
}
export interface BackendItem {
backend_name: string;
from_config: boolean;
default_version: string;
default_backend_param: string[];
versions: {
version: string;
is_deprecated: boolean;
}[];
}
src/pages/llmodels/hooks/use-query-backends.ts
+4 -4
View File
@@ -11,12 +11,12 @@ export default function useQueryBackends() {
const list = res?.items?.map((item) => {
return {
value: item.backend_name,
label: item.backend_show_name,
label: item.backend_name,
default_backend_param: item.default_backend_param || [],
default_version: item.default_version,
versions: (item.versions || []).map((version) => ({
label: version,
value: version
versions: (item.versions || []).map((vItem) => ({
label: vItem.version,
value: vItem.version
}))
};
});
src/pages/llmodels/index.tsx
+11 -3
View File
@@ -44,6 +44,7 @@ const Models: React.FC = () => {
page: 1,
perPage: 10,
search: '',
cluster_id: 0,
categories: []
});
@@ -191,7 +192,11 @@ const Models: React.FC = () => {
};
const createModelsChunkRequest = useCallback(
async (params?: { search: string; categories: any[] }) => {
async (params?: {
search: string;
categories: any[];
cluster_id: number;
}) => {
const search = params?.search || queryParams.search;
const categories = params?.categories || queryParams.categories;
chunkRequedtRef.current?.current?.cancel?.();
@@ -266,7 +271,8 @@ const Models: React.FC = () => {
});
createModelsChunkRequest({
search: e.target.value,
categories: queryParams.categories
categories: queryParams.categories,
cluster_id: queryParams.cluster_id || 0
});
}, 350);
@@ -279,17 +285,19 @@ const Models: React.FC = () => {
});
createModelsChunkRequest({
search: queryParams.search,
cluster_id: queryParams.cluster_id || 0,
categories: value
});
};
const handleClusterChange = async (value: any) => {
const handleClusterChange = async (value: number) => {
handleQueryChange({
page: 1,
cluster_id: value
});
createModelsChunkRequest({
search: queryParams.search,
categories: queryParams.categories,
cluster_id: value
});
};
src/pages/llmodels/user-models.tsx
+19 -2
View File
@@ -1,3 +1,4 @@
import IconFont from '@/components/icon-font';
import PageTools from '@/components/page-tools';
import BaseSelect from '@/components/seal-form/base/select';
import CardList from '@/components/templates/card-list';
@@ -10,6 +11,7 @@ import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
import { Button, Input, Space } from 'antd';
import React from 'react';
import { ScrollerContext } from '../_components/infinite-scroller/use-scroller-context';
import NoResult from '../_components/no-result';
import { MY_MODELS_API, queryMyModels } from './apis';
import ModelItem from './components/model-item';
import { categoryOptions, modelCategoriesMap } from './config';
@@ -67,8 +69,11 @@ const UserModels: React.FC = () => {
const loadMore = useMemoizedFn((nextPage: number) => {
fetchData({
...queryParams,
page: nextPage
query: {
...queryParams,
page: nextPage
},
loadmore: true
});
});
@@ -137,6 +142,18 @@ const UserModels: React.FC = () => {
Skeleton={CardSkeleton}
renderItem={renderCard}
></CardList>
<NoResult
loading={dataSource.loading}
loadend={dataSource.loadend}
dataSource={dataSource.dataList}
image={<IconFont type="icon-models" />}
filters={queryParams}
noFoundText={intl.formatMessage({
id: 'noresult.mymodels.nofound'
})}
title={intl.formatMessage({ id: 'noresult.mymodels.title' })}
subTitle={intl.formatMessage({ id: 'noresult.mymodels.subTitle' })}
></NoResult>
</ScrollerContext.Provider>
</PageContainer>
);