This is an automated email from the ASF dual-hosted git repository. benjobs pushed a commit to branch resource in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
commit bb7588cfc03b0ef264adb46677ab42e69f2e44a8 Author: benjobs <[email protected]> AuthorDate: Sun Jul 16 21:16:04 2023 +0800 resource improvement --- .../src/locales/lang/en/flink/resource.ts | 7 +- .../src/locales/lang/zh-CN/flink/resource.ts | 7 +- .../src/views/flink/resource/View.vue | 89 ++++++++++++++-------- .../flink/resource/components/ResourceDrawer.vue | 20 +++-- .../src/views/flink/resource/useResourceRender.tsx | 38 ++++++++- 5 files changed, 117 insertions(+), 44 deletions(-) diff --git a/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/resource.ts b/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/resource.ts index 19ffd1618..82e7c0863 100644 --- a/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/resource.ts +++ b/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/resource.ts @@ -21,10 +21,12 @@ export default { deleteResource: 'Delete Resource', deletePopConfirm: 'Are you sure delete this resource ?', uploadResource: 'Upload Resource', + resourceName: 'Resource Name', resourceType: 'Resource Type', engineType: 'Engine Type', resourceGroup: 'Resource Group', groupName: 'Group Name', + resourceNamePlaceholder: 'Please input resource name', engineTypePlaceholder: 'Please select compute engine type', resourceGroupPlaceholder: 'Please choose resource', groupNamePlaceholder: 'Please input the group name', @@ -37,8 +39,8 @@ export default { table: { title: 'Resource List', resourceName: 'Resource Name', - resourceNamePlaceholder: 'Please enter the resource name to search', - descriptionPlaceholder: 'Please enter description to search', + resourceNamePlaceholder: 'Please enter the resource name', + descriptionPlaceholder: 'Please enter description', createUser: 'Create User', createTime: 'Create Time', modifyTime: 'Modify Time', @@ -46,6 +48,7 @@ export default { }, form: { descriptionMessage: 'exceeds maximum length limit of 100 characters', + resourceNameIsRequiredMessage: 'resource name is required', engineTypeIsRequiredMessage: 'compute engine type is required', resourceTypeIsRequiredMessage: 'resource type is required', resourceTypePlaceholder: 'Please select resource type', diff --git a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/resource.ts b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/resource.ts index 023d0f36b..3ef585e4c 100644 --- a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/resource.ts +++ b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/resource.ts @@ -21,11 +21,13 @@ export default { deleteResource: '删除资源', deletePopConfirm: '你确定要删除这个资源?', uploadResource: '上传资源', + resourceName: '资源名称', resourceType: '资源类型', engineType: '计算引擎类型', resourceGroup: '资源组', groupName: '资源组名称', resourceGroupPlaceholder: '请选择组资源', + resourceNamePlaceholder: '请输入资源名称', groupNamePlaceholder: '请输入资源组名称', groupNameIsRequiredMessage: '资源组名称必填', engineTypePlaceholder: '请选择计算引擎类型', @@ -46,8 +48,9 @@ export default { }, form: { descriptionMessage: '超过 100 个字符的最大长度限制', - engineTypeIsRequiredMessage: '计算引擎类型必选', - resourceTypeIsRequiredMessage: '资源类型必选', + resourceNameIsRequiredMessage: '资源名称为必填项', + engineTypeIsRequiredMessage: '计算引擎类型为必填项', + resourceTypeIsRequiredMessage: '资源类型为必填项', resourceTypePlaceholder: '请选择资源类型', exists: '资源已存在', empty: '资源不能为空', diff --git a/streampark-console/streampark-console-webapp/src/views/flink/resource/View.vue b/streampark-console/streampark-console-webapp/src/views/flink/resource/View.vue index 0cae4e79e..49a1e7674 100644 --- a/streampark-console/streampark-console-webapp/src/views/flink/resource/View.vue +++ b/streampark-console/streampark-console-webapp/src/views/flink/resource/View.vue @@ -26,45 +26,48 @@ <template #resetBefore> 1111 </template> <template #bodyCell="{ column, record }"> <template v-if="column.dataIndex === 'resourceType'"> - <Tag - class="bold-tag" - color="#52c41a" - v-if="record.resourceType == ResourceTypeEnum.FLINK_APP" - > - FLINK_APP + <Tag color="processing" v-if="record.resourceType === ResourceTypeEnum.FLINK_APP"> + <template #icon> + <img :src=flinkAppSvg class="svg-icon" alt="Flink App"/> + </template> + Flink App </Tag> - <Tag - class="bold-tag" - color="#2db7f5" - v-if="record.resourceType == ResourceTypeEnum.NORMAL_JAR" - > - NORMAL_JAR - </Tag> - <Tag - class="bold-tag" - color="#108ee9" - v-if="record.resourceType == ResourceTypeEnum.CONNECTOR" - > - CONNECTOR + + <Tag color="processing" v-if="record.resourceType === ResourceTypeEnum.CONNECTOR"> + <template #icon> + <img :src=connectorSvg class="svg-icon" alt="Connector"/> + </template> + Connector </Tag> - <Tag class="bold-tag" color="#79f379" v-if="record.resourceType == ResourceTypeEnum.UDXF"> + + <Tag color="processing" v-if="record.resourceType === ResourceTypeEnum.UDXF"> + <template #icon> + <img :src=udxfSvg class="svg-icon" alt="UDXF"/> + </template> UDXF </Tag> - <Tag - class="bold-tag" - color="#fcaa80" - v-if="record.resourceType == ResourceTypeEnum.GROUP" - > + + <Tag color="processing" v-if="record.resourceType === ResourceTypeEnum.NORMAL_JAR"> + <template #icon> + <img :src=normalJarSvg class="svg-icon" alt="Normal jar"/> + </template> + Normal Jar + </Tag> + + <Tag color="processing" v-if="record.resourceType === ResourceTypeEnum.GROUP"> + <template #icon> + <img :src=groupSvg class="svg-icon" alt="GROUP"/> + </template> GROUP </Tag> </template> <template v-if="column.dataIndex === 'engineType'"> - <Tag class="bold-tag" color="#e65270" v-if="record.engineType == EngineTypeEnum.FLINK"> - FLINK - </Tag> - <Tag class="bold-tag" color="#f5be07" v-if="record.engineType == EngineTypeEnum.SPARK"> - SPARK - </Tag> + <span v-if="record.engineType === EngineTypeEnum.FLINK"> + <SvgIcon name="flink"/> Apache Flink + </span> + <span v-if="record.engineType === EngineTypeEnum.SPARK"> + <SvgIcon name="spark"/> Apache Spark + </span> </template> <template v-if="column.dataIndex === 'action'"> <TableAction @@ -115,6 +118,15 @@ import { fetchResourceDelete, fetchResourceList, fetchTeamResource } from '/@/api/flink/resource'; import { EngineTypeEnum, ResourceTypeEnum } from '/@/views/flink/resource/resource.data'; import { Tag } from 'ant-design-vue'; + import SvgIcon from "/@/components/Icon/src/SvgIcon.vue"; + + + import flinkAppSvg from '/@/assets/icons/flink2.svg'; + import sparkSvg from '/@/assets/icons/spark.svg'; + import connectorSvg from '/@/assets/icons/connector.svg'; + import udxfSvg from '/@/assets/icons/fx.svg'; + import normalJarSvg from '/@/assets/icons/jar.svg'; + import groupSvg from '/@/assets/icons/group.svg'; const teamResource = ref<Array<any>>([]); const [registerDrawer, { openDrawer }] = useDrawer(); @@ -202,3 +214,18 @@ updateTeamResource(); }); </script> + +<style lang="less" scoped> +.svg-icon { + display: inline-block; + width: 14px; + height: 14px; + + .svg-connector { + svg path { + fill: #fff0f6 !important; + } + } +} + +</style> diff --git a/streampark-console/streampark-console-webapp/src/views/flink/resource/components/ResourceDrawer.vue b/streampark-console/streampark-console-webapp/src/views/flink/resource/components/ResourceDrawer.vue index 2d217d3fe..675bbc9fe 100644 --- a/streampark-console/streampark-console-webapp/src/views/flink/resource/components/ResourceDrawer.vue +++ b/streampark-console/streampark-console-webapp/src/views/flink/resource/components/ResourceDrawer.vue @@ -49,6 +49,7 @@ import { fetchAddResource, fetchUpdateResource } from '/@/api/flink/resource'; import { EngineTypeEnum } from '/@/views/flink/resource/resource.data'; import { + renderEngineType, renderResourceType, renderStreamParkResourceGroup, } from '/@/views/flink/resource/useResourceRender'; @@ -72,6 +73,13 @@ const getResourceFormSchema = computed((): FormSchema[] => { return [ + { + field: 'resourceName', + label: t('flink.resource.resourceName'), + component: 'Input', + componentProps: { placeholder: t('flink.resource.resourceNamePlaceholder') }, + rules: [{ required: true, message: t('flink.resource.form.resourceNameIsRequiredMessage') }], + }, { field: 'resourceType', label: t('flink.resource.resourceType'), @@ -85,15 +93,11 @@ field: 'engineType', label: t('flink.resource.engineType'), component: 'Select', + render: ({ model }) => renderEngineType({ model }), defaultValue: EngineTypeEnum.FLINK, - componentProps: { - placeholder: t('flink.resource.engineTypePlaceholder'), - options: [ - { label: 'apache flink', value: EngineTypeEnum.FLINK, disabled: false }, - { label: 'apache spark', value: EngineTypeEnum.SPARK, disabled: true }, - ], - }, - rules: [{ required: true, message: t('flink.resource.form.engineTypeIsRequiredMessage') }], + rules: [ + { required: true, message: t('flink.resource.form.engineTypeIsRequiredMessage') } + ], }, { field: 'resourceName', diff --git a/streampark-console/streampark-console-webapp/src/views/flink/resource/useResourceRender.tsx b/streampark-console/streampark-console-webapp/src/views/flink/resource/useResourceRender.tsx index 57b2c077b..67a98d65b 100644 --- a/streampark-console/streampark-console-webapp/src/views/flink/resource/useResourceRender.tsx +++ b/streampark-console/streampark-console-webapp/src/views/flink/resource/useResourceRender.tsx @@ -16,8 +16,10 @@ */ import { Select, Tag } from 'ant-design-vue'; import { useI18n } from '/@/hooks/web/useI18n'; -import { ResourceTypeEnum } from '/@/views/flink/resource/resource.data'; +import {EngineTypeEnum, ResourceTypeEnum} from '/@/views/flink/resource/resource.data'; + import flinkAppSvg from '/@/assets/icons/flink2.svg'; +import sparkSvg from '/@/assets/icons/spark.svg'; import connectorSvg from '/@/assets/icons/connector.svg'; import udxfSvg from '/@/assets/icons/fx.svg'; import normalJarSvg from '/@/assets/icons/jar.svg'; @@ -61,6 +63,40 @@ export const renderResourceType = ({ model }) => { ); }; +/* render resource type label */ +export const renderEngineType = ({ model }) => { + const renderOptions = () => { + const options = [ + { label: 'Apache Flink', value: EngineTypeEnum.FLINK, disabled: false, src: flinkAppSvg }, + { label: 'Apache Spark', value: EngineTypeEnum.SPARK, disabled: true, src: sparkSvg }, + ]; + return options.map(({ label, value,disabled, src }) => { + return ( + <Select.Option key={value} label={label} disabled={disabled} > + <div> + <img src={src} style="display: inline-block; width: 20px; height: 20px"></img> + <span style="vertical-align: middle; margin-left: 5px;">{label}</span> + </div> + </Select.Option> + ); + }); + }; + + return ( + <div> + <Select + allow-clear + placeholder={t('flink.resource.engineTypePlaceholder')} + value={model.engineType} + onChange={(value) => (model.engineType = value)} + > + {renderOptions()} + </Select> + </div> + ); +}; + + export const renderStreamParkResourceGroup = ({ model, resources }) => { const renderOptions = () => { console.log('resources', resources);
