[Feature] Introduce playground module (#46)

paimon-web-ui-new/package.json

@@ -13,11 +13,13 @@
   },
   "dependencies": {
     "dart-sass": "^1.25.0",
+    "mitt": "^3.0.1",
     "monaco-editor": "^0.43.0",
     "pinia": "^2.1.6",
     "pinia-plugin-persistedstate": "^3.2.0",
     "sass": "^1.66.1",
     "sass-loader": "^13.3.2",
+    "sql-formatter": "^13.0.0",
     "vue": "^3.3.4",
     "vue-i18n": "^9.4.0",
     "vue-router": "^4.2.4"

paimon-web-ui-new/src/App.tsx

@@ -47,7 +47,9 @@ export default defineComponent({
       date-locale={this.locale === 'en' ? dateEnUS : dateZhCN}
       style={{ width: '100%', height: '100vh' }}
     >
-      <router-view />
+      <n-message-provider>
+        <router-view />
+      </n-message-provider>
     </n-config-provider>
   }
 })

paimon-web-ui-new/src/components/monaco-editor/index.tsx

@@ -23,6 +23,7 @@ import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 import { editorProps } from './type'
 import { useConfigStore } from '@/store/config'
+import { format } from 'sql-formatter'
 
 // @ts-ignore: worker
 self.MonacoEnvironment = {
@@ -46,7 +47,7 @@ self.MonacoEnvironment = {
 export default defineComponent({
   name: 'MonacoEditor',
   props: editorProps,
-  emits: ['update:modelValue', 'change', 'EditorMounted'],
+  emits: ['update:modelValue', 'change', 'EditorMounted', 'EditorSave'],
   setup(props, { emit }) {
     const configStore = useConfigStore()
     const monacoEditorThemeRef = ref(configStore.getCurrentTheme === 'dark' ? 'vs-dark' : 'vs')
@@ -61,12 +62,45 @@ export default defineComponent({
         target: monaco.languages.typescript.ScriptTarget.ES2020,
         allowNonTsExtensions: true
       })
+      monaco.languages.registerCompletionItemProvider('sql', {
+        provideCompletionItems: function(model, position) {
+          const word = model.getWordUntilPosition(position);
+          const range = {
+            startLineNumber: position.lineNumber,
+            endLineNumber: position.lineNumber,
+            startColumn: word.startColumn,
+            endColumn: word.endColumn
+          };
+          const suggestions = [];
+          const sqlStr = ['select','from','where','and','or','limit','order by','group by'];
+            for(const i in sqlStr){
+              suggestions.push({
+                label: sqlStr[i],
+                kind: monaco.languages.CompletionItemKind['Function'],
+                insertText: sqlStr[i],
+                detail: '',
+                range:range
+              });
+            }
+          return {
+            suggestions: suggestions
+          };
+        },
+      });
+
       editor = monaco.editor.create(codeEditBox.value, {
         value: props.modelValue,
         language: props.language,
         theme: monacoEditorThemeRef.value,
         ...props.options
       })
+
+      editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
+        emit('EditorSave')
+      })
+
+      editor.setValue(format(toRaw(editor).getValue()))
+
       editor.onDidChangeModelContent(() => {
         const value = editor.getValue()
         emit('update:modelValue', value)
@@ -81,6 +115,7 @@ export default defineComponent({
           const value = editor.getValue()
           if (newValue !== value) {
             editor.setValue(newValue)
+            editor.setValue(format(toRaw(editor).getValue()))
           }
         }
       }
@@ -106,6 +141,7 @@ export default defineComponent({
         init()
       }
     )
+
     onBeforeUnmount(() => {
       editor.dispose()
     })

paimon-web-ui-new/src/components/monaco-editor/type.ts

@@ -66,12 +66,12 @@ export const editorProps = {
         renderLineHighlight: 'line',
         selectOnLineNumbers: true,
         minimap: {
-          enabled: true
+          enabled: false
         },
         readOnly: false,
         contextmenu: true,
         fontSize: 16,
-        scrollBeyondLastLine: false,
+        scrollBeyondLastLine: true,
         overviewRulerBorder: false
       }
     }

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

@@ -16,6 +16,22 @@ specific language governing permissions and limitations
 under the License. */
 
 export default {
-  select_catalog: 'Select Catalog',
-  search: 'Search'
+  query: 'Query',
+  workbench: 'Workbench',
+  task_operation_and_maintenance: 'Task Operation and Maintenance',
+  settings: 'Settings',
+  terminal: 'Terminal',
+  git_branch: 'Git Branch',
+  data: 'Data',
+  saved_query: 'Saved Query',
+  query_record: 'Query Record',
+  search: 'Search',
+  run: 'Run',
+  format: 'Format',
+  save: 'Save',
+  clear: 'Clear',
+  unfold: 'Unfold',
+  collapse: 'Collapse',
+  logs: 'Logs',
+  result: 'Result',
 }

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

@@ -16,6 +16,22 @@ specific language governing permissions and limitations
 under the License. */
 
 export default {
-  select_catalog: '选择 Catalog',
-  search: '搜索'
+  query: '查询',
+  workbench: '工作台',
+  task_operation_and_maintenance: '任务运维',
+  settings: '设置',
+  terminal: '终端',
+  git_branch: 'Git 分支',
+  data: '数据',
+  saved_query: '已保存查询',
+  query_record: '查询记录',
+  search: '搜索',
+  run: '运行',
+  format: '格式化',
+  save: '保存',
+  clear: '清空',
+  unfold: '展开',
+  collapse: '折叠',
+  logs: '日志',
+  result: '结果',
 }

paimon-web-ui-new/src/main.ts

@@ -24,6 +24,7 @@ import naive from 'naive-ui'
 import i18n from './locales'
 import { Setting } from './config'
 import '@/assets/styles/main.scss'
+import mitt from 'mitt'
 
 const app = createApp(App)
 const pinia = createPinia()
@@ -33,6 +34,7 @@ app.use(pinia)
 pinia.use(piniaPluginPersistedstate)
 app.use(router)
 app.use(naive)
+app.config.globalProperties.mittBus = mitt()
 
 app.mount('#app')
 

paimon-web-ui-new/src/router/modules/playground.ts

@@ -27,7 +27,22 @@ export default [
         path: '/playground',
         name: 'playground',
         meta: { title: '查询控制台' },
-        component: () => import('@/views/playground')
+        redirect: { name: 'playground-query' },
+        component: () => import('@/views/playground'),
+        children: [
+          {
+            path: '/playground/query',
+            name: 'playground-query',
+            meta: { title: '查询' },
+            component: () => import('@/views/playground/components/query')
+          },
+          {
+            path: '/playground/workbench',
+            name: 'playground-workbench',
+            meta: { title: '工作台' },
+            component: () => import('@/views/playground/components/workbench')
+          },
+        ]
       },
     ]
   }