feature(canal):support start with timestamp position(empty journal_file,set position=0),#2594

This reverts commit 31acfc0101.

.gitignore

@@ -18,7 +18,8 @@ jtester.properties
 *.rpm
 client-adapter/example/
 *.dat
-
-canal-admin/canal-admin-ui/dist
-canal-admin/canal-admin-ui/node
-canal-admin/canal-admin-ui/node_modules
+conf/
+canal-admin/canal-admin-ui/dist/
+canal-admin/canal-admin-ui/node/
+canal-admin/canal-admin-ui/node_modules/
+canal-admin/canal-admin-server/src/main/resources/conf/

README.md

@@ -5,11 +5,13 @@
 [![average time to resolve an issue](http://isitmaintained.com/badge/resolution/alibaba/canal.svg)](http://isitmaintained.com/project/alibaba/canal "average time to resolve an issue")
 [![percentage of issues still open](http://isitmaintained.com/badge/open/alibaba/canal.svg)](http://isitmaintained.com/project/alibaba/canal "percentage of issues still open")
 
-## 背景
+## 简介
 
-早期，阿里巴巴 B2B 公司因为存在杭州和美国双机房部署，存在跨机房同步的业务需求 ，主要是基于trigger的方式获取增量变更。从 2010 年开始，公司开始逐步尝试数据库日志解析，获取增量变更进行同步，由此衍生出了增量订阅和消费业务，从此开启一段新纪元。
+![](https://img-blog.csdnimg.cn/20191104101735947.png)
 
-当前的 canal 支持源端 MySQL 版本包括 5.1.x , 5.5.x , 5.6.x , 5.7.x , 8.0.x
+**canal [kə'næl]**，译意为水道/管道/沟渠，主要用途是基于 MySQL 数据库增量日志解析，提供增量数据订阅和消费
+
+早期阿里巴巴因为杭州和美国双机房部署，存在跨机房同步的业务需求，实现方式主要是基于业务 trigger 获取增量变更。从 2010 年开始，业务逐步尝试数据库日志解析获取增量变更进行同步，由此衍生出了大量的数据库增量订阅和消费业务。
 
 基于日志增量订阅和消费的业务包括
 - 数据库镜像
@@ -18,12 +20,7 @@
 - 业务 cache 刷新
 - 带业务逻辑的增量数据处理
 
-## 项目介绍
-
-#### 名称：canal [kə'næl]
-#### 译意： 水道/管道/沟渠
-#### 产品定位： 基于数据库增量日志解析，提供增量数据订阅和消费
-#### 关键词： MySQL binlog parser / real-time / queue&topic / index build
+当前的 canal 支持源端 MySQL 版本包括 5.1.x , 5.5.x , 5.6.x , 5.7.x , 8.0.x
 
 ## 工作原理
 
@@ -35,7 +32,6 @@
 - MySQL slave 重放 relay log 中事件，将数据变更反映它自己的数据
 
 #### canal 工作原理
-![](http://dl.iteye.com/upload/attachment/0080/3107/c87b67ba-394c-3086-9577-9db05be04c95.jpg)
 
 - canal 模拟 MySQL slave 的交互协议，伪装自己为 MySQL slave ，向 MySQL master 发送dump 协议
 - MySQL master 收到 dump 请求，开始推送 binary log 给 slave (即 canal )
@@ -43,7 +39,7 @@
 
 ## 重要版本更新说明
 
-canal 1.1.x 版本（[release_note](https://github.com/alibaba/canal/releases)）,性能与功能层面有较大的突破,重要提升包括:
+1. canal 1.1.x 版本（[release_note](https://github.com/alibaba/canal/releases)）,性能与功能层面有较大的突破,重要提升包括:
 
 - 整体性能测试&优化,提升了150%. #726 参考: [Performance](https://github.com/alibaba/canal/wiki/Performance)
 - 原生支持prometheus监控 #765 [Prometheus QuickStart](https://github.com/alibaba/canal/wiki/Prometheus-QuickStart)
@@ -51,6 +47,8 @@ canal 1.1.x 版本（[release_note](https://github.com/alibaba/canal/releases)
 - 原生支持aliyun rds的binlog订阅 (解决自动主备切换/oss binlog离线解析) 参考: [Aliyun RDS QuickStart](https://github.com/alibaba/canal/wiki/aliyun-RDS-QuickStart)
 - 原生支持docker镜像 #801 参考: [Docker QuickStart](https://github.com/alibaba/canal/wiki/Docker-QuickStart)
 
+2.  canal 1.1.4版本，迎来最重要的WebUI能力，引入canal-admin工程，支持面向WebUI的canal动态管理能力，支持配置、任务、日志等在线白屏运维能力，具体文档：[Canal Admin Guide](https://github.com/alibaba/canal/wiki/Canal-Admin-Guide)
+
 ## 文档
 
 - [Home](https://github.com/alibaba/canal/wiki/Home)
@@ -60,6 +58,11 @@ canal 1.1.x 版本（[release_note](https://github.com/alibaba/canal/releases)
   - [Canal Kafka/RocketMQ QuickStart](https://github.com/alibaba/canal/wiki/Canal-Kafka-RocketMQ-QuickStart")
   - [Aliyun RDS for MySQL QuickStart](https://github.com/alibaba/canal/wiki/aliyun-RDS-QuickStart)
   - [Prometheus QuickStart](https://github.com/alibaba/canal/wiki/Prometheus-QuickStart)
+- Canal Admin
+  - [Canal Admin QuickStart](https://github.com/alibaba/canal/wiki/Canal-Admin-QuickStart)
+  - [Canal Admin Guide](https://github.com/alibaba/canal/wiki/Canal-Admin-Guide)
+  - [Canal Admin ServerGuide](https://github.com/alibaba/canal/wiki/Canal-Admin-ServerGuide)
+  - [Canal Admin Docker](https://github.com/alibaba/canal/wiki/Canal-Admin-Docker)
 - [AdminGuide](https://github.com/alibaba/canal/wiki/AdminGuide)
 - [ClientExample](https://github.com/alibaba/canal/wiki/ClientExample)
 - [ClientAPI](https://github.com/alibaba/canal/wiki/ClientAPI)
@@ -81,6 +84,7 @@ canal 特别设计了 client-server 模式，交互协议使用 protobuf 3.0 , c
 - canal go客户端: [https://github.com/CanalClient/canal-go](https://github.com/CanalClient/canal-go)
 - canal php客户端: [https://github.com/xingwenge/canal-php](https://github.com/xingwenge/canal-php)
 - canal Python客户端：[https://github.com/haozi3156666/canal-python](https://github.com/haozi3156666/canal-python)
+- canal Rust客户端：[https://github.com/laohanlinux/canal-rs](https://github.com/laohanlinux/canal-rs)
 
 canal 作为 MySQL binlog 增量获取和解析工具，可将变更记录投递到 MQ 系统中，比如 Kafka/RocketMQ，可以借助于 MQ 的多语言能力 
 
@@ -92,9 +96,4 @@ canal 作为 MySQL binlog 增量获取和解析工具，可将变更记录投递
 - [阿里巴巴去 Oracle 数据迁移同步工具: yugong](http://github.com/alibaba/yugong)
 
 ## 问题反馈
-- 邮件: jianghang115@gmail.com
 - 报告 issue: [github issues](https://github.com/alibaba/canal/issues)
-
-## 其他资料
-
-  - [ ADC 阿里技术嘉年华分享 ppt ( google docs)](https://docs.google.com/presentation/d/1MkszUPYRDkfVPz9IqOT1LLT5d9tuwde_WC8GZvjaDRg/edit?usp=sharing) 

admin/admin-ui/pom.xml

@@ -1,16 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<project xmlns="http://maven.apache.org/POM/4.0.0"
-         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <parent>
-    <artifactId>canal-admin</artifactId>
+    <artifactId>canal.admin</artifactId>
     <groupId>com.alibaba.otter</groupId>
-    <version>1.1.4-SNAPSHOT</version>
+    <version>1.1.5-SNAPSHOT</version>
   </parent>
   <modelVersion>4.0.0</modelVersion>
 
-  <artifactId>canal-admin-ui</artifactId>
-
+  <artifactId>canal.admin-ui</artifactId>
+  <name>canal admin-ui module for otter ${project.version}</name>
   <properties>
     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
     <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
@@ -20,11 +18,11 @@
 
   <profiles>
     <profile>
-      <id>release</id>
+      <id>npm</id>
       <activation>
         <property>
           <name>env</name>
-          <value>release</value>
+          <value>npm</value>
         </property>
       </activation>
       <build>

admin/admin-ui/src/api/canalCluster.js

@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+export function getCanalClusters(params) {
+  return request({
+    url: '/canal/clusters',
+    method: 'get',
+    params: params
+  })
+}
+
+export function addCanalCluster(data) {
+  return request({
+    url: '/canal/cluster',
+    method: 'post',
+    data
+  })
+}
+
+export function canalClusterDetail(id) {
+  return request({
+    url: '/canal/cluster/' + id,
+    method: 'get'
+  })
+}
+
+export function updateCanalCluster(data) {
+  return request({
+    url: '/canal/cluster',
+    method: 'put',
+    data
+  })
+}
+
+export function deleteCanalCluster(id) {
+  return request({
+    url: '/canal/cluster/' + id,
+    method: 'delete'
+  })
+}
+
+export function getClustersAndServers() {
+  return request({
+    url: '/canal/clustersAndServers',
+    method: 'get'
+  })
+}

admin/admin-ui/src/api/canalConfig.js

@@ -0,0 +1,23 @@
+import request from '@/utils/request'
+
+export function getCanalConfig(clusterId, serverId) {
+  return request({
+    url: '/canal/config/' + clusterId + '/' + serverId,
+    method: 'get'
+  })
+}
+
+export function updateCanalConfig(data) {
+  return request({
+    url: '/canal/config',
+    method: 'put',
+    data
+  })
+}
+
+export function getTemplateConfig() {
+  return request({
+    url: '/canal/config/template',
+    method: 'get'
+  })
+}

admin/admin-ui/src/api/canalInstance.js

@@ -58,3 +58,24 @@ export function instanceLog(id, nodeId) {
     method: 'get'
   })
 }
+
+export function instanceStatus(id, option) {
+  return request({
+    url: '/canal/instance/status/' + id + '?option=' + option,
+    method: 'put'
+  })
+}
+
+export function getActiveInstances(serverId) {
+  return request({
+    url: '/canal/active/instances/' + serverId,
+    method: 'get'
+  })
+}
+
+export function getTemplateInstance() {
+  return request({
+    url: '/canal/instance/template',
+    method: 'get'
+  })
+}

admin/admin-ui/src/components/Pagination/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container">
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/utils/scrollTo'
+
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50]
+      }
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pagination-container {
+  background: #fff;
+  padding: 32px 16px;
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>

admin/admin-ui/src/router/index.js

@@ -77,49 +77,56 @@ export const constantRoutes = [
     meta: { title: 'Canal Server', icon: 'example' },
     children: [
       {
-        path: 'nodeServers',
-        name: '节点状态',
-        component: () => import('@/views/canalServer/NodeServer'),
-        meta: { title: '节点管理', icon: 'tree' }
+        path: 'canalClusters',
+        name: 'Canal 集群管理',
+        component: () => import('@/views/canalServer/CanalCluster'),
+        meta: { title: '集群管理', icon: 'tree' }
       },
       {
-        path: 'config',
-        name: 'Canal主配置',
-        component: () => import('@/views/canalServer/Config'),
-        meta: { title: 'Canal主配置', icon: 'form' }
+        path: 'nodeServers',
+        name: 'Server 状态',
+        component: () => import('@/views/canalServer/NodeServer'),
+        meta: { title: 'Server 管理', icon: 'form' }
+      },
+      {
+        path: 'nodeServer/config',
+        name: 'Server 配置',
+        component: () => import('@/views/canalServer/CanalConfig'),
+        meta: { title: 'Server 配置' },
+        hidden: true
       },
       {
         path: 'canalInstances',
-        name: '实例管理',
+        name: 'Instance 管理',
         component: () => import('@/views/canalServer/CanalInstance'),
-        meta: { title: '实例管理', icon: 'nested' }
+        meta: { title: 'Instance 管理', icon: 'nested' }
       },
       {
         path: 'canalInstance/add',
-        name: '新建实例配置',
+        name: '新建Instance配置',
         component: () => import('@/views/canalServer/CanalInstanceAdd'),
-        meta: { title: '新建实例配置' },
+        meta: { title: '新建Instance配置' },
         hidden: true
       },
       {
         path: 'canalInstance/modify',
-        name: '修改实例配置',
+        name: '修改Instance配置',
         component: () => import('@/views/canalServer/CanalInstanceUpdate'),
-        meta: { title: '修改实例配置' },
+        meta: { title: '修改Instance配置' },
         hidden: true
       },
       {
         path: 'nodeServer/log',
-        name: 'Canal日志',
+        name: 'Server 日志',
         component: () => import('@/views/canalServer/CanalLogDetail'),
-        meta: { title: 'Canal日志' },
+        meta: { title: 'Server 日志' },
         hidden: true
       },
       {
         path: 'canalInstance/log',
-        name: 'Canal Instance日志',
+        name: 'Instance 日志',
         component: () => import('@/views/canalServer/CanalInstanceLogDetail'),
-        meta: { title: 'Canal Instance日志' },
+        meta: { title: 'Instance 日志' },
         hidden: true
       }
     ]

admin/admin-ui/src/utils/scrollTo.js

@@ -0,0 +1,50 @@
+Math.easeInOutQuad = function(t, b, c, d) {
+  t /= d / 2
+  if (t < 1) {
+    return c / 2 * t * t + b
+  }
+  t--
+  return -c / 2 * (t * (t - 2) - 1) + b
+}
+
+// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+var requestAnimFrame = (function() {
+  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
+})()
+
+// because it's so fucking difficult to detect the scrolling element, just move them all
+function move(amount) {
+  document.documentElement.scrollTop = amount
+  document.body.parentNode.scrollTop = amount
+  document.body.scrollTop = amount
+}
+
+function position() {
+  return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
+}
+
+export function scrollTo(to, duration, callback) {
+  const start = position()
+  const change = to - start
+  const increment = 20
+  let currentTime = 0
+  duration = (typeof (duration) === 'undefined') ? 500 : duration
+  var animateScroll = function() {
+    // increment the time
+    currentTime += increment
+    // find the value with the quadratic in-out easing function
+    var val = Math.easeInOutQuad(currentTime, start, change, duration)
+    // move the document.body
+    move(val)
+    // do the animation unless its over
+    if (currentTime < duration) {
+      requestAnimFrame(animateScroll)
+    } else {
+      if (callback && typeof (callback) === 'function') {
+        // the animation is done so lets callback
+        callback()
+      }
+    }
+  }
+  animateScroll()
+}

admin/admin-ui/src/views/canalServer/CanalCluster.vue

@@ -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>

admin/admin-ui/src/views/canalServer/CanalConfig.vue

@@ -4,8 +4,10 @@
       <div style="padding-left: 10px;padding-top: 20px;">
         <el-form-item>
           {{ form.name }}&nbsp;&nbsp;&nbsp;&nbsp;
-          <el-button type="primary" @click="onSubmit">修改</el-button>
+          <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" />
@@ -14,7 +16,7 @@
 </template>
 
 <script>
-import { getCanalConfig, updateCanalConfig } from '@/api/canalConfig'
+import { getCanalConfig, updateCanalConfig, getTemplateConfig } from '@/api/canalConfig'
 
 export default {
   components: {
@@ -25,7 +27,9 @@ export default {
       form: {
         id: null,
         name: '',
-        content: ''
+        content: '',
+        serverId: null,
+        clusterId: null
       }
     }
   },
@@ -44,16 +48,32 @@ export default {
       require('brace/snippets/javascript')
     },
     loadCanalConfig() {
-      getCanalConfig().then(response => {
+      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(
-        '修改Canal主配置可能会导致Server重启，是否继续？',
+        '修改主配置可能会导致Server重启，是否继续？',
         '确定修改',
         {
           confirmButtonText: '确定',
@@ -64,13 +84,13 @@ export default {
         updateCanalConfig(this.form).then(response => {
           if (response.data === 'success') {
             this.$message({
-              message: '修改成功',
+              message: '保存成功',
               type: 'success'
             })
             this.loadCanalConfig()
           } else {
             this.$message({
-              message: '修改失败',
+              message: '保存失败',
               type: 'error'
             })
           }
@@ -79,6 +99,14 @@ export default {
     },
     onCancel() {
       this.loadCanalConfig()
+    },
+    onBack() {
+      history.go(-1)
+    },
+    onLoadTemplate() {
+      getTemplateConfig().then(res => {
+        this.form.content = res.data
+      })
     }
   }
 }

admin/admin-ui/src/views/canalServer/CanalInstance.vue

@@ -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>
+      &nbsp;&nbsp;
+      <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>

admin/admin-ui/src/views/canalServer/CanalInstanceAdd.vue

@@ -2,9 +2,14 @@
   <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="实例名称" style="width: 200px;" class="filter-item" />
-        &nbsp;
-        <el-button class="filter-item" type="primary" @click="onSubmit">新建</el-button>
+        <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" />
@@ -13,7 +18,8 @@
 </template>
 
 <script>
-import { addCanalInstance } from '@/api/canalInstance'
+import { addCanalInstance, getTemplateInstance } from '@/api/canalInstance'
+import { getClustersAndServers } from '@/api/canalCluster'
 
 export default {
   components: {
@@ -21,13 +27,18 @@ export default {
   },
   data() {
     return {
+      options: [],
       form: {
         name: '',
-        content: ''
+        content: '',
+        clusterServerId: ''
       }
     }
   },
   created() {
+    getClustersAndServers().then((res) => {
+      this.options = res.data
+    })
   },
   methods: {
     editorInit() {
@@ -43,7 +54,21 @@ export default {
     onSubmit() {
       if (this.form.name === '') {
         this.$message({
-          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
@@ -75,6 +100,11 @@ export default {
     },
     onBack() {
       history.go(-1)
+    },
+    onLoadTemplate() {
+      getTemplateInstance().then(res => {
+        this.form.content = res.data
+      })
     }
   }
 }

admin/admin-ui/src/views/canalServer/CanalInstanceUpdate.vue

@@ -4,6 +4,11 @@
       <div style="padding-left: 10px;padding-top: 20px;">
         <el-form-item>
           {{ form.name }}&nbsp;&nbsp;&nbsp;&nbsp;
+          <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>
@@ -16,6 +21,7 @@
 
 <script>
 import { canalInstanceDetail, updateCanalInstance } from '@/api/canalInstance'
+import { getClustersAndServers } from '@/api/canalCluster'
 
 export default {
   components: {
@@ -23,15 +29,20 @@ export default {
   },
   data() {
     return {
+      options: [],
       form: {
         id: null,
         name: '',
-        content: ''
+        content: '',
+        clusterServerId: ''
       }
     }
   },
   created() {
     this.loadCanalConfig()
+    getClustersAndServers().then((res) => {
+      this.options = res.data
+    })
   },
   methods: {
     editorInit() {
@@ -50,11 +61,12 @@ export default {
         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(
-        '修改Canal实例配置可能会导致实例重启，是否继续？',
+        '修改Instance配置可能会导致重启，是否继续？',
         '确定修改',
         {
           confirmButtonText: '确定',

admin/admin-ui/src/views/canalServer/NodeServer.vue

@@ -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>