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

Merge pull request #3458 from Icinga/feature/host-and-service-group-grid-1017 

Host- and servicegroup grid
This commit is contained in:
Eric Lippmann 2018-06-28 11:40:52 +02:00 committed by GitHub
parent fc2374d7c8 02630c2607
commit d19d888d9e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 738 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
application/fonts/fontello-ifont/LICENSE.txt Normal file → Executable file
View File

@ -46,3 +46,12 @@ Font license info
Homepage: http://typicons.com/
## MFG Labs
Copyright (C) 2012 by Daniel Bruce
Author: MFG Labs
License: SIL (http://scripts.sil.org/OFL)
Homepage: http://www.mfglabs.com/

0
application/fonts/fontello-ifont/README.txt Normal file → Executable file
View File

12
application/fonts/fontello-ifont/config.json Normal file → Executable file
View File

@ -821,6 +821,18 @@
"css": "github-circled",
"code": 61595,
"src": "fontawesome"
},
{
"uid": "5eb43711f62fb4dcbef10d0224c28065",
"css": "th-thumb-empty",
"code": 61451,
"src": "mfglabs"
},
{
"uid": "1b58555745e7378f7634ee7c63eada46",
"css": "th-list",
"code": 61449,
"src": "mfglabs"
}
]
}

2
application/fonts/fontello-ifont/css/ifont-codes.css vendored Normal file → Executable file
View File

@ -132,6 +132,8 @@
.icon-check:before { content: '\e883'; } /* '' */
.icon-reschedule:before { content: '\e884'; } /* '' */
.icon-warning-empty:before { content: '\e885'; } /* '' */
.icon-th-list:before { content: '\f009'; } /* '' */
.icon-th-thumb-empty:before { content: '\f00b'; } /* '' */
.icon-github-circled:before { content: '\f09b'; } /* '' */
.icon-history:before { content: '\f1da'; } /* '' */
.icon-binoculars:before { content: '\f1e5'; } /* '' */

14
application/fonts/fontello-ifont/css/ifont-embedded.css vendored Normal file → Executable file
View File

File diff suppressed because one or more lines are too long

2
application/fonts/fontello-ifont/css/ifont-ie7-codes.css vendored Normal file → Executable file
View File

