This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
The following commit(s) were added to refs/heads/dev by this push:
new 6ee7823d3 [Improve]: spark edit mode & fix create error (#4064)
6ee7823d3 is described below
commit 6ee7823d3a0349594eb8e20c6ec1aa7613e7b808
Author: Kriszu <[email protected]>
AuthorDate: Sat Sep 14 23:00:40 2024 +0800
[Improve]: spark edit mode & fix create error (#4064)
---
.../src/api/spark/conf.ts | 2 +-
.../src/enums/sparkEnum.ts | 12 +--
.../src/locales/lang/en/spark/app.ts | 14 +--
.../src/locales/lang/zh-CN/spark/app.ts | 32 +++---
.../src/views/spark/app/components/DetailTab.vue | 6 +-
.../src/views/spark/app/components/State.tsx | 61 ++++++-----
.../src/views/spark/app/create.vue | 2 +-
.../src/views/spark/app/data/detail.data.ts | 16 +--
.../src/views/spark/app/detail.vue | 110 +++++++++----------
.../src/views/spark/app/edit.vue | 15 +--
.../src/views/spark/app/hooks/useAppFormSchema.tsx | 116 ++++++++++++---------
.../src/views/spark/app/hooks/useSparkColumns.ts | 2 +-
.../src/views/spark/app/hooks/useSparkRender.tsx | 33 +++++-
.../views/spark/app/hooks/useSparkTableAction.ts | 16 +--
.../src/views/spark/app/index.vue | 6 +-
.../src/views/spark/app/utils/index.ts | 6 +-
16 files changed, 249 insertions(+), 200 deletions(-)
diff --git a/streampark-console/streampark-console-webapp/src/api/spark/conf.ts
b/streampark-console/streampark-console-webapp/src/api/spark/conf.ts
index 6df880b3c..8e005c9be 100644
--- a/streampark-console/streampark-console-webapp/src/api/spark/conf.ts
+++ b/streampark-console/streampark-console-webapp/src/api/spark/conf.ts
@@ -18,7 +18,7 @@ import type { SparkApplication } from './app.type';
import type { SparkApplicationConfig } from './conf.type';
import { defHttp } from '/@/utils/http/axios';
-const apiPrefix = '/flink/conf';
+const apiPrefix = '/spark/conf';
export function fetchGetSparkConf(data: { id: string }) {
return defHttp.post<SparkApplicationConfig>({ url: `${apiPrefix}/get`, data
});
diff --git
a/streampark-console/streampark-console-webapp/src/enums/sparkEnum.ts
b/streampark-console/streampark-console-webapp/src/enums/sparkEnum.ts
index cf40d222e..f7f94d6d2 100644
--- a/streampark-console/streampark-console-webapp/src/enums/sparkEnum.ts
+++ b/streampark-console/streampark-console-webapp/src/enums/sparkEnum.ts
@@ -63,22 +63,22 @@ export enum AppStateEnum {
STARTING = 3,
/** (From Yarn)Application which has been submitted. */
- SUBMITTE = 4,
+ SUBMITTED = 4,
/** (From Yarn)Application has been accepted by the scheduler. */
- ACCEPTE = 5,
+ ACCEPTED = 5,
/** The job has failed and is currently waiting for the cleanup to complete.
*/
- RUNNIN = 6,
+ RUNNING = 6,
/** (From Yarn)Application which finished successfully. */
- FINISHE = 7,
+ FINISHED = 7,
/** (From Yarn)Application which failed. */
- FAILE = 8,
+ FAILED = 8,
/** Loss of mapping. */
- LOS = 9,
+ LOST = 9,
/** Mapping. */
MAPPING = 10,
diff --git
a/streampark-console/streampark-console-webapp/src/locales/lang/en/spark/app.ts
b/streampark-console/streampark-console-webapp/src/locales/lang/en/spark/app.ts
index 612747b3e..910169e1c 100644
---
a/streampark-console/streampark-console-webapp/src/locales/lang/en/spark/app.ts
+++
b/streampark-console/streampark-console-webapp/src/locales/lang/en/spark/app.ts
@@ -25,21 +25,22 @@ export default {
VCore: 'Total VCores Used',
},
runState: {
- added: 'New Applications',
+ added: 'Added',
+ new: 'New',
saving: 'Saving',
- created: 'Creating',
starting: 'Starting',
submitted: 'Submitted',
accept: 'Accepted',
running: 'Running',
- finished: 'Completed',
+ finished: 'Finished',
failed: 'Job Failed',
lost: 'Job Lost',
mapping: 'Mapping',
other: 'Other',
revoked: 'Revoked',
stopping: 'Stopping',
- killed: 'Terminated',
+ success: 'Succeeded',
+ killed: 'Killed',
},
releaseState: {
releasing: 'Releasing',
@@ -62,7 +63,7 @@ export default {
developmentMode: 'development Mode',
executionMode: 'Execution Mode',
historyVersion: 'History Version',
- resource: 'Resource',
+ resource: 'Spark App',
resourcePlaceHolder: 'Select Resource',
selectAppPlaceHolder: 'Select Applications',
dependency: 'Job Dependency',
@@ -208,7 +209,7 @@ export default {
release: 'Release Job',
releaseDetail: 'Release Details',
start: 'Start Job',
- cancel: 'Cancel Job',
+ cancel: 'Stop Job',
detail: 'Job Details',
startLog: 'View Flink Start Log',
abort: 'Terminate Job',
@@ -293,6 +294,7 @@ export default {
dynamicPropertiesPlaceholder:
'$key=$value; if there are multiple parameters, you can input them on
separate lines (-D <arg>)',
sqlCheck: 'SQL Check Error',
+ sparkAppRequire: 'Spark App is required',
},
noteInfo: {
diff --git
a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/spark/app.ts
b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/spark/app.ts
index 86301812c..feb904442 100644
---
a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/spark/app.ts
+++
b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/spark/app.ts
@@ -25,21 +25,22 @@ export default {
VCore: '占用的总VCores',
},
runState: {
- added: '新增应用',
- saving: '保存中',
- created: '创建中',
- starting: '启动中',
- submitted: '已提交',
- accept: '已接受',
- running: '运行中',
- finished: '已完成',
- failed: '作业失败',
- lost: '作业失联',
- mapping: '映射中',
- other: '其他',
- revoked: '回滚',
- stopping: '停止中',
- killed: '终止',
+ added: 'Added',
+ new: 'New',
+ saving: 'Saving',
+ starting: 'Starting',
+ submitted: 'Submitted',
+ accept: 'Accepted',
+ running: 'Running',
+ finished: 'Finished',
+ failed: 'Job Failed',
+ lost: 'Job Lost',
+ mapping: 'Mapping',
+ other: 'Other',
+ revoked: 'Revoked',
+ stopping: 'Stopping',
+ success: 'Succeeded',
+ killed: 'Killed',
},
releaseState: {
releasing: '发布中',
@@ -285,6 +286,7 @@ export default {
hadoopXmlConfigFileTips: '从系统环境参数自动复制配置文件',
dynamicPropertiesPlaceholder: '$key=$value,如果有多个参数，可以换行输入(-D <arg>)',
sqlCheck: 'SQL 检查错误',
+ sparkAppRequire: 'Spark App 为必填项',
},
noteInfo: {
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/components/DetailTab.vue
b/streampark-console/streampark-console-webapp/src/views/spark/app/components/DetailTab.vue
index 1fbee7f63..efba63368 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/components/DetailTab.vue
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/components/DetailTab.vue
@@ -363,7 +363,11 @@
</template>
</BasicTable>
</TabPane>
- <TabPane key="2"
:tab="t('spark.app.detail.detailTab.detailTabName.option')">
+ <TabPane
+ key="2"
+ :tab="t('spark.app.detail.detailTab.detailTabName.option')"
+ v-if="app.options"
+ >
<Descriptions bordered size="middle" layout="vertical">
<DescriptionItem v-for="(v, k) in JSON.parse(app.options || '{}')"
:key="k" :label="k">
{{ v }}
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/components/State.tsx
b/streampark-console/streampark-console-webapp/src/views/spark/app/components/State.tsx
index 5a56faafc..ad6fdf2af 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/components/State.tsx
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/components/State.tsx
@@ -25,88 +25,93 @@ const { t } = useI18n();
/* state map*/
export const stateMap = {
- [AppStateEnum.ADDED]: { color: '#2f54eb', title:
t('flink.app.runState.added') },
+ [AppStateEnum.ADDED]: { color: '#2f54eb', title:
t('spark.app.runState.added') },
[AppStateEnum.NEW_SAVING]: {
color: '#738df8',
- title: t('flink.app.runState.saving'),
+ title: t('spark.app.runState.saving'),
class: 'status-processing-initializing',
},
- [AppStateEnum.NEW]: { color: '#2f54eb', title:
t('flink.app.runState.created') },
+ [AppStateEnum.NEW]: { color: '#2f54eb', title: t('spark.app.runState.new') },
[AppStateEnum.STARTING]: {
color: '#1AB58E',
- title: t('flink.app.runState.starting'),
+ title: t('spark.app.runState.starting'),
class: 'status-processing-starting',
},
- [AppStateEnum.SUBMITTE]: {
+ [AppStateEnum.SUBMITTED]: {
color: '#13c2c2',
- title: t('flink.app.runState.submitted'),
+ title: t('spark.app.runState.submitted'),
class: 'status-processing-restarting',
},
- [AppStateEnum.ACCEPTE]: {
+ [AppStateEnum.ACCEPTED]: {
color: '#52c41a',
- title: t('flink.app.runState.accept'),
+ title: t('spark.app.runState.accept'),
class: 'status-processing-running',
},
- [AppStateEnum.RUNNIN]: {
+ [AppStateEnum.SUCCEEDED]: {
+ color: '#52c41a',
+ title: t('spark.app.runState.success'),
+ class: 'status-processing-success',
+ },
+ [AppStateEnum.RUNNING]: {
color: '#fa541c',
- title: t('flink.app.runState.running'),
+ title: t('spark.app.runState.running'),
class: 'status-processing-failing',
},
- [AppStateEnum.FINISHE]: { color: '#1890ff', title:
t('flink.app.runState.finished') },
- [AppStateEnum.FAILE]: { color: '#f5222d', title:
t('flink.app.runState.failed') },
- [AppStateEnum.LOS]: { color: '#333333', title: t('flink.app.runState.lost')
},
+ [AppStateEnum.FINISHED]: { color: '#1890ff', title:
t('spark.app.runState.finished') },
+ [AppStateEnum.FAILED]: { color: '#f5222d', title:
t('spark.app.runState.failed') },
+ [AppStateEnum.LOST]: { color: '#333333', title: t('spark.app.runState.lost')
},
[AppStateEnum.MAPPING]: {
color: '#13c2c2',
- title: t('flink.app.runState.mapping'),
+ title: t('spark.app.runState.mapping'),
class: 'status-processing-restarting',
},
- [AppStateEnum.OTHER]: { color: '#722ed1', title:
t('flink.app.runState.other') },
+ [AppStateEnum.OTHER]: { color: '#722ed1', title:
t('spark.app.runState.other') },
[AppStateEnum.REVOKED]: {
color: '#eb2f96',
- title: t('flink.app.runState.revoked'),
+ title: t('spark.app.runState.revoked'),
class: 'status-processing-reconciling',
},
[AppStateEnum.STOPPING]: {
color: '#738df8',
- title: t('flink.app.runState.stopping'),
+ title: t('spark.app.runState.stopping'),
class: 'status-processing-initializing',
},
- [AppStateEnum.KILLED]: { color: '#8E50FF', title:
t('flink.app.runState.killed') },
+ [AppStateEnum.KILLED]: { color: '#8E50FF', title:
t('spark.app.runState.killed') },
};
/* option state map*/
export const optionStateMap = {
[OptionStateEnum.RELEASING]: {
color: '#1ABBDC',
- title: t('flink.app.releaseState.releasing'),
+ title: t('spark.app.releaseState.releasing'),
class: 'status-processing-deploying',
},
[OptionStateEnum.STOPPING]: {
color: '#faad14',
- title: t('flink.app.runState.cancelling'),
+ title: t('spark.app.runState.cancelling'),
class: 'status-processing-cancelling',
},
[OptionStateEnum.STARTING]: {
color: '#1AB58E',
- title: t('flink.app.runState.starting'),
+ title: t('spark.app.runState.starting'),
class: 'status-processing-starting',
},
};
/* release state map*/
export const releaseStateMap = {
- [ReleaseStateEnum.FAILED]: { color: '#f5222d', title:
t('flink.app.releaseState.failed') },
- [ReleaseStateEnum.DONE]: { color: '#52c41a', title:
t('flink.app.releaseState.success') },
- [ReleaseStateEnum.NEED_RELEASE]: { color: '#fa8c16', title:
t('flink.app.releaseState.waiting') },
+ [ReleaseStateEnum.FAILED]: { color: '#f5222d', title:
t('spark.app.releaseState.failed') },
+ [ReleaseStateEnum.DONE]: { color: '#52c41a', title:
t('spark.app.releaseState.success') },
+ [ReleaseStateEnum.NEED_RELEASE]: { color: '#fa8c16', title:
t('spark.app.releaseState.waiting') },
[ReleaseStateEnum.RELEASING]: {
color: '#52c41a',
- title: t('flink.app.releaseState.releasing'),
+ title: t('spark.app.releaseState.releasing'),
class: 'status-processing-deploying',
},
- [ReleaseStateEnum.NEED_RESTART]: { color: '#fa8c16', title:
t('flink.app.releaseState.pending') },
+ [ReleaseStateEnum.NEED_RESTART]: { color: '#fa8c16', title:
t('spark.app.releaseState.pending') },
[ReleaseStateEnum.NEED_ROLLBACK]: {
color: '#fa8c16',
- title: t('flink.app.releaseState.waiting'),
+ title: t('spark.app.releaseState.waiting'),
},
};
@@ -206,7 +211,7 @@ export default defineComponent({
});
}
const renderOtherOption = () => {
- if ([AppStateEnum.RUNNIN,
AppStateEnum.FAILE].includes(unref(data)?.state)) {
+ if ([AppStateEnum.RUNNING,
AppStateEnum.FAILED].includes(unref(data)?.state)) {
return (
<div class="bold-tag">
{unref(data).totalTask && (
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/create.vue
b/streampark-console/streampark-console-webapp/src/views/spark/app/create.vue
index 043ba8690..9030436ff 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/create.vue
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/create.vue
@@ -63,7 +63,7 @@
appType: AppTypeEnum.APACHE_SPARK,
versionId: values.versionId,
sparkSql: null,
- jar: values.teamResource,
+ jar: values.jar,
mainClass: values.mainClass,
appName: values.appName,
tags: values.tags,
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/data/detail.data.ts
b/streampark-console/streampark-console-webapp/src/views/spark/app/data/detail.data.ts
index c7921cd14..97413d76b 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/data/detail.data.ts
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/data/detail.data.ts
@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { BasicColumn } from '/@/components/Table/src/types/table';
-import { Tag, TypographyParagraph } from 'ant-design-vue';
+import { TypographyParagraph } from 'ant-design-vue';
import { DescItem } from '/@/components/Description';
import { h } from 'vue';
import State from '../components/State';
@@ -23,6 +23,7 @@ import Icon from '/@/components/Icon';
import { dateToDuration } from '/@/utils/dateUtil';
import { JobTypeEnum } from '/@/enums/sparkEnum';
import { useI18n } from '/@/hooks/web/useI18n';
+import { sparkJobTypeMap } from '../hooks/useSparkRender';
const { t } = useI18n();
export const getDescSchema = (): DescItem[] => {
@@ -37,18 +38,11 @@ export const getDescSchema = (): DescItem[] => {
{
field: 'jobType',
label: t('spark.app.developmentMode'),
- render: (curVal) =>
- h(
- 'div',
- { class: 'bold-tag' },
- h(Tag, { color: curVal === 1 ? '#545454' : '#0C7EF2', class:
'mr-8px' }, () =>
- curVal === 1 ? 'Custom Code' : 'Spark SQL',
- ),
- ),
+ render: (curVal) => sparkJobTypeMap[+curVal]?.label || '-',
},
{
- field: 'module',
- label: t('spark.app.module'),
+ field: 'jar',
+ label: t('spark.app.resource'),
show: (data) => data.jobType != JobTypeEnum.SQL,
},
{
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/detail.vue
b/streampark-console/streampark-console-webapp/src/views/spark/app/detail.vue
index 004bf65c5..455476f70 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/detail.vue
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/detail.vue
@@ -15,25 +15,25 @@
limitations under the License.
-->
<script setup lang="ts">
- import { onUnmounted, reactive, h, unref, ref, onMounted, computed } from
'vue';
+ import { onUnmounted, reactive, unref, ref, onMounted, computed } from 'vue';
import { AppStateEnum, ExecModeEnum } from '/@/enums/sparkEnum';
import { useI18n } from '/@/hooks/web/useI18n';
- import { fetchAppExternalLink } from '/@/api/setting/externalLink';
+ // import { fetchAppExternalLink } from '/@/api/setting/externalLink';
import { ExternalLink } from '/@/api/setting/types/externalLink.type';
- import { useModal } from '/@/components/Modal';
+ // import { useModal } from '/@/components/Modal';
import { PageWrapper } from '/@/components/Page';
import { Description, useDescription } from '/@/components/Description';
import { Icon } from '/@/components/Icon';
import { useRoute, useRouter } from 'vue-router';
import { useIntervalFn } from '@vueuse/core';
- import { Tooltip, Divider, Space } from 'ant-design-vue';
+ import { Divider, Space } from 'ant-design-vue';
import { handleView } from './utils';
- import { Button } from '/@/components/Button';
+ // import { Button } from '/@/components/Button';
import { getDescSchema } from './data/detail.data';
import { fetchSparkConfList } from '/@/api/spark/conf';
import Mergely from './components/Mergely.vue';
import DetailTab from './components/DetailTab.vue';
- import RequestModal from '/@/views/flink/app/components/RequestModal';
+ // import RequestModal from '/@/views/flink/app/components/RequestModal';
import { createDetailProviderContext } from './hooks/useDetailContext';
import { useDrawer } from '/@/components/Drawer';
import { LinkBadge } from '/@/components/LinkBadge';
@@ -69,47 +69,47 @@
const [registerDescription] = useDescription({
schema: [
...(getDescSchema() as any),
- {
- field: 'resetApi',
- span: 2,
- label: h('div', null, [
- t('spark.app.detail.resetApi'),
- h(Tooltip, { title: t('spark.app.detail.resetApiToolTip'),
placement: 'top' }, () =>
- h(Icon, { icon: 'ant-design:question-circle-outlined', class:
'pl-5px', color: 'red' }),
- ),
- ]),
- render: () => [
- h(
- Button,
- {
- type: 'primary',
- size: 'small',
- class: 'mx-3px px-5px',
- onClick: () =>
- openApiModal(true, {
- name: 'flinkStart',
- app,
- }),
- },
- () => [t('spark.app.detail.copyStartcURL')],
- ),
- h(
- Button,
- {
- type: 'primary',
- size: 'small',
- class: 'mx-3px px-5px',
- onClick: () => {
- openApiModal(true, {
- name: 'flinkCancel',
- app,
- });
- },
- },
- () => [t('spark.app.detail.copyCancelcURL')],
- ),
- ],
- },
+ // {
+ // field: 'resetApi',
+ // span: 2,
+ // label: h('div', null, [
+ // t('spark.app.detail.resetApi'),
+ // h(Tooltip, { title: t('spark.app.detail.resetApiToolTip'),
placement: 'top' }, () =>
+ // h(Icon, { icon: 'ant-design:question-circle-outlined', class:
'pl-5px', color: 'red' }),
+ // ),
+ // ]),
+ // render: () => [
+ // h(
+ // Button,
+ // {
+ // type: 'primary',
+ // size: 'small',
+ // class: 'mx-3px px-5px',
+ // onClick: () =>
+ // openApiModal(true, {
+ // name: 'flinkStart',
+ // app,
+ // }),
+ // },
+ // () => [t('spark.app.detail.copyStartcURL')],
+ // ),
+ // h(
+ // Button,
+ // {
+ // type: 'primary',
+ // size: 'small',
+ // class: 'mx-3px px-5px',
+ // onClick: () => {
+ // openApiModal(true, {
+ // name: 'flinkCancel',
+ // app,
+ // });
+ // },
+ // },
+ // () => [t('spark.app.detail.copyCancelcURL')],
+ // ),
+ // ],
+ // },
],
data: app,
layout: 'vertical',
@@ -117,7 +117,7 @@
});
const [registerConfDrawer] = useDrawer();
- const [registerOpenApi, { openModal: openApiModal }] = useModal();
+ // const [registerOpenApi, { openModal: openApiModal }] = useModal();
/* Flink Web UI */
function handleFlinkView() {
@@ -171,20 +171,20 @@
yarn.value = await fetchSparkYarn();
}
- async function getExternalLinks() {
- const { data: links } = await fetchAppExternalLink({ appId:
route.query.appId as string });
- externalLinks.value = links.data;
- }
+ // async function getExternalLinks() {
+ // const { data: links } = await fetchAppExternalLink({ appId:
route.query.appId as string });
+ // externalLinks.value = links.data;
+ // }
onMounted(() => {
- getExternalLinks();
+ // getExternalLinks();
});
onUnmounted(() => {
pause();
});
- const appNotRunning = computed(() => app.state !== AppStateEnum.RUNNIN ||
yarn.value === null);
+ const appNotRunning = computed(() => app.state !== AppStateEnum.RUNNING ||
yarn.value === null);
</script>
<template>
<PageWrapper content-full-height content-background contentClass="p-24px">
@@ -218,7 +218,7 @@
<Divider class="mt-20px -mb-17px" />
<DetailTab :app="app" :tabConf="detailTabs" />
<Mergely @register="registerConfDrawer" :readOnly="true" />
- <RequestModal @register="registerOpenApi" />
+ <!-- <RequestModal @register="registerOpenApi" /> -->
</PageWrapper>
</template>
<style lang="less">
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/edit.vue
b/streampark-console/streampark-console-webapp/src/views/spark/app/edit.vue
index 743a8ae92..baf967252 100644
--- a/streampark-console/streampark-console-webapp/src/views/spark/app/edit.vue
+++ b/streampark-console/streampark-console-webapp/src/views/spark/app/edit.vue
@@ -56,12 +56,12 @@
/* custom mode */
async function handleCustomJobMode(values: Recordable) {
const params = {
- jobType: JobTypeEnum.SQL,
+ jobType: JobTypeEnum.JAR,
executionMode: values.executionMode,
appType: AppTypeEnum.APACHE_SPARK,
versionId: values.versionId,
sparkSql: null,
- jar: values.teamResource,
+ jar: values.jar,
mainClass: values.mainClass,
appName: values.appName,
tags: values.tags,
@@ -121,17 +121,20 @@
}
/* send create request */
async function handleUpdateAction(params: Recordable) {
- const param: SparkApplication = {};
+ const fetchParams: SparkApplication = {};
for (const k in params) {
const v = params[k];
if (v != null && v !== undefined) {
- param[k] = v;
+ fetchParams[k] = v;
}
}
const socketId = buildUUID();
ls.set('DOWN_SOCKET_ID', socketId);
- Object.assign(param, { socketId });
- const updated = await fetchUpdateSparkApp(params);
+ Object.assign(fetchParams, {
+ socketId,
+ id: route.query.appId,
+ });
+ const updated = await fetchUpdateSparkApp(fetchParams);
if (updated) {
createMessage.success(t('spark.app.success'));
go('/spark/app');
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useAppFormSchema.tsx
b/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useAppFormSchema.tsx
index 5a707b41a..e0e1a677f 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useAppFormSchema.tsx
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useAppFormSchema.tsx
@@ -14,24 +14,31 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { computed, h, onMounted, ref, unref, type Ref } from 'vue';
+import { computed, onMounted, ref, unref, type Ref } from 'vue';
import type { FormSchema } from '/@/components/Form';
import { useI18n } from '/@/hooks/web/useI18n';
import { AppExistsStateEnum, JobTypeEnum } from '/@/enums/sparkEnum';
import { ResourceFromEnum } from '/@/enums/flinkEnum';
-import { SvgIcon } from '/@/components/Icon';
import type { SparkEnv } from '/@/api/spark/home.type';
import type { RuleObject } from 'ant-design-vue/lib/form';
import type { StoreValue } from 'ant-design-vue/lib/form/interface';
-import { renderIsSetConfig, renderStreamParkResource, renderYarnQueue } from
'./useSparkRender';
+import {
+ renderIsSetConfig,
+ renderStreamParkResource,
+ renderYarnQueue,
+ sparkJobTypeMap,
+} from './useSparkRender';
import { executionModes } from '../data';
import { useDrawer } from '/@/components/Drawer';
import { fetchVariableAll } from '/@/api/resource/variable';
import { fetchTeamResource } from '/@/api/resource/upload';
import { fetchCheckSparkName } from '/@/api/spark/app';
+import { useRoute } from 'vue-router';
+import { Alert } from 'ant-design-vue';
export function useSparkSchema(sparkEnvs: Ref<SparkEnv[]>) {
const { t } = useI18n();
+ const route = useRoute();
const teamResource = ref<Array<any>>([]);
const suggestions = ref<Array<{ text: string; description: string; value:
string }>>([]);
@@ -42,9 +49,9 @@ export function useSparkSchema(sparkEnvs: Ref<SparkEnv[]>) {
return
Promise.reject(t('spark.app.addAppTips.appNameIsRequiredMessage'));
}
const params = { appName: value };
- // if (edit?.appId) {
- // Object.assign(params, { id: edit.appId });
- // }
+ if (route.query?.appId) {
+ Object.assign(params, { id: route.query?.appId });
+ }
const res = await fetchCheckSparkName(params);
switch (parseInt(res)) {
case AppExistsStateEnum.NO:
@@ -60,53 +67,61 @@ export function useSparkSchema(sparkEnvs: Ref<SparkEnv[]>) {
}
}
const getJobTypeOptions = () => {
- return [
- {
- label: h('div', {}, [
- h(SvgIcon, { name: 'code', color: '#108ee9' }, ''),
- h('span', { class: 'pl-10px' }, 'Spark Jar'),
- ]),
- value: String(JobTypeEnum.JAR),
- },
- {
- label: h('div', {}, [
- h(SvgIcon, { name: 'fql', color: '#108ee9' }, ''),
- h('span', { class: 'pl-10px' }, 'Spark SQL'),
- ]),
- value: String(JobTypeEnum.SQL),
- },
- {
- label: h('div', {}, [
- h(SvgIcon, { name: 'py', color: '#108ee9' }, ''),
- h('span', { class: 'pl-10px' }, 'PySpark'),
- ]),
- value: String(JobTypeEnum.PYSPARK),
- },
- ];
+ return Object.values(sparkJobTypeMap);
};
- const formSchema = computed((): FormSchema[] => {
- return [
- {
- field: 'jobType',
- label: t('spark.app.developmentMode'),
- component: 'Select',
- componentProps: ({ formModel }) => {
- return {
- placeholder: t('spark.app.addAppTips.developmentModePlaceholder'),
- options: getJobTypeOptions(),
- onChange: (value) => {
- if (value != JobTypeEnum.SQL) {
- formModel.resourceFrom = String(ResourceFromEnum.PROJECT);
- }
+ const getJobTypeSchema = computed((): FormSchema[] => {
+ if (route.query.appId) {
+ return [
+ {
+ field: 'jobType',
+ label: t('spark.app.developmentMode'),
+ component: 'Input',
+ render: ({ model }) => {
+ const jobOptions = getJobTypeOptions();
+ return (
+ <Alert
+ type="info"
+ v-slots={{
+ message: () => jobOptions.find((v) => v.value ==
model.jobType)?.label ?? '',
+ }}
+ ></Alert>
+ );
+ },
+ },
+ ];
+ } else {
+ return [
+ {
+ field: 'jobType',
+ label: t('spark.app.developmentMode'),
+ component: 'Select',
+ componentProps: ({ formModel }) => {
+ return {
+ placeholder:
t('spark.app.addAppTips.developmentModePlaceholder'),
+ options: getJobTypeOptions(),
+ onChange: (value) => {
+ if (value != JobTypeEnum.SQL) {
+ formModel.resourceFrom = String(ResourceFromEnum.PROJECT);
+ }
+ },
+ };
+ },
+ defaultValue: JobTypeEnum.SQL,
+ rules: [
+ {
+ required: true,
+ message:
t('spark.app.addAppTips.developmentModeIsRequiredMessage'),
+ type: 'number',
},
- };
+ ],
},
- defaultValue: String(JobTypeEnum.SQL),
- rules: [
- { required: true, message:
t('spark.app.addAppTips.developmentModeIsRequiredMessage') },
- ],
- },
+ ];
+ }
+ });
+ const formSchema = computed((): FormSchema[] => {
+ return [
+ ...getJobTypeSchema.value,
{
field: 'executionMode',
label: t('spark.app.executionMode'),
@@ -153,11 +168,12 @@ export function useSparkSchema(sparkEnvs:
Ref<SparkEnv[]>) {
rules: [{ required: true, message:
t('spark.app.addAppTips.sparkSqlIsRequiredMessage') }],
},
{
- field: 'teamResource',
+ field: 'jar',
label: t('spark.app.resource'),
component: 'Select',
render: ({ model }) => renderStreamParkResource({ model, resources:
unref(teamResource) }),
ifShow: ({ values }) => values.jobType == JobTypeEnum.JAR,
+ rules: [{ required: true, message:
t('spark.app.addAppTips.sparkAppRequire') }],
},
{
field: 'mainClass',
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkColumns.ts
b/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkColumns.ts
index 97739fcd3..faa980af6 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkColumns.ts
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkColumns.ts
@@ -55,7 +55,7 @@ export const useSparkColumns = () => {
},
{
title: t('spark.app.sparkVersion'),
- dataIndex: 'sparkVersion ',
+ dataIndex: 'sparkVersion',
width: unref(tableColumnWidth).sparkVersion,
},
{
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkRender.tsx
b/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkRender.tsx
index 2f76021c6..b3b2acb29 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkRender.tsx
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkRender.tsx
@@ -20,7 +20,7 @@ import { Icon, SvgIcon } from '/@/components/Icon';
import Mergely from '../components/Mergely.vue';
import { Alert, Dropdown, Input, Menu, Select, Switch, Tag } from
'ant-design-vue';
import { SettingTwoTone } from '@ant-design/icons-vue';
-import { unref } from 'vue';
+import { h, unref } from 'vue';
import { decodeByBase64 } from '/@/utils/cipher';
import { SelectValue } from 'ant-design-vue/lib/select';
import { useI18n } from '/@/hooks/web/useI18n';
@@ -28,6 +28,7 @@ import { fetchYarnQueueList } from '/@/api/setting/yarnQueue';
import { ApiSelect } from '/@/components/Form';
import { ResourceTypeEnum } from '/@/views/resource/upload/upload.data';
import { fetchSparkConfTemplate } from '/@/api/spark/conf';
+import { JobTypeEnum } from '/@/enums/sparkEnum';
const { t } = useI18n();
/* render input dropdown component */
@@ -272,10 +273,8 @@ export const renderStreamParkResource = ({ model,
resources }) => {
show-search
allow-clear
optionFilterProp="label"
- mode="multiple"
- max-tag-count={3}
- onChange={(value) => (model.teamResource = value)}
- value={model.teamResource}
+ onChange={(value) => (model.jar = value)}
+ value={model.jar}
placeholder={t('flink.app.resourcePlaceHolder')}
>
{renderOptions()}
@@ -324,3 +323,27 @@ export const renderStreamParkJarApp = ({ model, resources
}) => {
</div>
);
};
+
+export const sparkJobTypeMap = {
+ [JobTypeEnum.JAR]: {
+ label: h('div', {}, [
+ h(SvgIcon, { name: 'code', color: '#108ee9' }, ''),
+ h('span', { class: 'pl-10px' }, 'Spark Jar'),
+ ]),
+ value: JobTypeEnum.JAR,
+ },
+ [JobTypeEnum.SQL]: {
+ label: h('div', {}, [
+ h(SvgIcon, { name: 'fql', color: '#108ee9' }, ''),
+ h('span', { class: 'pl-10px' }, 'Spark SQL'),
+ ]),
+ value: JobTypeEnum.SQL,
+ },
+ [JobTypeEnum.PYSPARK]: {
+ label: h('div', {}, [
+ h(SvgIcon, { name: 'py', color: '#108ee9' }, ''),
+ h('span', { class: 'pl-10px' }, 'PySpark'),
+ ]),
+ value: JobTypeEnum.PYSPARK,
+ },
+};
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkTableAction.ts
b/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkTableAction.ts
index 912936b59..f20e72907 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkTableAction.ts
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkTableAction.ts
@@ -98,7 +98,7 @@ export const useSparkTableAction = (handlePageDataReload: Fn,
optionApps: Record
{
tooltip: { title: t('spark.app.operation.cancel') },
ifShow:
- record.state == AppStateEnum.RUNNIN && record['optionState'] ==
OptionStateEnum.NONE,
+ record.state == AppStateEnum.RUNNING && record['optionState'] ==
OptionStateEnum.NONE,
auth: 'app:cancel',
icon: 'ant-design:pause-circle-outlined',
popConfirm: {
@@ -136,12 +136,12 @@ export const useSparkTableAction = (handlePageDataReload:
Fn, optionApps: Record
label: t('spark.app.operation.remapping'),
ifShow: [
AppStateEnum.ADDED,
- AppStateEnum.FAILE,
+ AppStateEnum.FAILED,
AppStateEnum.STOPPING,
AppStateEnum.KILLED,
AppStateEnum.SUCCEEDED,
- AppStateEnum.FINISHE,
- AppStateEnum.LOS,
+ AppStateEnum.FINISHED,
+ AppStateEnum.LOST,
].includes(record.state as AppStateEnum),
auth: 'app:mapping',
icon: 'ant-design:deployment-unit-outlined',
@@ -157,9 +157,9 @@ export const useSparkTableAction = (handlePageDataReload:
Fn, optionApps: Record
!isNullAndUnDef(record.state) &&
[
AppStateEnum.ADDED,
- AppStateEnum.FAILE,
- AppStateEnum.FINISHE,
- AppStateEnum.LOS,
+ AppStateEnum.FAILED,
+ AppStateEnum.FINISHED,
+ AppStateEnum.LOST,
AppStateEnum.SUCCEEDED,
AppStateEnum.KILLED,
].includes(record.state),
@@ -253,7 +253,7 @@ export const useSparkTableAction = (handlePageDataReload:
Fn, optionApps: Record
showSubmitButton: false,
showResetButton: false,
async resetFunc() {
- router.push({ path: '/spark/app/create' });
+ router.push({ path: '/spark/app/add' });
},
schemas: [
{
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/index.vue
b/streampark-console/streampark-console-webapp/src/views/spark/app/index.vue
index e56021a49..d0dd6cb31 100644
--- a/streampark-console/streampark-console-webapp/src/views/spark/app/index.vue
+++ b/streampark-console/streampark-console-webapp/src/views/spark/app/index.vue
@@ -198,7 +198,7 @@
/* view */
async function handleJobView(app: SparkApplication) {
// Task is running, restarting, in savePoint
- if (app.state && [AppStateEnum.RUNNIN].includes(app.state)) {
+ if (app.state && [AppStateEnum.RUNNING].includes(app.state)) {
// yarn-per-job|yarn-session|yarn-application
await handleView(app, unref(yarn));
}
@@ -323,7 +323,7 @@
</Row>
</Form>
<div v-auth="'app:create'">
- <Button type="primary" @click="() => router.push({ path:
'/spark/app/create' })">
+ <Button type="primary" @click="() => router.push({ path:
'/spark/app/add' })">
<PlusOutlined />
{{ t('common.add') }}
</Button>
@@ -344,7 +344,7 @@
<span
class="link"
:class="{
- 'cursor-pointer': [AppStateEnum.RUNNIN].includes(record.state),
+ 'cursor-pointer': [AppStateEnum.RUNNING].includes(record.state),
}"
@click="handleJobView(record)"
>
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/utils/index.ts
b/streampark-console/streampark-console-webapp/src/views/spark/app/utils/index.ts
index 99eff9459..e311480ea 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/utils/index.ts
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/utils/index.ts
@@ -107,9 +107,9 @@ export async function handleView(app: SparkApplication,
yarn: Nullable<string>)
export function handleIsStart(app: Recordable, optionApps: Recordable) {
const status = [
AppStateEnum.ADDED,
- AppStateEnum.FAILE,
- AppStateEnum.FINISHE,
- AppStateEnum.LOS,
+ AppStateEnum.FAILED,
+ AppStateEnum.FINISHED,
+ AppStateEnum.LOST,
AppStateEnum.REVOKED,
AppStateEnum.SUCCEEDED,
AppStateEnum.KILLED,
