Merge pull request #654 from LinuxSuRen/feat/refresh-tables

feat: support to refresh tables

Author: LinuxSuRen

console/atest-ui/src/components/HistoryInput.vue

@@ -28,7 +28,7 @@ const props = defineProps({
     type: Number,
     default: 10
   },
-  key: {
+  group: {
     type: String,
     default: 'history'
   },
@@ -74,7 +74,7 @@ const handleEnter = async () => {
     return;
   }
 
-  const history = JSON.parse(getStorage().getItem(props.key) || '[]')
+  const history = JSON.parse(getStorage().getItem(props.group) || '[]')
   const existingItem = history.find((item: HistoryItem) => item.value === input.value)
 
   if (existingItem) {
@@ -89,18 +89,18 @@ const handleEnter = async () => {
     history.shift()
   }
 
-  getStorage().setItem(props.key, JSON.stringify(history))
+  getStorage().setItem(props.group, JSON.stringify(history))
   suggestions.value = history
 }
 
 const loadHistory = () => {
-  suggestions.value = JSON.parse(getStorage().getItem('history') || '[]')
+  suggestions.value = JSON.parse(getStorage().getItem(props.group) || '[]')
 }
 
 const deleteHistoryItem = (item: HistoryItem) => {
-  const history = JSON.parse(getStorage().getItem(props.key) || '[]')
+  const history = JSON.parse(getStorage().getItem(props.group) || '[]')
   const updatedHistory = history.filter((historyItem: HistoryItem) => historyItem.value !== item.value)
-  getStorage().setItem(props.key, JSON.stringify(updatedHistory))
+  getStorage().setItem(props.group, JSON.stringify(updatedHistory))
   suggestions.value = updatedHistory
 }
 

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

@@ -7,6 +7,7 @@ import { ElMessage } from 'element-plus'
 import { Codemirror } from 'vue-codemirror'
 import HistoryInput from '../components/HistoryInput.vue'
 import type { Ref } from 'vue'
+import { Refresh, Document } from '@element-plus/icons-vue'
 
 const stores: Ref<Store[]> = ref([])
 const kind = ref('')
@@ -57,6 +58,10 @@ const queryDataFromTable = (data: QueryData) => {
     sqlQuery.value = `@selectTableLImit100_${data.label}`
     executeQuery()
 }
+const describeTable = (data: QueryData) => {
+    sqlQuery.value = `@describeTable_${data.label}`
+    executeQuery()
+}
 const queryTables = () => {
     sqlQuery.value = ``
     executeQuery()
@@ -138,6 +143,9 @@ const keyValueDataHandler = (data: QueryData) => {
 }
 
 const executeQuery = async () => {
+    return executeWithQuery(sqlQuery.value)
+}
+const executeWithQuery = async (sql: string) => {
     switch (kind.value) {
         case 'atest-store-etcd':
             sqlQuery.value = '*'
@@ -146,7 +154,7 @@ const executeQuery = async () => {
 
     let success = false
     try {
-        const data = await API.DataQueryAsync(store.value, kind.value, queryDataMeta.value.currentDatabase, sqlQuery.value);
+        const data = await API.DataQueryAsync(store.value, kind.value, queryDataMeta.value.currentDatabase, sql);
         switch (kind.value) {
             case 'atest-store-orm':
             case 'atest-store-iotdb':
@@ -184,11 +192,21 @@ const executeQuery = async () => {
                 <el-scrollbar>
                     <el-select v-model="queryDataMeta.currentDatabase" placeholder="Select database"
                         @change="queryTables" filterable>
+                        <template #header>
+                            <el-button type="primary" :icon="Refresh" @click="executeWithQuery('')"></el-button>
+                        </template>
                         <el-option v-for="item in queryDataMeta.databases" :key="item" :label="item"
                             :value="item"></el-option>
                     </el-select>
-                    <el-tree :data="tablesTree" node-key="label" @node-click="queryDataFromTable" highlight-current
-                        draggable />
+                    <el-tree :data="tablesTree" node-key="label" highlight-current
+                        draggable>
+                        <template #default="{node, data}">
+                            <span @click="queryDataFromTable(data)">
+                                {{ node.label }} 
+                            </span>
+                            <el-icon style="margin-left: 6px;" @click="describeTable(data)" v-if="kind === 'atest-store-orm'"><Document /></el-icon>
+                        </template>
+                    </el-tree>
                 </el-scrollbar>
             </el-aside>
             <el-container>

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

@@ -6,6 +6,7 @@ import type { FormInstance, FormRules } from 'element-plus'
 import type { Suite, TestCase, Pair } from './types'
 import { NewSuggestedAPIsQuery, GetHTTPMethods, SwaggerSuggestion } from './types'
 import EditButton from '../components/EditButton.vue'
+import HistoryInput from '../components/HistoryInput.vue'
 import { Cache } from './cache'
 import { useI18n } from 'vue-i18n'
 import { API } from './net'
@@ -301,12 +302,7 @@ const renameTestSuite = (name: string) => {
       {{ t('tip.testsuite') }}<EditButton :value="suite.name" @changed="renameTestSuite"/>
 
       <el-form-item :label="t('tip.apiAddress')" prop="api">
-        <el-input
-          class="w-50 m-2"
-          v-model="suite.api"
-          placeholder="API"
-          test-id="suite-editor-api"
-        ></el-input>
+        <HistoryInput placeholder="API" v-model="suite.api" group="apiAddress" />
       </el-form-item>
       <table style="width: 100%">
         <tr>