@ -132,6 +132,8 @@
.icon-check { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-reschedule { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-warning-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-th-list { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-th-thumb-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-github-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-history { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-binoculars { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

2
application/fonts/fontello-ifont/css/ifont-ie7.css vendored Normal file → Executable file
View File

@ -143,6 +143,8 @@
.icon-check { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-reschedule { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-warning-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-th-list { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-th-thumb-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-github-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-history { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-binoculars { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

16
application/fonts/fontello-ifont/css/ifont.css vendored Normal file → Executable file
View File

@ -1,11 +1,11 @@
@font-face {
font-family: 'ifont';
src: url('../font/ifont.eot?14085592');
src: url('../font/ifont.eot?14085592#iefix') format('embedded-opentype'),
url('../font/ifont.woff2?14085592') format('woff2'),
url('../font/ifont.woff?14085592') format('woff'),
url('../font/ifont.ttf?14085592') format('truetype'),
url('../font/ifont.svg?14085592#ifont') format('svg');
src: url('../font/ifont.eot?15561604');
src: url('../font/ifont.eot?15561604#iefix') format('embedded-opentype'),
url('../font/ifont.woff2?15561604') format('woff2'),
url('../font/ifont.woff?15561604') format('woff'),
url('../font/ifont.ttf?15561604') format('truetype'),
url('../font/ifont.svg?15561604#ifont') format('svg');
font-weight: normal;
font-style: normal;
}
@ -15,7 +15,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'ifont';
src: url('../font/ifont.svg?14085592#ifont') format('svg');
src: url('../font/ifont.svg?15561604#ifont') format('svg');
}
}
*/
@ -188,6 +188,8 @@
.icon-check:before { content: '\e883'; } /* '' */
.icon-reschedule:before { content: '\e884'; } /* '' */
.icon-warning-empty:before { content: '\e885'; } /* '' */
.icon-th-list:before { content: '\f009'; } /* '' */
.icon-th-thumb-empty:before { content: '\f00b'; } /* '' */
.icon-github-circled:before { content: '\f09b'; } /* '' */
.icon-history:before { content: '\f1da'; } /* '' */
.icon-binoculars:before { content: '\f1e5'; } /* '' */

294
application/fonts/fontello-ifont/demo.html Normal file → Executable file
View File

@ -229,11 +229,11 @@ body {
}
@font-face {
font-family: 'ifont';
src: url('./font/ifont.eot?54126565');
src: url('./font/ifont.eot?54126565#iefix') format('embedded-opentype'),
url('./font/ifont.woff?54126565') format('woff'),
url('./font/ifont.ttf?54126565') format('truetype'),
url('./font/ifont.svg?54126565#ifont') format('svg');
src: url('./font/ifont.eot?97051739');
src: url('./font/ifont.eot?97051739#iefix') format('embedded-opentype'),
url('./font/ifont.woff?97051739') format('woff'),
url('./font/ifont.ttf?97051739') format('truetype'),
url('./font/ifont.svg?97051739#ifont') format('svg');
font-weight: normal;
font-style: normal;
}
@ -275,7 +275,7 @@ body {
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
</style>
<link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/ifont-ie7.css"><![endif]-->
<link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/" + font.fontname + "-ie7.css"><![endif]-->
<script>
function toggleCodes(on) {
var obj = document.getElementById('icons');
@ -291,217 +291,219 @@ body {
</head>
<body>
<div class="container header">
<h1>
ifont
<small>font demo</small>
</h1>
<h1>ifont <small>font demo</small></h1>
<label class="switch">
<input type="checkbox" onclick="toggleCodes(this.checked)">show codes
</label>
</div>
<div id="icons" class="container">
<div class="container" id="icons">
<div class="row">
<div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-dashboard">&#xe800;</i> <span class="i-name">icon-dashboard</span><span class="i-code">0xe800</span></div>
<div title="Code: 0xe801" class="the-icons span3"><i class="demo-icon icon-user">&#xe801;</i> <span class="i-name">icon-user</span><span class="i-code">0xe801</span></div>
<div title="Code: 0xe802" class="the-icons span3"><i class="demo-icon icon-users">&#xe802;</i> <span class="i-name">icon-users</span><span class="i-code">0xe802</span></div>
<div title="Code: 0xe803" class="the-icons span3"><i class="demo-icon icon-ok">&#xe803;</i> <span class="i-name">icon-ok</span><span class="i-code">0xe803</span></div>
<div class="the-icons span3" title="Code: 0xe800"><i class="demo-icon icon-dashboard">&#xe800;</i> <span class="i-name">icon-dashboard</span><span class="i-code">0xe800</span></div>
<div class="the-icons span3" title="Code: 0xe801"><i class="demo-icon icon-user">&#xe801;</i> <span class="i-name">icon-user</span><span class="i-code">0xe801</span></div>
<div class="the-icons span3" title="Code: 0xe802"><i class="demo-icon icon-users">&#xe802;</i> <span class="i-name">icon-users</span><span class="i-code">0xe802</span></div>
<div class="the-icons span3" title="Code: 0xe803"><i class="demo-icon icon-ok">&#xe803;</i> <span class="i-name">icon-ok</span><span class="i-code">0xe803</span></div>
</div>
<div class="row">
<div title="Code: 0xe804" class="the-icons span3"><i class="demo-icon icon-cancel">&#xe804;</i> <span class="i-name">icon-cancel</span><span class="i-code">0xe804</span></div>
<div title="Code: 0xe805" class="the-icons span3"><i class="demo-icon icon-plus">&#xe805;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe805</span></div>
<div title="Code: 0xe806" class="the-icons span3"><i class="demo-icon icon-minus">&#xe806;</i> <span class="i-name">icon-minus</span><span class="i-code">0xe806</span></div>
<div title="Code: 0xe807" class="the-icons span3"><i class="demo-icon icon-folder-empty">&#xe807;</i> <span class="i-name">icon-folder-empty</span><span class="i-code">0xe807</span></div>
<div class="the-icons span3" title="Code: 0xe804"><i class="demo-icon icon-cancel">&#xe804;</i> <span class="i-name">icon-cancel</span><span class="i-code">0xe804</span></div>
<div class="the-icons span3" title="Code: 0xe805"><i class="demo-icon icon-plus">&#xe805;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe805</span></div>
<div class="the-icons span3" title="Code: 0xe806"><i class="demo-icon icon-minus">&#xe806;</i> <span class="i-name">icon-minus</span><span class="i-code">0xe806</span></div>
<div class="the-icons span3" title="Code: 0xe807"><i class="demo-icon icon-folder-empty">&#xe807;</i> <span class="i-name">icon-folder-empty</span><span class="i-code">0xe807</span></div>
</div>
<div class="row">
<div title="Code: 0xe808" class="the-icons span3"><i class="demo-icon icon-download">&#xe808;</i> <span class="i-name">icon-download</span><span class="i-code">0xe808</span></div>
<div title="Code: 0xe809" class="the-icons span3"><i class="demo-icon icon-upload">&#xe809;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe809</span></div>
<div title="Code: 0xe80a" class="the-icons span3"><i class="demo-icon icon-git">&#xe80a;</i> <span class="i-name">icon-git</span><span class="i-code">0xe80a</span></div>
<div title="Code: 0xe80b" class="the-icons span3"><i class="demo-icon icon-cubes">&#xe80b;</i> <span class="i-name">icon-cubes</span><span class="i-code">0xe80b</span></div>
<div class="the-icons span3" title="Code: 0xe808"><i class="demo-icon icon-download">&#xe808;</i> <span class="i-name">icon-download</span><span class="i-code">0xe808</span></div>
<div class="the-icons span3" title="Code: 0xe809"><i class="demo-icon icon-upload">&#xe809;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe809</span></div>
<div class="the-icons span3" title="Code: 0xe80a"><i class="demo-icon icon-git">&#xe80a;</i> <span class="i-name">icon-git</span><span class="i-code">0xe80a</span></div>
<div class="the-icons span3" title="Code: 0xe80b"><i class="demo-icon icon-cubes">&#xe80b;</i> <span class="i-name">icon-cubes</span><span class="i-code">0xe80b</span></div>
</div>
<div class="row">
<div title="Code: 0xe80c" class="the-icons span3"><i class="demo-icon icon-database">&#xe80c;</i> <span class="i-name">icon-database</span><span class="i-code">0xe80c</span></div>
<div title="Code: 0xe80d" class="the-icons span3"><i class="demo-icon icon-gauge">&#xe80d;</i> <span class="i-name">icon-gauge</span><span class="i-code">0xe80d</span></div>
<div title="Code: 0xe80e" class="the-icons span3"><i class="demo-icon icon-sitemap">&#xe80e;</i> <span class="i-name">icon-sitemap</span><span class="i-code">0xe80e</span></div>
<div title="Code: 0xe80f" class="the-icons span3"><i class="demo-icon icon-sort-name-up">&#xe80f;</i> <span class="i-name">icon-sort-name-up</span><span class="i-code">0xe80f</span></div>
<div class="the-icons span3" title="Code: 0xe80c"><i class="demo-icon icon-database">&#xe80c;</i> <span class="i-name">icon-database</span><span class="i-code">0xe80c</span></div>
<div class="the-icons span3" title="Code: 0xe80d"><i class="demo-icon icon-gauge">&#xe80d;</i> <span class="i-name">icon-gauge</span><span class="i-code">0xe80d</span></div>
<div class="the-icons span3" title="Code: 0xe80e"><i class="demo-icon icon-sitemap">&#xe80e;</i> <span class="i-name">icon-sitemap</span><span class="i-code">0xe80e</span></div>
<div class="the-icons span3" title="Code: 0xe80f"><i class="demo-icon icon-sort-name-up">&#xe80f;</i> <span class="i-name">icon-sort-name-up</span><span class="i-code">0xe80f</span></div>
</div>
<div class="row">
<div title="Code: 0xe810" class="the-icons span3"><i class="demo-icon icon-sort-name-down">&#xe810;</i> <span class="i-name">icon-sort-name-down</span><span class="i-code">0xe810</span></div>
<div title="Code: 0xe811" class="the-icons span3"><i class="demo-icon icon-megaphone">&#xe811;</i> <span class="i-name">icon-megaphone</span><span class="i-code">0xe811</span></div>
<div title="Code: 0xe812" class="the-icons span3"><i class="demo-icon icon-bug">&#xe812;</i> <span class="i-name">icon-bug</span><span class="i-code">0xe812</span></div>
<div title="Code: 0xe813" class="the-icons span3"><i class="demo-icon icon-tasks">&#xe813;</i> <span class="i-name">icon-tasks</span><span class="i-code">0xe813</span></div>
<div class="the-icons span3" title="Code: 0xe810"><i class="demo-icon icon-sort-name-down">&#xe810;</i> <span class="i-name">icon-sort-name-down</span><span class="i-code">0xe810</span></div>
<div class="the-icons span3" title="Code: 0xe811"><i class="demo-icon icon-megaphone">&#xe811;</i> <span class="i-name">icon-megaphone</span><span class="i-code">0xe811</span></div>
<div class="the-icons span3" title="Code: 0xe812"><i class="demo-icon icon-bug">&#xe812;</i> <span class="i-name">icon-bug</span><span class="i-code">0xe812</span></div>
<div class="the-icons span3" title="Code: 0xe813"><i class="demo-icon icon-tasks">&#xe813;</i> <span class="i-name">icon-tasks</span><span class="i-code">0xe813</span></div>
</div>
<div class="row">
<div title="Code: 0xe814" class="the-icons span3"><i class="demo-icon icon-filter">&#xe814;</i> <span class="i-name">icon-filter</span><span class="i-code">0xe814</span></div>
<div title="Code: 0xe815" class="the-icons span3"><i class="demo-icon icon-off">&#xe815;</i> <span class="i-name">icon-off</span><span class="i-code">0xe815</span></div>
<div title="Code: 0xe816" class="the-icons span3"><i class="demo-icon icon-book">&#xe816;</i> <span class="i-name">icon-book</span><span class="i-code">0xe816</span></div>
<div title="Code: 0xe817" class="the-icons span3"><i class="demo-icon icon-paste">&#xe817;</i> <span class="i-name">icon-paste</span><span class="i-code">0xe817</span></div>
<div class="the-icons span3" title="Code: 0xe814"><i class="demo-icon icon-filter">&#xe814;</i> <span class="i-name">icon-filter</span><span class="i-code">0xe814</span></div>
<div class="the-icons span3" title="Code: 0xe815"><i class="demo-icon icon-off">&#xe815;</i> <span class="i-name">icon-off</span><span class="i-code">0xe815</span></div>
<div class="the-icons span3" title="Code: 0xe816"><i class="demo-icon icon-book">&#xe816;</i> <span class="i-name">icon-book</span><span class="i-code">0xe816</span></div>
<div class="the-icons span3" title="Code: 0xe817"><i class="demo-icon icon-paste">&#xe817;</i> <span class="i-name">icon-paste</span><span class="i-code">0xe817</span></div>
</div>
<div class="row">
<div title="Code: 0xe818" class="the-icons span3"><i class="demo-icon icon-scissors">&#xe818;</i> <span class="i-name">icon-scissors</span><span class="i-code">0xe818</span></div>
<div title="Code: 0xe819" class="the-icons span3"><i class="demo-icon icon-globe">&#xe819;</i> <span class="i-name">icon-globe</span><span class="i-code">0xe819</span></div>
<div title="Code: 0xe81a" class="the-icons span3"><i class="demo-icon icon-cloud">&#xe81a;</i> <span class="i-name">icon-cloud</span><span class="i-code">0xe81a</span></div>
<div title="Code: 0xe81b" class="the-icons span3"><i class="demo-icon icon-flash">&#xe81b;</i> <span class="i-name">icon-flash</span><span class="i-code">0xe81b</span></div>
<div class="the-icons span3" title="Code: 0xe818"><i class="demo-icon icon-scissors">&#xe818;</i> <span class="i-name">icon-scissors</span><span class="i-code">0xe818</span></div>
<div class="the-icons span3" title="Code: 0xe819"><i class="demo-icon icon-globe">&#xe819;</i> <span class="i-name">icon-globe</span><span class="i-code">0xe819</span></div>
<div class="the-icons span3" title="Code: 0xe81a"><i class="demo-icon icon-cloud">&#xe81a;</i> <span class="i-name">icon-cloud</span><span class="i-code">0xe81a</span></div>
<div class="the-icons span3" title="Code: 0xe81b"><i class="demo-icon icon-flash">&#xe81b;</i> <span class="i-name">icon-flash</span><span class="i-code">0xe81b</span></div>
</div>
<div class="row">
<div title="Code: 0xe81c" class="the-icons span3"><i class="demo-icon icon-barchart">&#xe81c;</i> <span class="i-name">icon-barchart</span><span class="i-code">0xe81c</span></div>
<div title="Code: 0xe81d" class="the-icons span3"><i class="demo-icon icon-down-dir">&#xe81d;</i> <span class="i-name">icon-down-dir</span><span class="i-code">0xe81d</span></div>
<div title="Code: 0xe81e" class="the-icons span3"><i class="demo-icon icon-up-dir">&#xe81e;</i> <span class="i-name">icon-up-dir</span><span class="i-code">0xe81e</span></div>
<div title="Code: 0xe81f" class="the-icons span3"><i class="demo-icon icon-left-dir">&#xe81f;</i> <span class="i-name">icon-left-dir</span><span class="i-code">0xe81f</span></div>
<div class="the-icons span3" title="Code: 0xe81c"><i class="demo-icon icon-barchart">&#xe81c;</i> <span class="i-name">icon-barchart</span><span class="i-code">0xe81c</span></div>
<div class="the-icons span3" title="Code: 0xe81d"><i class="demo-icon icon-down-dir">&#xe81d;</i> <span class="i-name">icon-down-dir</span><span class="i-code">0xe81d</span></div>
<div class="the-icons span3" title="Code: 0xe81e"><i class="demo-icon icon-up-dir">&#xe81e;</i> <span class="i-name">icon-up-dir</span><span class="i-code">0xe81e</span></div>
<div class="the-icons span3" title="Code: 0xe81f"><i class="demo-icon icon-left-dir">&#xe81f;</i> <span class="i-name">icon-left-dir</span><span class="i-code">0xe81f</span></div>
</div>
<div class="row">
<div title="Code: 0xe820" class="the-icons span3"><i class="demo-icon icon-right-dir">&#xe820;</i> <span class="i-name">icon-right-dir</span><span class="i-code">0xe820</span></div>
<div title="Code: 0xe821" class="the-icons span3"><i class="demo-icon icon-down-open">&#xe821;</i> <span class="i-name">icon-down-open</span><span class="i-code">0xe821</span></div>
<div title="Code: 0xe822" class="the-icons span3"><i class="demo-icon icon-right-open">&#xe822;</i> <span class="i-name">icon-right-open</span><span class="i-code">0xe822</span></div>
<div title="Code: 0xe823" class="the-icons span3"><i class="demo-icon icon-up-open">&#xe823;</i> <span class="i-name">icon-up-open</span><span class="i-code">0xe823</span></div>
<div class="the-icons span3" title="Code: 0xe820"><i class="demo-icon icon-right-dir">&#xe820;</i> <span class="i-name">icon-right-dir</span><span class="i-code">0xe820</span></div>
<div class="the-icons span3" title="Code: 0xe821"><i class="demo-icon icon-down-open">&#xe821;</i> <span class="i-name">icon-down-open</span><span class="i-code">0xe821</span></div>
<div class="the-icons span3" title="Code: 0xe822"><i class="demo-icon icon-right-open">&#xe822;</i> <span class="i-name">icon-right-open</span><span class="i-code">0xe822</span></div>
<div class="the-icons span3" title="Code: 0xe823"><i class="demo-icon icon-up-open">&#xe823;</i> <span class="i-name">icon-up-open</span><span class="i-code">0xe823</span></div>
</div>
<div class="row">
<div title="Code: 0xe824" class="the-icons span3"><i class="demo-icon icon-left-open">&#xe824;</i> <span class="i-name">icon-left-open</span><span class="i-code">0xe824</span></div>
<div title="Code: 0xe825" class="the-icons span3"><i class="demo-icon icon-up-big">&#xe825;</i> <span class="i-name">icon-up-big</span><span class="i-code">0xe825</span></div>
<div title="Code: 0xe826" class="the-icons span3"><i class="demo-icon icon-right-big">&#xe826;</i> <span class="i-name">icon-right-big</span><span class="i-code">0xe826</span></div>
<div title="Code: 0xe827" class="the-icons span3"><i class="demo-icon icon-left-big">&#xe827;</i> <span class="i-name">icon-left-big</span><span class="i-code">0xe827</span></div>
<div class="the-icons span3" title="Code: 0xe824"><i class="demo-icon icon-left-open">&#xe824;</i> <span class="i-name">icon-left-open</span><span class="i-code">0xe824</span></div>
<div class="the-icons span3" title="Code: 0xe825"><i class="demo-icon icon-up-big">&#xe825;</i> <span class="i-name">icon-up-big</span><span class="i-code">0xe825</span></div>
<div class="the-icons span3" title="Code: 0xe826"><i class="demo-icon icon-right-big">&#xe826;</i> <span class="i-name">icon-right-big</span><span class="i-code">0xe826</span></div>
<div class="the-icons span3" title="Code: 0xe827"><i class="demo-icon icon-left-big">&#xe827;</i> <span class="i-name">icon-left-big</span><span class="i-code">0xe827</span></div>
</div>
<div class="row">
<div title="Code: 0xe828" class="the-icons span3"><i class="demo-icon icon-down-big">&#xe828;</i> <span class="i-name">icon-down-big</span><span class="i-code">0xe828</span></div>
<div title="Code: 0xe829" class="the-icons span3"><i class="demo-icon icon-resize-full-alt">&#xe829;</i> <span class="i-name">icon-resize-full-alt</span><span class="i-code">0xe829</span></div>
<div title="Code: 0xe82a" class="the-icons span3"><i class="demo-icon icon-resize-full">&#xe82a;</i> <span class="i-name">icon-resize-full</span><span class="i-code">0xe82a</span></div>
<div title="Code: 0xe82b" class="the-icons span3"><i class="demo-icon icon-resize-small">&#xe82b;</i> <span class="i-name">icon-resize-small</span><span class="i-code">0xe82b</span></div>
<div class="the-icons span3" title="Code: 0xe828"><i class="demo-icon icon-down-big">&#xe828;</i> <span class="i-name">icon-down-big</span><span class="i-code">0xe828</span></div>
<div class="the-icons span3" title="Code: 0xe829"><i class="demo-icon icon-resize-full-alt">&#xe829;</i> <span class="i-name">icon-resize-full-alt</span><span class="i-code">0xe829</span></div>
<div class="the-icons span3" title="Code: 0xe82a"><i class="demo-icon icon-resize-full">&#xe82a;</i> <span class="i-name">icon-resize-full</span><span class="i-code">0xe82a</span></div>
<div class="the-icons span3" title="Code: 0xe82b"><i class="demo-icon icon-resize-small">&#xe82b;</i> <span class="i-name">icon-resize-small</span><span class="i-code">0xe82b</span></div>
</div>
<div class="row">
<div title="Code: 0xe82c" class="the-icons span3"><i class="demo-icon icon-move">&#xe82c;</i> <span class="i-name">icon-move</span><span class="i-code">0xe82c</span></div>
<div title="Code: 0xe82d" class="the-icons span3"><i class="demo-icon icon-resize-horizontal">&#xe82d;</i> <span class="i-name">icon-resize-horizontal</span><span class="i-code">0xe82d</span></div>
<div title="Code: 0xe82e" class="the-icons span3"><i class="demo-icon icon-resize-vertical">&#xe82e;</i> <span class="i-name">icon-resize-vertical</span><span class="i-code">0xe82e</span></div>
<div title="Code: 0xe82f" class="the-icons span3"><i class="demo-icon icon-zoom-in">&#xe82f;</i> <span class="i-name">icon-zoom-in</span><span class="i-code">0xe82f</span></div>
<div class="the-icons span3" title="Code: 0xe82c"><i class="demo-icon icon-move">&#xe82c;</i> <span class="i-name">icon-move</span><span class="i-code">0xe82c</span></div>
<div class="the-icons span3" title="Code: 0xe82d"><i class="demo-icon icon-resize-horizontal">&#xe82d;</i> <span class="i-name">icon-resize-horizontal</span><span class="i-code">0xe82d</span></div>
<div class="the-icons span3" title="Code: 0xe82e"><i class="demo-icon icon-resize-vertical">&#xe82e;</i> <span class="i-name">icon-resize-vertical</span><span class="i-code">0xe82e</span></div>
<div class="the-icons span3" title="Code: 0xe82f"><i class="demo-icon icon-zoom-in">&#xe82f;</i> <span class="i-name">icon-zoom-in</span><span class="i-code">0xe82f</span></div>
</div>
<div class="row">
<div title="Code: 0xe830" class="the-icons span3"><i class="demo-icon icon-block">&#xe830;</i> <span class="i-name">icon-block</span><span class="i-code">0xe830</span></div>
<div title="Code: 0xe831" class="the-icons span3"><i class="demo-icon icon-zoom-out">&#xe831;</i> <span class="i-name">icon-zoom-out</span><span class="i-code">0xe831</span></div>
<div title="Code: 0xe832" class="the-icons span3"><i class="demo-icon icon-lightbulb">&#xe832;</i> <span class="i-name">icon-lightbulb</span><span class="i-code">0xe832</span></div>
<div title="Code: 0xe833" class="the-icons span3"><i class="demo-icon icon-clock">&#xe833;</i> <span class="i-name">icon-clock</span><span class="i-code">0xe833</span></div>
<div class="the-icons span3" title="Code: 0xe830"><i class="demo-icon icon-block">&#xe830;</i> <span class="i-name">icon-block</span><span class="i-code">0xe830</span></div>
<div class="the-icons span3" title="Code: 0xe831"><i class="demo-icon icon-zoom-out">&#xe831;</i> <span class="i-name">icon-zoom-out</span><span class="i-code">0xe831</span></div>
<div class="the-icons span3" title="Code: 0xe832"><i class="demo-icon icon-lightbulb">&#xe832;</i> <span class="i-name">icon-lightbulb</span><span class="i-code">0xe832</span></div>
<div class="the-icons span3" title="Code: 0xe833"><i class="demo-icon icon-clock">&#xe833;</i> <span class="i-name">icon-clock</span><span class="i-code">0xe833</span></div>
</div>
<div class="row">
<div title="Code: 0xe834" class="the-icons span3"><i class="demo-icon icon-volume-up">&#xe834;</i> <span class="i-name">icon-volume-up</span><span class="i-code">0xe834</span></div>
<div title="Code: 0xe835" class="the-icons span3"><i class="demo-icon icon-volume-down">&#xe835;</i> <span class="i-name">icon-volume-down</span><span class="i-code">0xe835</span></div>
<div title="Code: 0xe836" class="the-icons span3"><i class="demo-icon icon-volume-off">&#xe836;</i> <span class="i-name">icon-volume-off</span><span class="i-code">0xe836</span></div>
<div title="Code: 0xe837" class="the-icons span3"><i class="demo-icon icon-mute">&#xe837;</i> <span class="i-name">icon-mute</span><span class="i-code">0xe837</span></div>
<div class="the-icons span3" title="Code: 0xe834"><i class="demo-icon icon-volume-up">&#xe834;</i> <span class="i-name">icon-volume-up</span><span class="i-code">0xe834</span></div>
<div class="the-icons span3" title="Code: 0xe835"><i class="demo-icon icon-volume-down">&#xe835;</i> <span class="i-name">icon-volume-down</span><span class="i-code">0xe835</span></div>
<div class="the-icons span3" title="Code: 0xe836"><i class="demo-icon icon-volume-off">&#xe836;</i> <span class="i-name">icon-volume-off</span><span class="i-code">0xe836</span></div>
<div class="the-icons span3" title="Code: 0xe837"><i class="demo-icon icon-mute">&#xe837;</i> <span class="i-name">icon-mute</span><span class="i-code">0xe837</span></div>
</div>
<div class="row">
<div title="Code: 0xe838" class="the-icons span3"><i class="demo-icon icon-mic">&#xe838;</i> <span class="i-name">icon-mic</span><span class="i-code">0xe838</span></div>
<div title="Code: 0xe839" class="the-icons span3"><i class="demo-icon icon-endtime">&#xe839;</i> <span class="i-name">icon-endtime</span><span class="i-code">0xe839</span></div>
<div title="Code: 0xe83a" class="the-icons span3"><i class="demo-icon icon-starttime">&#xe83a;</i> <span class="i-name">icon-starttime</span><span class="i-code">0xe83a</span></div>
<div title="Code: 0xe83b" class="the-icons span3"><i class="demo-icon icon-calendar-empty">&#xe83b;</i> <span class="i-name">icon-calendar-empty</span><span class="i-code">0xe83b</span></div>
<div class="the-icons span3" title="Code: 0xe838"><i class="demo-icon icon-mic">&#xe838;</i> <span class="i-name">icon-mic</span><span class="i-code">0xe838</span></div>
<div class="the-icons span3" title="Code: 0xe839"><i class="demo-icon icon-endtime">&#xe839;</i> <span class="i-name">icon-endtime</span><span class="i-code">0xe839</span></div>
<div class="the-icons span3" title="Code: 0xe83a"><i class="demo-icon icon-starttime">&#xe83a;</i> <span class="i-name">icon-starttime</span><span class="i-code">0xe83a</span></div>
<div class="the-icons span3" title="Code: 0xe83b"><i class="demo-icon icon-calendar-empty">&#xe83b;</i> <span class="i-name">icon-calendar-empty</span><span class="i-code">0xe83b</span></div>
</div>
<div class="row">
<div title="Code: 0xe83c" class="the-icons span3"><i class="demo-icon icon-calendar">&#xe83c;</i> <span class="i-name">icon-calendar</span><span class="i-code">0xe83c</span></div>
<div title="Code: 0xe83d" class="the-icons span3"><i class="demo-icon icon-wrench">&#xe83d;</i> <span class="i-name">icon-wrench</span><span class="i-code">0xe83d</span></div>
<div title="Code: 0xe83e" class="the-icons span3"><i class="demo-icon icon-sliders">&#xe83e;</i> <span class="i-name">icon-sliders</span><span class="i-code">0xe83e</span></div>
<div title="Code: 0xe83f" class="the-icons span3"><i class="demo-icon icon-services">&#xe83f;</i> <span class="i-name">icon-services</span><span class="i-code">0xe83f</span></div>
<div class="the-icons span3" title="Code: 0xe83c"><i class="demo-icon icon-calendar">&#xe83c;</i> <span class="i-name">icon-calendar</span><span class="i-code">0xe83c</span></div>
<div class="the-icons span3" title="Code: 0xe83d"><i class="demo-icon icon-wrench">&#xe83d;</i> <span class="i-name">icon-wrench</span><span class="i-code">0xe83d</span></div>
<div class="the-icons span3" title="Code: 0xe83e"><i class="demo-icon icon-sliders">&#xe83e;</i> <span class="i-name">icon-sliders</span><span class="i-code">0xe83e</span></div>
<div class="the-icons span3" title="Code: 0xe83f"><i class="demo-icon icon-services">&#xe83f;</i> <span class="i-name">icon-services</span><span class="i-code">0xe83f</span></div>
</div>
<div class="row">
<div title="Code: 0xe840" class="the-icons span3"><i class="demo-icon icon-service">&#xe840;</i> <span class="i-name">icon-service</span><span class="i-code">0xe840</span></div>
<div title="Code: 0xe841" class="the-icons span3"><i class="demo-icon icon-phone">&#xe841;</i> <span class="i-name">icon-phone</span><span class="i-code">0xe841</span></div>
<div title="Code: 0xe842" class="the-icons span3"><i class="demo-icon icon-file-pdf">&#xe842;</i> <span class="i-name">icon-file-pdf</span><span class="i-code">0xe842</span></div>
<div title="Code: 0xe843" class="the-icons span3"><i class="demo-icon icon-file-word">&#xe843;</i> <span class="i-name">icon-file-word</span><span class="i-code">0xe843</span></div>
<div class="the-icons span3" title="Code: 0xe840"><i class="demo-icon icon-service">&#xe840;</i> <span class="i-name">icon-service</span><span class="i-code">0xe840</span></div>
<div class="the-icons span3" title="Code: 0xe841"><i class="demo-icon icon-phone">&#xe841;</i> <span class="i-name">icon-phone</span><span class="i-code">0xe841</span></div>
<div class="the-icons span3" title="Code: 0xe842"><i class="demo-icon icon-file-pdf">&#xe842;</i> <span class="i-name">icon-file-pdf</span><span class="i-code">0xe842</span></div>
<div class="the-icons span3" title="Code: 0xe843"><i class="demo-icon icon-file-word">&#xe843;</i> <span class="i-name">icon-file-word</span><span class="i-code">0xe843</span></div>
</div>
<div class="row">
<div title="Code: 0xe844" class="the-icons span3"><i class="demo-icon icon-file-excel">&#xe844;</i> <span class="i-name">icon-file-excel</span><span class="i-code">0xe844</span></div>
<div title="Code: 0xe845" class="the-icons span3"><i class="demo-icon icon-doc-text">&#xe845;</i> <span class="i-name">icon-doc-text</span><span class="i-code">0xe845</span></div>
<div title="Code: 0xe846" class="the-icons span3"><i class="demo-icon icon-trash">&#xe846;</i> <span class="i-name">icon-trash</span><span class="i-code">0xe846</span></div>
<div title="Code: 0xe847" class="the-icons span3"><i class="demo-icon icon-comment-empty">&#xe847;</i> <span class="i-name">icon-comment-empty</span><span class="i-code">0xe847</span></div>
<div class="the-icons span3" title="Code: 0xe844"><i class="demo-icon icon-file-excel">&#xe844;</i> <span class="i-name">icon-file-excel</span><span class="i-code">0xe844</span></div>
<div class="the-icons span3" title="Code: 0xe845"><i class="demo-icon icon-doc-text">&#xe845;</i> <span class="i-name">icon-doc-text</span><span class="i-code">0xe845</span></div>
<div class="the-icons span3" title="Code: 0xe846"><i class="demo-icon icon-trash">&#xe846;</i> <span class="i-name">icon-trash</span><span class="i-code">0xe846</span></div>
<div class="the-icons span3" title="Code: 0xe847"><i class="demo-icon icon-comment-empty">&#xe847;</i> <span class="i-name">icon-comment-empty</span><span class="i-code">0xe847</span></div>
</div>
<div class="row">
<div title="Code: 0xe848" class="the-icons span3"><i class="demo-icon icon-comment">&#xe848;</i> <span class="i-name">icon-comment</span><span class="i-code">0xe848</span></div>
<div title="Code: 0xe849" class="the-icons span3"><i class="demo-icon icon-chat">&#xe849;</i> <span class="i-name">icon-chat</span><span class="i-code">0xe849</span></div>
<div title="Code: 0xe84a" class="the-icons span3"><i class="demo-icon icon-chat-empty">&#xe84a;</i> <span class="i-name">icon-chat-empty</span><span class="i-code">0xe84a</span></div>
<div title="Code: 0xe84b" class="the-icons span3"><i class="demo-icon icon-bell">&#xe84b;</i> <span class="i-name">icon-bell</span><span class="i-code">0xe84b</span></div>
<div class="the-icons span3" title="Code: 0xe848"><i class="demo-icon icon-comment">&#xe848;</i> <span class="i-name">icon-comment</span><span class="i-code">0xe848</span></div>
<div class="the-icons span3" title="Code: 0xe849"><i class="demo-icon icon-chat">&#xe849;</i> <span class="i-name">icon-chat</span><span class="i-code">0xe849</span></div>
<div class="the-icons span3" title="Code: 0xe84a"><i class="demo-icon icon-chat-empty">&#xe84a;</i> <span class="i-name">icon-chat-empty</span><span class="i-code">0xe84a</span></div>
<div class="the-icons span3" title="Code: 0xe84b"><i class="demo-icon icon-bell">&#xe84b;</i> <span class="i-name">icon-bell</span><span class="i-code">0xe84b</span></div>
</div>
<div class="row">
<div title="Code: 0xe84c" class="the-icons span3"><i class="demo-icon icon-bell-alt">&#xe84c;</i> <span class="i-name">icon-bell-alt</span><span class="i-code">0xe84c</span></div>
<div title="Code: 0xe84d" class="the-icons span3"><i class="demo-icon icon-attention-alt">&#xe84d;</i> <span class="i-name">icon-attention-alt</span><span class="i-code">0xe84d</span></div>
<div title="Code: 0xe84e" class="the-icons span3"><i class="demo-icon icon-print">&#xe84e;</i> <span class="i-name">icon-print</span><span class="i-code">0xe84e</span></div>
<div title="Code: 0xe84f" class="the-icons span3"><i class="demo-icon icon-edit">&#xe84f;</i> <span class="i-name">icon-edit</span><span class="i-code">0xe84f</span></div>
<div class="the-icons span3" title="Code: 0xe84c"><i class="demo-icon icon-bell-alt">&#xe84c;</i> <span class="i-name">icon-bell-alt</span><span class="i-code">0xe84c</span></div>
<div class="the-icons span3" title="Code: 0xe84d"><i class="demo-icon icon-attention-alt">&#xe84d;</i> <span class="i-name">icon-attention-alt</span><span class="i-code">0xe84d</span></div>
<div class="the-icons span3" title="Code: 0xe84e"><i class="demo-icon icon-print">&#xe84e;</i> <span class="i-name">icon-print</span><span class="i-code">0xe84e</span></div>
<div class="the-icons span3" title="Code: 0xe84f"><i class="demo-icon icon-edit">&#xe84f;</i> <span class="i-name">icon-edit</span><span class="i-code">0xe84f</span></div>
</div>
<div class="row">
<div title="Code: 0xe850" class="the-icons span3"><i class="demo-icon icon-forward">&#xe850;</i> <span class="i-name">icon-forward</span><span class="i-code">0xe850</span></div>
<div title="Code: 0xe851" class="the-icons span3"><i class="demo-icon icon-reply">&#xe851;</i> <span class="i-name">icon-reply</span><span class="i-code">0xe851</span></div>
<div title="Code: 0xe852" class="the-icons span3"><i class="demo-icon icon-reply-all">&#xe852;</i> <span class="i-name">icon-reply-all</span><span class="i-code">0xe852</span></div>
<div title="Code: 0xe853" class="the-icons span3"><i class="demo-icon icon-eye">&#xe853;</i> <span class="i-name">icon-eye</span><span class="i-code">0xe853</span></div>
<div class="the-icons span3" title="Code: 0xe850"><i class="demo-icon icon-forward">&#xe850;</i> <span class="i-name">icon-forward</span><span class="i-code">0xe850</span></div>
<div class="the-icons span3" title="Code: 0xe851"><i class="demo-icon icon-reply">&#xe851;</i> <span class="i-name">icon-reply</span><span class="i-code">0xe851</span></div>
<div class="the-icons span3" title="Code: 0xe852"><i class="demo-icon icon-reply-all">&#xe852;</i> <span class="i-name">icon-reply-all</span><span class="i-code">0xe852</span></div>
<div class="the-icons span3" title="Code: 0xe853"><i class="demo-icon icon-eye">&#xe853;</i> <span class="i-name">icon-eye</span><span class="i-code">0xe853</span></div>
</div>
<div class="row">
<div title="Code: 0xe854" class="the-icons span3"><i class="demo-icon icon-tag">&#xe854;</i> <span class="i-name">icon-tag</span><span class="i-code">0xe854</span></div>
<div title="Code: 0xe855" class="the-icons span3"><i class="demo-icon icon-tags">&#xe855;</i> <span class="i-name">icon-tags</span><span class="i-code">0xe855</span></div>
<div title="Code: 0xe856" class="the-icons span3"><i class="demo-icon icon-lock-open-alt">&#xe856;</i> <span class="i-name">icon-lock-open-alt</span><span class="i-code">0xe856</span></div>
<div title="Code: 0xe857" class="the-icons span3"><i class="demo-icon icon-lock-open">&#xe857;</i> <span class="i-name">icon-lock-open</span><span class="i-code">0xe857</span></div>
<div class="the-icons span3" title="Code: 0xe854"><i class="demo-icon icon-tag">&#xe854;</i> <span class="i-name">icon-tag</span><span class="i-code">0xe854</span></div>
<div class="the-icons span3" title="Code: 0xe855"><i class="demo-icon icon-tags">&#xe855;</i> <span class="i-name">icon-tags</span><span class="i-code">0xe855</span></div>
<div class="the-icons span3" title="Code: 0xe856"><i class="demo-icon icon-lock-open-alt">&#xe856;</i> <span class="i-name">icon-lock-open-alt</span><span class="i-code">0xe856</span></div>
<div class="the-icons span3" title="Code: 0xe857"><i class="demo-icon icon-lock-open">&#xe857;</i> <span class="i-name">icon-lock-open</span><span class="i-code">0xe857</span></div>
</div>
<div class="row">
<div title="Code: 0xe858" class="the-icons span3"><i class="demo-icon icon-lock">&#xe858;</i> <span class="i-name">icon-lock</span><span class="i-code">0xe858</span></div>
<div title="Code: 0xe859" class="the-icons span3"><i class="demo-icon icon-home">&#xe859;</i> <span class="i-name">icon-home</span><span class="i-code">0xe859</span></div>
<div title="Code: 0xe85a" class="the-icons span3"><i class="demo-icon icon-info">&#xe85a;</i> <span class="i-name">icon-info</span><span class="i-code">0xe85a</span></div>
<div title="Code: 0xe85b" class="the-icons span3"><i class="demo-icon icon-help">&#xe85b;</i> <span class="i-name">icon-help</span><span class="i-code">0xe85b</span></div>
<div class="the-icons span3" title="Code: 0xe858"><i class="demo-icon icon-lock">&#xe858;</i> <span class="i-name">icon-lock</span><span class="i-code">0xe858</span></div>
<div class="the-icons span3" title="Code: 0xe859"><i class="demo-icon icon-home">&#xe859;</i> <span class="i-name">icon-home</span><span class="i-code">0xe859</span></div>
<div class="the-icons span3" title="Code: 0xe85a"><i class="demo-icon icon-info">&#xe85a;</i> <span class="i-name">icon-info</span><span class="i-code">0xe85a</span></div>
<div class="the-icons span3" title="Code: 0xe85b"><i class="demo-icon icon-help">&#xe85b;</i> <span class="i-name">icon-help</span><span class="i-code">0xe85b</span></div>
</div>
<div class="row">
<div title="Code: 0xe85c" class="the-icons span3"><i class="demo-icon icon-search">&#xe85c;</i> <span class="i-name">icon-search</span><span class="i-code">0xe85c</span></div>
<div title="Code: 0xe85d" class="the-icons span3"><i class="demo-icon icon-flapping">&#xe85d;</i> <span class="i-name">icon-flapping</span><span class="i-code">0xe85d</span></div>
<div title="Code: 0xe85e" class="the-icons span3"><i class="demo-icon icon-rewind">&#xe85e;</i> <span class="i-name">icon-rewind</span><span class="i-code">0xe85e</span></div>
<div title="Code: 0xe85f" class="the-icons span3"><i class="demo-icon icon-chart-line">&#xe85f;</i> <span class="i-name">icon-chart-line</span><span class="i-code">0xe85f</span></div>
<div class="the-icons span3" title="Code: 0xe85c"><i class="demo-icon icon-search">&#xe85c;</i> <span class="i-name">icon-search</span><span class="i-code">0xe85c</span></div>
<div class="the-icons span3" title="Code: 0xe85d"><i class="demo-icon icon-flapping">&#xe85d;</i> <span class="i-name">icon-flapping</span><span class="i-code">0xe85d</span></div>
<div class="the-icons span3" title="Code: 0xe85e"><i class="demo-icon icon-rewind">&#xe85e;</i> <span class="i-name">icon-rewind</span><span class="i-code">0xe85e</span></div>
<div class="the-icons span3" title="Code: 0xe85f"><i class="demo-icon icon-chart-line">&#xe85f;</i> <span class="i-name">icon-chart-line</span><span class="i-code">0xe85f</span></div>
</div>
<div class="row">
<div title="Code: 0xe860" class="the-icons span3"><i class="demo-icon icon-bell-off">&#xe860;</i> <span class="i-name">icon-bell-off</span><span class="i-code">0xe860</span></div>
<div title="Code: 0xe861" class="the-icons span3"><i class="demo-icon icon-bell-off-empty">&#xe861;</i> <span class="i-name">icon-bell-off-empty</span><span class="i-code">0xe861</span></div>
<div title="Code: 0xe862" class="the-icons span3"><i class="demo-icon icon-plug">&#xe862;</i> <span class="i-name">icon-plug</span><span class="i-code">0xe862</span></div>
<div title="Code: 0xe863" class="the-icons span3"><i class="demo-icon icon-eye-off">&#xe863;</i> <span class="i-name">icon-eye-off</span><span class="i-code">0xe863</span></div>
<div class="the-icons span3" title="Code: 0xe860"><i class="demo-icon icon-bell-off">&#xe860;</i> <span class="i-name">icon-bell-off</span><span class="i-code">0xe860</span></div>
<div class="the-icons span3" title="Code: 0xe861"><i class="demo-icon icon-bell-off-empty">&#xe861;</i> <span class="i-name">icon-bell-off-empty</span><span class="i-code">0xe861</span></div>
<div class="the-icons span3" title="Code: 0xe862"><i class="demo-icon icon-plug">&#xe862;</i> <span class="i-name">icon-plug</span><span class="i-code">0xe862</span></div>
<div class="the-icons span3" title="Code: 0xe863"><i class="demo-icon icon-eye-off">&#xe863;</i> <span class="i-name">icon-eye-off</span><span class="i-code">0xe863</span></div>
</div>
<div class="row">
<div title="Code: 0xe864" class="the-icons span3"><i class="demo-icon icon-arrows-cw">&#xe864;</i> <span class="i-name">icon-arrows-cw</span><span class="i-code">0xe864</span></div>
<div title="Code: 0xe865" class="the-icons span3"><i class="demo-icon icon-cw">&#xe865;</i> <span class="i-name">icon-cw</span><span class="i-code">0xe865</span></div>
<div title="Code: 0xe866" class="the-icons span3"><i class="demo-icon icon-host">&#xe866;</i> <span class="i-name">icon-host</span><span class="i-code">0xe866</span></div>
<div title="Code: 0xe867" class="the-icons span3"><i class="demo-icon icon-thumbs-up">&#xe867;</i> <span class="i-name">icon-thumbs-up</span><span class="i-code">0xe867</span></div>
<div class="the-icons span3" title="Code: 0xe864"><i class="demo-icon icon-arrows-cw">&#xe864;</i> <span class="i-name">icon-arrows-cw</span><span class="i-code">0xe864</span></div>
<div class="the-icons span3" title="Code: 0xe865"><i class="demo-icon icon-cw">&#xe865;</i> <span class="i-name">icon-cw</span><span class="i-code">0xe865</span></div>
<div class="the-icons span3" title="Code: 0xe866"><i class="demo-icon icon-host">&#xe866;</i> <span class="i-name">icon-host</span><span class="i-code">0xe866</span></div>
<div class="the-icons span3" title="Code: 0xe867"><i class="demo-icon icon-thumbs-up">&#xe867;</i> <span class="i-name">icon-thumbs-up</span><span class="i-code">0xe867</span></div>
</div>
<div class="row">
<div title="Code: 0xe868" class="the-icons span3"><i class="demo-icon icon-thumbs-down">&#xe868;</i> <span class="i-name">icon-thumbs-down</span><span class="i-code">0xe868</span></div>
<div title="Code: 0xe869" class="the-icons span3"><i class="demo-icon icon-spinner">&#xe869;</i> <span class="i-name">icon-spinner</span><span class="i-code">0xe869</span></div>
<div title="Code: 0xe86a" class="the-icons span3"><i class="demo-icon icon-attach">&#xe86a;</i> <span class="i-name">icon-attach</span><span class="i-code">0xe86a</span></div>
<div title="Code: 0xe86b" class="the-icons span3"><i class="demo-icon icon-keyboard">&#xe86b;</i> <span class="i-name">icon-keyboard</span><span class="i-code">0xe86b</span></div>
<div class="the-icons span3" title="Code: 0xe868"><i class="demo-icon icon-thumbs-down">&#xe868;</i> <span class="i-name">icon-thumbs-down</span><span class="i-code">0xe868</span></div>
<div class="the-icons span3" title="Code: 0xe869"><i class="demo-icon icon-spinner">&#xe869;</i> <span class="i-name">icon-spinner</span><span class="i-code">0xe869</span></div>
<div class="the-icons span3" title="Code: 0xe86a"><i class="demo-icon icon-attach">&#xe86a;</i> <span class="i-name">icon-attach</span><span class="i-code">0xe86a</span></div>
<div class="the-icons span3" title="Code: 0xe86b"><i class="demo-icon icon-keyboard">&#xe86b;</i> <span class="i-name">icon-keyboard</span><span class="i-code">0xe86b</span></div>
</div>
<div class="row">
<div title="Code: 0xe86c" class="the-icons span3"><i class="demo-icon icon-menu">&#xe86c;</i> <span class="i-name">icon-menu</span><span class="i-code">0xe86c</span></div>
<div title="Code: 0xe86d" class="the-icons span3"><i class="demo-icon icon-wifi">&#xe86d;</i> <span class="i-name">icon-wifi</span><span class="i-code">0xe86d</span></div>
<div title="Code: 0xe86e" class="the-icons span3"><i class="demo-icon icon-moon">&#xe86e;</i> <span class="i-name">icon-moon</span><span class="i-code">0xe86e</span></div>
<div title="Code: 0xe86f" class="the-icons span3"><i class="demo-icon icon-chart-pie">&#xe86f;</i> <span class="i-name">icon-chart-pie</span><span class="i-code">0xe86f</span></div>
<div class="the-icons span3" title="Code: 0xe86c"><i class="demo-icon icon-menu">&#xe86c;</i> <span class="i-name">icon-menu</span><span class="i-code">0xe86c</span></div>
<div class="the-icons span3" title="Code: 0xe86d"><i class="demo-icon icon-wifi">&#xe86d;</i> <span class="i-name">icon-wifi</span><span class="i-code">0xe86d</span></div>
<div class="the-icons span3" title="Code: 0xe86e"><i class="demo-icon icon-moon">&#xe86e;</i> <span class="i-name">icon-moon</span><span class="i-code">0xe86e</span></div>
<div class="the-icons span3" title="Code: 0xe86f"><i class="demo-icon icon-chart-pie">&#xe86f;</i> <span class="i-name">icon-chart-pie</span><span class="i-code">0xe86f</span></div>
</div>
<div class="row">
<div title="Code: 0xe870" class="the-icons span3"><i class="demo-icon icon-chart-area">&#xe870;</i> <span class="i-name">icon-chart-area</span><span class="i-code">0xe870</span></div>
<div title="Code: 0xe871" class="the-icons span3"><i class="demo-icon icon-chart-bar">&#xe871;</i> <span class="i-name">icon-chart-bar</span><span class="i-code">0xe871</span></div>
<div title="Code: 0xe872" class="the-icons span3"><i class="demo-icon icon-beaker">&#xe872;</i> <span class="i-name">icon-beaker</span><span class="i-code">0xe872</span></div>
<div title="Code: 0xe873" class="the-icons span3"><i class="demo-icon icon-magic">&#xe873;</i> <span class="i-name">icon-magic</span><span class="i-code">0xe873</span></div>
<div class="the-icons span3" title="Code: 0xe870"><i class="demo-icon icon-chart-area">&#xe870;</i> <span class="i-name">icon-chart-area</span><span class="i-code">0xe870</span></div>
<div class="the-icons span3" title="Code: 0xe871"><i class="demo-icon icon-chart-bar">&#xe871;</i> <span class="i-name">icon-chart-bar</span><span class="i-code">0xe871</span></div>
<div class="the-icons span3" title="Code: 0xe872"><i class="demo-icon icon-beaker">&#xe872;</i> <span class="i-name">icon-beaker</span><span class="i-code">0xe872</span></div>
<div class="the-icons span3" title="Code: 0xe873"><i class="demo-icon icon-magic">&#xe873;</i> <span class="i-name">icon-magic</span><span class="i-code">0xe873</span></div>
</div>
<div class="row">
<div title="Code: 0xe874" class="the-icons span3"><i class="demo-icon icon-spin6 animate-spin">&#xe874;</i> <span class="i-name">icon-spin6</span><span class="i-code">0xe874</span></div>
<div title="Code: 0xe875" class="the-icons span3"><i class="demo-icon icon-down-small">&#xe875;</i> <span class="i-name">icon-down-small</span><span class="i-code">0xe875</span></div>
<div title="Code: 0xe876" class="the-icons span3"><i class="demo-icon icon-left-small">&#xe876;</i> <span class="i-name">icon-left-small</span><span class="i-code">0xe876</span></div>
<div title="Code: 0xe877" class="the-icons span3"><i class="demo-icon icon-right-small">&#xe877;</i> <span class="i-name">icon-right-small</span><span class="i-code">0xe877</span></div>
<div class="the-icons span3" title="Code: 0xe874"><i class="demo-icon icon-spin6 animate-spin">&#xe874;</i> <span class="i-name">icon-spin6</span><span class="i-code">0xe874</span></div>
<div class="the-icons span3" title="Code: 0xe875"><i class="demo-icon icon-down-small">&#xe875;</i> <span class="i-name">icon-down-small</span><span class="i-code">0xe875</span></div>
<div class="the-icons span3" title="Code: 0xe876"><i class="demo-icon icon-left-small">&#xe876;</i> <span class="i-name">icon-left-small</span><span class="i-code">0xe876</span></div>
<div class="the-icons span3" title="Code: 0xe877"><i class="demo-icon icon-right-small">&#xe877;</i> <span class="i-name">icon-right-small</span><span class="i-code">0xe877</span></div>
</div>
<div class="row">
<div title="Code: 0xe878" class="the-icons span3"><i class="demo-icon icon-up-small">&#xe878;</i> <span class="i-name">icon-up-small</span><span class="i-code">0xe878</span></div>
<div title="Code: 0xe879" class="the-icons span3"><i class="demo-icon icon-pin">&#xe879;</i> <span class="i-name">icon-pin</span><span class="i-code">0xe879</span></div>
<div title="Code: 0xe87a" class="the-icons span3"><i class="demo-icon icon-angle-double-left">&#xe87a;</i> <span class="i-name">icon-angle-double-left</span><span class="i-code">0xe87a</span></div>
<div title="Code: 0xe87b" class="the-icons span3"><i class="demo-icon icon-angle-double-right">&#xe87b;</i> <span class="i-name">icon-angle-double-right</span><span class="i-code">0xe87b</span></div>
<div class="the-icons span3" title="Code: 0xe878"><i class="demo-icon icon-up-small">&#xe878;</i> <span class="i-name">icon-up-small</span><span class="i-code">0xe878</span></div>
<div class="the-icons span3" title="Code: 0xe879"><i class="demo-icon icon-pin">&#xe879;</i> <span class="i-name">icon-pin</span><span class="i-code">0xe879</span></div>
<div class="the-icons span3" title="Code: 0xe87a"><i class="demo-icon icon-angle-double-left">&#xe87a;</i> <span class="i-name">icon-angle-double-left</span><span class="i-code">0xe87a</span></div>
<div class="the-icons span3" title="Code: 0xe87b"><i class="demo-icon icon-angle-double-right">&#xe87b;</i> <span class="i-name">icon-angle-double-right</span><span class="i-code">0xe87b</span></div>
</div>
<div class="row">
<div title="Code: 0xe87c" class="the-icons span3"><i class="demo-icon icon-circle">&#xe87c;</i> <span class="i-name">icon-circle</span><span class="i-code">0xe87c</span></div>
<div title="Code: 0xe87d" class="the-icons span3"><i class="demo-icon icon-info-circled">&#xe87d;</i> <span class="i-name">icon-info-circled</span><span class="i-code">0xe87d</span></div>
<div title="Code: 0xe87e" class="the-icons span3"><i class="demo-icon icon-twitter">&#xe87e;</i> <span class="i-name">icon-twitter</span><span class="i-code">0xe87e</span></div>
<div title="Code: 0xe87f" class="the-icons span3"><i class="demo-icon icon-facebook-squared">&#xe87f;</i> <span class="i-name">icon-facebook-squared</span><span class="i-code">0xe87f</span></div>
<div class="the-icons span3" title="Code: 0xe87c"><i class="demo-icon icon-circle">&#xe87c;</i> <span class="i-name">icon-circle</span><span class="i-code">0xe87c</span></div>
<div class="the-icons span3" title="Code: 0xe87d"><i class="demo-icon icon-info-circled">&#xe87d;</i> <span class="i-name">icon-info-circled</span><span class="i-code">0xe87d</span></div>
<div class="the-icons span3" title="Code: 0xe87e"><i class="demo-icon icon-twitter">&#xe87e;</i> <span class="i-name">icon-twitter</span><span class="i-code">0xe87e</span></div>
<div class="the-icons span3" title="Code: 0xe87f"><i class="demo-icon icon-facebook-squared">&#xe87f;</i> <span class="i-name">icon-facebook-squared</span><span class="i-code">0xe87f</span></div>
</div>
<div class="row">
<div title="Code: 0xe880" class="the-icons span3"><i class="demo-icon icon-gplus-squared">&#xe880;</i> <span class="i-name">icon-gplus-squared</span><span class="i-code">0xe880</span></div>
<div title="Code: 0xe881" class="the-icons span3"><i class="demo-icon icon-attention-circled">&#xe881;</i> <span class="i-name">icon-attention-circled</span><span class="i-code">0xe881</span></div>
<div title="Code: 0xe883" class="the-icons span3"><i class="demo-icon icon-check">&#xe883;</i> <span class="i-name">icon-check</span><span class="i-code">0xe883</span></div>
<div title="Code: 0xe884" class="the-icons span3"><i class="demo-icon icon-reschedule">&#xe884;</i> <span class="i-name">icon-reschedule</span><span class="i-code">0xe884</span></div>
<div class="the-icons span3" title="Code: 0xe880"><i class="demo-icon icon-gplus-squared">&#xe880;</i> <span class="i-name">icon-gplus-squared</span><span class="i-code">0xe880</span></div>
<div class="the-icons span3" title="Code: 0xe881"><i class="demo-icon icon-attention-circled">&#xe881;</i> <span class="i-name">icon-attention-circled</span><span class="i-code">0xe881</span></div>
<div class="the-icons span3" title="Code: 0xe883"><i class="demo-icon icon-check">&#xe883;</i> <span class="i-name">icon-check</span><span class="i-code">0xe883</span></div>
<div class="the-icons span3" title="Code: 0xe884"><i class="demo-icon icon-reschedule">&#xe884;</i> <span class="i-name">icon-reschedule</span><span class="i-code">0xe884</span></div>
</div>
<div class="row">
<div title="Code: 0xe885" class="the-icons span3"><i class="demo-icon icon-warning-empty">&#xe885;</i> <span class="i-name">icon-warning-empty</span><span class="i-code">0xe885</span></div>
<div title="Code: 0xf1da" class="the-icons span3"><i class="demo-icon icon-history">&#xf1da;</i> <span class="i-name">icon-history</span><span class="i-code">0xf1da</span></div>
<div title="Code: 0xf1e5" class="the-icons span3"><i class="demo-icon icon-binoculars">&#xf1e5;</i> <span class="i-name">icon-binoculars</span><span class="i-code">0xf1e5</span></div>
<div class="the-icons span3" title="Code: 0xe885"><i class="demo-icon icon-warning-empty">&#xe885;</i> <span class="i-name">icon-warning-empty</span><span class="i-code">0xe885</span></div>
<div class="the-icons span3" title="Code: 0xf009"><i class="demo-icon icon-th-list">&#xf009;</i> <span class="i-name">icon-th-list</span><span class="i-code">0xf009</span></div>
<div class="the-icons span3" title="Code: 0xf00b"><i class="demo-icon icon-th-thumb-empty">&#xf00b;</i> <span class="i-name">icon-th-thumb-empty</span><span class="i-code">0xf00b</span></div>
<div class="the-icons span3" title="Code: 0xf09b"><i class="demo-icon icon-github-circled">&#xf09b;</i> <span class="i-name">icon-github-circled</span><span class="i-code">0xf09b</span></div>
</div>
<div class="row">
<div class="the-icons span3" title="Code: 0xf1da"><i class="demo-icon icon-history">&#xf1da;</i> <span class="i-name">icon-history</span><span class="i-code">0xf1da</span></div>
<div class="the-icons span3" title="Code: 0xf1e5"><i class="demo-icon icon-binoculars">&#xf1e5;</i> <span class="i-name">icon-binoculars</span><span class="i-code">0xf1e5</span></div>
</div>
</div>
<div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>

BIN
application/fonts/fontello-ifont/font/ifont.eot
View File

Binary file not shown.

6
application/fonts/fontello-ifont/font/ifont.svg
View File

@ -1,7 +1,7 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Copyright (C) 2017 by original authors @ fontello.com</metadata>
<metadata>Copyright (C) 2018 by original authors @ fontello.com</metadata>
<defs>
<font id="ifont" horiz-adv-x="1000" >
<font-face font-family="ifont" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
@ -272,6 +272,10 @@
<glyph glyph-name="warning-empty" unicode="&#xe885;" d="M514 701q-49 0-81-55l-308-513q-32-55-11-95t87-40l625 0q65 0 87 40t-12 95l-307 513q-33 55-80 55z m0 105q106 0 169-107l308-513q63-105 12-199-52-93-177-93l-625 0q-123 0-177 93-53 92 11 199l309 513q62 107 170 107z m-69-652q0 69 69 69 67 0 67-69 0-67-67-67-69 0-69 67z m146 313q0-14-6-29l-71-179q-44 108-73 179-6 15-6 29 0 32 23 55t56 24 55-24 22-55z" horiz-adv-x="1026" />
<glyph glyph-name="th-list" unicode="&#xf009;" d="M0 62q0-30 21-51t51-21h32q30 0 51 21t21 51-21 51-51 21h-32q-30 0-51-21t-21-51z m0 288q0-30 21-51t51-21h32q30 0 51 21t21 51-21 51-51 21h-32q-30 0-51-21t-21-51z m0 288q0-30 21-51t51-21h32q30 0 51 21t21 51-21 51-51 21h-32q-30 0-51-21t-21-51z m234-576q0-30 21-51t51-21h559q30 0 51 21t21 51-21 51-51 21h-559q-30 0-51-21t-21-51z m0 288q0-30 21-51t51-21h559q30 0 51 21t21 51-21 51-51 21h-559q-30 0-51-21t-21-51z m0 288q0-30 21-51t51-21h559q30 0 51 21t21 51-21 51-51 21h-559q-30 0-51-21t-21-51z" horiz-adv-x="937.5" />
<glyph glyph-name="th-thumb-empty" unicode="&#xf00b;" d="M0-66v286q0 22 15 37t37 16h286q21 0 37-16t15-37v-286q0-21-15-36t-37-15h-286q-22 0-37 15t-15 36z m0 546v286q0 21 15 36t37 15h286q21 0 37-15t15-36v-286q0-22-15-37t-37-16h-286q-21 0-37 16t-15 37z m88-510h214v214h-214v-214z m0 546h214v213h-214v-213z m459-582v286q0 22 15 37t37 16h286q21 0 37-16t15-37v-286q0-21-15-36t-37-15h-286q-21 0-37 15t-15 36z m0 546v286q0 21 15 36t37 15h286q22 0 37-15t15-36v-286q0-22-15-37t-37-16h-286q-21 0-37 16t-15 37z m88-510h215v214h-215v-214z m0 546h215v213h-215v-213z" horiz-adv-x="937.5" />
<glyph glyph-name="github-circled" unicode="&#xf09b;" d="M429 779q116 0 215-58t156-156 57-215q0-140-82-252t-211-155q-15-3-22 4t-7 17q0 1 0 43t0 75q0 54-29 79 32 3 57 10t53 22 45 37 30 58 11 84q0 67-44 115 21 51-4 114-16 5-46-6t-51-25l-21-13q-52 15-107 15t-108-15q-8 6-23 15t-47 22-47 7q-25-63-5-114-44-48-44-115 0-47 12-83t29-59 45-37 52-22 57-10q-21-20-27-58-12-5-25-8t-32-3-36 12-31 35q-11 18-27 29t-28 14l-11 1q-12 0-16-2t-3-7 5-8 7-6l4-3q12-6 24-21t18-29l6-13q7-21 24-34t37-17 39-3 31 1l13 3q0-22 0-50t1-30q0-10-8-17t-22-4q-129 43-211 155t-82 252q0 117 58 215t155 156 216 58z m-267-616q2 4-3 7-6 1-8-1-1-4 4-7 5-3 7 1z m18-19q4 3-1 9-6 5-9 2-4-3 1-9 5-6 9-2z m16-25q6 4 0 11-4 7-9 3-5-3 0-10t9-4z m24-23q4 4-2 10-7 7-11 2-5-5 2-11 6-6 11-1z m32-14q1 6-8 9-8 2-10-4t7-9q8-3 11 4z m35-3q0 7-10 6-9 0-9-6 0-7 10-6 9 0 9 6z m32 5q-1 7-10 5-9-1-8-8t10-4 8 7z" horiz-adv-x="857.1" />
<glyph glyph-name="history" unicode="&#xf1da;" d="M857 350q0-87-34-166t-91-137-137-92-166-34q-96 0-183 41t-147 114q-4 6-4 13t5 11l76 77q6 5 14 5 9-1 13-7 41-53 100-82t126-29q58 0 110 23t92 61 61 91 22 111-22 111-61 91-92 61-110 23q-55 0-105-20t-90-57l77-77q17-16 8-38-10-23-33-23h-250q-15 0-25 11t-11 25v250q0 24 22 33 22 10 39-8l72-72q60 57 137 88t159 31q87 0 166-34t137-92 91-137 34-166z m-357 161v-250q0-8-5-13t-13-5h-178q-8 0-13 5t-5 13v35q0 8 5 13t13 5h125v197q0 8 5 13t12 5h36q8 0 13-5t5-13z" horiz-adv-x="857.1" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 61 KiB

BIN
application/fonts/fontello-ifont/font/ifont.ttf
View File

Binary file not shown.

BIN
application/fonts/fontello-ifont/font/ifont.woff
View File

Binary file not shown.

BIN
application/fonts/fontello-ifont/font/ifont.woff2
View File

Binary file not shown.

75
modules/monitoring/application/controllers/ListController.php
View File

@ -494,6 +494,44 @@ class ListController extends Controller
$this->view->serviceGroups = $serviceGroups;
}
/**
* List service groups
*/
public function servicegroupGridAction()
{
$this->addTitleTab(
'servicegroup-grid',
$this->translate('Service Group Grid'),
$this->translate('Show the Service Group Grid')
);
$this->setAutorefreshInterval(15);
$serviceGroups = $this->backend->select()->from('servicegroupsummary', array(
'servicegroup_alias',
'servicegroup_name',
'services_critical_handled',
'services_critical_unhandled',
'services_ok',
'services_pending',
'services_total',
'services_unknown_handled',
'services_unknown_unhandled',
'services_warning_handled',
'services_warning_unhandled'
));
$this->applyRestriction('monitoring/filter/objects', $serviceGroups);
$this->filterQuery($serviceGroups);
$this->setupSortControl(array(
'servicegroup_alias' => $this->translate('Service Group Name'),
'services_severity' => $this->translate('Severity'),
'services_total' => $this->translate('Total Services')
), $serviceGroups, ['services_severity' => 'desc']);
$this->view->serviceGroups = $serviceGroups;
}
/**
* List host groups
*/
@ -542,6 +580,43 @@ class ListController extends Controller
$this->view->hostGroups = $hostGroups;
}
/**
* List host groups
*/
public function hostgroupGridAction()
{
$this->addTitleTab(
'hostgroup-grid',
$this->translate('Host Group Grid'),
$this->translate('Show the Host Group Grid')
);
$this->setAutorefreshInterval(15);
$hostGroups = $this->backend->select()->from('hostgroupsummary', [
'hostgroup_alias',
'hostgroup_name',
'hosts_down_handled',
'hosts_down_unhandled',
'hosts_pending',
'hosts_total',
'hosts_unreachable_handled',
'hosts_unreachable_unhandled',
'hosts_up'
]);
$this->applyRestriction('monitoring/filter/objects', $hostGroups);
$this->filterQuery($hostGroups);
$this->setupSortControl([
'hosts_severity' => $this->translate('Severity'),
'hostgroup_alias' => $this->translate('Host Group Name'),
'hosts_total' => $this->translate('Total Hosts'),
'services_total' => $this->translate('Total Services')
], $hostGroups, ['hosts_severity' => 'desc']);
$this->view->hostGroups = $hostGroups;
}
public function eventhistoryAction()
{
$this->addTitleTab(

173
modules/monitoring/application/views/scripts/list/hostgroup-grid.phtml Normal file
View File

@ -0,0 +1,173 @@
<?php if (! $this->compact): ?>
<div class="controls">
<?= $this->tabs ?>
<div class="sort-controls-container">
<?= $this->sortBox ?>
<a href="<?= $this->href('monitoring/list/hostgroups') ?>" class="grid-toggle-link"
title="<?= $this->translate('Toogle grid view mode') ?>">
<?= $this->icon('th-list', null, ['class' => '-inactive']) ?>
<?= $this->icon('th-thumb-empty', null, ['class' => '-active']) ?>
</a>
</div>
<?= $this->filterEditor ?>
</div>
<?php endif ?>
<div class="content" data-base-target="_next">
<?php /** @var \Icinga\Module\Monitoring\DataView\Hostgroup $hostGroups */
if (! $hostGroups->hasResult()): ?>
<p><?= $this->translate('No host groups found matching the filter.') ?></p>
</div>
<?php return; endif ?>
<div class="group-grid">
<?php foreach ($hostGroups as $hostGroup): ?>
<div class="group-grid-cell">
<?php if ($hostGroup->hosts_down_unhandled > 0): ?>
<?= $this->qlink(
$hostGroup->hosts_down_unhandled,
'monitoring/list/hosts',
[
'hostgroup_name' => $hostGroup->hostgroup_name,
'host_handled' => 0,
'host_state' => 1
],
[
'class' => 'state-down',
'title' => sprintf(
$this->translatePlural(
'List %u host that is currently in state DOWN in the host group "%s"',
'List %u hosts which are currently in state DOWN in the host group "%s"',
$hostGroup->hosts_down_unhandled
),
$hostGroup->hosts_down_unhandled,
$hostGroup->hostgroup_alias
)
]
) ?>
<?php elseif ($hostGroup->hosts_unreachable_unhandled > 0): ?>
<?= $this->qlink(
$hostGroup->hosts_unreachable_unhandled,
'monitoring/list/hosts',
[
'hostgroup_name' => $hostGroup->hostgroup_name,
'host_handled' => 0,
'host_state' => 2
],
[
'class' => 'state-unreachable',
'title' => sprintf(
$this->translatePlural(
'List %u host that is currently in state UNREACHABLE in the host group "%s"',
'List %u hosts which are currently in state UNREACHABLE in the host group "%s"',
$hostGroup->hosts_unreachable_unhandled
),
$hostGroup->hosts_unreachable_unhandled,
$hostGroup->hostgroup_alias
)
]
) ?>
<?php elseif ($hostGroup->hosts_down_handled > 0): ?>
<?= $this->qlink(
$hostGroup->hosts_down_handled,
'monitoring/list/hosts',
[
'hostgroup_name' => $hostGroup->hostgroup_name,
'host_handled' => 1,
'host_state' => 1
],
[
'class' => 'state-down handled',
'title' => sprintf(
$this->translatePlural(
'List %u host that is currently in state DOWN (Acknowledged) in the host group "%s"',
'List %u hosts which are currently in state DOWN (Acknowledged) in the host group "%s"',
$hostGroup->hosts_down_handled
),
$hostGroup->hosts_down_handled,
$hostGroup->hostgroup_alias
)
]
) ?>
<?php elseif ($hostGroup->hosts_unreachable_handled > 0): ?>
<?= $this->qlink(
$hostGroup->hosts_unreachable_handled,
'monitoring/list/hosts',
[
'hostgroup_name' => $hostGroup->hostgroup_name,
'host_handled' => 0,
'host_state' => 2
],
[
'class' => 'state-unreachable handled',
'title' => sprintf(
$this->translatePlural(
'List %u host that is currently in state UNREACHABLE (Acknowledged) in the host group "%s"',
'List %u hosts which are currently in state UNREACHABLE (Acknowledged) in the host group "%s"',
$hostGroup->hosts_unreachable_handled
),
$hostGroup->hosts_unreachable_handled,
$hostGroup->hostgroup_alias
)
]
) ?>
<?php elseif ($hostGroup->hosts_pending > 0): ?>
<?= $this->qlink(
$hostGroup->hosts_pending,
'monitoring/list/hosts',
[
'hostgroup_name' => $hostGroup->hostgroup_name,
'host_state' => 99
],
[
'class' => 'state-pending',
'title' => sprintf(
$this->translatePlural(
'List %u host that is currently in state PENDING in the host group "%s"',
'List %u hosts which are currently in state PENDING in the host group "%s"',
$hostGroup->hosts_pending
),
$hostGroup->hosts_pending,
$hostGroup->hostgroup_alias
)
]
) ?>
<?php elseif ($hostGroup->hosts_up > 0): ?>
<?= $this->qlink(
$hostGroup->hosts_up,
'monitoring/list/hosts',
[
'hostgroup_name' => $hostGroup->hostgroup_name,
'host_state' => 0
],
[
'class' => 'state-up',
'title' => sprintf(
$this->translatePlural(
'List %u host that is currently in state UP in the host group "%s"',
'List %u hosts which are currently in state UP in the host group "%s"',
$hostGroup->hosts_up
),
$hostGroup->hosts_up,
$hostGroup->hostgroup_alias
)
]
) ?>
<?php else: ?>
<div class="state-none">
0
</div>
<?php endif ?>
<?= $this->qlink(
$hostGroup->hostgroup_alias,
'monitoring/list/hosts',
['hostgroup_name' => $hostGroup->hostgroup_name],
[
'title' => sprintf(
$this->translate('List all hosts in the group "%s"'),
$hostGroup->hostgroup_alias
)
]
) ?>
</div>
<?php endforeach ?>
</div>
</div>

5
modules/monitoring/application/views/scripts/list/hostgroups.phtml
View File

@ -8,6 +8,11 @@ if (! $this->compact): ?>
<div class="sort-controls-container">
<?= $this->limiter ?>
<?= $this->sortBox ?>
<a href="<?= $this->href('monitoring/list/hostgroup-grid') ?>" class="grid-toggle-link"
title="<?= $this->translate('Toogle grid view mode') ?>">
<?= $this->icon('th-list', null, ['class' => '-active']) ?>
<?= $this->icon('th-thumb-empty', null, ['class' => '-inactive']) ?>
</a>
</div>
<?= $this->filterEditor ?>
</div>

217
modules/monitoring/application/views/scripts/list/servicegroup-grid.phtml Normal file
View File

@ -0,0 +1,217 @@
<?php if (! $this->compact): ?>
<div class="controls">
<?= $this->tabs ?>
<div class="sort-controls-container">
<?= $this->sortBox ?>
<a href="<?= $this->href('monitoring/list/servicegroups') ?>" class="grid-toggle-link"
title="<?= $this->translate('Toogle grid view mode') ?>">
<?= $this->icon('th-list', null, ['class' => '-inactive']) ?>
<?= $this->icon('th-thumb-empty', null, ['class' => '-active']) ?>
</a>
</div>
<?= $this->filterEditor ?>
</div>
<?php endif ?>
<div class="content" data-base-target="_next">
<?php /** @var \Icinga\Module\Monitoring\DataView\Servicegroup $serviceGroups */
if (! $serviceGroups->hasResult()): ?>
<p><?= $this->translate('No service groups found matching the filter.') ?></p>
</div>
<?php return; endif ?>
<div class="group-grid">
<?php foreach ($serviceGroups as $serviceGroup): ?>
<div class="group-grid-cell">
<?php if ($serviceGroup->services_critical_unhandled > 0): ?>
<?= $this->qlink(
$serviceGroup->services_critical_unhandled,
'monitoring/list/servicegrid',
[
'servicegroup_name' => $serviceGroup->servicegroup_name,
'service_handled' => 0,
'service_state' => 2
],
[
'class' => 'state-critical',
'title' => sprintf(
$this->translatePlural(
'List %s service that is currently in state CRITICAL in service group "%s"',
'List %s services which are currently in state CRITICAL in service group "%s"',
$serviceGroup->services_critical_unhandled
),
$serviceGroup->services_critical_unhandled,
$serviceGroup->servicegroup_alias
)
]
) ?>
<?php elseif ($serviceGroup->services_warning_unhandled > 0): ?>
<?= $this->qlink(
$serviceGroup->services_warning_unhandled,
'monitoring/list/servicegrid',
[
'servicegroup_name' => $serviceGroup->servicegroup_name,
'service_handled' => 0,
'service_state' => 1
],
[
'class' => 'state-warning',
'title' => sprintf(
$this->translatePlural(
'List %s service that is currently in state WARNING in service group "%s"',
'List %s services which are currently in state WARNING in service group "%s"',
$serviceGroup->services_warning_unhandled
),
$serviceGroup->services_warning_unhandled,
$serviceGroup->servicegroup_alias
)
]
) ?>
<?php elseif ($serviceGroup->services_unknown_unhandled > 0): ?>
<?= $this->qlink(
$serviceGroup->services_unknown_unhandled,
'monitoring/list/servicegrid',
[
'servicegroup_name' => $serviceGroup->servicegroup_name,
'service_handled' => 0,
'service_state' => 3
],
[
'class' => 'state-unknown',
'title' => sprintf(
$this->translatePlural(
'List %s service that is currently in state UNKNOWN in service group "%s"',
'List %s services which are currently in state UNKNOWN in service group "%s"',
$serviceGroup->services_unknown_unhandled
),
$serviceGroup->services_unknown_unhandled,
$serviceGroup->servicegroup_alias
)
]
) ?>
<?php elseif ($serviceGroup->services_critical_handled > 0): ?>
<?= $this->qlink(
$serviceGroup->services_critical_handled,
'monitoring/list/servicegrid',
[
'servicegroup_name' => $serviceGroup->servicegroup_name,
'service_handled' => 1,
'service_state' => 2
],
[
'class' => 'state-critical handled',
'title' => sprintf(
$this->translatePlural(
'List %s service that is currently in state CRITICAL (Acknowledged) in service group "%s"',
'List %s services which are currently in state CRITICAL (Acknowledged) in service group "%s"',
$serviceGroup->services_critical_handled
),
$serviceGroup->services_critical_handled,
$serviceGroup->servicegroup_alias
)
]
) ?>
<?php elseif ($serviceGroup->services_warning_handled > 0): ?>
<?= $this->qlink(
$serviceGroup->services_warning_handled,
'monitoring/list/servicegrid',
[
'servicegroup_name' => $serviceGroup->servicegroup_name,
'service_handled' => 1,
'service_state' => 1
],
[
'class' => 'state-warning handled',
'title' => sprintf(
$this->translatePlural(
'List %s service that is currently in state WARNING (Acknowledged) in service group "%s"',
'List %s services which are currently in state WARNING (Acknowledged) in service group "%s"',
$serviceGroup->services_warning_handled
),
$serviceGroup->services_warning_handled,
$serviceGroup->servicegroup_alias
)
]
) ?>
<?php elseif ($serviceGroup->services_unknown_handled > 0): ?>
<?= $this->qlink(
$serviceGroup->services_unknown_handled,
'monitoring/list/servicegrid',
[
'servicegroup_name' => $serviceGroup->servicegroup_name,
'service_handled' => 1,
'service_state' => 3
],
[
'class' => 'state-unknown handled',
'title' => sprintf(
$this->translatePlural(
'List %s service that is currently in state UNKNOWN (Acknowledged) in service group "%s"',
'List %s services which are currently in state UNKNOWN (Acknowledged) in service group "%s"',
$serviceGroup->services_unknown_handled
),
$serviceGroup->services_unknown_handled,
$serviceGroup->servicegroup_alias
)
]
) ?>
<?php elseif ($serviceGroup->services_pending > 0): ?>
<?= $this->qlink(
$serviceGroup->services_pending,
'monitoring/list/servicegrid',
[
'servicegroup_name' => $serviceGroup->servicegroup_name,
'service_state' => 99
],
[
'class' => 'state-pending',
'title' => sprintf(
$this->translatePlural(
'List %s service that is currenlty in state PENDING in service group "%s"',
'List %s services which are currently in state PENDING in service group "%s"',
$serviceGroup->services_pending
),
$serviceGroup->services_pending,
$serviceGroup->servicegroup_alias
)
]
) ?>
<?php elseif ($serviceGroup->services_ok > 0): ?>
<?= $this->qlink(
$serviceGroup->services_ok,
'monitoring/list/servicegrid',
[
'servicegroup_name' => $serviceGroup->servicegroup_name,
'service_state' => 0
],
[
'class' => 'state-ok',
'title' => sprintf(
$this->translatePlural(
'List %s service that is currently in state OK in service group "%s"',
'List %s services which are currently in state OK in service group "%s"',
$serviceGroup->services_ok
),
$serviceGroup->services_ok,
$serviceGroup->servicegroup_alias
)
]
) ?>
<?php else: ?>
<div class="state-none">
0
</div>
<?php endif ?>
<?= $this->qlink(
$serviceGroup->servicegroup_alias,
'monitoring/list/servicegrid',
['servicegroup_name' => $serviceGroup->servicegroup_name],
[
'title' => sprintf(
$this->translate('List all services in the group "%s"'),
$serviceGroup->servicegroup_alias
)
]
) ?>
</div>
<?php endforeach ?>
</div>
</div>

5
modules/monitoring/application/views/scripts/list/servicegroups.phtml
View File

@ -7,6 +7,11 @@ if (! $this->compact): ?>
<div class="sort-controls-container">
<?= $this->limiter ?>
<?= $this->sortBox ?>
<a href="<?= $this->href('monitoring/list/servicegroup-grid') ?>" class="grid-toggle-link"
title="<?= $this->translate('Toogle grid view mode') ?>">
<?= $this->icon('th-list', null, ['class' => '-active']) ?>
<?= $this->icon('th-thumb-empty', null, ['class' => '-inactive']) ?>
</a>
</div>
<?= $this->filterEditor ?>
</div>

55
modules/monitoring/public/css/module.less
View File

@ -41,6 +41,61 @@
}
}
// Hostgroup- and servicegroup-grid styles
.grid-toggle-link {
display: inline-block;
margin-left: 1em;
text-decoration: none;
vertical-align: middle;
> i {
font-size: 1.25em;
&.-active {
color: @icinga-blue;
}
&.-inactive {
color: @gray-light;
}
}
}
.group-grid {
display: grid;
grid-gap: 1em 3em;
grid-template-columns: repeat(auto-fit, 14em);
.group-grid-cell > a:last-child {
display: inline-block;
max-width: 10em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
vertical-align: middle;
}
.group-grid-cell > a:first-child,
.group-grid-cell > div.state-none {
.bg-stateful();
.rounded-corners();
display: inline-block;
margin-right: 1em;
padding: .5em;
height: 2.5em;
width: 2.5em;
text-align: center;
vertical-align: middle;
color: white;
}
.group-grid-cell > div.state-none {
background-color: @gray-light;
}
}
// Styles for the icon displayed if a check result is late
.check-result-late {
&:before {

4
public/css/icinga/controls.less
View File

@ -141,6 +141,10 @@
.sort-controls-container {
clear: right;
float: right;
> * {
vertical-align: middle;
}
}
.sort-direction-control {

BIN
public/font/ifont.eot Normal file → Executable file
View File

Binary file not shown.

8
public/font/ifont.svg Normal file → Executable file
View File

@ -1,7 +1,7 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Copyright (C) 2016 by original authors @ fontello.com</metadata>
<metadata>Copyright (C) 2018 by original authors @ fontello.com</metadata>
<defs>
<font id="ifont" horiz-adv-x="1000" >
<font-face font-family="ifont" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
@ -272,6 +272,12 @@
<glyph glyph-name="warning-empty" unicode="&#xe885;" d="M514 701q-49 0-81-55l-308-513q-32-55-11-95t87-40l625 0q65 0 87 40t-12 95l-307 513q-33 55-80 55z m0 105q106 0 169-107l308-513q63-105 12-199-52-93-177-93l-625 0q-123 0-177 93-53 92 11 199l309 513q62 107 170 107z m-69-652q0 69 69 69 67 0 67-69 0-67-67-67-69 0-69 67z m146 313q0-14-6-29l-71-179q-44 108-73 179-6 15-6 29 0 32 23 55t56 24 55-24 22-55z" horiz-adv-x="1026" />
<glyph glyph-name="th-list" unicode="&#xf009;" d="M0 62q0-30 21-51t51-21h32q30 0 51 21t21 51-21 51-51 21h-32q-30 0-51-21t-21-51z m0 288q0-30 21-51t51-21h32q30 0 51 21t21 51-21 51-51 21h-32q-30 0-51-21t-21-51z m0 288q0-30 21-51t51-21h32q30 0 51 21t21 51-21 51-51 21h-32q-30 0-51-21t-21-51z m234-576q0-30 21-51t51-21h559q30 0 51 21t21 51-21 51-51 21h-559q-30 0-51-21t-21-51z m0 288q0-30 21-51t51-21h559q30 0 51 21t21 51-21 51-51 21h-559q-30 0-51-21t-21-51z m0 288q0-30 21-51t51-21h559q30 0 51 21t21 51-21 51-51 21h-559q-30 0-51-21t-21-51z" horiz-adv-x="937.5" />
<glyph glyph-name="th-thumb-empty" unicode="&#xf00b;" d="M0-66v286q0 22 15 37t37 16h286q21 0 37-16t15-37v-286q0-21-15-36t-37-15h-286q-22 0-37 15t-15 36z m0 546v286q0 21 15 36t37 15h286q21 0 37-15t15-36v-286q0-22-15-37t-37-16h-286q-21 0-37 16t-15 37z m88-510h214v214h-214v-214z m0 546h214v213h-214v-213z m459-582v286q0 22 15 37t37 16h286q21 0 37-16t15-37v-286q0-21-15-36t-37-15h-286q-21 0-37 15t-15 36z m0 546v286q0 21 15 36t37 15h286q22 0 37-15t15-36v-286q0-22-15-37t-37-16h-286q-21 0-37 16t-15 37z m88-510h215v214h-215v-214z m0 546h215v213h-215v-213z" horiz-adv-x="937.5" />
<glyph glyph-name="github-circled" unicode="&#xf09b;" d="M429 779q116 0 215-58t156-156 57-215q0-140-82-252t-211-155q-15-3-22 4t-7 17q0 1 0 43t0 75q0 54-29 79 32 3 57 10t53 22 45 37 30 58 11 84q0 67-44 115 21 51-4 114-16 5-46-6t-51-25l-21-13q-52 15-107 15t-108-15q-8 6-23 15t-47 22-47 7q-25-63-5-114-44-48-44-115 0-47 12-83t29-59 45-37 52-22 57-10q-21-20-27-58-12-5-25-8t-32-3-36 12-31 35q-11 18-27 29t-28 14l-11 1q-12 0-16-2t-3-7 5-8 7-6l4-3q12-6 24-21t18-29l6-13q7-21 24-34t37-17 39-3 31 1l13 3q0-22 0-50t1-30q0-10-8-17t-22-4q-129 43-211 155t-82 252q0 117 58 215t155 156 216 58z m-267-616q2 4-3 7-6 1-8-1-1-4 4-7 5-3 7 1z m18-19q4 3-1 9-6 5-9 2-4-3 1-9 5-6 9-2z m16-25q6 4 0 11-4 7-9 3-5-3 0-10t9-4z m24-23q4 4-2 10-7 7-11 2-5-5 2-11 6-6 11-1z m32-14q1 6-8 9-8 2-10-4t7-9q8-3 11 4z m35-3q0 7-10 6-9 0-9-6 0-7 10-6 9 0 9 6z m32 5q-1 7-10 5-9-1-8-8t10-4 8 7z" horiz-adv-x="857.1" />
<glyph glyph-name="history" unicode="&#xf1da;" d="M857 350q0-87-34-166t-91-137-137-92-166-34q-96 0-183 41t-147 114q-4 6-4 13t5 11l76 77q6 5 14 5 9-1 13-7 41-53 100-82t126-29q58 0 110 23t92 61 61 91 22 111-22 111-61 91-92 61-110 23q-55 0-105-20t-90-57l77-77q17-16 8-38-10-23-33-23h-250q-15 0-25 11t-11 25v250q0 24 22 33 22 10 39-8l72-72q60 57 137 88t159 31q87 0 166-34t137-92 91-137 34-166z m-357 161v-250q0-8-5-13t-13-5h-178q-8 0-13 5t-5 13v35q0 8 5 13t13 5h125v197q0 8 5 13t12 5h36q8 0 13-5t5-13z" horiz-adv-x="857.1" />
<glyph glyph-name="binoculars" unicode="&#xf1e5;" d="M393 671v-428q0-15-11-25t-25-11v-321q0-15-10-25t-26-11h-285q-15 0-25 11t-11 25v285l139 488q4 12 17 12h237z m178 0v-392h-142v392h142z m429-500v-285q0-15-11-25t-25-11h-285q-15 0-25 11t-11 25v321q-15 0-25 11t-11 25v428h237q13 0 17-12z m-589 661v-125h-197v125q0 8 5 13t13 5h161q8 0 13-5t5-13z m375 0v-125h-197v125q0 8 5 13t13 5h161q8 0 13-5t5-13z" horiz-adv-x="1000" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 61 KiB

BIN
public/font/ifont.ttf Normal file → Executable file
View File

Binary file not shown.

BIN
public/font/ifont.woff Normal file → Executable file
View File

Binary file not shown.

BIN
public/font/ifont.woff2 Normal file → Executable file
View File

Binary file not shown.