292 lines
9.3 KiB
Vue
292 lines
9.3 KiB
Vue
<template>
|
|
<div>
|
|
<el-form ref="form" v-loading="loading"
|
|
:model="form"
|
|
:rules="rules"
|
|
class="demo-form-inline"
|
|
:disabled="show"
|
|
label-width="180px"
|
|
label-position="top"
|
|
size="small"
|
|
>
|
|
<el-row>
|
|
<el-col>
|
|
<el-form-item :label="$t('datasource.doris_host')" prop="configuration.host">
|
|
<el-input v-model="form.configuration.host"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col>
|
|
<el-form-item :label="$t('datasource.data_base')" prop="configuration.dataBase">
|
|
<el-input v-model="form.configuration.dataBase"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col>
|
|
<el-form-item :label="$t('datasource.user_name')">
|
|
<el-input v-model="form.configuration.username"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col>
|
|
<el-form-item :label="$t('datasource.password')">
|
|
<el-input v-model="form.configuration.password" show-password/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col>
|
|
<el-form-item :label="$t('datasource.query_port')" prop="configuration.port">
|
|
<el-input v-model="form.configuration.port" autocomplete="off" type="number" min="0"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col>
|
|
<el-form-item :label="$t('datasource.http_port')" prop="configuration.port">
|
|
<el-input v-model="form.configuration.httpPort" autocomplete="off" type="number" min="0"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-collapse>
|
|
<el-collapse-item :title="$t('datasource.priority')" name="1">
|
|
<el-form-item :label="$t('datasource.replication_num')" prop="configuration.replicationNum">
|
|
<el-input v-model="form.configuration.replicationNum" autocomplete="off" type="number" min="1"/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('datasource.bucket_num')" prop="configuration.bucketNum">
|
|
<el-input v-model="form.configuration.bucketNum" autocomplete="off" type="number" min="1"/>
|
|
</el-form-item>
|
|
|
|
<el-form-item :label="$t('datasource.initial_pool_size')" prop="configuration.initialPoolSize">
|
|
<el-input v-model="form.configuration.initialPoolSize" autocomplete="off" type="number" min="0" size="small"/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('datasource.min_pool_size')" prop="configuration.minPoolSize">
|
|
<el-input v-model="form.configuration.minPoolSize" autocomplete="off" type="number" min="0"/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('datasource.max_pool_size')" prop="configuration.maxPoolSize">
|
|
<el-input v-model="form.configuration.maxPoolSize" autocomplete="off" type="number" min="0"/>
|
|
</el-form-item>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
|
|
</el-form>
|
|
<div>
|
|
<el-button type="primary" size="small" @click="validaDatasource">
|
|
{{ $t('commons.validate') }}
|
|
</el-button>
|
|
<el-button v-if="showEdit" size="small" @click="edit">
|
|
{{ $t('commons.edit') }}
|
|
</el-button>
|
|
<el-button v-if="showSave" type="success" size="small" @click="save">
|
|
{{ $t('commons.save') }}
|
|
</el-button>
|
|
<el-button v-if="showCancel" type="info" size="small" @click="cancel">
|
|
{{ $t('commons.cancel') }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import {engineInfo, validate, save} from '@/api/system/engine'
|
|
import i18n from "@/lang";
|
|
|
|
export default {
|
|
name: 'ClusterMode',
|
|
data() {
|
|
return {
|
|
form:
|
|
{
|
|
type: 'engine_doris',
|
|
configuration: {
|
|
host: '',
|
|
dataBase: '',
|
|
username: '',
|
|
password: '',
|
|
port: '',
|
|
httpPort: 8030,
|
|
extraParams: 'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true',
|
|
replicationNum: 1,
|
|
bucketNum: 10,
|
|
minPoolSize: 5,
|
|
maxPoolSize: 50,
|
|
initialPoolSize: 5
|
|
}
|
|
},
|
|
originConfiguration: {
|
|
host: '',
|
|
dataBase: '',
|
|
username: '',
|
|
password: '',
|
|
port: '',
|
|
httpPort: 8030,
|
|
extraParams: 'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true',
|
|
replicationNum: 1,
|
|
bucketNum: 10,
|
|
minPoolSize: 5,
|
|
maxPoolSize: 50,
|
|
initialPoolSize: 5
|
|
},
|
|
input: '',
|
|
visible: true,
|
|
showEdit: true,
|
|
showSave: false,
|
|
showCancel: false,
|
|
show: true,
|
|
disabledConnection: false,
|
|
disabledSave: false,
|
|
loading: false,
|
|
rules: {
|
|
'configuration.host': [
|
|
{
|
|
required: true,
|
|
message: this.$t('datasource.please_input_host'),
|
|
trigger: ['change', 'blur']
|
|
}
|
|
],
|
|
'configuration.port': [
|
|
{
|
|
required: true,
|
|
message: this.$t('datasource.please_input_port'),
|
|
trigger: ['change', 'blur']
|
|
}
|
|
],
|
|
'configuration.dataBase': [
|
|
{
|
|
required: true,
|
|
message: this.$t('datasource.please_input_data_base'),
|
|
trigger: ['change', 'blur']
|
|
}
|
|
],
|
|
'configuration.replicationNum': [
|
|
{
|
|
required: true,
|
|
message: this.$t('datasource.please_input_replication_num'),
|
|
trigger: ['change', 'blur']
|
|
}
|
|
],
|
|
'configuration.bucketNum': [
|
|
{
|
|
required: true,
|
|
message: this.$t('datasource.please_input_bucket_num'),
|
|
trigger: ['change', 'blur']
|
|
}
|
|
]
|
|
},
|
|
allTypes: [
|
|
{
|
|
name: 'engine_mysql',
|
|
label: 'MySQL',
|
|
type: 'jdbc',
|
|
extraParams: 'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.query()
|
|
},
|
|
methods: {
|
|
query() {
|
|
engineInfo().then(response => {
|
|
if (response.data.id) {
|
|
this.form = JSON.parse(JSON.stringify(response.data))
|
|
this.form.configuration = JSON.parse(this.form.configuration)
|
|
this.originConfiguration = JSON.parse(JSON.stringify(this.form.configuration))
|
|
}
|
|
this.$nextTick(() => {
|
|
this.$refs.form.clearValidate()
|
|
})
|
|
})
|
|
},
|
|
edit() {
|
|
this.showEdit = false
|
|
this.showSave = true
|
|
this.showCancel = true
|
|
this.show = false
|
|
},
|
|
save() {
|
|
if (this.form.configuration.dataSourceType === 'jdbc' && this.form.configuration.port <= 0) {
|
|
this.$message.error(i18n.t('datasource.port_no_less_then_0'))
|
|
return
|
|
}
|
|
if (this.form.configuration.initialPoolSize < 0 || this.form.configuration.minPoolSize < 0 || this.form.configuration.maxPoolSize < 0) {
|
|
this.$message.error(i18n.t('datasource.no_less_then_0'))
|
|
return
|
|
}
|
|
this.$refs.form.validate(valid => {
|
|
if (!valid) {
|
|
return false
|
|
}
|
|
const form = JSON.parse(JSON.stringify(this.form))
|
|
form.configuration = JSON.stringify(form.configuration)
|
|
save(form).then(res => {
|
|
this.showEdit = true
|
|
this.showCancel = false
|
|
this.showSave = false
|
|
this.show = true
|
|
this.originConfiguration = JSON.parse(JSON.stringify(this.form.configuration))
|
|
this.$success(i18n.t('commons.save_success'))
|
|
})
|
|
})
|
|
},
|
|
cancel() {
|
|
this.showEdit = true
|
|
this.showCancel = false
|
|
this.showSave = false
|
|
this.show = true
|
|
this.form.configuration = JSON.parse(JSON.stringify(this.originConfiguration))
|
|
},
|
|
changeType() {
|
|
for (let i = 0; i < this.allTypes.length; i++) {
|
|
if (this.allTypes[i].name === this.form.type) {
|
|
this.form.configuration.dataSourceType = this.allTypes[i].type
|
|
this.form.configuration.extraParams = this.allTypes[i].extraParams
|
|
}
|
|
}
|
|
},
|
|
validaDatasource() {
|
|
if (!this.form.configuration.schema && this.form.type === 'oracle') {
|
|
this.$message.error(i18n.t('datasource.please_choose_schema'))
|
|
return
|
|
}
|
|
if (this.form.configuration.dataSourceType === 'jdbc' && this.form.configuration.port <= 0) {
|
|
this.$message.error(i18n.t('datasource.port_no_less_then_0'))
|
|
return
|
|
}
|
|
this.$refs.form.validate(valid => {
|
|
if (valid) {
|
|
const data = JSON.parse(JSON.stringify(this.form))
|
|
data.configuration = JSON.stringify(data.configuration)
|
|
validate(data).then(res => {
|
|
if (res.success) {
|
|
this.$success(i18n.t('datasource.validate_success'))
|
|
} else {
|
|
if (res.message.length < 2500) {
|
|
this.$error(res.message)
|
|
} else {
|
|
this.$error(res.message.substring(0, 2500) + '......')
|
|
}
|
|
}
|
|
}).catch(res => {
|
|
this.$error(res.message)
|
|
})
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|