add data query ui page

Author: LinuxSuRen

console/atest-ui/src/App.vue

@@ -7,6 +7,7 @@ import {
   Share,
   ArrowDown,
   Guide,
+  DataAnalysis
 } from '@element-plus/icons-vue'
 import { ref, watch } from 'vue'
 import { API } from './views/net'
@@ -17,6 +18,7 @@ import MockManager from './views/MockManager.vue'
 import StoreManager from './views/StoreManager.vue'
 import SecretManager from './views/SecretManager.vue'
 import WelcomePage from './views/WelcomePage.vue'
+import DataManager from './views/DataManager.vue'
 import { useI18n } from 'vue-i18n'
 
 const { t, locale: i18nLocale } = useI18n()
@@ -114,6 +116,10 @@ const toHistoryPanel = ({ ID: selectID, panelName: historyPanelName }) => {
           <el-icon><Guide /></el-icon>
           <template #title>{{ t('title.mock' )}}</template>
         </el-menu-item>
+        <el-menu-item index="data" test-id="data-menu">
+          <el-icon><DataAnalysis /></el-icon>
+          <template #title>{{ t('title.data' )}}</template>
+        </el-menu-item>
         <el-menu-item index="secret">
           <el-icon><document /></el-icon>
           <template #title>{{ t('title.secrets') }}</template>
@@ -142,6 +148,7 @@ const toHistoryPanel = ({ ID: selectID, panelName: historyPanelName }) => {
       </div>
       <TestingPanel v-if="panelName === 'testing'" @toHistoryPanel="toHistoryPanel"/>
       <TestingHistoryPanel v-else-if="panelName === 'history'" :ID="ID"/>
+      <DataManager v-else-if="panelName === 'data'" />
       <MockManager v-else-if="panelName === 'mock'" />
       <StoreManager v-else-if="panelName === 'store'" />
       <SecretManager v-else-if="panelName === 'secret'" />

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { API } from './net'
+
+const sqlQuery = ref('')
+const queryResult = ref([])
+
+const executeQuery = async () => {
+    API.DataQuery(sqlQuery.value, (data) => {
+        queryResult.value = data
+    })
+}
+</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-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>
+  </div>
+</template>

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

@@ -773,6 +773,21 @@ var SBOM = (callback: (d: any) => void) => {
       .then(callback)
 }
 
+var DataQuery = (query: string, callback: (d: any) => void) => {
+  const requestOptions = {
+    method: 'POST',
+    headers: {
+        'X-Store-Name': Cache.GetCurrentStore().name
+    },
+    body: JSON.stringify({
+        sql: query
+    })
+}
+  fetch(`/api/v1/data/query`, requestOptions)
+      .then(DefaultResponseProcess)
+      .then(callback)
+}
+
 export const API = {
   DefaultResponseProcess,
   GetVersion,
@@ -785,6 +800,6 @@ export const API = {
   FunctionsQuery,
   GetSecrets, DeleteSecret, CreateOrUpdateSecret,
   GetSuggestedAPIs,
-  ReloadMockServer, GetMockConfig, SBOM,
+  ReloadMockServer, GetMockConfig, SBOM, DataQuery,
   getToken
 }