This is an automated email from the ASF dual-hosted git repository. benjobs pushed a commit to branch cdc-fe in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
commit 99b4554dab8fa90b4587476f07c272af4f08db57 Author: benjobs <[email protected]> AuthorDate: Mon Jan 20 23:59:27 2025 +0800 [Improve] flink cdc yaml FE improvements --- .../src/assets/icons/cdc.svg | 33 +++++++++++ .../src/assets/icons/fjar.svg | 2 +- .../src/assets/icons/fql.svg | 2 +- .../src/assets/icons/py.svg | 2 +- .../src/views/flink/app/Add.vue | 12 +++- .../src/views/flink/app/EditStreamPark.vue | 13 +++- .../src/views/flink/app/components/FlinkSql.vue | 69 ++++++++++++---------- .../src/views/flink/app/data/detail.data.ts | 4 +- .../src/views/flink/app/hooks/useAppTableAction.ts | 2 +- .../flink/app/hooks/useCreateAndEditSchema.ts | 27 ++++++--- .../src/views/flink/app/hooks/useCreateSchema.ts | 33 +++++------ .../src/views/flink/app/hooks/useEditStreamPark.ts | 6 +- 12 files changed, 133 insertions(+), 72 deletions(-) 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 000000000..22b3cf0b6 --- /dev/null +++ b/streampark-console/streampark-console-webapp/src/assets/icons/cdc.svg @@ -0,0 +1,33 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 27.6.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px" + viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#1677FF;} +</style> +<g> + <path class="st0" d="M165.6,12.5H34.4c-12.1,0-21.9,9.8-21.9,21.9v131.2c0,12.1,9.8,21.9,21.9,21.9h131.2 + c12.1,0,21.9-9.8,21.9-21.9V34.4C187.5,22.3,177.7,12.5,165.6,12.5z M168.8,165.6c0,1.7-1.4,3.1-3.1,3.1H34.4 + c-1.7,0-3.1-1.4-3.1-3.1V34.4c0-1.7,1.4-3.1,3.1-3.1h131.2c1.7,0,3.1,1.4,3.1,3.1V165.6z"/> + <g> + <path class="st0" d="M61.9,128.5c0,0.1,0,0.2-0.2,0.5c-0.2,0.1-0.9,0.2-2.3,0.2h-6c-1.9,0-2.4-0.1-2.4-0.1 + c-0.2-0.1-0.3-0.1-0.4-0.2c0,0-0.2-0.2-0.4-0.8c-0.1-0.2-0.3-0.8-0.3-2.9v-51c0-1.5,0.2-2.2,0.3-2.4c0.2-0.4,0.3-0.6,0.3-0.6 + c0,0,0.2-0.1,0.8-0.3c0.4-0.1,1.1-0.2,2.3-0.2h6c0.8,0,1.2,0.1,1.3,0.2c0.2,0.3,0.3,0.6,0.4,0.9c0.1,0.6,0.2,1.2,0.2,1.9l0.2,1.8 + h14l-0.4-7.1c-0.1-2.5-0.6-4.3-1.5-5.5c-0.8-1.2-1.8-2.1-3-2.7c-0.9-0.5-2-0.9-3-1.2c-1.1-0.3-2.3-0.5-3.5-0.5H48.2 + c-1.3,0-2.7,0.2-4,0.6c-1.4,0.4-2.7,1.2-3.8,2.1c-1.1,0.9-1.9,1.8-2.4,2.7c-0.6,0.9-1,2-1.2,3.1c-0.2,1-0.2,1.9-0.2,2.7v60.2 + c0,0.9,0.1,1.9,0.3,3c0.2,1.2,0.6,2.3,1.1,3.3c0.5,1,1.4,1.9,2.5,2.9c1.2,1,2.7,1.7,4.5,2.1c1.6,0.3,3,0.5,4.1,0.5h15 + c1.3,0,2.7-0.2,4.2-0.6c1.5-0.4,2.7-1,3.7-1.6c1.1-0.7,2-1.6,2.6-2.6c0.6-1.1,1-2.3,1-3.7l0.3-9.3H62.2L61.9,128.5z"/> + <path class="st0" d="M117.6,62.7L117.6,62.7c-0.9-1.2-2.1-2.2-3.8-3c-1.6-0.8-3.4-1.1-5.3-1.1h-29v82.9h29.2c2.7,0,4.6-0.4,6-1.2 + c1.3-0.7,2.3-1.7,3.1-2.8c0.8-1.1,1.4-2.7,1.9-4.7c0.5-1.9,0.7-4.1,0.7-6.5V72.1c0-1.4-0.3-3-0.8-4.9 + C119.1,65.3,118.4,63.8,117.6,62.7z M106.6,98.3v26.3c0,2.5-0.2,3.1-0.2,3.1c0,0.1-0.2,0.4-0.8,1.1c-0.2,0.2-0.4,0.4-1.2,0.4H92.6 + V70.9h11.8c1,0,1.2,0.3,1.3,0.5c0.4,0.6,0.6,1.2,0.7,1.8C106.5,74.1,106.6,95.3,106.6,98.3z"/> + <path class="st0" d="M149.9,123.7l-0.2,4.8c0,0.1,0,0.2-0.2,0.5c-0.2,0.1-0.9,0.2-2.3,0.2h-6c-1.9,0-2.4-0.1-2.4-0.1 + c-0.2-0.1-0.3-0.1-0.4-0.2c0,0-0.2-0.2-0.5-0.8c-0.1-0.2-0.3-0.8-0.3-2.9v-51c0-1.5,0.2-2.2,0.3-2.4c0.2-0.4,0.3-0.6,0.3-0.6 + c0,0,0.2-0.1,0.8-0.3c0.4-0.1,1.1-0.2,2.3-0.2h6c0.8,0,1.2,0.1,1.3,0.2c0.2,0.3,0.3,0.6,0.4,0.9c0.1,0.6,0.2,1.2,0.2,1.9l0.2,1.8 + h14l-0.4-7.1c-0.1-2.5-0.6-4.3-1.5-5.5c-0.8-1.2-1.8-2.1-3-2.7c-0.9-0.5-2-0.9-3-1.2c-1.1-0.3-2.3-0.5-3.5-0.5h-15.9 + c-1.3,0-2.7,0.2-4,0.6c-1.4,0.4-2.7,1.2-3.8,2.1c-1.1,0.9-1.9,1.8-2.4,2.7c-0.6,0.9-1,2-1.2,3.1c-0.2,1-0.2,1.9-0.2,2.7v60.2 + c0,0.9,0.1,1.9,0.3,3c0.2,1.2,0.6,2.3,1.1,3.3c0.5,1,1.4,1.9,2.5,2.9c1.2,1,2.7,1.7,4.5,2.1c1.6,0.3,3,0.5,4.1,0.5h15 + c1.3,0,2.7-0.2,4.2-0.6c1.5-0.4,2.7-1,3.7-1.6c1.1-0.7,2-1.6,2.6-2.6c0.7-1.2,1-7.6,1-9.6l0.1-3.5L149.9,123.7z"/> + </g> +</g> +</svg> 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 fc152c4be..293456bc1 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 @@ -<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";><svg t="1737299962791" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"; p-id="27402" xmlns:xlink="http://www.w3.org/1999/xlink"; width="200" height="200"><path d="M960 32H64a31.36 31.36 0 0 0-32 32v896a31.36 31.36 0 0 0 32 32h896a31.36 31.36 0 0 0 32-32V64a31.36 31.36 0 0 0-32-32zM928 896a31.36 31.36 0 0 1-30.72 30.72H1 [...] +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";><svg t="1737381843737" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"; p-id="2307" xmlns:xlink="http://www.w3.org/1999/xlink"; width="200" height="200"><path d="M176 64A112 112 0 0 0 64 176v672c0 61.824 50.176 112 112 112h672A112 112 0 0 0 960 848V176A112 112 0 0 0 848 64H176zM160 176a16 16 0 0 1 16-16h672a16 16 0 0 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 961e9e176..bbb03d29a 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 @@ -<svg t="1694614881698" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"; p-id="39038" width="200" height="200"><path d="M176 64A112 112 0 0 0 64 176v672c0 61.824 50.176 112 112 112h672A112 112 0 0 0 960 848V176A112 112 0 0 0 848 64H176zM160 176a16 16 0 0 1 16-16h672a16 16 0 0 1 16 16v672a16 16 0 0 1-16 16H176a16 16 0 0 1-16-16V176z m60.8 150.528h243.52v81.024h-159.36v55.68h147.072v80.256H304.96v129.792H220.8V326.528z m426.048 353.28c-48.448 0-88.896-15 [...] +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";><svg t="1737381907274" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"; p-id="2543" xmlns:xlink="http://www.w3.org/1999/xlink"; width="200" height="200"><path d="M176 64A112 112 0 0 0 64 176v672c0 61.824 50.176 112 112 112h672A112 112 0 0 0 960 848V176A112 112 0 0 0 848 64H176zM160 176a16 16 0 0 1 16-16h672a16 16 0 0 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 fd26fd959..a597efd26 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 @@ -<svg t="1694615129517" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"; p-id="51736" width="200" height="200"><path d="M170.666667 170.666667v682.666666h682.666666V170.666667H170.666667zM85.333333 170.666667A85.333333 85.333333 0 0 1 170.666667 85.333333h682.666666A85.333333 85.333333 0 0 1 938.666667 170.666667v682.666666a85.333333 85.333333 0 0 1-85.333334 85.333334H170.666667A85.333333 85.333333 0 0 1 85.333333 853.333333V170.666667z m356.010667 10 [...] +<svg t="1694615129517" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"; p-id="51736" width="200" height="200"><path d="M170.666667 170.666667v682.666666h682.666666V170.666667H170.666667zM85.333333 170.666667A85.333333 85.333333 0 0 1 170.666667 85.333333h682.666666A85.333333 85.333333 0 0 1 938.666667 170.666667v682.666666a85.333333 85.333333 0 0 1-85.333334 85.333334H170.666667A85.333333 85.333333 0 0 1 85.333333 853.333333V170.666667z m356.010667 10 [...] 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 da1910f09..74e334961 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 1180730bf..8eb133a80 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 @@ <template #args="{ model }"> <ProgramArgs ref="programArgRef" - v-if="model.args != null && model.args != undefined" + v-if="model.args != null" v-model:value="model.args" :suggestions="suggestions" @preview="(value) => openReviewDrawer(true, { value, suggestions })" @@ -385,6 +391,7 @@ v-model:value="model[field]" :versionId="model['versionId']" :suggestions="suggestions" + :jobType="Number(model['jobType'])" @preview="(value) => openReviewDrawer(true, { value, suggestions })" /> </template> 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 05d94cc00..d8fa3486c 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 @@ <Icon icon="ant-design:eye-outlined" /> {{ t('flink.app.flinkSql.preview') }} </a-button> - <a-button class="flinksql-tool-item" size="small" type="default" @click="handleFormatSql"> + <a-button + v-if="props.jobType === JobTypeEnum.SQL" + class="flinksql-tool-item" + size="small" + type="default" + @click="handleFormatSql" + > <Icon icon="ant-design:thunderbolt-outlined" /> {{ t('flink.app.flinkSql.format') }} </a-button> 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 3da83a68e..8b2a5fcea 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 7fc1130bc..e634d5311 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 25e0f1995..2356d0667 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 348ad5d38..f6cca358e 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 61b713090..40a7a1f4d 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',
