Browse Source

chore: 优化数据集和模型配置代码

pull/82/head
cp3hnu 1 year ago
parent
commit
505b28b3ea
8 changed files with 49 additions and 57 deletions
  1. +6
    -5
      react-ui/src/pages/Dataset/components/AddVersionModal/index.tsx
  2. +3
    -2
      react-ui/src/pages/Dataset/components/CategoryItem/index.tsx
  3. +3
    -4
      react-ui/src/pages/Dataset/components/CategoryList/index.tsx
  4. +6
    -7
      react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx
  5. +8
    -7
      react-ui/src/pages/Dataset/components/ResourceList/index.tsx
  6. +4
    -13
      react-ui/src/pages/Dataset/components/ResourcePage/index.tsx
  7. +7
    -6
      react-ui/src/pages/Dataset/components/ResourceVersion/index.tsx
  8. +12
    -13
      react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx

+ 6
- 5
react-ui/src/pages/Dataset/components/AddVersionModal/index.tsx View File

@@ -33,10 +33,11 @@ function AddVersionModal({
...rest
}: AddVersionModalProps) {
const [uuid] = useState(Date.now());
const config = resourceConfig[resourceType];

// 上传组件参数
const uploadProps: UploadProps = {
action: resourceConfig[resourceType].uploadAction,
action: config.uploadAction,
headers: {
Authorization: getAccessToken() || '',
},
@@ -45,7 +46,7 @@ function AddVersionModal({

// 上传请求
const createDatasetVersion = async (params: any) => {
const request = resourceConfig[resourceType].addVersion;
const request = config.addVersion;
const [res] = await to(request(params));
if (res) {
message.success('创建成功');
@@ -62,7 +63,7 @@ function AddVersionModal({
const data = item.response?.data?.[0] ?? {};
return {
...otherParams,
[resourceConfig[resourceType].idParamKey]: resourceId,
[config.idParamKey]: resourceId,
file_name: data.fileName,
file_size: data.fileSize,
url: data.url,
@@ -72,8 +73,8 @@ function AddVersionModal({
}
};

const name = resourceConfig[resourceType].name;
const accept = resourceConfig[resourceType].uploadAccept;
const name = config.name;
const accept = config.uploadAccept;
return (
<KFModal
{...rest}


+ 3
- 2
react-ui/src/pages/Dataset/components/CategoryItem/index.tsx View File

@@ -10,6 +10,7 @@ type CategoryItemProps = {
};

function CategoryItem({ resourceType, item, isSelected, onClick }: CategoryItemProps) {
const config = resourceConfig[resourceType];
return (
<div
className={classNames(styles['category-item'], {
@@ -20,13 +21,13 @@ function CategoryItem({ resourceType, item, isSelected, onClick }: CategoryItemP
<img
className={styles['category-item__icon']}
style={{ width: '22px' }}
src={`/assets/images/${resourceConfig[resourceType].prefix}/${item.path}.png`}
src={`/assets/images/${config.prefix}/${item.path}.png`}
alt=""
/>
<img
className={styles['category-item__active-icon']}
style={{ width: '22px' }}
src={`/assets/images/${resourceConfig[resourceType].prefix}/${item.path}-hover.png`}
src={`/assets/images/${config.prefix}/${item.path}-hover.png`}
alt=""
/>
<span className={styles['category-item__name']}>{item.name}</span>


+ 3
- 4
react-ui/src/pages/Dataset/components/CategoryList/index.tsx View File

@@ -29,15 +29,14 @@ function CategoryList({
onTagSelect,
onSearch,
}: CategoryProps) {
const config = resourceConfig[resourceType];
return (
<div className={styles['category-list']}>
<div style={{ padding: '0 20px' }}>
<Input.Search placeholder="搜索" allowClear onSearch={onSearch} />
</div>
<div className={styles['category-list__content']}>
<div className={styles['category-list__content__title']}>
{resourceConfig[resourceType].typeTitle}
</div>
<div className={styles['category-list__content__title']}>{config.typeTitle}</div>
<Flex wrap="wrap" gap="20px 12px">
{typeList?.map((item) => (
<CategoryItem
@@ -50,7 +49,7 @@ function CategoryList({
))}
</Flex>
<div className={styles['category-list__content__title']} style={{ marginTop: '25px' }}>
{resourceConfig[resourceType].tagTitle}
{config.tagTitle}
</div>
<Flex wrap="wrap" gap="20px 12px">
{tagList?.map((item) => (


+ 6
- 7
react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx View File

@@ -28,7 +28,8 @@ const ResourceIntro = ({ resourceType }: ResourceIntroProps) => {
const [version, setVersion] = useState<string | undefined>(undefined);
const [activeTab, setActiveTab] = useState<string>(defaultTab);
const resourceId = Number(locationParams.id);
const typeName = resourceConfig[resourceType].name; // 数据集/模型
const config = resourceConfig[resourceType];
const typeName = config.name; // 数据集/模型

useEffect(() => {
getModelByDetail();
@@ -37,7 +38,7 @@ const ResourceIntro = ({ resourceType }: ResourceIntroProps) => {

// 获取详情
const getModelByDetail = async () => {
const request = resourceConfig[resourceType].getInfo;
const request = config.getInfo;
const [res] = await to(request(resourceId));
if (res) {
setInfo(res.data);
@@ -46,7 +47,7 @@ const ResourceIntro = ({ resourceType }: ResourceIntroProps) => {

// 获取版本列表
const getVersionList = async () => {
const request = resourceConfig[resourceType].getVersions;
const request = config.getVersions;
const [res] = await to(request(resourceId));
if (res && res.data && res.data.length > 0) {
setVersionList(
@@ -122,10 +123,8 @@ const ResourceIntro = ({ resourceType }: ResourceIntroProps) => {
});
}

const infoTypePropertyName = resourceConfig[resourceType]
.infoTypePropertyName as keyof ResourceData;
const infoTagPropertyName = resourceConfig[resourceType]
.infoTagPropertyName as keyof ResourceData;
const infoTypePropertyName = config.infoTypePropertyName as keyof ResourceData;
const infoTagPropertyName = config.infoTagPropertyName as keyof ResourceData;

return (
<div className={styles['resource-intro']}>


+ 8
- 7
react-ui/src/pages/Dataset/components/ResourceList/index.tsx View File

@@ -54,6 +54,7 @@ function ResourceList(
const [searchText, setSearchText] = useState(initialSearchText);
const [inputText, setInputText] = useState(initialSearchText);
const { message } = App.useApp();
const config = resourceConfig[resourceType];

useEffect(() => {
getDataList();
@@ -82,12 +83,12 @@ function ResourceList(
const params = {
page: pagination.current! - 1,
size: pagination.pageSize,
[resourceConfig[resourceType].typeParamKey]: dataType,
[resourceConfig[resourceType].tagParamKey]: dataTag,
[config.typeParamKey]: dataType,
[config.tagParamKey]: dataTag,
available_range: isPublic ? 1 : 0,
name: searchText !== '' ? searchText : undefined,
};
const request = resourceConfig[resourceType].getList;
const request = config.getList;
const [res] = await to(request(params));
if (res && res.data && res.data.content) {
setDataList(res.data.content);
@@ -97,7 +98,7 @@ function ResourceList(

// 删除请求
const deleteRecord = async (id: number) => {
const request = resourceConfig[resourceType].deleteRecord;
const request = config.deleteRecord;
const [res] = await to(request(id));
if (res) {
getDataList();
@@ -113,7 +114,7 @@ function ResourceList(
// 删除
const handleRemove = (record: ResourceData) => {
modalConfirm({
title: resourceConfig[resourceType].deleteModalTitle,
title: config.deleteModalTitle,
onOk: () => {
deleteRecord(record.id);
},
@@ -129,7 +130,7 @@ function ResourceList(
activeType: dataType,
activeTag: dataTag,
});
const prefix = resourceConfig[resourceType].prefix;
const prefix = config.prefix;
navigate(`/dataset/${prefix}/${record.id}`);
};

@@ -176,7 +177,7 @@ function ResourceList(
onClick={showModal}
icon={<KFIcon type="icon-xinjian2" />}
>
{resourceConfig[resourceType].addBtnTitle}
{config.addBtnTitle}
</Button>
)}
</div>


+ 4
- 13
react-ui/src/pages/Dataset/components/ResourcePage/index.tsx View File

@@ -21,6 +21,7 @@ function ResourcePage({ resourceType }: ResourcePageProps) {
const [activeType, setActiveType] = useState<number | undefined>(cacheState?.activeType);
const [activeTag, setActiveTag] = useState<number | undefined>(cacheState?.activeTag);
const dataListRef = useRef<ResourceListRef>(null);
const config = resourceConfig[resourceType];

useEffect(() => {
getAssetIconList();
@@ -52,16 +53,10 @@ function ResourcePage({ resourceType }: ResourcePageProps) {
if (res && res.data && res.data.content) {
const { content } = res.data;
setTypeList(
content.filter(
(item: CategoryData) =>
Number(item.category_id) === resourceConfig[resourceType].typeValue,
),
content.filter((item: CategoryData) => Number(item.category_id) === config.typeValue),
);
setTagList(
content.filter(
(item: CategoryData) =>
Number(item.category_id) === resourceConfig[resourceType].tagValue,
),
content.filter((item: CategoryData) => Number(item.category_id) === config.tagValue),
);
}
};
@@ -76,11 +71,7 @@ function ResourcePage({ resourceType }: ResourcePageProps) {
return (
<div className={styles['resource-page']}>
<div className={styles['resource-page__tabs-container']}>
<Tabs
activeKey={activeTab}
items={resourceConfig[resourceType].tabItems}
onChange={hanleTabChange}
/>
<Tabs activeKey={activeTab} items={config.tabItems} onChange={hanleTabChange} />
</div>
<Flex style={{ marginTop: '10px', height: 'calc(100% - 59px)' }}>
<CategoryList


+ 7
- 6
react-ui/src/pages/Dataset/components/ResourceVersion/index.tsx View File

@@ -41,6 +41,7 @@ function ResourceVersion({
}: ResourceVersionProps) {
const [fileList, setFileList] = useState<ResourceFileData[]>([]);
const { message } = App.useApp();
const config = resourceConfig[resourceType];

// 获取版本文件列表
useEffectWhen(
@@ -59,9 +60,9 @@ function ResourceVersion({
const getFileList = async (version: string) => {
const params = {
version,
[resourceConfig[resourceType].fileReqParamKey]: resourceId,
[config.fileReqParamKey]: resourceId,
};
const request = resourceConfig[resourceType].getFiles;
const request = config.getFiles;
const [res] = await to(request(params));
if (res) {
setFileList(res?.data?.content ?? []);
@@ -70,9 +71,9 @@ function ResourceVersion({

// 删除版本
const deleteVersion = async () => {
const request = resourceConfig[resourceType].deleteVersion;
const request = config.deleteVersion;
const params = {
[resourceConfig[resourceType].idParamKey]: resourceId,
[config.idParamKey]: resourceId,
version,
};
const [res] = await to(request(params));
@@ -111,13 +112,13 @@ function ResourceVersion({

// 全部导出
const handleExport = async () => {
const url = resourceConfig[resourceType].downloadAllAction;
const url = config.downloadAllAction;
downLoadZip(url, { models_id: resourceId, version });
};

// 单个导出
const downloadAlone = (record: ResourceFileData) => {
const url = resourceConfig[resourceType].downloadSingleAction;
const url = config.downloadSingleAction;
downLoadZip(`${url}/${record.id}`);
};



+ 12
- 13
react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx View File

@@ -118,6 +118,7 @@ function ResourceSelectorModal({
const [fisrtLoadList, setFisrtLoadList] = useState(false);
const [fisrtLoadVersions, setFisrtLoadVersions] = useState(false);
const treeRef = useRef<TreeRef>(null);
const config = selectorTypeConfig[type];

useEffect(() => {
setExpandedKeys([]);
@@ -143,9 +144,9 @@ function ResourceSelectorModal({
const params = {
page: 0,
size: 1000,
[selectorTypeConfig[type].litReqParamKey]: available_range,
[config.litReqParamKey]: available_range,
};
const getListReq = selectorTypeConfig[type].getList;
const getListReq = config.getList;
const [res] = await to(getListReq(params));
if (res) {
const list = res.data?.content || [];
@@ -161,10 +162,10 @@ function ResourceSelectorModal({

// 获取数据集\模型\镜像版本列表
const getVersions = async (parentId: number) => {
const getVersionsReq = selectorTypeConfig[type].getVersions;
const getVersionsReq = config.getVersions;
const [res, error] = await to(getVersionsReq(parentId));
if (res) {
const list = selectorTypeConfig[type].handleVersionResponse(res);
const list = config.handleVersionResponse(res);
const children = list.map(convertVersionToTreeData(parentId));
// 更新 treeData children
setOriginTreeData((prev) => prev.map(updateChildren(parentId, children)));
@@ -183,8 +184,8 @@ function ResourceSelectorModal({

// 获取版本下的文件
const getFiles = async (id: number, version: string) => {
const getFilesReq = selectorTypeConfig[type].getFiles;
const paramsKey = selectorTypeConfig[type].fileReqParamKey;
const getFilesReq = config.getFiles;
const paramsKey = config.fileReqParamKey;
const params = { version: version, [paramsKey]: id };
const [res] = await to(getFilesReq(params));
if (res) {
@@ -282,14 +283,12 @@ function ResourceSelectorModal({
}
};

const title = `选择${selectorTypeConfig[type].name}`;
const palceholder = `请输入${selectorTypeConfig[type].name}名称`;
const title = `选择${config.name}`;
const palceholder = `请输入${config.name}名称`;
const fileTitle =
type === ResourceSelectorType.Mirror
? '已选镜像'
: `已选${selectorTypeConfig[type].name}文件(${files.length})`;
const tabItems = selectorTypeConfig[type].tabItems;
const titleImg = selectorTypeConfig[type].modalIcon;
type === ResourceSelectorType.Mirror ? '已选镜像' : `已选${config.name}文件(${files.length})`;
const tabItems = config.tabItems;
const titleImg = config.modalIcon;

return (
<KFModal {...rest} title={title} image={titleImg} onOk={handleOk} width={920} destroyOnClose>


Loading…
Cancel
Save