Merge pull request #641 from LinuxSuRen/feat/ui-improve-input

feat: create a history based autocomplete input

Author: LinuxSuRen

console/atest-ui/package-lock.json

@@ -19,7 +19,7 @@
     "@vueuse/core": "^10.11.0",
     "codemirror": "^5.65.17",
     "diff-match-patch": "^1.0.5",
-    "element-plus": "^2.9.1",
+    "element-plus": "^2.9.6",
     "intro.js": "^7.0.1",
     "jsonlint-mod": "^1.7.6",
     "jsonpath-plus": "^10.0.7",

console/atest-ui/package.json

@@ -0,0 +1,119 @@
+<template>
+  <el-autocomplete
+    v-model="input"
+    clearable
+    :fetch-suggestions="querySearch"
+    @select="handleSelect"
+    @keyup.enter="handleEnter"
+    :placeholder="props.placeholder"
+  >
+    <template #default="{ item }">
+      <div style="display: flex; justify-content: space-between; align-items: center;">
+        <span>{{ item.value }}</span>
+        <el-icon @click.stop="deleteHistoryItem(item)">
+          <delete />
+        </el-icon>
+      </div>
+    </template>
+  </el-autocomplete>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps } from 'vue'
+import { ElAutocomplete, ElIcon } from 'element-plus'
+import { Delete } from '@element-plus/icons-vue'
+
+const props = defineProps({
+  maxItems: {
+    type: Number,
+    default: 10
+  },
+  key: {
+    type: String,
+    default: 'history'
+  },
+  storage: {
+    type: String,
+    default: 'localStorage'
+  },
+  callback: {
+    type: Function,
+    default: () => true
+  },
+  placeholder: {
+    type: String,
+    default: 'Type something'
+  }
+})
+
+const input = ref('')
+const suggestions = ref([])
+interface HistoryItem {
+  value: string
+  count: number
+  timestamp: number
+}
+
+const querySearch = (queryString: string, cb: any) => {
+  const results = suggestions.value.filter((item: HistoryItem) => item.value.includes(queryString))
+  cb(results)
+}
+
+const handleSelect = (item: HistoryItem) => {
+  input.value = item.value
+}
+
+const handleEnter = async () => {
+  if (props.callback) {
+    const result = await props.callback()
+    if (!result) {
+      return
+    }
+  }
+  if (input.value === '') {
+    return;
+  }
+
+  const history = JSON.parse(getStorage().getItem(props.key) || '[]')
+  const existingItem = history.find((item: HistoryItem) => item.value === input.value)
+
+  if (existingItem) {
+    existingItem.count++
+    existingItem.timestamp = Date.now()
+  } else {
+    history.push({ value: input.value, count: 1, timestamp: Date.now() })
+  }
+
+  if (history.length > props.maxItems) {
+    history.sort((a: HistoryItem, b: HistoryItem) => a.count - b.count || a.timestamp - b.timestamp)
+    history.shift()
+  }
+
+  getStorage().setItem(props.key, JSON.stringify(history))
+  suggestions.value = history
+}
+
+const loadHistory = () => {
+  suggestions.value = JSON.parse(getStorage().getItem('history') || '[]')
+}
+
+const deleteHistoryItem = (item: HistoryItem) => {
+  const history = JSON.parse(getStorage().getItem(props.key) || '[]')
+  const updatedHistory = history.filter((historyItem: HistoryItem) => historyItem.value !== item.value)
+  getStorage().setItem(props.key, JSON.stringify(updatedHistory))
+  suggestions.value = updatedHistory
+}
+
+const getStorage = () => {
+    switch (props.storage) {
+      case 'localStorage':
+        return localStorage
+      case 'sessionStorage':
+        return sessionStorage
+      default:
+        return localStorage
+    }
+}
+
+loadHistory()
+</script>

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

@@ -1,19 +1,24 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import { API } from './net'
+import type { Store } from './store'
+import type { Pair } from './types'
 import { ElMessage } from 'element-plus'
+import { Codemirror } from 'vue-codemirror'
+import HistoryInput from '../components/HistoryInput.vue'
 
-const stores = ref([])
+const stores = ref([] as Store[])
 const kind = ref('')
 const store = ref('')
 const sqlQuery = ref('')
-const queryResult = ref([])
-const columns = ref([])
+const queryResult = ref([] as any[])
+const queryResultAsJSON= ref('')
+const columns = ref([] as string[])
 const queryTip = ref('')
-const databases = ref([])
-const tables = ref([])
-const currentDatabase = ref('')
 const loadingStores = ref(true)
+const dataFormat = ref('table')
+const dataFormatOptions = ['table', 'json']
+const queryDataMeta = ref({} as QueryDataMeta)
 
 const tablesTree = ref([])
 watch(store, (s) => {
@@ -24,12 +29,27 @@ watch(store, (s) => {
             return
         }
     })
-    currentDatabase.value = ''
+    queryDataMeta.currentDatabase = ''
     sqlQuery.value = ''
     executeQuery()
 })
