icingaweb2/doc/Icinga-Design/documentation.html

975 lines
33 KiB
HTML
Raw Normal View History

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>
2013-10-11 16:31:40 +02:00
<!-- ######### Top Navbar ##########-->
<nav role="navigation" id="icingatopbar" class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand icinga-logo pull-left" href="/icinga2-web/">Icinga</a>
</div>
<div class="pull-left icinga-navbar icinga-navbar-hosts-container">
<span class="icinga-navbar-pills icinga-navbar-pills-up">999/999</span>
<span class="icinga-navbar-pills icinga-navbar-pills-unreachable">999/999</span>
<span class="icinga-navbar-pills icinga-navbar-pills-down">999/999</span>
</div>
<div class="pull-left icinga-navbar icinga-navbar-services-container">
<span class="icinga-navbar-pills icinga-navbar-pills-ok">999/999</span>
<span class="icinga-navbar-pills icinga-navbar-pills-critical">999/999</span>
<span class="icinga-navbar-pills icinga-navbar-pills-warning">999/999</span>
<span class="icinga-navbar-pills icinga-navbar-pills-unknown">999/999</span>
</div>
<div class="pull-left icinga-navbar icinga-navbar-reload">
<a class="button btn-common btn-small" href="#">
<span class="icon-refresh icon-btn-small"></span>
</a>
</div>
<div class="pull-left icinga-navbar icinga-navbar-search-container">
<input type="text" class="form-control input-sm icinga-navbar-search" />
</div>
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<a id="icinga_app_nav_useraction" data-toggle="dropdown" class="dropdown-toggle" href="#">
<span id="icinga_app_nav_username">
jdoe </span>
<i class="icinga-icon-user"></i>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li id="icinga_app_nav_preferences">
<a href="/icinga2-web/preference">Preferences </a>
</li>
<li id="icinga_app_nav_logout">
<a title="Logout" href="/icinga2-web/authentication/logout">Logout</a>
</li>
</ul>
</li>
</ul>
</nav>
2013-10-09 10:47:59 +02:00
<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>
2013-10-11 16:31:40 +02:00
2013-10-09 10:47:59 +02:00
<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>
2013-10-09 11:48:42 +02:00
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 -->
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">
<a href="#" class="button btn-cta btn-wide">Recheck</a>
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>
2013-10-09 10:47:59 +02:00
<!-- ########## Box mit Tabelle ############# -->
2013-10-09 10:47:59 +02:00
2013-10-10 10:46:06 +02:00
<div class="panel-heading">
<div class="panel-hostname">
Box mit Tabelle</div>
2013-10-10 10:46:06 +02:00
</div>
<hr class="separator" />
<div class="panel-body">
<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>
2013-10-10 10:46:06 +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>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>Active Checks</td>
<td></td>
<td><input type="checkbox" id="#" name="#" class="pull-right" /></td>
</tr>
<tr>
<td>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>Notifications</td>
<td></td>
<td><input type="checkbox" id="#" name="#" class="pull-right" checked /></td>
</tr>
<tr>
<td>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>Flap Detection</td>
<td></td>
<td><input type="checkbox" id="#" name="#" class="pull-right" /></td>
</tr>
</tbody>
</table>
2013-10-10 10:46:06 +02:00
</div>
</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 -->
<h1 class="docu-main-headline">Main Navigation</h1>
2013-10-09 10:47:59 +02:00
2013-10-11 15:13:22 +02:00
<h1 class="docu-sub-headline">Without Subnavigation</h1>
2013-10-09 10:47:59 +02:00
<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.
2013-10-11 15:13:22 +02:00
</div>
2013-10-09 10:47:59 +02:00
<div class="docu-section">
<div class="docu-example">
<div class="docu-module">
<ul id="icinganavigation" role="navigation" class="nav nav-stacked">
<li class="icon-main-nav nav-icon-hosts">
<a href="/icinga2-web/monitoring/list/hosts">Hosts</a>
</li>
<li class="icon-main-nav nav-icon-services">
<a href="/icinga2-web/monitoring/list/services" class="nav-notification">Services</a>
<span class="badge-container-nav">
<a href="/icingawebinsfx/monitoring/list/services?host=host_000&amp;service_problems=1" class="badge-nav">
12
</a>
</span>
</li>
<li class="icon-main-nav nav-icon-downtimes">
<a href="/icinga2-web/monitoring/list/downtimes">Downtimes</a>
</li>
<li class="icon-main-nav nav-icon-notifications">
<a href="/icinga2-web/monitoring/list/notifications">Notifications</a>
</li>
<li class="icon-main-nav nav-icon-comments">
<a href="/icinga2-web/monitoring/list/comments">Comments</a>
</li>
<li class="icon-main-nav nav-icon-dashboard active">
<a href="/icinga2-web/dashboard/index">Dashboard</a>
</li>
<li class="icon-main-nav nav-icon-configuration">
<a href="/icinga2-web/config/index">Configuration</a>
</li>
</ul>
2013-10-09 10:47:59 +02:00
</div><!-- .docu-module -->
</div><!-- .docu-example -->
2013-10-11 15:13:22 +02:00
</div><!-- .docu-section -->
<h1 class="docu-sub-headline">With Subnavigation</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">
<ul id="icinganavigation" role="navigation" class="nav nav-stacked">
<li class="icon-main-nav nav-icon-hosts">
<a href="/icinga2-web/monitoring/list/hosts">Hosts</a>
</li>
<li class="icon-main-nav nav-icon-services">
<a href="/icinga2-web/monitoring/list/services" class="nav-notification">Services</a>
<span class="badge-container-nav">
<a href="/icingawebinsfx/monitoring/list/services?host=host_000&amp;service_problems=1" class="badge-nav">
12
</a>
</span>
</li>
<li class="icon-main-nav nav-icon-downtimes">
<a href="/icinga2-web/monitoring/list/downtimes">Downtimes</a>
</li>
<li class="icon-main-nav nav-icon-notifications">
<a href="/icinga2-web/monitoring/list/notifications">Notifications</a>
</li>
<!-- ##### Sub Nav ######## -->
<ul class="icinga-subnavigation">
<li class="icon-main-nav subnav-icon-configuration">
<a href="#">Lorem Ipsum lorem</a>
</li>
<li class="icon-main-nav subnav-icon-configuration">
<a href="#" class="nav-notification">Submenüpunkt 2</a>
<span class="badge-container-subnav">
<a href="#" class="badge-subnav">
12
</a>
</span>
</li>
<li class="icon-main-nav subnav-icon-configuration active">
<a href="#">Dritter toller Punkt</a>
</li>
</ul>
<li class="icon-main-nav nav-icon-comments">
<a href="/icinga2-web/monitoring/list/comments">Comments</a>
</li>
<li class="icon-main-nav nav-icon-dashboard">
<a href="/icinga2-web/dashboard/index">Dashboard</a>
</li>
<li class="icon-main-nav nav-icon-configuration">
<a href="/icinga2-web/config/index">Configuration</a>
</li>
</ul>
</div><!-- .docu-module -->
</div><!-- .docu-example -->
</div><!-- .docu-section -->
<h1 class="docu-main-headline">Dashboard</h1>
<div class="docu-section">
<div class="docu-example">
<div class="docu-module">
<div class="dashboard-container">
<table class="table table-condensed table-detail table-dashboard">
<thead class="sep">
<tr>
<th colspan="3" class="test">
<a href="#">Dies ist eine tolle Headline</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border-status-critical">09.10. 17:40</td>
<td>
<i class="dashboard-icons icon-unhandled"></i>
<i class="dashboard-icons icon-flapping"></i>
<i class="dashboard-icons icon-comment"></i>
<i class="dashboard-icons icon-comment"></i>
</td>
2013-10-14 13:00:27 +02:00
<td><a href="#"><strong>Service</strong></a> on <a href="#">Hosta</a></td>
2013-10-11 15:13:22 +02:00
</tr>
<tr>
<td class="border-status-unknown">unknown</td>
<td>
<i class="dashboard-icons icon-unhandled"></i>
</td>
<td><a href="#"><strong>Ping</strong></a> on <a href="#">Host_123456</a></td>
</tr>
<tr>
<td class="border-status-warning">11.10.</td>
<td>
<i class="dashboard-icons icon-unhandled"></i>
<i class="dashboard-icons icon-flapping"></i>
<i class="dashboard-icons icon-comment"></i>
</td>
<td><a href="#"><strong>random_06</strong></a> on <a href="#">Host_insertEFFECT</a></td>
</tr>
<tr>
<td class="border-status-unknown">unknown</td>
<td>
<i class="dashboard-icons icon-unhandled"></i>
</td>
<td><a href="#"><strong>Ping</strong></a> on <a href="#">Host_123456</a></td>
</tr>
<tr>
<td class="border-status-unknown">unknown</td>
<td>
<i class="dashboard-icons icon-unhandled"></i>
</td>
<td><a href="#"><strong>Ping</strong></a> on <a href="#">Host_123456</a></td>
</tr>
</tbody>
</table>
</div>
<div class="dashboard-container">
<table class="table table-condensed table-detail">
<tbody>
<tr>
<th colspan="3" class="test">
<a href="#">Dies ist eine tolle Headline</a>
</th>
</tr>
<tr>
<td class="border-status-critical">09.10.</td>
<td>
<i class="dashboard-icons icon-unhandled"></i>
<i class="dashboard-icons icon-flapping"></i>
<i class="dashboard-icons icon-comment"></i>
</td>
<td><a href="#"><strong>Ping</strong></a> on <a href="#">Host_0815</a></td>
</tr>
<tr>
<td class="border-status-unknown">unknown</td>
<td>
<i class="dashboard-icons icon-unhandled"></i>
</td>
<td><a href="#"><strong>Ping</strong></a> on <a href="#">Host_123456</a></td>
</tr>
<tr>
<td class="border-status-warning">11.10.</td>
<td>
<i class="dashboard-icons icon-unhandled"></i>
<i class="dashboard-icons icon-flapping"></i>
<i class="dashboard-icons icon-comment"></i>
</td>
<td><a href="#"><strong>random_06</strong></a> on <a href="#">Host_insertEFFECT</a></td>
</tr>
<tr>
<td class="border-status-unknown">unknown</td>
<td>
<i class="dashboard-icons icon-unhandled"></i>
</td>
<td><a href="#"><strong>Ping</strong></a> on <a href="#">Host_123456</a></td>
</tr>
<tr>
<td class="border-status-unknown">unknown</td>
<td>
<i class="dashboard-icons icon-unhandled"></i>
</td>
<td><a href="#"><strong>Ping</strong></a> on <a href="#">Host_123456</a></td>
</tr>
<tr>
<td class="border-status-warning">11.10.</td>
<td>
<i class="dashboard-icons icon-unhandled"></i>
<i class="dashboard-icons icon-flapping"></i>
<i class="dashboard-icons icon-comment"></i>
</td>
<td><a href="#"><strong>random_06</strong></a> on <a href="#">Host_insertEFFECT</a></td>
</tr>
<tr>
<td class="border-status-warning">11.10.</td>
<td>
<i class="dashboard-icons icon-unhandled"></i>
<i class="dashboard-icons icon-flapping"></i>
<i class="dashboard-icons icon-comment"></i>
</td>
<td><a href="#"><strong>random_06</strong></a> on <a href="#">Host_insertEFFECT</a></td>
</tr>
</tbody>
</table>
</div>
</div><!-- .docu-module -->
</div><!-- .docu-example -->
</div><!-- .docu-section -->
2013-10-09 10:47:59 +02:00
<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>