Replace input with autocomplete in page Job trace
diff --git a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/history-trace/api.js b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/history-trace/api.js
index 27887ad..dee35e0 100644
--- a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/history-trace/api.js
+++ b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/history-trace/api.js
@@ -18,5 +18,7 @@
import API from '@/utils/api'
export default {
- loadExecution: (params = {}) => API.post(`/api/event-trace/execution`, params)
+ loadExecution: (params = {}) => API.post(`/api/event-trace/execution`, params),
+ getExecutionJobNameSuggestions: (jobNamePrefix = '') => API.get(`/api/event-trace/execution/jobNames/${jobNamePrefix}`),
+ getExecutionIpSuggestions: (ipPrefix = '') => API.get(`/api/event-trace/execution/ip/${ipPrefix}`)
}
diff --git a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/history-trace/module/historyTrace.vue b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/history-trace/module/historyTrace.vue
index 7ee32c3..e0ff031 100644
--- a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/history-trace/module/historyTrace.vue
+++ b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/history-trace/module/historyTrace.vue
@@ -18,16 +18,18 @@
<template>
<el-row class="box-card">
<div class="btn-group" style="">
- <el-input
+ <el-autocomplete
:placeholder="$t('historyTrace.searchForm.jobName')"
+ :fetch-suggestions="fetchJobNameSuggestions"
v-model="searchForm.jobName"
clearable>
- </el-input>
- <el-input
+ </el-autocomplete>
+ <el-autocomplete
:placeholder="$t('historyTrace.searchForm.serverIp')"
+ :fetch-suggestions="fetchIpSuggestions"
v-model="searchForm.ip"
clearable>
- </el-input>
+ </el-autocomplete>
<el-date-picker
:placeholder="$t('historyTrace.searchForm.startTime')"
v-model="searchForm.start"
@@ -163,6 +165,20 @@
},
methods: {
...mapActions(['setRegCenterActivated']),
+ fetchJobNameSuggestions(jobNamePrefix, callback) {
+ API.getExecutionJobNameSuggestions(jobNamePrefix).then(res => {
+ const jobNames = res.model
+ const suggestions = jobNames.map(jobName => ({value: jobName}))
+ callback(suggestions)
+ })
+ },
+ fetchIpSuggestions(ipPrefix, callback) {
+ API.getExecutionIpSuggestions(ipPrefix).then(res => {
+ const ips = res.model
+ const suggestions = ips.map(ip => ({value: ip}))
+ callback(suggestions)
+ })
+ },
handleCurrentChange(val) {
const page = {
pageSize: this.pageSize,
