support etcd key-value query

Author: LinuxSuRen

console/atest-ui/src/locales/en.json

@@ -50,7 +50,8 @@
         "functionQuery": "Functions Query",
         "output": "Output",
         "proxy": "Proxy",
-        "secure": "Secure"
+        "secure": "Secure",
+        "data": "Data"
     },
     "tip": {
         "filter": "Filter Keyword",

console/atest-ui/src/locales/zh.json

@@ -45,7 +45,8 @@
         "functionQuery": "函数查询",
         "output": "输出",
         "proxy": "代理",
-        "secure": "安全"
+        "secure": "安全",
+        "data": "数据"
     },
     "tip": {
         "filter": "过滤",

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

@@ -1,14 +1,36 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { API } from './net'
-import { Cache } from './cache'
 import { ElMessage } from 'element-plus'
 
 const stores = ref([])
+const kind = ref('')
 const store = ref('')
-const sqlQuery = ref('select * from t_sys_global_config')
+const sqlQuery = ref('')
 const queryResult = ref([])
 const columns = ref([])
+const queryTip = ref('')
+
+watch(store, (s) => {
+    stores.value.forEach((e: Store) => {
+        if (e.name === s) {
+            kind.value = e.kind.name
+            return
+        }
+    })
+})
+watch(kind, (k) => {
+    switch (k) {
+        case 'atest-store-orm':
+            sqlQuery.value = 'show tables'
+            queryTip.value = 'Enter SQL query'
+            break;
+        case 'atest-store-etcd':
+            sqlQuery.value = ''
+            queryTip.value = 'Enter key'
+            break;
+    }
+})
 
 API.GetStores((data) => {
   stores.value = data.data
@@ -20,33 +42,62 @@ API.GetStores((data) => {
   });
 })
 
-const executeQuery = async () => {
-  API.DataQuery(store.value, sqlQuery.value, (data) => {
+const ormDataHandler = (data) => {
     const result = []
     const cols = new Set()
 
     data.items.forEach(e => {
-      const obj = {}
-      e.data.forEach(item => {
-        obj[item.key] = item.value
-        cols.add(item.key)
-      })
-      result.push(obj)
+        const obj = {}
+        e.data.forEach(item => {
+            obj[item.key] = item.value
+            cols.add(item.key)
+        })
+        result.push(obj)
     })
 
     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);
+        if (a === 'id') return -1;
+        if (b === 'id') return 1;
+        return a.localeCompare(b);
+    })
+}
+
+const keyValueDataHandler = (data) => {
+    queryResult.value = []
+    data.data.forEach(e => {
+        const obj = {}
+        obj['key'] = e.key
+        obj['value'] = e.value
+        queryResult.value.push(obj)
+
+        columns.value = ['key', 'value']
+    })
+}
+
+const executeQuery = async () => {
+    API.DataQuery(store.value, kind.value, sqlQuery.value, (data) => {
+        switch (kind.value) {
+            case 'atest-store-orm':
+                ormDataHandler(data)
+                break;
+            case 'atest-store-etcd':
+                keyValueDataHandler(data)
+                break;
+            default:
+                ElMessage({
+                    showClose: true,
+                    message: 'Unsupported store kind',
+                    type: 'error'
+                });
+        }
+    }, (e) => {
+        ElMessage({
+            showClose: true,
+            message: e.message,
+            type: 'error'
+        });
     })
-  }, (e) => {
-    ElMessage({
-      showClose: true,
-      message: e.message,
-      type: 'error'
-    });
-  })
 }
 </script>
 
@@ -57,13 +108,14 @@ const executeQuery = async () => {
           <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"></el-option>
+                <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="Enter SQL query"></el-input>
+              <el-input v-model="sqlQuery" :placeholder="queryTip"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="2">
@@ -77,4 +129,4 @@ const executeQuery = async () => {
       <el-table-column v-for="col in columns" :key="col" :prop="col" :label="col"></el-table-column>
     </el-table>
   </div>
-</template>
+</template>

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

@@ -773,20 +773,27 @@ var SBOM = (callback: (d: any) => void) => {
       .then(callback)
 }
 
-var DataQuery = (store: string, query: string, callback: (d: any) => void, errHandler: (d: any) => void) => {
-  const requestOptions = {
-    method: 'POST',
-    headers: {
-        'X-Store-Name': store
-    },
-    body: JSON.stringify({
-        sql: query
-    })
-}
-  fetch(`/api/v1/data/query`, requestOptions)
-      .then(DefaultResponseProcess)
-      .then(callback)
-      .catch(errHandler)
+var DataQuery = (store: string, kind: string, query: string, callback: (d: any) => void, errHandler: (d: any) => void) => {
+    const queryObj = {}
+    switch (kind) {
+        case 'atest-store-orm':
+            queryObj['sql'] = query;
+            break;
+        case 'atest-store-etcd':
+            queryObj['key'] = query;
+            break;
+    }
+    const requestOptions = {
+        method: 'POST',
+        headers: {
+            'X-Store-Name': store
+        },
+        body: JSON.stringify(queryObj)
+    }
+    fetch(`/api/v1/data/query`, requestOptions)
+        .then(DefaultResponseProcess)
+        .then(callback)
+        .catch(errHandler)
 }
 
 export const API = {