fixing some UI silent errors

quokka-ui/src/components/Devices.js

@@ -26,7 +26,7 @@ class Devices extends Component {
             configDiff: {current: {}, old: {}},
             openTraceRouteDialog: false,
             target: '',
-            traceRouteResults: '',
+            traceRouteResults: {traceroute_output: ''},
             token: '',
         };
     }
@@ -71,7 +71,7 @@ class Devices extends Component {
 
     initiateTraceRoute( target ) {
 
-        this.setState({traceRouteResults: {result: "initiating trace route ..."}})
+        this.setState({traceRouteResults: {result: "initiating trace route ...", traceroute_output: ""}})
         let requestUrl = process.env.REACT_APP_QUOKKA_HOST + '/ui/traceroute?target=' + target
         const requestOptions = { method: 'POST'}
         fetch(requestUrl, requestOptions)
@@ -85,7 +85,7 @@ class Devices extends Component {
     }
 
     fetchTraceRouteResults( target ) {
-        this.setState({extendedPortScanResults: {result: "retrieving scan results ..."}})
+        this.setState({traceRouteResults: {result: "fetching route results ...", traceroute_output: ""}})
         let requestUrl = process.env.REACT_APP_QUOKKA_HOST + '/ui/traceroute?target=' + target + '&token=' + this.state.token
         const requestOptions = { method: 'GET'}
         fetch(requestUrl, requestOptions)
@@ -214,7 +214,7 @@ class Devices extends Component {
                         },
                         {
                             icon: AccountTreeTwoToneIcon,
-                            tooltip: 'Trace-route to service',
+                            tooltip: 'Trace-route to device',
                             onClick: (event, rowData) => {
                                 this.renderTraceRouteDialog(rowData.hostname)
                             }

quokka-ui/src/components/Hosts.js

@@ -1,13 +1,12 @@
 import React, {Component} from 'react';
 import Button from '@material-ui/core/Button'
-import CircularProgress from "@material-ui/core/CircularProgress";
 import Grid from "@material-ui/core/Grid";
 import 'typeface-roboto'
-import Backdrop from "@material-ui/core/Backdrop";
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
 import CancelIcon from '@material-ui/icons/Cancel';
 import {green, red} from '@material-ui/core/colors';
 import MaterialTable from "material-table";
+import AccountTreeTwoToneIcon from '@material-ui/icons/AccountTreeTwoTone'
 import Dialog from '@material-ui/core/Dialog'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import DialogActions from "@material-ui/core/DialogActions";
@@ -29,6 +28,9 @@ class Hosts extends Component {
             portScanResults: '',
             extendedPortScanResults: '',
             token: '',
+            openTraceRouteDialog: false,
+            target: '',
+            traceRouteResults: {traceroute_output: ''},
         };
     }
 
@@ -98,6 +100,35 @@ class Hosts extends Component {
 
     }
 
+    initiateTraceRoute( target ) {
+
+        this.setState({traceRouteResults: {result: "initiating trace route ...", traceroute_output: ""}})
+        let requestUrl = process.env.REACT_APP_QUOKKA_HOST + '/ui/traceroute?target=' + target
+        const requestOptions = { method: 'POST'}
+        fetch(requestUrl, requestOptions)
+            .then(res => res.json())
+            .then((data) => {
+                this.setState({token: data.token})
+                this.fetchTraceRouteResults(target)
+                console.log(this.state.traceRouteResults)
+            })
+            .catch(console.log)
+    }
+
+    fetchTraceRouteResults( target ) {
+        this.setState({traceRouteResults: {result: "fetching route results ...", traceroute_output: ""}})
+        let requestUrl = process.env.REACT_APP_QUOKKA_HOST + '/ui/traceroute?target=' + target + '&token=' + this.state.token
+        const requestOptions = { method: 'GET'}
+        fetch(requestUrl, requestOptions)
+            .then(res => res.json())
+            .then((data) => {
+                this.setState({traceRouteResults: data})
+                console.log(this.state.traceRouteResults)
+            })
+            .catch(console.log)
+
+    }
+
     componentDidMount() {
         this.fetchHosts()
         this.interval = setInterval(() => this.countdown(), 1000)
@@ -123,6 +154,10 @@ class Hosts extends Component {
         parent.setState({openExtendedPortScanDialog: false})
     }
 
+    handleCloseTraceRouteDialog(parent) {
+        parent.setState({openTraceRouteDialog: false})
+    }
+
     renderPortScanDialog(hostId, ip) {
         this.fetchPortScan(hostId)
         this.setState({openPortScanDialog: true, portScanHost: ip})
@@ -133,6 +168,11 @@ class Hosts extends Component {
         this.setState({openExtendedPortScanDialog: true, portScanHost: ip})
     }
 
+    renderTraceRouteDialog(target) {
+        this.initiateTraceRoute(target)
+        this.setState({openTraceRouteDialog: true, target: target})
+    }
+
 
     render() {
 
@@ -213,8 +253,14 @@ class Hosts extends Component {
                             onClick: (event, rowData) => {
                                 this.renderExtendedPortScanDialog(rowData.id, rowData.ip_address)
                             }
-                        }
-
+                        },
+                        {
+                            icon: AccountTreeTwoToneIcon,
+                            tooltip: 'Trace-route to host',
+                            onClick: (event, rowData) => {
+                                this.renderTraceRouteDialog(rowData.name)
+                            }
+                        },
                     ]}
 
                 />
@@ -258,6 +304,29 @@ class Hosts extends Component {
                         </Button>
                     </DialogActions>
                 </Dialog>
+                <Dialog
+                    open={this.state.openTraceRouteDialog}
+                    maxWidth="lg"
+                >
+                    <DialogTitle>Trace Route Results: {this.state.target}</DialogTitle>
+                    <DialogContent>
+                        <b>Output from trace route:</b><br />
+                        Result: {this.state.traceRouteResults.result}<br />
+                        Trace route results:
+                        <img id="traceroute"
+                             src={"data:image/png;base64," + this.state.traceRouteResults.traceroute_output}
+                             alt="">
+                        </img>
+                        <br /><br />
+                        <b>NOTE:</b><br />
+                        Depending on the target, trace route may take up to a few minutes to complete
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={() => this.handleCloseTraceRouteDialog(this)}>
+                            Close
+                        </Button>
+                    </DialogActions>
+                </Dialog>
             </div>
         );
     }

quokka-ui/src/components/Services.js

@@ -22,7 +22,7 @@ class Services extends Component {
             countdownValue: process.env.REACT_APP_REFRESH_RATE,
             openTraceRouteDialog: false,
             target: '',
-            traceRouteResults: '',
+            traceRouteResults: {traceroute_output: ''},
             token: '',
         };
     }
@@ -52,7 +52,7 @@ class Services extends Component {
 
     initiateTraceRoute( target ) {
 
-        this.setState({traceRouteResults: {result: "initiating trace route ..."}})
+        this.setState({traceRouteResults: {result: "initiating trace route ...", traceroute_output: ""}})
         let requestUrl = process.env.REACT_APP_QUOKKA_HOST + '/ui/traceroute?target=' + target
         const requestOptions = { method: 'POST'}
         fetch(requestUrl, requestOptions)
@@ -66,7 +66,7 @@ class Services extends Component {
     }
 
     fetchTraceRouteResults( target ) {
-        this.setState({extendedPortScanResults: {result: "retrieving scan results ..."}})
+        this.setState({traceRouteResults: {result: "fetching route results ...", traceroute_output: ""}})
         let requestUrl = process.env.REACT_APP_QUOKKA_HOST + '/ui/traceroute?target=' + target + '&token=' + this.state.token
         const requestOptions = { method: 'GET'}
         fetch(requestUrl, requestOptions)

quokka/controller/ServiceMonitorTask.py

@@ -18,6 +18,7 @@ def get_avail_and_rsp_time(service):
 
     time_start = time.time()
     if service["type"] == "https" or service["type"] == "http":
+
         try:
             response = requests.get(service["target"])
         except BaseException as e:

quokka/controller/TracerouteManager.py

@@ -3,6 +3,8 @@
 import yaml
 from quokka.controller.utils import log_console
 
+from urllib.parse import urlparse
+
 
 class TracerouteManager:
 
@@ -38,6 +40,11 @@ def find_monitor(target=None):
     @staticmethod
     def initiate_traceroute(target, token):
 
+        # Target could be a URL; if so, use urlparse to extract the network location (hostname)
+        if target.startswith("http://") or target.startswith("https://"):
+            parsed_target = urlparse(target)
+            target = parsed_target.netloc
+
         monitor = TracerouteManager.find_monitor(target)
         channel = TracerouteManager.get_channel(monitor)
 

quokka/data/cisco.nxos.standard.config.diff.NXOS-sandbox (SSH)

@@ -1,7 +1,6 @@
 cfs eth distribute
 feature vpc
 feature telemetry
-vlan 1-9,100-105
 vpc domain 10
 telemetry
   sensor-group 1

quokka/models/apis.py

@@ -833,7 +833,8 @@ def get_traceroute(target, token):
     start_time = datetime.now()
     while (datetime.now() - start_time).total_seconds() < max_wait_time:
 
-        search = {"target": target, "token": token}
+        # search = {"target": target, "token": token}  # 'target' may have been modified
+        search = {"token": token}
         traceroute_obj = db.session.query(Traceroute).filter_by(**search).one_or_none()
 
         if not traceroute_obj:

quokka/views/ui_views.py

@@ -329,7 +329,7 @@ def traceroute():
         }
 
     elif request.method == "POST":
-        token = str(datetime.now())[:-3]
+        token = str(datetime.now())
         TracerouteManager.initiate_traceroute(target, token)
         return {"result": f"Traceroute initiated for target: {target}",
                 "token": token}

quokka/workers/TracerouteThread.py

@@ -30,7 +30,7 @@ def process_traceroute(self, traceroute):
         with open(tmp_png, 'rb') as png_file:
             traceroute_graph_bytes = base64.b64encode(png_file.read())
 
-        print(f"TracerouteThread: sending traceroute: {traceroute_graph_bytes[:256]}")
+        print(f"TracerouteThread: sending traceroute: {traceroute_graph_bytes[:1024]}")
         status_code = send_traceroute(
             gethostname(),
             self.quokka_ip,
@@ -46,7 +46,10 @@ def run(self):
 
         print(f"TracerouteThread: starting traceroute: target = {self.target}")
 
-        traceroute_output = traceroute(self.target, verbose=0)
-        self.process_traceroute(traceroute_output[0])
+        try:
+            traceroute_output = traceroute(self.target, verbose=0)
+            self.process_traceroute(traceroute_output[0])
+        except BaseException as e:
+            print(f"!!! Caught error attempting to do traceroute: {e}")
 
         print(f"\n\n-----> TracerouteThread: competed traceroute")