aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components')
-rw-r--r--frontend/src/components/Connection.js104
-rw-r--r--frontend/src/components/Connection.scss26
-rw-r--r--frontend/src/components/ConnectionContent.js16
3 files changed, 117 insertions, 29 deletions
diff --git a/frontend/src/components/Connection.js b/frontend/src/components/Connection.js
index 13b394a..8121d51 100644
--- a/frontend/src/components/Connection.js
+++ b/frontend/src/components/Connection.js
@@ -1,8 +1,50 @@
import React, {Component} from 'react';
import './Connection.scss';
-import {Button, OverlayTrigger, Tooltip} from "react-bootstrap";
+import axios from 'axios'
+import {Button, Form, OverlayTrigger, Popover} from "react-bootstrap";
class Connection extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ update: false,
+ copiedMessage: false
+ };
+
+ this.copyTextarea = React.createRef();
+ this.handleAction = this.handleAction.bind(this);
+ }
+
+ handleAction(name) {
+ if (name === "hide") {
+ const enabled = !this.props.data.hidden;
+ axios.post(`/api/connections/${this.props.data.id}/${enabled ? "hide" : "show"}`)
+ .then(res => {
+ if (res.status === 202) {
+ this.props.onEnabled(!enabled);
+ this.setState({update: true});
+ }
+ });
+ }
+ if (name === "mark") {
+ const marked = this.props.data.marked;
+ axios.post(`/api/connections/${this.props.data.id}/${marked ? "unmark" : "mark"}`)
+ .then(res => {
+ if (res.status === 202) {
+ this.props.onMarked(!marked);
+ this.setState({update: true});
+ }
+ });
+ }
+ if (name === "copy") {
+ this.copyTextarea.current.select();
+ document.execCommand('copy');
+ this.setState({copiedMessage: true});
+ setTimeout(() => this.setState({copiedMessage: false}), 3000);
+ }
+ }
+
render() {
let conn = this.props.data;
let serviceName = "/dev/null";
@@ -13,16 +55,37 @@ class Connection extends Component {
}
let startedAt = new Date(conn.started_at);
let closedAt = new Date(conn.closed_at);
+ let processedAt = new Date(conn.processed_at);
let duration = ((closedAt - startedAt) / 1000).toFixed(3);
- let timeInfo = `Started at ${startedAt}\nClosed at ${closedAt}\nProcessed at ${new Date(conn.processed_at)}`;
+ let timeInfo = <div>
+ <span>Started at {startedAt.toLocaleDateString() + " " + startedAt.toLocaleTimeString()}</span><br/>
+ <span>Processed at {processedAt.toLocaleDateString() + " " + processedAt.toLocaleTimeString()}</span><br/>
+ <span>Closed at {closedAt.toLocaleDateString() + " " + closedAt.toLocaleTimeString()}</span>
+ </div>;
let classes = "connection";
if (this.props.selected) {
classes += " connection-selected";
}
- if (conn.marked){
- classes += " connection-marked";
- }
+
+ const popoverFor = function (name, content) {
+ return <Popover id={`popover-${name}-${conn.id}`} className="connection-popover">
+ <Popover.Content>
+ {content}
+ </Popover.Content>
+ </Popover>;
+ };
+
+ const commentPopoverContent = <div>
+ <span>Click to <strong>{conn.comment.length > 0 ? "edit" : "add"}</strong> comment</span>
+ {conn.comment && <Form.Control as="textarea" readOnly={true} rows={2} defaultValue={conn.comment}/>}
+ </div>;
+
+ const copyPopoverContent = <div>
+ {this.state.copiedMessage ? <span><strong>Copied!</strong></span> :
+ <span>Click to <strong>copy</strong> the connection id</span>}
+ <Form.Control as="textarea" readOnly={true} rows={1} defaultValue={conn.id} ref={this.copyTextarea}/>
+ </div>;
return (
<tr className={classes}>
@@ -38,24 +101,39 @@ class Connection extends Component {
<td className="clickable" onClick={() => this.props.onSelected()}>{conn.ip_dst}</td>
<td className="clickable" onClick={() => this.props.onSelected()}>{conn.port_dst}</td>
<td className="clickable" onClick={() => this.props.onSelected()}>
- {/*<OverlayTrigger placement="top" overlay={<Tooltip id={`tooltip-${conn.id}`}>{timeInfo}</Tooltip>}>*/}
+ <OverlayTrigger trigger={["focus", "hover"]} placement="right"
+ overlay={popoverFor("duration", timeInfo)}>
<span className="test-tooltip">{duration}s</span>
- {/*</OverlayTrigger>*/}
+ </OverlayTrigger>
</td>
<td className="clickable" onClick={() => this.props.onSelected()}>{conn.client_bytes}</td>
<td className="clickable" onClick={() => this.props.onSelected()}>{conn.server_bytes}</td>
<td>
- <span className="connection-icon connection-hide">%</span>
- <span className="connection-icon connection-mark">!!</span>
- <span className="connection-icon connection-comment">@</span>
- <span className="connection-icon connection-link">#</span>
+ <OverlayTrigger trigger={["focus", "hover"]} placement="right"
+ overlay={popoverFor("hide", <span>Hide this connection from the list</span>)}>
+ <span className={"connection-icon" + (conn.hidden ? " icon-enabled" : "")}
+ onClick={() => this.handleAction("hide")}>%</span>
+ </OverlayTrigger>
+ <OverlayTrigger trigger={["focus", "hover"]} placement="right"
+ overlay={popoverFor("hide", <span>Mark this connection</span>)}>
+ <span className={"connection-icon" + (conn.marked ? " icon-enabled" : "")}
+ onClick={() => this.handleAction("mark")}>!!</span>
+ </OverlayTrigger>
+ <OverlayTrigger trigger={["focus", "hover"]} placement="right"
+ overlay={popoverFor("comment", commentPopoverContent)}>
+ <span className={"connection-icon" + (conn.comment ? " icon-enabled" : "")}
+ onClick={() => this.handleAction("comment")}>@</span>
+ </OverlayTrigger>
+ <OverlayTrigger trigger={["focus", "hover"]} placement="right"
+ overlay={popoverFor("copy", copyPopoverContent)}>
+ <span className="connection-icon"
+ onClick={() => this.handleAction("copy")}>#</span>
+ </OverlayTrigger>
</td>
-
</tr>
);
}
}
-
export default Connection;
diff --git a/frontend/src/components/Connection.scss b/frontend/src/components/Connection.scss
index d27ebc8..5ad195d 100644
--- a/frontend/src/components/Connection.scss
+++ b/frontend/src/components/Connection.scss
@@ -9,10 +9,6 @@
vertical-align: middle;
}
- &.connection-marked {
- border-right: 5px solid $color-secondary-2;
- }
-
.connection-service {
.btn {
width: 100%;
@@ -31,6 +27,10 @@
cursor: pointer;
}
+ .connection-icon.icon-enabled {
+ color: $color-secondary-2;
+ }
+
&:hover {
background-color: $color-primary-2;
}
@@ -41,3 +41,21 @@
}
+.connection-popover {
+ background-color: $color-primary-4;
+ border: none;
+
+ .popover-body {
+ color: $color-primary-1;
+
+ textarea {
+ background-color: $color-primary-3;
+ font-size: 12px;
+ width: 200px;
+ }
+ }
+
+ .arrow::after {
+ border-right-color: $color-primary-4;
+ }
+}
diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js
index bd35b5c..db63cbe 100644
--- a/frontend/src/components/ConnectionContent.js
+++ b/frontend/src/components/ConnectionContent.js
@@ -1,18 +1,13 @@
import React, {Component} from 'react';
import './ConnectionContent.scss';
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {
-
-} from '@fortawesome/free-solid-svg-icons'
-import {useParams} from "react-router-dom";
-import { Dropdown } from 'react-bootstrap';
+import {Dropdown} from 'react-bootstrap';
class ConnectionContent extends Component {
render() {
- let content = this.props.connectionPayload
+ let content = this.props.connectionPayload;
if (content === undefined) {
- return <div>nope</div>
+ return <div>nope</div>;
}
let payload = content.map(c =>
@@ -20,10 +15,7 @@ class ConnectionContent extends Component {
{c.content}
</span>
- )
-
-
-
+ );
return (
<div className="connection-content">
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-11-22 18:58:32 +0000