[KYUUBI apache#5366][UI] Add submit SQL page in Kyuubi Web UI

### _Why are the changes needed?_

This PR is to introduce a submit SQL editor page to close apache#5366.  Users then can submit SQL in SQL editor page to retrieve, update or do other data manipulations by Spark engine with this feature.

Once users open up a new tab in SQL editor, a new connection(session) is established with the a Kyuubi server instance. After that, users can input their SQL statements in a text box provided on the page and select the desired number of data rows to be shown in result from a dropdown list located at the right side of the run button. When the statement is executed in one of  server instances, the execution status of the job is displayed to the user.  After the statement is executed successfully , the result is displayed in the bottom of page for users.

![03_53_07](https://github.com/apache/kyuubi/assets/32693629/33806d90-7db8-4137-b8bc-872c3c42e36f)
![03_31_26](https://github.com/apache/kyuubi/assets/32693629/dd6d4226-9ddc-443e-a976-6ddd47d08d8a)

### _How was this patch tested?_
- [ ] Add some test cases that check the changes thoroughly including negative and positive cases if possible

- [ ] Add screenshots for manual tests if appropriate

- [ ] [Run test](https://kyuubi.readthedocs.io/en/master/contributing/code/testing.html#running-tests) locally before make a pull request

### _Was this patch authored or co-authored using generative AI tooling?_

No

Closes apache#5616 from zhaohehuhu/dev-1103.

Closes apache#5366

078d19e [William Tong] code optimize (#9)
1d839bc [William Tong] code change (#8)
ddffd19 [William Tong] fix code conflict in layout (#7)
f1fc9a2 [William Tong] UI change (#6)
265f02d [William Tong] sql UI change (#5)
4bb22f0 [William Tong] Merge branch 'master' into dev-1103
065a497 [William Tong] Merge master into branch (#4)
3438012 [William Tong] Merge pull request #3 from zhaohehuhu/dev-1103-3
a374028 [weitong] add error message for sql page
f04acf2 [William Tong] Merge branch 'master' into dev-1103
93fa6a2 [William Tong] Merge pull request #2 from zhaohehuhu/dev-1103-2
f0669ba [weitong] fix
ecdbe5c [hezhao2] fix
531761d [hezhao2] change TabPaneName to TabPanelName
466a5ba [hezhao2] remove api2
ab0661f [hezhao2] change format for table header
5f4bca5 [hezhao2] move logo picture to images folder
159c35a [hezhao2] change layout
7379c4e [weitong] code change
0ddc6d5 [weitong] sql lab page
dda47bd [hezhao2] add license
9f80e20 [weitong] sql page test

Lead-authored-by: He Zhao <[email protected]>
Co-authored-by: William Tong <[email protected]>
Co-authored-by: hezhao2 <[email protected]>
Co-authored-by: weitong <[email protected]>
Signed-off-by: Cheng Pan <[email protected]>

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

@@ -0,0 +1,77 @@
+/*
+ * 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 type {
+  IOpenSessionRequest,
+  IRunSqlRequest,
+  IGetSqlRowsetRequest,
+  IGetSqlMetadataRequest
+} from './types'
+
+export function openSession(data: IOpenSessionRequest): any {
+  return request({
+    url: 'api/v1/sessions',
+    method: 'post',
+    data
+  })
+}
+
+export function closeSession(identifier: string): any {
+  return request({
+    url: `api/v1/sessions/${identifier}`,
+    method: 'delete'
+  })
+}
+
+export function runSql(data: IRunSqlRequest, identifier: string): any {
+  return request({
+    url: `api/v1/sessions/${identifier}/operations/statement`,
+    method: 'post',
+    data
+  })
+}
+
+export function getSqlRowset(params: IGetSqlRowsetRequest): any {
+  return request({
+    url: `api/v1/operations/${params.operationHandleStr}/rowset`,
+    method: 'get',
+    params
+  })
+}
+
+export function getSqlMetadata(params: IGetSqlMetadataRequest): any {
+  return request({
+    url: `api/v1/operations/${params.operationHandleStr}/resultsetmetadata`,
+    method: 'get',
+    params
+  })
+}
+
+export function getLog(identifier: string): any {
+  return request({
+    url: `api/v1/operations/${identifier}/log`,
+    method: 'get'
+  })
+}
+
+export function closeOperation(identifier: string) {
+  return request({
+    url: `api/v1/admin/operations/${identifier}`,
+    method: 'delete'
+  })
+}

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

@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+
+interface IOpenSessionRequest {
+  'kyuubi.engine.type': string
+}
+
+interface IRunSqlRequest {
+  statement: string
+  runAsync: boolean
+}
+
+interface IGetSqlRowsetRequest {
+  operationHandleStr: string
+  fetchorientation: 'FETCH_NEXT'
+  maxrows: number
+}
+
+interface IGetSqlMetadataRequest {
+  operationHandleStr: string
+}
+
+export {
+  IOpenSessionRequest,
+  IRunSqlRequest,
+  IGetSqlRowsetRequest,
+  IGetSqlMetadataRequest
+}

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

@@ -17,7 +17,7 @@
 
 import request from '@/utils/request'
 
-export function getAllServer() {
+export function getAllServer(): any {
   return request({
     url: 'api/v1/admin/server',
     method: 'get'

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

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+interface IServer {
+  attributes: any | null
+  host: string
+  instance: string
+  namespace: string
+  nodeName: string
+  port: number
+  status: string
+}
+
+export { IServer }

kyuubi-server/web-ui/src/components/monaco-editor/index.vue

@@ -88,7 +88,7 @@
     editor = monaco.editor.create(codeEditBox.value, {
       value: props.modelValue,
       language: props.language,
-      theme: monacoEditorThemeRef.value,
+      theme: props.theme || monacoEditorThemeRef.value,
       ...props.options
     })
 

kyuubi-server/web-ui/src/components/monaco-editor/types.ts

@@ -53,10 +53,7 @@ export const editorProps = {
     default: 'sql'
   },
   theme: {
-    type: String as PropType<Theme>,
-    validator(value: string): boolean {
-      return ['vs', 'vs-dark'].includes(value)
-    },
+    type: String as PropType<any>,
     default: 'vs'
   },
   options: {
@@ -72,7 +69,7 @@ export const editorProps = {
         },
         readOnly: false,
         contextmenu: true,
-        fontSize: 16,
+        fontSize: 14,
         scrollBeyondLastLine: true,
         overviewRulerBorder: false
       }

kyuubi-server/web-ui/src/layout/components/aside/index.vue

@@ -18,8 +18,8 @@
 
 <template>
   <header>
-    <img v-if="!isCollapse" src="@/assets/kyuubi-logo.svg" />
-    <img v-else class="collapsed-logo" src="@/assets/kyuubi.png" />
+    <img v-if="!isCollapse" src="@/assets/images/kyuubi-logo.svg" />
+    <img v-else class="collapsed-logo" src="@/assets/images/kyuubi.png" />
     <span v-if="!isCollapse">{{ version }}</span>
   </header>
   <c-menu :is-collapse="isCollapse" :active-path="activePath" :menus="menus" />

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

@@ -49,8 +49,8 @@ export const MENUS = [
     router: '/swagger'
   },
   {
-    label: 'SQL Lab',
+    label: 'SQL Editor',
     icon: 'Cpu',
-    router: '/lab'
+    router: '/editor'
   }
 ]

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

@@ -37,21 +37,31 @@ export default {
   engine_ui: 'Engine UI',
   failure_reason: 'Failure Reason',
   session_properties: 'Session Properties',
+  no_data: 'No data',
+  no_log: 'No log',
+  run_sql_tips: 'Run a SQL to get result',
+  result: 'Result',
+  log: 'Log',
   operation: {
     text: 'Operation',
     delete_confirm: 'Delete Confirm',
     close_confirm: 'Close Confirm',
     cancel_confirm: 'Cancel Confirm',
     close: 'Close',
     cancel: 'Cancel',
-    delete: 'Delete'
+    delete: 'Delete',
+    run: 'Run'
   },
   message: {
     delete_succeeded: 'Delete {name} Succeeded',
     delete_failed: 'Delete {name} Failed',
     close_succeeded: 'Close {name} Succeeded',
     close_failed: 'Close {name} Failed',
     cancel_succeeded: 'Cancel {name} Succeeded',
-    cancel_failed: 'Cancel {name} Failed'
+    cancel_failed: 'Cancel {name} Failed',
+    run_sql_failed: 'Run SQL Failed',
+    get_sql_log_failed: 'Get SQL 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

@@ -37,21 +37,31 @@ export default {
   engine_ui: 'Engine UI',
   failure_reason: '失败原因',
   session_properties: 'Session 参数',
+  no_data: '无数据',
+  no_log: '无日志',
+  run_sql_tips: '请运行SQL获取结果',
+  result: '结果',
+  log: '日志',
   operation: {
     text: '操作',
     delete_confirm: '确认删除',
     close_confirm: '确认关闭',
     cancel_confirm: '确认取消',
     close: '关闭',
     cancel: '取消',
-    delete: '删除'
+    delete: '删除',
+    run: '运行'
   },
   message: {
     delete_succeeded: '删除 {name} 成功',
     delete_failed: '删除 {name} 失败',
     close_succeeded: '关闭 {name} 成功',
     close_failed: '关闭 {name} 失败',
     cancel_succeeded: '取消 {name} 成功',
-    cancel_failed: '取消 {name} 失败'
+    cancel_failed: '取消 {name} 失败',
+    run_sql_failed: '运行SQL失败',
+    get_sql_log_failed: '获取SQL日志失败',
+    get_sql_result_failed: '获取SQL结果失败',
+    get_sql_metadata_failed: '获取SQL元数据失败'
   }
 }

kyuubi-server/web-ui/src/router/lab/index.ts → kyuubi-server/web-ui/src/router/editor/index.ts

@@ -17,9 +17,9 @@
 
 const routes = [
   {
-    path: '/lab',
-    name: 'lab',
-    component: () => import('@/views/lab/index.vue')
+    path: '/editor',
+    name: 'editor',
+    component: () => import('@/views/editor/index.vue')
   }
 ]
 

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

@@ -20,7 +20,7 @@ import overviewRoutes from './overview'
 import managementRoutes from './management'
 import detailRoutes from './detail'
 import swaggerRoutes from './swagger'
-import labRoutes from './lab'
+import editorRoutes from './editor'
 
 const routes = [
   {
@@ -40,7 +40,7 @@ const routes = [
       ...managementRoutes,
       ...detailRoutes,
       ...swaggerRoutes,
-      ...labRoutes
+      ...editorRoutes
     ]
   }
 ]