Add simple-ish CSS and tweak layout
Far from pretty, but it works...
Change-Id: I20ac6cbd1df2cbb31b8bc50e34f6c05302006881
diff --git a/visualisation/visualisation.py b/visualisation/visualisation.py
index 5739ec4..3f0c75c 100644
--- a/visualisation/visualisation.py
+++ b/visualisation/visualisation.py
@@ -98,21 +98,37 @@
page.append('<html>')
page.append('<head>')
page.append('<TITLE>VLANd visualisation</TITLE>')
+ page.append('<link rel="stylesheet" type="text/css" href="style.css">')
page.append('</HEAD>')
page.append('<body>')
- page.append('<h1>VLANd visualisation, version %s</h1>' % self.server.state.version)
-
switches = self.server.state.db.all_switches()
+ vlans = self.server.state.db.all_vlans()
+ page.append('<div class="menu">')
+ if len(switches) > 0:
+ page.append('<h2>Menu</h2>')
+ page.append('<p>VLANs: %d</p>' % len(vlans))
+ page.append('<ul>')
+ for vlan in vlans:
+ page.append('<li><a href="./#vlan%d">VLAN id %d, tag %d<br>(%s)</a>' % (vlan.vlan_id, vlan.vlan_id, vlan.tag, vlan.name))
+ page.append('</ul>')
+ page.append('<div class="date"><p>Current time: %s</p>' % datetime.datetime.utcnow().strftime("%Y-%m-%d %H:%M:%S UTC"))
+ page.append('<p>version %s</p>' % self.server.state.version)
+ page.append('</div>')
+ page.append('</div>')
+
+ page.append('<div class="content">')
+ page.append('<h1>VLANd visualisation</h1>')
+
if len(switches) == 0:
page.append('<p>No switches found in the database, nothing to show...</p>')
else:
- vlans = self.server.state.db.all_vlans()
- page.append('<h2>VLANs currently in use: %d</h2>' % len(vlans))
for vlan in vlans:
+ page.append('<a name="vlan%d"></a>' % vlan.vlan_id)
page.append('<h3>VLAN id %d, tag %d, name %s</h3>' % (vlan.vlan_id, vlan.tag, vlan.name))
page.append('<p><a href="/images/vlan/%d.png"><img src="/images/vlan/%d.png" alt="VLAN %d diagram"></a></p>' % (vlan.vlan_id,vlan.vlan_id,vlan.vlan_id))
+ page.append('<hr>')
- page.append('Current time: %s' % datetime.datetime.utcnow().strftime("%Y-%m-%d %H:%M:%S UTC"))
+ page.append('</div>')
page.append('</body>')
self.wfile.write('\r\n'.join(page))
@@ -121,7 +137,99 @@
self.send_response(200)
self.wfile.write('Content-type: text/css\r\n')
self.end_headers()
- self.wfile.write('style.css')
+ page = []
+ page.append("body {")
+ page.append(" background: white;")
+ page.append(" color: black;")
+ page.append(" font-size: 12pt;")
+ page.append("}")
+ page.append("")
+ page.append(".menu {")
+ page.append(" position:fixed;")
+ page.append(" float:left;")
+ page.append(" font-family: arial, Helvetica, sans-serif;")
+ page.append(" width:20%;")
+ page.append(" height:100%;")
+ page.append(" font-size: 10pt;")
+ page.append(" padding-top: 10px;")
+ page.append("}")
+ page.append("")
+ page.append(".content {")
+ page.append(" padding-top: 10px;")
+ page.append(" width:80%;")
+ page.append(" max-width:80%;")
+ page.append(" margin-left: 21%;")
+ page.append(" margin-top: 50px;")
+ page.append(" height:100%;")
+ page.append("}")
+ page.append("")
+ page.append(".footer {")
+ page.append(" vertical-align: bottom;")
+ page.append(" text-align: left;")
+ page.append("}")
+ page.append("")
+ page.append(".caption {")
+ page.append(" padding-top: 1px;")
+ page.append(" padding-left: 10%;")
+ page.append(" padding-right: 10%;")
+ page.append(" font-size: 8pt;")
+ page.append(" font-style: italic;")
+ page.append(" text-align: center;")
+ page.append("}")
+ page.append("")
+ page.append("td.headline {")
+ page.append(" font-family: arial, Helvetica, sans-serif;")
+ page.append(" font-size: 20pt;")
+ page.append("}")
+ page.append("h1,h2,h3,h4,h5 {")
+ page.append(" font-family: arial, Helvetica, sans-serif;")
+ page.append(" padding-right:3pt;")
+ page.append(" padding-top:2pt;")
+ page.append(" padding-bottom:2pt;")
+ page.append(" margin-top:8pt;")
+ page.append(" margin-bottom:8pt;")
+ page.append(" border-style:none;")
+ page.append(" border-width:thin;")
+ page.append("}")
+ page.append("")
+ page.append("A:link { text-decoration: none; }")
+ page.append("A:visited { text-decoration: none}")
+ page.append("")
+ page.append("h1 { font-size: 18pt; }")
+ page.append("h2 { font-size: 14pt; }")
+ page.append("h3 { font-size: 12pt; }")
+ page.append("h4 { font-size: 10pt; }")
+ page.append("h5 { font-size: 8pt; }")
+ page.append("dl,ul { margin-top: 1pt; text-indent: 0 }")
+ page.append("ol { margin-top: 1pt; text-indent: 0 }")
+ page.append("")
+ page.append("tt,pre {")
+ page.append(" font-family: Lucida Console,Courier New,Courier,monotype;")
+ page.append(" font-size: 10pt;")
+ page.append("}")
+ page.append("")
+ page.append("pre.code {")
+ page.append(" font-family: Lucida Console,Courier New,Courier,monotype;")
+ page.append(" margin-top: 8pt;")
+ page.append(" margin-bottom: 8pt;")
+ page.append(" background-color: #FFFFEE;")
+ page.append(" white-space:pre;")
+ page.append(" border-style:solid;")
+ page.append(" border-width:1pt;")
+ page.append(" border-color:#999999;")
+ page.append(" color:#111111;")
+ page.append(" padding:5px;")
+ page.append("}")
+ page.append("")
+ page.append("div.date {")
+ page.append(" font-size: 8pt;")
+ page.append("}")
+ page.append("")
+ page.append("div.sig {")
+ page.append(" font-size: 8pt;")
+ page.append("}")
+ page.append("")
+ self.wfile.write('\r\n'.join(page))
# Generate a PNG showing the layout of switches/port/trunks for a
# specific VLAN