From f5667952a253e7312d1854ab8db15f6dd38f046d Mon Sep 17 00:00:00 2001 From: Matthew Rocklin Date: Tue, 6 Jun 2017 16:01:44 -0400 Subject: [PATCH 1/4] Add navbar to bokeh pages This adds a basic navigation bar to the bokeh template This still needs work. In particular we need to populate the navbar with the correct links for the different pages. --- distributed/bokeh/template.html | 71 +++++++++++++++++---------------- 1 file changed, 37 insertions(+), 34 deletions(-) diff --git a/distributed/bokeh/template.html b/distributed/bokeh/template.html index f85d39a0a1..b8a0e02e4e 100644 --- a/distributed/bokeh/template.html +++ b/distributed/bokeh/template.html @@ -15,7 +15,7 @@ body { min-height: 100%; margin: 0 4%; - padding: 20px; + padding: 0px 20px; border-left: 1px solid #F0F0F0; border-right: 1px solid #F0F0F0; background: #FFF; @@ -44,30 +44,38 @@ content: "."; font-size: 0; } - .header { - width: 100; - clear: both; - overflow: hidden; + .navbar img { + height: 50px; + float: right; + margin-bottom: 0px; + padding: 0px 24px; } - .header h1 { - font-family: 'Source Sans Pro', sans-serif; - font-size: 18px; - text-transform: uppercase; - color: #2e484c; - margin: 1em 0 0 0; - float: left; + .navbar ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: #EEE; } - .header p { - font-family: 'Source Sans Pro', sans-serif; - font-size: 18px; - float: left; - max-width: 60%; + + .navbar li { + float: left; + font-size: 18px; + transition: .3s background-color; } - .header img { - height: 50px; - float: right; - margin-bottom: 20px; + + .navbar li a { + display: block; + color: black; + text-align: center; + padding: 16px 16px; + text-decoration: none; } + + .navbar li:hover { + background-color: #eaaa6d; + } + a { color: #1f5396; text-decoration: none; @@ -80,25 +88,20 @@ a:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; - } - .bk-root .bk-toolbar-box .bk-toolbar-right { + } .bk-root .bk-toolbar-box .bk-toolbar-right { top: 4px; right: 4px; } -
- -

- Dask - — - Algorithm Docs - — - Scheduler Docs - — - Diagnostic Pages -

+
+
{{ plot_div }} From 8b7822b361ddccde92348d2a3703e238e2a434c6 Mon Sep 17 00:00:00 2001 From: Matthew Rocklin Date: Tue, 6 Jun 2017 18:22:00 -0400 Subject: [PATCH 2/4] Use template variables to populate pages --- distributed/bokeh/scheduler.py | 8 ++++++++ distributed/bokeh/template.html | 6 +++--- distributed/bokeh/worker.py | 5 +++++ 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/distributed/bokeh/scheduler.py b/distributed/bokeh/scheduler.py index c252ffc288..ef7b2c1936 100644 --- a/distributed/bokeh/scheduler.py +++ b/distributed/bokeh/scheduler.py @@ -53,6 +53,8 @@ template = jinja2.Template(template_source) +template_variables = {'pages': ['status', 'workers', 'tasks', 'system', 'counters']} + def update(source, data): """ Update source with data @@ -885,6 +887,7 @@ def systemmonitor_doc(scheduler, doc): doc.add_root(column(table.root, sysmon.root, sizing_mode='scale_width')) doc.template = template + doc.template_variables.update(template_variables) def stealing_doc(scheduler, doc): @@ -905,6 +908,7 @@ def stealing_doc(scheduler, doc): sizing_mode='scale_width')) doc.template = template + doc.template_variables.update(template_variables) def events_doc(scheduler, doc): @@ -915,6 +919,7 @@ def events_doc(scheduler, doc): doc.title = "Dask Scheduler Events" doc.add_root(column(events.root, sizing_mode='scale_width')) doc.template = template + doc.template_variables.update(template_variables) def workers_doc(scheduler, doc): @@ -925,6 +930,7 @@ def workers_doc(scheduler, doc): doc.title = "Dask Workers" doc.add_root(table.root) doc.template = template + doc.template_variables.update(template_variables) def tasks_doc(scheduler, doc): @@ -936,6 +942,7 @@ def tasks_doc(scheduler, doc): doc.title = "Dask Task Stream" doc.add_root(ts.root) doc.template = template + doc.template_variables.update(template_variables) def status_doc(scheduler, doc): @@ -970,6 +977,7 @@ def status_doc(scheduler, doc): task_progress.root, sizing_mode='scale_width')) doc.template = template + doc.template_variables.update(template_variables) class BokehScheduler(BokehServer): diff --git a/distributed/bokeh/template.html b/distributed/bokeh/template.html index b8a0e02e4e..ba2e6becf3 100644 --- a/distributed/bokeh/template.html +++ b/distributed/bokeh/template.html @@ -98,9 +98,9 @@
diff --git a/distributed/bokeh/worker.py b/distributed/bokeh/worker.py index b8e35c097a..d08f5084a0 100644 --- a/distributed/bokeh/worker.py +++ b/distributed/bokeh/worker.py @@ -32,6 +32,7 @@ template_source = f.read() template = jinja2.Template(template_source) +template_variables = {'pages': ['main', 'system', 'crossfilter', 'counters']} class StateTable(DashboardComponent): @@ -554,6 +555,7 @@ def main_doc(worker, doc): communicating_stream.root, sizing_mode='scale_width')) doc.template = template + doc.template_variables.update(template_variables) def crossfilter_doc(worker, doc): @@ -567,6 +569,7 @@ def crossfilter_doc(worker, doc): doc.add_root(column(statetable.root, crossfilter.root)) doc.template = template + doc.template_variables.update(template_variables) def systemmonitor_doc(worker, doc): @@ -577,6 +580,7 @@ def systemmonitor_doc(worker, doc): doc.add_root(sysmon.root) doc.template = template + doc.template_variables.update(template_variables) def counters_doc(server, doc): @@ -587,6 +591,7 @@ def counters_doc(server, doc): doc.add_root(counter.root) doc.template = template + doc.template_variables.update(template_variables) class BokehWorker(BokehServer): From 96a2d45ecf054bb18cd65b9a9f027997ecc4842a Mon Sep 17 00:00:00 2001 From: Matthew Rocklin Date: Tue, 6 Jun 2017 18:47:59 -0400 Subject: [PATCH 3/4] mark active page --- distributed/bokeh/scheduler.py | 6 ++++++ distributed/bokeh/template.html | 8 ++++++-- distributed/bokeh/worker.py | 4 ++++ 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/distributed/bokeh/scheduler.py b/distributed/bokeh/scheduler.py index ef7b2c1936..8ca05731de 100644 --- a/distributed/bokeh/scheduler.py +++ b/distributed/bokeh/scheduler.py @@ -888,6 +888,7 @@ def systemmonitor_doc(scheduler, doc): sizing_mode='scale_width')) doc.template = template doc.template_variables.update(template_variables) + doc.template_variables['active_page'] = 'system' def stealing_doc(scheduler, doc): @@ -909,6 +910,7 @@ def stealing_doc(scheduler, doc): doc.template = template doc.template_variables.update(template_variables) + doc.template_variables['active_page'] = 'stealing' def events_doc(scheduler, doc): @@ -920,6 +922,7 @@ def events_doc(scheduler, doc): doc.add_root(column(events.root, sizing_mode='scale_width')) doc.template = template doc.template_variables.update(template_variables) + doc.template_variables['active_page'] = 'events' def workers_doc(scheduler, doc): @@ -931,6 +934,7 @@ def workers_doc(scheduler, doc): doc.add_root(table.root) doc.template = template doc.template_variables.update(template_variables) + doc.template_variables['active_page'] = 'workers' def tasks_doc(scheduler, doc): @@ -943,6 +947,7 @@ def tasks_doc(scheduler, doc): doc.add_root(ts.root) doc.template = template doc.template_variables.update(template_variables) + doc.template_variables['active_page'] = 'tasks' def status_doc(scheduler, doc): @@ -978,6 +983,7 @@ def status_doc(scheduler, doc): sizing_mode='scale_width')) doc.template = template doc.template_variables.update(template_variables) + doc.template_variables['active_page'] = 'status' class BokehScheduler(BokehServer): diff --git a/distributed/bokeh/template.html b/distributed/bokeh/template.html index ba2e6becf3..98f16ec26e 100644 --- a/distributed/bokeh/template.html +++ b/distributed/bokeh/template.html @@ -76,6 +76,10 @@ background-color: #eaaa6d; } + .active { + background-color: rgba(234, 170, 109, 0.7); + } + a { color: #1f5396; text-decoration: none; @@ -97,9 +101,9 @@
diff --git a/distributed/bokeh/worker.py b/distributed/bokeh/worker.py index d08f5084a0..abb2ddba51 100644 --- a/distributed/bokeh/worker.py +++ b/distributed/bokeh/worker.py @@ -556,6 +556,7 @@ def main_doc(worker, doc): sizing_mode='scale_width')) doc.template = template doc.template_variables.update(template_variables) + doc.template_variables['active_page'] = 'main' def crossfilter_doc(worker, doc): @@ -570,6 +571,7 @@ def crossfilter_doc(worker, doc): doc.add_root(column(statetable.root, crossfilter.root)) doc.template = template doc.template_variables.update(template_variables) + doc.template_variables['active_page'] = 'crossfilter' def systemmonitor_doc(worker, doc): @@ -581,6 +583,7 @@ def systemmonitor_doc(worker, doc): doc.add_root(sysmon.root) doc.template = template doc.template_variables.update(template_variables) + doc.template_variables['active_page'] = 'system' def counters_doc(server, doc): @@ -592,6 +595,7 @@ def counters_doc(server, doc): doc.add_root(counter.root) doc.template = template doc.template_variables.update(template_variables) + doc.template_variables['active_page'] = 'counters' class BokehWorker(BokehServer): From a75cb087c580795c13e81762ebba9f35083641d6 Mon Sep 17 00:00:00 2001 From: Matthew Rocklin Date: Tue, 6 Jun 2017 21:42:11 -0400 Subject: [PATCH 4/4] reduce height of navbar --- distributed/bokeh/template.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/distributed/bokeh/template.html b/distributed/bokeh/template.html index 98f16ec26e..ba883f7680 100644 --- a/distributed/bokeh/template.html +++ b/distributed/bokeh/template.html @@ -45,7 +45,7 @@ font-size: 0; } .navbar img { - height: 50px; + height: 40px; float: right; margin-bottom: 0px; padding: 0px 24px; @@ -68,7 +68,7 @@ display: block; color: black; text-align: center; - padding: 16px 16px; + padding: 11px 16px; text-decoration: none; }