feat: support to show databases and tables on ui

.gitignore

@@ -20,3 +20,4 @@ console/atest-desktop/atest
 console/atest-desktop/atest.exe
 console/atest-desktop/coverage
 atest-store-git
+.db

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

@@ -10,7 +10,12 @@ const sqlQuery = ref('')
 const queryResult = ref([])
 const columns = ref([])
 const queryTip = ref('')
+const databases = ref([])
+const tables = ref([])
+const currentDatabase = ref('')
+const loadingStores = ref(true)
 
+const tablesTree = ref([])
 watch(store, (s) => {
     stores.value.forEach((e: Store) => {
         if (e.name === s) {
@@ -19,27 +24,37 @@ watch(store, (s) => {
         }
     })
 })
+const queryDataFromTable = (data) => {
+    sqlQuery.value = `select * from ${data.label} limit 10`
+    executeQuery()
+}
+const queryTables = () => {
+    sqlQuery.value = `show tables`
+    executeQuery()
+}
 watch(kind, (k) => {
     switch (k) {
         case 'atest-store-orm':
             sqlQuery.value = 'show tables'
             queryTip.value = 'Enter SQL query'
             break;
-        case 'atest-store-etcd':
+        case 'atest-store-etcd', 'atest-store-redis':
             sqlQuery.value = ''
             queryTip.value = 'Enter key'
             break;
     }
 })
 
 API.GetStores((data) => {
-  stores.value = data.data
+    stores.value = data.data
 }, (e) => {
-  ElMessage({
-    showClose: true,
-    message: e.message,
-    type: 'error'
-  });
+    ElMessage({
+        showClose: true,
+        message: e.message,
+        type: 'error'
+    });
+}, () => {
+    loadingStores.value = false
 })
 
 const ormDataHandler = (data) => {
@@ -55,12 +70,22 @@ const ormDataHandler = (data) => {
         result.push(obj)
     })
 
+    databases.value = data.meta.databases
+    tables.value = data.meta.tables
+    currentDatabase.value = data.meta.currentDatabase
     queryResult.value = result
     columns.value = Array.from(cols).sort((a, b) => {
         if (a === 'id') return -1;
         if (b === 'id') return 1;
         return a.localeCompare(b);
     })
+
+    tablesTree.value = []
+    tables.value.forEach((i) => {
+        tablesTree.value.push({
+            label: i,
+        })
+    })
 }
 
 const keyValueDataHandler = (data) => {
@@ -76,14 +101,23 @@ const keyValueDataHandler = (data) => {
 }
 
 const executeQuery = async () => {
-    API.DataQuery(store.value, kind.value, sqlQuery.value, (data) => {
+    switch (kind.value) {
+        case 'atest-store-etcd':
+            sqlQuery.value = '*'
+            break;
+    }
+
+    API.DataQuery(store.value, kind.value, currentDatabase.value, sqlQuery.value, (data) => {
         switch (kind.value) {
             case 'atest-store-orm':
                 ormDataHandler(data)
                 break;
             case 'atest-store-etcd':
                 keyValueDataHandler(data)
                 break;
+            case 'atest-store-redis':
+                keyValueDataHandler(data)
+                break;
             default:
                 ElMessage({
                     showClose: true,
@@ -103,30 +137,47 @@ 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-container style="height: calc(100vh - 45px);">
+      <el-aside v-if="kind === 'atest-store-orm'">
+          <el-scrollbar>
+              <el-select v-model="currentDatabase" placeholder="Select database" @change="queryTables" filterable>
+                  <el-option v-for="item in databases" :key="item" :label="item"
+                             :value="item"></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-tree :data="tablesTree" node-key="label" @node-click="queryDataFromTable" highlight-current draggable/>
+          </el-scrollbar>
+      </el-aside>
+      <el-container>
+          <el-header>
+              <el-form @submit.prevent="executeQuery">
+                  <el-row :gutter="10">
+                      <el-col :span="4">
+                          <el-form-item>
+                              <el-select v-model="store" placeholder="Select store" filterable :loading="loadingStores">
+                                  <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="17">
+                          <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>

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

@@ -150,6 +150,8 @@ watch(() => storeForm.kind.name, (name) => {
           value: '',
           defaultValue: p.defaultValue,
           description: p.description,
+          type: p.type,
+          enum: p.enum
         } as Pair)
       } else {
         pro[index].description = p.description
@@ -318,15 +320,21 @@ const storeExtLink = ref('')
                 <el-table-column label="Value">
                     <template #default="scope">
                       <div style="display: flex; align-items: center">
-                        <el-input v-model="scope.row.value" :placeholder="scope.row.defaultValue">
-                          <template #append v-if="scope.row.description">
-                            <el-tooltip :content="scope.row.description">
+                          <el-select v-model="scope.row.value" v-if="scope.row.enum">
+                            <el-option
+                                v-for="item in scope.row.enum"
+                                :key="item"
+                                :label="item"
+                                :value="item"
+                            />
+                          </el-select>
+                          <el-input-number v-model="scope.row.value" v-else-if="scope.row.type === 'number'"/>
+                            <el-input v-model="scope.row.value" :placeholder="scope.row.defaultValue" v-else/>
+                            <el-tooltip :content="scope.row.description" v-if="scope.row.description">
                               <el-icon>
                                 <QuestionFilled/>
                               </el-icon>
                             </el-tooltip>
-                          </template>
-                        </el-input>
                       </div>
                     </template>
                 </el-table-column>

console/atest-ui/src/views/__test__/store.spec.ts

@@ -19,7 +19,7 @@ import {SupportedExtension, SupportedExtensions} from "../store";
 describe("SupportedExtensions", () => {
     test('length check', () => {
         const extensions = SupportedExtensions()
-        expect(extensions.length).toBe(5)
+        expect(extensions.length).toBe(6)
     })
 
     for (const extension of SupportedExtensions()) {

console/atest-ui/src/views/net.ts

@@ -773,20 +773,25 @@ var SBOM = (callback: (d: any) => void) => {
       .then(callback)
 }
 
-var DataQuery = (store: string, kind: string, query: string, callback: (d: any) => void, errHandler: (d: any) => void) => {
+var DataQuery = (store: string, kind: string, currentDatabase: string, query: string, callback: (d: any) => void, errHandler: (d: any) => void) => {
     const queryObj = {}
     switch (kind) {
         case 'atest-store-orm':
             queryObj['sql'] = query;
+            queryObj['key'] = currentDatabase;
             break;
         case 'atest-store-etcd':
             queryObj['key'] = query;
             break;
+        case 'atest-store-redis':
+            queryObj['key'] = query;
+            break;
     }
     const requestOptions = {
         method: 'POST',
         headers: {
-            'X-Store-Name': store
+            'X-Store-Name': store,
+            'X-Database': currentDatabase
         },
         body: JSON.stringify(queryObj)
     }