From 8db3b3b43bec6170a7f1db21772c48c5e270c97b Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Thu, 30 Apr 2020 20:16:13 +0200
Subject: Add services dialog

---
 frontend/src/views/Connections.js | 61 +++++++++------------------------------
 1 file changed, 14 insertions(+), 47 deletions(-)

(limited to 'frontend/src/views/Connections.js')

diff --git a/frontend/src/views/Connections.js b/frontend/src/views/Connections.js
index 5876a40..fa7798e 100644
--- a/frontend/src/views/Connections.js
+++ b/frontend/src/views/Connections.js
@@ -2,8 +2,8 @@ import React, {Component} from 'react';
 import './Connections.scss';
 import axios from 'axios'
 import Connection from "../components/Connection";
-import {Link} from "react-router-dom";
 import Table from 'react-bootstrap/Table';
+import {Redirect} from 'react-router';
 
 class Connections extends Component {
     constructor(props) {
@@ -19,34 +19,16 @@ class Connections extends Component {
     }
 
     render() {
-        let connection = {
-            "id": "5dd95ff0fe7ae01ae7f419c2",
-            "ip_src": "10.62.82.1",
-            "ip_dst": "10.62.82.2",
-            "port_src": 59113,
-            "port_dst": 23179,
-            "started_at": "2019-11-23T16:36:00.1Z",
-            "closed_at": "2019-11-23T16:36:00.971Z",
-            "client_bytes": 331,
-            "server_bytes": 85,
-            "client_documents": 1,
-            "server_documents": 1,
-            "processed_at": "2020-04-21T17:10:29.532Z",
-            "matched_rules": [],
-            "hidden": false,
-            "marked": true,
-            "comment": "",
-            "service": {
-                "port": 23179,
-                "name": "kaboom",
-                "color": "#3C6D3C",
-                "notes": "wdddoddddddw"
-            }
+        let redirect = ""
+        if (this.state.selected) {
+            redirect = <Redirect push to={"/connections/" + this.state.selected} />;
         }
 
         return (
+
             <div className="connections">
-                <Table striped hover>
+                <div className="connections-header-padding"/>
+                <Table borderless size="sm">
                     <thead>
                     <tr>
                         <th>service</th>
@@ -61,31 +43,16 @@ class Connections extends Component {
                     </tr>
                     </thead>
                     <tbody>
-                    <tr>
-                        <td>1</td>
-                        <td>Mark</td>
-                        <td>Otto</td>
-                        <td>@mdo</td>
-                    </tr>
-                    <tr>
-                        <td>2</td>
-                        <td>Jacob</td>
-                        <td>Thornton</td>
-                        <td>@fat</td>
-                    </tr>
-                    <tr>
-                        <td>3</td>
-                        <td colSpan="2">Larry the Bird</td>
-                        <td>@twitter</td>
-                    </tr>
+                    {
+                        this.state.connections.map(c =>
+                            <Connection key={c.id} data={c} onSelected={() => this.setState({selected: c.id})}
+                                selected={this.state.selected === c.id}/>
+                        )
+                    }
                     </tbody>
                 </Table>
 
-                {
-                    this.state.connections.map(c =>
-                        <Link to={"/connection/" + c.id}><Connection data={c} /></Link>
-                    )
-                }
+                {redirect}
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2