89 lines
4.5 KiB
HTML
89 lines
4.5 KiB
HTML
|
|
|
|
|
|
<h1><a name="mobile_ui" id="mobile_ui">Mobile UI</a></h1>
|
|
<div class="level1">
|
|
|
|
<p>
|
|
|
|
Mit PNP4Nagios 0.6.14 ist ein Webinterface für mobile Endgeräte in PNP4Nagios integriert worden.
|
|
</p>
|
|
|
|
<p>
|
|
Das Design wurde mit <a href="http://jquerymobile.com/" class="urlextern" title="http://jquerymobile.com/" rel="nofollow">jQuery Mobile</a> realisiert und ist somit mit den aktuellen mobilen Browsern kompatibel. Auf der Liste der <a href="http://jquerymobile.com/gbs/" class="urlextern" title="http://jquerymobile.com/gbs/" rel="nofollow">unterstützten Geräte</a> sind die einzelnen Browser aufgeführt und nach Grad der Unterstützung klassifiziert.
|
|
</p>
|
|
|
|
</div>
|
|
<!-- SECTION "Mobile UI" [1-423] -->
|
|
<h1><a name="landing_page" id="landing_page">Landing Page</a></h1>
|
|
<div class="level1">
|
|
|
|
<p>
|
|
|
|
Das Webinterface wurde so gestaltet, dass die üblichen Links auf das klassische Interface abgefangen und auf die entsprechende mobile Seite umgeleitet werden. Somit können weiterhin innerhalb der Nagios-Mails Links zu PNP-Graphen eingebunden werden, die je nach Endgerät auf die passende Seite verweisen.
|
|
|
|
</p>
|
|
<table class="inline">
|
|
<tr class="row0">
|
|
<th class="col0"> Classic </th><th class="col1"> Mobile </th>
|
|
</tr>
|
|
<tr class="row1">
|
|
<td class="col0 leftalign"> /pnp4nagios/graph </td><td class="col1"> /pnp4nagios/mobile </td>
|
|
</tr>
|
|
<tr class="row2">
|
|
<td class="col0 leftalign"> /pnp4nagios/graph?host=localhost </td><td class="col1"> /pnp4nagios/mobile/host/localhost </td>
|
|
</tr>
|
|
<tr class="row3">
|
|
<td class="col0"> /pnp4nagios/graph?host=localhost&srv=ping </td><td class="col1"> /pnp4nagios/mobile/graph/localhost/ping </td>
|
|
</tr>
|
|
</table>
|
|
|
|
</div>
|
|
<!-- SECTION "Landing Page" [424-1019] -->
|
|
<h1><a name="browser-erkennung" id="browser-erkennung">Browser-Erkennung</a></h1>
|
|
<div class="level1">
|
|
|
|
<p>
|
|
|
|
Browser werden anhand ihres “User-Agent”-Strings als mobile Browser erkannt.
|
|
Die Erkennung kann in der Datei <code>pnp4nagios/etc/<a href="/de/pnp-0.6/webfe_cfg" class="wikilink1" title="de:pnp-0.6:webfe_cfg">config_local.php</a></code> beeinflusst werden.
|
|
</p>
|
|
<pre class="code">
|
|
$conf['mobile_devices'] = 'iPhone|iPod|iPad|android';
|
|
</pre>
|
|
|
|
<p>
|
|
Die Option 'mobile_devices' beinhaltet einen regulären Ausdruck, welcher mit dem “User Agent” des Browsers verglichen wird.
|
|
</p>
|
|
|
|
<p>
|
|
Der “User Agent” eines Browsers wird im Webserver-Access-Log protokolliert und sieht für ein iOS-Device in etwa wie folgt aus.
|
|
</p>
|
|
<pre class="code">
|
|
"Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7"
|
|
</pre>
|
|
|
|
</div>
|
|
<!-- SECTION "Browser-Erkennung" [1020-1721] -->
|
|
<h1><a name="screenshots" id="screenshots">Screenshots</a></h1>
|
|
<div class="level1">
|
|
|
|
<p>
|
|
|
|
Screenshot aufgenommen mit einem iPhone und iOS 4.2
|
|
|
|
</p>
|
|
<table class="inline">
|
|
<tr class="row0">
|
|
<td class="col0"> <a href="/_detail/mobile-home.png?id=de%3Apnp-0.6%3Amobile" class="media" title="mobile-home.png"><img src="/_media/mobile-home.png?w=150" class="media" title=" Home Screen" alt=" Home Screen" width="150" /></a> </td><td class="col1"> Homescreen </td><td class="col2"> <a href="/_detail/mobile-loading.png?id=de%3Apnp-0.6%3Amobile" class="media" title="mobile-loading.png"><img src="/_media/mobile-loading.png?w=150" class="media" title=" Loading..." alt=" Loading..." width="150" /></a> </td><td class="col3"> Loading … </td>
|
|
</tr>
|
|
<tr class="row1">
|
|
<td class="col0"> <a href="/_detail/mobile-hostlist.png?id=de%3Apnp-0.6%3Amobile" class="media" title="mobile-hostlist.png"><img src="/_media/mobile-hostlist.png?w=150" class="media" title=" Hosts Liste " alt=" Hosts Liste " width="150" /></a> </td><td class="col1"> Liste aller Hosts </td><td class="col2"> <a href="/_detail/mobile-servicelist.png?id=de%3Apnp-0.6%3Amobile" class="media" title="mobile-servicelist.png"><img src="/_media/mobile-servicelist.png?w=150" class="media" title=" Liste aller services" alt=" Liste aller services" width="150" /></a> </td><td class="col3"> Liste aller Services eines Hosts</td>
|
|
</tr>
|
|
<tr class="row2">
|
|
<td class="col0"> <a href="/_detail/mobile-graphs.png?id=de%3Apnp-0.6%3Amobile" class="media" title="mobile-graphs.png"><img src="/_media/mobile-graphs.png?w=150" class="media" title=" Graphen" alt=" Graphen" width="150" /></a> </td><td class="col1"> Graphen eines Services </td><td class="col2"> </td><td class="col3"> </td>
|
|
</tr>
|
|
</table>
|
|
|
|
</div>
|
|
<!-- SECTION "Screenshots" [1722-] --> |