From 8d07bfe5f17534b7301a064aeaf8ed8071f10a40 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Wed, 23 Sep 2020 20:19:09 +0200
Subject: Frontend refactor: checkpoint

---
 frontend/src/components/panels/PcapPane.js   | 121 +++++++++++++++++++++++++++
 frontend/src/components/panels/PcapPane.scss |  55 ++++++++++++
 2 files changed, 176 insertions(+)
 create mode 100644 frontend/src/components/panels/PcapPane.js
 create mode 100644 frontend/src/components/panels/PcapPane.scss

(limited to 'frontend/src/components/panels')

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
-- 
cgit v1.2.3-70-g09d2