From 75c5915b7853918d47e5bcffc586defb714402fe Mon Sep 17 00:00:00 2001 From: Sheldon <39169452+sketchmind@users.noreply.github.com> Date: Thu, 9 Feb 2023 13:51:04 +0800 Subject: [PATCH] [Feature-11195][UI] Add re-upload feature for resource files and udf files (#11203) * add re-upload feature for resource files * add re-upload feature for udf files Co-authored-by: sheldonliu --- .../e2e/pages/resource/FileManagePage.java | 2 +- .../e2e/pages/resource/UdfManagePage.java | 26 +- .../src/locales/en_US/resource.ts | 26 +- .../src/locales/zh_CN/resource.ts | 28 +- .../src/service/modules/resources/types.ts | 1 + .../components/resource/create/index.tsx | 138 +++++++ .../resource}/create/use-create.ts | 0 .../resource}/create/use-form.ts | 3 +- .../components/resource/edit/index.tsx | 132 +++++++ .../resource}/edit/use-edit.ts | 7 +- .../resource}/edit/use-form.ts | 0 .../resource}/folder/index.tsx | 6 + .../resource}/folder/use-folder.ts | 0 .../resource}/folder/use-form.ts | 5 +- .../resource}/index.module.scss | 0 .../resource/components/resource/index.tsx | 274 ++++++++++++++ .../resource}/rename/index.tsx | 9 +- .../resource}/rename/use-form.ts | 12 +- .../resource}/rename/use-rename.ts | 0 .../resource}/table/table-action.tsx | 45 ++- .../components/resource/table/use-table.ts | 229 ++++++++++++ .../{file => components/resource}/types.ts | 60 ++- .../resource}/upload/index.tsx | 42 ++- .../resource}/upload/use-form.ts | 7 +- .../resource}/upload/use-upload.ts | 20 +- .../{file => components/resource}/use-file.ts | 6 +- .../src/views/resource/file/create/index.tsx | 118 +----- .../src/views/resource/file/edit/index.tsx | 112 +----- .../src/views/resource/file/index.tsx | 351 +----------------- .../views/resource/file/table/use-table.ts | 120 ------ .../function/components/function-modal.tsx | 6 +- .../udf/function/components/use-modal.ts | 2 +- .../udf/resource/components/folder-modal.tsx | 130 ------- .../udf/resource/components/upload-modal.tsx | 124 ------- .../udf/resource/components/use-form.ts | 84 ----- .../udf/resource/components/use-modal.ts | 117 ------ .../resource/udf/resource/index.module.scss | 43 --- .../src/views/resource/udf/resource/index.tsx | 208 +---------- .../src/views/resource/udf/resource/types.ts | 40 -- .../views/resource/udf/resource/use-table.ts | 320 ---------------- 40 files changed, 1006 insertions(+), 1847 deletions(-) create mode 100644 dolphinscheduler-ui/src/views/resource/components/resource/create/index.tsx rename dolphinscheduler-ui/src/views/resource/{file => components/resource}/create/use-create.ts (100%) rename dolphinscheduler-ui/src/views/resource/{file => components/resource}/create/use-form.ts (94%) create mode 100644 dolphinscheduler-ui/src/views/resource/components/resource/edit/index.tsx rename dolphinscheduler-ui/src/views/resource/{file => components/resource}/edit/use-edit.ts (95%) rename dolphinscheduler-ui/src/views/resource/{file => components/resource}/edit/use-form.ts (100%) rename dolphinscheduler-ui/src/views/resource/{file => components/resource}/folder/index.tsx (93%) rename dolphinscheduler-ui/src/views/resource/{file => components/resource}/folder/use-folder.ts (100%) rename dolphinscheduler-ui/src/views/resource/{file => components/resource}/folder/use-form.ts (91%) rename dolphinscheduler-ui/src/views/resource/{file => components/resource}/index.module.scss (100%) create mode 100644 dolphinscheduler-ui/src/views/resource/components/resource/index.tsx rename dolphinscheduler-ui/src/views/resource/{file => components/resource}/rename/index.tsx (91%) rename dolphinscheduler-ui/src/views/resource/{file => components/resource}/rename/use-form.ts (75%) rename dolphinscheduler-ui/src/views/resource/{file => components/resource}/rename/use-rename.ts (100%) rename dolphinscheduler-ui/src/views/resource/{file => components/resource}/table/table-action.tsx (79%) create mode 100644 dolphinscheduler-ui/src/views/resource/components/resource/table/use-table.ts rename dolphinscheduler-ui/src/views/resource/{file => components/resource}/types.ts (58%) rename dolphinscheduler-ui/src/views/resource/{file => components/resource}/upload/index.tsx (77%) rename dolphinscheduler-ui/src/views/resource/{file => components/resource}/upload/use-form.ts (89%) rename dolphinscheduler-ui/src/views/resource/{file => components/resource}/upload/use-upload.ts (71%) rename dolphinscheduler-ui/src/views/resource/{file => components/resource}/use-file.ts (93%) delete mode 100644 dolphinscheduler-ui/src/views/resource/file/table/use-table.ts delete mode 100644 dolphinscheduler-ui/src/views/resource/udf/resource/components/folder-modal.tsx delete mode 100644 dolphinscheduler-ui/src/views/resource/udf/resource/components/upload-modal.tsx delete mode 100644 dolphinscheduler-ui/src/views/resource/udf/resource/components/use-form.ts delete mode 100644 dolphinscheduler-ui/src/views/resource/udf/resource/components/use-modal.ts delete mode 100644 dolphinscheduler-ui/src/views/resource/udf/resource/index.module.scss delete mode 100644 dolphinscheduler-ui/src/views/resource/udf/resource/types.ts delete mode 100644 dolphinscheduler-ui/src/views/resource/udf/resource/use-table.ts diff --git a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/resource/FileManagePage.java b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/resource/FileManagePage.java index f8f2c01a38..2bf5f6b7d4 100644 --- a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/resource/FileManagePage.java +++ b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/resource/FileManagePage.java @@ -51,7 +51,7 @@ public class FileManagePage extends NavBarPage implements ResourcePage.Tab { @FindBy(className = "btn-create-file") private WebElement buttonCreateFile; - @FindBy(className = "btn-upload-file") + @FindBy(className = "btn-upload-resource") private WebElement buttonUploadFile; private final CreateDirectoryBox createDirectoryBox; diff --git a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/resource/UdfManagePage.java b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/resource/UdfManagePage.java index 092f407c46..ab50e25fae 100644 --- a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/resource/UdfManagePage.java +++ b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/resource/UdfManagePage.java @@ -40,7 +40,7 @@ public class UdfManagePage extends NavBarPage implements ResourcePage.Tab { @FindBy(className = "btn-create-directory") private WebElement buttonCreateDirectory; - @FindBy(className = "btn-upload-udf") + @FindBy(className = "btn-upload-resource") private WebElement buttonUploadUdf; @FindBy(className = "items") @@ -54,7 +54,7 @@ public class UdfManagePage extends NavBarPage implements ResourcePage.Tab { private final UploadFileBox uploadFileBox; - private final RenameDirectoryBox renameDirectoryBox; + private final RenameBox renameBox; private final CreateDirectoryBox createDirectoryBox; @@ -63,7 +63,7 @@ public class UdfManagePage extends NavBarPage implements ResourcePage.Tab { uploadFileBox = new UploadFileBox(); - renameDirectoryBox = new RenameDirectoryBox(); + renameBox = new RenameBox(); createDirectoryBox = new CreateDirectoryBox(); } @@ -106,15 +106,15 @@ public class UdfManagePage extends NavBarPage implements ResourcePage.Tab { udfList() .stream() .filter(it -> it.getText().contains(currentName)) - .flatMap(it -> it.findElements(By.className("btn-edit")).stream()) + .flatMap(it -> it.findElements(By.className("btn-rename")).stream()) .filter(WebElement::isDisplayed) .findFirst() .orElseThrow(() -> new RuntimeException("No rename button in udf manage list")) .click(); - renameDirectoryBox().inputName().clear(); - renameDirectoryBox().inputName().sendKeys(AfterName); - renameDirectoryBox().buttonSubmit().click(); + renameBox().inputName().clear(); + renameBox().inputName().sendKeys(AfterName); + renameBox().buttonSubmit().click(); return this; } @@ -135,20 +135,20 @@ public class UdfManagePage extends NavBarPage implements ResourcePage.Tab { } @Getter - public class RenameDirectoryBox { - RenameDirectoryBox() { + public class RenameBox { + RenameBox() { PageFactory.initElements(driver, this); } @FindBys({ - @FindBy(className = "input-directory-name"), - @FindBy(tagName = "input"), + @FindBy(className = "input-name"), + @FindBy(tagName = "input"), }) private WebElement inputName; @FindBys({ - @FindBy(className = "input-description"), - @FindBy(tagName = "textarea"), + @FindBy(className = "input-description"), + @FindBy(tagName = "textarea"), }) private WebElement inputDescription; diff --git a/dolphinscheduler-ui/src/locales/en_US/resource.ts b/dolphinscheduler-ui/src/locales/en_US/resource.ts index dbb9a0f4a4..ffbe9bb5e0 100644 --- a/dolphinscheduler-ui/src/locales/en_US/resource.ts +++ b/dolphinscheduler-ui/src/locales/en_US/resource.ts @@ -29,9 +29,11 @@ export default { file_name: 'File Name', description: 'Description', size: 'Size', + create_time: 'Create Time', update_time: 'Update Time', operation: 'Operation', edit: 'Edit', + reupload: 'ReUpload File', rename: 'Rename', download: 'Download', delete: 'Delete', @@ -55,33 +57,9 @@ export default { }, udf: { udf_resources: 'UDF resources', - create_folder: 'Create Folder', upload_udf_resources: 'Upload UDF Resources', udf_source_name: 'UDF Resource Name', user_name: 'Resource userName', - tenant_name: 'Resource tenantName', - whether_directory: 'Whether directory', - file_name: 'File Name', - file_size: 'File Size', - description: 'Description', - create_time: 'Create Time', - update_time: 'Update Time', - operation: 'Operation', - yes: 'Yes', - no: 'No', - edit: 'Edit', - rename: 'Rename', - download: 'Download', - delete: 'Delete', - delete_confirm: 'Delete?', - success: 'Success', - folder_name: 'Folder Name', - upload: 'Upload', - upload_files: 'Upload Files', - file_upload: 'File Upload', - enter_keyword_tips: 'Please enter keyword', - enter_name_tips: 'Please enter name', - enter_description_tips: 'Please enter description' }, function: { udf_function: 'UDF Function', diff --git a/dolphinscheduler-ui/src/locales/zh_CN/resource.ts b/dolphinscheduler-ui/src/locales/zh_CN/resource.ts index cc10612cf3..ac9dffa482 100644 --- a/dolphinscheduler-ui/src/locales/zh_CN/resource.ts +++ b/dolphinscheduler-ui/src/locales/zh_CN/resource.ts @@ -29,9 +29,11 @@ export default { file_name: '文件名称', description: '描述', size: '大小', + create_time: '创建时间', update_time: '更新时间', operation: '操作', edit: '编辑', + reupload: '重新上传文件', rename: '重命名', download: '下载', delete: '删除', @@ -55,32 +57,8 @@ export default { }, udf: { udf_resources: 'UDF资源', - create_folder: '创建文件夹', upload_udf_resources: '上传UDF资源', - udf_source_name: 'UDF资源名称', - user_name: '所属用户', - tenant_name: '所属租户', - whether_directory: '是否文件夹', - file_name: '文件名称', - file_size: '文件大小', - description: '描述', - create_time: '创建时间', - update_time: '更新时间', - operation: '操作', - yes: '是', - no: '否', - edit: '编辑', - download: '下载', - delete: '删除', - success: '成功', - folder_name: '文件夹名称', - upload: '上传', - upload_files: '上传文件', - file_upload: '文件上传', - delete_confirm: '确定删除吗?', - enter_keyword_tips: '请输入关键词', - enter_name_tips: '请输入名称', - enter_description_tips: '请输入描述' + udf_source_name: 'UDF资源名称' }, function: { udf_function: 'UDF函数', diff --git a/dolphinscheduler-ui/src/service/modules/resources/types.ts b/dolphinscheduler-ui/src/service/modules/resources/types.ts index 9df6386b09..35c12043c5 100644 --- a/dolphinscheduler-ui/src/service/modules/resources/types.ts +++ b/dolphinscheduler-ui/src/service/modules/resources/types.ts @@ -103,6 +103,7 @@ interface ResourceFile { fullName: string description: string size: number + createTime: string updateTime: string } diff --git a/dolphinscheduler-ui/src/views/resource/components/resource/create/index.tsx b/dolphinscheduler-ui/src/views/resource/components/resource/create/index.tsx new file mode 100644 index 0000000000..5203cc7565 --- /dev/null +++ b/dolphinscheduler-ui/src/views/resource/components/resource/create/index.tsx @@ -0,0 +1,138 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { defineComponent, getCurrentInstance, toRefs } from 'vue' +import { useRouter } from 'vue-router' +import { NForm, NFormItem, NInput, NSelect, NButton } from 'naive-ui' +import { useI18n } from 'vue-i18n' + +import Card from '@/components/card' +import MonacoEditor from '@/components/monaco-editor' +import { useCreate } from './use-create' +import { useForm } from './use-form' +import { fileTypeArr } from '@/common/common' + +import styles from '../index.module.scss' + +import type { Router } from 'vue-router' + +export default defineComponent({ + name: 'ResourceCreate', + setup() { + const router: Router = useRouter() + + const { state } = useForm() + const { handleCreateFile } = useCreate(state) + + const fileSuffixOptions = fileTypeArr.map((suffix) => ({ + key: suffix, + label: suffix, + value: suffix + })) + + const handleFile = () => { + handleCreateFile() + } + + const handleReturn = () => { + router.go(-1) + } + + const trim = getCurrentInstance()?.appContext.config.globalProperties.trim + + return { + fileSuffixOptions, + handleFile, + handleReturn, + ...toRefs(state), + trim + } + }, + render() { + const { t } = useI18n() + return ( + + + + + + + + + + + + +
+ +
+ +
+
+ + {t('resource.file.save')} + + + {t('resource.file.return')} + +
+
+ + + ) + } +}) diff --git a/dolphinscheduler-ui/src/views/resource/file/create/use-create.ts b/dolphinscheduler-ui/src/views/resource/components/resource/create/use-create.ts similarity index 100% rename from dolphinscheduler-ui/src/views/resource/file/create/use-create.ts rename to dolphinscheduler-ui/src/views/resource/components/resource/create/use-create.ts diff --git a/dolphinscheduler-ui/src/views/resource/file/create/use-form.ts b/dolphinscheduler-ui/src/views/resource/components/resource/create/use-form.ts similarity index 94% rename from dolphinscheduler-ui/src/views/resource/file/create/use-form.ts rename to dolphinscheduler-ui/src/views/resource/components/resource/create/use-form.ts index 48e63e0fa6..ed13587da7 100644 --- a/dolphinscheduler-ui/src/views/resource/file/create/use-form.ts +++ b/dolphinscheduler-ui/src/views/resource/components/resource/create/use-form.ts @@ -18,8 +18,9 @@ import { useI18n } from 'vue-i18n' import { reactive, ref, unref } from 'vue' import type { FormRules } from 'naive-ui' +import { ICreateFileDefaultValue } from "@/views/resource/components/resource/types"; -const defaultValue = () => ({ +const defaultValue: ICreateFileDefaultValue = () => ({ pid: -1, type: 'FILE', suffix: 'sh', diff --git a/dolphinscheduler-ui/src/views/resource/components/resource/edit/index.tsx b/dolphinscheduler-ui/src/views/resource/components/resource/edit/index.tsx new file mode 100644 index 0000000000..5f7d8c5dd6 --- /dev/null +++ b/dolphinscheduler-ui/src/views/resource/components/resource/edit/index.tsx @@ -0,0 +1,132 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { useRoute, useRouter } from 'vue-router' +import { defineComponent, toRefs, watch } from 'vue' +import { NButton, NForm, NFormItem, NSpace, NSpin } from 'naive-ui' +import { useI18n } from 'vue-i18n' +import { useForm } from './use-form' +import { useEdit } from './use-edit' +import Card from '@/components/card' +import MonacoEditor from '@/components/monaco-editor' +import styles from '../index.module.scss' + +export default defineComponent({ + name: 'ResourceEdit', + setup() { + const route = useRoute() + const router = useRouter() + + const componentName = route.name + // fullname is now the id of resources + const fullName = String(router.currentRoute.value.query.prefix || "") + const tenantCode = String(router.currentRoute.value.query.tenantCode || "") + + const { state } = useForm() + const { getResourceView, handleUpdateContent } = useEdit(state) + + const handleFileContent = () => { + state.fileForm.content = resourceViewRef.state.value.content + handleUpdateContent(fullName, tenantCode) + } + + const handleReturn = () => { + router.go(-1) + } + + const resourceViewRef = getResourceView(fullName, tenantCode) + watch( + () => resourceViewRef.state.value.content, + () => (state.fileForm.content = resourceViewRef.state.value.content) + ) + + return { + componentName, + resourceViewRef, + handleReturn, + handleFileContent, + ...toRefs(state) + } + }, + render() { + const { t } = useI18n() + return ( + + {this.resourceViewRef.isReady.value ? ( +
+

+ {this.resourceViewRef.state.value.alias} +

+ + + + + + + {t('resource.file.return')} + + {this.componentName === 'resource-file-edit' && ( + this.handleFileContent()} + class='btn-submit' + > + {t('resource.file.save')} + + )} + + +
+ ) : ( + + + + + + {t('resource.file.return')} + + + + + )} + + ) + } +}) \ No newline at end of file diff --git a/dolphinscheduler-ui/src/views/resource/file/edit/use-edit.ts b/dolphinscheduler-ui/src/views/resource/components/resource/edit/use-edit.ts similarity index 95% rename from dolphinscheduler-ui/src/views/resource/file/edit/use-edit.ts rename to dolphinscheduler-ui/src/views/resource/components/resource/edit/use-edit.ts index cb01b46895..122fda8d7b 100644 --- a/dolphinscheduler-ui/src/views/resource/file/edit/use-edit.ts +++ b/dolphinscheduler-ui/src/views/resource/components/resource/edit/use-edit.ts @@ -16,13 +16,10 @@ */ import { useI18n } from 'vue-i18n' -import { useRouter } from 'vue-router' import type { Router } from 'vue-router' +import { useRouter } from 'vue-router' import { useAsyncState } from '@vueuse/core' -import { - viewResource, - updateResourceContent -} from '@/service/modules/resources' +import { updateResourceContent, viewResource } from '@/service/modules/resources' export function useEdit(state: any) { const { t } = useI18n() diff --git a/dolphinscheduler-ui/src/views/resource/file/edit/use-form.ts b/dolphinscheduler-ui/src/views/resource/components/resource/edit/use-form.ts similarity index 100% rename from dolphinscheduler-ui/src/views/resource/file/edit/use-form.ts rename to dolphinscheduler-ui/src/views/resource/components/resource/edit/use-form.ts diff --git a/dolphinscheduler-ui/src/views/resource/file/folder/index.tsx b/dolphinscheduler-ui/src/views/resource/components/resource/folder/index.tsx similarity index 93% rename from dolphinscheduler-ui/src/views/resource/file/folder/index.tsx rename to dolphinscheduler-ui/src/views/resource/components/resource/folder/index.tsx index cb48569ba4..c7eb4d8792 100644 --- a/dolphinscheduler-ui/src/views/resource/file/folder/index.tsx +++ b/dolphinscheduler-ui/src/views/resource/components/resource/folder/index.tsx @@ -22,11 +22,16 @@ import Modal from '@/components/modal' import { noSpace } from '@/utils/trim' import { useForm } from './use-form' import { useFolder } from './use-folder' +import { ResourceType } from "@/views/resource/components/resource/types"; const props = { show: { type: Boolean as PropType, default: false + }, + resourceType: { + type: String as PropType, + default: undefined } } @@ -43,6 +48,7 @@ export default defineComponent({ } const handleFolder = () => { + state.folderForm.type = props.resourceType! handleCreateFolder(ctx.emit, hideModal, resetForm) } diff --git a/dolphinscheduler-ui/src/views/resource/file/folder/use-folder.ts b/dolphinscheduler-ui/src/views/resource/components/resource/folder/use-folder.ts similarity index 100% rename from dolphinscheduler-ui/src/views/resource/file/folder/use-folder.ts rename to dolphinscheduler-ui/src/views/resource/components/resource/folder/use-folder.ts diff --git a/dolphinscheduler-ui/src/views/resource/file/folder/use-form.ts b/dolphinscheduler-ui/src/views/resource/components/resource/folder/use-form.ts similarity index 91% rename from dolphinscheduler-ui/src/views/resource/file/folder/use-form.ts rename to dolphinscheduler-ui/src/views/resource/components/resource/folder/use-form.ts index 7e5173508f..63718e90fc 100644 --- a/dolphinscheduler-ui/src/views/resource/file/folder/use-form.ts +++ b/dolphinscheduler-ui/src/views/resource/components/resource/folder/use-form.ts @@ -18,10 +18,11 @@ import { reactive, ref, unref } from 'vue' import { useI18n } from 'vue-i18n' import type { FormRules } from 'naive-ui' +import { IFolderDefaultValue } from "@/views/resource/components/resource/types"; -const defaultValue = () => ({ +const defaultValue: IFolderDefaultValue = () => ({ pid: -1, - type: 'FILE', + type: undefined!, name: '', description: '', currentDir: '/' diff --git a/dolphinscheduler-ui/src/views/resource/file/index.module.scss b/dolphinscheduler-ui/src/views/resource/components/resource/index.module.scss similarity index 100% rename from dolphinscheduler-ui/src/views/resource/file/index.module.scss rename to dolphinscheduler-ui/src/views/resource/components/resource/index.module.scss diff --git a/dolphinscheduler-ui/src/views/resource/components/resource/index.tsx b/dolphinscheduler-ui/src/views/resource/components/resource/index.tsx new file mode 100644 index 0000000000..6b5e723ffb --- /dev/null +++ b/dolphinscheduler-ui/src/views/resource/components/resource/index.tsx @@ -0,0 +1,274 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { useRouter } from 'vue-router' +import { + defineComponent, + onMounted, + ref, + getCurrentInstance, + PropType, + toRefs +} from 'vue' +import { + NIcon, + NSpace, + NDataTable, + NButtonGroup, + NButton, + NPagination, + NBreadcrumb, + NBreadcrumbItem +} from 'naive-ui' +import { useI18n } from 'vue-i18n' +import { SearchOutlined } from '@vicons/antd' +import { useTable } from './table/use-table' +import { useFileStore } from '@/store/file/file' +import Card from '@/components/card' +import ResourceFolderModal from './folder' +import ResourceUploadModal from './upload' +import ResourceRenameModal from './rename' +import styles from './index.module.scss' +import type { Router } from 'vue-router' +import Search from "@/components/input-search" +import { ResourceType } from "@/views/resource/components/resource/types"; + + +const props = { + resourceType: { + type: String as PropType, + default: undefined + } +} + +export default defineComponent({ + name: 'ResourceList', + props, + setup(props) { + const router: Router = useRouter() + const fileStore = useFileStore() + const breadListRef = ref>() + + const { + variables, + columnsRef, + tableWidth, + requestData, + updateList, + handleCreateFile, + } = useTable() + + + variables.resourceType = props.resourceType + + const handleUpdatePage = (page: number) => { + variables.pagination.page = page + requestData() + } + + const handleUpdatePageSize = (pageSize: number) => { + variables.pagination.page = 1 + variables.pagination.pageSize = pageSize + requestData() + } + + const handleConditions = () => { + requestData() + } + + const handleCreateFolder = () => { + variables.folderShowRef = true + } + + const handleUploadFile = () => { + variables.isReupload = false + variables.uploadShowRef = true + } + + const handleRenameFile = () => { + variables.renameShowRef = true + } + + onMounted(() => { + fileStore.setCurrentDir(variables.fullName) + breadListRef.value = fileStore.getCurrentDir.replace(/\/+$/g, '') + .split('/').slice(2) as Array + requestData() + + }) + + const trim = getCurrentInstance()?.appContext.config.globalProperties.trim + + const handleBread = (index: number) => { + const breadName = variables.fullName.split('/').slice(0, index+3).join('/')+'/' + goBread(breadName) + } + + const goBread = (fullName: string) => { + const { resourceType, tenantCode } = variables + if (fullName === '') { + router.push({ name: resourceType === 'UDF' ? 'resource-manage' : 'file-manage' }) + } else { + router.push({ + name: resourceType === 'UDF' ? 'resource-sub-manage' : 'resource-file-subdirectory', + query: { prefix: fullName, tenantCode: tenantCode} + }) + } + } + + return { + breadListRef, + columnsRef, + tableWidth, + updateList, + handleConditions, + handleCreateFolder, + handleCreateFile, + handleUploadFile, + handleRenameFile, + handleUpdatePage, + handleUpdatePageSize, + handleBread, + trim, + ...toRefs(variables) + } + }, + render() { + const { t } = useI18n() + + const { + handleConditions, + handleCreateFolder, + handleCreateFile, + handleUploadFile, + columnsRef, + tableWidth, + } = this + const manageTitle = this.resourceType === 'UDF' + ? t('resource.udf.udf_resources') + : t('resource.file.file_manage') + + return ( + + + + + + {t('resource.file.create_folder')} + + {this.resourceType !== 'UDF' && + + {t('resource.file.create_file')} + + } + + {this.resourceType === 'UDF' + ? t('resource.udf.upload_udf_resources') + : t('resource.file.upload_files') + } + + + + + + + + + + + + + + {{ + header: () => ( + + {this.breadListRef?.map((item, index) => ( + + 0 && index === this.breadListRef!.length - 1} + onClick={() => this.handleBread(index)} + >{index === 0 ? manageTitle : item} + + + ))} + + ), + default: () => ( + + + + + + + ) + }} + + + + + + ) + } +}) \ No newline at end of file diff --git a/dolphinscheduler-ui/src/views/resource/file/rename/index.tsx b/dolphinscheduler-ui/src/views/resource/components/resource/rename/index.tsx similarity index 91% rename from dolphinscheduler-ui/src/views/resource/file/rename/index.tsx rename to dolphinscheduler-ui/src/views/resource/components/resource/rename/index.tsx index b9f4ec01c5..4866a8d743 100644 --- a/dolphinscheduler-ui/src/views/resource/file/rename/index.tsx +++ b/dolphinscheduler-ui/src/views/resource/components/resource/rename/index.tsx @@ -26,12 +26,17 @@ import { useI18n } from 'vue-i18n' import Modal from '@/components/modal' import { useForm } from './use-form' import { useRename } from './use-rename' +import type { ResourceType } from "@/views/resource/components/resource/types"; const props = { show: { type: Boolean as PropType, default: false }, + resourceType: { + type: String as PropType, + default: undefined + }, name: { type: String as PropType, default: '' @@ -47,7 +52,7 @@ const props = { userName: { type: String as PropType, default: '' - }, + } } export default defineComponent({ @@ -55,7 +60,7 @@ export default defineComponent({ props, emits: ['updateList', 'update:show'], setup(props, ctx) { - const { state, resetForm } = useForm(props.fullName, props.name, props.description, props.userName) + const { state, resetForm } = useForm(props.resourceType!,props.fullName, props.name, props.description, props.userName) const { handleRenameFile } = useRename(state) const hideModal = () => { ctx.emit('update:show', false) diff --git a/dolphinscheduler-ui/src/views/resource/file/rename/use-form.ts b/dolphinscheduler-ui/src/views/resource/components/resource/rename/use-form.ts similarity index 75% rename from dolphinscheduler-ui/src/views/resource/file/rename/use-form.ts rename to dolphinscheduler-ui/src/views/resource/components/resource/rename/use-form.ts index a849592c5c..a8dc6599d5 100644 --- a/dolphinscheduler-ui/src/views/resource/file/rename/use-form.ts +++ b/dolphinscheduler-ui/src/views/resource/components/resource/rename/use-form.ts @@ -18,25 +18,25 @@ import { reactive, ref, unref } from 'vue' import { useI18n } from 'vue-i18n' import type { FormRules } from 'naive-ui' +import { IRenameDefaultValue, ResourceType } from "@/views/resource/components/resource/types"; -const defaultValue = (fullName = '',name = '', description = '', user_name = '') => ({ - id: -1, +const defaultValue:IRenameDefaultValue = (type: ResourceType, fullName = '', name = '', description = '', user_name = '') => ({ fullName, name, - type: 'FILE', + type: type, description, user_name }) -export function useForm(fullName: string, name: string, description: string, user_name: string) { +export function useForm(resourceType: ResourceType, fullName: string, name: string, description: string, user_name: string) { const { t } = useI18n() const resetForm = () => { - state.renameForm = Object.assign(unref(state.renameForm), defaultValue()) + state.renameForm = Object.assign(unref(state.renameForm), defaultValue(resourceType)) } const state = reactive({ renameFormRef: ref(), - renameForm: defaultValue(fullName, name, description, user_name), + renameForm: defaultValue(resourceType,fullName, name, description, user_name), saving: false, rules: { name: { diff --git a/dolphinscheduler-ui/src/views/resource/file/rename/use-rename.ts b/dolphinscheduler-ui/src/views/resource/components/resource/rename/use-rename.ts similarity index 100% rename from dolphinscheduler-ui/src/views/resource/file/rename/use-rename.ts rename to dolphinscheduler-ui/src/views/resource/components/resource/rename/use-rename.ts diff --git a/dolphinscheduler-ui/src/views/resource/file/table/table-action.tsx b/dolphinscheduler-ui/src/views/resource/components/resource/table/table-action.tsx similarity index 79% rename from dolphinscheduler-ui/src/views/resource/file/table/table-action.tsx rename to dolphinscheduler-ui/src/views/resource/components/resource/table/table-action.tsx index ff4c5152d5..d1f2f4b20f 100644 --- a/dolphinscheduler-ui/src/views/resource/file/table/table-action.tsx +++ b/dolphinscheduler-ui/src/views/resource/components/resource/table/table-action.tsx @@ -23,11 +23,12 @@ import { DownloadOutlined, FormOutlined, EditOutlined, - InfoCircleFilled + InfoCircleFilled, + UploadOutlined } from '@vicons/antd' import _ from 'lodash' import { useI18n } from 'vue-i18n' -import { ResourceFileTableData, IRenameFile, IRtDisb } from '../types' +import { ResourceFileTableData, IRenameResource, IRtDisb, IReuploadResource } from '../types' import { fileTypeArr } from '@/common/common' import { downloadResource, deleteResource } from '@/service/modules/resources' import type { Router } from 'vue-router' @@ -50,7 +51,7 @@ const props = { export default defineComponent({ name: 'TableAction', props, - emits: ['updateList', 'renameResource'], + emits: ['updateList', 'reuploadResource', 'renameResource'], setup(props, { emit }) { const { t } = useI18n() const router: Router = useRouter() @@ -70,7 +71,11 @@ export default defineComponent({ deleteResource(fullNameObj).then(() => emit('updateList')) } - const handleRenameFile: IRenameFile = (name: string, description: string, fullName: string, user_name: string) => { + const handleReuploadFile: IReuploadResource = (name: string, description: string, fullName: string, user_name: string) => { + emit('reuploadResource', name, description, fullName, user_name) + } + + const handleRenameFile: IRenameResource = (name: string, description: string, fullName: string, user_name: string) => { emit('renameResource', name, description, fullName, user_name) } @@ -79,6 +84,7 @@ export default defineComponent({ rtDisb, handleEditFile, handleDeleteFile, + handleReuploadFile, handleRenameFile, ...props } @@ -87,6 +93,7 @@ export default defineComponent({ const { t } = useI18n() return ( + { this.row.type !== 'UDF' && {{ default: () => t('resource.file.edit'), @@ -110,6 +117,34 @@ export default defineComponent({ ) }} + } + + {{ + default: () => t('resource.file.reupload'), + trigger: () => ( + + this.handleReuploadFile( + this.row.name, + this.row.description, + this.row.fullName, + this.row.user_name + ) + } + disabled={!!this.row?.directory} + style={{ marginRight: '-5px' }} + circle + class='btn-reupload' + > + + + + + ) + }} + {{ default: () => t('resource.file.rename'), @@ -145,7 +180,7 @@ export default defineComponent({ { + if (item.directory) { + router.push({ + name: item.type === 'UDF' ? 'resource-sub-manage' : 'resource-file-subdirectory', + query: { prefix: item.fullName, tenantCode: item.user_name} + }) + } else if (item.type === 'FILE') { + router.push({ name: 'resource-file-list', query: {prefix: item.fullName, tenantCode: item.user_name}} ) + } +} + + +export function useTable() { + const { t } = useI18n() + const router: Router = useRouter() + + const variables = reactive({ + fullName: ref(String(router.currentRoute.value.query.prefix || "")), + tenantCode: ref(String(router.currentRoute.value.query.tenantCode || "")), + resourceType: ref(), + resourceList: ref(), + folderShowRef: ref(false), + uploadShowRef: ref(false), + isReupload: ref(false), + renameShowRef: ref(false), + searchRef: ref(), + renameInfo: ref({ + name: '', + description: '', + fullName: '', + user_name: '' + }), + reuploadInfo: ref({ + name: '', + description: '', + fullName: '', + user_name: '' + }), + pagination: ref({ + page: 1, + pageSize: 10, + itemCount: 0, + pageSizes: [10, 30, 50] + + }) + }) + + const columnsRef: TableColumns = [ + { + title: '#', + key: 'id', + ...COLUMN_WIDTH_CONFIG['index'], + render: (_row, index) => index + 1 + }, + { + title: t('resource.file.name'), + key: 'name', + ...COLUMN_WIDTH_CONFIG['linkName'], + render: (row) => { + return !row.directory + ? row.alias + : h( + ButtonLink, + { + onClick: () => goSubFolder(router, row) + }, + { + default: () => + h( + NEllipsis, + COLUMN_WIDTH_CONFIG['linkEllipsis'], + () => row.alias + ) + } + ) + } + }, + { + title: t('resource.file.tenant_name'), + ...COLUMN_WIDTH_CONFIG['userName'], + key: 'user_name' + }, + { + title: t('resource.file.whether_directory'), + key: 'whether_directory', + ...COLUMN_WIDTH_CONFIG['yesOrNo'], + render: (row) => + row.directory ? t('resource.file.yes') : t('resource.file.no') + }, + { + title: t('resource.file.file_name'), + ...COLUMN_WIDTH_CONFIG['name'], + key: 'file_name' + }, + { + title: t('resource.file.description'), + ...COLUMN_WIDTH_CONFIG['note'], + key: 'description' + }, + { + title: t('resource.file.size'), + key: 'size', + ...COLUMN_WIDTH_CONFIG['size'], + render: (row) => bytesToSize(row.size) + }, + { + title: t('resource.file.create_time'), + ...COLUMN_WIDTH_CONFIG['time'], + key: 'create_time' + }, + { + title: t('resource.file.update_time'), + ...COLUMN_WIDTH_CONFIG['time'], + key: 'update_time' + }, + { + title: t('resource.file.operation'), + key: 'operation', + render: (row) => + h(TableAction, { + row, + onReuploadResource: ( name, description, fullName, user_name ) => + reuploadResource( name, description, fullName, user_name ), + onRenameResource: ( name, description, fullName, user_name ) => + renameResource( name, description, fullName, user_name ), + onUpdateList: () => updateList() + }), + ...COLUMN_WIDTH_CONFIG['operation'](variables.resourceType === 'UDF' ? 4 : 5) + } + ] + + const createFile = () => { + const { fullName } = variables + const name = fullName + ? 'resource-subfile-create' + : 'resource-file-create' + router.push({ + name, + params: { id: fullName} + }) + } + + const reuploadResource: IReuploadResource = ( name, description, fullName, user_name ) => { + variables.reuploadInfo = { + name: name, + description: description, + fullName: fullName, + user_name:user_name + } + variables.isReupload = true + variables.uploadShowRef = true + } + + const renameResource: IRenameResource = ( name, description, fullName, user_name ) => { + variables.renameInfo = { + name: name, + description: description, + fullName: fullName, + user_name:user_name + } + variables.renameShowRef = true + } + + const setPagination = (count: number) => { + variables.pagination.itemCount = count + } + + const { getResourceListState } = useFileState(setPagination) + + const requestData = () => { + variables.resourceList = getResourceListState( + variables.resourceType!, + variables.fullName, + variables.tenantCode, + variables.searchRef, + variables.pagination.page, + variables.pagination.pageSize + ) + } + + + const updateList = () => { + variables.pagination.page = 1 + requestData() + } + + return { + variables, + columnsRef, + tableWidth: calculateTableWidth(columnsRef) || DefaultTableWidth, + requestData, + updateList, + handleCreateFile: createFile, + } +} diff --git a/dolphinscheduler-ui/src/views/resource/file/types.ts b/dolphinscheduler-ui/src/views/resource/components/resource/types.ts similarity index 58% rename from dolphinscheduler-ui/src/views/resource/file/types.ts rename to dolphinscheduler-ui/src/views/resource/components/resource/types.ts index e73ac607f8..b6661ec980 100644 --- a/dolphinscheduler-ui/src/views/resource/file/types.ts +++ b/dolphinscheduler-ui/src/views/resource/components/resource/types.ts @@ -15,6 +15,8 @@ * limitations under the License. */ +export type ResourceType = 'FILE' | 'UDF' + export interface ResourceFileTableData { name: string fullName: string @@ -23,6 +25,7 @@ export interface ResourceFileTableData { file_name: string description: string size: number + type: ResourceType update_time: string } @@ -30,15 +33,20 @@ export interface IEmit { (event: any, ...args: any[]): void } -export interface IRenameFile { +export interface IReuploadResource { + (name: string, description: string, fullName: string, user_name: string): void +} + +export interface IRenameResource { (name: string, description: string, fullName: string, user_name: string): void } + export interface IRtDisb { (name: string, size: number): boolean } export interface IResourceListState { - (searchVal?: string, fullName?: string, tenantCode?: string, pageNo?: number, pageSize?: number): any + (type: ResourceType, searchVal?: string, fullName?: string, tenantCode?: string, pageNo?: number, pageSize?: number): any } export interface BasicTableProps { @@ -70,3 +78,51 @@ export interface BreadcrumbItem { fullName: string userName: string } + +export interface ICreateFileDefaultValue { + (): { + pid: number, + type: ResourceType, + suffix: string, + fileName: string, + description: string, + content: string, + currentDir: string + } +} + +export interface IFolderDefaultValue { + (): + { + pid: number, + type: ResourceType, + name: string, + description: string, + currentDir: string + } +} + +export interface IRenameDefaultValue { + ( + type: ResourceType, + fullName?: string, + name?: string, + description?: string, + user_name?: string + ): {fullName: string, name: string, type: ResourceType, description: string, user_name: string} +} + +export interface IUploadDefaultValue { + (): + { + isReupload: boolean, + fullName: string, + user_name: string, + name: string, + file: string, + description: string, + type: ResourceType, + pid: number, + currentDir: string + } +} \ No newline at end of file diff --git a/dolphinscheduler-ui/src/views/resource/file/upload/index.tsx b/dolphinscheduler-ui/src/views/resource/components/resource/upload/index.tsx similarity index 77% rename from dolphinscheduler-ui/src/views/resource/file/upload/index.tsx rename to dolphinscheduler-ui/src/views/resource/components/resource/upload/index.tsx index 9326e379a8..3639c417ee 100644 --- a/dolphinscheduler-ui/src/views/resource/file/upload/index.tsx +++ b/dolphinscheduler-ui/src/views/resource/components/resource/upload/index.tsx @@ -14,18 +14,43 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { defineComponent, toRefs, PropType, getCurrentInstance } from 'vue' +import { defineComponent, toRefs, PropType, getCurrentInstance, watch } from 'vue' import { NButton, NForm, NFormItem, NInput, NUpload } from 'naive-ui' import { useI18n } from 'vue-i18n' import Modal from '@/components/modal' import { useForm } from './use-form' import { useUpload } from './use-upload' +import { ResourceType } from "@/views/resource/components/resource/types"; const props = { show: { type: Boolean as PropType, default: false + }, + resourceType: { + type: String as PropType, + default: undefined + }, + isReupload: { + type: Boolean as PropType, + default: false + }, + name: { + type: String as PropType, + default: '' + }, + description: { + type: String as PropType, + default: '' + }, + fullName: { + type: String as PropType, + default: '' + }, + userName: { + type: String as PropType, + default: '' } } @@ -59,6 +84,21 @@ export default defineComponent({ const trim = getCurrentInstance()?.appContext.config.globalProperties.trim + + watch( + () => props.show, + () => { + state.uploadForm.type = props.resourceType! + state.uploadForm.isReupload = props.isReupload + if (props.isReupload && props.show) { + state.uploadForm.fullName = props.fullName + state.uploadForm.name = props.name + state.uploadForm.description = props.description + state.uploadForm.user_name = props.userName + } + } + ) + return { hideModal, customRequest, diff --git a/dolphinscheduler-ui/src/views/resource/file/upload/use-form.ts b/dolphinscheduler-ui/src/views/resource/components/resource/upload/use-form.ts similarity index 89% rename from dolphinscheduler-ui/src/views/resource/file/upload/use-form.ts rename to dolphinscheduler-ui/src/views/resource/components/resource/upload/use-form.ts index 6dff47db32..4c47963e93 100644 --- a/dolphinscheduler-ui/src/views/resource/file/upload/use-form.ts +++ b/dolphinscheduler-ui/src/views/resource/components/resource/upload/use-form.ts @@ -18,11 +18,16 @@ import { reactive, ref, unref } from 'vue' import { useI18n } from 'vue-i18n' import type { FormRules } from 'naive-ui' +import { IUploadDefaultValue } from "@/views/resource/components/resource/types"; -const defaultValue = () => ({ +const defaultValue: IUploadDefaultValue = () => ({ + isReupload: false, + fullName: '', + user_name: '', name: '', file: '', description: '', + type: undefined!, pid: -1, currentDir: '/' }) diff --git a/dolphinscheduler-ui/src/views/resource/file/upload/use-upload.ts b/dolphinscheduler-ui/src/views/resource/components/resource/upload/use-upload.ts similarity index 71% rename from dolphinscheduler-ui/src/views/resource/file/upload/use-upload.ts rename to dolphinscheduler-ui/src/views/resource/components/resource/upload/use-upload.ts index e4f4e6dfb8..9635d92c06 100644 --- a/dolphinscheduler-ui/src/views/resource/file/upload/use-upload.ts +++ b/dolphinscheduler-ui/src/views/resource/components/resource/upload/use-upload.ts @@ -18,7 +18,7 @@ import { useI18n } from 'vue-i18n' import { IEmit } from '../types' import { useFileStore } from '@/store/file/file' -import { createResource } from '@/service/modules/resources' +import { createResource, updateResource } from '@/service/modules/resources' export function useUpload(state: any) { const { t } = useI18n() @@ -34,16 +34,24 @@ export function useUpload(state: any) { if (state.saving) return state.saving = true try { - // no more pid, as currentDir acts as the pid or parent path right now. - const currentDir = fileStore.getCurrentDir || '/' const formData = new FormData() formData.append('file', state.uploadForm.file) - formData.append('type', 'FILE') + formData.append('type', state.uploadForm.type) formData.append('name', state.uploadForm.name) - formData.append('currentDir', currentDir) formData.append('description', state.uploadForm.description) - await createResource(formData as any) + if (state.uploadForm.isReupload) { + formData.append('user_name', state.uploadForm.user_name) + formData.append('fullName', state.uploadForm.fullName) + formData.append('tenantCode', state.uploadForm.user_name) + await updateResource(formData as any) + } else { + // no more pid, as currentDir acts as the pid or parent path right now. + const currentDir = fileStore.getCurrentDir || '/' + formData.append('currentDir', currentDir) + await createResource(formData as any) + } + window.$message.success(t('resource.file.success')) state.saving = false emit('updateList') diff --git a/dolphinscheduler-ui/src/views/resource/file/use-file.ts b/dolphinscheduler-ui/src/views/resource/components/resource/use-file.ts similarity index 93% rename from dolphinscheduler-ui/src/views/resource/file/use-file.ts rename to dolphinscheduler-ui/src/views/resource/components/resource/use-file.ts index 160a54057b..9a1b7a918f 100644 --- a/dolphinscheduler-ui/src/views/resource/file/use-file.ts +++ b/dolphinscheduler-ui/src/views/resource/components/resource/use-file.ts @@ -21,12 +21,13 @@ import { viewResource } from '@/service/modules/resources' import type { ResourceListRes } from '@/service/modules/resources/types' -import { IResourceListState, ISetPagination } from './types' +import { IResourceListState, ISetPagination, ResourceType } from './types' export function useFileState( setPagination: ISetPagination = {} as ISetPagination ) { const getResourceListState: IResourceListState = ( + type: ResourceType, fullName = '', tenantCode = '', searchVal = '', @@ -37,7 +38,7 @@ export function useFileState( queryResourceListPaging({ fullName, tenantCode, - type: 'FILE', + type: type, searchVal, pageNo, pageSize @@ -56,6 +57,7 @@ export function useFileState( file_name: item.fileName, description: item.description, size: item.size, + create_time: item.createTime, update_time: item.updateTime } }) diff --git a/dolphinscheduler-ui/src/views/resource/file/create/index.tsx b/dolphinscheduler-ui/src/views/resource/file/create/index.tsx index 10dacd3ec6..1c07e9b07a 100644 --- a/dolphinscheduler-ui/src/views/resource/file/create/index.tsx +++ b/dolphinscheduler-ui/src/views/resource/file/create/index.tsx @@ -15,124 +15,14 @@ * limitations under the License. */ -import { defineComponent, getCurrentInstance, toRefs } from 'vue' -import { useRouter } from 'vue-router' -import { NForm, NFormItem, NInput, NSelect, NButton } from 'naive-ui' -import { useI18n } from 'vue-i18n' - -import Card from '@/components/card' -import MonacoEditor from '@/components/monaco-editor' -import { useCreate } from './use-create' -import { useForm } from './use-form' -import { fileTypeArr } from '@/common/common' - -import styles from '../index.module.scss' - -import type { Router } from 'vue-router' +import { defineComponent } from 'vue' +import ResourceCreateModal from '../../components/resource/create' export default defineComponent({ name: 'ResourceFileCreate', setup() { - const router: Router = useRouter() - - const { state } = useForm() - const { handleCreateFile } = useCreate(state) - - const fileSuffixOptions = fileTypeArr.map((suffix) => ({ - key: suffix, - label: suffix, - value: suffix - })) - - const handleFile = () => { - handleCreateFile() - } - - const handleReturn = () => { - router.go(-1) - } - - const trim = getCurrentInstance()?.appContext.config.globalProperties.trim - - return { - fileSuffixOptions, - handleFile, - handleReturn, - ...toRefs(state), - trim - } }, render() { - const { t } = useI18n() - return ( - - - - - - - - - - - - -
- -
- -
-
- - {t('resource.file.save')} - - - {t('resource.file.return')} - -
-
- - - ) + return } -}) +}) \ No newline at end of file diff --git a/dolphinscheduler-ui/src/views/resource/file/edit/index.tsx b/dolphinscheduler-ui/src/views/resource/file/edit/index.tsx index 9a414f647b..d78e7d1c71 100644 --- a/dolphinscheduler-ui/src/views/resource/file/edit/index.tsx +++ b/dolphinscheduler-ui/src/views/resource/file/edit/index.tsx @@ -15,118 +15,14 @@ * limitations under the License. */ -import { useRoute, useRouter } from 'vue-router' -import { defineComponent, toRefs, watch } from 'vue' -import { NButton, NForm, NFormItem, NSpace, NSpin } from 'naive-ui' -import { useI18n } from 'vue-i18n' -import { useForm } from './use-form' -import { useEdit } from './use-edit' -import Card from '@/components/card' -import MonacoEditor from '@/components/monaco-editor' -import styles from '../index.module.scss' +import { defineComponent } from 'vue' +import ResourceEditModal from '../../components/resource/edit' export default defineComponent({ name: 'ResourceFileEdit', setup() { - const route = useRoute() - const router = useRouter() - - const componentName = route.name - // fullname is now the id of resources - const fullName = String(router.currentRoute.value.query.prefix || "") - const tenantCode = String(router.currentRoute.value.query.tenantCode || "") - - const { state } = useForm() - const { getResourceView, handleUpdateContent } = useEdit(state) - - const handleFileContent = () => { - state.fileForm.content = resourceViewRef.state.value.content - handleUpdateContent(fullName, tenantCode) - } - - const handleReturn = () => { - router.go(-1) - } - - const resourceViewRef = getResourceView(fullName, tenantCode) - watch( - () => resourceViewRef.state.value.content, - () => (state.fileForm.content = resourceViewRef.state.value.content) - ) - - return { - componentName, - resourceViewRef, - handleReturn, - handleFileContent, - ...toRefs(state) - } }, render() { - const { t } = useI18n() - return ( - - {this.resourceViewRef.isReady.value ? ( -
-

- {this.resourceViewRef.state.value.alias} -

- - - - - - - {t('resource.file.return')} - - {this.componentName === 'resource-file-edit' && ( - this.handleFileContent()} - class='btn-submit' - > - {t('resource.file.save')} - - )} - - -
- ) : ( - - - - - - {t('resource.file.return')} - - - - - )} - - ) + return } -}) +}) \ No newline at end of file diff --git a/dolphinscheduler-ui/src/views/resource/file/index.tsx b/dolphinscheduler-ui/src/views/resource/file/index.tsx index d154fe258c..301a7cac9a 100644 --- a/dolphinscheduler-ui/src/views/resource/file/index.tsx +++ b/dolphinscheduler-ui/src/views/resource/file/index.tsx @@ -15,355 +15,16 @@ * limitations under the License. */ -import { useRouter } from 'vue-router' -import { - defineComponent, - onMounted, - ref, - reactive, - Ref, - getCurrentInstance -} from 'vue' -import { - NIcon, - NSpace, - NDataTable, - NButtonGroup, - NButton, - NPagination, - NBreadcrumb, - NBreadcrumbItem -} from 'naive-ui' -import { useI18n } from 'vue-i18n' -import { SearchOutlined } from '@vicons/antd' -import { useTable } from './table/use-table' -import { useFileState } from './use-file' -import { BreadcrumbItem, IRenameFile } from './types' -import { useFileStore } from '@/store/file/file' -import { - queryCurrentResourceByFullName, - queryCurrentResourceByFileName -} from '@/service/modules/resources' -import Card from '@/components/card' -import ResourceFolderModal from './folder' -import ResourceUploadModal from './upload' -import ResourceRenameModal from './rename' -import styles from './index.module.scss' -import type { ResourceFile } from '@/service/modules/resources/types' -import type { Router } from 'vue-router' -import Search from "@/components/input-search"; +import { defineComponent } from 'vue' +import ResourceListModal from '../components/resource' export default defineComponent({ name: 'File', setup() { - const router: Router = useRouter() - const fullName = ref(String(router.currentRoute.value.query.prefix || "")) - const tenantCode = ref(String(router.currentRoute.value.query.tenantCode || "")) - const resourceListRef = ref() - const folderShowRef = ref(false) - const uploadShowRef = ref(false) - const renameShowRef = ref(false) - const searchRef = ref() - - const renameInfo = reactive({ - name: '', - description: '', - fullName: '', - user_name: '' - }) - - const paginationReactive = reactive({ - page: 1, - pageSize: 10, - itemCount: 0, - pageSizes: [10, 30, 50] - }) - - const handleUpdatePage = (page: number) => { - paginationReactive.page = page - resourceListRef.value = getResourceListState( - fullName.value, - tenantCode.value, - searchRef.value, - paginationReactive.page, - paginationReactive.pageSize - ) - } - - const handleUpdatePageSize = (pageSize: number) => { - paginationReactive.page = 1 - paginationReactive.pageSize = pageSize - resourceListRef.value = getResourceListState( - fullName.value, - tenantCode.value, - searchRef.value, - paginationReactive.page, - paginationReactive.pageSize - ) - } - - const handleShowModal = (showRef: Ref) => { - showRef.value = true - } - - const setPagination = (count: number) => { - paginationReactive.itemCount = count - } - - const { getResourceListState } = useFileState(setPagination) - - const handleConditions = () => { - resourceListRef.value = getResourceListState( - fullName.value, - tenantCode.value, - searchRef.value - ) - } - - const handleCreateFolder = () => { - handleShowModal(folderShowRef) - } - - const handleCreateFile = () => { - const name = fullName.value - ? 'resource-subfile-create' - : 'resource-file-create' - router.push({ - name, - params: { id: fullName.value } - }) - } - - const handleUploadFile = () => { - handleShowModal(uploadShowRef) - } - - const handleRenameFile: IRenameFile = (name: string, description: string, fullName: string, user_name: string) => { - renameInfo.fullName = fullName - renameInfo.name = name - renameInfo.description = description - renameInfo.user_name = user_name - handleShowModal(renameShowRef) - } - - const handleGoRoot = () => { - router.push({ - name: 'file-manage' - }) - } - - const updateList = () => { - resourceListRef.value = getResourceListState( - fullName.value, - tenantCode.value, - searchRef.value - ) - } - const fileStore = useFileStore() - - onMounted(() => { - resourceListRef.value = getResourceListState(fullName.value, tenantCode.value,searchRef.value) - }) - - const breadcrumbItemsRef: Ref | undefined> = ref([ - { - id: 1, - fullName: 'l1', - userName: 'u1' - }, - { - id: 2, - fullName: 'l2', - userName: 'u2' - }, - { - id: 4, - fullName: 'l3', - userName: 'u3' - } - ]) - - const trim = getCurrentInstance()?.appContext.config.globalProperties.trim - - onMounted(() => { - const currfullName = String(router.currentRoute.value.query.prefix || "") - if (currfullName === "") { - fileStore.setCurrentDir('/') - } else { - fileStore.setCurrentDir(currfullName) - } - }) - - const initBreadcrumb = async (dirs: string[]) => { - for (let index = 0; index < dirs.length; index ++) { - const newDir = dirs.slice(0, index + 1).join('/') - const resource = await queryCurrentResourceByFileName( - { - type: 'FILE', - fileName: newDir+"/", - tenantCode: tenantCode.value - } - ) - breadcrumbItemsRef.value?.push({ id: resource.fullName, fullName: resource.alias, userName: resource.userName }) - } - } - - onMounted(() => { - breadcrumbItemsRef.value = [] - if (fullName.value != "") { - breadcrumbItemsRef.value?.push({ id: 0, fullName: 'Root', userName: '' }) - queryCurrentResourceByFullName( - { - type: 'FILE', - fullName: fullName.value, - tenantCode: tenantCode.value, - } - ).then((res: ResourceFile) => { - if (res.fileName) { - const dirs = res.fileName.split('/') - if (dirs && dirs.length > 1) { - dirs.pop() - initBreadcrumb(dirs) - } - } - }) - } - }) - - return { - fullName, - searchRef, - folderShowRef, - uploadShowRef, - renameShowRef, - handleShowModal, - resourceListRef, - updateList, - handleConditions, - handleCreateFolder, - handleCreateFile, - handleUploadFile, - handleRenameFile, - handleUpdatePage, - handleUpdatePageSize, - handleGoRoot, - pagination: paginationReactive, - renameInfo, - breadcrumbItemsRef, - trim - } }, render() { - const { t } = useI18n() - const { columnsRef, tableWidth } = useTable( - this.handleRenameFile, - this.updateList - ) - const { - handleConditions, - handleCreateFolder, - handleCreateFile, - handleUploadFile - } = this - - return ( - - - - - - {t('resource.file.create_folder')} - - - {t('resource.file.create_file')} - - - {t('resource.file.upload_files')} - - - - - - - - - - - - - - {{ - 'header-extra': () => ( - - {this.breadcrumbItemsRef?.map((item: BreadcrumbItem) => { - if (item.id === 0) { - return ( - - {item.fullName} - - ) - } else { - return ( - { - const fileStore = useFileStore() - fileStore.setFileInfo(`${item.alias}|${item.size}`) - if (item.directory) { - fileStore.setCurrentDir(`${item.fullName}`) - router.push({ name: 'resource-file-subdirectory', query: { prefix: item.fullName, tenantCode: item.user_name}}) - } else { - router.push({ name: 'resource-file-list', query: {prefix: item.fullName, tenantCode: item.user_name} }) - } -} - -export function useTable(renameResource: IRenameFile, updateList: () => void) { - const { t } = useI18n() - const router: Router = useRouter() - - const columnsRef: TableColumns = [ - { - title: '#', - key: 'id', - ...COLUMN_WIDTH_CONFIG['index'], - render: (_row, index) => index + 1 - }, - { - title: t('resource.file.name'), - key: 'name', - ...COLUMN_WIDTH_CONFIG['linkName'], - render: (row) => - h( - ButtonLink, - { - onClick: () => void goSubFolder(router, row) - }, - { - default: () => - h(NEllipsis, COLUMN_WIDTH_CONFIG['linkEllipsis'], () => row.name) - } - ) - }, - { - title: t('resource.file.tenant_name'), - ...COLUMN_WIDTH_CONFIG['userName'], - key: 'user_name' - }, - { - title: t('resource.file.whether_directory'), - key: 'whether_directory', - ...COLUMN_WIDTH_CONFIG['yesOrNo'], - render: (row) => - row.directory ? t('resource.file.yes') : t('resource.file.no') - }, - { - title: t('resource.file.file_name'), - ...COLUMN_WIDTH_CONFIG['name'], - key: 'fullName' - }, - { - title: t('resource.file.size'), - key: 'size', - ...COLUMN_WIDTH_CONFIG['size'], - render: (row) => bytesToSize(row.size) - }, - { - title: t('resource.file.update_time'), - ...COLUMN_WIDTH_CONFIG['time'], - key: 'update_time' - }, - { - title: t('resource.file.operation'), - key: 'operation', - render: (row) => - h(TableAction, { - row, - onRenameResource: ( name, description, fullName, user_name ) => { - renameResource(name, description, fullName, user_name) - }, - onUpdateList: () => updateList() - }), - ...COLUMN_WIDTH_CONFIG['operation'](4) - } - ] - - return { - columnsRef, - tableWidth: calculateTableWidth(columnsRef) || DefaultTableWidth - } -} diff --git a/dolphinscheduler-ui/src/views/resource/udf/function/components/function-modal.tsx b/dolphinscheduler-ui/src/views/resource/udf/function/components/function-modal.tsx index d37a4e4c9b..f54cb1f82f 100644 --- a/dolphinscheduler-ui/src/views/resource/udf/function/components/function-modal.tsx +++ b/dolphinscheduler-ui/src/views/resource/udf/function/components/function-modal.tsx @@ -189,7 +189,7 @@ export default defineComponent({ disabled={this.uploadShow} showPath={false} class='btn-udf-resource-dropdown' - > + /> + /> {t('resource.function.upload')} - + diff --git a/dolphinscheduler-ui/src/views/resource/udf/function/components/use-modal.ts b/dolphinscheduler-ui/src/views/resource/udf/function/components/use-modal.ts index c3a52a6d8e..db58d62b05 100644 --- a/dolphinscheduler-ui/src/views/resource/udf/function/components/use-modal.ts +++ b/dolphinscheduler-ui/src/views/resource/udf/function/components/use-modal.ts @@ -64,7 +64,7 @@ export function useModal( try { await serviceHandle() - window.$message.success(t('resource.udf.success')) + window.$message.success(t('resource.function.success')) state.saving = false ctx.emit('updateList') ctx.emit('update:show') diff --git a/dolphinscheduler-ui/src/views/resource/udf/resource/components/folder-modal.tsx b/dolphinscheduler-ui/src/views/resource/udf/resource/components/folder-modal.tsx deleted file mode 100644 index a116ef970f..0000000000 --- a/dolphinscheduler-ui/src/views/resource/udf/resource/components/folder-modal.tsx +++ /dev/null @@ -1,130 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - defineComponent, - toRefs, - PropType, - watch, - computed, - getCurrentInstance -} from 'vue' -import { NForm, NFormItem, NInput } from 'naive-ui' -import { useI18n } from 'vue-i18n' -import Modal from '@/components/modal' -import { noSpace } from '@/utils/trim' -import { useForm } from './use-form' -import { useModal } from './use-modal' -import type { IUdf } from '../types' - -const props = { - row: { - type: Object as PropType, - default: {} - }, - show: { - type: Boolean as PropType, - default: false - } -} - -export default defineComponent({ - name: 'ResourceFileFolder', - props, - emits: ['update:show', 'updateList'], - setup(props, ctx) { - const { folderState: state } = useForm() - - const { handleCreateResource, handleRenameResource } = useModal(state, ctx) - - const hideModal = () => { - ctx.emit('update:show') - } - - const handleCreate = () => { - handleCreateResource() - } - - const handleRename = () => { - handleRenameResource(props.row.fullName) - } - - const trim = getCurrentInstance()?.appContext.config.globalProperties.trim - - watch( - () => props.row, - () => { - state.folderForm.name = props.row.alias - state.folderForm.description = props.row.description - } - ) - const fileEdit = computed(() => props.row.fullName && !props.row.directory) - - return { - fileEdit, - hideModal, - handleCreate, - handleRename, - ...toRefs(state), - trim - } - }, - render() { - const { t } = useI18n() - - return ( - - - - - - - - - - - ) - } -}) diff --git a/dolphinscheduler-ui/src/views/resource/udf/resource/components/upload-modal.tsx b/dolphinscheduler-ui/src/views/resource/udf/resource/components/upload-modal.tsx deleted file mode 100644 index ca52b4c593..0000000000 --- a/dolphinscheduler-ui/src/views/resource/udf/resource/components/upload-modal.tsx +++ /dev/null @@ -1,124 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { defineComponent, toRefs, PropType, getCurrentInstance } from 'vue' -import { NForm, NFormItem, NInput, NUpload, NButton, NIcon } from 'naive-ui' -import { useI18n } from 'vue-i18n' -import Modal from '@/components/modal' -import { useForm } from './use-form' -import { useModal } from './use-modal' -import { CloudUploadOutlined } from '@vicons/antd' - -const props = { - show: { - type: Boolean as PropType, - default: false - } -} - -export default defineComponent({ - name: 'ResourceFileFolder', - props, - emits: ['update:show', 'updateList'], - setup(props, ctx) { - const { uploadState: state } = useForm() - const { handleUploadFile } = useModal(state, ctx) - - const hideModal = () => { - state.uploadForm.name = '' - state.uploadForm.description = '' - state.uploadForm.file = '' - ctx.emit('update:show') - } - - const handleFolder = () => { - handleUploadFile() - } - - const customRequest = ({ file }: any) => { - state.uploadForm.name = file.name - state.uploadForm.file = file.file - state.uploadFormRef.validate() - } - - const removeFile = () => { - state.uploadForm.name = '' - state.uploadForm.file = '' - } - - const trim = getCurrentInstance()?.appContext.config.globalProperties.trim - - return { - hideModal, - handleFolder, - customRequest, - removeFile, - ...toRefs(state), - trim - } - }, - render() { - const { t } = useI18n() - return ( - - - - - - - - - - - - {t('resource.udf.upload')} - - - - - - - - - ) - } -}) diff --git a/dolphinscheduler-ui/src/views/resource/udf/resource/components/use-form.ts b/dolphinscheduler-ui/src/views/resource/udf/resource/components/use-form.ts deleted file mode 100644 index af474132c7..0000000000 --- a/dolphinscheduler-ui/src/views/resource/udf/resource/components/use-form.ts +++ /dev/null @@ -1,84 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { reactive, ref } from 'vue' -import { useI18n } from 'vue-i18n' -import type { FormRules } from 'naive-ui' - -export const useForm = () => { - const { t } = useI18n() - - const folderState = reactive({ - folderFormRef: ref(), - folderForm: { - pid: -1, - type: 'UDF', - name: '', - description: '', - currentDir: '/' - }, - saving: false, - rules: { - name: { - required: true, - trigger: ['input', 'blur'], - validator() { - if (folderState.folderForm.name === '') { - return new Error(t('resource.udf.enter_name_tips')) - } - } - } - } as FormRules - }) - - const uploadState = reactive({ - uploadFormRef: ref(), - uploadForm: { - name: '', - file: '', - description: '', - pid: -1, - currentDir: '/' - }, - saving: false, - rules: { - name: { - required: true, - trigger: ['input', 'blur'], - validator() { - if (uploadState.uploadForm.name === '') { - return new Error(t('resource.udf.enter_name_tips')) - } - } - }, - file: { - required: true, - trigger: ['input', 'blur'], - validator() { - if (uploadState.uploadForm.file === '') { - return new Error(t('resource.file.enter_content_tips')) - } - } - } - } as FormRules - }) - - return { - folderState, - uploadState - } -} diff --git a/dolphinscheduler-ui/src/views/resource/udf/resource/components/use-modal.ts b/dolphinscheduler-ui/src/views/resource/udf/resource/components/use-modal.ts deleted file mode 100644 index f8df1e474e..0000000000 --- a/dolphinscheduler-ui/src/views/resource/udf/resource/components/use-modal.ts +++ /dev/null @@ -1,117 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { SetupContext } from 'vue' -import { useI18n } from 'vue-i18n' -import { useRouter } from 'vue-router' -import type { Router } from 'vue-router' -import { useFileStore } from '@/store/file/file' -import { - createDirectory, - createResource, - updateResource -} from '@/service/modules/resources' - -export function useModal( - state: any, - ctx: SetupContext<('update:show' | 'updateList')[]> -) { - const { t } = useI18n() - const router: Router = useRouter() - const fileStore = useFileStore() - - const handleCreateResource = async () => { - const pid = router.currentRoute.value.params.id || -1 - const currentFullName = String(router.currentRoute.value.query.prefix || "") - const currentDir = currentFullName == "" ? '/' : fileStore.getCurrentDir || '/' - submitRequest( - async () => - await createDirectory({ - ...state.folderForm, - ...{ pid, currentDir } - }) - ) - } - - const handleRenameResource = async (fullName: string) => { - submitRequest(async () => { - await updateResource( - { - fullName: fullName, - ...state.folderForm, - } - ) - }) - } - - const submitRequest = async (serviceHandle: any) => { - await state.folderFormRef.validate() - if (state.saving) return - state.saving = true - - try { - await serviceHandle() - window.$message.success(t('resource.udf.success')) - state.saving = false - ctx.emit('updateList') - ctx.emit('update:show') - } catch (err) { - state.saving = false - } - } - - const resetUploadForm = () => { - state.uploadForm.name = '' - state.uploadForm.file = '' - state.uploadForm.description = '' - } - - const handleUploadFile = async () => { - await state.uploadFormRef.validate() - - if (state.saving) return - state.saving = true - - try { - const pid = Number(router.currentRoute.value.params.id) || "-1" - const currentFullName = String(router.currentRoute.value.query.prefix || "") - const currentDir = currentFullName == "" ? '/' : fileStore.getCurrentDir || '/' - - const formData = new FormData() - formData.append('file', state.uploadForm.file) - formData.append('type', 'UDF') - formData.append('name', state.uploadForm.name) - formData.append('pid', String(pid)) - formData.append('currentDir', currentDir) - formData.append('description', state.uploadForm.description) - - await createResource(formData as any) - window.$message.success(t('resource.udf.success')) - ctx.emit('updateList') - ctx.emit('update:show') - resetUploadForm() - } finally { - state.saving = false - } - } - - return { - handleCreateResource, - handleRenameResource, - handleUploadFile - } -} diff --git a/dolphinscheduler-ui/src/views/resource/udf/resource/index.module.scss b/dolphinscheduler-ui/src/views/resource/udf/resource/index.module.scss deleted file mode 100644 index f717654df8..0000000000 --- a/dolphinscheduler-ui/src/views/resource/udf/resource/index.module.scss +++ /dev/null @@ -1,43 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -.table { - table { - width: 100%; - tr { - height: 40px; - font-size: 12px; - th, - td { - &:nth-child(1) { - width: 50px; - text-align: center; - } - } - th { - &:nth-child(1) { - width: 60px; - text-align: center; - } - > span { - font-size: 12px; - color: #555; - } - } - } - } -} diff --git a/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx b/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx index a7d69a8fe7..e59320d8f4 100644 --- a/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx +++ b/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx @@ -15,212 +15,16 @@ * limitations under the License. */ -import { - defineComponent, - Ref, - toRefs, - onMounted, - toRef, - watch, - getCurrentInstance -} from 'vue' -import { - NIcon, - NSpace, - NDataTable, - NButton, - NPagination, - NBreadcrumb, - NBreadcrumbItem -} from 'naive-ui' -import { useI18n } from 'vue-i18n' -import { useTable } from './use-table' -import { SearchOutlined } from '@vicons/antd' -import Card from '@/components/card' -import FolderModal from './components/folder-modal' -import UploadModal from './components/upload-modal' -import styles from './index.module.scss' -import Search from "@/components/input-search"; +import { defineComponent } from 'vue' +import ResourceListModal from '../../components/resource' export default defineComponent({ name: 'resource-manage', setup() { - const { variables, createColumns, getTableData, goUdfManage, goBread } = - useTable() - - const requestData = () => { - getTableData({ - id: -1, - fullName: variables.fullName, - tenantCode: variables.tenantCode, - pageSize: variables.pageSize, - pageNo: variables.page, - searchVal: variables.searchVal - }) - } - - const handleUpdateList = () => { - requestData() - } - - const handleChangePageSize = () => { - variables.page = 1 - requestData() - } - - const handleSearch = () => { - variables.page = 1 - requestData() - } - - const handleShowModal = (showRef: Ref) => { - showRef.value = true - } - - const handleCreateFolder = () => { - variables.row = {} - handleShowModal(toRef(variables, 'folderShowRef')) - } - - const handleUploadFile = () => { - handleShowModal(toRef(variables, 'uploadShowRef')) - } - - const handleBread = (index: number) => { - let breadName = '' - variables.breadList.forEach((item, i) => { - if (i <= index) { - breadName = breadName === "" ? item.toString() : breadName + '/' + item.toString(); - } - }) - goBread(breadName) - } - - const trim = getCurrentInstance()?.appContext.config.globalProperties.trim - - watch(useI18n().locale, () => { - createColumns(variables) - }) - - onMounted(() => { - createColumns(variables) - requestData() - }) - - return { - goUdfManage, - handleBread, - requestData, - handleSearch, - handleUpdateList, - handleCreateFolder, - handleUploadFile, - handleChangePageSize, - ...toRefs(variables), - trim - } }, render() { - const { t } = useI18n() - const { loadingRef } = this - - return ( - - - - - - {t('resource.udf.create_folder')} - - - {t('resource.udf.upload_udf_resources')} - - - - - - - - - - - - - - {{ - header: () => ( - - - this.goUdfManage()}> - {t('resource.udf.udf_resources')} - - - {this.breadList.map((item, index) => ( - - this.handleBread(index)} - > - {item} - - - ))} - - ), - default: () => ( - - - - - - - ) - }} - - - - - ) + return } -}) +}) \ No newline at end of file diff --git a/dolphinscheduler-ui/src/views/resource/udf/resource/types.ts b/dolphinscheduler-ui/src/views/resource/udf/resource/types.ts deleted file mode 100644 index 325814b0c2..0000000000 --- a/dolphinscheduler-ui/src/views/resource/udf/resource/types.ts +++ /dev/null @@ -1,40 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export interface IUdfResourceParam { - fullName: string - tenantCode: string - id: number - pageSize: number - pageNo: number - searchVal: string | undefined -} - -export interface IUdf { - id: number - pid: number - userId: number - fileName: string - fullName: string - alias: string - directory: boolean - size: number - type: 'UDF' - description: string - createTime: string - updateTime: string -} diff --git a/dolphinscheduler-ui/src/views/resource/udf/resource/use-table.ts b/dolphinscheduler-ui/src/views/resource/udf/resource/use-table.ts deleted file mode 100644 index e4a20e74e0..0000000000 --- a/dolphinscheduler-ui/src/views/resource/udf/resource/use-table.ts +++ /dev/null @@ -1,320 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { h, ref, reactive } from 'vue' -import { useI18n } from 'vue-i18n' -import { useRouter } from 'vue-router' -import { bytesToSize } from '@/common/common' -import { useFileStore } from '@/store/file/file' -import type { Router } from 'vue-router' -import { NEllipsis } from 'naive-ui' -import type { TableColumns } from 'naive-ui/es/data-table/src/interface' -import { NSpace, NTooltip, NButton, NPopconfirm } from 'naive-ui' -import { EditOutlined, DeleteOutlined, DownloadOutlined } from '@vicons/antd' -import { useAsyncState } from '@vueuse/core' -import { - queryResourceListPaging, - downloadResource, - deleteResource, - queryCurrentResourceByFileName, - queryCurrentResourceByFullName -} from '@/service/modules/resources' -import ButtonLink from '@/components/button-link' -import { - COLUMN_WIDTH_CONFIG, - calculateTableWidth, - DefaultTableWidth -} from '@/common/column-width-config' -import type { IUdfResourceParam } from './types' -import { ResourceFile } from '@/service/modules/resources/types' - -const goSubFolder = (router: Router, item: any) => { - const fileStore = useFileStore() - fileStore.setFileInfo(`${item.alias}|${item.size}`) - if (item.directory) { - fileStore.setCurrentDir(`${item.fullName}`) - router.push({ name: 'resource-sub-manage', - query: {prefix: item.fullName, tenantCode: item.userName} }) - } -} - -export function useTable() { - const { t } = useI18n() - const router: Router = useRouter() - const fileStore = useFileStore() - - const variables = reactive({ - columns: [], - tableWidth: DefaultTableWidth, - row: {}, - tableData: [], - breadList: [] as String[], - fullName: ref(String(router.currentRoute.value.query.prefix || "")), - tenantCode: ref(String(router.currentRoute.value.query.tenantCode || "")), - page: ref(1), - pageSize: ref(10), - searchVal: ref(), - totalPage: ref(1), - folderShowRef: ref(false), - uploadShowRef: ref(false), - loadingRef: ref(false) - }) - - const createColumns = (variables: any) => { - variables.columns = [ - { - title: '#', - key: 'id', - ...COLUMN_WIDTH_CONFIG['index'], - render: (_row, index) => index + 1 - }, - { - title: t('resource.udf.udf_source_name'), - key: 'alias', - ...COLUMN_WIDTH_CONFIG['linkName'], - render: (row) => { - return !row.directory - ? row.alias - : h( - ButtonLink, - { - onClick: () => void goSubFolder(router, row) - }, - { - default: () => - h( - NEllipsis, - COLUMN_WIDTH_CONFIG['linkEllipsis'], - () => row.alias - ) - } - ) - } - }, - { - title: t('resource.udf.tenant_name'), - ...COLUMN_WIDTH_CONFIG['userName'], - key: 'userName' - }, - { - title: t('resource.udf.whether_directory'), - key: 'whether_directory', - ...COLUMN_WIDTH_CONFIG['yesOrNo'], - render: (row) => - row.directory ? t('resource.file.yes') : t('resource.file.no') - }, - { - title: t('resource.udf.file_name'), - ...COLUMN_WIDTH_CONFIG['name'], - key: 'fullName' - }, - { - title: t('resource.udf.file_size'), - key: 'size', - ...COLUMN_WIDTH_CONFIG['size'], - render: (row) => bytesToSize(row.size) - }, - { - title: t('resource.udf.create_time'), - key: 'createTime', - ...COLUMN_WIDTH_CONFIG['time'] - }, - { - title: t('resource.udf.update_time'), - key: 'updateTime', - ...COLUMN_WIDTH_CONFIG['time'] - }, - { - title: t('resource.udf.operation'), - key: 'operation', - ...COLUMN_WIDTH_CONFIG['operation'](3), - render: (row) => { - return h(NSpace, null, { - default: () => [ - h( - NTooltip, - {}, - { - trigger: () => - h( - NButton, - { - tag: 'div', - circle: true, - type: 'info', - size: 'tiny', - class: 'btn-edit', - onClick: () => { - handleEdit(row) - } - }, - { - icon: () => h(EditOutlined) - } - ), - default: () => t('resource.udf.edit') - } - ), - h( - NTooltip, - {}, - { - trigger: () => - h( - NButton, - { - tag: 'div', - circle: true, - type: 'info', - size: 'tiny', - class: 'btn-download', - disabled: row?.directory ? true : false, - onClick: () => downloadResource({fullName: row.fullName}) - }, - { - icon: () => h(DownloadOutlined) - } - ), - default: () => t('resource.udf.download') - } - ), - h( - NPopconfirm, - { - onPositiveClick: () => { - handleDelete({fullName: row.fullName, tenantCode: row.userName}) - } - }, - { - trigger: () => - h( - NTooltip, - {}, - { - trigger: () => - h( - NButton, - { - tag: 'div', - circle: true, - type: 'error', - size: 'tiny', - class: 'btn-delete' - }, - { - icon: () => h(DeleteOutlined) - } - ), - default: () => t('resource.udf.delete') - } - ), - default: () => t('resource.udf.delete_confirm') - } - ) - ] - }) - } - } - ] as TableColumns - if (variables.tableWidth) { - variables.tableWidth = calculateTableWidth(variables.columns) - } - } - - const getTableData = (params: IUdfResourceParam) => { - if (variables.loadingRef) return - variables.loadingRef = true - const { state } = useAsyncState( - queryResourceListPaging({ ...params, type: 'UDF' }).then((res: any) => { - // use strict checking here - if (variables.fullName !== ""){ - queryCurrentResourceByFullName( - { - type: 'UDF', - fullName: variables.fullName, - tenantCode: variables.tenantCode, - } - ).then((res: ResourceFile) => { - if (res.fileName) { - const breadList = res.fileName.split('/') - // pop the alias from the fullname path - breadList.pop() - variables.breadList = breadList - } - }) - } else { - variables.breadList = [] - } - variables.totalPage = res.totalPage - variables.tableData = res.totalList.map((item: any) => { - return { ...item } - }) - variables.loadingRef = false - }), - { total: 0, table: [] } - ) - return state - } - - const handleEdit = (row: any) => { - variables.folderShowRef = true - variables.row = row - } - - const handleDelete = (fullNameObj: {fullName: string, tenantCode: string}) => { - /* after deleting data from the current page, you need to jump forward when the page is empty. */ - if (variables.tableData.length === 1 && variables.page > 1) { - variables.page -= 1 - } - - deleteResource(fullNameObj).then(() => - getTableData({ - id: -1, - fullName: variables.fullName, - tenantCode: variables.tenantCode, - pageSize: variables.pageSize, - pageNo: variables.page, - searchVal: variables.searchVal - }) - ) - } - - const goUdfManage = () => { - router.push({ name: 'resource-manage' }) - } - - const goBread = (fileName: string) => { - queryCurrentResourceByFileName( - { - type: 'UDF', - fileName: fileName + "/", - tenantCode: variables.tenantCode - } - ).then((res: any) => { - fileStore.setCurrentDir(res.fullName) - router.push({ name: 'resource-sub-manage', query: {prefix: res.fullName, tenantCode: res.userName} }) - }) - } - - return { - variables, - createColumns, - getTableData, - goUdfManage, - goBread - } -}