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

491 lines
16 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>
<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">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 -->
<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 -->
<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>