chore: web addon frontend add drop message

addon-dailer
liqiang 4 years ago
parent c3b2e5261b
commit 2cfc8fcb96

@ -108,12 +108,19 @@ class App extends React.Component {
!flow.waitIntercept ? null : !flow.waitIntercept ? null :
<div className="flow-wait-area"> <div className="flow-wait-area">
<Button size="sm" onClick={() => { <Button size="sm" onClick={() => {
const msg = buildMessageEdit(sendMessageEnum.changeRequest, flow) const msgType = flow.response ? sendMessageEnum.changeResponse : sendMessageEnum.changeRequest
const msg = buildMessageEdit(msgType, flow)
this.ws.send(msg) this.ws.send(msg)
flow.waitIntercept = false flow.waitIntercept = false
this.setState({ flows: this.state.flows }) this.setState({ flows: this.state.flows })
}}>Continue</Button> }}>Continue</Button>
<Button size="sm">Drop</Button> <Button size="sm" onClick={() => {
const msgType = flow.response ? sendMessageEnum.dropResponse : sendMessageEnum.dropRequest
const msg = buildMessageEdit(msgType, flow)
this.ws.send(msg)
flow.waitIntercept = false
this.setState({ flows: this.state.flows })
}}>Drop</Button>
</div> </div>
} }
</div> </div>

@ -16,7 +16,9 @@ class BreakPoint extends React.Component {
method: 'ALL', method: 'ALL',
url: '', url: '',
action: '1', action: '1',
} },
haveRules: false,
} }
this.handleClose = this.handleClose.bind(this) this.handleClose = this.handleClose.bind(this)
@ -45,14 +47,17 @@ class BreakPoint extends React.Component {
this.props.onSave(rules) this.props.onSave(rules)
this.handleClose() this.handleClose()
this.setState({ haveRules: rules.length ? true : false })
} }
render() { render() {
const { rule } = this.state const { rule, haveRules } = this.state
const variant = haveRules ? 'success' : 'primary'
return ( return (
<div> <div>
<Button size="sm" onClick={this.handleShow}>BreakPoint</Button> <Button variant={variant} size="sm" onClick={this.handleShow}>BreakPoint</Button>
<Modal show={this.state.show} onHide={this.handleClose}> <Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton> <Modal.Header closeButton>
@ -60,36 +65,34 @@ class BreakPoint extends React.Component {
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
<Form> <Form.Group as={Row}>
<Form.Group as={Row}> <Form.Label column sm={2}>Method</Form.Label>
<Form.Label column sm={2}>Method</Form.Label> <Col sm={10}>
<Col sm={10}> <Form.Control as="select" value={rule.method} onChange={e => { this.setState({ rule: { ...rule, method: e.target.value } }) }}>
<Form.Control as="select" value={rule.method} onChange={e => { this.setState({ rule: { ...rule, method: e.target.value } }) }}> <option>ALL</option>
<option>ALL</option> <option>GET</option>
<option>GET</option> <option>POST</option>
<option>POST</option> <option>PUT</option>
<option>PUT</option> <option>DELETE</option>
<option>DELETE</option> </Form.Control>
</Form.Control> </Col>
</Col> </Form.Group>
</Form.Group>
<Form.Group as={Row}>
<Form.Group as={Row}> <Form.Label column sm={2}>URL</Form.Label>
<Form.Label column sm={2}>URL</Form.Label> <Col sm={10}><Form.Control value={rule.url} onChange={e => { this.setState({ rule: { ...rule, url: e.target.value } }) }} /></Col>
<Col sm={10}><Form.Control value={rule.url} onChange={e => { this.setState({ rule: { ...rule, url: e.target.value } }) }} /></Col> </Form.Group>
</Form.Group>
<Form.Group as={Row}>
<Form.Group as={Row}> <Form.Label column sm={2}>Action</Form.Label>
<Form.Label column sm={2}>Action</Form.Label> <Col sm={10}>
<Col sm={10}> <Form.Control as="select" value={rule.action} onChange={e => { this.setState({ rule: { ...rule, action: e.target.value } }) }}>
<Form.Control as="select" value={rule.action} onChange={e => { this.setState({ rule: { ...rule, action: e.target.value } }) }}> <option value="1">Request</option>
<option value="1">Request</option> <option value="2">Response</option>
<option value="2">Response</option> <option value="3">Both</option>
<option value="3">Both</option> </Form.Control>
</Form.Control> </Col>
</Col> </Form.Group>
</Form.Group>
</Form>
</Modal.Body> </Modal.Body>
<Modal.Footer> <Modal.Footer>
@ -97,7 +100,7 @@ class BreakPoint extends React.Component {
Close Close
</Button> </Button>
<Button variant="primary" onClick={this.handleSave}> <Button variant="primary" onClick={this.handleSave}>
Save Changes Save
</Button> </Button>
</Modal.Footer> </Modal.Footer>
</Modal> </Modal>

@ -52,13 +52,23 @@ export const parseMessage = data => {
export const sendMessageEnum = { export const sendMessageEnum = {
'changeRequest': 11, 'changeRequest': 11,
'changeResponse': 12, 'changeResponse': 12,
'dropRequest': 13,
'dropResponse': 14,
'changeBreakPointRules': 21, 'changeBreakPointRules': 21,
} }
// type: 11/12 // type: 11/12/13/14
// messageEdit // messageEdit
// version 1 byte + type 1 byte + id 36 byte + header len 4 byte + header content bytes + body len 4 byte + [body content bytes] // version 1 byte + type 1 byte + id 36 byte + header len 4 byte + header content bytes + body len 4 byte + [body content bytes]
export const buildMessageEdit = (messageType, flow) => { export const buildMessageEdit = (messageType, flow) => {
if (messageType === sendMessageEnum.dropRequest || messageType === sendMessageEnum.dropResponse) {
const view = new Uint8Array(38)
view[0] = 1
view[1] = messageType
view.set(new TextEncoder().encode(flow.id), 2)
return view
}
let header, body let header, body
if (messageType === sendMessageEnum.changeRequest) { if (messageType === sendMessageEnum.changeRequest) {

Loading…
Cancel
Save