Review Comments.

istio · Feb 8, 2018 · b93ed7d · b93ed7d
1 parent f2963f0
commit b93ed7d
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 6 deletions.
diff --git a/addons/servicegraph/README.md b/addons/servicegraph/README.md
@@ -11,8 +11,7 @@ deploying and using Servicegraph is
 ## Visualizations
 
 - `/force/forcegraph.html` is an interactive
-  [D3.js](https://d3js.org/) visualization. This graph only displays
-  services that are currently receiving traffic.
+  [D3.js](https://d3js.org/) visualization.
 
 - `/dotviz` is a static [Graphviz](https://www.graphviz.org/)
   visualization.
@@ -29,14 +28,15 @@ deploying and using Servicegraph is
 
 ## Query Parameters
 
-All endpoints except for `/force/forcegraph.html` take these query parameters:
+All endpoints take these query parameters:
 
 - `time_horizon` controls the timespan to consider for graph
-  generation.
+  generation. Format is a number plus a time unit. Example `15s` or
+  `1m`. Default is `5m`.
 
 - `filter_empty=true` will restrict the nodes and edges shown to only
   those that reflect non-zero traffic levels during the specified
-  `time_horizon`.
+  `time_horizon`. Deafult is `false`.
 
 # Demosvc service
 Defined in `servicegraph/cmd/demosvc`, this provides a simple HTTP

diff --git a/addons/servicegraph/force/forcegraph.css b/addons/servicegraph/force/forcegraph.css
@@ -77,3 +77,7 @@ table, th, td {
 .conn-table {
     margin: 20px;
 }
+
+div.float {
+    position:absolute;
+}
diff --git a/addons/servicegraph/force/forcegraph.html b/addons/servicegraph/force/forcegraph.html
@@ -5,6 +5,10 @@
   <link rel="stylesheet" href="forcegraph.css">
 </head>
 <body>
+  <div id="title" class="float">
+    <h2>Istio Service Graph</h2>
+    Click on a service for traffic information
+  </div>
   <div id="total">
     <div id="graph"></div>
     <div id="info"></div>

diff --git a/addons/servicegraph/force/forcegraph.js b/addons/servicegraph/force/forcegraph.js
@@ -97,11 +97,33 @@ d3cola.on("tick", function () {
 
 });
 
+var endpoint = "/d3graph";
+
+(function(){
+    var query={};
+    var i=0;
+    var tele;
+    var search_values=location.search.replace('\?','').split('&');
+    for(i=0;i<search_values.length;i++){
+        telem=search_values[i].split('=');
+        query[telem[0]]=telem[1];
+    }
+
+    if (query.time_horizon != undefined && query.filter_empty != undefined) {
+        endpoint = endpoint + "?time_horizon=" + query.time_horizon +
+            "&filter_empty=" + query.filter_empty;
+    } else if (query.time_horizon != undefined) {
+        endpoint = endpoint + "?time_horizon=" + query.time_horizon;
+    } else if (query.filter_empty != undefined) {
+        endpoint = endpoint + "?filter_empty=" + query.filter_empty;
+    }
+}());
+
 refresh()
 d3.interval(refresh, 5000)
 
 function refresh() {
-    d3.json("/d3graph?time_horizon=10s&filter_empty=true", updateData);
+    d3.json(endpoint, updateData);
     return true;
 }