diff options
Diffstat (limited to 'frontend/src/components/panels')
| -rw-r--r-- | frontend/src/components/panels/PcapPane.js | 121 | ||||
| -rw-r--r-- | frontend/src/components/panels/PcapPane.scss | 55 |
2 files changed, 176 insertions, 0 deletions
diff --git a/frontend/src/components/panels/PcapPane.js b/frontend/src/components/panels/PcapPane.js new file mode 100644 index 0000000..817c7b5 --- /dev/null +++ b/frontend/src/components/panels/PcapPane.js @@ -0,0 +1,121 @@ +import React, {Component} from 'react'; +import './PcapPane.scss'; +import Table from "react-bootstrap/Table"; +import backend from "../../backend"; +import {formatSize, timestampToTime2} from "../../utils"; +import {Container, Row, Col, Form} from "react-bootstrap"; +import StringField from "../fields/StringField"; + +class PcapPane extends Component { + + constructor(props) { + super(props); + + this.state = { + sessions: [], + }; + + this.loadSessions = this.loadSessions.bind(this); + } + + componentDidMount() { + this.loadSessions(); + } + + loadSessions() { + backend.get("/api/pcap/sessions").then(res => this.setState({sessions: res})); + } + + render() { + let sessions = this.state.sessions.map(s => + <tr className="table-row"> + <td>{s["id"].substring(0, 8)}</td> + <td>{timestampToTime2(s["started_at"])}</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> + ); + + return ( + <div className="pane-container"> + <div className="pane-section"> + <div className="section-header"> + <span className="api-request">GET /api/pcap/sessions</span> + <span className="api-response">200 OK</span> + </div> + + <div className="section-table"> + <Table borderless size="sm"> + <thead> + <tr> + <th>id</th> + <th>started_at</th> + <th>duration</th> + <th>size</th> + <th>processed_packets</th> + <th>invalid_packets</th> + <th>packets_per_service</th> + <th>actions</th> + </tr> + </thead> + <tbody> + {sessions} + </tbody> + </Table> + </div> + </div> + + <div className="pane-section"> + <Container className="p-0"> + <Row> + <Col> + <div className="section-header"> + <span className="api-request">POST /api/pcap/upload</span> + <span className="api-response"></span> + </div> + + <div className="section-content"> + <Form.File className="custom-file" onChange={this.onFileChange} + label=".pcap/.pcapng" id="custom-file" + custom={true} + /> + + + <br/><br/><br/><br/> + <StringField /> + + </div> + </Col> + + <Col> + <div className="section-header"> + <span className="api-request">POST /api/pcap/file</span> + <span className="api-response"></span> + </div> + + <div className="section-content"> + <Form.Control type="text" id="pcap-upload" className="custom-file" + onChange={this.onLocalFileChange} placeholder="local .pcap/.pcapng" + custom + /> + </div> + </Col> + </Row> + </Container> + + + + + </div> + + </div> + + ); + } +} + +export default PcapPane; diff --git a/frontend/src/components/panels/PcapPane.scss b/frontend/src/components/panels/PcapPane.scss new file mode 100644 index 0000000..3df87f5 --- /dev/null +++ b/frontend/src/components/panels/PcapPane.scss @@ -0,0 +1,55 @@ +@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; + } + + + +}
\ No newline at end of file |