[checkmk-commits] Check_MK graphs can now be rendered on mobile interface

Module: check_mk Branch: master Commit: 3b719a8ae9dfb42827eb8d515d30ade03306a6f0 URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=3b719a8ae9dfb4… Author: Lars Michelsen &lt;lm(a)mathias-kettner.de&gt; Date: Mon Jul 25 16:50:30 2016 +0200 Check_MK graphs can now be rendered on mobile interface --- web/htdocs/metrics.py | 3 +-- web/htdocs/mobile.css | 24 ++---------------------- web/htdocs/mobile.py | 20 ++++++++++++++------ web/plugins/icons/builtin.py | 6 ++++++ web/plugins/views/mobile.py | 4 ++-- web/plugins/views/painters.py | 8 ++++++++ 6 files changed, 33 insertions(+), 32 deletions(-) diff --git a/web/htdocs/metrics.py b/web/htdocs/metrics.py index 1dffad4..3528a09 100644 --- a/web/htdocs/metrics.py +++ b/web/htdocs/metrics.py @@ -1279,8 +1279,7 @@ def cmk_graphs_possible(site_id = None): render_graph_html # Will throw exception if missing return not config.force_pnp_graphing \ and browser_supports_canvas() \ - and site_is_running_cmc(site_id) \ - and not html.is_mobile() + and site_is_running_cmc(site_id) except: return False diff --git a/web/htdocs/mobile.css b/web/htdocs/mobile.css index a0ef3e5..04bcef2 100644 --- a/web/htdocs/mobile.css +++ b/web/htdocs/mobile.css @@ -26,17 +26,6 @@ Boston, MA 02110-1301 USA. */ /* Styles for Check_MK mobile interface */ -/* -body.mobile { - padding: 0px; - margin: 0px; -} - -div.ui-content { - padding: 0px; - background-color: #green; -} -*/ body.mobile div.really, body.mobile div.success, @@ -61,14 +50,10 @@ body.mobile div.command_group a { } body.mobile table.data { - /* width: 10px;*/ /* 100%; */ border-collapse: collapse; empty-cells: show; } -body.mobile table.data tr { -} - body.mobile table.data td { padding: 1px; border: 1px solid #ddd; @@ -85,12 +70,7 @@ body.mobile table.dataset tr.header { color: black; } -body.mobile table.dataset tr.header th { -} - -body.mobile table.dataset tr.data td { - /* border-radius: 10px; */ - /* -webkit-border-radius: 10px; */ +body.mobile table.dataset > tbody > tr.data > td { border-radius: 5px; border: 1px solid #aaa; padding: 4px 6px; @@ -126,8 +106,8 @@ body.mobile table.alertstatefilter td { body.mobile table.alertstatefilter .ui-checkbox { margin: 0; } -/* Perfometers */ +/* Perfometers */ body.mobile td.perfometer { height: 14px; diff --git a/web/htdocs/mobile.py b/web/htdocs/mobile.py index 8160fa4..083aeaa 100644 --- a/web/htdocs/mobile.py +++ b/web/htdocs/mobile.py @@ -26,7 +26,7 @@ import re from lib import * -import views, config, visuals +import views, config, visuals, metrics # These regexes are taken from the public domain code of Matt Sullivan # http://sullerton.com/2011/03/django-mobile-browser-detection-middleware/ @@ -49,13 +49,21 @@ def mobile_html_head(title, ready_code=""): <link rel="stylesheet" type="text/css" href="jquery/jquery.mobile-1.0.css"> <link rel="stylesheet" type="text/css" href="check_mk.css"> <link rel="stylesheet" type="text/css" href="status.css"> - <link rel="stylesheet" type="text/css" href="mobile.css"> - <link rel="apple-touch-icon" href="images/ios_logo.png"/> + <link rel="stylesheet" type="text/css" href="mobile.css">""" % title) + + if metrics.cmk_graphs_possible(): + html.write(' <link rel="stylesheet" type="text/css" href="graphs.css">\n') + + html.write("""<link rel="apple-touch-icon" href="images/ios_logo.png"/> <script type='text/javascript' src='jquery/jquery-1.6.4.min.js'></script> <script type='text/javascript' src='js/mobile.js'></script> <script type='text/javascript' src='jquery/jquery.mobile-1.0.min.js'></script> - <script type='text/javascript' src='js/checkmk.js'></script> - <script type='text/javascript'> + <script type='text/javascript' src='js/checkmk.js'></script>\n""") + + if metrics.cmk_graphs_possible(): + html.write(" <script type='text/javascript' src='js/graphs.js'></script>\n") + + html.write("""<script type='text/javascript'> $(document).ready(function() { %s }); $(document).ready(function() { $("a").click(function (event) { @@ -66,7 +74,7 @@ def mobile_html_head(title, ready_code=""): </script> </head> <body class=mobile> -""" % (title, ready_code)) +""" % (ready_code)) def mobile_html_foot(): html.write("</body></html>\n") diff --git a/web/plugins/icons/builtin.py b/web/plugins/icons/builtin.py index 5a3445b..add81c5 100644 --- a/web/plugins/icons/builtin.py +++ b/web/plugins/icons/builtin.py @@ -359,6 +359,12 @@ def pnp_icon(row, what): # to keep the number of single requests low hover_content_func = 'fetch_pnp_hover_contents(\'%s\')' % pnp_popup_url(row, what) else: + # Don't show the icon with Check_MK graphing. The hover makes no sense and there is no + # mobile view for graphs, so the graphs on the bottom of the host/service view are enough + # for the moment. + if html.is_mobile(): + return + hover_content_func = 'hover_graph(\'%s\', \'%s\', \'%s\')' % \ (row['site'], row['host_name'], row.get('service_description', '_HOST_').replace("\\", "\\\\")) diff --git a/web/plugins/views/mobile.py b/web/plugins/views/mobile.py index 35e5e82..bdceb28 100644 --- a/web/plugins/views/mobile.py +++ b/web/plugins/views/mobile.py @@ -822,8 +822,8 @@ def render_mobile_dataset(rows, view, group_painters, painters, num_columns, sho html.write('</tr>\n') html.write('</table>') # html.write('</p></div>') - html.javascript('$("table.dataset tr.data td").addClass("ui-shadow").not(".state").addClass("nonstatus");\n' - '$("table.dataset tr.data a").attr("data-ajax", "false");\n') + html.javascript('$("table.dataset > tbody > tr.data > td").addClass("ui-shadow").not(".state").addClass("nonstatus");\n' + '$("table.dataset > tbody > tr.data a").attr("data-ajax", "false");\n') multisite_layouts["mobiledataset"] = { diff --git a/web/plugins/views/painters.py b/web/plugins/views/painters.py index 92b5e9e..07d0837 100644 --- a/web/plugins/views/painters.py +++ b/web/plugins/views/painters.py @@ -962,6 +962,14 @@ def paint_time_graph_cmk(row, show_timeranges=False): graph_data_range = { "time_range" : get_graph_timerange_from_painter_options() } graph_render_options = {} + if html.is_mobile(): + graph_render_options.update({ + "interaction" : False, + "show_controls" : False, + # Would be much better to autodetect the possible size (like on dashboard) + "size" : (50, 20), # ex + }) + if "host_metrics" in row: available_metrics = row["host_metrics"] perf_data = row["host_perf_data"]