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, 33 insertions, 0 deletions

diff --git a/clover/controller/control/templates/tracing_names.html b/clover/controller/control/templates/tracing_names.html
new file mode 100644
index 0000000..b85e9cb
--- /dev/null
+++ b/clover/controller/control/templates/tracing_names.html
@@ -0,0 +1,33 @@
+<h4>Tracing Name Parameters</h4>
+<ul class="accordion" data-accordion data-multi-expand="true">
+    <li class="accordion-item is-active" data-accordion-item>
+        <a class="accordion-title">Operation Names</a>
+        <div class="accordion-content" data-tab-content>
+            <div class="op_names">
+                {% for op in op_names %}
+                    {{ op }}<br>
+                {% endfor %}
+            </div>
+        </div>
+    </li>
+    <li class="accordion-item" data-accordion-item>
+        <a class="accordion-title">Node IDs</a>
+        <div class="accordion-content" data-tab-content>
+            <div class="node_ids">
+                {% for node in node_ids %}
+                    {{ node }}<br>
+                {% endfor %}
+            </div>
+        </div>
+    </li>
+    <li class="accordion-item" data-accordion-item>
+        <a class="accordion-title">Upstream Cluster</a>
+        <div class="accordion-content" data-tab-content>
+            <div class="upstream_clusters">
+                {% for up in upstream_cluster %}
+                    {{ up }}<br>
+                {% endfor %}
+            </div>
+        </div>
+    </li>
+</ul>