support etcd key-value query

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,8 +42,7 @@ API.GetStores((data) => {
   });
 })
 
-const executeQuery = async () => {
-  API.DataQuery(store.value, sqlQuery.value, (data) => {
+const ormDataHandler = (data) => {
     const result = []
     const cols = new Set()
 
@@ -40,6 +61,36 @@ const executeQuery = async () => {
         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,
@@ -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">

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

@@ -773,16 +773,23 @@ var SBOM = (callback: (d: any) => void) => {
       .then(callback)
 }
 
-var DataQuery = (store: string, query: string, callback: (d: any) => void, errHandler: (d: any) => void) => {
+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({
-        sql: query
-    })
-}
+        body: JSON.stringify(queryObj)
+    }
     fetch(`/api/v1/data/query`, requestOptions)
         .then(DefaultResponseProcess)
         .then(callback)