Module: check_mk
Branch: master
Commit: 61b2940324b90a39e08cfc1f4e1a5a9d9792790a
URL:
http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=61b2940324b90a…
Author: Mathias Kettner <mk(a)mathias-kettner.de>
Date: Wed Feb 6 10:44:19 2013 +0100
Availability: better layout of timeline
---
web/htdocs/js/checkmk.js | 2 +-
web/htdocs/views.css | 28 +++++++++++++++++++++-------
web/plugins/views/availability.py | 12 ++++++++----
3 files changed, 30 insertions(+), 12 deletions(-)
diff --git a/web/htdocs/js/checkmk.js b/web/htdocs/js/checkmk.js
index a2f3828..c8108e6 100644
--- a/web/htdocs/js/checkmk.js
+++ b/web/htdocs/js/checkmk.js
@@ -1877,7 +1877,7 @@ function view_switch_option(oDiv, viewname, option, choices) {
function timeline_hover(row_nr, onoff)
{
- var table = document.getElementsByClassName("availability")[0];
+ var table = document.getElementsByClassName("timelineevents")[0];
var row = table.children[0].children[row_nr+1];
if (onoff)
add_class(row, 'hilite');
diff --git a/web/htdocs/views.css b/web/htdocs/views.css
index fb693b5..35fd892 100644
--- a/web/htdocs/views.css
+++ b/web/htdocs/views.css
@@ -510,15 +510,10 @@ div#avoptions_on {
margin-right: 3px;
}
-table.availability tr.hilite {
- background-color: #6ab;
- color: white;
-}
-
table.timeline {
- width: 100%;
+ width: 800px;
margin-bottom: 20px;
- box-shadow: 0.5px 0.5px 3px #000;
+ box-shadow: 0px 0px 1px #ccf;
height: 30px;
border-spacing: 0px;
border-collapse: collapse;
@@ -529,3 +524,22 @@ table.timeline td {
border: 1px solid #444;
}
+table.timelineevents {
+ width: 800px;
+}
+table.timelineevents tr.hilite {
+ background-color: #6ab;
+ color: white;
+}
+div.timelinerange {
+ width: 800px;
+ float: none;
+}
+div.timelinerange div {
+ width: 300px;
+ float: left;
+}
+div.timelinerange div.until {
+ text-align: right;
+ float: right;
+}
diff --git a/web/plugins/views/availability.py b/web/plugins/views/availability.py
index 64e71a5..5278dfe 100644
--- a/web/plugins/views/availability.py
+++ b/web/plugins/views/availability.py
@@ -468,11 +468,15 @@ def render_timeline(timeline_rows, from_time, until_time,
considered_duration, t
title += " - " + range_title
# Render graphical representation
- html.write('<h3>%s</h3>' % title)
# Make sure that each cell is visible, if possible
- min_percentage = min(100.0 / len(timeline_rows), 2)
+ min_percentage = min(100.0 / len(timeline_rows), 1)
rest_percentage = 100 - len(timeline_rows) * min_percentage
- html.write('<table class=timeline><tr>')
+ html.write('<div class=timelinerange>')
+ html.write('<div class=from>%s</div><div
class=until>%s</div></div>' % (
+ render_date(from_time), render_date(until_time)))
+
+ html.write('<table class=timeline>')
+ html.write('<tr class=timeline>')
for row_nr, (row, state_id) in enumerate(timeline_rows):
for sid, css, sname, help in availability_columns:
if sid == state_id:
@@ -489,7 +493,7 @@ def render_timeline(timeline_rows, from_time, until_time,
considered_duration, t
html.write('</tr></table>')
# Render Table
- table.begin(_("Detailed list of states"), css="availability")
+ table.begin("", css="timelineevents")
for row_nr, (row, state_id) in enumerate(timeline_rows):
table.row()
table.cell(_("From"), render_date(row["from"]),
css="nobr narrow")