Skip to content

Commit 44e2796

Browse files
LinuxSuRenLinuxSuRen
authored
chore: using el-splitter on the data manager page (#780)
Co-authored-by: rick <[email protected]>
1 parent 967ca32 commit 44e2796

File tree

2 files changed

+69
-67
lines changed

2 files changed

+69
-67
lines changed

‎console/atest-ui/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"@vueuse/core": "^10.11.0",
2222
"codemirror": "^5.65.17",
2323
"diff-match-patch": "^1.0.5",
24-
"element-plus": "^2.10.2",
24+
"element-plus": "^2.10.4",
2525
"intro.js": "^7.2.0",
2626
"jsonlint-mod": "^1.7.6",
2727
"jsonpath-plus": "^10.3.0",

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

Lines changed: 68 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -367,72 +367,74 @@ Magic.LoadMagicKeys(import.meta.url, new Map([
367367
</el-scrollbar>
368368
</el-aside>
369369
<el-container>
370-
<el-header style="height: auto">
371-
<el-form @submit.prevent="executeQuery">
372-
<el-row :gutter="10" justify="center">
373-
<el-col :span="4">
374-
<el-form-item>
375-
<el-select v-model="store" placeholder="Select store" filterable
376-
:loading="loadingStores">
377-
<el-option v-for="item in stores" :key="item.name" :label="item.name"
378-
:value="item.name" :disabled="!item.ready"
379-
:kind="item.kind.name"></el-option>
380-
</el-select>
381-
</el-form-item>
382-
</el-col>
383-
<el-col :span="16">
384-
<el-form-item v-if="!complexEditor">
385-
<HistoryInput :placeholder="queryTip" :callback="executeQuery" v-model="sqlQuery" />
386-
</el-form-item>
387-
</el-col>
388-
<el-col :span="2">
389-
<el-form-item>
390-
<el-button type="primary" @click="executeQuery" :disabled="kind === ''">Execute</el-button>
391-
</el-form-item>
392-
</el-col>
393-
<el-col :span="2">
394-
<el-select v-model="dataFormat" placeholder="Select data format">
395-
<el-option v-for="item in dataFormatOptions" :key="item" :label="item"
396-
:value="item"></el-option>
397-
</el-select>
398-
</el-col>
399-
</el-row>
400-
<el-row :gutter="10" v-if="kind === 'atest-store-elasticsearch' || kind === 'atest-store-redis'">
401-
<el-col :span="10">
402-
<el-input type="number" v-model="query.offset">
403-
<template #prepend>Offset</template>
404-
</el-input>
405-
</el-col>
406-
<el-col :span="10">
407-
<el-input type="number" v-model="query.limit">
408-
<template #prepend>Limit</template>
409-
</el-input>
410-
</el-col>
411-
<el-col :span="2">
412-
<el-button type="primary" @click="nextPage">{{ t("button.next-page") }}</el-button>
413-
</el-col>
414-
</el-row>
415-
</el-form>
416-
<Codemirror
417-
@ready="sqlEditorReady"
418-
v-model="sqlQuery"
419-
v-if="complexEditor"
420-
style="height: var(--sql-editor-height);"
421-
:extensions="[sql(sqlConfig)]"
422-
/>
423-
</el-header>
424-
<el-main>
425-
<div style="display: flex; gap: 8px;">
426-
<el-tag type="primary" v-if="queryResult.length > 0">{{ queryResult.length }} rows</el-tag>
427-
<el-tag type="primary" v-if="queryDataMeta.duration">{{ queryDataMeta.duration }}</el-tag>
428-
<el-tag type="primary" v-for="label in queryDataMeta.labels">{{ label.value }}</el-tag>
429-
<el-check-tag type="primary" :checked="showOverflowTooltip" @change="overflowChange" v-if="queryResult.length > 0">overflow</el-check-tag>
430-
</div>
431-
<el-table :data="queryResult" stripe v-if="dataFormat === 'table'" height="calc(100vh - 380px)" @cell-dblclick="tryShowPrettyJSON">
432-
<el-table-column v-for="col in columns" :key="col" :prop="col" :label="col" sortable :show-overflow-tooltip="showOverflowTooltip" />
433-
</el-table>
434-
<Codemirror v-else-if="dataFormat === 'json'" v-model="queryResultAsJSON" />
435-
</el-main>
370+
<el-splitter layout="vertical">
371+
<el-splitter-panel size="30%">
372+
<el-form @submit.prevent="executeQuery">
373+
<el-row :gutter="10" justify="center" style="margin-left: 0!important; margin-right: 0!important;">
374+
<el-col :span="4">
375+
<el-form-item>
376+
<el-select v-model="store" placeholder="Select store" filterable
377+
:loading="loadingStores">
378+
<el-option v-for="item in stores" :key="item.name" :label="item.name"
379+
:value="item.name" :disabled="!item.ready"
380+
:kind="item.kind.name"></el-option>
381+
</el-select>
382+
</el-form-item>
383+
</el-col>
384+
<el-col :span="16">
385+
<el-form-item v-if="!complexEditor">
386+
<HistoryInput :placeholder="queryTip" :callback="executeQuery" v-model="sqlQuery" />
387+
</el-form-item>
388+
</el-col>
389+
<el-col :span="2">
390+
<el-form-item>
391+
<el-button type="primary" @click="executeQuery" :disabled="kind === ''">Execute</el-button>
392+
</el-form-item>
393+
</el-col>
394+
<el-col :span="2">
395+
<el-select v-model="dataFormat" placeholder="Select data format">
396+
<el-option v-for="item in dataFormatOptions" :key="item" :label="item"
397+
:value="item"></el-option>
398+
</el-select>
399+
</el-col>
400+
</el-row>
401+
<el-row :gutter="10" v-if="kind === 'atest-store-elasticsearch' || kind === 'atest-store-redis'">
402+
<el-col :span="10">
403+
<el-input type="number" v-model="query.offset">
404+
<template #prepend>Offset</template>
405+
</el-input>
406+
</el-col>
407+
<el-col :span="10">
408+
<el-input type="number" v-model="query.limit">
409+
<template #prepend>Limit</template>
410+
</el-input>
411+
</el-col>
412+
<el-col :span="2">
413+
<el-button type="primary" @click="nextPage">{{ t("button.next-page") }}</el-button>
414+
</el-col>
415+
</el-row>
416+
</el-form>
417+
<Codemirror
418+
@ready="sqlEditorReady"
419+
v-model="sqlQuery"
420+
v-if="complexEditor"
421+
style="height: var(--sql-editor-height);"
422+
:extensions="[sql(sqlConfig)]"
423+
/>
424+
</el-splitter-panel>
425+
<el-splitter-panel>
426+
<div style="display: flex; gap: 8px;">
427+
<el-tag type="primary" v-if="queryResult.length > 0">{{ queryResult.length }} rows</el-tag>
428+
<el-tag type="primary" v-if="queryDataMeta.duration">{{ queryDataMeta.duration }}</el-tag>
429+
<el-tag type="primary" v-for="label in queryDataMeta.labels">{{ label.value }}</el-tag>
430+
<el-check-tag type="primary" :checked="showOverflowTooltip" @change="overflowChange" v-if="queryResult.length > 0">overflow</el-check-tag>
431+
</div>
432+
<el-table :data="queryResult" stripe v-if="dataFormat === 'table'" @cell-dblclick="tryShowPrettyJSON">
433+
<el-table-column v-for="col in columns" :key="col" :prop="col" :label="col" sortable :show-overflow-tooltip="showOverflowTooltip" />
434+
</el-table>
435+
<Codemirror v-else-if="dataFormat === 'json'" v-model="queryResultAsJSON" />
436+
</el-splitter-panel>
437+
</el-splitter>
436438
</el-container>
437439
</el-container>
438440
</div>

0 commit comments

Comments
 (0)