diff --git a/packages/dataset-version-list/src/__constants.js b/packages/dataset-version-list/src/__constants.js index f15f0c6..b7a7411 100644 --- a/packages/dataset-version-list/src/__constants.js +++ b/packages/dataset-version-list/src/__constants.js @@ -58,20 +58,25 @@ constants.DATASET_DATA = function applyThis() { ], syncStatus: [ { - children: '同步中', + children: '导入中', id: 'FileSyncing', type: 'info', }, { - children: '同步失败', + children: '导入失败', id: 'FileSyncFailed', type: 'error', }, { - children: '同步成功', + children: '导入成功', id: 'FileSyncSuccess', type: 'success', }, + { + children: '未导入', + id: 'no', + type: 'info', + }, ], released: [ { diff --git a/packages/dataset-version-list/src/index.jsx b/packages/dataset-version-list/src/index.jsx index 92dd0ec..68b5947 100644 --- a/packages/dataset-version-list/src/index.jsx +++ b/packages/dataset-version-list/src/index.jsx @@ -57,49 +57,6 @@ class DatasetVersionList$$Component extends React.Component { console.log('will unmount'); } - release(params) { - this.setState({ - confirm: { - id: new Date().getTime(), - title: '发布数据集', - content: `数据发布后不可更改，确定发布：${params.dataset.name} - ${params.version.version}？`, - onOk: async () => { - const res = await this.utils.bff - .updateVersionedDataset({ - input: { - namespace: params.dataset.namespace, - name: params.version.name, - released: 1, - }, - }) - .then(res => { - this.utils.notification.success({ - message: '发布数据集版本成功', - }); - this.props.refresh?.(params); - }) - .catch(e => { - this.utils.notification.warn({ - message: '发布数据集版本失败', - }); - }); - }, - }, - }); - } - - getProps() { - if (this.props.dataset) return this.props; - return { - dataset: this.mockData.data?.Dataset?.getDataset || {}, - datasource: this.mockData.data?.Dataset?.getDataset?.versions?.nodes || [], - }; - } - - toDetail(event, params) { - this.history.push(`/dataset/detail/${params.datasetName}/version/${params.versionName}`); - } - delVersion(params) { this.setState({ confirm: { @@ -161,6 +118,14 @@ class DatasetVersionList$$Component extends React.Component { return list.sort((a, b) => a.index - b.index); } + getProps() { + if (this.props.dataset) return this.props; + return { + dataset: this.mockData.data?.Dataset?.getDataset || {}, + datasource: this.mockData.data?.Dataset?.getDataset?.versions?.nodes || [], + }; + } + onDropdownClick(event, params) { if (event.key === 'delete') { return this.delVersion(params); @@ -177,6 +142,41 @@ class DatasetVersionList$$Component extends React.Component { }); } + release(params) { + this.setState({ + confirm: { + id: new Date().getTime(), + title: '发布数据集', + content: `数据发布后不可更改，确定发布：${params.dataset.name} - ${params.version.version}？`, + onOk: async () => { + const res = await this.utils.bff + .updateVersionedDataset({ + input: { + namespace: params.dataset.namespace, + name: params.version.name, + released: 1, + }, + }) + .then(res => { + this.utils.notification.success({ + message: '发布数据集版本成功', + }); + this.props.refresh?.(params); + }) + .catch(e => { + this.utils.notification.warn({ + message: '发布数据集版本失败', + }); + }); + }, + }, + }); + } + + toDetail(event, params) { + this.history.push(`/dataset/detail/${params.datasetName}/version/${params.versionName}`); + } + componentDidMount() {} render() { @@ -185,67 +185,69 @@ class DatasetVersionList$$Component extends React.Component { return ( this.state.confirm)} __component_name="LccComponentSbva0" + data={__$$eval(() => this.state.confirm)} /> (__$$context => ( record.syncStatus)} - types={__$$eval(() => __$$context.constants.DATASET_DATA.syncStatus)} __component_name="Status" + id={__$$eval(() => record.syncStatus || 'no')} + types={__$$eval(() => __$$context.constants.DATASET_DATA.syncStatus)} /> ))(__$$createChildContext(__$$context, { text, record, index })), - dataIndex: 'syncStatus', + title: '导入状态', }, { + dataIndex: 'dataProcessStatus', key: 'dataProcessStatus', - title: '数据处理状态', render: (text, record, index) => (__$$context => ( record.dataProcessStatus || 'no')} types={__$$eval(() => __$$context.constants.DATASET_DATA.dataProcessStatus)} - __component_name="Status" /> ))(__$$createChildContext(__$$context, { text, record, index })), - dataIndex: 'dataProcessStatus', + title: '数据处理状态', }, { + dataIndex: 'files', key: 'files', - title: '数据量', render: (text, record) => text.totalCount, - dataIndex: 'files', + title: '数据量', }, { + dataIndex: 'updateTimestamp', key: 'updateTimestamp', - title: '最后更新时间', render: (text, record, index) => (__$$context => ( text)} + __component_name="Typography.Time" format="" relativeTime={true} - __component_name="Typography.Time" + time={__$$eval(() => text)} /> ))(__$$createChildContext(__$$context, { text, record, index })), - dataIndex: 'updateTimestamp', + title: '最后更新时间', }, { + dataIndex: 'action', key: 'action', - title: '操作', render: (text, record, index) => (__$$context => ( __$$context.dropdownList(record)), onClick: function () { @@ -260,8 +262,6 @@ class DatasetVersionList$$Component extends React.Component { ); }.bind(__$$context), }} - style={{}} - danger={false} onClick={function () { return this.toDetail.apply( this, @@ -273,39 +273,39 @@ class DatasetVersionList$$Component extends React.Component { ]) ); }.bind(__$$context)} - trigger={['hover']} - disabled={false} placement="bottomRight" - __component_name="Dropdown.Button" - destroyPopupOnHide={true} + style={{}} + trigger={['hover']} > 查看详情 ))(__$$createChildContext(__$$context, { text, record, index })), - dataIndex: 'action', + title: '操作', }, ]} dataSource={__$$eval(() => this.getProps().datasource || [])} pagination={{ - size: 'default', - simple: false, + _unsafe_MixedSetter_position_select: 'ArraySetter', pageSize: 10, - position: ['bottomRight'], pagination: { pageSize: 10 }, + position: ['bottomRight'], showQuickJumper: false, showSizeChanger: false, - _unsafe_MixedSetter_position_select: 'ArraySetter', + simple: false, + size: 'default', }} + rowKey="version" + scroll={{ scrollToFirstRowOnChange: true }} showHeader={true} - __component_name="Table" + size="middle" /> ); @@ -360,6 +360,14 @@ function __$$createChildContext(oldContext, ext) { const childContext = { ...oldContext, ...ext, + // 重写 state getter，保证 state 的指向不变，这样才能从 context 中拿到最新的 state + get state() { + return oldContext.state; + }, + // 重写 props getter，保证 props 的指向不变，这样才能从 context 中拿到最新的 props + get props() { + return oldContext.props; + }, }; childContext.__proto__ = oldContext; return childContext; diff --git a/src/__constants.js b/src/__constants.js index 3d8764b..2d2b5f7 100644 --- a/src/__constants.js +++ b/src/__constants.js @@ -141,3 +141,11 @@ constants.DESCRIPTION_LENGTH_REG = function applyThis() { }.apply(constants); export const DESCRIPTION_LENGTH_REG = constants.DESCRIPTION_LENGTH_REG; export default constants; + +/** 文件相关的接口的origin, 开发环境使用https://portal.172.22.96.136.nip.io，使用方式： this.constants.FILES_API_ORIGIN */ +constants.FILES_API_ORIGIN = function applyThis() { + return process.env.NODE_ENV === 'production' + ? window.location.origin + : 'https://portal.172.22.96.136.nip.io'; +}.apply(constants); +export const FILES_API_ORIGIN = constants.FILES_API_ORIGIN; diff --git a/src/pages/Dataset/index.jsx b/src/pages/Dataset/index.jsx index e89b256..8a0abab 100644 --- a/src/pages/Dataset/index.jsx +++ b/src/pages/Dataset/index.jsx @@ -22,7 +22,6 @@ import { List, Collapse, Image, - UnifiedLink, Tag, Divider, } from '@tenx-ui/materials'; @@ -715,15 +714,16 @@ class Dataset$$Page extends React.Component { )} width={32} /> - `/dataset/detail/${item.name}`)} + {__$$eval(() => __$$context.utils.getFullName(item))} - + { - const res = await this.utils.bff - .deleteVersionedDatasets({ - input: { - name: this.data().data.name, - namespace: this.utils.getAuthData?.()?.project, - }, - }) - .catch(e => { - this.utils.notification.warn({ - message: '删除数据集版本失败', - }); - }); - this.utils.notification.success({ - message: '删除数据集版本成功', - }); - this.appHelper.history.back(); - }, - }, - }); - } - - setUploadState(state) { - this.setState({ - upload: state, - }); - } - - handleReUpload() { - if (!(this.state.upload?.uploadThis?.state?.fileList?.length > 0)) { - this.handleCancle(); - return; - } - this.state.upload?.uploadThis?.state?.fileList?.forEach(file => { - this.state.upload?.uploadThis?.computeMD5(file); - }); - } - - handleCancle() { - this.setState({ - addFileVisible: false, - }); - } - - handleUploadSuccess() { - this.setState({ - addFileVisible: false, - }); - this.utils.notification.success({ - message: '新增文件成功', - }); - this.refresh(); - } - addFileClick(event) { this.setState({ addFileVisible: true, @@ -189,14 +109,11 @@ class DatasetVersionDetail$$Page extends React.Component { this.form()?.submit(fetch); } - getBucketPath() { - return `dataset/${this.props.useGetDataset.data?.Dataset?.getDataset?.name}/${ - this.data().data?.version - }`; - } - - handleUploadFinished(file, res) { - console.log('handleUploadFinished,', file, res); + data() { + return { + ...this.props.useGetVersionedDataset, + data: this.props.useGetVersionedDataset.data?.VersionedDataset?.getVersionedDataset || {}, + }; } delFileClick(event, { data }) { @@ -208,7 +125,7 @@ class DatasetVersionDetail$$Page extends React.Component { content: `确定删除文件：${data?.path} ？`, onOk: async () => { await this.utils.axios - .delete(`${window.location.origin}/kubeagi-apis/bff/versioneddataset/files`, { + .delete(`${this.constants.FILES_API_ORIGIN}/kubeagi-apis/bff/versioneddataset/files`, { data: { files: [data.path], bucket: this.utils.getAuthData?.()?.project, @@ -236,29 +153,44 @@ class DatasetVersionDetail$$Page extends React.Component { }); } - openFileDetail(e, { data }) { - this.setState( - { - openFile: true, - fileData: data, - }, - this.getFile.bind(this) - ); - } - - onFileClose(event) { + delVerClick(event) { this.setState({ - openFile: false, - fileData: {}, - cvsData: { - current: 1, - loading: false, - list: [], - total: 0, + confirm: { + id: new Date().getTime(), + title: '删除数据集版本', + content: `确定删除数据集版本：${this.data().data?.version} ？`, + onOk: async () => { + const res = await this.utils.bff + .deleteVersionedDatasets({ + input: { + name: this.data().data.name, + namespace: this.utils.getAuthData?.()?.project, + }, + }) + .catch(e => { + this.utils.notification.warn({ + message: '删除数据集版本失败', + }); + }); + this.utils.notification.success({ + message: '删除数据集版本成功', + }); + this.appHelper.history.back(); + }, }, }); } + form(name) { + return this.$(name || 'add_file')?.formRef?.current?.form; + } + + getBucketPath() { + return `dataset/${this.props.useGetDataset.data?.Dataset?.getDataset?.name}/${ + this.data().data?.version + }`; + } + async getFile() { this.setState({ cvsData: { @@ -267,7 +199,7 @@ class DatasetVersionDetail$$Page extends React.Component { }, }); const res = await this.utils.axios.get( - `${window.location.origin}/kubeagi-apis/bff/versioneddataset/files/csv?page=${ + `${this.constants.FILES_API_ORIGIN}/kubeagi-apis/bff/versioneddataset/files/csv?page=${ this.state.cvsData?.current }&size=10&bucket=${ this.utils.getAuthData?.()?.project @@ -291,9 +223,51 @@ class DatasetVersionDetail$$Page extends React.Component { }); } + handleCancle() { + this.setState({ + addFileVisible: false, + }); + } + + handleReUpload() { + if (!(this.state.upload?.uploadThis?.state?.fileList?.length > 0)) { + this.handleCancle(); + return; + } + this.state.upload?.uploadThis?.state?.fileList?.forEach(file => { + this.state.upload?.uploadThis?.computeMD5(file); + }); + } + + handleUploadFinished(file, res) { + console.log('handleUploadFinished,', file, res); + } + + handleUploadSuccess() { + this.setState({ + addFileVisible: false, + }); + this.utils.notification.success({ + message: '新增文件成功', + }); + this.refresh(); + } + + onFileClose(event) { + this.setState({ + openFile: false, + fileData: {}, + cvsData: { + current: 1, + loading: false, + list: [], + total: 0, + }, + }); + } + onFilePageChange(page, pageSize) { // 页码或 pageSize 改变的回调 - console.log('onPaginationChange', page, pageSize); this.setState( { cvsData: { @@ -305,6 +279,30 @@ class DatasetVersionDetail$$Page extends React.Component { ); } + openFileDetail(e, { data }) { + this.setState( + { + openFile: true, + fileData: data, + }, + this.getFile.bind(this) + ); + } + + refresh() { + this.utils?.changeLocationQuery(this, 'useGetVersionedDataset', { + name: this.match?.params?.versionId, + namespace: this.utils.getAuthData?.()?.project, + _: new Date().getTime(), + }); + } + + setUploadState(state) { + this.setState({ + upload: state, + }); + } + componentDidMount() {} render() { @@ -313,141 +311,152 @@ class DatasetVersionDetail$$Page extends React.Component { return ( this.state.openFile)} + __component_name="Drawer" + destroyOnClose={true} extra="" - title={__$$eval(() => this.state.fileData.path)} - width="70%" footer="" + mask={true} + maskClosable={true} onClose={function () { return this.onFileClose.apply(this, Array.prototype.slice.call(arguments).concat([])); }.bind(this)} + open={__$$eval(() => this.state.openFile)} placement="right" - maskClosable={true} - destroyOnClose={true} - __component_name="Drawer" + title={__$$eval(() => this.state.fileData.path)} + width="70%" >
- (() => { - console.log(this.state.cvsData?.list || []); - return this.state.cvsData?.list || []; - })() - )} + bordered={true} + className="custom-table" columns={[ { - title: 'Q', + _unsafe_MixedSetter_width_select: 'StringSetter', dataIndex: 'q', key: 'q', - _unsafe_MixedSetter_width_select: 'StringSetter', + title: 'Q', width: '50%', }, { - title: 'A', + _unsafe_MixedSetter_width_select: 'StringSetter', dataIndex: 'a', key: 'a', - _unsafe_MixedSetter_width_select: 'StringSetter', + title: 'A', width: '50%', }, ]} + dataSource={__$$eval(() => + (() => { + console.log(this.state.cvsData?.list || []); + return this.state.cvsData?.list || []; + })() + )} + loading={__$$eval(() => this.state.cvsData.loading)} pagination={{ - pageSize: 10, - total: __$$eval(() => this.state.cvsData?.total || 0), current: __$$eval(() => this.state.cvsData?.current || 1), - showSizeChanger: false, - showQuickJumper: false, - simple: false, - size: 'default', - pagination: { pageSize: 10 }, onChange: function () { return this.onFilePageChange.apply( this, Array.prototype.slice.call(arguments).concat([]) ); }.bind(this), + pageSize: 10, + pagination: { pageSize: 10 }, + showQuickJumper: false, + showSizeChanger: false, + simple: false, + size: 'default', + total: __$$eval(() => this.state.cvsData?.total || 0), }} + rowKey="id" + scroll={{ scrollToFirstRowOnChange: true }} + showCard={true} showHeader={true} size="middle" - scroll={{ scrollToFirstRowOnChange: true }} - loading={__$$eval(() => this.state.cvsData.loading)} + style={{}} /> {!!__$$eval(() => this.state.delFileVisible) && ( `确定删除文件：${this.state.delFileData.path} ？`)} showIcon={true} - __component_name="Alert" + type="warning" /> )} this.state.addFileVisible)} title="新增文件" width="650px" - centered={false} - keyboard={true} - onCancel={function () { - return this.handleCancle.apply(this, Array.prototype.slice.call(arguments).concat([])); - }.bind(this)} - forceRender={false} - maskClosable={false} - confirmLoading={false} - destroyOnClose={false} - __component_name="Modal" > this.utils.getAuthorization())} bucket={__$$eval(() => this.utils.getAuthData()?.project)} - setState={function () { - return this.setUploadState.apply( + contentWidth="520px" + getBucketPath={function () { + return this.getBucketPath.apply( + this, + Array.prototype.slice.call(arguments).concat([]) + ); + }.bind(this)} + handleFinished={function () { + return this.handleUploadFinished.apply( this, Array.prototype.slice.call(arguments).concat([]) ); }.bind(this)} - contentWidth="520px" - Authorization={__$$eval(() => this.utils.getAuthorization())} - getBucketPath={function () { - return this.getBucketPath.apply( + handleReUpload={function () { + return this.handleReUpload.apply( this, Array.prototype.slice.call(arguments).concat([]) ); @@ -458,106 +467,100 @@ class DatasetVersionDetail$$Page extends React.Component { Array.prototype.slice.call(arguments).concat([]) ); }.bind(this)} - handleFinished={function () { - return this.handleUploadFinished.apply( - this, - Array.prototype.slice.call(arguments).concat([]) - ); - }.bind(this)} - handleReUpload={function () { - return this.handleReUpload.apply( + setState={function () { + return this.setUploadState.apply( this, Array.prototype.slice.call(arguments).concat([]) ); }.bind(this)} - __component_name="LccComponentQlsmm" /> this.state.confirm)} __component_name="LccComponentSbva0" + data={__$$eval(() => this.state.confirm)} /> - - - + + + - - - + + + this.constants.DATASET_DATA.versionImg)} - width={64} + __component_name="Image" + fallback="" height={64} preview={false} - fallback="" - __component_name="Image" + src={__$$eval(() => this.constants.DATASET_DATA.versionImg)} + width={64} /> - - - + + + {__$$eval(() => this.data().data?.version || '-')} - + this.data().data?.syncStatus)} types={__$$eval(() => this.constants.DATASET_DATA.syncStatus)} - __component_name="Status" /> 更新时间: this.data().data?.updateTimestamp)} + __component_name="Typography.Time" format="" relativeTime={true} - __component_name="Typography.Time" + time={__$$eval(() => this.data().data?.updateTimestamp)} /> @@ -566,24 +569,24 @@ class DatasetVersionDetail$$Page extends React.Component { - + @@ -592,150 +595,148 @@ class DatasetVersionDetail$$Page extends React.Component { this.data().data?.name), key: '0whadic76h29', - span: 24, label: '名称', - children: __$$eval(() => this.data().data?.name), - _unsafe_MixedSetter_children_select: 'VariableSetter', + span: 24, }, { + _unsafe_MixedSetter_children_select: 'VariableSetter', + children: __$$eval(() => this.data().data?.id || '-'), key: '2y97byqciee', - span: 24, label: 'ID', - children: __$$eval(() => this.data().data?.id || '-'), - _unsafe_MixedSetter_children_select: 'VariableSetter', + span: 24, }, { - key: 'xvcp3obfu', - span: 24, - label: '同步状态', + _unsafe_MixedSetter_children_select: 'SlotSetter', children: ( this.data().data?.syncStatus)} types={__$$eval(() => this.constants.DATASET_DATA.syncStatus)} - __component_name="Status" /> ), - _unsafe_MixedSetter_children_select: 'SlotSetter', + key: 'xvcp3obfu', + label: '同步状态', + span: 24, }, { - key: 'er0ptk5lill', - span: 24, - label: this.i18n('i18n-p5qipded') /* 数据处理状态 */, + _unsafe_MixedSetter_children_select: 'SlotSetter', children: ( this.data().data?.dataProcessStatus || 'no')} types={__$$eval(() => this.constants.DATASET_DATA.dataProcessStatus)} - __component_name="Status" /> ), - _unsafe_MixedSetter_children_select: 'SlotSetter', + key: 'er0ptk5lill', + label: '数据处理状态', + span: 24, }, { - key: 'ww04wf6evps', - span: 24, - label: this.i18n('i18n-qjodl1nn') /* 创建时间 */, + _unsafe_MixedSetter_children_select: 'SlotSetter', children: ( this.data().data?.creationTimestamp)} + __component_name="Typography.Time" format="" relativeTime={true} - __component_name="Typography.Time" + time={__$$eval(() => this.data().data?.creationTimestamp)} /> ), - _unsafe_MixedSetter_children_select: 'SlotSetter', + key: 'ww04wf6evps', + label: this.i18n('i18n-qjodl1nn') /* 创建时间 */, + span: 24, }, { + _unsafe_MixedSetter_children_select: 'VariableSetter', + children: __$$eval(() => this.data().data?.creator || '-'), key: 'ajc9nhn140i', - span: 24, label: this.i18n('i18n-sg7nu8tx') /* 创建者 */, - children: __$$eval(() => this.data().data?.creator || '-'), - _unsafe_MixedSetter_children_select: 'VariableSetter', + span: 24, }, { + _unsafe_MixedSetter_children_select: 'VariableSetter', + children: __$$eval(() => this.data().data?.description || '-'), key: '3p5bkjlrh9u', - span: 24, label: this.i18n('i18n-txt5kh4m') /* 描述 */, - children: __$$eval(() => this.data().data?.description || '-'), - _unsafe_MixedSetter_children_select: 'VariableSetter', + span: 24, }, ]} - title="" - column={3} - layout="horizontal" - bordered={false} labelStyle={{ width: 100 }} - borderedBottom={false} - __component_name="Descriptions" - borderedBottomDashed={false} + layout="horizontal" + size="default" + title="" /> ), + key: 'tab-item-1', + label: this.i18n('i18n-1gikmooh') /* 详细信息 */, }, { - key: 'fxyz5e43ztm', - label: '文件', children: [ - - + + @@ -743,18 +744,16 @@ class DatasetVersionDetail$$Page extends React.Component { ,
(__$$context => ( - - + + ))(__$$createChildContext(__$$context, { text, record, index })), - ellipsis: { showTitle: true }, - dataIndex: 'path', + title: '文件', }, { + dataIndex: 'fileType', key: 'fileType', + render: (text, record) => record.fileType || '-', title: '标签', width: 150, - render: (text, record) => record.fileType || '-', - dataIndex: 'fileType', }, - { key: 'size', title: '文件大小', width: 150, dataIndex: 'size' }, + { dataIndex: 'size', key: 'size', title: '文件大小', width: 150 }, { + dataIndex: 'count', key: 'count', + render: (text, record) => record.count || 0, title: '数据量', width: 150, - render: (text, record) => record.count || 0, - dataIndex: 'count', }, { + dataIndex: 'time', key: 'time', - title: '创建时间', - width: 100, render: (text, record, index) => (__$$context => ( record.time)} + __component_name="Typography.Time" format="" relativeTime={true} - __component_name="Typography.Time" + time={__$$eval(() => record.time)} /> ))(__$$createChildContext(__$$context, { text, record, index })), - dataIndex: 'time', + title: '创建时间', + width: 100, }, { + dataIndex: '', key: 'action', - title: '操作', - width: 150, render: (text, record, index) => (__$$context => ( ))(__$$createChildContext(__$$context, { text, record, index })), - dataIndex: '', + title: '操作', + width: 150, }, ]} dataSource={__$$eval(() => this.data().data?.files?.nodes || [])} pagination={{ - size: 'default', - simple: false, pageSize: 10, pagination: { pageSize: 10 }, showQuickJumper: false, showSizeChanger: false, + simple: false, + size: 'default', }} + rowKey="id" + scroll={{ scrollToFirstRowOnChange: true }} showHeader={true} - __component_name="Table" + size="middle" + style={{}} key="node_oclpktaw526" />, ], + key: 'fxyz5e43ztm', + label: '文件', }, ]} + size="default" style={{ marginTop: '-20px' }} - activeKey="" tabPosition="top" - __component_name="Tabs" - destroyInactiveTabPane="true" + type="line" /> @@ -940,9 +960,14 @@ function __$$createChildContext(oldContext, ext) { const childContext = { ...oldContext, ...ext, + // 重写 state getter，保证 state 的指向不变，这样才能从 context 中拿到最新的 state get state() { - return oldContext.state - } + return oldContext.state; + }, + // 重写 props getter，保证 props 的指向不变，这样才能从 context 中拿到最新的 props + get props() { + return oldContext.props; + }, }; childContext.__proto__ = oldContext; return childContext;