Add URL interface

sohamkamani · Sep 21, 2018 · 24a9477 · 24a9477
1 parent 34aa681
commit 24a9477
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 81 deletions.
diff --git a/endpoint.go b/endpoint.go
@@ -38,5 +38,6 @@ func (e *endpoint) getState() State {
 	if err := json.NewDecoder(res.Body).Decode(&state); err != nil {
 		return s.withError(err)
 	}
+	state.Latency = diff
 	return state.withOk()
 }
diff --git a/sample/main.go b/sample/main.go
@@ -1,7 +1,7 @@
 package main
 
 import (
-	"errors"
+	// "errors"
 	"github.com/sohamkamani/detective"
 	"net/http"
 	"time"
@@ -31,7 +31,7 @@ func main() {
 
 	d.Dependency("db").Detect(func() error {
 		time.Sleep(250 * time.Millisecond)
-		return errors.New("failed")
+		return nil //errors.New("failed")
 	})
 	d.Endpoint("http://localhost:8080")
 	go func() {

diff --git a/ui/static/index.html b/ui/static/index.html
@@ -1,82 +1,29 @@
 <!DOCTYPE html>
-<meta charset="utf-8">
-<style>
-        .node circle {
-                fill: #999;
-        }
+<html lang="en">
 
-        .node text {
-                font: 14px sans-serif;
-        }
-
-        .latency {
-                font: 10px sans-serif;
-        }
-
-        .node--internal circle {
-                fill: #555;
-        }
-
-        .inactive circle {
-                fill: tomato;
-        }
-
-        .node--internal text {
-                text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
-        }
-
-        .link {
-                fill: none;
-                stroke: #555;
-                stroke-opacity: 0.4;
-                stroke-width: 1.5px;
-        }
-
-        .link-inactive {
-                stroke: tomato;
-        }
-
-        header {
-                height: 80px;
-        }
-
-        .container {
-                height: calc(100vh - 90px);
-                display: flex;
-        }
-
-        .diagram {
-                height: 100%;
-                width: 1000px;
-        }
-
-        .status-bar {
-                flex: 1;
-        }
-
-        body {
-                margin: 0;
-                padding: 0;
-        }
-
-        h1 {
-                margin: 0;
-                padding: 0;
-        }
-</style>
+<head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>Document</title>
+        <link rel="stylesheet" href="style.css">
+</head>
 
 <body>
         <header>
                 <h1>Detective Dashboard</h1>
         </header>
-        <div class="container">
-                <svg id="diagram" class="diagram"></svg>
-                <div class="status-bar">
-                        <h2>Faulty nodes</h2>
-                        <ul id="faulty-node-list"></ul>
-                </div>
+        <div class="input-container">
+                <h3>Enter detective endpoint URL</h3>
+                <input id="url-input" class="url-input" type="text">
+                <button id="submit">Submit</button>
         </div>
 </body>
-<script src="d3.v4.min.js"></script>
-<script src="script.js">
-</script>
+<script>
+        document.getElementById('submit').addEventListener('click', () => {
+                urlInput = document.getElementById('url-input').value
+                location.href = '/monitor.html?url=' + encodeURIComponent(urlInput)
+        })
+</script>
+
+</html>
diff --git a/ui/static/monitor.html b/ui/static/monitor.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>Document</title>
+        <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+        <header>
+                <h1>Detective Dashboard</h1>
+        </header>
+        <div class="container">
+                <svg id="diagram" class="diagram"></svg>
+                <div class="status-bar">
+                        <h2>Faulty nodes</h2>
+                        <ul id="faulty-node-list"></ul>
+                </div>
+        </div>
+</body>
+<script src="d3.v4.min.js"></script>
+<script src="script.js"></script>
+
+</html>
diff --git a/ui/static/script.js b/ui/static/script.js
@@ -9,6 +9,8 @@ var tree = d3.tree().size([ height, width - 160 ])
 
 var stratify = d3.stratify()
 
+var monitorURL = decodeURIComponent(window.location.search.split('=')[1])
+
 fetch('/getStatus', {
   method: 'POST',
   mode: 'cors',
@@ -20,7 +22,7 @@ fetch('/getStatus', {
   redirect: 'follow',
   referrer: 'no-referrer',
   body: JSON.stringify({
-    url: 'http://localhost:8081/'
+    url: monitorURL
   })
 })
   .then((response) => response.json())
@@ -118,10 +120,18 @@ const refreshFaultyNodeList = (normalizedData) => {
   while (faultyNodeList.firstChild) {
     faultyNodeList.removeChild(faultyNodeList.firstChild)
   }
-  normalizedData.filter((d) => !d.active).forEach((d) => {
-    const li = document.createElement('li')
-    const txt = document.createTextNode(d.name)
-    li.appendChild(txt)
-    faultyNodeList.appendChild(li)
+  const faultyNodes = normalizedData.filter((d) => !d.active)
+  if (faultyNodes.length === 0) {
+    faultyNodeList.appendChild(newLi('<none>'))
+  }
+  faultyNodes.forEach((d) => {
+    faultyNodeList.appendChild(newLi(d.name))
   })
 }
+
+const newLi = (txt) => {
+  const li = document.createElement('li')
+  const txtNode = document.createTextNode(txt)
+  li.appendChild(txtNode)
+  return li
+}
diff --git a/ui/static/style.css b/ui/static/style.css
@@ -0,0 +1,83 @@
+.node circle {
+  fill: #999;
+}
+
+.node text {
+  font: 14px sans-serif;
+}
+
+.latency {
+  font: 10px sans-serif;
+}
+
+.node--internal circle {
+  fill: #555;
+}
+
+.inactive circle {
+  fill: tomato;
+}
+
+.node--internal text {
+  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
+}
+
+.link {
+  fill: none;
+  stroke: #555;
+  stroke-opacity: 0.4;
+  stroke-width: 1.5px;
+}
+
+.link-inactive {
+  stroke: tomato;
+}
+
+header {
+  height: 40px;
+  padding: 15px;
+  margin-bottom: 20px;
+  background-color: #999;
+  text-align: center;
+}
+
+.container {
+  height: calc(100vh - 90px);
+  display: flex;
+  padding: 0 10px;
+}
+
+.input-container {
+  padding: 0 10px;
+}
+
+.url-input {
+  width: 300px;
+}
+
+.diagram {
+  height: 100%;
+  width: 1000px;
+}
+
+.status-bar {
+  flex: 1;
+  padding-left: 10px;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+h1,
+h2,
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+ul {
+  margin-left: 20px;
+}