[checkmk-commits] Refactored the site status button to be rendered using pure HTML/CSS

Module: check_mk Branch: master Commit: 9d94d53ea24bf7adb97ff41306a0d7f2505cd58a URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=9d94d53ea24bf7… Author: Lars Michelsen &lt;lm(a)mathias-kettner.de&gt; Date: Wed Apr 12 09:13:59 2017 +0200 Refactored the site status button to be rendered using pure HTML/CSS Change-Id: Ie18cf077e273050c61ec53c9ec4b667e81e3d7b4 --- web/htdocs/htmllib.py | 12 ++++ web/htdocs/images/button_sitestatus_dead.png | Bin 972 -> 0 bytes web/htdocs/images/button_sitestatus_disabled.png | Bin 941 -> 0 bytes web/htdocs/images/button_sitestatus_down.png | Bin 992 -> 0 bytes web/htdocs/images/button_sitestatus_online.png | Bin 1067 -> 0 bytes web/htdocs/images/button_sitestatus_partial.png | Bin 1025 -> 0 bytes web/htdocs/images/button_sitestatus_unknown.png | Bin 1159 -> 0 bytes web/htdocs/images/button_sitestatus_unreach.png | Bin 1131 -> 0 bytes web/htdocs/images/button_sitestatus_waiting.png | Bin 1132 -> 0 bytes web/htdocs/status.css | 75 +++++++++++++++-------- web/htdocs/wato.py | 2 +- web/plugins/sidebar/shipped.py | 6 +- 12 files changed, 64 insertions(+), 31 deletions(-) diff --git a/web/htdocs/htmllib.py b/web/htdocs/htmllib.py index 65e0ffc..675d3b7 100644 --- a/web/htdocs/htmllib.py +++ b/web/htdocs/htmllib.py @@ -2198,6 +2198,18 @@ class html(HTMLGenerator, Encoder, RequestHandler): self.close_x() + # Shows a colored badge with text (used on WATO activation page for the site status) + def status_label(self, content, status, help, **attrs): + self.status_label_button(content, status, help, onclick=None, **attrs) + + + # Shows a colored button with text (used in site and customer status snapins) + def status_label_button(self, content, status, help, onclick, **attrs): + button_cls = "button" if onclick else None + self.div(content, title=help, class_=[ "status_label", button_cls, status ], + onclick=onclick, **attrs) + + def number_input(self, varname, deflt = "", size=8, style="", submit=None): if deflt != None: deflt = str(deflt) diff --git a/web/htdocs/images/button_sitestatus_dead.png b/web/htdocs/images/button_sitestatus_dead.png deleted file mode 100644 index 269924d..0000000 Binary files a/web/htdocs/images/button_sitestatus_dead.png and /dev/null differ diff --git a/web/htdocs/images/button_sitestatus_disabled.png b/web/htdocs/images/button_sitestatus_disabled.png deleted file mode 100644 index 7d49bc6..0000000 Binary files a/web/htdocs/images/button_sitestatus_disabled.png and /dev/null differ diff --git a/web/htdocs/images/button_sitestatus_down.png b/web/htdocs/images/button_sitestatus_down.png deleted file mode 100644 index dd0a9cd..0000000 Binary files a/web/htdocs/images/button_sitestatus_down.png and /dev/null differ diff --git a/web/htdocs/images/button_sitestatus_online.png b/web/htdocs/images/button_sitestatus_online.png deleted file mode 100644 index 2ca8955..0000000 Binary files a/web/htdocs/images/button_sitestatus_online.png and /dev/null differ diff --git a/web/htdocs/images/button_sitestatus_partial.png b/web/htdocs/images/button_sitestatus_partial.png deleted file mode 100644 index 4ec2117..0000000 Binary files a/web/htdocs/images/button_sitestatus_partial.png and /dev/null differ diff --git a/web/htdocs/images/button_sitestatus_unknown.png b/web/htdocs/images/button_sitestatus_unknown.png deleted file mode 100644 index a3824b6..0000000 Binary files a/web/htdocs/images/button_sitestatus_unknown.png and /dev/null differ diff --git a/web/htdocs/images/button_sitestatus_unreach.png b/web/htdocs/images/button_sitestatus_unreach.png deleted file mode 100644 index a2775c1..0000000 Binary files a/web/htdocs/images/button_sitestatus_unreach.png and /dev/null differ diff --git a/web/htdocs/images/button_sitestatus_waiting.png b/web/htdocs/images/button_sitestatus_waiting.png deleted file mode 100644 index b6d3215..0000000 Binary files a/web/htdocs/images/button_sitestatus_waiting.png and /dev/null differ diff --git a/web/htdocs/status.css b/web/htdocs/status.css index f293de4..b45029a 100644 --- a/web/htdocs/status.css +++ b/web/htdocs/status.css @@ -145,41 +145,62 @@ img.pluginurl { /* Status of sites in sidebar and in WATO */ -.sitestatus.online { - background-color: #3c0; +.status_label { + border-color: #1b333d #264c18 #1b333d #274141; + border-radius: 4px; + border-style: solid; + border-width: 1px; + box-shadow: 0 0 1px rgba(255, 255, 255, 0.8), + 1px 1px 0px 0px rgba(255, 255, 255, 0.4) inset; + + width: 56px; + height: 12px; + + font-size: 7pt; color: #fff; - border-color: #0f0; + text-align: center; + line-height: 12px; + + cursor: default; +} + +.status_label.button { + cursor: pointer; } -.sitestatus.disabled { - background-color: #666; - color: #ccc; - border-color: #888; + +.status_label.button:hover { + /* TODO: create a better hover effect */ + opacity: 0.5; + filter: alpha(opacity=50); /* For IE8 and earlier */ } -.sitestatus.dead { - background-color: #c00; - color: #f88; - border-color: #f44; + +.status_label.disabled { + background-color: #787878; + color: #b2b2b2; } -.sitestatus.waiting { - background-color: #666; - color: #fff; - border-color: #ccc; +.status_label.dead { + background-color: #b91e1d; } -.sitestatus.down { - background-color: #f00; - color: #fff; - border-color: #800; +.status_label.down { + background-color: #f60000; } -.sitestatus.unreach { - background-color: #f80; - color: #fff; - border-color: #840; +.status_label.online { + background-color: #54a626; } -.sitestatus.unknown { - background-color: #26c; - color: #fff; - border-color: #44f; +.status_label.partial { + background-color: #bd8a3f; } +.status_label.unknown { + background-color: #a96394; +} +.status_label.unreach { + background-color: #ef7b08; +} +.status_label.waiting { + background-color: #3574c2; +} + + /* Performeter styling */ table.data tr.data td.perfometer { diff --git a/web/htdocs/wato.py b/web/htdocs/wato.py index 55e6ef5..1612259 100644 --- a/web/htdocs/wato.py +++ b/web/htdocs/wato.py @@ -5432,7 +5432,7 @@ class ModeActivateChanges(WatoMode, ActivateChanges): # Livestatus table.cell(_("Status"), css="narrow nobr") - html.write('<img src="images/button_sitestatus_%s.png">' % (status)) + html.status_label(content=_(status), status=status, help=_("This site is %s") % status) # Livestatus-/Check_MK-Version table.cell(_("Version"), site_status.get("livestatus_version", ""), css="narrow nobr") diff --git a/web/plugins/sidebar/shipped.py b/web/plugins/sidebar/shipped.py index ca0cebb..28b72bc 100644 --- a/web/plugins/sidebar/shipped.py +++ b/web/plugins/sidebar/shipped.py @@ -510,10 +510,10 @@ def render_sitestatus(): html.open_td(class_="left") html.write(text) html.close_td() - onclick = "switch_site('_site_switch=%s:%s')" % (sitename, switch) html.open_td(class_="state") - html.icon_button("#", _("%s this site") % (state["state"] == "disabled" and "enable" or "disable"), - "sitestatus_%s" % state["state"], onclick=onclick) + html.status_label_button(content=_(state["state"]), status=state["state"], + help=_("%s this site") % (state["state"] == "disabled" and _("enable") or _("disable")), + onclick="switch_site('_site_switch=%s:%s')" % (sitename, switch)) html.close_tr() html.close_table()