chore: web addon frontend add drop message

addon/web/client/src/App.js

@@ -108,12 +108,19 @@ class App extends React.Component {
             !flow.waitIntercept ? null :
             <div className="flow-wait-area">
               <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)
                 flow.waitIntercept = false
                 this.setState({ flows: this.state.flows })
               }}>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>

addon/web/client/src/components/BreakPoint.js

@@ -16,7 +16,9 @@ class BreakPoint extends React.Component {
         method: 'ALL',
         url: '',
         action: '1',
-      }
+      },
+
+      haveRules: false,
     }
 
     this.handleClose = this.handleClose.bind(this)
@@ -45,14 +47,17 @@ class BreakPoint extends React.Component {
 
     this.props.onSave(rules)
     this.handleClose()
+
+    this.setState({ haveRules: rules.length ? true : false })
   }
 
   render() {
-    const { rule } = this.state
+    const { rule, haveRules } = this.state
+    const variant = haveRules ? 'success' : 'primary'
 
     return (
       <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.Header closeButton>
@@ -60,7 +65,6 @@ class BreakPoint extends React.Component {
           </Modal.Header>
 
           <Modal.Body>
-            <Form>
             <Form.Group as={Row}>
               <Form.Label column sm={2}>Method</Form.Label>
               <Col sm={10}>
@@ -89,7 +93,6 @@ class BreakPoint extends React.Component {
                 </Form.Control>
               </Col>
             </Form.Group>
-            </Form>
           </Modal.Body>
 
           <Modal.Footer>
@@ -97,7 +100,7 @@ class BreakPoint extends React.Component {
               Close
             </Button>
             <Button variant="primary" onClick={this.handleSave}>
-              Save Changes
+              Save
             </Button>
         </Modal.Footer>
         </Modal>

addon/web/client/src/message.js

@@ -52,13 +52,23 @@ export const parseMessage = data => {
 export const sendMessageEnum = {
   'changeRequest': 11,
   'changeResponse': 12,
+  'dropRequest': 13,
+  'dropResponse': 14,
   'changeBreakPointRules': 21,
 }
 
-// type: 11/12
+// type: 11/12/13/14
 // messageEdit
 // 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) => {
+  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
   
   if (messageType === sendMessageEnum.changeRequest) {