Used bootstrap progress bar for queues' stats and used glyphicons

3 files changed, 40 insertions, 35 deletions

diff --git a/src/etc/inc/service-utils.inc b/src/etc/inc/service-utils.inc
index 8d0e537..35cb470 100644
--- a/src/etc/inc/service-utils.inc
+++ b/src/etc/inc/service-utils.inc
@@ -464,20 +464,20 @@ function get_service_status_icon($service, $withtext = true, $smallicon = false)
 	$output = "";
 	if (get_service_status($service)) {
 		$statustext = gettext("Running");
-		$output .= "<img style=\"vertical-align:middle\" title=\"" . sprintf(gettext("%s Service is"), $service["name"]) . " {$statustext}\" src=\"/themes/" . $g["theme"] . "/images/icons/";
-		$output .= ($smallicon) ? "icon_pass.gif" : "icon_service_running.gif";
-		$output .= "\" alt=\"status\" />&nbsp;";
+		$output .= "<a title=\"" . sprintf(gettext("%s Service is"), $service["name"]) . " {$statustext}\" ><i class=\"";
+		$output .= ($smallicon) ? "icon icon-play" : "icon icon-large icon-play";
+		$output .= "\" ></i></a>";
 		if ($withtext) {
 			$output .= "&nbsp;" . $statustext;
 		}
 	} else {
 		$service_enabled = is_service_enabled($service['name']);
 		$statustext = ($service_enabled) ? gettext("Stopped") : gettext("Disabled");
-		$output .= "<img style=\"vertical-align:middle\" title=\"" . sprintf(gettext("%s Service is"), $service["name"]) . " {$statustext}\" src=\"/themes/" . $g["theme"] . "/images/icons/";
-		$output .= ($smallicon) ? "icon_block.gif" : "icon_service_stopped.gif";
-		$output .= "\" alt=\"status\" />&nbsp;";
+		$output .= "<a title=\"" . sprintf(gettext("%s Service is"), $service["name"]) . " {$statustext}\" ><i class=\"";
+		$output .= ($smallicon) ? "icon icon-remove" : "icon icon-large icon-remove";
+		$output .= "\" ></i></a>";
 		if ($withtext) {
-			$output .= "&nbsp;<font color=\"white\">{$statustext}</font>";
+			$output .= "&nbsp;" . $statustext;
 		}
 	}
 	return $output;
