diff options
Diffstat (limited to 'frontend/src/components')
| -rw-r--r-- | frontend/src/components/Connection.js | 78 | ||||
| -rw-r--r-- | frontend/src/components/Connection.scss | 49 | ||||
| -rw-r--r-- | frontend/src/components/ConnectionContent.js | 2 |
3 files changed, 52 insertions, 77 deletions
diff --git a/frontend/src/components/Connection.js b/frontend/src/components/Connection.js index 4bdc8cd..ce2b173 100644 --- a/frontend/src/components/Connection.js +++ b/frontend/src/components/Connection.js @@ -1,24 +1,13 @@ import React, {Component} from 'react'; import './Connection.scss'; -import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; -import { - faCloudDownloadAlt, - faCloudUploadAlt, - faComment, - faEyeSlash, - faHourglassHalf, - faLaptop, - faLink, - faServer, - faThumbtack, -} from '@fortawesome/free-solid-svg-icons' +import {Button, OverlayTrigger, Tooltip} from "react-bootstrap"; class Connection extends Component { render() { let conn = this.props.data - let serviceName = "assign" - let serviceColor = "#fff" - if (conn.service != null) { + let serviceName = "/dev/null" + let serviceColor = "#0F192E" + if (conn.service.port !== 0) { serviceName = conn.service.name serviceColor = conn.service.color } @@ -27,41 +16,40 @@ class Connection extends Component { let duration = ((closedAt - startedAt) / 1000).toFixed(3) let timeInfo = `Started at ${startedAt}\nClosed at ${closedAt}\nProcessed at ${new Date(conn.processed_at)}` + let classes = "connection" + if (this.props.selected) { + classes += " connection-selected" + } + if (conn.marked){ + classes += " connection-marked" + } return ( - <tr className={conn.marked ? "connection connection-marked" : "connection"}> - <div className="connection-header"> + <tr className={classes}> + <td> <span className="connection-service"> - <button className="btn" style={{ + <Button size="sm" style={{ "backgroundColor": serviceColor - }}>{serviceName}</button> - </span> - <span className="connection-src"> - <FontAwesomeIcon icon={faLaptop}/> - <span className="connection-ip-port">{conn.ip_src}:{conn.port_src}</span> - </span> - <span className="connection-separator">{"->"}</span> - <span className="connection-dst"> - <FontAwesomeIcon icon={faServer}/> - <span className="connection-ip-port">{conn.ip_dst}:{conn.port_dst}</span> + }}>{serviceName}</Button> </span> - - <span className="connection-duration" data-toggle="tooltip" data-placement="top" title={timeInfo}> - <FontAwesomeIcon icon={faHourglassHalf}/> - <span className="connection-seconds">{duration}s</span> - </span> - <span className="connection-bytes"> - <FontAwesomeIcon icon={faCloudDownloadAlt}/> - <span className="connection-bytes-count">{conn.client_bytes}</span> - <FontAwesomeIcon icon={faCloudUploadAlt}/> - <span className="connection-bytes-count">{conn.server_bytes}</span> - </span> - <span className="connection-hide"><FontAwesomeIcon icon={faEyeSlash}/></span> - <span className="connection-mark"><FontAwesomeIcon icon={faThumbtack}/></span> - <span className="connection-comment"><FontAwesomeIcon icon={faComment}/></span> - <span className="connection-link"><FontAwesomeIcon icon={faLink}/></span> - </div> - + </td> + <td className="clickable" onClick={() => this.props.onSelected()}>{conn.ip_src}</td> + <td className="clickable" onClick={() => this.props.onSelected()}>{conn.port_src}</td> + <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>}>*/} + <span className="test-tooltip">{duration}s</span> + {/*</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> + </td> </tr> ); diff --git a/frontend/src/components/Connection.scss b/frontend/src/components/Connection.scss index 8910cb4..d27ebc8 100644 --- a/frontend/src/components/Connection.scss +++ b/frontend/src/components/Connection.scss @@ -2,52 +2,41 @@ .connection { background-color: $color-primary-0; - margin-bottom: 5px; + border-top: 3px solid $color-primary-3; + border-bottom: 3px solid $color-primary-3; + td { + vertical-align: middle; + } &.connection-marked { border-right: 5px solid $color-secondary-2; } .connection-service { - padding: 0 12px 0 0; - .btn { - font-size: 12px; - width: 120px; + width: 100%; } - } - - .connection-separator { - margin: 0 10px; - } - - .connection-duration { - margin-left: 15px; - //.connection-seconds { - // width: 75px; - // display: inline-block; - // text-align: right; - //} - } - - .connection-bytes { - margin-left: 10px; - margin-right: 10px; - - .connection-bytes-count { - margin-right: 5px; + .btn:hover { + background-color: $color-primary-1 !important; + color: $color-primary-4; } } - .connection-hide, .connection-mark, .connection-comment, .connection-link { - margin-left: 5px; + .connection-icon { + font-weight: 600; + font-size: 18px; + margin-right: 6px; + cursor: pointer; } + &:hover { + background-color: $color-primary-2; + } - svg { - margin-right: 6px; + &.connection-selected { + background-color: $color-primary-2; } } diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js index 061282c..bd35b5c 100644 --- a/frontend/src/components/ConnectionContent.js +++ b/frontend/src/components/ConnectionContent.js @@ -11,8 +11,6 @@ class ConnectionContent extends Component { render() { let content = this.props.connectionPayload - console.log(content) - if (content === undefined) { return <div>nope</div> } |