-const queryDataFromTable = (data) => {
-    sqlQuery.value = `select * from ${data.label} limit 10`
+
+interface QueryDataMeta {
+    databases: string[]
+    tables: string[]
+    currentDatabase: string
+    duration: string    
+}
+
+interface QueryData {
+    items: any[]
+    data: any[]
+    label: string
+    meta: QueryDataMeta
+}
+
+const queryDataFromTable = (data: QueryData) => {
+    sqlQuery.value = `select * from ${data.label} limit 100`
     executeQuery()
 }
 const queryTables = () => {
@@ -61,43 +81,42 @@ API.GetStores((data) => {
     loadingStores.value = false
 })
 
-const ormDataHandler = (data) => {
-    const result = []
+const ormDataHandler = (data: QueryData) => {
+    const result = [] as any[]
     const cols = new Set()
 
     data.items.forEach(e => {
         const obj = {}
-        e.data.forEach(item => {
+        e.data.forEach((item: Pair) => {
             obj[item.key] = item.value
             cols.add(item.key)
         })
         result.push(obj)
     })
 
-    databases.value = data.meta.databases
-    tables.value = data.meta.tables
-    currentDatabase.value = data.meta.currentDatabase
+    queryDataMeta.value = data.meta
     queryResult.value = result
+    queryResultAsJSON.value = JSON.stringify(result, null, 2)
     columns.value = Array.from(cols).sort((a, b) => {
         if (a === 'id') return -1;
         if (b === 'id') return 1;
         return a.localeCompare(b);
     })
 
     tablesTree.value = []
-    tables.value.forEach((i) => {
+    queryDataMeta.value.tables.forEach((i) => {
         tablesTree.value.push({
             label: i,
         })
     })
 }
 
-const keyValueDataHandler = (data) => {
+const keyValueDataHandler = (data: QueryData) => {
     queryResult.value = []
     data.data.forEach(e => {
-        const obj = {}
-        obj['key'] = e.key
-        obj['value'] = e.value
+        const obj = new Map<string, string>();
+        obj.set('key', e.key)
+        obj.set('value', e.value)
         queryResult.value.push(obj)
 
         columns.value = ['key', 'value']
@@ -111,10 +130,13 @@ const executeQuery = async () => {
             break;
     }
 
-    API.DataQuery(store.value, kind.value, currentDatabase.value, sqlQuery.value, (data) => {
+    let success = false
+    try {
+        const data = await API.DataQueryAsync(store.value, kind.value, queryDataMeta.value.currentDatabase, sqlQuery.value);
         switch (kind.value) {
             case 'atest-store-orm':
                 ormDataHandler(data)
+                success = true
                 break;
             case 'atest-store-etcd':
                 keyValueDataHandler(data)
@@ -129,23 +151,24 @@ const executeQuery = async () => {
                     type: 'error'
                 });
         }
-    }, (e) => {
+    } catch (e: any) {
         ElMessage({
             showClose: true,
             message: e.message,
             type: 'error'
         });
-    })
+    }
+    return success
 }
 </script>
 
 <template>
   <div>
-    <el-container style="height: calc(100vh - 45px);">
+    <el-container style="height: calc(100vh - 50px);">
       <el-aside v-if="kind === 'atest-store-orm'">
           <el-scrollbar>
-              <el-select v-model="currentDatabase" placeholder="Select database" @change="queryTables" filterable>
-                  <el-option v-for="item in databases" :key="item" :label="item"
+              <el-select v-model="queryDataMeta.currentDatabase" placeholder="Select database" @change="queryTables" filterable>
+                  <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/>
@@ -163,23 +186,34 @@ const executeQuery = async () => {
                               </el-select>
                           </el-form-item>
                       </el-col>
-                      <el-col :span="17">
+                      <el-col :span="16">
                           <el-form-item>
-                              <el-input v-model="sqlQuery" :placeholder="queryTip" @keyup.enter="executeQuery"></el-input>
+                              <HistoryInput :placeholder="queryTip" :callback="executeQuery" v-model="sqlQuery"/>
                           </el-form-item>
                       </el-col>
                       <el-col :span="2">
                           <el-form-item>
                               <el-button type="primary" @click="executeQuery">Execute</el-button>
                           </el-form-item>
                       </el-col>
+                      <el-col :span="2">
+                        <el-select v-model="dataFormat" placeholder="Select data format">
+                            <el-option v-for="item in dataFormatOptions" :key="item" :label="item" :value="item"></el-option>
+                        </el-select>
+                      </el-col>
                   </el-row>
               </el-form>
           </el-header>
           <el-main>
-              <el-table :data="queryResult">
-                  <el-table-column v-for="col in columns" :key="col" :prop="col" :label="col"></el-table-column>
+              <div style="display: flex; gap: 8px;">
+                <el-tag type="primary" v-if="queryResult.length > 0">{{ queryResult.length }} rows</el-tag>
+                <el-tag type="primary" v-if="queryDataMeta.duration">{{  queryDataMeta.duration }}</el-tag>
+              </div>
+              <el-table :data="queryResult" stripe v-if="dataFormat === 'table'">
+                  <el-table-column v-for="col in columns" :key="col" :prop="col" :label="col" sortable/>
               </el-table>
+              <Codemirror v-else-if="dataFormat === 'json'"
+                v-model="queryResultAsJSON"/>
           </el-main>
       </el-container>
     </el-container>

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

@@ -973,7 +973,7 @@ const renameTestCase = (name: string) => {
       </div>
     </el-header>
 
-    <el-main style="padding-left: 5px;">
+    <el-main style="padding-left: 5px; min-height: 280px;">
       <el-tabs v-model="requestActiveTab">
         <el-tab-pane name="query" v-if="props.kindName !== 'tRPC' && props.kindName !== 'gRPC'">
           <template #label>