[Feature] Enhance job submission frontend

paimon-web-ui/package.json

@@ -19,7 +19,7 @@
     "@antv/x6-plugin-dnd": "^2.1.1",
     "@antv/x6-vue-shape": "^2.1.1",
     "dart-sass": "^1.25.0",
-    "dayjs": "^1.11.10",
+    "dayjs": "^1.11.11",
     "lodash": "^4.17.21",
     "mitt": "^3.0.1",
     "monaco-editor": "^0.43.0",

paimon-web-ui/src/api/models/cluster/index.ts

@@ -16,7 +16,7 @@ specific language governing permissions and limitations
 under the License. */
 
 import httpRequest from '../../request'
-import type { Cluster, ClusterDTO, ClusterNameParams } from './types'
+import type {Cluster, ClusterDTO, ClusterNameParams} from './types'
 import type { ResponseOptions } from '@/api/types'
 
 /**
@@ -29,6 +29,17 @@ export function getClusterList() {
   })
 }
 
+/**
+ * # List Cluster by ClusterType
+ */
+export function getClusterListByType(type: string, pageNum: number, pageSize: number) {
+  return httpRequest.get('/cluster/list', {
+    type,
+    pageNum,
+    pageSize
+  });
+}
+
 /**
  * # Create Cluster
  */
