Browse Source

(*)删除网关

master
wuqun 2 years ago
parent
commit
90a4d094f6
  1. 12
      code/web/client/src/sections/edition/actions/index.js
  2. 40
      code/web/client/src/sections/edition/containers/gateway.jsx
  3. 33
      code/web/client/src/sections/edition/containers/gatewayEditModal.jsx
  4. 130
      code/web/client/src/sections/edition/containers/gatewayModal.jsx
  5. 2
      code/web/client/src/utils/webapi.js

12
code/web/client/src/sections/edition/actions/index.js

@ -71,6 +71,17 @@ export function postVersion(data) {
});
}
export function delGateway(id) {
return dispatch => basicAction({
type: 'delete',
dispatch: dispatch,
actionType: 'DELETE_GATEWAY',
url: ApiTable.delGateway.replace('{id}', id),
msg: { option: '删除网关' },
reducer: { name: '' }
});
}
export function gatewaySsh(id) {
return dispatch => basicAction({
type: 'post',
@ -109,6 +120,7 @@ export default {
getGateways,
getGatewayStatus,
ableGateway,
delGateway,
gatewaySsh,
rebootGateway,
restartGateway,

40
code/web/client/src/sections/edition/containers/gateway.jsx

@ -5,7 +5,7 @@ import { push } from 'react-router-redux';
import { Popconfirm, Button, Popover, Skeleton, Table, Tag } from '@douyinfe/semi-ui';
import { SkeletonScreen } from "$components";
import GatewayStatusModal from './gatewayStatusModal'
import GatewayEditModal from './gatewayEditModal'
import GatewayModal from './gatewayModal'
const GatewayManage = props => {
const { dispatch, user, error, actions } = props
@ -14,8 +14,9 @@ const GatewayManage = props => {
const [tableData, setTableData] = useState([]);
const [limits, setLimits] = useState()//
const [detailV, setDetailV] = useState(false)
const [editV, setEditV] = useState(false)
const [dataToModal, setDataToModal] = useState(null)
const [deviceModalV, setDeviceModalV] = useState(false)
useEffect(() => {
getTableData(query)
}, [])
@ -100,12 +101,23 @@ const GatewayManage = props => {
</Popconfirm>
<a style={{ ...aStyle, marginLeft: 15 }} onClick={() => {
setEditV(true)
setDeviceModalV(true)
setDataToModal(record)
}}>编辑</a>
<a style={{ ...aStyle, marginLeft: 15 }} onClick={() => {
}}>删除</a>
<Popconfirm
title="提示"
content={`确认删除该网关?`}
onConfirm={() => {
dispatch(edition.delGateway(record.id)).then(r => {
if (r.success) {
getTableData(query)
}
})
}}>
<a style={{ ...aStyle, marginLeft: 15 }}>删除</a>
</Popconfirm>
<Popover key={Math.random()} content={renderPopover(record)} trigger='click' position='right'>
<a style={{ ...aStyle, marginLeft: 15 }}>更多...</a>
</Popover>
@ -177,7 +189,7 @@ const GatewayManage = props => {
marginLeft: 21,
}}
>
设备管理
设备列表
</div>
<div
style={{
@ -186,7 +198,7 @@ const GatewayManage = props => {
marginLeft: 20,
}}
>
对NVR网络硬盘录像机设备节点的管理
对网关设备添加编辑删除以及远程控制等的管理页面
</div>
<div
style={{
@ -202,18 +214,20 @@ const GatewayManage = props => {
cursor: "pointer",
}}
onClick={() => {
setDeviceModalV(true)
}}
>
新增设备
新增网关
</div>
</div>
</div>
<div style={{ width: "100%",
<div style={{
width: "100%",
background: "#FFFFFF",
borderRadius: 3,
padding: "8px 20px",
marginTop: 20,}}>
marginTop: 20,
}}>
<Skeleton
loading={false}
active={true}
@ -248,8 +262,8 @@ const GatewayManage = props => {
dataToModal={dataToModal} /> : ''
}
{
editV ? <GatewayEditModal
onCancel={() => setEditV(false)}
deviceModalV ? <GatewayModal
onCancel={() => setDeviceModalV(false)}
dataToModal={dataToModal} /> : ''
}
</div>

33
code/web/client/src/sections/edition/containers/gatewayEditModal.jsx

@ -1,33 +0,0 @@
import React, { useEffect, useRef, useState } from 'react';
import moment from 'moment';
import { connect } from "react-redux";
import { Select, Modal, Form, Button } from "@douyinfe/semi-ui";
const GatewayEditModal = (props) => {
const { dispatch, actions, user, onCancel, dataToModal } = props;
const { edition } = actions;
//
useEffect(() => {
}, []);
return (
<Modal title={dataToModal.name}
visible={true} destroyOnClose onCancel={onCancel}
footer={[<Button onClick={onCancel}>关闭</Button>]}>
<div></div>
</Modal>
)
}
function mapStateToProps(state) {
const { auth, global } = state;
return {
user: auth.user,
error: auth.error,
actions: global.actions,
};
}
export default connect(mapStateToProps)(GatewayEditModal);

130
code/web/client/src/sections/edition/containers/gatewayModal.jsx

@ -0,0 +1,130 @@
import React, { useEffect, useRef, useState } from 'react';
import moment from 'moment';
import { connect } from "react-redux";
import { Select, Modal, Form, Button } from "@douyinfe/semi-ui";
const GatewayModal = (props) => {
const { dispatch, actions, user, onCancel, dataToModal } = props;
const { edition } = actions;
const api = useRef()
//
useEffect(() => {
}, []);
return (
<Modal
title={`${dataToModal ? '修改' : '新增'}网关`}
destroyOnClose visible={true}
onOk={() => {
api.current.validate().then(r => {
// for (let key in r) {
// if (['major', 'minor', 'patch', 'build'].includes(key)) {
// r[key] = Number(r[key])
// }
// }
// dispatch(edition.postVersion({ ...r, createdAt: moment().format("YYYY-MM-DD HH:MM:SS") })).then(res => {
// if (res.success) {
// requestData()
// setaddVersion(false)
// }
// })
})
}}
width={610}
onCancel={() => onCancel(0)}
>
{/* <Form
getFormApi={(formApi) => (api.current = formApi)}
layout="horizontal"
labelAlign="right"
labelWidth="114px"
style={{ display: 'flex', flexDirection: 'column' }}
>
<Form.Input
field='serialNo'
label='序列号'
labelPosition="left"
hideButtons={true}
placeholder='请输入序列号'
style={{ width: 200, marginBottom: 10 }}
rules={[{ required: true, message: "请输入序列号" }]}
/>
<Form.Input
field='name'
label='名称'
labelPosition="left"
hideButtons={true}
placeholder='请输入名称'
style={{ width: 200, marginBottom: 10 }}
rules={[{ required: true, message: "请输入名称" }]}
/>
<Form.Input
field='patch'
label='属性'
labelPosition="left"
hideButtons={true}
placeholder='请输入网关属性'
style={{ width: 200, marginBottom: 10 }}
rules={[{ required: true, message: "请输入网关属性" }]}
/>
<Form.Input
field='build' label='构建号:'
labelPosition="left"
hideButtons={true}
placeholder='请输入构建号'
style={{ width: 200, marginBottom: 10 }}
rules={[{ required: true, message: "请输入构建号" }, { pattern: "^[0-9]+$", message: "只能输入数字" },]}
/>
<Form.Select
field="type"
label='Type:'
labelPosition="left"
placeholder='请选择类型'
style={{ width: 200, marginBottom: 10 }}
rules={[{ required: true, message: "请选择类型" }]}
>
<Form.Select.Option value="beta">beta</Form.Select.Option>
<Form.Select.Option value="alpha">alpha</Form.Select.Option>
<Form.Select.Option value="release">release</Form.Select.Option>
<Form.Select.Option value="LTS">LTS</Form.Select.Option>
</Form.Select>
<Form.Input
field='imageBase'
label='基础镜像地址:'
labelPosition="left"
placeholder='请输入基础镜像地址'
style={{ width: 440, marginBottom: 10 }}
rules={[{ required: true, message: "请输入基础镜像地址" }]}
/>
<Form.Input
field='imageVersion'
label='镜像版本:'
labelPosition="left"
placeholder='请输入镜像版本'
style={{ width: 200, marginBottom: 10 }}
rules={[{ required: true, message: "请输入镜像版本" }]}
/>
<Form.TextArea
field='desc'
label='描述:'
labelPosition="left"
placeholder='请输入描述'
style={{ width: 440 }}
/>
</Form> */}
</Modal>
)
}
function mapStateToProps(state) {
const { auth, global } = state;
return {
user: auth.user,
error: auth.error,
actions: global.actions,
};
}
export default connect(mapStateToProps)(GatewayModal);

2
code/web/client/src/utils/webapi.js

@ -8,6 +8,8 @@ export const ApiTable = {
getGateways: 'v1/edges',
ableGateway: 'v1/edge/{id}/enable',
getGatewayStatus: 'v1/edge/{id}/metrics',
delGateway: 'v1/edge/{id}',
gatewaySsh: 'v1/edge/{id}/ssh',
rebootGateway: 'v1/edge/{id}/reboot',
restartGateway: 'v1/edge/{id}/restart',

Loading…
Cancel
Save