canal-admin完善 (#2121)

* admin端口调整完成 * server端适配调整 * 调整部分功能 * 单机/集群admin调试完成 * 重新发布前端页面
2026-11-04 00:30:15 +08:00 · 2019-08-30 18:09:22 +08:00
parent e8dba41216
commit 89055f7405
60 changed files with 1882 additions and 382 deletions
--- a/canal-admin/canal-admin-ui/src/api/canalCluster.js
+++ b/canal-admin/canal-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'
+  })
+}
--- a/canal-admin/canal-admin-ui/src/api/canalConfig.js
+++ b/canal-admin/canal-admin-ui/src/api/canalConfig.js
@@ -1,8 +1,8 @@
 import request from '@/utils/request'

-export function getCanalConfig() {
+export function getCanalConfig(clusterId, serverId) {
  return request({
-    url: '/canal/config',
+    url: '/canal/config/' + clusterId + '/' + serverId,
    method: 'get'
  })
 }
--- a/canal-admin/canal-admin-ui/src/api/canalInstance.js
+++ b/canal-admin/canal-admin-ui/src/api/canalInstance.js
@@ -58,3 +58,17 @@ 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'
+  })
+}
--- a/canal-admin/canal-admin-ui/src/components/Pagination/index.vue
+++ b/canal-admin/canal-admin-ui/src/components/Pagination/index.vue
@@ -0,0 +1,100 @@
+<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>
--- a/canal-admin/canal-admin-ui/src/router/index.js
+++ b/canal-admin/canal-admin-ui/src/router/index.js
@@ -76,17 +76,24 @@ export const constantRoutes = [
    name: 'Canal Server',
    meta: { title: 'Canal Server', icon: 'example' },
    children: [
+      {
+        path: 'canalClusters',
+        name: 'Canal 集群管理',
+        component: () => import('@/views/canalServer/CanalCluster'),
+        meta: { title: '集群管理', icon: 'tree' }
+      },
      {
        path: 'nodeServers',
        name: 'Server 状态',
        component: () => import('@/views/canalServer/NodeServer'),
-        meta: { title: 'Server 管理', icon: 'tree' }
+        meta: { title: 'Server 管理', icon: 'form' }
      },
      {
-        path: 'config',
-        name: 'Server 全局配置',
-        component: () => import('@/views/canalServer/Config'),
-        meta: { title: 'Server 全局配置', icon: 'form' }
+        path: 'nodeServer/config',
+        name: 'Server 配置',
+        component: () => import('@/views/canalServer/CanalConfig'),
+        meta: { title: 'Server 配置' },
+        hidden: true
      },
      {
        path: 'canalInstances',
--- a/canal-admin/canal-admin-ui/src/utils/scrollTo.js
+++ b/canal-admin/canal-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()
+}
--- a/canal-admin/canal-admin-ui/src/views/canalServer/CanalCluster.vue
+++ b/canal-admin/canal-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>
--- a/canal-admin/canal-admin-ui/src/views/canalServer/CanalConfig.vue
+++ b/canal-admin/canal-admin-ui/src/views/canalServer/CanalConfig.vue
@@ -4,8 +4,9 @@
      <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="info" @click="onBack">返回</el-button>
        </el-form-item>
      </div>
      <editor v-model="form.content" lang="properties" theme="chrome" width="100%" :height="800" @init="editorInit" />
@@ -25,7 +26,9 @@ export default {
      form: {
        id: null,
        name: '',
-        content: ''
+        content: '',
+        serverId: null,
+        clusterId: null
      }
    }
  },
@@ -44,16 +47,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(
-        '修改Server主配置可能会导致Server重启，是否继续？',
+        '修改主配置可能会导致Server重启，是否继续？',
        '确定修改',
        {
          confirmButtonText: '确定',
@@ -64,13 +83,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 +98,9 @@ export default {
    },
    onCancel() {
      this.loadCanalConfig()
+    },
+    onBack() {
+      history.go(-1)
    }
  }
 }
--- a/canal-admin/canal-admin-ui/src/views/canalServer/CanalInstance.vue
+++ b/canal-admin/canal-admin-ui/src/views/canalServer/CanalInstance.vue
@@ -2,7 +2,13 @@
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.name" placeholder="Instance 名称" style="width: 200px;" class="filter-item" />
-      <el-button class="filter-item" type="primary" icon="el-icon-search" plain @click="fetchData()">查询</el-button>
+      <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>
@@ -20,9 +26,25 @@
          {{ scope.row.name }}
        </template>
      </el-table-column>
-      <el-table-column label="运行Server" min-width="200" align="center">
+      <el-table-column label="所属集群" min-width="200" align="center">
        <template slot-scope="scope">
-          <span>{{ scope.row.nodeIp }}</span>
+          <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">
@@ -47,33 +69,29 @@
        </template>
      </el-table-column>
    </el-table>
-    <el-dialog :visible.sync="dialogFormVisible" title="确定启动Instance" width="500px">
-      <el-form ref="dataForm" :rules="rules" :model="nodeModel" label-position="left" label-width="120px" style="width: 350px; margin-left:30px;">
-        <el-form-item label="选择运行Server" prop="nodeId">
-          <el-select v-model="nodeModel.id" placeholder="选择运行Server">
-            <el-option v-for="item in nodeServices" :key="item.id" :label="item.name" :value="item.id" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">取消</el-button>
-        <el-button type="primary" @click="doStartInstance()">确定</el-button>
-      </div>
-    </el-dialog>
+    <pagination v-show="count>0" :total="count" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="fetchData()" />
  </div>
 </template>

 <script>
-import { getCanalInstances, deleteCanalInstance, startInstance, stopInstance } from '@/api/canalInstance'
-import { getNodeServers } from '@/api/nodeServer'
+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 = {
-        published: 'success',
-        draft: 'gray',
-        deleted: 'danger'
+        '1': 'success',
+        '0': 'gray'
+      }
+      return statusMap[status]
+    },
+    statusLabel(status) {
+      const statusMap = {
+        '1': '启动',
+        '0': '停止'
      }
      return statusMap[status]
    }
