|
@@ -0,0 +1,200 @@
|
|
|
+import React, { useEffect, useState } from 'react'
|
|
|
+import { fetchApi } from '@/apis/index'
|
|
|
+import { Table, message, Input } from 'antd'
|
|
|
+
|
|
|
+import { dc } from '@/conf/config'
|
|
|
+
|
|
|
+const getServices = `${dc}/api/gov/get-services`
|
|
|
+// 恢复
|
|
|
+const resumeServices = `${dc}/api/gov/server-resume`
|
|
|
+// 暂停
|
|
|
+const pauseServices = `${dc}/api/gov/server-pause`
|
|
|
+
|
|
|
+export default () => {
|
|
|
+ const [data, setData] = useState([])
|
|
|
+ const [params, setParams] = useState({
|
|
|
+ clusterID: '',
|
|
|
+ serviceID: '',
|
|
|
+ nodeID: ''
|
|
|
+ })
|
|
|
+
|
|
|
+ const onChange = v => setParams({ ...params, ...v })
|
|
|
+ const [loading, setLoading] = useState(true)
|
|
|
+
|
|
|
+ async function getData () {
|
|
|
+ setLoading(true)
|
|
|
+ const res = await fetchApi(getServices, params)
|
|
|
+ // const res = await axios({ url: getServices, method: 'POST', nodeID: v })
|
|
|
+ if (res && res.code === 0) {
|
|
|
+ const list = res.data.list?.map(item => {
|
|
|
+ let nodeLength = 0
|
|
|
+ const serviceList = (item.children || []).map(c => {
|
|
|
+ nodeLength += c.children.length
|
|
|
+ const nodeList = c.children.map(n => {
|
|
|
+ return {
|
|
|
+ ...n,
|
|
|
+ serviceID: c.id,
|
|
|
+ clusterID: item.id,
|
|
|
+ nodeID: n.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return {
|
|
|
+ list: nodeList,
|
|
|
+ childrenLength: c.childrenLength,
|
|
|
+ type: c.type,
|
|
|
+ id: c.id,
|
|
|
+ key: c.key
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ return {
|
|
|
+ list: serviceList,
|
|
|
+ childrenLength: item.childrenLength,
|
|
|
+ type: item.type,
|
|
|
+ nodeLength,
|
|
|
+ id: item.id,
|
|
|
+ key: item.key
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ setData(list)
|
|
|
+ } else {
|
|
|
+ setData([])
|
|
|
+ }
|
|
|
+ setLoading(false)
|
|
|
+ }
|
|
|
+
|
|
|
+ async function resume ({ nodeID, clusterID, serviceID }) {
|
|
|
+ const res = await fetchApi(resumeServices, { nodeID, clusterID, serviceID })
|
|
|
+ if (res && res.code === 0) {
|
|
|
+ message.success('操作成功')
|
|
|
+ getData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ async function pause ({ nodeID, clusterID, serviceID }) {
|
|
|
+ const res = await fetchApi(pauseServices, { nodeID, clusterID, serviceID })
|
|
|
+ if (res && res.code === 0) {
|
|
|
+ getData()
|
|
|
+ message.success('操作成功')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ useEffect(
|
|
|
+ () => {
|
|
|
+ getData()
|
|
|
+ },
|
|
|
+ []
|
|
|
+ )
|
|
|
+
|
|
|
+ function expandedRowRender (record) {
|
|
|
+ const childColums = [
|
|
|
+ {
|
|
|
+ title: '节点ID',
|
|
|
+ dataIndex: 'id',
|
|
|
+ key: 'id'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ dataIndex: 'state',
|
|
|
+ key: 'state',
|
|
|
+ render: r =>
|
|
|
+ r === 0 ? (
|
|
|
+ <span style={{ color: '#0ac30a' }}>正常</span>
|
|
|
+ ) : (
|
|
|
+ <span style={{ color: '#fd2222' }}>已暂停</span>
|
|
|
+ )
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ render: (r, d) => (
|
|
|
+ <div>
|
|
|
+ {d.state === 0 ? (
|
|
|
+ <a onClick={() => pause(d)}>暂停</a>
|
|
|
+ ) : (
|
|
|
+ <a onClick={() => resume(d)}>恢复</a>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ return <Table
|
|
|
+ columns={childColums}
|
|
|
+ dataSource={[...record.list] || []}
|
|
|
+ rowKey='key'
|
|
|
+ pagination={false}
|
|
|
+ />
|
|
|
+ }
|
|
|
+
|
|
|
+ function topTable (record) {
|
|
|
+ const columns = [
|
|
|
+ { title: '服务ID', dataIndex: 'id', key: 'id' },
|
|
|
+ { title: '服务数量', dataIndex: 'childrenLength', key: 'childrenLength' }
|
|
|
+ ]
|
|
|
+
|
|
|
+ return <Table
|
|
|
+ loading={loading}
|
|
|
+ columns={columns}
|
|
|
+ dataSource={record.list}
|
|
|
+ expandedRowRender={expandedRowRender}
|
|
|
+ expandRowByClick
|
|
|
+ rowKey={r => r.key}
|
|
|
+ />
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <span>集群ID:</span>
|
|
|
+ <Input.Search
|
|
|
+ value={params.clusterID}
|
|
|
+ onSearch={getData}
|
|
|
+ onChange={(e) => onChange({ clusterID: e.target.value })}
|
|
|
+ style={{ width: 200, marginBottom: 10 }}
|
|
|
+ placeholder="请输入集群ID"
|
|
|
+ />
|
|
|
+ <span style={{ marginLeft: 10 }}>服务ID:</span>
|
|
|
+ <Input.Search
|
|
|
+ value={params.serviceID}
|
|
|
+ onSearch={getData}
|
|
|
+ onChange={(e) => onChange({ serviceID: e.target.value })}
|
|
|
+ style={{ width: 200, margin: 10, marginTop: 0 }}
|
|
|
+ placeholder="请输入服务ID"
|
|
|
+ />
|
|
|
+ <span>nodeID:</span>
|
|
|
+ <Input.Search
|
|
|
+ value={params.nodeID}
|
|
|
+ onSearch={getData}
|
|
|
+ onChange={(e) => onChange({ nodeID: e.target.value })}
|
|
|
+ style={{ width: 200, marginBottom: 10 }}
|
|
|
+ placeholder="请输入nodeID"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <Table
|
|
|
+ loading={loading}
|
|
|
+ columns={
|
|
|
+ [
|
|
|
+ {
|
|
|
+ title: '集群ID',
|
|
|
+ dataIndex: 'id',
|
|
|
+ key: 'id'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '服务数量',
|
|
|
+ dataIndex: 'childrenLength',
|
|
|
+ key: 'childrenLength'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '节点数量',
|
|
|
+ dataIndex: 'nodeLength',
|
|
|
+ key: 'nodeLength'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ dataSource={data}
|
|
|
+ expandedRowRender={topTable}
|
|
|
+ expandRowByClick
|
|
|
+ rowKey={r => r.key}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|