From 7dff1bd85e7a6816c4a2d50d729f6ac10aea4205 Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Thu, 17 Sep 2015 23:00:38 +0200 Subject: [PATCH] Polished UI for tracer * added logo and favicon * upgraded Bootstrap to v4 * use FontAwesome as icon font * applied weave colors * auto-select first container * mock backend in server.js to serve *.json files for API requests --- experimental/tracer/ui/.gitignore | 4 ++ experimental/tracer/ui/README.md | 10 +++ experimental/tracer/ui/favicon.ico | Bin 0 -> 741 bytes experimental/tracer/ui/index.html | 94 ++++++++++++++++++++++++---- experimental/tracer/ui/logo.svg | 54 ++++++++++++++++ experimental/tracer/ui/package.json | 15 +++++ experimental/tracer/ui/server.js | 25 ++++++++ 7 files changed, 189 insertions(+), 13 deletions(-) create mode 100644 experimental/tracer/ui/.gitignore create mode 100644 experimental/tracer/ui/README.md create mode 100644 experimental/tracer/ui/favicon.ico create mode 100644 experimental/tracer/ui/logo.svg create mode 100644 experimental/tracer/ui/package.json create mode 100644 experimental/tracer/ui/server.js diff --git a/experimental/tracer/ui/.gitignore b/experimental/tracer/ui/.gitignore new file mode 100644 index 000000000..a471811ad --- /dev/null +++ b/experimental/tracer/ui/.gitignore @@ -0,0 +1,4 @@ +container.json +traces.json +node_modules + diff --git a/experimental/tracer/ui/README.md b/experimental/tracer/ui/README.md new file mode 100644 index 000000000..a2dc141ef --- /dev/null +++ b/experimental/tracer/ui/README.md @@ -0,0 +1,10 @@ +Develop UI +########## + +* npm install +* npm start + +`server.js` serves a fake backend. You can add `container.json` and +`traces.json` to this directory to serve them as /traces and /container +respectively. + diff --git a/experimental/tracer/ui/favicon.ico b/experimental/tracer/ui/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..2d15c780889b9db340d2ce1e5690caf0b66851ac GIT binary patch literal 741 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyk|nMYCBgY=CFO}lsSJ)O`AMk? zp1FzXsX?iUDV2pMQ*D5Xjs^IHxc*<-V}JMm|4T>rfB9cm*Y|(-icOn#|NruF{=5JG z!_@!Zz4E^=e^a>o{~YJ}Q@ZtU{ZF;9u z-`~Ig_?vxO)aLAa-kEP?j|7wj~=CRpLQtC%-^`V9xF^4(ayVe`N zYJ4_tZ#(mmr^aq?HDxL;h@Q&s`PKjU`pH{|*xmjv{$X8I?|Epgm_;r3(d3?s`9UH- zI$D~V1v|nwsj|jRF0f})cCq*vW+o?j;_>7UtZokTbT>XU=t*C)n9qM|!|~HXHTha$ z5(l}zc{T5--bF7sCtiM|b#j5afkD&co95ns>*XX8Z||LLEO_Q1N9g}gZHf{H k+xI2J{ugVHXJlh=J9t&!A#mYVV3;#_y85}Sb4q9e0NaU-qW}N^ literal 0 HcmV?d00001 diff --git a/experimental/tracer/ui/index.html b/experimental/tracer/ui/index.html index a2463a987..c9a1aed35 100644 --- a/experimental/tracer/ui/index.html +++ b/experimental/tracer/ui/index.html @@ -3,14 +3,12 @@ Weave Tracer - - - - + + + - @@ -24,6 +22,12 @@ var containers = []; var traces = []; + Handlebars.registerHelper('isSelected', function(input) { + if (currentContainer && input === currentContainer.Id) { + return 'class=selected'; + } + }); + Handlebars.registerHelper('spaces', function(input) { return new Array(input + 1).join("> "); }); @@ -75,6 +79,10 @@ $.each(data, function(i, container) { containersByID[container.Id] = container }); + // auto-select first container + if (containers.length) { + currentContainer = containersByID[containers[0].Id]; + } render(); window.setTimeout(updateContainers, 5 * 1000); }); @@ -113,13 +121,70 @@ }) diff --git a/experimental/tracer/ui/logo.svg b/experimental/tracer/ui/logo.svg new file mode 100644 index 000000000..406732034 --- /dev/null +++ b/experimental/tracer/ui/logo.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/experimental/tracer/ui/package.json b/experimental/tracer/ui/package.json new file mode 100644 index 000000000..d2d91d3ed --- /dev/null +++ b/experimental/tracer/ui/package.json @@ -0,0 +1,15 @@ +{ + "name": "scope-tracer", + "version": "1.0.0", + "description": "", + "main": "server.js", + "scripts": { + "start": "node server.js", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "David Kaltschmidt ", + "license": "UNLICENSED", + "devDependencies": { + "express": "^4.13.3" + } +} diff --git a/experimental/tracer/ui/server.js b/experimental/tracer/ui/server.js new file mode 100644 index 000000000..e56d77342 --- /dev/null +++ b/experimental/tracer/ui/server.js @@ -0,0 +1,25 @@ +var express = require('express') + +var app = express(); + +app.get('/', function(req, res) { + res.sendFile(__dirname + '/index.html'); +}); + +app.get('/container', function(req, res) { + res.sendFile(__dirname + '/container.json'); +}); + +app.get('/traces', function(req, res) { + res.sendFile(__dirname + '/traces.json'); +}); + +app.use(express.static('./')); + +var port = process.env.PORT || 4050; +var server = app.listen(port, function () { + var host = server.address().address; + var port = server.address().port; + + console.log('Scope Tracer UI listening at http://%s:%s', host, port); +});