[Improve]: spark edit mode & fix create error (#4064)

apache · Sep 14, 2024 · 6ee7823 · 6ee7823
1 parent ff882bc
commit 6ee7823
Show file tree

Hide file tree

Showing 16 changed files with 249 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -15,14 +15,15 @@
  * 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';
 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,
     },
     {