able to show data rows from mysql

Author: LinuxSuRen

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

@@ -2,31 +2,58 @@
 import { ref } from 'vue'
 import { API } from './net'
 import { Cache } from './cache'
+import { ElMessage } from 'element-plus'
 
-const sqlQuery = ref('')
+const sqlQuery = ref('select * from t_sys_global_config')
 const queryResult = ref([])
+const columns = ref([])
 
 const executeQuery = async () => {
   Cache.SetCurrentStore('mysql');
 
-    API.DataQuery(sqlQuery.value, (data) => {
-        queryResult.value = data.data
+  API.DataQuery(sqlQuery.value, (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)
     })
+
+    queryResult.value = result
+    columns.value = Array.from(cols)
+  }, (e) => {
+    ElMessage({
+      showClose: true,
+      message: e.message,
+      type: 'error'
+    });
+  })
 }
 </script>
 
 <template>
   <div>
     <el-form @submit.prevent="executeQuery">
-      <el-form-item>
-        <el-input v-model="sqlQuery" placeholder="Enter SQL query"></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="executeQuery">Execute</el-button>
-      </el-form-item>
+        <el-row :gutter="10">
+          <el-col :span="20">
+            <el-form-item>
+              <el-input v-model="sqlQuery" placeholder="Enter SQL query"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <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="(value, key) in queryResult[0]" :key="key" :prop="key" :label="key"></el-table-column>
+      <el-table-column v-for="col in columns" :key="col" :prop="col" :label="col"></el-table-column>
     </el-table>
   </div>
 </template>

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

@@ -773,7 +773,7 @@ var SBOM = (callback: (d: any) => void) => {
       .then(callback)
 }
 
-var DataQuery = (query: string, callback: (d: any) => void) => {
+var DataQuery = (query: string, callback: (d: any) => void, errHandler: (d: any) => void) => {
   const requestOptions = {
     method: 'POST',
     headers: {
@@ -786,6 +786,7 @@ var DataQuery = (query: string, callback: (d: any) => void) => {
   fetch(`/api/v1/data/query`, requestOptions)
       .then(DefaultResponseProcess)
       .then(callback)
+      .catch(errHandler)
 }
 
 export const API = {