diff options
23 files changed, 536 insertions, 301 deletions
diff --git a/frontend/package.json b/frontend/package.json index 3629e70..b13a7ea 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,6 +13,7 @@ "bs-custom-file-input": "^1.3.4", "classnames": "^2.2.6", "eslint-config-react-app": "^5.2.1", + "lodash": "^4.17.20", "node-sass": "^4.14.0", "react": "^16.13.1", "react-bootstrap": "^1.0.1", diff --git a/frontend/src/backend.js b/frontend/src/backend.js index a02f7a8..2fbe920 100644 --- a/frontend/src/backend.js +++ b/frontend/src/backend.js @@ -1,5 +1,5 @@ -async function json(method, url, data, headers, returnJson) { +async function json(method, url, data, headers) { const options = { method: method, mode: "cors", @@ -14,18 +14,17 @@ async function json(method, url, data, headers, returnJson) { if (data != null) { options.body = JSON.stringify(data); } - const result = await fetch(url, options); - if (returnJson) { - if (result.status >= 200 && result.status < 300) { - return result.json(); - } else { - return Promise.reject({ - response: result, - json: await result.json() - }); - } - } else { + const response = await fetch(url, options); + const result = { + statusCode: response.status, + status: `${response.status} ${response.statusText}`, + json: await response.json() + }; + + if (response.status >= 200 && response.status < 300) { return result; + } else { + return Promise.reject(result); } } @@ -56,16 +55,16 @@ const backend = { return json("DELETE", url, data, headers); }, getJson: (url = "", headers = null) => { - return json("GET", url, null, headers, true); + return json("GET", url, null, headers); }, postJson: (url = "", data = null, headers = null) => { - return json("POST", url, data, headers, true); + return json("POST", url, data, headers); }, putJson: (url = "", data = null, headers = null) => { - return json("PUT", url, data, headers, true); + return json("PUT", url, data, headers); }, deleteJson: (url = "", data = null, headers = null) => { - return json("DELETE", url, data, headers, true); + return json("DELETE", url, data, headers); }, postFile: (url = "", data = null, headers = null) => { return file(url, data, headers); diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js index 318965c..a9d34d3 100644 --- a/frontend/src/components/ConnectionContent.js +++ b/frontend/src/components/ConnectionContent.js @@ -1,6 +1,6 @@ import React, {Component} from 'react'; import './ConnectionContent.scss'; -import {Dropdown, Row} from 'react-bootstrap'; +import {Row} from 'react-bootstrap'; import MessageAction from "./MessageAction"; import backend from "../backend"; import ButtonField from "./fields/ButtonField"; @@ -42,7 +42,7 @@ class ConnectionContent extends Component { // TODO: limit workaround. backend.getJson(`/api/streams/${this.props.connection.id}?format=${this.state.format}&limit=999999`).then(res => { this.setState({ - connectionContent: res, + connectionContent: res.json, loading: false }); }); diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js index f2f02fd..cc32b0f 100644 --- a/frontend/src/components/fields/ButtonField.js +++ b/frontend/src/components/fields/ButtonField.js @@ -6,10 +6,6 @@ const classNames = require('classnames'); class ButtonField extends Component { - constructor(props) { - super(props); - } - render() { const handler = () => { if (typeof this.props.onClick === "function") { diff --git a/frontend/src/components/fields/ButtonField.scss b/frontend/src/components/fields/ButtonField.scss index aabe80f..cfd20ff 100644 --- a/frontend/src/components/fields/ButtonField.scss +++ b/frontend/src/components/fields/ButtonField.scss @@ -11,7 +11,7 @@ font-size: 0.8em; button { - padding: 4px 12px; + padding: 3px 12px; } } diff --git a/frontend/src/components/fields/InputField.js b/frontend/src/components/fields/InputField.js index 6cf967a..b790891 100644 --- a/frontend/src/components/fields/InputField.js +++ b/frontend/src/components/fields/InputField.js @@ -20,16 +20,17 @@ class InputField extends Component { const inline = this.props.inline || false; const name = this.props.name || null; const value = this.props.value || ""; + const defaultValue = this.props.defaultValue || ""; const type = this.props.type || "text"; const error = this.props.error || null; - const defaultValue = this.props.defaultValue || null; + const handler = (e) => { - if (this.props.onChange) { + if (typeof this.props.onChange === "function") { if (type === "file") { let file = e.target.files[0]; this.props.onChange(file); } else if (e == null) { - this.props.onChange(""); + this.props.onChange(defaultValue); } else { this.props.onChange(e.target.value); } @@ -37,7 +38,7 @@ class InputField extends Component { }; let inputProps = {}; if (type !== "file") { - inputProps["value"] = value || this.props.initialValue; + inputProps["value"] = value || defaultValue; } return ( @@ -52,8 +53,8 @@ class InputField extends Component { <div className="field-input"> <div className="field-value"> { type === "file" && <label for={this.id} className={"file-label"}> - {value.name || defaultValue}</label> } - <input type={type} placeholder={defaultValue} id={this.id} + {value.name || this.props.placeholder}</label> } + <input type={type} placeholder={this.props.placeholder} id={this.id} aria-describedby={this.id} onChange={handler} {...inputProps} /> </div> { type !== "file" && value !== "" && diff --git a/frontend/src/components/fields/extensions/NumericField.js b/frontend/src/components/fields/extensions/NumericField.js index 8823c42..ed81ed7 100644 --- a/frontend/src/components/fields/extensions/NumericField.js +++ b/frontend/src/components/fields/extensions/NumericField.js @@ -11,25 +11,31 @@ class NumericField extends Component { }; } - render() { - const handler = (value) => { - value = value.replace(/[^\d]/gi, ''); - let intValue = 0; - if (value !== "") { - intValue = parseInt(value); - } - const valid = - (!this.props.validate || (typeof this.props.validate === "function" && this.props.validate(intValue))) && - (!this.props.min || (typeof this.props.min === "number" && intValue >= this.props.min)) && - (!this.props.max || (typeof this.props.max === "number" && intValue <= this.props.max)); - this.setState({invalid: !valid}); - if (this.props.onChange) { - this.props.onChange(intValue); - } - }; + componentDidUpdate(prevProps, prevState, snapshot) { + if (prevProps.value !== this.props.value) { + this.onChange(this.props.value); + } + } + onChange = (value) => { + value = value.toString().replace(/[^\d]/gi, ''); + let intValue = 0; + if (value !== "") { + intValue = parseInt(value); + } + const valid = + (!this.props.validate || (typeof this.props.validate === "function" && this.props.validate(intValue))) && + (!this.props.min || (typeof this.props.min === "number" && intValue >= this.props.min)) && + (!this.props.max || (typeof this.props.max === "number" && intValue <= this.props.max)); + this.setState({invalid: !valid}); + if (typeof this.props.onChange === "function") { + this.props.onChange(intValue); + } + }; + + render() { return ( - <InputField {...this.props} onChange={handler} initialValue={this.props.initialValue || 0} + <InputField {...this.props} onChange={this.onChange} defaultValue={this.props.defaultValue || "0"} invalid={this.state.invalid} /> ); } diff --git a/frontend/src/components/filters/RulesConnectionsFilter.js b/frontend/src/components/filters/RulesConnectionsFilter.js index 0741bea..f4d0b1c 100644 --- a/frontend/src/components/filters/RulesConnectionsFilter.js +++ b/frontend/src/components/filters/RulesConnectionsFilter.js @@ -25,7 +25,7 @@ class RulesConnectionsFilter extends Component { let activeRules = params.getAll("matched_rules") || []; backend.getJson("/api/rules").then(res => { - let rules = res.flatMap(rule => rule.enabled ? [{id: rule.id, name: rule.name}] : []); + let rules = res.json.flatMap(rule => rule.enabled ? [{id: rule.id, name: rule.name}] : []); activeRules = rules.filter(rule => activeRules.some(id => rule.id === id)); this.setState({rules, activeRules, mounted: true}); }); diff --git a/frontend/src/components/filters/StringConnectionsFilter.js b/frontend/src/components/filters/StringConnectionsFilter.js index a304198..f463593 100644 --- a/frontend/src/components/filters/StringConnectionsFilter.js +++ b/frontend/src/components/filters/StringConnectionsFilter.js @@ -115,7 +115,7 @@ class StringConnectionsFilter extends Component { return ( <div className="filter" style={{"width": `${this.props.width}px`}}> <InputField active={active} invalid={this.state.invalidValue} name={this.props.filterName} - defaultValue={this.props.defaultFilterValue} onChange={this.filterChanged} + placeholder={this.props.defaultFilterValue} onChange={this.filterChanged} value={this.state.fieldValue} inline={true} small={true} /> {redirect} </div> diff --git a/frontend/src/components/objects/LinkPopover.js b/frontend/src/components/objects/LinkPopover.js new file mode 100644 index 0000000..58b2f6a --- /dev/null +++ b/frontend/src/components/objects/LinkPopover.js @@ -0,0 +1,33 @@ +import React, {Component} from 'react'; +import {randomClassName} from "../../utils"; +import {OverlayTrigger, Popover} from "react-bootstrap"; +import './LinkPopover.scss'; + +class LinkPopover extends Component { + + constructor(props) { + super(props); + + this.id = `link-overlay-${randomClassName()}`; + } + + render() { + const popover = ( + <Popover id={this.id}> + {this.props.title && <Popover.Title as="h3">{this.props.title}</Popover.Title>} + <Popover.Content> + {this.props.content} + </Popover.Content> + </Popover> + ); + + return (this.props.content ? + <OverlayTrigger trigger="hover" placement={this.props.placement || "top"} overlay={popover}> + <span className="link-popover">{this.props.text}</span> + </OverlayTrigger> : + <span className="link-popover-empty">{this.props.text}</span> + ); + } +} + +export default LinkPopover; diff --git a/frontend/src/components/objects/LinkPopover.scss b/frontend/src/components/objects/LinkPopover.scss new file mode 100644 index 0000000..d5f4879 --- /dev/null +++ b/frontend/src/components/objects/LinkPopover.scss @@ -0,0 +1,7 @@ +@import '../../colors.scss'; + +.link-popover { + text-decoration: underline; + font-weight: 500; + cursor: pointer; +}
\ No newline at end of file diff --git a/frontend/src/components/panels/PcapPane.js b/frontend/src/components/panels/PcapPane.js index a491dff..cfba037 100644 --- a/frontend/src/components/panels/PcapPane.js +++ b/frontend/src/components/panels/PcapPane.js @@ -1,5 +1,6 @@ import React, {Component} from 'react'; -import './PcapPane.scss'; +// import './PcapPane.scss'; +import './common.scss'; import Table from "react-bootstrap/Table"; import backend from "../../backend"; import {createCurlCommand, formatSize, timestampToTime2} from "../../utils"; @@ -37,7 +38,7 @@ class PcapPane extends Component { } loadSessions = () => { - backend.getJson("/api/pcap/sessions").then(res => this.setState({sessions: res})); + backend.getJson("/api/pcap/sessions").then(res => this.setState({sessions: res.json})); }; handleUploadFileChange = (file) => { @@ -104,7 +105,7 @@ class PcapPane extends Component { <td>{s["processed_packets"]}</td> <td>{s["invalid_packets"]}</td> <td>undefined</td> - <td className="table-cell-action"><a target="_blank" + <td className="table-cell-action"><a target="_blank" rel="noopener noreferrer" href={"/api/pcap/sessions/" + s["id"] + "/download"}>download</a> </td> </tr> diff --git a/frontend/src/components/panels/PcapPane.scss b/frontend/src/components/panels/PcapPane.scss index ce28227..3c4d10b 100644 --- a/frontend/src/components/panels/PcapPane.scss +++ b/frontend/src/components/panels/PcapPane.scss @@ -1,51 +1,10 @@ @import '../../colors.scss'; .pane-container { - background-color: $color-primary-3; - padding: 10px 10px 0; - height: 100%; - .section-header { - background-color: $color-primary-2; - padding: 5px 10px; - height: 31px; - - font-weight: 500; - font-size: 14px; - - .api-response { - float: right; - } - } - - .section-table { - margin-top: 10px; - - .table-row { - background-color: $color-primary-0; - border-top: 3px solid $color-primary-3; - border-bottom: 3px solid $color-primary-3; - } - - .table-cell-action { - font-size: 13px; - font-weight: 600; - } - } - - .section-content { - background-color: $color-primary-0; - padding: 10px; - } - - th { - background-color: $color-primary-2; - border-top: 3px solid $color-primary-3; - border-bottom: 3px solid $color-primary-3; - font-size: 13.5px; - position: sticky; - top: 10px; - padding: 5px; + .table-cell-action { + font-size: 13px; + font-weight: 600; } .upload-actions { diff --git a/frontend/src/components/panels/RulePane.js b/frontend/src/components/panels/RulePane.js index 2e91d91..01e37fa 100644 --- a/frontend/src/components/panels/RulePane.js +++ b/frontend/src/components/panels/RulePane.js @@ -1,4 +1,5 @@ import React, {Component} from 'react'; +import './common.scss'; import './RulePane.scss'; import Table from "react-bootstrap/Table"; import {Col, Container, Row} from "react-bootstrap"; @@ -10,6 +11,11 @@ import NumericField from "../fields/extensions/NumericField"; import ColorField from "../fields/extensions/ColorField"; import ChoiceField from "../fields/ChoiceField"; import ButtonField from "../fields/ButtonField"; +import validation from "../../validation"; +import LinkPopover from "../objects/LinkPopover"; + +const classNames = require('classnames'); +const _ = require('lodash'); class RulePane extends Component { @@ -18,103 +24,352 @@ class RulePane extends Component { this.state = { rules: [], + newRule: this.emptyRule, + newPattern: this.emptyPattern + }; + + this.directions = { + 0: "both", + 1: "c->s", + 2: "s->c" }; } componentDidMount() { + this.reset(); this.loadRules(); } + emptyRule = { + "name": "", + "color": "", + "notes": "", + "enabled": true, + "patterns": [], + "filter": { + "service_port": 0, + "client_address": "", + "client_port": 0, + "min_duration": 0, + "max_duration": 0, + "min_bytes": 0, + "max_bytes": 0 + }, + "version": 0 + }; + + emptyPattern = { + "regex": "", + "flags": { + "caseless": false, + "dot_all": false, + "multi_line": false, + "utf_8_mode": false, + "unicode_property": false + }, + "min_occurrences": 0, + "max_occurrences": 0, + "direction": 0 + }; + loadRules = () => { - backend.getJson("/api/rules").then(res => this.setState({rules: res})); + backend.getJson("/api/rules").then(res => this.setState({rules: res.json, rulesStatusCode: res.status})) + .catch(res => this.setState({rulesStatusCode: res.status, rulesResponse: JSON.stringify(res.json)})); + }; + + addRule = () => { + if (this.validateRule(this.state.newRule)) { + backend.postJson("/api/rules", this.state.newRule).then(res => { + this.reset(); + this.setState({ruleStatusCode: res.status}); + this.loadRules(); + }).catch(res => { + this.setState({ruleStatusCode: res.status, ruleResponse: JSON.stringify(res.json)}); + }); + } + }; + + updateRule = () => { + const rule = this.state.selectedRule; + if (this.validateRule(rule)) { + backend.putJson(`/api/rules/${rule.id}`, rule).then(res => { + this.reset(); + this.setState({ruleStatusCode: res.status}); + this.loadRules(); + }).catch(res => { + this.setState({ruleStatusCode: res.status, ruleResponse: JSON.stringify(res.json)}); + }); + } + }; + + validateRule = (rule) => { + let valid = true; + if (rule.name.length < 3) { + this.setState({ruleNameError: "name.length < 3"}); + valid = false; + } + if (!validation.isValidColor(rule.color)) { + this.setState({ruleColorError: "color is not hexcolor"}); + valid = false; + } + if (!validation.isValidPort(rule.filter.service_port)) { + this.setState({ruleServicePortError: "service_port > 65565"}); + valid = false; + } + if (!validation.isValidPort(rule.filter.client_port)) { + this.setState({ruleClientPortError: "client_port > 65565"}); + valid = false; + } + if (!validation.isValidAddress(rule.filter.client_address)) { + this.setState({ruleClientAddressError: "client_address is not ip_address"}); + valid = false; + } + if (rule.filter.min_duration > rule.filter.max_duration) { + this.setState({ruleDurationError: "min_duration > max_dur."}); + valid = false; + } + if (rule.filter.min_bytes > rule.filter.max_bytes) { + this.setState({ruleBytesError: "min_bytes > max_bytes"}); + valid = false; + } + if (rule.patterns.length < 1) { + this.setState({rulePatternsError: "patterns.length < 1"}); + valid = false; + } + + return valid; }; + reset = () => { + const newRule = _.cloneDeep(this.emptyRule); + const newPattern = _.cloneDeep(this.emptyPattern); + this.setState({ + selectedRule: null, + newRule: newRule, + selectedPattern: null, + newPattern: newPattern, + patternRegexFocused: false, + patternOccurrencesFocused: false, + ruleNameError: null, + ruleColorError: null, + ruleServicePortError: null, + ruleClientPortError: null, + ruleClientAddressError: null, + ruleDurationError: null, + ruleBytesError: null, + rulePatternsError: null, + ruleStatusCode: null, + rulesStatusCode: null, + ruleResponse: null, + rulesResponse: null + }); + }; + + updateParam = (callback) => { + const updatedRule = this.currentRule(); + callback(updatedRule); + this.setState({newRule: updatedRule}); + }; + + currentRule = () => this.state.selectedRule != null ? this.state.selectedRule : this.state.newRule; + + addPattern = (pattern) => { + if (!this.validatePattern(pattern)) { + return; + } + + const newPattern = _.cloneDeep(this.emptyPattern); + this.currentRule().patterns.push(pattern); + this.setState({ + newPattern: newPattern + }); + }; + + editPattern = (pattern) => { + this.setState({ + selectedPattern: pattern + }); + }; + + updatePattern = (pattern) => { + if (!this.validatePattern(pattern)) { + return; + } + + this.setState({ + selectedPattern: null + }); + }; + + validatePattern = (pattern) => { + let valid = true; + if (pattern.regex === "") { + valid = false; + this.setState({patternRegexFocused: true}); + } + if (pattern.min_occurrences > pattern.max_occurrences) { + valid = false; + this.setState({patternOccurrencesFocused: true}); + } + return valid; + }; render() { + const isUpdate = this.state.selectedRule != null; + const rule = this.currentRule(); + const pattern = this.state.selectedPattern || this.state.newPattern; + let rules = this.state.rules.map(r => - <tr className="table-row"> + <tr onClick={() => { + this.reset(); + this.setState({selectedRule: _.cloneDeep(r)}); + }} className={classNames("row-small", "row-clickable", {"row-selected": rule.id === r.id })}> <td>{r["id"].substring(0, 8)}</td> <td>{r["name"]}</td> + <td><ButtonField name={r["color"]} color={r["color"]} small /></td> <td>{r["notes"]}</td> - {/*<td>{((new Date(s["completed_at"]) - new Date(s["started_at"])) / 1000).toFixed(3)}s</td>*/} - {/*<td>{formatSize(s["size"])}</td>*/} - {/*<td>{s["processed_packets"]}</td>*/} - {/*<td>{s["invalid_packets"]}</td>*/} - {/*<td>undefined</td>*/} - {/*<td className="table-cell-action"><a target="_blank"*/} - {/* href={"/api/pcap/sessions/" + s["id"] + "/download"}>download</a>*/} - {/*</td>*/} + </tr> + ); + + let patterns = (this.state.selectedPattern == null && !isUpdate ? + rule.patterns.concat(this.state.newPattern) : + rule.patterns + ).map(p => p === pattern ? + <tr> + <td style={{"width": "500px"}}> + <InputField small active={this.state.patternRegexFocused} value={pattern.regex} + onChange={(v) => { + this.updateParam(() => pattern.regex = v); + this.setState({patternRegexFocused: pattern.regex === ""}); + }} /> + </td> + <td><CheckField small checked={pattern.flags.caseless} + onChange={(v) => this.updateParam(() => pattern.flags.caseless = v)}/></td> + <td><CheckField small checked={pattern.flags.dot_all} + onChange={(v) => this.updateParam(() => pattern.flags.dot_all = v)}/></td> + <td><CheckField small checked={pattern.flags.multi_line} + onChange={(v) => this.updateParam(() => pattern.flags.multi_line = v)}/></td> + <td><CheckField small checked={pattern.flags.utf_8_mode} + onChange={(v) => this.updateParam(() => pattern.flags.utf_8_mode = v)}/></td> + <td><CheckField small checked={pattern.flags.unicode_property} + onChange={(v) => this.updateParam(() => pattern.flags.unicode_property = v)}/></td> + <td style={{"width": "70px"}}> + <NumericField small value={pattern.min_occurrences} + active={this.state.patternOccurrencesFocused} + onChange={(v) => this.updateParam(() => pattern.min_occurrences = v)} /> + </td> + <td style={{"width": "70px"}}> + <NumericField small value={pattern.max_occurrences} + active={this.state.patternOccurrencesFocused} + onChange={(v) => this.updateParam(() => pattern.max_occurrences = v)} /> + </td> + <td><ChoiceField inline small keys={[0, 1, 2]} values={["both", "c->s", "s->c"]} + value={this.directions[pattern.direction]} + onChange={(v) => this.updateParam(() => pattern.direction = v)} /></td> + <td>{this.state.selectedPattern == null ? + <ButtonField variant="green" small name="add" inline rounded onClick={() => this.addPattern(p)}/> : + <ButtonField variant="green" small name="save" inline rounded onClick={() => this.updatePattern(p)}/>} + </td> + </tr> + : + <tr className="row-small"> + <td>{p.regex}</td> + <td>{p.flags.caseless ? "yes": "no"}</td> + <td>{p.flags.dot_all ? "yes": "no"}</td> + <td>{p.flags.multi_line ? "yes": "no"}</td> + <td>{p.flags.utf_8_mode ? "yes": "no"}</td> + <td>{p.flags.unicode_property ? "yes": "no"}</td> + <td>{p.min_occurrences}</td> + <td>{p.max_occurrences}</td> + <td>{this.directions[p.direction]}</td> + {!isUpdate && <td><ButtonField variant="blue" small rounded name="edit" + onClick={() => this.editPattern(p) }/></td>} </tr> ); return ( <div className="pane-container rule-pane"> - <div className="pane-section"> + <div className="pane-section rules-list"> <div className="section-header"> <span className="api-request">GET /api/rules</span> - <span className="api-response">200 OK</span> + {this.state.rulesStatusCode && + <span className="api-response"><LinkPopover text={this.state.rulesStatusCode} + content={this.state.rulesResponse} + placement="left" /></span>} </div> - <div className="section-table"> - <Table borderless size="sm"> - <thead> - <tr> - <th>id</th> - <th>name</th> - <th>notes</th> - </tr> - </thead> - <tbody> - {rules} - </tbody> - </Table> + <div className="section-content"> + <div className="section-table"> + <Table borderless size="sm"> + <thead> + <tr> + <th>id</th> + <th>name</th> + <th>color</th> + <th>notes</th> + </tr> + </thead> + <tbody> + {rules} + </tbody> + </Table> + </div> </div> </div> - <div className="pane-section"> + <div className="pane-section rule-edit"> <div className="section-header"> - <span className="api-request">POST /api/rules</span> - <span className="api-response"></span> + <span className="api-request"> + {isUpdate ? `PUT /api/rules/${this.state.selectedRule.id}` : "POST /api/rules"} + </span> + <span className="api-response"><LinkPopover text={this.state.ruleStatusCode} + content={this.state.ruleResponse} + placement="left" /></span> </div> <div className="section-content"> <Container className="p-0"> <Row> <Col> - <InputField name="name" inline /> - <ColorField value={this.state.test1} onChange={(e) => this.setState({test1: e})} inline /> - <TextField name="notes" rows={2} /> + <InputField name="name" inline value={rule.name} + onChange={(v) => this.updateParam((r) => r.name = v)} + error={this.state.ruleNameError} /> + <ColorField inline value={rule.color} error={this.state.ruleColorError} + onChange={(v) => this.updateParam((r) => r.color = v)} /> + <TextField name="notes" rows={2} value={rule.notes} + onChange={(v) => this.updateParam((r) => r.notes = v)} /> </Col> - <Col> - <div >filters:</div> - <NumericField name="service_port" inline value={this.state.test} onChange={(e) => this.setState({test: e})} validate={(e) => e%2 === 0} /> - - <NumericField name="client_port" inline /> - <InputField name="client_address" /> + <Col style={{"paddingTop": "6px"}}> + <span>filters:</span> + <NumericField name="service_port" inline value={rule.filter.service_port} + onChange={(v) => this.updateParam((r) => r.filter.service_port = v)} + min={0} max={65565} error={this.state.ruleServicePortError} /> + <NumericField name="client_port" inline value={rule.filter.client_port} + onChange={(v) => this.updateParam((r) => r.filter.client_port = v)} + min={0} max={65565} error={this.state.ruleClientPortError} /> + <InputField name="client_address" value={rule.filter.client_address} + error={this.state.ruleClientAddressError} + onChange={(v) => this.updateParam((r) => r.filter.client_address = v)} /> </Col> - <Col> - <NumericField name="min_duration" inline /> - <NumericField name="max_duration" inline /> - <NumericField name="min_bytes" inline /> - <NumericField name="max_bytes" inline /> - + <Col style={{"paddingTop": "11px"}}> + <NumericField name="min_duration" inline value={rule.filter.min_duration} + error={this.state.ruleDurationError} + onChange={(v) => this.updateParam((r) => r.filter.min_duration = v)} /> + <NumericField name="max_duration" inline value={rule.filter.max_duration} + error={this.state.ruleDurationError} + onChange={(v) => this.updateParam((r) => r.filter.max_duration = v)} /> + <NumericField name="min_bytes" inline value={rule.filter.min_bytes} + error={this.state.ruleBytesError} + onChange={(v) => this.updateParam((r) => r.filter.min_bytes = v)} /> + <NumericField name="max_bytes" inline value={rule.filter.max_bytes} + error={this.state.ruleBytesError} + onChange={(v) => this.updateParam((r) => r.filter.max_bytes = v)} /> </Col> </Row> </Container> - <div className="post-rules-actions"> - <label>options:</label> - <div className="rules-options"> - <CheckField name={"enabled"} /> - </div> - - <ButtonField variant="blue" name="clear" bordered /> - <ButtonField variant="green" name="add_rule" bordered /> - </div> - - patterns: <div className="section-table"> <Table borderless size="sm"> <thead> @@ -128,29 +383,24 @@ class RulePane extends Component { <th>min</th> <th>max</th> <th>direction</th> - <th>actions</th> + {!isUpdate && <th>actions</th> } </tr> </thead> <tbody> - <tr> - <td style={{"width": "500px"}}><InputField small /></td> - <td><CheckField small /></td> - <td><CheckField small /></td> - <td><CheckField small /></td> - <td><CheckField small /></td> - <td><CheckField small /></td> - <td style={{"width": "70px"}}><NumericField small /></td> - <td style={{"width": "70px"}}><NumericField small /></td> - <td><ChoiceField inline small keys={[0, 1, 2]} values={["both", "c->s", "s->c"]} value="both" /></td> - <td><ButtonField variant="green" small name="add" inline rounded /></td> - </tr> + {patterns} </tbody> </Table> + {this.state.rulePatternsError != null && + <span className="table-error">error: {this.state.rulePatternsError}</span>} </div> </div> - </div> - + <div className="section-footer"> + {<ButtonField variant="red" name="cancel" bordered onClick={this.reset}/>} + <ButtonField variant={isUpdate ? "blue" : "green"} name={isUpdate ? "update_rule" : "add_rule"} + bordered onClick={isUpdate ? this.updateRule : this.addRule} /> + </div> + </div> </div> ); } diff --git a/frontend/src/components/panels/RulePane.scss b/frontend/src/components/panels/RulePane.scss index b030c6a..d45c366 100644 --- a/frontend/src/components/panels/RulePane.scss +++ b/frontend/src/components/panels/RulePane.scss @@ -1,16 +1,32 @@ .rule-pane { - .post-rules-actions { - display: flex; + display: flex; + flex-direction: column; - .rules-options { - flex: 1; + .rules-list { + flex: 2 1; + overflow: hidden; + + .section-content { + height: 100%; } - button { - margin-left: 10px; + .section-table { + height: calc(100% - 30px); } } + .rule-edit { + flex: 3 0; + display: flex; + flex-direction: column; -}
\ No newline at end of file + .section-content { + flex: 1; + } + + .section-table { + max-height: 150px; + } + } +} diff --git a/frontend/src/components/panels/common.scss b/frontend/src/components/panels/common.scss new file mode 100644 index 0000000..cab0de1 --- /dev/null +++ b/frontend/src/components/panels/common.scss @@ -0,0 +1,85 @@ +@import '../../colors.scss'; + +.pane-container { + background-color: $color-primary-3; + padding: 10px 10px 0; + height: 100%; + + .pane-section { + margin-bottom: 10px; + background-color: $color-primary-0; + + .section-header { + background-color: $color-primary-2; + padding: 5px 10px; + font-weight: 500; + font-size: 0.9em; + display: flex; + + .api-request { + flex: 1; + } + } + + .section-content { + padding: 10px; + } + + .section-table { + position: relative; + overflow-y: scroll; + + .table-error { + font-size: 0.8em; + color: $color-secondary-0; + margin-left: 10px; + } + } + + table { + margin-bottom: 0; + + tbody tr { + background-color: $color-primary-3; + border-top: 3px solid $color-primary-0; + border-bottom: 3px solid $color-primary-0; + } + + th { + background-color: $color-primary-2; + font-size: 0.8em; + position: sticky; + top: 0; + padding: 2px 5px; + border: none; + } + + .row-small { + font-size: 0.9em; + } + + .row-clickable { + cursor: pointer; + + &:hover { + background-color: $color-primary-0; + } + } + + .row-selected { + background-color: $color-primary-0; + } + } + } + + .section-footer { + display: flex; + padding: 10px; + background-color: $color-primary-0; + justify-content: flex-end; + + .button-field { + margin-left: 10px; + } + } +} diff --git a/frontend/src/validation.js b/frontend/src/validation.js new file mode 100644 index 0000000..eac8774 --- /dev/null +++ b/frontend/src/validation.js @@ -0,0 +1,8 @@ + +const validation = { + isValidColor: (color) => true, // TODO + isValidPort: (port, required) => parseInt(port) > (required ? 0 : -1) && parseInt(port) <= 65565, + isValidAddress: (address) => true // TODO +}; + +export default validation; diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js index ccfdb3a..8bd5e46 100644 --- a/frontend/src/views/App.js +++ b/frontend/src/views/App.js @@ -5,7 +5,6 @@ import Footer from "./Footer"; import {BrowserRouter as Router} from "react-router-dom"; import Services from "./Services"; import Filters from "./Filters"; -import Rules from "./Rules"; import Config from "./Config"; class App extends Component { @@ -15,7 +14,6 @@ class App extends Component { this.state = { servicesWindowOpen: false, filterWindowOpen: false, - rulesWindowOpen: false, configWindowOpen: false, configDone: false }; @@ -40,9 +38,6 @@ class App extends Component { if (this.state.filterWindowOpen) { modal = <Filters onHide={() => this.setState({filterWindowOpen: false})}/>; } - if (this.state.rulesWindowOpen) { - modal = <Rules onHide={() => this.setState({rulesWindowOpen: false})}/>; - } if (this.state.configWindowOpen) { modal = <Config onHide={() => this.setState({configWindowOpen: false})} onDone={() => this.setState({configDone: true})}/>; @@ -53,7 +48,6 @@ class App extends Component { <Router> <Header onOpenServices={() => this.setState({servicesWindowOpen: true})} onOpenFilters={() => this.setState({filterWindowOpen: true})} - onOpenRules={() => this.setState({rulesWindowOpen: true})} onOpenConfig={() => this.setState({configWindowOpen: true})} onOpenUpload={() => this.setState({uploadWindowOpen: true})} onConfigDone={this.state.configDone} diff --git a/frontend/src/views/Config.js b/frontend/src/views/Config.js index a770378..b11f827 100644 --- a/frontend/src/views/Config.js +++ b/frontend/src/views/Config.js @@ -68,8 +68,6 @@ class Config extends Component { }) }; - let msg = ""; - fetch('/setup', requestOptions) .then(response => { if (response.status === 202 ){ diff --git a/frontend/src/views/Connections.js b/frontend/src/views/Connections.js index f3fec64..64068c5 100644 --- a/frontend/src/views/Connections.js +++ b/frontend/src/views/Connections.js @@ -75,7 +75,7 @@ class Connections extends Component { } this.setState({loading: true, prevParams: params}); - let res = await backend.getJson(`${url}?${urlParams}`); + let res = (await backend.getJson(`${url}?${urlParams}`)).json; let connections = this.state.connections; let firstConnection = this.state.firstConnection; @@ -115,7 +115,7 @@ class Connections extends Component { let flagRule = this.state.flagRule; let rules = this.state.rules; if (flagRule === null) { - rules = await backend.getJson("/api/rules"); + rules = (await backend.getJson("/api/rules")).json; flagRule = rules.filter(rule => { return rule.name === "flag"; })[0]; diff --git a/frontend/src/views/Header.js b/frontend/src/views/Header.js index 0b82011..06cb20e 100644 --- a/frontend/src/views/Header.js +++ b/frontend/src/views/Header.js @@ -1,7 +1,6 @@ import React, {Component} from 'react'; import Typed from 'typed.js'; import './Header.scss'; -import {Button} from "react-bootstrap"; import {filtersDefinitions, filtersNames} from "../components/filters/FiltersDefinitions"; import {Link} from "react-router-dom"; import ButtonField from "../components/fields/ButtonField"; diff --git a/frontend/src/views/MainPane.js b/frontend/src/views/MainPane.js index 9d3f7b7..6f4e3cd 100644 --- a/frontend/src/views/MainPane.js +++ b/frontend/src/views/MainPane.js @@ -22,7 +22,7 @@ class MainPane extends Component { if (match != null) { this.setState({loading: true}); backend.getJson(`/api/connections/${match[1]}`) - .then(connection => this.setState({selectedConnection: connection, loading: false})) + .then(res => this.setState({selectedConnection: res.json, loading: false})) .catch(error => console.log(error)); } } diff --git a/frontend/src/views/Rules.js b/frontend/src/views/Rules.js deleted file mode 100644 index bbc3bb6..0000000 --- a/frontend/src/views/Rules.js +++ /dev/null @@ -1,118 +0,0 @@ -import React, {Component} from 'react'; -import './Services.scss'; -import {Button, ButtonGroup, Col, Container, Form, FormControl, InputGroup, Modal, Row, Table} from "react-bootstrap"; -import backend from "../backend"; - -class Rules extends Component { - - constructor(props) { - super(props); - - this.state = { - rules: [] - }; - } - - componentDidMount() { - this.loadRules(); - } - - loadRules() { - backend.get("/api/rules").then(res => this.setState({rules: res.data})); - } - - render() { - let rulesRows = this.state.rules.map(rule => - <tr key={rule.id}> - <td><Button variant="btn-edit" size="sm" - style={{"backgroundColor": rule.color}}>edit</Button></td> - <td>{rule.name}</td> - </tr> - ); - - - return ( - <Modal - {...this.props} - show="true" - size="lg" - aria-labelledby="rules-dialog" - centered - > - <Modal.Header> - <Modal.Title id="rules-dialog"> - ~/rules - </Modal.Title> - </Modal.Header> - <Modal.Body> - <Container> - <Row> - <Col md={7}> - <Table borderless size="sm" className="rules-list"> - <thead> - <tr> - <th><Button size="sm" >new</Button></th> - <th>name</th> - </tr> - </thead> - <tbody> - {rulesRows} - - </tbody> - </Table> - </Col> - <Col md={5}> - <Form> - <Form.Group controlId="servicePort"> - <Form.Label>port:</Form.Label> - <Form.Control type="text" /> - </Form.Group> - - <Form.Group controlId="serviceName"> - <Form.Label>name:</Form.Label> - <Form.Control type="text" /> - </Form.Group> - - <Form.Group controlId="serviceColor"> - <Form.Label>color:</Form.Label> - <ButtonGroup aria-label="Basic example"> - - </ButtonGroup> - <ButtonGroup aria-label="Basic example"> - - </ButtonGroup> - </Form.Group> - - <Form.Group controlId="serviceNotes"> - <Form.Label>notes:</Form.Label> - <Form.Control as="textarea" rows={3} /> - </Form.Group> - </Form> - - - </Col> - - </Row> - - <Row> - <Col md={12}> - <InputGroup> - <FormControl as="textarea" rows={4} className="curl-output" readOnly={true} - /> - </InputGroup> - - </Col> - </Row> - - - </Container> - </Modal.Body> - <Modal.Footer className="dialog-footer"> - <Button variant="red" onClick={this.props.onHide}>close</Button> - </Modal.Footer> - </Modal> - ); - } -} - -export default Rules; |