Skip to content

Commit 2e272f9

Browse files
author
redray
committed
some css enhancements for the sysmonitor
1 parent fb4c27e commit 2e272f9

File tree

3 files changed

+89
-107
lines changed

3 files changed

+89
-107
lines changed

‎interface/web/monitor/show_sys_state.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -139,9 +139,9 @@ function _getServerState($serverId, $serverName, $showAll)
139139
_processDbState($record['type'], $serverId, &$serverState, &$messages);
140140
}
141141

142-
$res .= '<div class="systemmonitor-state systemmonitor-state-' . $serverState . '">';
143-
$res .= '<div class="systemmonitor-serverstate">';
144-
$res .= '<div class="systemmonitor-state-' . $serverState . '-icon">';
142+
$res .= '<div class="systemmonitor-state state-'.$serverState.'">';
143+
$res .= '<div class="systemmonitor-device device-server">';
144+
$res .= '<div class="systemmonitor-content icons32 ico-'.$serverState.'">';
145145
$res .= 'Server: ' . $serverName . '<br />';
146146
$res .= 'State: ' . $serverState . '<br />';
147147
// $res .= sizeof($messages['ok']) . ' ok | ';

‎interface/web/monitor/tools.inc.php‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@ function showServerLoad(){
3939
Format the data
4040
*/
4141
$html =
42-
'<div class="systemmonitor-state systemmonitor-state-' . $record['state'] . '">
43-
<div class="systemmonitor-state-' . $record['state'] . '-icon">
42+
'<div class="systemmonitor-state state-'.$record['state'].'">
43+
<div class="systemmonitor-content icons32 ico-'.$record['state'].'">
4444
<table>
4545
<tr>
4646
<td>' . $app->lng("Server online since").':</td>
@@ -85,8 +85,8 @@ function showDiskUsage () {
8585
Format the data
8686
*/
8787
$html =
88-
'<div class="systemmonitor-state systemmonitor-state-' . $record['state'] . '">
89-
<div class="systemmonitor-state-' . $record['state'] . '-icon">
88+
'<div class="systemmonitor-state state-'.$record['state'].'">
89+
<div class="systemmonitor-content icons32 ico-'.$record['state'].'">
9090
<table>
9191
<tr>
9292
<td>Filesystem</td>
@@ -128,8 +128,8 @@ function showMemUsage ()
128128
Format the data
129129
*/
130130
$html =
131-
'<div class="systemmonitor-state systemmonitor-state-' . $record['state'] . '">
132-
<div class="systemmonitor-state-' . $record['state'] . '-icon">
131+
'<div class="systemmonitor-state state-'.$record['state'].'">
132+
<div class="systemmonitor-content icons32 ico-'.$record['state'].'">
133133
<table>';
134134

135135
foreach($data as $key => $value){
@@ -164,8 +164,8 @@ function showCpuInfo ()
164164
Format the data
165165
*/
166166
$html =
167-
'<div class="systemmonitor-state systemmonitor-state-' . $record['state'] . '">
168-
<div class="systemmonitor-state-' . $record['state'] . '-icon">
167+
'<div class="systemmonitor-state state-'.$record['state'].'">
168+
<div class="systemmonitor-content icons32 ico-'.$record['state'].'">
169169
<table>';
170170
foreach($data as $key => $value){
171171
if ($key != '') {
@@ -198,8 +198,8 @@ function showServices ()
198198
Format the data
199199
*/
200200
$html =
201-
'<div class="systemmonitor-state systemmonitor-state-' . $record['state'] . '">
202-
<div class="systemmonitor-state-' . $record['state'] . '-icon">
201+
'<div class="systemmonitor-state state-'.$record['state'].'">
202+
<div class="systemmonitor-content icons32 ico-'.$record['state'].'">
203203
<table>';
204204

205205
if($data['webserver'] != -1) {
@@ -306,8 +306,8 @@ function showSystemUpdate()
306306

307307
if(isset($record['data'])) {
308308
$html =
309-
'<div class="systemmonitor-state systemmonitor-state-' . $record['state'] . '">
310-
<div class="systemmonitor-state-' . $record['state'] . '-icon">';
309+
'<div class="systemmonitor-state state-'.$record['state'].'">
310+
<div class="systemmonitor-content icons32 ico-'.$record['state'].'">';
311311
/*
312312
* First, we have to detect, if there is any monitoring-data.
313313
* If not (because the destribution is not supported) show this.
@@ -336,8 +336,8 @@ function showRaidState()
336336

337337
if(isset($record['data'])) {
338338
$html =
339-
'<div class="systemmonitor-state systemmonitor-state-' . $record['state'] . '">
340-
<div class="systemmonitor-state-' . $record['state'] . '-icon">';
339+
'<div class="systemmonitor-state state-'.$record['state'].'">
340+
<div class="systemmonitor-content icons32 ico-'.$record['state'].'">';
341341

342342
/*
343343
* First, we have to detect, if there is any monitoring-data.
@@ -368,8 +368,8 @@ function showRKHunter()
368368

369369
if(isset($record['data'])) {
370370
$html =
371-
'<div class="systemmonitor-state systemmonitor-state-' . $record['state'] . '">
372-
<div class="systemmonitor-state-' . $record['state'] . '-icon">';
371+
'<div class="systemmonitor-state state-'.$record['state'].'">
372+
<div class="systemmonitor-content icons32 ico-'.$record['state'].'">';
373373

374374
/*
375375
* First, we have to detect, if there is any monitoring-data.

‎interface/web/themes/default/css/screen/content_ispc.css‎

Lines changed: 70 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -24,32 +24,32 @@
2424

2525
/* Tab-Box */
2626
.tabbox_tabs {
27-
border-bottom: 1px solid #d3d3d3;
27+
border-bottom: 1px solid #d3d3d3;
2828
}
2929
.tabbox_tabs ul {
30-
list-style: none;
31-
padding: 0;
32-
margin: 0;
30+
list-style: none;
31+
padding: 0;
32+
margin: 0;
3333
}
3434
.tabbox_tabs li {
35-
display: inline;
36-
margin: 0 2px 0 0;
35+
display: inline;
36+
margin: 0 2px 0 0;
3737
}
3838
.tabbox_tabs a {
39-
padding: 0 1em;
40-
text-decoration: none;
41-
color: black;
42-
background: #d3d3d3;
43-
border: 1px solid #d3d3d3;
39+
padding: 0 1em;
40+
text-decoration: none;
41+
color: black;
42+
background: #d3d3d3;
43+
border: 1px solid #d3d3d3;
4444
}
4545
.tabbox_tabs a:hover {
46-
background: #fc0;
47-
color: #540;
46+
background: #fc0;
47+
color: #540;
4848
}
4949
.tabbox_tabs .active a {
50-
font-weight: bold;
51-
color: #ff6600;
52-
background: #ffffff;
50+
font-weight: bold;
51+
color: #ff6600;
52+
background: #ffffff;
5353
}
5454

5555
.pnl_toolsarea fieldset, .pnl_listarea fieldset, .pnl_formarea fieldset {
@@ -68,7 +68,7 @@
6868
}
6969
.box_error { border: 4px solid #CC0000; }
7070
.box_error h1 { color: #CC0000; }
71-
.box_support { border: 1px solid #6495ed; }
71+
.box_support { border: 1px solid #6495ed; }
7272
.box_support h1 { color: #6495ed; }
7373
.box_msg { border: 2px solid #6495ed; }
7474
.box_msg h1 { color: #6495ed; }
@@ -82,18 +82,6 @@
8282
font-size: 0.9em;
8383
}
8484

85-
/* Password Strength */
86-
#passBar {
87-
width: 101px; height: 10px;
88-
background: url(../../images/meter_bg.gif) repeat-x bottom left;
89-
margin: 2px 0;
90-
float: left;
91-
}
92-
#passText {
93-
padding: 0 8px;
94-
float: left;
95-
}
96-
9785
/* Lists */
9886
table.list {
9987
width: 100%;
@@ -105,94 +93,88 @@
10593
table.list .tbl_row_even { background: #fcfcfc; }
10694
table.list .tbl_row_uneven { background: #f0f8ff; }
10795
table.list tr:hover { background: #fffacd; }
108-
96+
97+
/* Password Strength */
98+
#passBar {
99+
width: 101px; height: 10px;
100+
background: url(../../images/meter_bg.gif) repeat-x bottom left;
101+
margin: 2px 0;
102+
float: left;
103+
}
104+
#passText {
105+
padding: 0 8px;
106+
float: left;
107+
}
108+
109+
/* Systemmonitor */
109110
.systemmonitor-state {
110-
margin:20px 0;
111+
margin: 10px 0;
111112
font-family: Consolas, "Lucida Console", "Courier New", monospace;
112113
font-size: 0.9em;
113114
}
114-
.systemmonitor-state-no_state {
115-
border: 1px solid #30302e;
116-
background-color: #cecfc5;
115+
.systemmonitor-state.state-no_state {
116+
border-top: 4px solid #95A19F;
117+
background-color: #FBF6EE;
117118
}
118-
.systemmonitor-state-unknown {
119-
border: 1px solid #30302e;
119+
.systemmonitor-state.state-unknown {
120+
border-top: 4px solid #30302e;
120121
background-color: #cecfc5;
121122
}
122-
.systemmonitor-state-ok {
123-
border: 1px solid #23fb00;
123+
.systemmonitor-state.state-ok {
124+
border-top: 4px solid #23fb00;
124125
background-color: #adffa2;
125126
}
126-
.systemmonitor-state-info {
127-
border: 1px solid #fdff00;
127+
.systemmonitor-state.state-info {
128+
border-top: 4px solid #fdff00;
128129
background-color: #fdffa2;
129130
}
130-
.systemmonitor-state-warning {
131-
border: 1px solid #ffa800;
131+
.systemmonitor-state.state-warning {
132+
border-top: 4px solid #ffa800;
132133
background-color: #ffda93;
133134
}
134-
.systemmonitor-state-critical {
135-
border: 1px solid #ff0000;
135+
.systemmonitor-state.state-critical {
136+
border-top: 4px solid #ff0000;
136137
background-color: #ffb9b9;
137138
}
138-
.systemmonitor-state-error {
139-
border: 1px solid #ff0000;
139+
.systemmonitor-state.state-error {
140+
border-top: 4px solid #ff0000;
140141
background-color: #ff7f7f;
141142
}
142-
.systemmonitor-systemstate {
143-
background-image:url("../../icons/x64/network.png");
144-
background-repeat: no-repeat;
145-
}
146-
.systemmonitor-serverstate {
147-
background-image:url("../../icons/x64/server.png");
148-
background-repeat: no-repeat;
149-
}
150-
.systemmonitor-state-no_state-icon {
151-
padding:2px 10px 2px 80px;
152-
/*ackground-image:url("../../icons/x32/state_unknown.png"); */
153-
background-repeat: no-repeat;
154-
}
155-
.systemmonitor-state-unknown-icon {
156-
padding:2px 10px 2px 80px;
157-
background-image:url("../../icons/x32/state_unknown.png");
158-
background-repeat: no-repeat;
159-
}
160-
.systemmonitor-state-ok-icon {
161-
padding:2px 10px 2px 80px;
162-
background-image:url("../../icons/x32/state_ok.png");
163-
background-repeat: no-repeat;
164-
}
165-
.systemmonitor-state-info-icon {
166-
padding:2px 10px 2px 80px;
167-
background-image:url("../../icons/x32/state_info.png");
168-
background-repeat: no-repeat;
169-
}
170-
.systemmonitor-state-warning-icon {
171-
padding:2px 10px 2px 80px;
172-
background-image:url("../../icons/x32/state_warning.png");
173-
background-repeat: no-repeat;
174-
}
175-
.systemmonitor-state-critical-icon {
176-
padding:2px 10px 2px 80px;
177-
background-image:url("../../icons/x32/state_critical.png");
143+
144+
.systemmonitor-device {
178145
background-repeat: no-repeat;
146+
background-position: 12px 4px;
147+
min-height: 80px;
179148
}
180-
.systemmonitor-state-error-icon {
149+
.systemmonitor-device.device-system { background-image: url("../../icons/x64/network.png"); }
150+
.systemmonitor-device.device-server { background-image: url("../../icons/x64/server.png"); }
151+
152+
.systemmonitor-content.icons32 {
181153
padding:2px 10px 2px 80px;
182-
background-image:url("../../icons/x32/state_error.png");
183154
background-repeat: no-repeat;
155+
background-position: 12px 4px;
184156
}
157+
.systemmonitor-content.icons32.ico-no_state { /*background-image:url("../../icons/x32/state_no.png"); */ }
158+
.systemmonitor-content.icons32.ico-unknown { background-image:url("../../icons/x32/state_unknown.png"); }
159+
.systemmonitor-content.icons32.ico-ok { background-image:url("../../icons/x32/state_ok.png"); }
160+
.systemmonitor-content.icons32.ico-info { background-image:url("../../icons/x32/state_info.png"); }
161+
.systemmonitor-content.icons32.ico-warning { background-image:url("../../icons/x32/state_warning.png"); }
162+
.systemmonitor-content.icons32.ico-critical { background-image:url("../../icons/x32/state_critical.png"); }
163+
.systemmonitor-content.icons32.ico-error { background-image:url("../../icons/x32/state_error.png"); }
185164

186-
.systemmonitor table {
165+
.systemmonitor-content table {
187166
border: none;
188167
margin-top: 10px;
189168
}
190169

191-
.online {
192-
background-color: #c6d880;
170+
.systemmonitor-content * .online {
171+
border: 1px solid #ffffff;
172+
background-color: #E3FFB8;
173+
color: #000000;
193174
padding:0px 5px;
194175
}
195-
.offline {
176+
.systemmonitor-content * .offline {
177+
border: 1px solid #ffffff;
196178
background-color: #d12f19;
197179
color:#ffffff;
198180
padding:0px 5px;

0 commit comments

Comments
 (0)