diff --git a/streampark-console/streampark-console-webapp/src/assets/icons/cdc.svg b/streampark-console/streampark-console-webapp/src/assets/icons/cdc.svg new file mode 100644 index 0000000000..22b3cf0b6f --- /dev/null +++ b/streampark-console/streampark-console-webapp/src/assets/icons/cdc.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + diff --git a/streampark-console/streampark-console-webapp/src/assets/icons/fjar.svg b/streampark-console/streampark-console-webapp/src/assets/icons/fjar.svg index fc152c4be3..293456bc12 100644 --- a/streampark-console/streampark-console-webapp/src/assets/icons/fjar.svg +++ b/streampark-console/streampark-console-webapp/src/assets/icons/fjar.svg @@ -1 +1 @@ - + diff --git a/streampark-console/streampark-console-webapp/src/assets/icons/fql.svg b/streampark-console/streampark-console-webapp/src/assets/icons/fql.svg index 961e9e1763..bbb03d29aa 100644 --- a/streampark-console/streampark-console-webapp/src/assets/icons/fql.svg +++ b/streampark-console/streampark-console-webapp/src/assets/icons/fql.svg @@ -1 +1 @@ - + diff --git a/streampark-console/streampark-console-webapp/src/assets/icons/py.svg b/streampark-console/streampark-console-webapp/src/assets/icons/py.svg index fd26fd9593..a597efd265 100644 --- a/streampark-console/streampark-console-webapp/src/assets/icons/py.svg +++ b/streampark-console/streampark-console-webapp/src/assets/icons/py.svg @@ -1 +1 @@ - + diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/Add.vue b/streampark-console/streampark-console-webapp/src/views/flink/app/Add.vue index da1910f09f..74e3349610 100644 --- a/streampark-console/streampark-console-webapp/src/views/flink/app/Add.vue +++ b/streampark-console/streampark-console-webapp/src/views/flink/app/Add.vue @@ -245,7 +245,7 @@ handleCluster(values); const params = { - jobType: JobTypeEnum.SQL, + jobType: values.jobType, flinkSql: values.flinkSql, appType: AppTypeEnum.STREAMPARK_FLINK, config, @@ -265,12 +265,18 @@ submitLoading.value = true; if (formValue.jobType == JobTypeEnum.SQL || formValue.jobType == JobTypeEnum.CDC) { if (formValue.flinkSql == null || formValue.flinkSql.trim() === '') { - const errorMsg = formValue.jobType == JobTypeEnum.SQL ? t('flink.app.editStreamPark.flinkSqlRequired') : t('flink.app.editStreamPark.yamlRequired') + const errorMsg = + formValue.jobType == JobTypeEnum.SQL + ? t('flink.app.editStreamPark.flinkSqlRequired') + : t('flink.app.editStreamPark.yamlRequired'); createMessage.warning(errorMsg); } else { const access = await flinkSql?.value?.handleVerifySql(); if (!access) { - const errorMsg = formValue.jobType == JobTypeEnum.SQL ? t('flink.app.editStreamPark.sqlCheck') : t('flink.app.editStreamPark.yamlCheck') + const errorMsg = + formValue.jobType == JobTypeEnum.SQL + ? t('flink.app.editStreamPark.sqlCheck') + : t('flink.app.editStreamPark.yamlCheck'); createMessage.warning(errorMsg); throw new Error(access); } diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/EditStreamPark.vue b/streampark-console/streampark-console-webapp/src/views/flink/app/EditStreamPark.vue index 1180730bfd..8eb133a802 100644 --- a/streampark-console/streampark-console-webapp/src/views/flink/app/EditStreamPark.vue +++ b/streampark-console/streampark-console-webapp/src/views/flink/app/EditStreamPark.vue @@ -166,12 +166,18 @@ submitLoading.value = true; if (app.jobType == JobTypeEnum.SQL || app.jobType == JobTypeEnum.CDC) { if (values.flinkSql == null || values.flinkSql.trim() === '') { - const errorMsg = app.jobType == JobTypeEnum.SQL ? t('flink.app.editStreamPark.flinkSqlRequired') : t('flink.app.editStreamPark.yamlRequired') + const errorMsg = + app.jobType == JobTypeEnum.SQL + ? t('flink.app.editStreamPark.flinkSqlRequired') + : t('flink.app.editStreamPark.yamlRequired'); createMessage.warning(errorMsg); } else { const access = await flinkSql?.value?.handleVerifySql(); if (!access) { - const errorMsg = app.jobType == JobTypeEnum.SQL ? t('flink.app.editStreamPark.sqlCheck') : t('flink.app.editStreamPark.yamlCheck') + const errorMsg = + app.jobType == JobTypeEnum.SQL + ? t('flink.app.editStreamPark.sqlCheck') + : t('flink.app.editStreamPark.yamlCheck'); createMessage.warning(errorMsg); throw new Error(access); } @@ -370,7 +376,7 @@ diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/components/FlinkSql.vue b/streampark-console/streampark-console-webapp/src/views/flink/app/components/FlinkSql.vue index 05d94cc001..d8fa3486c9 100644 --- a/streampark-console/streampark-console-webapp/src/views/flink/app/components/FlinkSql.vue +++ b/streampark-console/streampark-console-webapp/src/views/flink/app/components/FlinkSql.vue @@ -68,8 +68,8 @@ default: () => [], }, jobType: { - type: Number - } + type: Number, + }, }); const defaultValue = ''; @@ -84,7 +84,6 @@ createMessage.error(t('flink.app.dependencyError')); return false; } else { - console.log(props.jobType) if (props.jobType === JobTypeEnum.CDC) { try { YAML.load(props.value); @@ -101,37 +100,37 @@ } } else { try { - const { data } = await fetchFlinkSqlVerify({ - sql: props.value, - versionId: props.versionId, - }); - const success = data.data === true || data.data === 'true'; - if (success) { - verifyRes.verified = true; - verifyRes.errorMsg = ''; - syntaxError(); - return true; - } else { - verifyRes.errorStart = parseInt(data.start); - verifyRes.errorEnd = parseInt(data.end); - switch (data.type) { - case 4: - verifyRes.errorMsg = 'Unsupported sql'; - break; - case 5: - verifyRes.errorMsg = "SQL is not endWith ';'"; - break; - default: - verifyRes.errorMsg = data.message; - break; + const { data } = await fetchFlinkSqlVerify({ + sql: props.value, + versionId: props.versionId, + }); + const success = data.data === true || data.data === 'true'; + if (success) { + verifyRes.verified = true; + verifyRes.errorMsg = ''; + syntaxError(); + return true; + } else { + verifyRes.errorStart = parseInt(data.start); + verifyRes.errorEnd = parseInt(data.end); + switch (data.type) { + case 4: + verifyRes.errorMsg = 'Unsupported sql'; + break; + case 5: + verifyRes.errorMsg = "SQL is not endWith ';'"; + break; + default: + verifyRes.errorMsg = data.message; + break; + } + syntaxError(); + return false; } - syntaxError(); + } catch (error) { + console.error(error); return false; } - } catch (error) { - console.error(error); - return false; - } } } } @@ -243,7 +242,13 @@ {{ t('flink.app.flinkSql.preview') }} - + {{ t('flink.app.flinkSql.format') }} diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/data/detail.data.ts b/streampark-console/streampark-console-webapp/src/views/flink/app/data/detail.data.ts index 3da83a68e8..8b2a5fceae 100644 --- a/streampark-console/streampark-console-webapp/src/views/flink/app/data/detail.data.ts +++ b/streampark-console/streampark-console-webapp/src/views/flink/app/data/detail.data.ts @@ -49,12 +49,12 @@ export const getDescSchema = (): DescItem[] => { { field: 'module', label: t('flink.app.module'), - show: (data) => data.jobType != JobTypeEnum.SQL, + show: (data) => data.jobType == JobTypeEnum.JAR, }, { field: 'projectName', label: t('flink.app.project'), - show: (data) => data.jobType != JobTypeEnum.SQL, + show: (data) => data.jobType == JobTypeEnum.JAR, }, { field: 'appType', diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useAppTableAction.ts b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useAppTableAction.ts index 7fc1130bc1..e634d53115 100644 --- a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useAppTableAction.ts +++ b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useAppTableAction.ts @@ -232,7 +232,7 @@ export const useAppTableAction = ( sessionStorage.setItem('appPageNo', String(currentPageNo || 1)); flinkAppStore.setApplicationId(app.id); if (app.appType == AppTypeEnum.STREAMPARK_FLINK) { - // jobType( 1 custom code 2: flinkSQL) + // jobType( 1 flinkJAR 2: flinkSQL) router.push({ path: '/flink/app/edit_streampark', query: { appId: app.id } }); } else if (app.appType == AppTypeEnum.APACHE_FLINK) { //Apache Flink diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateAndEditSchema.ts b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateAndEditSchema.ts index 25e0f19955..2356d06677 100644 --- a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateAndEditSchema.ts +++ b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateAndEditSchema.ts @@ -109,7 +109,15 @@ export const useCreateAndEditSchema = ( label: 'Flink SQL', component: 'Input', slot: 'flinkSql', - ifShow: ({ values }) => values?.jobType == JobTypeEnum.SQL || values?.jobType == JobTypeEnum.CDC, + ifShow: ({ values }) => values?.jobType == JobTypeEnum.SQL, + rules: [{ required: true, message: t('flink.app.addAppTips.flinkSqlIsRequiredMessage') }], + }, + { + field: 'flinkSql', + label: 'CDC YAML', + component: 'Input', + slot: 'flinkSql', + ifShow: ({ values }) => values?.jobType == JobTypeEnum.CDC, rules: [{ required: true, message: t('flink.app.addAppTips.flinkSqlIsRequiredMessage') }], }, { @@ -117,7 +125,8 @@ export const useCreateAndEditSchema = ( label: t('flink.app.resource'), component: 'Select', render: ({ model }) => renderStreamParkResource({ model, resources: unref(teamResource) }), - ifShow: ({ values }) => values.jobType == JobTypeEnum.SQL || values.jobType == JobTypeEnum.CDC, + ifShow: ({ values }) => + values.jobType == JobTypeEnum.SQL || values.jobType == JobTypeEnum.CDC, }, { field: 'dependency', @@ -132,7 +141,8 @@ export const useCreateAndEditSchema = ( label: t('flink.app.appConf'), component: 'Switch', ifShow: ({ values }) => - (values?.jobType == JobTypeEnum.SQL || values?.jobType == JobTypeEnum.CDC) && !isK8sDeployMode(values.deployMode), + (values?.jobType == JobTypeEnum.SQL || values?.jobType == JobTypeEnum.CDC) && + !isK8sDeployMode(values.deployMode), render({ model, field }) { return renderIsSetConfig(model, field, registerConfDrawer, openConfDrawer); }, @@ -477,7 +487,10 @@ export const useCreateAndEditSchema = ( component: 'InputTextArea', defaultValue: '', slot: 'args', - ifShow: ({ values }) => (edit?.mode ? true : (values.jobType != JobTypeEnum.SQL && values.jobType != JobTypeEnum.CDC)), + ifShow: ({ values }) => + edit?.mode + ? true + : values.jobType == JobTypeEnum.JAR && values.jobType == JobTypeEnum.PYFLINK, }, { field: 'hadoopUser', @@ -510,12 +523,12 @@ export const useCreateAndEditSchema = ( icon: 'ant-design:code-outlined', style: { color: '#108ee9' }, }), - h('span', { class: 'pl-8px' }, 'Custom Code'), + h('span', { class: 'pl-8px' }, 'Flink JAR'), ], }, ); - } else if(model.jobType == JobTypeEnum.CDC) { - return getAlertSvgIcon('fql', 'Flink CDC'); + } else if (model.jobType == JobTypeEnum.CDC) { + return getAlertSvgIcon('cdc', 'Flink CDC'); } else { return getAlertSvgIcon('fql', 'Flink SQL'); } diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateSchema.ts b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateSchema.ts index 348ad5d385..f6cca358e2 100644 --- a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateSchema.ts +++ b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateSchema.ts @@ -39,28 +39,28 @@ const getJobTypeOptions = () => { return [ { label: h('div', {}, [ - h(SvgIcon, { name: 'code', color: '#108ee9' }, ''), - h('span', { class: 'pl-10px' }, 'Custom Code'), + h(SvgIcon, { name: 'fjar', color: '#108ee9', size: 16 }, ''), + h('span', { class: 'pl-10px' }, 'Flink JAR'), ]), value: String(JobTypeEnum.JAR), }, { label: h('div', {}, [ - h(SvgIcon, { name: 'fql', color: '#108ee9' }, ''), + h(SvgIcon, { name: 'fql', color: '#108ee9', size: 16 }, ''), h('span', { class: 'pl-10px' }, 'Flink SQL'), ]), value: String(JobTypeEnum.SQL), }, { label: h('div', {}, [ - h(SvgIcon, { name: 'py', color: '#108ee9' }, ''), + h(SvgIcon, { name: 'py', color: '#108ee9', size: 16 }, ''), h('span', { class: 'pl-10px' }, 'Python Flink'), ]), value: String(JobTypeEnum.PYFLINK), }, { label: h('div', {}, [ - h(SvgIcon, { name: 'fql', color: '#108ee9' }, ''), + h(SvgIcon, { name: 'cdc', color: '#108ee9', size: 16 }, ''), h('span', { class: 'pl-10px' }, 'Flink CDC'), ]), value: String(JobTypeEnum.CDC), @@ -133,7 +133,7 @@ export const useCreateSchema = (dependencyRef: Ref) => { component: 'Select', render: ({ model }) => renderResourceFrom(model), rules: [{ required: true, message: t('flink.app.addAppTips.resourceFromMessage') }], - show: ({ values }) => values?.jobType != JobTypeEnum.SQL && values?.jobType != JobTypeEnum.CDC, + show: ({ values }) => values?.jobType == JobTypeEnum.JAR, }, { field: 'uploadJobJar', @@ -141,7 +141,7 @@ export const useCreateSchema = (dependencyRef: Ref) => { component: 'Select', render: ({ model }) => renderStreamParkJarApp({ model, resources: unref(teamResource) }), ifShow: ({ values }) => - values?.jobType != JobTypeEnum.SQL && values?.jobType != JobTypeEnum.CDC && values?.resourceFrom == ResourceFromEnum.UPLOAD, + values?.jobType == JobTypeEnum.JAR && values?.resourceFrom == ResourceFromEnum.UPLOAD, }, { field: 'mainClass', @@ -149,7 +149,7 @@ export const useCreateSchema = (dependencyRef: Ref) => { component: 'Input', componentProps: { placeholder: t('flink.app.addAppTips.mainClassPlaceholder') }, ifShow: ({ values }) => - values?.jobType != JobTypeEnum.SQL && values?.jobType != JobTypeEnum.CDC && values?.resourceFrom == ResourceFromEnum.UPLOAD, + values?.jobType == JobTypeEnum.JAR && values?.resourceFrom == ResourceFromEnum.UPLOAD, rules: [{ required: true, message: t('flink.app.addAppTips.mainClassIsRequiredMessage') }], }, { @@ -177,7 +177,7 @@ export const useCreateSchema = (dependencyRef: Ref) => { }, }, ifShow: ({ values }) => - values?.jobType != JobTypeEnum.SQL && values?.jobType != JobTypeEnum.CDC && values.resourceFrom != ResourceFromEnum.UPLOAD, + values?.jobType == JobTypeEnum.JAR && values.resourceFrom != ResourceFromEnum.UPLOAD, rules: [{ required: true, message: t('flink.app.addAppTips.projectIsRequiredMessage') }], }, { @@ -200,8 +200,8 @@ export const useCreateSchema = (dependencyRef: Ref) => { }, }; }, - ifShow: ({ values }) => - values?.jobType != JobTypeEnum.SQL && values?.jobType != JobTypeEnum.CDC && values?.resourceFrom != ResourceFromEnum.UPLOAD, + ifShow: ({ values }) => + values?.jobType == JobTypeEnum.JAR && values?.resourceFrom != ResourceFromEnum.UPLOAD, rules: [{ required: true, message: t('flink.app.addAppTips.projectIsRequiredMessage') }], }, { @@ -232,7 +232,7 @@ export const useCreateSchema = (dependencyRef: Ref) => { }; }, ifShow: ({ values }) => - values?.jobType != JobTypeEnum.SQL && values?.jobType != JobTypeEnum.CDC && values?.resourceFrom != ResourceFromEnum.UPLOAD, + values?.jobType == JobTypeEnum.JAR && values?.resourceFrom != ResourceFromEnum.UPLOAD, dynamicRules: () => [ { required: true, message: t('flink.app.addAppTips.appTypeIsRequiredMessage') }, ], @@ -257,8 +257,7 @@ export const useCreateSchema = (dependencyRef: Ref) => { }; }, ifShow: ({ values }) => - values?.jobType != JobTypeEnum.SQL && - values?.jobType != JobTypeEnum.CDC && + values?.jobType == JobTypeEnum.JAR && values?.resourceFrom != ResourceFromEnum.UPLOAD && values.appType == String(AppTypeEnum.APACHE_FLINK), rules: [{ required: true, message: t('flink.app.addAppTips.programJarIsRequiredMessage') }], @@ -269,8 +268,7 @@ export const useCreateSchema = (dependencyRef: Ref) => { component: 'Input', componentProps: { placeholder: t('flink.app.addAppTips.mainClassPlaceholder') }, ifShow: ({ values }) => - values?.jobType != JobTypeEnum.SQL && - values?.jobType != JobTypeEnum.CDC && + (values?.jobType == JobTypeEnum.JAR || values?.jobType == JobTypeEnum.PYFLINK) && values?.resourceFrom != ResourceFromEnum.UPLOAD && values.appType == String(AppTypeEnum.APACHE_FLINK), rules: [{ required: true, message: t('flink.app.addAppTips.mainClassIsRequiredMessage') }], @@ -297,8 +295,7 @@ export const useCreateSchema = (dependencyRef: Ref) => { }; }, ifShow: ({ values }) => - values?.jobType != JobTypeEnum.SQL && - values?.jobType != JobTypeEnum.CDC && + values?.jobType == JobTypeEnum.JAR && values?.resourceFrom != ResourceFromEnum.UPLOAD && values.appType == String(AppTypeEnum.STREAMPARK_FLINK), dynamicRules: () => [{ required: true, validator: handleCheckConfig }], diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useEditStreamPark.ts b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useEditStreamPark.ts index 61b713090b..40a7a1f4db 100644 --- a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useEditStreamPark.ts +++ b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useEditStreamPark.ts @@ -139,7 +139,7 @@ export const useEditStreamParkSchema = ( label: 'Project', component: 'Input', render: ({ model }) => h(Alert, { message: model.projectName, type: 'info' }), - ifShow: ({ model, values }) => values.jobType != JobTypeEnum.SQL && model.projectName, + ifShow: ({ model, values }) => values.jobType == JobTypeEnum.JAR && model.projectName, }, { field: 'project', label: 'ProjectId', component: 'Input', show: false }, @@ -148,7 +148,7 @@ export const useEditStreamParkSchema = ( label: 'Application', component: 'Input', render: ({ model }) => h(Alert, { message: model.module, type: 'info' }), - ifShow: ({ model, values }) => values.jobType != JobTypeEnum.SQL && model.module, + ifShow: ({ model, values }) => values.jobType == JobTypeEnum.JAR && model.module, }, { field: 'configId', label: 'configId', component: 'Input', show: false }, { field: 'config', label: '', component: 'Input', show: false }, @@ -158,7 +158,7 @@ export const useEditStreamParkSchema = ( label: 'Application conf', component: 'Input', slot: 'appConf', - ifShow: ({ values }) => values.jobType != JobTypeEnum.SQL, + ifShow: ({ values }) => values.jobType == JobTypeEnum.JAR, }, { field: 'compareConf',