[KYUUBI #7504][UI] Add a Batch management page to the Web UI

Author: wangzhigang1999

kyuubi-server/web-ui/src/api/batch/index.ts

@@ -0,0 +1,64 @@
+/*
+ * 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 request from '@/utils/request'
+import {
+  IBatch,
+  IBatchSearch,
+  ICloseBatchResponse,
+  IGetBatchesResponse,
+  IOperationLog
+} from './types'
+
+function cleanParams(params: IBatchSearch): IBatchSearch {
+  return Object.fromEntries(
+    Object.entries(params).filter(([, value]) => value !== '')
+  ) as IBatchSearch
+}
+
+export function getAllBatches(params: IBatchSearch) {
+  return request({
+    url: 'api/v1/batches',
+    method: 'get',
+    params: cleanParams(params)
+  }) as Promise<IGetBatchesResponse>
+}
+
+export function getBatch(batchId: string) {
+  return request({
+    url: `api/v1/batches/${batchId}`,
+    method: 'get'
+  }) as Promise<IBatch>
+}
+
+export function deleteBatch(batchId: string) {
+  return request({
+    url: `api/v1/batches/${batchId}`,
+    method: 'delete'
+  }) as Promise<ICloseBatchResponse>
+}
+
+export function getBatchLocalLog(batchId: string, from = 0, size = 1000) {
+  return request({
+    url: `api/v1/batches/${batchId}/localLog`,
+    method: 'get',
+    params: {
+      from,
+      size
+    }
+  }) as Promise<IOperationLog>
+}

kyuubi-server/web-ui/src/api/batch/types.ts

@@ -0,0 +1,61 @@
+/*
+ * 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 IBatchSearch {
+  batchType?: string
+  batchState?: string
+  batchUser?: string
+  batchName?: string
+  createTime?: number
+  endTime?: number
+  from?: number
+  size?: number
+  desc?: boolean
+}
+
+export interface IBatch {
+  id: string
+  user: string
+  batchType: string
+  name: string | null
+  appStartTime: number
+  appId: string | null
+  appUrl: string | null
+  appState: string | null
+  appDiagnostic: string | null
+  kyuubiInstance: string
+  state: string
+  createTime: number
+  endTime: number
+  batchInfo?: Record<string, string>
+}
+
+export interface IGetBatchesResponse {
+  from: number
+  total: number
+  batches: IBatch[]
+}
+
+export interface IOperationLog {
+  logRowSet: string[]
+  rowCount: number
+}
+
+export interface ICloseBatchResponse {
+  success: boolean
+  msg: string | null
+}

kyuubi-server/web-ui/src/layout/components/aside/types.ts

@@ -33,6 +33,10 @@ export const MENUS = [
         label: 'Operation',
         router: '/management/operation'
       },
+      {
+        label: 'Batch',
+        router: '/management/batch'
+      },
       {
         label: 'Engine',
         router: '/management/engine'

kyuubi-server/web-ui/src/locales/en_US/index.ts

@@ -23,10 +23,18 @@ export default {
   kyuubi_instance: 'Kyuubi Instance',
   session_id: 'Session ID',
   operation_id: 'Operation ID',
+  batch_id: 'Batch ID',
+  batch_name: 'Batch Name',
+  batch_type: 'Batch Type',
   create_time: 'Create Time',
+  end_time: 'End Time',
   start_time: 'State Time',
   complete_time: 'Completed Time',
   state: 'State',
+  app_id: 'Application ID',
+  app_url: 'Application URL',
+  app_state: 'Application State',
+  app_diagnostic: 'Application Diagnostic',
   duration: 'Duration',
   statement: 'Statement',
   engine_address: 'Engine Address',
@@ -39,6 +47,11 @@ export default {
   session_properties: 'Session Properties',
   no_data: 'No data',
   no_log: 'No log',
+  follow: 'Follow',
+  refresh: 'Refresh',
+  log_truncated: 'Only the latest {count} lines are shown',
+  previous: 'Previous',
+  next: 'Next',
   run_sql_tips: 'Run a SQL to get result',
   result: 'Result',
   log: 'Log',
@@ -60,7 +73,9 @@ export default {
     cancel_succeeded: 'Cancel {name} Succeeded',
     cancel_failed: 'Cancel {name} Failed',
     run_sql_failed: 'Run SQL Failed',
+    get_batches_failed: 'Get Batches Failed',
     get_sql_log_failed: 'Get SQL Log Failed',
+    get_batch_log_failed: 'Get Batch Log Failed',
     get_sql_result_failed: 'Get SQL Result Failed',
     get_sql_metadata_failed: 'Get SQL Metadata Failed'
   }

kyuubi-server/web-ui/src/locales/zh_CN/index.ts

@@ -23,10 +23,18 @@ export default {
   kyuubi_instance: '服务端实例',
   session_id: 'Session ID',
   operation_id: 'Operation ID',
+  batch_id: 'Batch ID',
+  batch_name: 'Batch 名称',
+  batch_type: 'Batch 类型',
   create_time: '创建时间',
+  end_time: '结束时间',
   start_time: '开始时间',
   complete_time: '完成时间',
   state: '状态',
+  app_id: 'Application ID',
+  app_url: 'Application 地址',
+  app_state: 'Application 状态',
+  app_diagnostic: 'Application 诊断',
   duration: '运行时间',
   statement: 'Statement',
   engine_address: 'Engine 地址',
@@ -39,6 +47,11 @@ export default {
   session_properties: 'Session 参数',
   no_data: '无数据',
   no_log: '无日志',
+  follow: '跟随',
+  refresh: '刷新',
+  log_truncated: '仅显示最新 {count} 行',
+  previous: '上一页',
+  next: '下一页',
   run_sql_tips: '请运行SQL获取结果',
   result: '结果',
   log: '日志',
@@ -60,7 +73,9 @@ export default {
     cancel_succeeded: '取消 {name} 成功',
     cancel_failed: '取消 {name} 失败',
     run_sql_failed: '运行SQL失败',
+    get_batches_failed: '获取 Batch 列表失败',
     get_sql_log_failed: '获取SQL日志失败',
+    get_batch_log_failed: '获取 Batch 日志失败',
     get_sql_result_failed: '获取SQL结果失败',
     get_sql_metadata_failed: '获取SQL元数据失败'
   }

kyuubi-server/web-ui/src/router/management/index.ts

@@ -35,6 +35,11 @@ const router = [
     path: '/management/operation',
     name: 'operation',
     component: () => import('@/views/management/operation/index.vue')
+  },
+  {
+    path: '/management/batch',
+    name: 'batch',
+    component: () => import('@/views/management/batch/index.vue')
   }
 ]
 

kyuubi-server/web-ui/src/test/unit/utils/engine-ui.spec.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 {
+  getEngineUIUrl,
+  getProxyEngineUIUrl,
+  normalizeEngineUIUrl
+} from '@/utils/engine-ui'
+import { expect, test } from 'vitest'
+
+test('engine ui url direct mode', () => {
+  expect(normalizeEngineUIUrl('host:4040')).toEqual('http://host:4040')
+  expect(getEngineUIUrl('https://host:4040/sql', false)).toEqual(
+    'https://host:4040/sql'
+  )
+})
+
+test('engine ui url proxy mode', () => {
+  expect(getProxyEngineUIUrl('spark.example.com:4040')).toEqual(
+    `${import.meta.env.VITE_APP_DEV_WEB_URL}engine-ui/spark.example.com:4040/`
+  )
+  expect(getEngineUIUrl('spark.example.com:4040/sql/?id=1', true)).toEqual(
+    `${
+      import.meta.env.VITE_APP_DEV_WEB_URL
+    }engine-ui/spark.example.com:4040/sql/?id=1`
+  )
+})