{
- const filesToTreeData = (
- files: HyperParameterFile[],
- parent?: HyperParameterFile,
- ): TreeDataNode[] =>
- files.map((file) => {
- const key = parent ? `${parent.name}/${file.name}` : file.name;
- return {
- ...file,
- key,
- title: file.name,
- children: file.children ? filesToTreeData(file.children, file) : undefined,
- };
- });
-
- const treeData: TreeDataNode[] = filesToTreeData([record.file]);
- return (
-
- {
- const label = record.title + (record.isFile ? `（${record.size}）` : '');
- return (
- <>
- {label}
- {
- e.stopPropagation();
- downLoadZip(
- record.isFile
- ? `/api/mmp/minioStorage/downloadFile`
- : `/api/mmp/minioStorage/download`,
- { path: record.url },
- );
- }}
- />
-
- );
- }}
- />
-
- );
+ return ;
};
// 展开实例
@@ -237,6 +189,7 @@ function ExperimentHistory({ trialList = [] }: ExperimentHistoryProps) {
expandedRowRender: expandedRowRender,
onExpand: handleExpandChange,
expandedRowKeys: expandedRowKeys,
+ rowExpandable: (record: HyperParameterTrial) => !!record.file,
}}
rowSelection={rowSelection}
/>
diff --git a/react-ui/src/pages/HyperParameter/components/TrialFileTree/index.less b/react-ui/src/pages/HyperParameter/components/TrialFileTree/index.less
new file mode 100644
index 00000000..9119bf15
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/components/TrialFileTree/index.less
@@ -0,0 +1,15 @@
+.trail-file-tree {
+ :global {
+ .ant-tree-node-selected {
+ .trail-file-tree__icon {
+ color: white;
+ }
+ }
+
+ .trail-file-tree__icon {
+ margin-left: 8px;
+ color: @primary-color;
+ }
+ }
+ }
+
\ No newline at end of file
diff --git a/react-ui/src/pages/HyperParameter/components/TrialFileTree/index.tsx b/react-ui/src/pages/HyperParameter/components/TrialFileTree/index.tsx
new file mode 100644
index 00000000..8746f169
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/components/TrialFileTree/index.tsx
@@ -0,0 +1,63 @@
+import InfoGroup from '@/components/InfoGroup';
+import KFIcon from '@/components/KFIcon';
+import { HyperParameterFile } from '@/pages/HyperParameter/types';
+import { downLoadZip } from '@/utils/downloadfile';
+import { Tree, type TreeDataNode } from 'antd';
+import styles from './index.less';
+
+const { DirectoryTree } = Tree;
+
+export type TrialFileTreeProps = {
+ title: string;
+ trial: { file?: HyperParameterFile };
+};
+
+function TrialFileTree({ trial, title }: TrialFileTreeProps) {
+ const filesToTreeData = (
+ files: HyperParameterFile[],
+ parent?: HyperParameterFile,
+ ): TreeDataNode[] =>
+ files.map((file) => {
+ const key = parent ? `${parent.name}/${file.name}` : file.name;
+ return {
+ ...file,
+ key,
+ title: file.name,
+ children: file.children ? filesToTreeData(file.children, file) : undefined,
+ };
+ });
+
+ const treeData: TreeDataNode[] = filesToTreeData(trial.file ? [trial.file] : []);
+ return (
+
+ {
+ const label = record.title + (record.isFile ? `（${record.size}）` : '');
+ return (
+ <>
+ {label}
+ {
+ e.stopPropagation();
+ downLoadZip(
+ record.isFile
+ ? `/api/mmp/minioStorage/downloadFile`
+ : `/api/mmp/minioStorage/download`,
+ { path: record.url },
+ );
+ }}
+ />
+
+ );
+ }}
+ />
+
+ );
+}
+
+export default TrialFileTree;
diff --git a/react-ui/src/utils/downloadfile.ts b/react-ui/src/utils/downloadfile.ts
index 7d4e46cd..2ee843ab 100644
--- a/react-ui/src/utils/downloadfile.ts
+++ b/react-ui/src/utils/downloadfile.ts
@@ -1,9 +1,10 @@
import { request } from '@umijs/max';
/** MimeType */
-export const mimeMap = {
- xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
- zip: 'application/zip',
+export enum MimeType {
+ XLSX = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+ ZIP = 'application/zip',
+ JSON = 'application/json'
};
/**
@@ -11,7 +12,7 @@ export const mimeMap = {
* @param res - blob响应内容
* @param mimeType - MIME类型
*/
-export function resolveBlob(res: any, mimeType: string) {
+export function resolveBlob(res: any, mimeType: string, specifiedFileName: string = "file") {
const aLink = document.createElement('a');
const blob = new Blob([res.data], { type: mimeType });
// 从response的headers中获取filename,
@@ -20,7 +21,7 @@ export function resolveBlob(res: any, mimeType: string) {
// console.log(res);
const contentDisposition = decodeURI(res.headers['content-disposition']);
const result = patt.exec(contentDisposition);
- let fileName = result ? result[1] : 'file';
+ let fileName = result ? result[1] : specifiedFileName;
fileName = fileName.replace(/"/g, '');
aLink.style.display = 'none';
aLink.href = URL.createObjectURL(blob);
@@ -43,7 +44,7 @@ export function downLoadZip(url: string, params?: any) {
responseType: 'blob',
getResponse: true,
}).then((res) => {
- resolveBlob(res, mimeMap.zip);
+ resolveBlob(res, MimeType.ZIP);
});
}
@@ -64,7 +65,30 @@ export async function downloadXlsx(
responseType: 'blob',
getResponse: true,
}).then((res) => {
- resolveBlob(res, mimeMap.xlsx);
+ resolveBlob(res, MimeType.XLSX);
+ });
+}
+
+/**
+ * 下载文本文件
+ * @param url - url 地址
+ * @param type - mime-type
+ * @param fileName - 文件名
+ * @param method - 请求方法
+ * @param options - 请求选项
+ */
+export function downloadCommonFile(url: string, type: string, fileName: string = "file", method: string = 'GET', options?: Record) {
+ request(url, {
+ method: method,
+ headers: {
+ isToken: false,
+ },
+ skipValidating: true,
+ ...options,
+ responseType: 'blob',
+ getResponse: true,
+ }).then((res) => {
+ resolveBlob(res, type, fileName);
});
}