Initial UI dashboard added for visibility

- Add foundation, jquery and jquery-ui open source js/css
packages for skin, layout and AJAX
- Add plotly and candela js open source graphing packages
- Build core visibility view and provide toplevel templates,
headers, menu navigation, etc.
- Update collector/visibility APIs to align to latest Spark
analytics and UI requirements
- Refresh page elements at 5 second interval.
- Visibility controls to stop continual page refresh and clear
visibility.
- Multi-select and update service set to analyze.
- System count updates for tracing, spans, metrics schemas.
- Min/max/avg response times per service (aggregate) table.
- Graphs for: per service request counts, user-agent percentages,
per service/URL counts, per URL/status code counts, per URL counts
- Tabs for distinct URLs, status codes, user-agents, upstream cluster,
operation names, nodeids (service names)
- Table for metrics counters specified in visibility configuration.
- Metrics over time scatter plots for tracked metrics.

Change-Id: Ie3ea12fd32e0274ac52f78becc4a56c4c4134660
Signed-off-by: earrage <eddie.arrage@huawei.com>

1 files changed, 30 insertions, 0 deletions

diff --git a/clover/controller/control/templates/http_details.html b/clover/controller/control/templates/http_details.html
new file mode 100644
index 0000000..79145b4
--- /dev/null
+++ b/clover/controller/control/templates/http_details.html
@@ -0,0 +1,30 @@
+<h4>HTTP Details</h4>
+<ul class="tabs" data-tabs id="example-tabs">
+    <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">User-Agents</a></li>
+    <li class="tabs-title"><a href="#panel2">Request URLs</a></li>
+    <li class="tabs-title"><a href="#panel3">Status Codes</a></li>
+</ul>
+<div class="tabs-content" data-tabs-content="example-tabs">
+    <div class="tabs-panel is-active" id="panel1">
+            <div class="user_agents">
+            {% for ua in user_agents %}
+                {{ ua }}<br>
+            {% endfor %}
+            </div>
+    </div>
+    <div class="tabs-panel" id="panel2">
+            <div class="request_urls">
+            {% for url in request_urls %}
+                {{ url }}<br>
+            {% endfor %}
+            </div>
+    </div>
+    <div class="tabs-panel" id="panel3">
+            <div class="status_codes">
+            {% for code in status_codes %}
+                {{ code }}<br>
+            {% endfor %}
+            </div>
+    </div>
+</div>
+