[KYUUBI apache#5259][UI] Web UI supports Swagger pages

### _Why are the changes needed?_

As title, add swagger ui into new kyuubi web ui.

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

- [x] 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#5263 from zwangsheng/KYUUBI#5259.

Closes apache#5259

34c8779 [zwangsheng] keep static swagger ui in kyuubi server
2efbae0 [zwangsheng] fix license
21c8cae [zwangsheng] remove dup dependence and add swagger ui into notive
c1bedcb [Cheng Pan] Update kyuubi-server/web-ui/src/views/swagger/index.vue
1820420 [Fu Chen] Update kyuubi-server/web-ui/src/views/swagger/index.vue
05c3b87 [zwangsheng] fix style
fc05bb8 [zwangsheng] Add License header
e562520 [zwangsheng] Try
9c96800 [zwangsheng] Init swagger page

Lead-authored-by: zwangsheng <binjieyang@apache.org>
Co-authored-by: Cheng Pan <pan3793@gmail.com>
Co-authored-by: Fu Chen <cfmcgrady@gmail.com>
Signed-off-by: Cheng Pan <chengpan@apache.org>

Author: 3 people

LICENSE-binary

@@ -377,6 +377,8 @@ is auto-generated by `pnpm licenses list --prod`.
 ┌────────────────────────────────────┬──────────────┐
 │ Package                            │ License      │
 ├────────────────────────────────────┼──────────────┤
+│ swagger-ui-dist                    │ Apache-2.0   │
+├────────────────────────────────────┼──────────────┤
 │ typescript                         │ Apache-2.0   │
 ├────────────────────────────────────┼──────────────┤
 │ normalize-wheel-es                 │ BSD-3-Clause │

kyuubi-server/web-ui/package-lock.json

@@ -21,13 +21,15 @@
     "element-plus": "^2.2.12",
     "pinia": "^2.0.18",
     "pinia-plugin-persistedstate": "^2.1.1",
+    "swagger-ui-dist": "^4.9.1",
     "vue": "^3.2.37",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.3"
   },
   "devDependencies": {
     "@iconify-json/ep": "^1.1.6",
     "@types/node": "^18.7.1",
+    "@types/swagger-ui-dist": "^3.30.1",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
     "@vitejs/plugin-vue": "^4.2.3",

kyuubi-server/web-ui/package.json

@@ -22,6 +22,7 @@ import operationRoutes from './operation'
 import contactRoutes from './contact'
 import managementRoutes from './management'
 import detailRoutes from './detail'
+import swaggerRoutes from './swagger'
 
 const routes = [
   {
@@ -42,6 +43,7 @@ const routes = [
       ...operationRoutes,
       ...managementRoutes,
       ...detailRoutes,
+      ...swaggerRoutes,
       ...contactRoutes
     ]
   }

kyuubi-server/web-ui/pnpm-lock.yaml

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+const routes = [
+  {
+    path: '/swagger',
+    name: 'swagger',
+    component: () => import('@/views/swagger/index.vue')
+  }
+]
+
+export default routes

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

@@ -85,6 +85,11 @@ export const MENUS = [
       }
     ]
   },
+  {
+    label: 'Swagger',
+    icon: 'List',
+    router: '/swagger'
+  },
   {
     label: 'Contact Us',
     icon: 'PhoneFilled',

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

@@ -0,0 +1,45 @@
+<!--
+* 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.
+-->
+
+<template>
+  <main>
+    Swagger
+    <div id="swagger-ui" class="swagger-ui"> </div>
+  </main>
+</template>
+<script lang="ts">
+  import 'swagger-ui-dist/swagger-ui.css'
+  import { SwaggerUIBundle, SwaggerUIStandalonePreset } from 'swagger-ui-dist'
+
+  export default {
+    name: 'ImportSwagger',
+    data() {
+      return {}
+    },
+    created() {},
+    mounted() {
+      SwaggerUIBundle({
+        url: '/api/openapi.json',
+        dom_id: '#swagger-ui',
+        presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
+        layout: 'StandaloneLayout'
+      })
+    }
+  }
+</script>
+<style scoped></style>