support to show database and tables

Author: LinuxSuRen

console/atest-ui/src/views/DataManager.vue

@@ -10,7 +10,25 @@ const sqlQuery = ref('')
 const queryResult = ref([])
 const columns = ref([])
 const queryTip = ref('')
+const databases = ref([])
+const tables = ref([])
+const currentDatabase = ref('')
 
+interface Tree {
+    label: string
+    children?: Tree[]
+}
+const tablesTree: Tree[] = []
+watch(tables, (t) => {
+    // clear tablesTree
+    tablesTree.splice(0, tablesTree.length)
+    t.forEach((i) => {
+        tablesTree.push({
+            label: i,
+        })
+    })
+    console.log(tablesTree)
+})
 watch(store, (s) => {
     stores.value.forEach((e: Store) => {
         if (e.name === s) {
@@ -46,7 +64,7 @@ const ormDataHandler = (data) => {
     const result = []
     const cols = new Set()
 
-    data.Rows.forEach(e => {
+    data.items.forEach(e => {
         const obj = {}
         e.data.forEach(item => {
             obj[item.key] = item.value
@@ -55,6 +73,8 @@ const ormDataHandler = (data) => {
         result.push(obj)
     })
 
+    databases.value = data.meta.databases
+    tables.value = data.meta.tables
     queryResult.value = result
     columns.value = Array.from(cols).sort((a, b) => {
         if (a === 'id') return -1;
@@ -103,30 +123,45 @@ const executeQuery = async () => {
 
 <template>
   <div>
-    <el-form @submit.prevent="executeQuery">
-        <el-row :gutter="10">
-          <el-col :span="2">
-            <el-form-item>
-              <el-select v-model="store" placeholder="Select store">
-                <el-option v-for="item in stores" :key="item.name" :label="item.name"
-                           :value="item.name" :disabled="!item.ready" :kind="item.kind.name"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="18">
-            <el-form-item>
-              <el-input v-model="sqlQuery" :placeholder="queryTip" @keyup.enter="executeQuery"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="2">
-            <el-form-item>
-              <el-button type="primary" @click="executeQuery">Execute</el-button>
-            </el-form-item>
-          </el-col>
-        </el-row>
-    </el-form>
-    <el-table :data="queryResult">
-      <el-table-column v-for="col in columns" :key="col" :prop="col" :label="col"></el-table-column>
-    </el-table>
+    <el-container>
+      <el-aside width="200px">
+          <el-select v-model="currentDatabase" placeholder="Select database">
+              <el-option v-for="item in databases" :key="item" :label="item"
+                         :value="item"></el-option>
+          </el-select>
+          <el-tree :data="tablesTree" />
+      </el-aside>
+      <el-container>
+          <el-header>
+              <el-form @submit.prevent="executeQuery">
+                  <el-row :gutter="10">
+                      <el-col :span="2">
+                          <el-form-item>
+                              <el-select v-model="store" placeholder="Select store">
+                                  <el-option v-for="item in stores" :key="item.name" :label="item.name"
+                                             :value="item.name" :disabled="!item.ready" :kind="item.kind.name"></el-option>
+                              </el-select>
+                          </el-form-item>
+                      </el-col>
+                      <el-col :span="18">
+                          <el-form-item>
+                              <el-input v-model="sqlQuery" :placeholder="queryTip" @keyup.enter="executeQuery"></el-input>
+                          </el-form-item>
+                      </el-col>
+                      <el-col :span="2">
+                          <el-form-item>
+                              <el-button type="primary" @click="executeQuery">Execute</el-button>
+                          </el-form-item>
+                      </el-col>
+                  </el-row>
+              </el-form>
+          </el-header>
+          <el-main>
+              <el-table :data="queryResult">
+                  <el-table-column v-for="col in columns" :key="col" :prop="col" :label="col"></el-table-column>
+              </el-table>
+          </el-main>
+      </el-container>
+    </el-container>
   </div>
 </template>