@@ -84,26 +102,37 @@ export default {
      listLoading: true,
      dialogFormVisible: false,
      nodeServices: [],
+      count: 0,
+      options: [],
      listQuery: {
-        name: ''
+        name: '',
+        clusterServerId: '',
+        page: 1,
+        size: 20
      },
      currentId: null,
-      nodeModel: {
-        id: 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
+        this.list = res.data.items
+        this.count = res.data.count
+      }).finally(() => {
        this.listLoading = false
      })
    },
@@ -136,55 +165,46 @@ export default {
      })
    },
    handleStart(row) {
-      if (row.nodeId !== null) {
-        this.$message({ message: '当前Instance已处于启动状态!', type: 'error' })
-        return
-      }
-
-      this.currentId = row.id
-      this.nodeModel.id = null
-
-      this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
-
-      getNodeServers().then((res) => {
-        this.nodeServices = res.data
-        this.dialogFormVisible = true
-      })
-    },
-    doStartInstance() {
-      startInstance(this.currentId, this.nodeModel.id).then((res) => {
-        if (res.data) {
-          this.fetchData()
-          this.$message({
-            message: '启动成功',
-            type: 'success'
-          })
-          this.dialogFormVisible = false
-        } else {
-          this.$message({
-            message: '启动Instance出现异常',
-            type: 'error'
-          })
-        }
+      // 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.nodeId === null) {
-        this.$message({ message: '当前Instance已处于停止状态！', type: 'error' })
-        return
-      }
+      // if (row.runningStatus === '0') {
+      //   this.$message({ message: '当前Instance已处于停止状态！', type: 'error' })
+      //   return
+      // }
      this.$confirm('停止Instance: ' + row.name, '确定停止Instance服务', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
-        stopInstance(row.id, row.nodeId).then((res) => {
+        instanceStatus(row.id, 'stop').then((res) => {
          if (res.data) {
            this.fetchData()
            this.$message({
-              message: '停止成功',
+              message: '停止成功, 稍后请刷新列表查看状态',
              type: 'success'
            })
          } else {
@@ -201,7 +221,7 @@ export default {
        this.$message({ message: '当前Instance不是启动状态，无法查看日志', type: 'warning' })
        return
      }
-      this.$router.push('canalInstance/log?id=' + row.id + '&nodeId=' + row.nodeId)
+      this.$router.push('canalInstance/log?id=' + row.id + '&nodeId=' + row.nodeServer.id)
    }
  }
 }
--- a/canal-admin/canal-admin-ui/src/views/canalServer/CanalInstanceAdd.vue
+++ b/canal-admin/canal-admin-ui/src/views/canalServer/CanalInstanceAdd.vue
@@ -3,7 +3,11 @@
    <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" />
-        &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 class="filter-item" type="primary" @click="onSubmit">保存</el-button>
        <el-button class="filter-item" type="info" @click="onBack">返回</el-button>
      </div>
@@ -14,6 +18,7 @@

 <script>
 import { addCanalInstance } from '@/api/canalInstance'
+import { getClustersAndServers } from '@/api/canalCluster'

 export default {
  components: {
@@ -21,13 +26,18 @@ export default {
  },
  data() {
    return {
+      options: [],
      form: {
        name: '',
-        content: ''
+        content: '',
+        clusterServerId: ''
      }
    }
  },
  created() {
+    getClustersAndServers().then((res) => {
+      this.options = res.data
+    })
  },
  methods: {
    editorInit() {
@@ -48,6 +58,20 @@ export default {
        })
        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(
        '确定新建',
        '确定新建',
--- a/canal-admin/canal-admin-ui/src/views/canalServer/CanalInstanceUpdate.vue
+++ b/canal-admin/canal-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,6 +61,7 @@ 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() {
--- a/canal-admin/canal-admin-ui/src/views/canalServer/NodeServer.vue
+++ b/canal-admin/canal-admin-ui/src/views/canalServer/NodeServer.vue
@@ -1,9 +1,14 @@
 <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.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="fetchData()">查询</el-button> -->
+      <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>
@@ -15,6 +20,16 @@
      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 }}
@@ -52,18 +67,31 @@
              操作<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>
@@ -85,13 +113,54 @@
        <el-button type="primary" @click="dataOperation()">确定</el-button>
      </div>
    </el-dialog>
+    <el-dialog :visible.sync="dialogInstances" title="实例列表" 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 = {
@@ -113,18 +182,28 @@ export default {
  data() {
    return {
      list: null,
+      instanceList: null,
      listLoading: true,
+      listLoading2: true,
+      serverIdTmp: null,
+      canalClusters: [],
+      count: 0,
      listQuery: {
        name: '',
-        ip: ''
+        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,
@@ -134,26 +213,43 @@ export default {
      rules: {
        name: [{ required: true, message: 'Server 名称不能为空', trigger: 'change' }],
        ip: [{ required: true, message: 'Server IP不能为空', trigger: 'change' }],
-        port: [{ required: true, message: 'Server admin端口不能为空', 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
+        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,
@@ -169,6 +265,19 @@ export default {
        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) {
@@ -200,6 +309,9 @@ export default {
        })
      }
    },
+    handleConfig(row) {
+      this.$router.push('/canalServer/nodeServer/config?serverId=' + row.id)
+    },
    handleUpdate(row) {
      this.resetModel()
      this.nodeModel = Object.assign({}, row)
@@ -210,7 +322,7 @@ export default {
      })
    },
    handleDelete(row) {
-      this.$confirm('删除Server信息并不会导致节点服务停止', '确定删除Server信息', {
+      this.$confirm('删除Server信息会导致节点服务停止', '确定删除Server信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
@@ -285,6 +397,58 @@ export default {
    },
    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'
+            })
+          }
+        })
+      })
    }
  }
 }