From 6006d47c1f3397862bb13c782d66689067135bdb Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Sat, 9 May 2020 14:34:08 +0200 Subject: Add infinite scroll to connections, implement connection actions --- frontend/package.json | 1 + frontend/src/colors.scss | 2 +- frontend/src/components/Connection.js | 104 +++++++++++++++++++++++---- frontend/src/components/Connection.scss | 26 +++++-- frontend/src/components/ConnectionContent.js | 16 ++--- frontend/src/index.scss | 4 +- frontend/src/utils.js | 9 +++ frontend/src/views/App.js | 10 +-- frontend/src/views/Connections.js | 94 ++++++++++++++++++++++-- frontend/src/views/Footer.scss | 2 +- frontend/src/views/Header.js | 6 +- frontend/src/views/Header.scss | 2 +- frontend/src/views/MainPane.js | 10 +-- frontend/src/views/MainPane.scss | 3 +- frontend/src/views/Services.js | 16 +++-- frontend/yarn.lock | 2 +- 16 files changed, 242 insertions(+), 65 deletions(-) (limited to 'frontend') diff --git a/frontend/package.json b/frontend/package.json index a91f51d..56b11c7 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,6 +16,7 @@ "react": "^16.13.1", "react-bootstrap": "^1.0.1", "react-dom": "^16.13.1", + "react-router": "^5.1.2", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", "typed.js": "^2.0.11" diff --git a/frontend/src/colors.scss b/frontend/src/colors.scss index 75f1828..244e869 100644 --- a/frontend/src/colors.scss +++ b/frontend/src/colors.scss @@ -1,4 +1,4 @@ -$color-primary-0: #17223B; // Main Primary color */ +$color-primary-0: #17223B; // Main Primary color */ $color-primary-1: #040B1B; $color-primary-2: #0F192E; $color-primary-3: #1D2841; 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 =
+ Started at {startedAt.toLocaleDateString() + " " + startedAt.toLocaleTimeString()}
+ Processed at {processedAt.toLocaleDateString() + " " + processedAt.toLocaleTimeString()}
+ Closed at {closedAt.toLocaleDateString() + " " + closedAt.toLocaleTimeString()} +
; let classes = "connection"; if (this.props.selected) { classes += " connection-selected"; } - if (conn.marked){ - classes += " connection-marked"; - } + + const popoverFor = function (name, content) { + return + + {content} + + ; + }; + + const commentPopoverContent =
+ Click to {conn.comment.length > 0 ? "edit" : "add"} comment + {conn.comment && } +
; + + const copyPopoverContent =
+ {this.state.copiedMessage ? Copied! : + Click to copy the connection id} + +
; return ( @@ -38,24 +101,39 @@ class Connection extends Component { this.props.onSelected()}>{conn.ip_dst} this.props.onSelected()}>{conn.port_dst} this.props.onSelected()}> - {/*{timeInfo}}>*/} + {duration}s - {/**/} + this.props.onSelected()}>{conn.client_bytes} this.props.onSelected()}>{conn.server_bytes} - % - !! - @ - # + Hide this connection from the list)}> + this.handleAction("hide")}>% + + Mark this connection)}> + this.handleAction("mark")}>!! + + + this.handleAction("comment")}>@ + + + this.handleAction("copy")}># + - ); } } - 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
nope
+ return
nope
; } let payload = content.map(c => @@ -20,10 +15,7 @@ class ConnectionContent extends Component { {c.content} - ) - - - + ); return (
diff --git a/frontend/src/index.scss b/frontend/src/index.scss index 044d150..b7f0cf4 100644 --- a/frontend/src/index.scss +++ b/frontend/src/index.scss @@ -1,5 +1,6 @@ @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap'); -@import-normalize; + +@import-normalize ; @import 'colors.scss'; @@ -131,6 +132,7 @@ input.form-control, textarea.form-control { background-color: $color-primary-2; border: none; color: $color-primary-4; + font-family: 'Fira Code', monospace; &:focus { background-color: $color-primary-1; diff --git a/frontend/src/utils.js b/frontend/src/utils.js index b72ada7..db9405c 100644 --- a/frontend/src/utils.js +++ b/frontend/src/utils.js @@ -3,3 +3,12 @@ export function createCurlCommand(subCommand, data) { return `curl --request PUT \\\n --url ${full}/api${subCommand} \\\n ` + `--header 'content-type: application/json' \\\n --data '${JSON.stringify(data)}'`; } + +export function objectToQueryString(obj) { + let str = []; + for (let p in obj) + if (obj.hasOwnProperty(p)) { + str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); + } + return str.join("&"); +} diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js index 2b444a2..e3119aa 100644 --- a/frontend/src/views/App.js +++ b/frontend/src/views/App.js @@ -3,7 +3,7 @@ import Header from "./Header"; import './App.scss'; import MainPane from "./MainPane"; import Footer from "./Footer"; -import {Route, BrowserRouter as Router, Switch} from "react-router-dom"; +import {BrowserRouter as Router, Route, Switch} from "react-router-dom"; import Services from "./Services"; class App extends Component { @@ -16,9 +16,9 @@ class App extends Component { } render() { - let modal = "" + let modal = ""; if (this.state.servicesShow) { - modal = this.setState({servicesShow: false})} /> + modal = this.setState({servicesShow: false})}/>; } return ( @@ -26,8 +26,8 @@ class App extends Component {
this.setState({servicesShow: true})}/> - } /> - } /> + }/> + }/> {modal}
diff --git a/frontend/src/views/Connections.js b/frontend/src/views/Connections.js index fa7798e..400f4e0 100644 --- a/frontend/src/views/Connections.js +++ b/frontend/src/views/Connections.js @@ -4,29 +4,107 @@ import axios from 'axios' import Connection from "../components/Connection"; import Table from 'react-bootstrap/Table'; import {Redirect} from 'react-router'; +import {objectToQueryString} from "../utils"; class Connections extends Component { + constructor(props) { super(props); this.state = { + loading: false, connections: [], + firstConnection: null, + lastConnection: null, + showHidden: false }; - } + this.scrollTopThreashold = 0.00001; + this.scrollBottomThreashold = 0.99999; + this.maxConnections = 500; + this.queryLimit = 50; + this.handleScroll = this.handleScroll.bind(this); + } + componentDidMount() { - axios.get("/api/connections").then(res => this.setState({connections: res.data})) + this.loadConnections({limit: this.queryLimit, hidden: this.state.showHidden}); + } + + handleScroll(e) { + let relativeScroll = e.currentTarget.scrollTop / (e.currentTarget.scrollHeight - e.currentTarget.clientHeight); + if (!this.state.loading && relativeScroll > this.scrollBottomThreashold) { + this.loadConnections({ + from: this.state.lastConnection.id, limit: this.queryLimit, + hidden: this.state.showHidden + }); + } + if (!this.state.loading && relativeScroll < this.scrollTopThreashold) { + this.loadConnections({ + to: this.state.firstConnection.id, limit: this.queryLimit, + hidden: this.state.showHidden + }); + } + + } + + async loadConnections(params) { + let url = "/api/connections"; + if (params !== undefined) { + url += "?" + objectToQueryString(params); + } + this.setState({loading: true}); + let res = await axios.get(url); + + let connections = this.state.connections; + let firstConnection = this.state.firstConnection; + let lastConnection = this.state.lastConnection; + if (res.data.length > 0) { + if (params !== undefined && params.from !== undefined) { + connections = this.state.connections.concat(res.data); + lastConnection = connections[connections.length - 1]; + if (connections.length > this.maxConnections) { + connections = connections.slice(connections.length - this.maxConnections, + connections.length - 1); + firstConnection = connections[0]; + } + } else if (params !== undefined && params.to !== undefined) { + connections = res.data.concat(this.state.connections); + firstConnection = connections[0]; + if (connections.length > this.maxConnections) { + connections = connections.slice(0, this.maxConnections); + lastConnection = connections[this.maxConnections - 1]; + } + } else { + connections = res.data; + firstConnection = connections[0]; + lastConnection = connections[connections.length - 1]; + } + } + + this.setState({ + loading: false, + connections: connections, + firstConnection: firstConnection, + lastConnection: lastConnection + }); } + render() { - let redirect = "" + let redirect = ""; if (this.state.selected) { - redirect = ; + redirect = ; } - return ( + let loading = null; + if (this.state.loading) { + loading = + Loading... + ; + } -
+ return ( +
@@ -46,9 +124,11 @@ class Connections extends Component { { this.state.connections.map(c => this.setState({selected: c.id})} - selected={this.state.selected === c.id}/> + selected={this.state.selected === c.id} onMarked={marked => c.marked = marked} + onEnabled={enabled => c.hidden = !enabled}/> ) } + {loading}
diff --git a/frontend/src/views/Footer.scss b/frontend/src/views/Footer.scss index 9a8cacb..c89f971 100644 --- a/frontend/src/views/Footer.scss +++ b/frontend/src/views/Footer.scss @@ -3,7 +3,7 @@ .footer { padding: 15px 30px; - >.row { + > .row { background-color: $color-primary-0; } diff --git a/frontend/src/views/Header.js b/frontend/src/views/Header.js index ac272e6..f96b036 100644 --- a/frontend/src/views/Header.js +++ b/frontend/src/views/Header.js @@ -31,7 +31,9 @@ class Header extends Component {

- { this.el = el; }} /> + { + this.el = el; + }}/>

@@ -45,7 +47,7 @@ class Header extends Component {
- ) + ); } } diff --git a/frontend/src/views/Header.scss b/frontend/src/views/Header.scss index 16c2dbd..0c524e6 100644 --- a/frontend/src/views/Header.scss +++ b/frontend/src/views/Header.scss @@ -3,7 +3,7 @@ .header { padding: 15px 30px; - >.row { + > .row { background-color: $color-primary-0; } diff --git a/frontend/src/views/MainPane.js b/frontend/src/views/MainPane.js index 0fc083e..e84f94c 100644 --- a/frontend/src/views/MainPane.js +++ b/frontend/src/views/MainPane.js @@ -19,9 +19,7 @@ class MainPane extends Component { const id = this.props.match.params.id; this.setState({id: id}); - axios.get(`/api/streams/${id}`).then(res => this.setState({connectionContent: res.data})) - - + axios.get(`/api/streams/${id}`).then(res => this.setState({connectionContent: res.data})); } } @@ -30,12 +28,8 @@ class MainPane extends Component { const id = this.props.match.params.id; this.setState({id: id}); - axios.get(`/api/streams/${id}`).then(res => this.setState({connectionContent: res.data})) - - + axios.get(`/api/streams/${id}`).then(res => this.setState({connectionContent: res.data})); } - - } render() { diff --git a/frontend/src/views/MainPane.scss b/frontend/src/views/MainPane.scss index c1a2f7f..d0d25b1 100644 --- a/frontend/src/views/MainPane.scss +++ b/frontend/src/views/MainPane.scss @@ -5,5 +5,4 @@ position: relative; } - -} \ No newline at end of file +} diff --git a/frontend/src/views/Services.js b/frontend/src/views/Services.js index 66d99c6..b95b01c 100644 --- a/frontend/src/views/Services.js +++ b/frontend/src/views/Services.js @@ -112,7 +112,7 @@ class Services extends Component { let rows = Object.values(this.state.services).map(s => + onClick={() => this.editService(s)} style={{"backgroundColor": s.color}}>edit {s.port} {s.name} @@ -149,7 +149,7 @@ class Services extends Component { - {rows} + {rows} @@ -157,7 +157,7 @@ class Services extends Component {
port: - + @@ -168,16 +168,17 @@ class Services extends Component { color: - {colorButtons.slice(0,8)} + {colorButtons.slice(0, 8)} - {colorButtons.slice(8,18)} + {colorButtons.slice(8, 18)} notes: - + @@ -189,7 +190,8 @@ class Services extends Component { - + diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 81dc71a..8628e68 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -8989,7 +8989,7 @@ react-router-dom@^5.1.2: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" -react-router@5.1.2: +react-router@5.1.2, react-router@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.1.2.tgz#6ea51d789cb36a6be1ba5f7c0d48dd9e817d3418" integrity sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A== -- cgit v1.2.3-70-g09d2