@@ -40,7 +51,7 @@ export function createCluster() {
 }
 
 /**
- * # Update user
+ * # Update Cluster
  */
 export function updateCluster() {
   return httpRequest.createHooks!<unknown, ClusterDTO>({
@@ -50,7 +61,7 @@ export function updateCluster() {
 }
 
 /**
- * # delete a Cluster
+ * # Delete a Cluster
  */
 export function deleteCluster(userId: number) {
   return httpRequest.delete!<unknown, ClusterDTO>(`/cluster/${userId}`)

paimon-web-ui/src/api/models/job/index.ts

@@ -0,0 +1,55 @@
+/* Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License. */
+
+import httpRequest from '../../request'
+import type {JobSubmitDTO, Job, ResultFetchDTO, JobResultData, JobStatus, StopJobDTO} from "@/api/models/job/types/job"
+import type {ResponseOptions} from "@/api/types"
+
+/**
+ * # Submit a job
+ */
+export function submitJob(jobSubmitDTO: JobSubmitDTO) {
+  return httpRequest.post<JobSubmitDTO, ResponseOptions<Job>>('/job/submit', jobSubmitDTO)
+}
+
+/**
+ * # Fetch the result of a submitted job
+ */
+export function fetchResult(resultFetchDTO: ResultFetchDTO) {
+  return httpRequest.post<ResultFetchDTO, ResponseOptions<JobResultData>>('/job/fetch', resultFetchDTO)
+}
+
+/**
+ * # Refresh the status of jobs
+ */
+export function refreshJobStatus() {
+  return httpRequest.post('/job/refresh')
+}
+
+/**
+ * # Fetch the status of a specific job by its ID
+ */
+export function getJobStatus(jobId: string) {
+  return httpRequest.get<string, ResponseOptions<JobStatus>>(`/job/status/get/${jobId}`)
+}
+
+/**
+ * # Stop a job
+ */
+export function stopJob(stopJobDTO: StopJobDTO) {
+  return httpRequest.post<StopJobDTO, ResponseOptions<void>>('/job/stop', stopJobDTO)
+}

paimon-web-ui/src/api/models/job/types/job.ts

@@ -0,0 +1,75 @@
+/* Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License. */
+
+export interface Job {
+  submitId: string
+  jobId: string
+  jobName: string
+  type: string
+  executeMode: string
+  clusterId: string
+  sessionId: string
+  uid: number
+  status?: string
+  shouldFetchResult: boolean
+  resultData: ResultDataItem[]
+  token: number
+  startTime: string
+  endTime: string
+}
+
+export interface JobSubmitDTO {
+  jobName: string
+  taskType: string
+  clusterId: string
+  config?: {
+    [key: string]: string
+  }
+  statements: string
+  streaming: boolean
+}
+
+export interface JobResultData {
+  resultData: ResultDataItem[]
+  columns: number
+  rows: number
+  token: number
+}
+
+export interface ResultDataItem {
+  [key: string]: any
+}
+
+export interface ResultFetchDTO {
+  submitId: string
+  clusterId: string
+  sessionId: string
+  taskType: string
+  token: number
+}
+
+export interface JobStatus {
+  jobId: string
+  status: string
+}
+
+export interface StopJobDTO {
+  clusterId: string
+  jobId: string
+  taskType: string
+  withSavepoint: boolean
+}

paimon-web-ui/src/locales/en/modules/playground.ts

@@ -49,4 +49,10 @@ export default {
   schedule_refresh: 'Schedule Refresh',
   download: 'Export Data',
   copy: 'Copy Data',
+  job_submission_successfully: 'Job Submitted Successfully',
+  job_submission_failed: 'Job Submitted Failed',
+  no_data: 'No Data',
+  job_stopping_successfully: 'Job Stopped Successfully',
+  job_stopping_failed: 'Job Stopped Failed',
+  data_copied_successfully: 'Data Copied to Clipboard',
 }

paimon-web-ui/src/locales/zh/modules/playground.ts

@@ -49,4 +49,10 @@ export default {
   schedule_refresh: '定时刷新',
   download: '导出数据',
   copy: '复制数据',
+  job_submission_successfully: 'SQL 任务提交成功',
+  job_submission_failed: '任务提交失败',
+  no_data: '暂无数据，请重新执行SQL',
+  job_stopping_successfully: '停止任务成功',
+  job_stopping_failed: '停止任务失败',
+  data_copied_successfully: '数据已复制到剪贴板',
 }

paimon-web-ui/src/store/job/index.ts

@@ -0,0 +1,97 @@
+/* Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License. */
+
+import type { ExecutionMode } from './type'
+import type { Job, JobResultData } from '@/api/models/job/types/job'
+
+export interface JobState {
+  executionMode: ExecutionMode
+  currentJob: Job | null
+  jobResultData: JobResultData | null
+  jobStatus: string,
+  executionTime: string
+}
+
+export const useJobStore = defineStore({
+  id: 'job',
+  state: (): JobState => ({
+    executionMode: 'Streaming',
+    currentJob: null,
+    jobResultData: null,
+    jobStatus: '',
+    executionTime: '0m:0s'
+  }),
+  persist: false,
+  getters: {
+    getExecutionMode(): ExecutionMode {
+      return this.executionMode
+    },
+    getCurrentJob(): Job | null {
+      return this.currentJob
+    },
+    getJobResultData(): JobResultData | null {
+      return this.jobResultData
+    },
+    getColumns(): number {
+      if (this.currentJob && this.currentJob.resultData && this.currentJob.resultData.length > 0) {
+        return Object.keys(this.currentJob.resultData[0]).length
+      }else if (this.jobResultData && this.jobResultData.resultData && this.jobResultData.resultData.length > 0) {
+        return Object.keys(this.jobResultData.resultData[0]).length
+      } else {
+        return 0
+      }
+    },
+    getRows(): number {
+      if (this.currentJob && this.currentJob.resultData && this.currentJob.resultData.length > 0) {
+        return this.currentJob.resultData.length
+      }else if (this.jobResultData && this.jobResultData.resultData && this.jobResultData.resultData.length > 0) {
+        return this.jobResultData.resultData.length
+      } else {
+        return 0
+      }
+    },
+    getJobStatus(): string {
+      return this.jobStatus
+    },
+    getExecutionTime(): string {
+      return this.executionTime
+    }
+  },
+  actions: {
+    setExecutionMode(executionMode: ExecutionMode) {
+      this.executionMode = executionMode
+    },
+    setCurrentJob(currentJob: Job) {
+      this.currentJob = currentJob
+    },
+    setJobResultData(jobResultData: JobResultData) {
+      this.jobResultData = jobResultData
+    },
+    setJobStatus(jobStatus: string) {
+      this.jobStatus = jobStatus
+    },
+    setExecutionTime(executionTime: string) {
+      this.executionTime = executionTime
+    },
+    resetCurrentResult() {
+      this.currentJob = null
+      this.jobResultData = null
+      this.jobStatus = ''
+      this.executionTime = '0m:0s'
+    },
+  }
+})

paimon-web-ui/src/store/job/type.ts

@@ -0,0 +1,18 @@
+/* Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License. */
+
+export type ExecutionMode = 'Streaming' | 'Batch'

paimon-web-ui/src/views/playground/components/query/components/console/components/controls/index.module.scss

@@ -43,6 +43,10 @@ under the License. */
     color: $color-gray;
   }
 
+  .stop-button-running {
+    color: #D94F4F
+  }
+
   .table-action-bar-text {
     color: $color-gray;
   }