aboutsummaryrefslogtreecommitdiff
path: root/frontend/src
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src')
-rw-r--r--frontend/src/components/Connection.js8
-rw-r--r--frontend/src/components/ConnectionContent.js68
-rw-r--r--frontend/src/components/ConnectionContent.scss12
-rw-r--r--frontend/src/components/MessageAction.js4
-rw-r--r--frontend/src/components/fields/ButtonField.js9
-rw-r--r--frontend/src/components/fields/ButtonField.scss4
-rw-r--r--frontend/src/components/fields/CheckField.scss4
-rw-r--r--frontend/src/components/fields/ChoiceField.js15
-rw-r--r--frontend/src/components/fields/ChoiceField.scss2
-rw-r--r--frontend/src/components/fields/extensions/ColorField.js17
-rw-r--r--frontend/src/components/fields/extensions/ColorField.scss9
-rw-r--r--frontend/src/components/panels/PcapPane.js7
-rw-r--r--frontend/src/components/panels/RulePane.js12
-rw-r--r--frontend/src/views/Filters.js5
-rw-r--r--frontend/src/views/Header.js13
-rw-r--r--frontend/src/views/Header.scss9
16 files changed, 93 insertions, 105 deletions
diff --git a/frontend/src/components/Connection.js b/frontend/src/components/Connection.js
index 1149584..7887185 100644
--- a/frontend/src/components/Connection.js
+++ b/frontend/src/components/Connection.js
@@ -1,8 +1,9 @@
import React, {Component} from 'react';
import './Connection.scss';
-import {Button, Form, OverlayTrigger, Popover} from "react-bootstrap";
+import {Form, OverlayTrigger, Popover} from "react-bootstrap";
import backend from "../backend";
import {formatSize} from "../utils";
+import ButtonField from "./fields/ButtonField";
class Connection extends Component {
@@ -96,9 +97,8 @@ class Connection extends Component {
<tr className={classes}>
<td>
<span className="connection-service">
- <Button size="sm" style={{
- "backgroundColor": serviceColor
- }} onClick={() => this.props.addServicePortFilter(conn.port_dst)}>{serviceName}</Button>
+ <ButtonField small fullSpan color={serviceColor} name={serviceName}
+ onClick={() => this.props.addServicePortFilter(conn.port_dst)} />
</span>
</td>
<td className="clickable" onClick={this.props.onSelected}>{conn.ip_src}</td>
diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js
index 0069424..318965c 100644
--- a/frontend/src/components/ConnectionContent.js
+++ b/frontend/src/components/ConnectionContent.js
@@ -1,8 +1,10 @@
import React, {Component} from 'react';
import './ConnectionContent.scss';
-import {Button, Dropdown, Row} from 'react-bootstrap';
+import {Dropdown, Row} from 'react-bootstrap';
import MessageAction from "./MessageAction";
import backend from "../backend";
+import ButtonField from "./fields/ButtonField";
+import ChoiceField from "./fields/ChoiceField";
const classNames = require('classnames');
@@ -93,12 +95,12 @@ class ConnectionContent extends Component {
}
return Object.entries(connectionMessage.metadata["reproducers"]).map(([actionName, actionValue]) =>
- <Button size="sm" key={actionName + "_button"} onClick={() => {
+ <ButtonField small key={actionName + "_button"} name={actionName} onClick={() => {
this.setState({
messageActionDialog: <MessageAction actionName={actionName} actionValue={actionValue}
onHide={() => this.setState({messageActionDialog: null})}/>
});
- }}>{actionName}</Button>
+ }} />
);
}
@@ -138,56 +140,16 @@ class ConnectionContent extends Component {
<span> | <strong>timestamp</strong>: {this.props.connection.started_at}</span>
</div>
<div className="header-actions col-auto">
- <Dropdown onSelect={this.setFormat}>
- <Dropdown.Toggle size="sm" id="connection-content-format">
- format
- </Dropdown.Toggle>
-
- <Dropdown.Menu>
- <Dropdown.Item eventKey="default"
- active={this.state.format === "default"}>plain</Dropdown.Item>
- <Dropdown.Item eventKey="hex"
- active={this.state.format === "hex"}>hex</Dropdown.Item>
- <Dropdown.Item eventKey="hexdump"
- active={this.state.format === "hexdump"}>hexdump</Dropdown.Item>
- <Dropdown.Item eventKey="base32"
- active={this.state.format === "base32"}>base32</Dropdown.Item>
- <Dropdown.Item eventKey="base64"
- active={this.state.format === "base64"}>base64</Dropdown.Item>
- <Dropdown.Item eventKey="ascii"
- active={this.state.format === "ascii"}>ascii</Dropdown.Item>
- <Dropdown.Item eventKey="binary"
- active={this.state.format === "binary"}>binary</Dropdown.Item>
- <Dropdown.Item eventKey="decimal"
- active={this.state.format === "decimal"}>decimal</Dropdown.Item>
- <Dropdown.Item eventKey="octal"
- active={this.state.format === "octal"}>octal</Dropdown.Item>
- </Dropdown.Menu>
- </Dropdown>
-
- <Dropdown>
- <Dropdown.Toggle size="sm" id="connection-content-view">
- view_as
- </Dropdown.Toggle>
-
- <Dropdown.Menu>
- <Dropdown.Item eventKey="default" active={true}>default</Dropdown.Item>
- </Dropdown.Menu>
-
- </Dropdown>
-
- <Dropdown>
- <Dropdown.Toggle size="sm" id="connection-content-download">
- download_as
- </Dropdown.Toggle>
-
- <Dropdown.Menu>
- <Dropdown.Item eventKey="nl_separated">nl_separated</Dropdown.Item>
- <Dropdown.Item eventKey="only_client">only_client</Dropdown.Item>
- <Dropdown.Item eventKey="only_server">only_server</Dropdown.Item>
- </Dropdown.Menu>
-
- </Dropdown>
+ <ChoiceField name="format" inline small onlyName
+ keys={["default", "hex", "hexdump", "base32", "base64", "ascii", "binary", "decimal", "octal"]}
+ values={["plain", "hex", "hexdump", "base32", "base64", "ascii", "binary", "decimal", "octal"]}
+ onChange={this.setFormat} value={this.state.value} />
+
+ <ChoiceField name="view_as" inline small onlyName keys={["default"]} values={["default"]} />
+
+ <ChoiceField name="download_as" inline small onlyName
+ keys={["nl_separated", "only_client", "only_server"]}
+ values={["nl_separated", "only_client", "only_server"]} />
</div>
</Row>
</div>
diff --git a/frontend/src/components/ConnectionContent.scss b/frontend/src/components/ConnectionContent.scss
index 8ee31ec..fde54c0 100644
--- a/frontend/src/components/ConnectionContent.scss
+++ b/frontend/src/components/ConnectionContent.scss
@@ -51,7 +51,7 @@
}
&:hover .connection-message-actions {
- display: block;
+ display: flex;
}
.connection-message-label {
@@ -89,17 +89,19 @@
.connection-content-header {
background-color: $color-primary-2;
padding: 0;
- height: 31px;
+ height: 33px;
.header-info {
- padding-top: 5px;
+ padding-top: 7px;
padding-left: 20px;
font-size: 12px;
}
.header-actions {
- .dropdown {
- display: inline-block;
+ display: flex;
+
+ .choice-field {
+ margin-top: -5px;
}
}
}
diff --git a/frontend/src/components/MessageAction.js b/frontend/src/components/MessageAction.js
index 2c6ebbc..8f4b031 100644
--- a/frontend/src/components/MessageAction.js
+++ b/frontend/src/components/MessageAction.js
@@ -40,8 +40,8 @@ class MessageAction extends Component {
<TextField readonly value={this.props.actionValue} textRef={this.actionValue} rows={15} />
</Modal.Body>
<Modal.Footer className="dialog-footer">
- <ButtonField variant="green" onClick={this.copyActionValue} name={this.state.copyButtonText} />
- <ButtonField variant="red" onClick={this.props.onHide} name="close" />
+ <ButtonField variant="green" bordered onClick={this.copyActionValue} name={this.state.copyButtonText} />
+ <ButtonField variant="red" bordered onClick={this.props.onHide} name="close" />
</Modal.Footer>
</Modal>
);
diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js
index b32aee8..f2f02fd 100644
--- a/frontend/src/components/fields/ButtonField.js
+++ b/frontend/src/components/fields/ButtonField.js
@@ -31,6 +31,15 @@ class ButtonField extends Component {
if (this.props.border) {
buttonStyle["borderColor"] = this.props.border;
}
+ if (this.props.fullSpan) {
+ buttonStyle["width"] = "100%";
+ }
+ if (this.props.rounded) {
+ buttonStyle["borderRadius"] = "3px";
+ }
+ if (this.props.inline) {
+ buttonStyle["marginTop"] = "8px";
+ }
return (
<div className={classNames( "field", "button-field", {"field-small": this.props.small})}>
diff --git a/frontend/src/components/fields/ButtonField.scss b/frontend/src/components/fields/ButtonField.scss
index 933279e..aabe80f 100644
--- a/frontend/src/components/fields/ButtonField.scss
+++ b/frontend/src/components/fields/ButtonField.scss
@@ -9,6 +9,10 @@
&.field-small {
font-size: 0.8em;
+
+ button {
+ padding: 4px 12px;
+ }
}
.button-variant-red {
diff --git a/frontend/src/components/fields/CheckField.scss b/frontend/src/components/fields/CheckField.scss
index 7b0ac5f..ab932b4 100644
--- a/frontend/src/components/fields/CheckField.scss
+++ b/frontend/src/components/fields/CheckField.scss
@@ -31,5 +31,9 @@
&.field-small {
font-size: 0.8em;
+
+ .field-input label {
+ padding: 7px 15px;
+ }
}
}
diff --git a/frontend/src/components/fields/ChoiceField.js b/frontend/src/components/fields/ChoiceField.js
index d409b21..73e950d 100644
--- a/frontend/src/components/fields/ChoiceField.js
+++ b/frontend/src/components/fields/ChoiceField.js
@@ -38,15 +38,24 @@ class ChoiceField extends Component {
<span className="field-option" key={key} onClick={() => handler(key)}>{values[i]}</span>
);
+ let fieldValue = "";
+ if (inline && name) {
+ fieldValue = name;
+ }
+ if (!this.props.onlyName && inline && name) {
+ fieldValue += ": ";
+ }
+ if (!this.props.onlyName) {
+ fieldValue += this.props.value || "select a value";
+ }
+
return (
<div className={classNames( "field", "choice-field", {"field-inline" : inline},
{"field-small": this.props.small})}>
{!inline && name && <label className="field-name">{name}:</label>}
<div className={classNames("field-select", {"select-expanded": this.state.expanded})}
tabIndex={0} onBlur={collapse} onClick={() => this.state.expanded ? collapse() : expand()}>
- <div className="field-value">
- {((inline && name) ? (name + ": ") : "") + (this.props.value || "select a value")}
- </div>
+ <div className="field-value">{fieldValue}</div>
<div className="field-options">
{options}
</div>
diff --git a/frontend/src/components/fields/ChoiceField.scss b/frontend/src/components/fields/ChoiceField.scss
index 7f32b0e..e7683b7 100644
--- a/frontend/src/components/fields/ChoiceField.scss
+++ b/frontend/src/components/fields/ChoiceField.scss
@@ -16,7 +16,7 @@
border: none;
color: $color-primary-4;
border-radius: 5px;
- padding: 7px 10px;
+ padding: 7px 25px 7px 10px;
cursor: pointer;
&:after {
diff --git a/frontend/src/components/fields/extensions/ColorField.js b/frontend/src/components/fields/extensions/ColorField.js
index edcb720..c1c210f 100644
--- a/frontend/src/components/fields/extensions/ColorField.js
+++ b/frontend/src/components/fields/extensions/ColorField.js
@@ -1,5 +1,5 @@
import React, {Component} from 'react';
-import {Button, ButtonGroup, Form, OverlayTrigger, Popover} from "react-bootstrap";
+import {OverlayTrigger, Popover} from "react-bootstrap";
import './ColorField.scss';
import InputField from "../InputField";
@@ -9,7 +9,6 @@ class ColorField extends Component {
super(props);
this.state = {
- invalid: false
};
this.colors = ["#E53935", "#D81B60", "#8E24AA", "#5E35B1", "#3949AB", "#1E88E5", "#039BE5", "#00ACC1",
@@ -18,8 +17,7 @@ class ColorField extends Component {
render() {
const colorButtons = this.colors.map((color) =>
- <span key={"button" + color} className="color-input"
- style={{"backgroundColor": color, "borderColor": this.state.color === color ? "#fff" : color}}
+ <span key={"button" + color} className="color-input" style={{"backgroundColor": color}}
onClick={() => {
this.setState({color: color});
if (typeof this.props.onChange === "function") {
@@ -44,16 +42,19 @@ class ColorField extends Component {
</Popover>
);
+ let buttonStyles = {};
+ if (this.state.color) {
+ buttonStyles["backgroundColor"] = this.state.color;
+ }
+
return (
- <div className="color-field">
+ <div className="field color-field">
<InputField {...this.props} name="color" />
-
<div className="color-picker">
<OverlayTrigger trigger="click" placement="top" overlay={popover} rootClose>
- <Button variant="picker" size="sm">pick</Button>
+ <button type="button" className="picker-button" style={buttonStyles}>pick</button>
</OverlayTrigger>
</div>
-
</div>
);
}
diff --git a/frontend/src/components/fields/extensions/ColorField.scss b/frontend/src/components/fields/extensions/ColorField.scss
index c8f617c..1c3931f 100644
--- a/frontend/src/components/fields/extensions/ColorField.scss
+++ b/frontend/src/components/fields/extensions/ColorField.scss
@@ -16,15 +16,14 @@
.color-picker {
margin-bottom: 5.5px;
- .btn-picker {
- padding: 8.5px 15px;
+ .picker-button {
+ font-size: 0.8em;
+ padding: 8px 15px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
- background-color: $color-indigo;
+ background-color: $color-primary-1;
}
}
-
-
}
.colors-container {
diff --git a/frontend/src/components/panels/PcapPane.js b/frontend/src/components/panels/PcapPane.js
index 7e0fa6c..a491dff 100644
--- a/frontend/src/components/panels/PcapPane.js
+++ b/frontend/src/components/panels/PcapPane.js
@@ -3,10 +3,11 @@ import './PcapPane.scss';
import Table from "react-bootstrap/Table";
import backend from "../../backend";
import {createCurlCommand, formatSize, timestampToTime2} from "../../utils";
-import {Button, Col, Container, Row} from "react-bootstrap";
+import {Col, Container, Row} from "react-bootstrap";
import InputField from "../fields/InputField";
import CheckField from "../fields/CheckField";
import TextField from "../fields/TextField";
+import ButtonField from "../fields/ButtonField";
class PcapPane extends Component {
@@ -167,7 +168,7 @@ class PcapPane extends Component {
<CheckField name="flush_all" checked={this.state.uploadFlushAll}
onChange={v => this.setState({uploadFlushAll: v})}/>
</div>
- <Button variant="green" onClick={this.handleUploadPcap}>upload</Button>
+ <ButtonField variant="green" bordered onClick={this.handleUploadPcap} name="upload" />
</div>
<TextField value={uploadOutput} rows={4} readonly small={true}/>
@@ -192,7 +193,7 @@ class PcapPane extends Component {
<CheckField name="delete_original_file" checked={this.state.uploadFlushAll}
onChange={v => this.setState({uploadFlushAll: v})}/>
</div>
- <Button variant="blue" onClick={this.handleUploadPcap}>process</Button>
+ <ButtonField variant="blue" bordered onClick={this.handleUploadPcap} name="process" />
</div>
<TextField value={uploadOutput} rows={4} readonly small={true}/>
diff --git a/frontend/src/components/panels/RulePane.js b/frontend/src/components/panels/RulePane.js
index fbc8785..2e91d91 100644
--- a/frontend/src/components/panels/RulePane.js
+++ b/frontend/src/components/panels/RulePane.js
@@ -1,7 +1,7 @@
import React, {Component} from 'react';
import './RulePane.scss';
import Table from "react-bootstrap/Table";
-import {Button, Col, Container, Row} from "react-bootstrap";
+import {Col, Container, Row} from "react-bootstrap";
import InputField from "../fields/InputField";
import CheckField from "../fields/CheckField";
import TextField from "../fields/TextField";
@@ -141,18 +141,12 @@ class RulePane extends Component {
<td><CheckField small /></td>
<td style={{"width": "70px"}}><NumericField small /></td>
<td style={{"width": "70px"}}><NumericField small /></td>
- <td><ChoiceField small keys={[0, 1, 2]} values={["both", "c->s", "s->c"]} value="both" /></td>
- <td><Button variant="green" size="sm">add</Button></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>
</tbody>
</Table>
</div>
-
- <ButtonField name="add_rule" variant="green" bordered />
- <br />
- <ButtonField name="add_rule" small color="red"/>
- <br />
- <ButtonField name="add_rule" bordered border={"green"} />
</div>
</div>
diff --git a/frontend/src/views/Filters.js b/frontend/src/views/Filters.js
index 78f0342..b62e7eb 100644
--- a/frontend/src/views/Filters.js
+++ b/frontend/src/views/Filters.js
@@ -1,7 +1,8 @@
import React, {Component} from 'react';
import './Services.scss';
-import {Button, Col, Container, Modal, Row, Table} from "react-bootstrap";
+import {Col, Container, Modal, Row, Table} from "react-bootstrap";
import {filtersDefinitions, filtersNames} from "../components/filters/FiltersDefinitions";
+import ButtonField from "../components/fields/ButtonField";
class Filters extends Component {
@@ -89,7 +90,7 @@ class Filters extends Component {
</Container>
</Modal.Body>
<Modal.Footer className="dialog-footer">
- <Button variant="red" onClick={this.props.onHide}>close</Button>
+ <ButtonField variant="red" bordered onClick={this.props.onHide} name="close" />
</Modal.Footer>
</Modal>
);
diff --git a/frontend/src/views/Header.js b/frontend/src/views/Header.js
index a022636..0b82011 100644
--- a/frontend/src/views/Header.js
+++ b/frontend/src/views/Header.js
@@ -4,6 +4,7 @@ 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";
class Header extends Component {
@@ -68,16 +69,16 @@ class Header extends Component {
<div className="col">
<div className="header-buttons">
- <Button variant="pink" onClick={this.props.onOpenFilters}>filters</Button>
+ <ButtonField variant="pink" onClick={this.props.onOpenFilters} name="filters" bordered />
<Link to="/pcaps">
- <Button variant="purple">pcaps</Button>
+ <ButtonField variant="purple" name="pcaps" bordered />
</Link>
<Link to="/rules">
- <Button variant="deep-purple">rules</Button>
+ <ButtonField variant="deep-purple" name="rules" bordered />
</Link>
- <Button variant="indigo" onClick={this.props.onOpenServices}>services</Button>
- <Button variant="blue" onClick={this.props.onOpenConfig}
- disabled={false}>config</Button>
+ <ButtonField variant="indigo" onClick={this.props.onOpenServices} name="services" bordered />
+ <ButtonField variant="blue" onClick={this.props.onOpenConfig}
+ disabled={false} name="config" bordered />
</div>
</div>
</div>
diff --git a/frontend/src/views/Header.scss b/frontend/src/views/Header.scss
index 71d49e3..15d1375 100644
--- a/frontend/src/views/Header.scss
+++ b/frontend/src/views/Header.scss
@@ -14,11 +14,12 @@
}
.header-buttons {
- margin: 5px 0;
- text-align: right;
+ margin: 7px 0;
+ display: flex;
+ justify-content: flex-end;
- button {
- margin-left: 10px;
+ .button-field {
+ margin-left: 7px;
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-10-17 04:34:40 +0000