@@ -490,10 +490,10 @@ function get_service_control_links($service, $addname = false) {
 
 	switch ($service['name']) {
 		case "openvpn":
-			$link = '<a title="%s" href="status_services.php?mode=%s&amp;service='.$service['name'].'.&amp;vpnmode='.$service['mode'].'.&amp;id='.$service['vpnid'].'">';
+			$link = '<a title="%s" href="status_services.php?mode=%s&amp;service='.$service['name'].'&amp;vpnmode='.$service['mode'].'&amp;id='.$service['vpnid'].'">';
 		break;
 		case "captiveportal":
-			$link = '<a title="%s" href="status_services.php?mode=%s&amp;service='.$service['name'].'.&amp;zone='.$service['zone'].'">';
+			$link = '<a title="%s" href="status_services.php?mode=%s&amp;service='.$service['name'].'&amp;zone='.$service['zone'].'">';
 		break;
 		default:
 			$link = '<a title="%s" href="status_services.php?mode=%s&amp;service='.$service['name'].'">';
diff --git a/src/usr/local/www/status_openvpn.php b/src/usr/local/www/status_openvpn.php
index 829f659..4416d79 100644
--- a/src/usr/local/www/status_openvpn.php
+++ b/src/usr/local/www/status_openvpn.php
@@ -163,10 +163,11 @@ include("head.inc"); ?>
 					</tr>
 				</thead>
 				<tbody>
-			
-<?php
-		foreach ($server['conns'] as $conn):
-?>
+					
+					<?php
+							echo sizeof($server['conns']);
+							foreach ($server['conns'] as $conn):
+					?>
 					<tr id="<?php echo "r:{$server['mgmt']}:{$conn['remote_host']}"; ?>">
 						<td><?=$conn['common_name'];?></td>
 						<td><?=$conn['remote_host'];?></td>
@@ -175,15 +176,17 @@ include("head.inc"); ?>
 						<td><?=format_bytes($conn['bytes_sent']);?></td>
 						<td><?=format_bytes($conn['bytes_recv']);?></td>
 						<td>
-							<img src="/themes/<?php echo $g['theme']; ?>/images/icons/icon_x.gif"
+							<a
 							   onclick="killClient('<?php echo $server['mgmt']; ?>', '<?php echo $conn['remote_host']; ?>');" style="cursor:pointer;"
 							   id="<?php echo "i:{$server['mgmt']}:{$conn['remote_host']}"; ?>"
-							   title="<?php echo gettext("Kill client connection from") . " " . $conn['remote_host']; ?>" alt="delete" />
+							   title="<?php echo gettext("Kill client connection from") . " " . $conn['remote_host']; ?>">
+							<i class="icon icon-remove"></i>
+							</a>
 						</td>
 					</tr>
-<?php
-		endforeach;
-?>
+					<?php
+							endforeach;
+					?>
 				</tbody>
 				<tfoot>
 					<tr>
@@ -366,7 +369,7 @@ include("head.inc"); ?>
 }
 
 if ($DisplayNote) {
- 	print_info_box("<br /><b>" . gettext("NOTE") . ":</b> " . gettext("If you have custom options that override the management features of OpenVPN on a client or server, they will cause that OpenVPN instance to not work correctly with this status page."));
+ 	print_info_box(gettext("If you have custom options that override the management features of OpenVPN on a client or server, they will cause that OpenVPN instance to not work correctly with this status page."));
 }
 
 if ((empty($clients)) && (empty($servers)) && (empty($sk_servers))) {
diff --git a/src/usr/local/www/status_queues.php b/src/usr/local/www/status_queues.php
index f8e300f..cfd3e14 100644
--- a/src/usr/local/www/status_queues.php
+++ b/src/usr/local/www/status_queues.php
@@ -103,15 +103,14 @@ if ($_REQUEST['getactivity']) {
 	$finscript = "";
 	foreach ($statistics as $q) {
 		if ($stat_type == "0") {
-			$packet_s = round(150 * (1 - $q->pps / $bigger_stat), 0);
+			$packet_s = round(100 * ($q->pps / $bigger_stat), 0);
 		} else {
-			$packet_s = round(150 * (1 - $q->bandwidth / $bigger_stat), 0);
+			$packet_s = round(100 * ($q->bandwidth / $bigger_stat), 0);
 		}
 		if ($packet_s < 0) {
 			$packet_s = 0;
 		}
-		$finscript .= "jQuery('#queue{$q->queuename}widthb').width('{$packet_s}');";
-		$finscript .= "jQuery('#queue{$q->queuename}widtha').width('" . (150 - $packet_s) . "');";
+		$finscript .= "jQuery('#queue{$q->queuename}width').css('width','{$packet_s}%');";
 		$finscript .= "jQuery('#queue{$q->queuename}pps').val('" . number_format($q->pps, 1) . "');";
 		$finscript .= "jQuery('#queue{$q->queuename}bps').val('" . format_bits($q->bandwidth) . "');";
 		$finscript .= "jQuery('#queue{$q->queuename}borrows').val('{$q->borrows}');";
@@ -129,6 +128,7 @@ $shortcut_section = "trafficshaper";
 include("head.inc");
 ?>
 <body>
+<script src="/jquery/jquery-1.11.2.min.js"></script>
 <?php
 if (!is_array($config['shaper']['queue']) || count($config['shaper']['queue']) < 1) {
 	print_info_box(gettext("Traffic shaping is not configured."));
@@ -192,11 +192,14 @@ else: ?>
 ?>
 <?php endif; ?>
 			</table>
-<p>
-	<strong><span class="red"><?=gettext("Note"); ?>:</span></strong><br />
-	<?=gettext("Queue graphs take 5 seconds to sample data"); ?>.<br />
-	<?=gettext("You can configure the Traffic Shaper"); ?> <a href="/firewall_shaper_wizards.php"><?=gettext("here"); ?></a>.
-</p>
+</br>
+
+<?php 
+
+	print_info_box(gettext("Queue graphs take 5 seconds to sample data"));
+
+?>
+
 <script type="text/javascript">
 //<![CDATA[
 	function StatsShowHide(classname) {
@@ -241,6 +244,9 @@ function processQueues($altqstats, $level, $parent_name) {
 			<td bgcolor="#<?php echo $row_background?>" style="padding-left: <?php echo $level * 20?>px;">
 				<font color="#000000">
 					<?
+					if (is_array($q['queue'])) {
+						echo "<a href=\"#\" onclick=\"StatsShowHide('queuerow{$q['name']}{$q['interface']}');return false\">+/-</a> ";
+					}
 					if (strstr($q['name'], "root_")) {
 						echo "<a href=\"firewall_shaper.php?interface={$if_name}&amp;queue={$if_name}&amp;action=show\">Root queue</a>";
 					} else {
@@ -252,13 +258,9 @@ function processQueues($altqstats, $level, $parent_name) {
 <?php
 		$cpuUsage = 0;
 		echo "<td bgcolor=\"#{$row_background}\">";
-		echo "<img src='./themes/".$g['theme']."/images/misc/bar_left.gif' height='10' width='4' border='0' align='middle' alt='' />";
-		echo "<img src='./themes/".$g['theme']."/images/misc/bar_blue.gif' height='10' name='queue{$q['name']}{$q['interface']}widtha' id='queue{$q['name']}{$q['interface']}widtha' width='" . $cpuUsage . "' border='0' align='middle' alt='" . htmlspecialchars($q['name']) . "' />";
-		echo "<img src='./themes/".$g['theme']."/images/misc/bar_gray.gif' height='10' name='queue{$q['name']}{$q['interface']}widthb' id='queue{$q['name']}{$q['interface']}widthb' width='" . (150 - $cpuUsage) . "' border='0' align='middle' alt='" . htmlspecialchars($q['name']) . "' />";
-		echo "<img src='./themes/".$g['theme']."/images/misc/bar_right.gif' height='10' width='5' border='0' align='middle' alt='' /> ";
-		if (is_array($q['queue'])) {
-			echo "<a href=\"#\" onclick=\"StatsShowHide('queuerow{$q['name']}{$q['interface']}');return false\">+/-</a> ";
-		}
+		echo "<div class='progress' style='height: 7px;width: 170px;'>
+				<div class='progress-bar' role='progressbar' name='queue{$q['name']}{$q['interface']}width' id='queue{$q['name']}{$q['interface']}width' aria-valuenow='70' aria-valuemin='0' aria-valuemax='100' style='width: ".  ($cpuUsage*100)/150 ."%;'></div>
+			  </div>";
 		echo " </td>";
 		echo "<td bgcolor=\"#{$row_background}\"><input style='border: 0px solid white; background-color:#{$row_background}; color:#000000;width:70px;text-align:right;' size='10' name='queue{$q['name']}{$q['interface']}pps' id='queue{$q['name']}{$q['interface']}pps' value='(" . gettext("Loading") . ")' align='left' /></td>";
 		echo "<td bgcolor=\"#{$row_background}\"><input style='border: 0px solid white; background-color:#{$row_background}; color:#000000;width:80px;text-align:right;' size='10' name='queue{$q['name']}{$q['interface']}bps' id='queue{$q['name']}{$q['interface']}bps' value='' align='right' /></td>";