mirror of
https://github.com/alibaba/canal.git
synced 2026-11-04 00:30:15 +08:00
rename canal-admin project to admin
This commit is contained in:
agapple
228
admin/admin-ui/src/views/404.vue
Normal file
228
admin/admin-ui/src/views/404.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="wscn-http404-container">
|
||||
<div class="wscn-http404">
|
||||
<div class="pic-404">
|
||||
<img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
|
||||
<img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
|
||||
<img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
|
||||
<img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
|
||||
</div>
|
||||
<div class="bullshit">
|
||||
<div class="bullshit__oops">OOPS!</div>
|
||||
<div class="bullshit__info">All rights reserved
|
||||
<a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
|
||||
</div>
|
||||
<div class="bullshit__headline">{{ message }}</div>
|
||||
<div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
|
||||
<a href="" class="bullshit__return-home">Back to home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Page404',
|
||||
computed: {
|
||||
message() {
|
||||
return 'The webmaster said that you can not enter this page...'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wscn-http404-container{
|
||||
transform: translate(-50%,-50%);
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
}
|
||||
.wscn-http404 {
|
||||
position: relative;
|
||||
width: 1200px;
|
||||
padding: 0 50px;
|
||||
overflow: hidden;
|
||||
.pic-404 {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 600px;
|
||||
overflow: hidden;
|
||||
&__parent {
|
||||
width: 100%;
|
||||
}
|
||||
&__child {
|
||||
position: absolute;
|
||||
&.left {
|
||||
width: 80px;
|
||||
top: 17px;
|
||||
left: 220px;
|
||||
opacity: 0;
|
||||
animation-name: cloudLeft;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
&.mid {
|
||||
width: 46px;
|
||||
top: 10px;
|
||||
left: 420px;
|
||||
opacity: 0;
|
||||
animation-name: cloudMid;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
&.right {
|
||||
width: 62px;
|
||||
top: 100px;
|
||||
left: 500px;
|
||||
opacity: 0;
|
||||
animation-name: cloudRight;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
@keyframes cloudLeft {
|
||||
0% {
|
||||
top: 17px;
|
||||
left: 220px;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
top: 33px;
|
||||
left: 188px;
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
top: 81px;
|
||||
left: 92px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 97px;
|
||||
left: 60px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes cloudMid {
|
||||
0% {
|
||||
top: 10px;
|
||||
left: 420px;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
top: 40px;
|
||||
left: 360px;
|
||||
opacity: 1;
|
||||
}
|
||||
70% {
|
||||
top: 130px;
|
||||
left: 180px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 160px;
|
||||
left: 120px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes cloudRight {
|
||||
0% {
|
||||
top: 100px;
|
||||
left: 500px;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
top: 120px;
|
||||
left: 460px;
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
top: 180px;
|
||||
left: 340px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 200px;
|
||||
left: 300px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bullshit {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 300px;
|
||||
padding: 30px 0;
|
||||
overflow: hidden;
|
||||
&__oops {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
color: #1482f0;
|
||||
opacity: 0;
|
||||
margin-bottom: 20px;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&__headline {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
color: #222;
|
||||
font-weight: bold;
|
||||
opacity: 0;
|
||||
margin-bottom: 10px;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.1s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&__info {
|
||||
font-size: 13px;
|
||||
line-height: 21px;
|
||||
color: grey;
|
||||
opacity: 0;
|
||||
margin-bottom: 30px;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&__return-home {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 110px;
|
||||
height: 36px;
|
||||
background: #1482f0;
|
||||
border-radius: 100px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
opacity: 0;
|
||||
font-size: 14px;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.3s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes slideUp {
|
||||
0% {
|
||||
transform: translateY(60px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
204
admin/admin-ui/src/views/canalServer/CanalCluster.vue
Normal file
204
admin/admin-ui/src/views/canalServer/CanalCluster.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<!-- <el-input v-model="listQuery.name" placeholder="Server 名称" style="width: 200px;" class="filter-item" />
|
||||
<el-input v-model="listQuery.ip" placeholder="Server IP" style="width: 200px;" class="filter-item" />
|
||||
<el-button class="filter-item" type="primary" icon="el-icon-search" plain @click="fetchData()">查询</el-button> -->
|
||||
<el-button class="filter-item" type="primary" @click="handleCreate()">新建集群</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="list"
|
||||
element-loading-text="Loading"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column label="集群名称" min-width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.name }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="ZK地址" min-width="300" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.zkHosts }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="created_at" label="操作" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-dropdown trigger="click">
|
||||
<el-button type="primary" size="mini">
|
||||
操作<i class="el-icon-arrow-down el-icon--right" />
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="handleConfig(scope.row)">主配置</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="handleUpdate(scope.row)">修改集群</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="handleDelete(scope.row)">删除集群</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="handleView(scope.row)">查看Server</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-dialog :visible.sync="dialogFormVisible" :title="textMap[dialogStatus]" width="600px">
|
||||
<el-form ref="dataForm" :rules="rules" :model="canalCluster" label-position="left" label-width="120px" style="width: 400px; margin-left:30px;">
|
||||
<el-form-item label="集群名称" prop="name">
|
||||
<el-input v-model="canalCluster.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="ZK地址" prop="zkHosts">
|
||||
<el-input v-model="canalCluster.zkHosts" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="dataOperation()">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addCanalCluster, getCanalClusters, updateCanalCluster, deleteCanalCluster } from '@/api/canalCluster'
|
||||
|
||||
export default {
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
'1': 'success',
|
||||
'0': 'gray',
|
||||
'-1': 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
statusLabel(status) {
|
||||
const statusMap = {
|
||||
'1': '启动',
|
||||
'0': '停止',
|
||||
'-1': '断开'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
name: '',
|
||||
ip: ''
|
||||
},
|
||||
dialogFormVisible: false,
|
||||
textMap: {
|
||||
create: '新建集群信息',
|
||||
update: '修改集群信息'
|
||||
},
|
||||
canalCluster: {
|
||||
id: null,
|
||||
name: null,
|
||||
zkHosts: null
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: '集群名称不能为空', trigger: 'change' }],
|
||||
zkHosts: [{ required: true, message: 'zk地址不能为空', trigger: 'change' }]
|
||||
},
|
||||
dialogStatus: 'create'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
this.listLoading = true
|
||||
getCanalClusters(this.listQuery).then(res => {
|
||||
this.list = res.data
|
||||
}).finally(() => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
resetModel() {
|
||||
this.canalCluster = {
|
||||
id: null,
|
||||
name: null,
|
||||
zkHosts: null
|
||||
}
|
||||
},
|
||||
handleCreate() {
|
||||
this.resetModel()
|
||||
this.dialogStatus = 'create'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
},
|
||||
dataOperation() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.dialogStatus === 'create') {
|
||||
addCanalCluster(this.canalCluster).then(res => {
|
||||
this.operationRes(res)
|
||||
})
|
||||
}
|
||||
if (this.dialogStatus === 'update') {
|
||||
updateCanalCluster(this.canalCluster).then(res => {
|
||||
this.operationRes(res)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
operationRes(res) {
|
||||
if (res.data === 'success') {
|
||||
this.fetchData()
|
||||
this.dialogFormVisible = false
|
||||
this.$message({
|
||||
message: this.textMap[this.dialogStatus] + '成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: this.textMap[this.dialogStatus] + '失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
},
|
||||
handleView(row) {
|
||||
this.$router.push('/canalServer/nodeServers?clusterId=' + row.id)
|
||||
},
|
||||
handleConfig(row) {
|
||||
this.$router.push('/canalServer/nodeServer/config?clusterId=' + row.id)
|
||||
},
|
||||
handleUpdate(row) {
|
||||
this.resetModel()
|
||||
this.canalCluster = Object.assign({}, row)
|
||||
this.dialogStatus = 'update'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
},
|
||||
handleDelete(row) {
|
||||
this.$confirm('删除集群信息会导致服务停止', '确定删除集群信息', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteCanalCluster(row.id).then((res) => {
|
||||
if (res.data === 'success') {
|
||||
this.fetchData()
|
||||
this.$message({
|
||||
message: '删除集群信息成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: '删除集群信息失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
120
admin/admin-ui/src/views/canalServer/CanalConfig.vue
Normal file
120
admin/admin-ui/src/views/canalServer/CanalConfig.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :model="form">
|
||||
<div style="padding-left: 10px;padding-top: 20px;">
|
||||
<el-form-item>
|
||||
{{ form.name }}
|
||||
<el-button type="primary" @click="onSubmit">保存</el-button>
|
||||
<el-button type="warning" @click="onCancel">重置</el-button>
|
||||
<el-button type="success" @click="onLoadTemplate">载入模板</el-button>
|
||||
<el-button type="info" @click="onBack">返回</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<editor v-model="form.content" lang="properties" theme="chrome" width="100%" :height="800" @init="editorInit" />
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCanalConfig, updateCanalConfig, getTemplateConfig } from '@/api/canalConfig'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
editor: require('vue2-ace-editor')
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
id: null,
|
||||
name: '',
|
||||
content: '',
|
||||
serverId: null,
|
||||
clusterId: null
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadCanalConfig()
|
||||
},
|
||||
methods: {
|
||||
editorInit() {
|
||||
require('brace/ext/language_tools')
|
||||
require('brace/mode/html')
|
||||
require('brace/mode/yaml')
|
||||
require('brace/mode/properties')
|
||||
require('brace/mode/javascript')
|
||||
require('brace/mode/less')
|
||||
require('brace/theme/chrome')
|
||||
require('brace/snippets/javascript')
|
||||
},
|
||||
loadCanalConfig() {
|
||||
let clusterId = 0
|
||||
let serverId = 0
|
||||
if (this.$route.query.clusterId) {
|
||||
clusterId = this.$route.query.clusterId
|
||||
} else if (this.$route.query.serverId) {
|
||||
serverId = this.$route.query.serverId
|
||||
}
|
||||
getCanalConfig(clusterId, serverId).then(response => {
|
||||
const data = response.data
|
||||
this.form.id = data.id
|
||||
this.form.name = data.name
|
||||
this.form.content = data.content
|
||||
this.form.serverId = this.$route.query.serverId
|
||||
this.form.clusterId = this.$route.query.clusterId
|
||||
})
|
||||
},
|
||||
onSubmit() {
|
||||
if (this.form.content === null || this.form.content === '') {
|
||||
this.$message({
|
||||
message: '配置内容不能为空',
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$confirm(
|
||||
'修改主配置可能会导致Server重启，是否继续？',
|
||||
'确定修改',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
).then(() => {
|
||||
updateCanalConfig(this.form).then(response => {
|
||||
if (response.data === 'success') {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.loadCanalConfig()
|
||||
} else {
|
||||
this.$message({
|
||||
message: '保存失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
this.loadCanalConfig()
|
||||
},
|
||||
onBack() {
|
||||
history.go(-1)
|
||||
},
|
||||
onLoadTemplate() {
|
||||
getTemplateConfig().then(res => {
|
||||
this.form.content = res.data
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.line{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
228
admin/admin-ui/src/views/canalServer/CanalInstance.vue
Normal file
228
admin/admin-ui/src/views/canalServer/CanalInstance.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-input v-model="listQuery.name" placeholder="Instance 名称" style="width: 200px;" class="filter-item" />
|
||||
<el-select v-model="listQuery.clusterServerId" placeholder="所属集群/主机" class="filter-item">
|
||||
<el-option key="" label="所属集群/主机" value="" />
|
||||
<el-option-group v-for="group in options" :key="group.label" :label="group.label">
|
||||
<el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
<el-button class="filter-item" type="primary" icon="el-icon-search" plain @click="queryData()">查询</el-button>
|
||||
|
||||
<el-button class="filter-item" type="primary" @click="handleCreate()">新建 Instance</el-button>
|
||||
<el-button class="filter-item" type="info" @click="fetchData()">刷新列表</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="list"
|
||||
element-loading-text="Loading"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column label="Instance 名称" min-width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.name }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="所属集群" min-width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.canalCluster !== null">
|
||||
{{ scope.row.canalCluster.name }}
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="所属主机" min-width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.nodeServer !== null">
|
||||
{{ scope.row.nodeServer.name }}
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column class-name="status-col" label="状态" min-width="150" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.runningStatus | statusFilter">{{ scope.row.runningStatus | statusLabel }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="修改时间" min-width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.modifiedTime }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="created_at" label="操作" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-dropdown trigger="click">
|
||||
<el-button type="primary" size="mini">
|
||||
操作<i class="el-icon-arrow-down el-icon--right" />
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="handleUpdate(scope.row)">修改</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="handleDelete(scope.row)">删除</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="handleStart(scope.row)">启动</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="handleStop(scope.row)">停止</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="handleLog(scope.row)">日志</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="count>0" :total="count" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="fetchData()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCanalInstances, deleteCanalInstance, instanceStatus } from '@/api/canalInstance'
|
||||
import Pagination from '@/components/Pagination'
|
||||
import { getClustersAndServers } from '@/api/canalCluster'
|
||||
|
||||
export default {
|
||||
components: { Pagination },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
'1': 'success',
|
||||
'0': 'gray'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
statusLabel(status) {
|
||||
const statusMap = {
|
||||
'1': '启动',
|
||||
'0': '停止'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
listLoading: true,
|
||||
dialogFormVisible: false,
|
||||
nodeServices: [],
|
||||
count: 0,
|
||||
options: [],
|
||||
listQuery: {
|
||||
name: '',
|
||||
clusterServerId: '',
|
||||
page: 1,
|
||||
size: 20
|
||||
},
|
||||
currentId: null,
|
||||
rules: {
|
||||
id: [{ required: true, message: '请选择运行Server', trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
getClustersAndServers().then((res) => {
|
||||
this.options = res.data
|
||||
})
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
this.listQuery.page = 1
|
||||
this.fetchData()
|
||||
},
|
||||
fetchData() {
|
||||
this.listLoading = true
|
||||
getCanalInstances(this.listQuery).then(res => {
|
||||
this.list = res.data.items
|
||||
this.count = res.data.count
|
||||
}).finally(() => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
handleCreate() {
|
||||
this.$router.push('/canalServer/canalInstance/add')
|
||||
},
|
||||
handleUpdate(row) {
|
||||
this.$router.push('/canalServer/canalInstance/modify?id=' + row.id)
|
||||
},
|
||||
handleDelete(row) {
|
||||
this.$confirm('删除Instance配置会导致停止', '确定删除Instance信息', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteCanalInstance(row.id).then((res) => {
|
||||
if (res.data === 'success') {
|
||||
this.fetchData()
|
||||
this.$message({
|
||||
message: '删除Instance信息成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: '删除Instance信息失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
handleStart(row) {
|
||||
// if (row.runningStatus === '1') {
|
||||
// this.$message({ message: '当前Instance已处于启动状态！', type: 'error' })
|
||||
// return
|
||||
// }
|
||||
this.$confirm('启动Instance: ' + row.name, '确定启动Instance服务', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
instanceStatus(row.id, 'start').then((res) => {
|
||||
if (res.data) {
|
||||
this.fetchData()
|
||||
this.$message({
|
||||
message: '启动成功, 稍后请刷新列表查看状态',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: '启动Instance出现异常',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
handleStop(row) {
|
||||
// if (row.runningStatus === '0') {
|
||||
// this.$message({ message: '当前Instance已处于停止状态！', type: 'error' })
|
||||
// return
|
||||
// }
|
||||
this.$confirm('停止Instance: ' + row.name, '确定停止Instance服务', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
instanceStatus(row.id, 'stop').then((res) => {
|
||||
if (res.data) {
|
||||
this.fetchData()
|
||||
this.$message({
|
||||
message: '停止成功, 稍后请刷新列表查看状态',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: '停止Instance出现异常',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
handleLog(row) {
|
||||
if (row.nodeId === null) {
|
||||
this.$message({ message: '当前Instance不是启动状态，无法查看日志', type: 'warning' })
|
||||
return
|
||||
}
|
||||
this.$router.push('canalInstance/log?id=' + row.id + '&nodeId=' + row.nodeServer.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
118
admin/admin-ui/src/views/canalServer/CanalInstanceAdd.vue
Normal file
118
admin/admin-ui/src/views/canalServer/CanalInstanceAdd.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :model="form">
|
||||
<div class="filter-container" style="padding-left: 10px;padding-top: 20px;">
|
||||
<el-input v-model="form.name" placeholder="Instance名称" style="width: 200px;" class="filter-item" />
|
||||
<el-select v-model="form.clusterServerId" placeholder="所属集群/主机" class="filter-item">
|
||||
<el-option-group v-for="group in options" :key="group.label" :label="group.label">
|
||||
<el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
<el-button class="filter-item" type="primary" @click="onSubmit">保存</el-button>
|
||||
<el-button class="filter-item" type="success" @click="onLoadTemplate">载入模板</el-button>
|
||||
<el-button class="filter-item" type="info" @click="onBack">返回</el-button>
|
||||
</div>
|
||||
<editor v-model="form.content" lang="properties" theme="chrome" width="100%" :height="800" @init="editorInit" />
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addCanalInstance, getTemplateInstance } from '@/api/canalInstance'
|
||||
import { getClustersAndServers } from '@/api/canalCluster'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
editor: require('vue2-ace-editor')
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [],
|
||||
form: {
|
||||
name: '',
|
||||
content: '',
|
||||
clusterServerId: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
getClustersAndServers().then((res) => {
|
||||
this.options = res.data
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
editorInit() {
|
||||
require('brace/ext/language_tools')
|
||||
require('brace/mode/html')
|
||||
require('brace/mode/yaml')
|
||||
require('brace/mode/properties')
|
||||
require('brace/mode/javascript')
|
||||
require('brace/mode/less')
|
||||
require('brace/theme/chrome')
|
||||
require('brace/snippets/javascript')
|
||||
},
|
||||
onSubmit() {
|
||||
if (this.form.name === '') {
|
||||
this.$message({
|
||||
message: '请输入Instance名称',
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.form.clusterServerId === '') {
|
||||
this.$message({
|
||||
message: '请选择所属集群/主机',
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.form.content === null || this.form.content === '') {
|
||||
this.$message({
|
||||
message: '请输入配置内容',
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$confirm(
|
||||
'确定新建',
|
||||
'确定新建',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
).then(() => {
|
||||
addCanalInstance(this.form).then(response => {
|
||||
if (response.data === 'success') {
|
||||
this.$message({
|
||||
message: '新建成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.$router.push('/canalServer/canalInstances')
|
||||
} else {
|
||||
this.$message({
|
||||
message: '新建失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onBack() {
|
||||
history.go(-1)
|
||||
},
|
||||
onLoadTemplate() {
|
||||
getTemplateInstance().then(res => {
|
||||
this.form.content = res.data
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.line{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :model="form">
|
||||
<div style="padding-left: 10px;padding-right: 10px;padding-top: 20px;">
|
||||
<el-form-item>
|
||||
{{ form.instance }}
|
||||
<el-button type="primary" @click="onRefresh">刷新</el-button>
|
||||
<el-button type="info" @click="onBack">返回</el-button>
|
||||
</el-form-item>
|
||||
<el-input v-model="form.desc" :rows="35" :readonly="'readonly'" type="textarea" />
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { instanceLog } from '@/api/canalInstance'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
instance: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
instanceLog(this.$route.query.id, this.$route.query.nodeId).then(res => {
|
||||
this.form.instance = res.data.instance + '.log'
|
||||
this.form.desc = res.data.log
|
||||
})
|
||||
},
|
||||
onRefresh() {
|
||||
this.fetchData()
|
||||
},
|
||||
onBack() {
|
||||
history.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.line{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
108
admin/admin-ui/src/views/canalServer/CanalInstanceUpdate.vue
Normal file
108
admin/admin-ui/src/views/canalServer/CanalInstanceUpdate.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :model="form">
|
||||
<div style="padding-left: 10px;padding-top: 20px;">
|
||||
<el-form-item>
|
||||
{{ form.name }}
|
||||
<el-select v-model="form.clusterServerId" placeholder="所属集群/主机" class="filter-item">
|
||||
<el-option-group v-for="group in options" :key="group.label" :label="group.label">
|
||||
<el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
<el-button type="primary" @click="onSubmit">修改</el-button>
|
||||
<el-button type="warning" @click="onCancel">重置</el-button>
|
||||
<el-button type="info" @click="onBack">返回</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<editor v-model="form.content" lang="properties" theme="chrome" width="100%" :height="800" @init="editorInit" />
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { canalInstanceDetail, updateCanalInstance } from '@/api/canalInstance'
|
||||
import { getClustersAndServers } from '@/api/canalCluster'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
editor: require('vue2-ace-editor')
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [],
|
||||
form: {
|
||||
id: null,
|
||||
name: '',
|
||||
content: '',
|
||||
clusterServerId: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadCanalConfig()
|
||||
getClustersAndServers().then((res) => {
|
||||
this.options = res.data
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
editorInit() {
|
||||
require('brace/ext/language_tools')
|
||||
require('brace/mode/html')
|
||||
require('brace/mode/yaml')
|
||||
require('brace/mode/properties')
|
||||
require('brace/mode/javascript')
|
||||
require('brace/mode/less')
|
||||
require('brace/theme/chrome')
|
||||
require('brace/snippets/javascript')
|
||||
},
|
||||
loadCanalConfig() {
|
||||
canalInstanceDetail(this.$route.query.id).then(response => {
|
||||
const data = response.data
|
||||
this.form.id = data.id
|
||||
this.form.name = data.name + '/instance.propertios'
|
||||
this.form.content = data.content
|
||||
this.form.clusterServerId = data.clusterServerId
|
||||
})
|
||||
},
|
||||
onSubmit() {
|
||||
this.$confirm(
|
||||
'修改Instance配置可能会导致重启，是否继续？',
|
||||
'确定修改',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
).then(() => {
|
||||
updateCanalInstance(this.form).then(response => {
|
||||
if (response.data === 'success') {
|
||||
this.$message({
|
||||
message: '修改成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.loadCanalConfig()
|
||||
} else {
|
||||
this.$message({
|
||||
message: '修改失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
this.loadCanalConfig()
|
||||
},
|
||||
onBack() {
|
||||
history.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.line{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
51
admin/admin-ui/src/views/canalServer/CanalLogDetail.vue
Normal file
51
admin/admin-ui/src/views/canalServer/CanalLogDetail.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :model="form">
|
||||
<div style="padding-left: 10px;padding-right: 10px;padding-top: 20px;">
|
||||
<el-form-item>
|
||||
canal.log
|
||||
<el-button type="primary" @click="onRefresh">刷新</el-button>
|
||||
<el-button type="info" @click="onBack">返回</el-button>
|
||||
</el-form-item>
|
||||
<el-input v-model="form.desc" :rows="35" :readonly="'readonly'" type="textarea" />
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { nodeServerLog } from '@/api/nodeServer'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
nodeServerLog(this.$route.query.id).then(res => {
|
||||
this.form.desc = res.data
|
||||
})
|
||||
},
|
||||
onRefresh() {
|
||||
this.fetchData()
|
||||
},
|
||||
onBack() {
|
||||
history.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.line{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
459
admin/admin-ui/src/views/canalServer/NodeServer.vue
Normal file
459
admin/admin-ui/src/views/canalServer/NodeServer.vue
Normal file
@@ -0,0 +1,459 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<!--<el-input v-model="listQuery.name" placeholder="Server 名称" style="width: 200px;" class="filter-item" />-->
|
||||
<el-select v-model="listQuery.clusterId" placeholder="所属集群" class="filter-item">
|
||||
<el-option key="" label="所属集群" value="" />
|
||||
<el-option key="-1" label="单机" value="-1" />
|
||||
<el-option v-for="item in canalClusters" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
<el-input v-model="listQuery.ip" placeholder="Server IP" style="width: 200px;" class="filter-item" />
|
||||
<el-button class="filter-item" type="primary" icon="el-icon-search" plain @click="queryData()">查询</el-button>
|
||||
<el-button class="filter-item" type="primary" @click="handleCreate()">新建Server</el-button>
|
||||
<el-button class="filter-item" type="info" @click="fetchData()">刷新列表</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="list"
|
||||
element-loading-text="Loading"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column label="所属集群" min-width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.canalCluster !== null">
|
||||
{{ scope.row.canalCluster.name }}
|
||||
</span>
|
||||
<span v-else>
|
||||
-
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Server 名称" min-width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.name }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Server IP" min-width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.ip }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="admin 端口" min-width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.adminPort }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="tcp 端口" min-width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.tcpPort }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="metric 端口" min-width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.metricPort }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column class-name="status-col" label="状态" min-width="150" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status | statusFilter">{{ scope.row.status | statusLabel }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="created_at" label="操作" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-dropdown trigger="click">
|
||||
<el-button type="primary" size="mini">
|
||||
操作<i class="el-icon-arrow-down el-icon--right" />
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="handleConfig(scope.row)">配置</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="handleUpdate(scope.row)">修改</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="handleDelete(scope.row)">删除</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="handleStart(scope.row)">启动</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="handleStop(scope.row)">停止</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="handleInstances(scope.row)">详情</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="handleLog(scope.row)">日志</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="count>0" :total="count" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="fetchData()" />
|
||||
<el-dialog :visible.sync="dialogFormVisible" :title="textMap[dialogStatus]" width="600px">
|
||||
<el-form ref="dataForm" :rules="rules" :model="nodeModel" label-position="left" label-width="120px" style="width: 400px; margin-left:30px;">
|
||||
<el-form-item label="所属集群" prop="clusterId">
|
||||
<el-select v-if="dialogStatus === 'create'" v-model="nodeModel.clusterId" placeholder="选择所属集群">
|
||||
<el-option key="" label="单机" value="" />
|
||||
<el-option v-for="item in canalClusters" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
<el-select v-else v-model="nodeModel.clusterId" placeholder="选择所属集群" disabled="disabled">
|
||||
<el-option key="" label="单机" value="" />
|
||||
<el-option v-for="item in canalClusters" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Server 名称" prop="name">
|
||||
<el-input v-model="nodeModel.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Server IP" prop="ip">
|
||||
<el-input v-model="nodeModel.ip" />
|
||||
</el-form-item>
|
||||
<el-form-item label="admin 端口" prop="adminPort">
|
||||
<el-input v-model="nodeModel.adminPort" placeholder="11110" type="number" />
|
||||
</el-form-item>
|
||||
<el-form-item label="tcp 端口" prop="tcpPort">
|
||||
<el-input v-model="nodeModel.tcpPort" placeholder="11111" type="number" />
|
||||
</el-form-item>
|
||||
<el-form-item label="metric 端口" prop="metricPort">
|
||||
<el-input v-model="nodeModel.metricPort" placeholder="11112" type="number" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="dataOperation()">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog :visible.sync="dialogInstances" title="instance 列表" width="800px">
|
||||
<div class="filter-container">
|
||||
<el-button class="filter-item" type="info" @click="activeInstances()">刷新列表</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="listLoading2"
|
||||
:data="instanceList"
|
||||
element-loading-text="Loading"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column label="Instance 名称" min-width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.name }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" min-width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.runningStatus | statusFilter">{{ scope.row.runningStatus | statusLabel }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-dropdown trigger="click">
|
||||
<el-button type="primary" size="mini">
|
||||
操作<i class="el-icon-arrow-down el-icon--right" />
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="handleStartInstance(scope.row)">启动</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="handleStopInstance(scope.row)">停止</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addNodeServer, getNodeServers, updateNodeServer, deleteNodeServer, startNodeServer, stopNodeServer } from '@/api/nodeServer'
|
||||
import { getActiveInstances, stopInstance, startInstance } from '@/api/canalInstance'
|
||||
import { getCanalClusters } from '@/api/canalCluster'
|
||||
import Pagination from '@/components/Pagination'
|
||||
|
||||
export default {
|
||||
components: { Pagination },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
'1': 'success',
|
||||
'0': 'gray',
|
||||
'-1': 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
statusLabel(status) {
|
||||
const statusMap = {
|
||||
'1': '启动',
|
||||
'0': '停止',
|
||||
'-1': '断开'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
instanceList: null,
|
||||
listLoading: true,
|
||||
listLoading2: true,
|
||||
serverIdTmp: null,
|
||||
canalClusters: [],
|
||||
count: 0,
|
||||
listQuery: {
|
||||
name: '',
|
||||
ip: '',
|
||||
clusterId: null,
|
||||
page: 1,
|
||||
size: 20
|
||||
},
|
||||
dialogFormVisible: false,
|
||||
dialogInstances: false,
|
||||
textMap: {
|
||||
create: '新建Server信息',
|
||||
update: '修改Server信息'
|
||||
},
|
||||
nodeModel: {
|
||||
id: undefined,
|
||||
clusterId: null,
|
||||
name: null,
|
||||
ip: null,
|
||||
adminPort: 11110,
|
||||
tcpPort: 11111,
|
||||
metricPort: 11112
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: 'Server 名称不能为空', trigger: 'change' }],
|
||||
ip: [{ required: true, message: 'Server IP不能为空', trigger: 'change' }],
|
||||
adminPort: [{ required: true, message: 'Server admin端口不能为空', trigger: 'change' }]
|
||||
},
|
||||
dialogStatus: 'create'
|
||||
}
|
||||
},
|
||||
// { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'change' }
|
||||
created() {
|
||||
getCanalClusters().then((res) => {
|
||||
this.canalClusters = res.data
|
||||
})
|
||||
if (this.$route.query.clusterId) {
|
||||
try {
|
||||
this.listQuery.clusterId = Number(this.$route.query.clusterId)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
this.listLoading = true
|
||||
getNodeServers(this.listQuery).then(res => {
|
||||
this.list = res.data.items
|
||||
this.count = res.data.count
|
||||
}).finally(() => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
queryData() {
|
||||
this.listQuery.page = 1
|
||||
this.fetchData()
|
||||
},
|
||||
resetModel() {
|
||||
this.nodeModel = {
|
||||
id: undefined,
|
||||
clusterId: null,
|
||||
name: null,
|
||||
ip: null,
|
||||
adminPort: null,
|
||||
tcpPort: null,
|
||||
metricPort: null
|
||||
}
|
||||
},
|
||||
handleCreate() {
|
||||
this.resetModel()
|
||||
this.dialogStatus = 'create'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
},
|
||||
handleInstances(row) {
|
||||
this.serverIdTmp = row.id
|
||||
this.activeInstances()
|
||||
},
|
||||
activeInstances() {
|
||||
this.listLoading2 = true
|
||||
this.dialogInstances = true
|
||||
getActiveInstances(this.serverIdTmp).then(res => {
|
||||
this.instanceList = res.data
|
||||
}).finally(() => {
|
||||
this.listLoading2 = false
|
||||
})
|
||||
},
|
||||
dataOperation() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.dialogStatus === 'create') {
|
||||
addNodeServer(this.nodeModel).then(res => {
|
||||
this.operationRes(res)
|
||||
})
|
||||
}
|
||||
if (this.dialogStatus === 'update') {
|
||||
updateNodeServer(this.nodeModel).then(res => {
|
||||
this.operationRes(res)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
operationRes(res) {
|
||||
if (res.data === 'success') {
|
||||
this.fetchData()
|
||||
this.dialogFormVisible = false
|
||||
this.$message({
|
||||
message: this.textMap[this.dialogStatus] + '成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: this.textMap[this.dialogStatus] + '失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
},
|
||||
handleConfig(row) {
|
||||
if (row.canalCluster !== null) {
|
||||
this.$message({ message: '集群模式Server不允许单独变更配置，请在集群配置变更', type: 'error' })
|
||||
return
|
||||
}
|
||||
this.$router.push('/canalServer/nodeServer/config?serverId=' + row.id)
|
||||
},
|
||||
handleUpdate(row) {
|
||||
this.resetModel()
|
||||
this.nodeModel = Object.assign({}, row)
|
||||
this.dialogStatus = 'update'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
},
|
||||
handleDelete(row) {
|
||||
this.$confirm('删除Server信息会导致节点服务停止', '确定删除Server信息', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteNodeServer(row.id).then((res) => {
|
||||
if (res.data === 'success') {
|
||||
this.fetchData()
|
||||
this.$message({
|
||||
message: '删除Server信息成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: '删除Server信息失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
handleStart(row) {
|
||||
if (row.status !== '0') {
|
||||
this.$message({ message: '当前Server不是停止状态，无法启动', type: 'error' })
|
||||
return
|
||||
}
|
||||
this.$confirm('启动Server服务', '确定启动Server服务', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
startNodeServer(row.id).then((res) => {
|
||||
if (res.data) {
|
||||
this.fetchData()
|
||||
this.$message({
|
||||
message: '启动成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: '启动Server服务出现异常',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
handleStop(row) {
|
||||
if (row.status !== '1') {
|
||||
this.$message({ message: '当前Server不是启动状态，无法停止', type: 'error' })
|
||||
return
|
||||
}
|
||||
this.$confirm('停止Server服务会导致所有Instance都停止服务', '确定停止Server服务', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
stopNodeServer(row.id).then((res) => {
|
||||
if (res.data) {
|
||||
this.fetchData()
|
||||
this.$message({
|
||||
message: '停止成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: '停止Server服务出现异常',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
handleLog(row) {
|
||||
this.$router.push('nodeServer/log?id=' + row.id)
|
||||
},
|
||||
handleStartInstance(row) {
|
||||
if (row.runningStatus !== '0') {
|
||||
this.$message({ message: '当前Instance不是停止状态，无法启动', type: 'error' })
|
||||
return
|
||||
}
|
||||
this.$confirm('启动Instance服务', '确定启动Instance服务', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
startInstance(row.id, this.serverIdTmp).then((res) => {
|
||||
if (res.data) {
|
||||
this.activeInstances()
|
||||
this.$message({
|
||||
message: '启动成功, 稍后请刷新列表查看状态',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: '启动Instance服务出现异常',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
handleStopInstance(row) {
|
||||
if (row.runningStatus !== '1') {
|
||||
this.$message({ message: '当前Instance不是运行状态，无法停止', type: 'error' })
|
||||
return
|
||||
}
|
||||
this.$confirm('集群模式下停止实例其它主机将会抢占执行该实例', '停止 Instance 服务', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
stopInstance(row.id, this.serverIdTmp).then((res) => {
|
||||
if (res.data) {
|
||||
this.activeInstances()
|
||||
this.$message({
|
||||
message: '停止成功, 稍后请刷新列表查看状态',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: '停止Instance服务出现异常',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
33
admin/admin-ui/src/views/dashboard/index.vue
Normal file
33
admin/admin-ui/src/views/dashboard/index.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<div class="dashboard-text"> </div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'name'
|
||||
])
|
||||
},
|
||||
mounted() {
|
||||
this.$router.push('/canalServer')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard {
|
||||
&-container {
|
||||
margin: 30px;
|
||||
}
|
||||
&-text {
|
||||
font-size: 30px;
|
||||
line-height: 46px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
237
admin/admin-ui/src/views/login/index.vue
Normal file
237
admin/admin-ui/src/views/login/index.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
|
||||
|
||||
<div class="title-container">
|
||||
<h3 class="title">Canal Admin Login</h3>
|
||||
</div>
|
||||
|
||||
<el-form-item prop="username">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input
|
||||
ref="username"
|
||||
v-model="loginForm.username"
|
||||
placeholder="Username"
|
||||
name="username"
|
||||
type="text"
|
||||
tabindex="1"
|
||||
auto-complete="on"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password" />
|
||||
</span>
|
||||
<el-input
|
||||
:key="passwordType"
|
||||
ref="password"
|
||||
v-model="loginForm.password"
|
||||
:type="passwordType"
|
||||
placeholder="Password"
|
||||
name="password"
|
||||
tabindex="2"
|
||||
auto-complete="on"
|
||||
@keyup.enter.native="handleLogin"
|
||||
/>
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
||||
</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
|
||||
|
||||
<div class="tips">
|
||||
<!-- <span style="margin-right:20px;">username: admin</span>
|
||||
<span> password: any</span> -->
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { validUsername } from '@/utils/validate'
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (!validUsername(value)) {
|
||||
callback(new Error('Please enter the correct user name'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validatePassword = (rule, value, callback) => {
|
||||
if (value.length < 6) {
|
||||
callback(new Error('The password can not be less than 6 digits'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
loginRules: {
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
|
||||
},
|
||||
loading: false,
|
||||
passwordType: 'password',
|
||||
redirect: undefined
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function(route) {
|
||||
this.redirect = route.query && route.query.redirect
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showPwd() {
|
||||
if (this.passwordType === 'password') {
|
||||
this.passwordType = ''
|
||||
} else {
|
||||
this.passwordType = 'password'
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.$refs.password.focus()
|
||||
})
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.$store.dispatch('user/login', this.loginForm).then(() => {
|
||||
this.$router.push({ path: this.redirect || '/' })
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* 修复input 背景不协调 和光标变色 */
|
||||
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
||||
|
||||
$bg:#283443;
|
||||
$light_gray:#fff;
|
||||
$cursor: #fff;
|
||||
|
||||
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
||||
.login-container .el-input input {
|
||||
color: $cursor;
|
||||
}
|
||||
}
|
||||
|
||||
/* reset element-ui css */
|
||||
.login-container {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 47px;
|
||||
width: 85%;
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 12px 5px 12px 15px;
|
||||
color: $light_gray;
|
||||
height: 47px;
|
||||
caret-color: $cursor;
|
||||
|
||||
&:-webkit-autofill {
|
||||
box-shadow: 0 0 0px 1000px $bg inset !important;
|
||||
-webkit-text-fill-color: $cursor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$bg:#2d3a4b;
|
||||
$dark_gray:#889aa4;
|
||||
$light_gray:#eee;
|
||||
|
||||
.login-container {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
background-color: $bg;
|
||||
overflow: hidden;
|
||||
|
||||
.login-form {
|
||||
position: relative;
|
||||
width: 520px;
|
||||
max-width: 100%;
|
||||
padding: 160px 35px 0;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
|
||||
span {
|
||||
&:first-of-type {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
padding: 6px 5px 6px 15px;
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-size: 26px;
|
||||
color: $light_gray;
|
||||
margin: 0px auto 40px auto;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
84
admin/admin-ui/src/views/sys/UserInfo.vue
Normal file
84
admin/admin-ui/src/views/sys/UserInfo.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="app-container" style="width: 600px;">
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="form.username" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="旧密码" prop="oldPassword">
|
||||
<el-input v-model="form.oldPassword" type="password" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="form.password" placeholder="空为不修改密码" type="password" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">修改</el-button>
|
||||
<el-button @click="onCancel">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getInfo, updateUser } from '@/api/user'
|
||||
import { getToken } from '@/utils/auth'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
username: '',
|
||||
oldPassword: '',
|
||||
password: null
|
||||
},
|
||||
rules: {
|
||||
username: [{ required: true, message: '用户名能为空', trigger: 'change' }],
|
||||
oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchUserInfo()
|
||||
},
|
||||
methods: {
|
||||
fetchUserInfo() {
|
||||
getInfo(getToken()).then(res => {
|
||||
this.form.username = res.data.username
|
||||
})
|
||||
},
|
||||
onSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
updateUser(this.form).then(res => {
|
||||
if (res.data === 'success') {
|
||||
this.form.oldPassword = ''
|
||||
this.form.password = null
|
||||
this.$nextTick(() => {
|
||||
this.$refs['form'].clearValidate()
|
||||
})
|
||||
this.$message({
|
||||
message: '修改用户信息成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: '修改用户信息成功',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
history.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.line{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user