tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
icingaweb2/doc/Icinga-Design/documentation.html

677 lines
22 KiB
HTML
Raw Normal View History

Icinga Design refs #4824
2013-10-09 10:47:59 +02:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Icinga Documentation</title>
<link media="screen" href="bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="icinga-design.css">
<link rel="stylesheet" href="documentation.css">
<link rel="apple-touch-icon-precomposed" href="../apple-touch-icon-152×152-precomposed.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="docu-main">
<h1 class="docu-project-name">Icinga Documentation</h1>
<!-- <div class="docu-description">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div> -->
<h1 class="docu-main-headline">Basic Elements</h1>
<h1 class="docu-sub-headline">Headlines</h1>
<!-- <div class="docu-description">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div> -->
<div class="docu-section">
<div class="docu-example">
<div class="docu-module">
<h1>Main headline h1</h1>
<h2>Sub headline h2</h2>
</div><!-- .docu-module -->
</div><!-- .docu-example -->
<div class="docu-codeblock">
<textarea class="docu-code"><h1>Main Headline H1</h1>
<h2>Sub headline h2</h2>
</textarea>
</div><!-- .docu-codeblock -->
</div><!-- .docu-section -->
<h1 class="docu-sub-headline">Textblocks</h1>
<div class="docu-description">
Used on simple pages with continuous text e.g. Imprint or Privacy.
</div>
<div class="docu-section">
<div class="docu-example">
<div class="docu-module">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At <a href="#">vero eos et accusam et justo</a> duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <a href="#">sanctus est Lorem ipsum</a> dolor sit amet.
</p>
</div><!-- .docu-module -->
</div><!-- .docu-example -->
<div class="docu-codeblock">
<textarea class="docu-code">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At <a href="#">vero eos et accusam et justo</a> duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <a href="#">sanctus est Lorem ipsum</a> dolor sit amet.
</p>
</textarea>
</div><!-- .docu-codeblock -->
</div><!-- .docu-section -->
<h1 class="docu-sub-headline">Table</h1>
<div class="docu-description">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
<div class="docu-section">
<div class="docu-example">
<div class="docu-module">
<table class="table table-condensed">
<thead>
<tr>
<th colspan="3">Status</th>
<th>Output</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="/icingawebinsfx/monitoring/show/host?host=host_000" style="visibility:hidden"></a>
</td>
<td>
</td>
<td title="UP since 2013-09-30 16:57:58">
<span class="badge-container_">
<a href="/icingawebinsfx/monitoring/list/services?host=host_000&amp;service_problems=1" class="badge pull-right">
12
</a>
</span>
<div>
Implement hosts view refs #4824
2013-10-09 11:48:42 +02:00
Icinga Design refs #4824
2013-10-09 10:47:59 +02:00
<b>Up</b><br />
Since&nbsp;
30.09.
</div>
</td>
<td>
<a href="/icingawebinsfx/monitoring/list/services?host=host_000">
<b>host_000</b>
<i>127.0.0.1</i>
</a><br />
host_000 (checked by localhost.localdomain) OK: random hostcheck ok<br />
<span class="output-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</span>
</td>
</tr>
<tr>
<td class="tacheader-status-unreachable">
<a href="/icingawebinsfx/monitoring/show/host?host=host_000" style="visibility:hidden"></a>
</td>
<td>
<div class="icon-table icon-flapping"></div>
<div class="icon-table icon-comment"></div>
<div class="icon-table icon-unhandled"></div>
</td>
<td title="UP since 2013-09-30 16:57:58">
<span class="badge-container_">
<a href="/icingawebinsfx/monitoring/list/services?host=host_000&amp;service_problems=1" class="badge pull-right">
6
</a>
</span>
<div>
<b>Unreachable</b><br />
Since&nbsp;
30.09.
</div>
</td>
<td>
<a href="/icingawebinsfx/monitoring/list/services?host=host_000">
<b>host_000</b>
<i>127.0.0.1</i>
</a><br />
host_000 (checked by localhost.localdomain) OK: random hostcheck ok
<span class="output-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</span>
</td>
</tr>
<tr>
<td class="tacheader-status-down">
<a href="/icingawebinsfx/monitoring/show/host?host=host_000" style="visibility:hidden"></a>
</td>
<td>
</td>
<td title="UP since 2013-09-30 16:57:58">
<span class="badge-container_">
<a href="/icingawebinsfx/monitoring/list/services?host=host_000&amp;service_problems=1" class="badge pull-right">
6
</a>
</span>
<div>
<b>Down</b><br />
Since&nbsp;
30.09.
</div>
</td>
<td>
<a href="/icingawebinsfx/monitoring/list/services?host=host_000">
<b>host_000</b>
<i>127.0.0.1</i>
</a><br />
host_000 (checked by localhost.localdomain) OK: random hostcheck ok
</td>
</tr>
<tr>
<td class="">
<a href="/icingawebinsfx/monitoring/show/host?host=host_000" style="visibility:hidden"></a>
</td>
<td>
</td>
<td title="UP since 2013-09-30 16:57:58">
<span class="badge-container_">
<a href="/icingawebinsfx/monitoring/list/services?host=host_000&amp;service_problems=1" class="badge pull-right">
6
</a>
</span>
<div>
<b>Up</b><br />
Since&nbsp;
30.09.
</div>
</td>
<td>
<a href="/icingawebinsfx/monitoring/list/services?host=host_000">
<b>host_000</b>
<i>127.0.0.1</i>
</a><br />
host_000 (checked by localhost.localdomain) OK: random hostcheck ok
</td>
</tr>
<tr>
<td class="">
<a href="/icingawebinsfx/monitoring/show/host?host=host_000" style="visibility:hidden"></a>
</td>
<td>
</td>
<td title="UP since 2013-09-30 16:57:58">
<span class="badge-container_">
<a href="/icingawebinsfx/monitoring/list/services?host=host_000&amp;service_problems=1" class="badge pull-right">
6
</a>
</span>
<div>
<b>Up</b><br />
Since&nbsp;
30.09.
</div>
</td>
<td>
<a href="/icingawebinsfx/monitoring/list/services?host=host_000">
<b>host_000</b>
<i>127.0.0.1</i>
</a><br />
host_000 (checked by localhost.localdomain) OK: random hostcheck ok
<span class="output-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</span>
</td>
</tr>
<tr>
<td class="tacheader-status-down">
<a href="/icingawebinsfx/monitoring/show/host?host=host_000" style="visibility:hidden"></a>
</td>
<td>
<div class="icon-table icon-flapping"></div>
<div class="icon-table icon-comment"></div>
<div class="icon-table icon-unhandled"></div>
</td>
<td title="UP since 2013-09-30 16:57:58">
<span class="badge-container_">
<a href="/icingawebinsfx/monitoring/list/services?host=host_000&amp;service_problems=1" class="badge pull-right">
6
</a>
</span>
<div>
<b>Down</b><br />
Since&nbsp;
30.09.
</div>
</td>
<td>
<a href="/icingawebinsfx/monitoring/list/services?host=host_000">
<b>host_000</b>
<i>127.0.0.1</i>
</a><br />
host_000 (checked by localhost.localdomain) OK: random hostcheck ok
<span class="output-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</span>
</td>
</tr>
</tbody>
</table>
</div><!-- .docu-module -->
</div><!-- .docu-example -->
<div class="docu-codeblock">
<textarea class="docu-code">
code...
</textarea>
</div><!-- .docu-codeblock -->
</div><!-- .docu-section -->
<h1 class="docu-main-headline">Pagination</h1>
<div class="docu-description">
The pagination is placed on top and bottom of every list.
</div>
<div class="docu-section">
<div class="docu-example">
<div class="docu-module">
<ul class="pagination pagination-sm">
<!-- Previous page link -->
<li class="disabled"><span>« Prev</span></li>
<!-- Numbered page links -->
<li class="active">
<a title="1 to 20 of 111" href="/icinga2-web/monitoring/list/hosts?detail=%2Ficinga2-web%2Fmonitoring%2Fshow%2Fhost%3Fhost%3Dhost_001&amp;page=1">
1 </a>
</li>
<li>
<a title="21 to 40 of 111" href="/icinga2-web/monitoring/list/hosts?detail=%2Ficinga2-web%2Fmonitoring%2Fshow%2Fhost%3Fhost%3Dhost_001&amp;page=2">
2 </a>
</li>
<li>
<a title="41 to 60 of 111" href="/icinga2-web/monitoring/list/hosts?detail=%2Ficinga2-web%2Fmonitoring%2Fshow%2Fhost%3Fhost%3Dhost_001&amp;page=3">
3 </a>
</li>
<li>
<a title="61 to 80 of 111" href="/icinga2-web/monitoring/list/hosts?detail=%2Ficinga2-web%2Fmonitoring%2Fshow%2Fhost%3Fhost%3Dhost_001&amp;page=4">
4 </a>
</li>
<li>
<a title="81 to 100 of 111" href="/icinga2-web/monitoring/list/hosts?detail=%2Ficinga2-web%2Fmonitoring%2Fshow%2Fhost%3Fhost%3Dhost_001&amp;page=5">
5 </a>
</li>
<li>
<a title="101 to 111 of 111" href="/icinga2-web/monitoring/list/hosts?detail=%2Ficinga2-web%2Fmonitoring%2Fshow%2Fhost%3Fhost%3Dhost_001&amp;page=6">
6 </a>
</li>
<!-- Next page link -->
<li>
<a title="21 to 40 of 111" href="/icinga2-web/monitoring/list/hosts?detail=%2Ficinga2-web%2Fmonitoring%2Fshow%2Fhost%3Fhost%3Dhost_001&amp;page=2">Next »
</a>
</li>
</ul>
</div><!-- .docu-module -->
</div><!-- .docu-example -->
<div class="docu-codeblock">
<textarea class="docu-code">Code... Code...
</textarea>
</div><!-- .docu-codeblock -->
</div><!-- .docu-section -->
1st box details refs #4824
2013-10-10 10:46:06 +02:00
<h1 class="docu-main-headline">Details</h1>
<h1 class="docu-sub-headline">Basic Example</h1>
<div class="docu-description">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
<div class="docu-section">
<div class="docu-example">
<div class="docu-module">
<div class="panel-heading border-status-critical">
<div class="panel-hostname">
Host Status host_000 ölaierjoe paeurüuaeraeüure <span class="panel-header-status">- Unreachable since 15:59</span></div>
</div>
<hr class="separator" />
<div class="panel-body">
<div class="panel-row">
<p>host_000 (checked by localhost.localdomain) OK: random hostcheck ok sometimes with multiline and html tags\n </p>
</div>
<div class="panel-row">
Detail Table, Properties Table refs #4824
2013-10-10 15:20:51 +02:00
<a href="#" class="button btn-cta btn-wide">Recheck</a>
1st box details refs #4824
2013-10-10 10:46:06 +02:00
</div>
<div class="panel-row">
<div class="panel-label">
Last Check
</div>
<div class="panel-content">
1381308168
</div>
</div>
<div class="panel-row">
<div class="panel-label">
Next Check
</div>
<div class="panel-content">
1381309978
</div>
<div class="panel-button">
<a href="#" class="button btn-common btn-small"><span class="icon-reschedule icon-btn-small"></span></a>
</div>
</div>
<div class="panel-row">
<div class="panel-label">
Host Address
</div>
<div class="panel-content">
127.0.0.1
</div>
</div>
<div class="panel-row">
<div class="panel-label">
Alias
</div>
<div class="panel-content">
random_000
</div>
</div>
<div class="panel-row">
<a href="#" class="button btn-common btn-half-left">View Services For This Host </a>
<a href="#" class="button btn-common btn-half-right">Recheck All Services</a>
</div>
</div>
Icinga Design refs #4824
2013-10-09 10:47:59 +02:00
Detail Table, Properties Table refs #4824
2013-10-10 15:20:51 +02:00
<!-- ########## Box mit Tabelle ############# -->
Icinga Design refs #4824
2013-10-09 10:47:59 +02:00
1st box details refs #4824
2013-10-10 10:46:06 +02:00
<div class="panel-heading">
<div class="panel-hostname">
Detail Table, Properties Table refs #4824
2013-10-10 15:20:51 +02:00
Box mit Tabelle</div>
1st box details refs #4824
2013-10-10 10:46:06 +02:00
</div>
<hr class="separator" />
<div class="panel-body">
Detail Table, Properties Table refs #4824
2013-10-10 15:20:51 +02:00
<table class="table table-condensed table-detail">
<tbody>
<tr>
<th>Lorem</th>
<th>Ipsum xyz</th>
<th>blablubb</th>
</tr>
<tr>
<td>08.10. 15:51</td>
<td><a href="#">Lorem ipusm_002</a></td>
<td><a href="#" class="button btn-common btn-small pull-right"><span class="icon-downtime icon-btn-small"></span></a></td>
</tr>
<tr>
<td>08.10. 15:51</td>
<td>Ich bin ein toller Text</td>
<td><a href="#" class="button btn-common btn-small pull-right"><span class="icon-edit icon-btn-small"></span></a></td>
</tr>
<tr>
<td>Hallo hallo</td>
<td>Server 123 blabla</td>
<td>Noch ein Text</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Juhuhallo_host01</td>
<td>128747404</td>
</tr>
</tbody>
</table>
</div>
1st box details refs #4824
2013-10-10 10:46:06 +02:00
Detail Table, Properties Table refs #4824
2013-10-10 15:20:51 +02:00
<!-- ########## Heading ############# -->
<div class="panel-heading">
<div class="panel-hostname">
Heading</div>
</div>
<hr class="separator" />
<div class="panel-body">
<table class="table table-condensed table-detail">
<tbody>
<tr>
<td class="enabled">Passive Checks</td>
<td><div class="icon-table-hint icon-edit pull-left"></div></td>
<td><input type="checkbox" id="#" name="#" class="pull-right" checked /></td>
</tr>
<tr>
<td class="disabled">Active Checks</td>
<td></td>
<td><input type="checkbox" id="#" name="#" class="pull-right" /></td>
</tr>
<tr>
<td class="enabled">Obsessing</td>
<td><div class="icon-table-hint icon-edit pull-left"></div></td>
<td><input type="checkbox" id="#" name="#" class="pull-right" checked /></td>
</tr>
<tr>
<td class="enabled">Notifications</td>
<td></td>
<td><input type="checkbox" id="#" name="#" class="pull-right" checked /></td>
</tr>
<tr>
<td class="disabled">Event Handler</td>
<td><div class="icon-table-hint icon-edit pull-left"></div></td>
<td><input type="checkbox" id="#" name="#" class="pull-right" /></td>
</tr>
<tr>
<td class="disabled">Flap Detection</td>
<td></td>
<td><input type="checkbox" id="#" name="#" class="pull-right" /></td>
</tr>
</tbody>
</table>
1st box details refs #4824
2013-10-10 10:46:06 +02:00
</div>
Detail Table, Properties Table refs #4824
2013-10-10 15:20:51 +02:00
1st box details refs #4824
2013-10-10 10:46:06 +02:00
</div><!-- .docu-module -->
</div><!-- .docu-example -->
<div class="docu-codeblock">
<textarea class="docu-code">Code... Code...
</textarea>
</div><!-- .docu-codeblock -->
</div><!-- .docu-section -->
<h1 class="docu-main-headline">Form Elements</h1>
<h1 class="docu-sub-headline">Select</h1>
<div class="docu-description">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
<div class="docu-section">
<div class="docu-example">
<div class="docu-module">
<form data-icinga-component="app/form" action="" method="get" class="form-inline" name="hosts" id="icinga-component-0">
<div id="sort-element" class="form-group">
<label for="sort">Sort By</label>
<select data-icinga-form-autosubmit="1" class="form-control input-sm" id="sort" name="sort">
<option value="host_last_check">Last Host Check</option>
<option value="host_severity">Host Severity</option>
<option value="host_state">Hard State</option>
<option value="host_name">Host Name</option>
<option value="host_address">Address</option>
</select>
</div>
<div id="dir-element" class="form-group"><label for="dir">&nbsp;</label>
<select data-icinga-form-autosubmit="1" class="form-control input-sm" id="dir" name="dir">
<option value="desc">Desc</option>
<option value="asc">Asc</option>
</select></div>
<div id="submit_hosts-element" class="form-group"><label for="submit_hosts">&nbsp;</label><noscript>
&lt;input type="submit" name="submit_hosts" id="submit_hosts" value="Sort" class="btn btn-default form-control input-sm" condition="0" addLabelPlaceholder="1"&gt;</noscript>
</div>
</form>
</div><!-- .docu-module -->
</div><!-- .docu-example -->
<div class="docu-codeblock">
<textarea class="docu-code">
...
</textarea>
</div><!-- .docu-codeblock -->
</div><!-- .docu-section -->
Icinga Design refs #4824
2013-10-09 10:47:59 +02:00
<h1 class="docu-main-headline">Buttons</h1>
<h1 class="docu-sub-headline">Link Button</h1>
<div class="docu-description">
Link buttons are used for the main menu links on the bottom of every page.
</div>
<div class="docu-section">
<div class="docu-example">
<div class="docu-module">
<a class="clickable-bg frame island--medium link-arrow" href="#">Lorem Ipsum</a>
</div><!-- .docu-module -->
</div><!-- .docu-example -->
<div class="docu-codeblock">
<textarea class="docu-code"><a class="clickable-bg frame island--medium link-arrow" href="#">Lorem Ipsum</a>
</textarea>
</div><!-- .docu-codeblock -->
</div><!-- .docu-section -->
<h1 class="docu-main-headline">Main Header</h1>
<h1 class="docu-sub-headline">Sub Header</h1>
<div class="docu-description">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
<div class="docu-section">
<div class="docu-example">
<div class="docu-module">
<h1>bla</h1>
<h2>blubb</h2>
</div><!-- .docu-module -->
</div><!-- .docu-example -->
<div class="docu-codeblock">
<textarea class="docu-code">Code... Code...
</textarea>
</div><!-- .docu-codeblock -->
</div><!-- .docu-section -->
<!-- END CONTENT ####################### -->
<div class="docu-footer">
09/2013 - insertEFFECT GmbH
</div>
</div><!-- .docu-main -->
<script src="../js/vendor/requirejs/require.js" data-main="../js/main"></script>
</body>
</html>