improve the table on the data manager ui (#673)

* chore: improve ui style

* improve the table on the data manager ui

---------

Co-authored-by: rick <[email protected]>

Author: LinuxSuRen

console/atest-ui/src/App.vue

@@ -134,8 +134,8 @@ const toHistoryPanel = ({ ID: selectID, panelName: historyPanelName }) => {
       </el-menu>
     </el-aside>
 
-    <el-main style="padding-top: 5px; padding-bottom: 5px;">
-      <div style="position: absolute; top: 10px; right: 20px;">
+    <el-main style="padding-top: 0px;">
+      <div class="top-menu">
         <el-col style="display: flex; align-items: center;">
           <el-tag style="font-size: 18px;">{{ t('language') }}</el-tag>
           <el-dropdown trigger="click" @command="(command: string) => handleChangeLan(command)">

console/atest-ui/src/assets/main.css

@@ -1,22 +1,28 @@
 @import './base.css';
 
 #app {
-  /* max-width: 1280px; */
-  margin: 0 auto;
-  padding: 1rem;
-  height: 100vh;
-  font-weight: normal;
+    margin: 0 auto;
+    padding: 1rem;
+    padding-top: 40px;
+    height: 100vh;
+    font-weight: normal;
+}
+
+.top-menu {
+    position: absolute;
+    top: 10px;
+    right: 20px;
 }
 
 a,
 .green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
+    text-decoration: none;
+    color: hsla(160, 100%, 37%, 1);
+    transition: 0.4s;
 }
 
 @media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
+    a:hover {
+        background-color: hsla(160, 100%, 37%, 0.2);
+    }
 }

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

@@ -17,6 +17,7 @@ const query = ref({
     offset: 0,
     limit: 10
 } as QueryObject)
+const currentTable = ref('')
 const sqlQuery = ref('')
 const queryResult = ref([] as any[])
 const queryResultAsJSON = ref('')
@@ -70,6 +71,7 @@ interface QueryData {
 
 const queryDataFromTable = (data: QueryData) => {
     sqlQuery.value = `@selectTableLImit100_${data.label}`
+    currentTable.value = data.label
     executeQuery()
 }
 const describeTable = (data: QueryData) => {
@@ -233,7 +235,7 @@ const nextPage = () => {
 
 <template>
     <div>
-        <el-container style="height: calc(100vh - 50px);">
+        <el-container style="height: calc(100vh - 80px);">
             <el-aside v-if="kind === 'atest-store-orm' || kind === 'atest-store-iotdb' || kind === 'atest-store-cassandra' || kind === 'atest-store-elasticsearch' || kind === 'atest-store-opengemini'">
                 <el-scrollbar>
                     <el-select v-model="queryDataMeta.currentDatabase" placeholder="Select database"
@@ -247,18 +249,20 @@ const nextPage = () => {
                     <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' || kind === 'atest-store-cassandra'"><Document /></el-icon>
+                            <div class="space-between">
+                                <span @click="queryDataFromTable(data)">
+                                    {{ node.label }}
+                                </span>
+                                <el-icon style="margin-left: 6px;" @click="describeTable(data)" v-if="kind === 'atest-store-orm' || kind === 'atest-store-cassandra'"><Document /></el-icon>
+                            </div>
                         </template>
                     </el-tree>
                 </el-scrollbar>
             </el-aside>
             <el-container>
                 <el-header style="height: auto">
                     <el-form @submit.prevent="executeQuery">
-                        <el-row :gutter="10">
+                        <el-row :gutter="10" justify="center">
                             <el-col :span="4">
                                 <el-form-item>
                                     <el-select v-model="store" placeholder="Select store" filterable
@@ -309,7 +313,7 @@ const nextPage = () => {
                         <el-tag type="primary" v-if="queryDataMeta.duration">{{ queryDataMeta.duration }}</el-tag>
                         <el-tag type="primary" v-for="label in queryDataMeta.labels">{{ label.value }}</el-tag>
                     </div>
-                    <el-table :data="queryResult" stripe v-if="dataFormat === 'table'">
+                    <el-table :data="queryResult" stripe v-if="dataFormat === 'table'" height="calc(100vh - 200px)">
                         <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" />
@@ -318,3 +322,12 @@ const nextPage = () => {
         </el-container>
     </div>
 </template>
+
+<style>
+.space-between {
+    justify-content: space-between;
+    display: flex;
+    width: 100%;
+    padding-right: 8px;
+}
+</style>

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

@@ -921,7 +921,7 @@ const renameTestCase = (name: string) => {
         <EditButton :value="props.name" @changed="renameTestCase"/>
       </div>
       <div>
-        <el-row>
+        <el-row justify="space-between" gutter="10">
           <el-col :span="3">
             <el-select
               v-if="props.kindName !== 'tRPC' && props.kindName !== 'gRPC'"
@@ -942,7 +942,7 @@ const renameTestCase = (name: string) => {
              </el-option>
             </el-select>
           </el-col>
-          <el-col :span="18">
+          <el-col :span="19">
             <el-autocomplete
               v-model="testCaseWithSuite.data.request.api"
               style="width: 100%"
@@ -957,7 +957,7 @@ const renameTestCase = (name: string) => {
               </template>
             </el-autocomplete>
           </el-col>
-          <el-col :span="3">
+          <el-col :span="2" style="text-align-last: right;">
             <el-dropdown split-button type="primary"
               @click="sendRequest"
               v-loading="requestLoading"