initial rewrite of package management pages

6 files changed, 248 insertions, 322 deletions

diff --git a/usr/local/www/diag_arp.php b/usr/local/www/diag_arp.php
index 0971619..23d74b6 100644
--- a/usr/local/www/diag_arp.php
+++ b/usr/local/www/diag_arp.php
@@ -310,7 +310,7 @@ $mac_man = load_mac_manufacturer_table();
 				$mac_hi = strtoupper($mac[0] . $mac[1] . $mac[3] . $mac[4] . $mac[6] . $mac[7]);
 
 				if (isset($mac_man[$mac_hi]))
-					print '('. $mac_man[$mac_hi] .'(';
+					print '<small>('. $mac_man[$mac_hi] .')</small>';
 ?>
 			</td>
 			<td><?=trim(str_replace("Z_ ", "", $entry['dnsresolve']))?></td>
diff --git a/usr/local/www/guiconfig.inc b/usr/local/www/guiconfig.inc
index 76e236b..a18e8e6 100644
--- a/usr/local/www/guiconfig.inc
+++ b/usr/local/www/guiconfig.inc
@@ -501,7 +501,6 @@ function firewall_check_for_advanced_options(&$item) {
 }
 
 function gentitle($title) {
-	global $navlevelsep;
 	if(!is_array($title))
 		return $title;
 	else
@@ -509,8 +508,17 @@ function gentitle($title) {
 }
 
 function genhtmltitle($title) {
-	global $config;
-	return gentitle($title);
+	if(!is_array($title))
+		return $title;
+
+	$bc = '<ol class="breadcrumb">';
+
+	foreach ($title as $el)
+		$bc .= '<li>'.$el.'</li>';
+
+	$bc .= '</ol>';
+
+	return $bc;
 }
 
 /* update the changedesc and changecount(er) variables */
diff --git a/usr/local/www/head.inc b/usr/local/www/head.inc
index 6340373..e4e90f8 100755
--- a/usr/local/www/head.inc
+++ b/usr/local/www/head.inc
@@ -278,7 +278,7 @@ if(! $g['disablehelpmenu']) {
 <nav class="navbar navbar-fixed-top navbar-inverse">
 	<div class="container">
 		<div class="navbar-header">
-			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#pf-navbar">
 				<span class="sr-only">Toggle navigation</span>
 				<span class="icon-bar"></span>
 				<span class="icon-bar"></span>
@@ -288,7 +288,7 @@ if(! $g['disablehelpmenu']) {
 			<a class="navbar-brand" href="/"><img src="/logo.png" alt="pfSense" /></a>
 		</div>
 
-		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+		<div class="collapse navbar-collapse" id="pf-navbar">
 			<ul class="nav navbar-nav">
 				<li class="dropdown">
 					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><?=gettext("System"); ?>
@@ -373,7 +373,7 @@ if(! $g['disablehelpmenu']) {
 	</div>
 </nav>
 <div class="container">
-	<h1><?=genhtmltitle($pgtitle);?></h1>
+	<?=genhtmltitle($pgtitle);?>
 <?php
 /*
 //FIXME
diff --git a/usr/local/www/pkg_mgr.php b/usr/local/www/pkg_mgr.php
index a7aab0f..423ac26 100644
--- a/usr/local/www/pkg_mgr.php
+++ b/usr/local/www/pkg_mgr.php
@@ -92,7 +92,6 @@ if (! empty($_GET))
 	if (isset($_GET['ver']))
 		$requested_version = htmlspecialchars($_GET['ver']);
 
-$closehead = false;
 $pgtitle = array(gettext("System"),gettext("Package Manager"));
 include("head.inc");
 
@@ -157,103 +156,94 @@ if($pkg_info) {
 	if (count($categories) > 1)
 		display_top_tabs($tab_array);
 }
-?>
-<table class="table table-striped">
-<thead>
-<tr>
-	<th><?=gettext("Name")?></th>
-<?php
-	if ($show_category)
-		print '<th>'.gettext("Category").'</th>'."\n";
-?>
-	<th><?=gettext("Status")?></th>
-	<th><?=gettext("Description")?></th>
-	<th></th>
-</tr>
-<thead>
-<tbody>
-<?php
-		if(!$pkg_info) {
-			echo "<tr><td><center>" . gettext("There are currently no packages available for installation.") . "</td></tr>";
-		} else {
-			if(is_array($pkg_keys)) {
-				foreach($pkg_keys as $key):
-					$index = &$pkg_info[$key];
-					if(get_pkg_id($index['name']) >= 0 )
-						continue;
 
-					if (package_skip_tests($index,$requested_version))
-						continue;
-
-					/* get history/changelog git dir */
-					$commit_dir=explode("/",$index['config_file']);
-					$changeloglink = "https://github.com/pfsense/pfsense-packages/commits/master/config/";
-					if ($commit_dir[(count($commit_dir)-2)] == "config")
-						$changeloglink .= $commit_dir[(count($commit_dir)-1)];
-					else
-						$changeloglink .= $commit_dir[(count($commit_dir)-2)];
-
-					/* Check package info link */
-					if($index['pkginfolink']) {
-						$pkginfolink = $index['pkginfolink'];
-						$pkginfo=gettext("Package info");
-					} else {
-						$pkginfolink = "https://forum.pfsense.org/index.php/board,15.0.html";
-						$pkginfo=gettext("No package info, check the forum");
-					}
-
-					if ($menu_category == "All" || $index['category'] == $menu_category || ($menu_category == "Other" && !in_array($index['category'],$visible_categories)) ):
-?>
-						<tr valign="top" class="<?=$index['category']?>">
-						<td>>
-							<a target="_blank" href="<?=$index['website']?>"><?=$index['name']?></a>
-						</td>
+if(!$pkg_info || !is_array($pkg_keys)):?>
+	<div class="alert alert-warning">
+		<?=gettext("There are currently no packages available for installation.")?>
+	</div>
+<?php else: ?>
+	<table class="table table-striped">
+	<thead>
+	<tr>
+		<th><?=gettext("Name")?></th>
+<?php if ($show_category):?>
+		<th><?=gettext("Category")?></th>
+<?php endif;?>
+		<th><?=gettext("Status")?></th>
+<?php if (!$g['disablepackagehistory']):?>
+		<th><?=gettext("Version")?></th>
+<?php endif;?>
+		<th><?=gettext("Platform")?></th>
+		<th><?=gettext("Description")?></th>
+	</tr>
+	</thead>
+	<tbody>
 <?php
-						if ($show_category)
-							print '<td>'.gettext($index['category']).'</td>'."\n";
-
-						if ($g['disablepackagehistory']) {
-							print '<td>'."\n";
-						} else {
-							print '<td class="listr" ';
-							domTT_title(gettext("Click ").ucfirst($index['name']).gettext(" version to check its change log."));
-							print ">\n";
-						}
-
-						print "{$index['status']} <br />\n";
-
-						if ($g['disablepackagehistory'])
-							echo"<a>{$index['version']}</a>";
-						else
-							echo "<a target='_blank' href='{$changeloglink}'>{$index['version']}</a>";
-?>
-						<br />
-						<?=gettext("platform") .": ". $index['required_version']?>
-						<br />
-						<?=$index['maximum_version']?>
-						</td>
-						<td>>
-						<?=$index['descr']?>
-<?php
-						if (! $g['disablepackageinfo']):
-?>
-							<br /><br />
-							<a target='_blank' href='<?=$pkginfolink?>' style='align:center;color:#ffffff; filter:Glow(color=#ff0000, strength=12);'><?=$pkginfo?></a>
-<?php
-						endif;
+	foreach($pkg_keys as $key):
+		$index = &$pkg_info[$key];
+		if(get_pkg_id($index['name']) >= 0 )
+			continue;
+
+		if (package_skip_tests($index,$requested_version))
+			continue;
+
+		/* get history/changelog git dir */
+		$commit_dir=explode("/",$index['config_file']);
+		$changeloglink = "https://github.com/pfsense/pfsense-packages/commits/master/config/";
+		if ($commit_dir[(count($commit_dir)-2)] == "config")
+			$changeloglink .= $commit_dir[(count($commit_dir)-1)];
+		else
+			$changeloglink .= $commit_dir[(count($commit_dir)-2)];
+
+		if ($menu_category != "All" && $index['category'] != $menu_category && !($menu_category == "Other" && !in_array($index['category'], $visible_categories)))
+			continue;
 ?>
-						</td>
-						<td>
-							<a href="pkg_mgr_install.php?id=<?=$index['name']?>"><img <?=domTT_title(gettext("Install ".ucfirst($index['name'])." package."))?> src="./themes/<?=$g['theme']?>/images/icons/icon_plus.gif" alt="add" /></a>
-						</td></tr>
+		<tr>
+			<td>
+<?php if ($index['website']):?>
+				<a title="<?=gettext("Visit official website")?>" target="_blank" href="<?=htmlspecialchars($index['website'])?>">
+<?php endif; ?>
+					<?=htmlspecialchars($index['name'])?>
+				</a>
+			</td>
+<?php if ($show_category):?>
+			<td>
+				<?=gettext($index['category'])?>
+			</td>
+<?php endif;?>
+			<td>
+				<?=ucfirst(strtolower($index['status']))?>
+			</td>
+<?php if (!$g['disablepackagehistory']):?>
+			<td>
+				<a target="_blank" title="<?=gettext("View changelog")?>" href="<?=htmlspecialchars($changeloglink)?>">
+					<?=htmlspecialchars($index['version'])?>
+				</a>
+			</td>
+<?php endif;?>
+			<td>
+				<?=$index['required_version']?>
+				<?php if ($index['maximum_version']):?>
+					(&lt; $index['maximum_version'])
+				<?php endif;?>
+			</td>
+			<td>
+				<?=$index['descr']?>
+			</td>
+			<td>
+				<a title="<?=gettext("Click to install")?>" href="pkg_mgr_install.php?id=<?=$index['name']?>">
+					<i class="icon icon-download"></i>
+				</a>
+<?php if(!$g['disablepackageinfo'] && $index['pkginfolink'] && $index['pkginfolink'] != $index['website']):?>
+				<a target="_blank" title="<?=gettext("View more inforation")?>" href="<?=htmlspecialchars($index['pkginfolink'])?>">
+					<i class="icon icon-question-sign"></i>
+				</a>
+<?php endif;?>
+			</td>
+		</tr>
 <?php
-					endif;
-				endforeach;
-			} else {
-				echo "<tr><td>" . gettext("There are currently no packages available for installation.") . "</td></tr>";
-			} /* if(is_array($pkg_keys)) */
-		} /* if(!$pkg_info) */
-?>
+	endforeach;
+endif;?>
 </tbody>
 </table>
-<?php include("foot.inc");?>
\ No newline at end of file
+<?php include("foot.inc")?>
\ No newline at end of file
diff --git a/usr/local/www/pkg_mgr_install.php b/usr/local/www/pkg_mgr_install.php
index e367bd6..5773933 100644
--- a/usr/local/www/pkg_mgr_install.php
+++ b/usr/local/www/pkg_mgr_install.php
@@ -3,7 +3,7 @@
 /*
 	pkg_mgr_install.php
 	part of pfSense (https://www.pfsense.org)
-        Copyright (C) 2013-2014 Electric Sheep Fencing, LP
+		Copyright (C) 2013-2014 Electric Sheep Fencing, LP
 	Copyright (C) 2004-2010 Scott Ullrich <sullrich@gmail.com>
  	Copyright (C) 2005 Colin Smith
 	All rights reserved.
@@ -55,9 +55,6 @@ $static_output = "";
 $static_status = "";
 $sendto = "output";
 
-$pgtitle = array(gettext("System"),gettext("Package Manager"),gettext("Install Package"));
-include("head.inc");
-
 if ($_POST) {
 	if (isset($_POST['pkgcancel']) || (empty($_POST['id']) && $_POST['mode'] != 'reinstallall')) {
 		header("Location: pkg_mgr_installed.php");
@@ -70,7 +67,7 @@ if ($_POST) {
 		break;
 	case 'installedinfo':
 	case 'reinstallxml':
-        case 'reinstallpkg':
+		case 'reinstallpkg':
 	case 'delete':
 		if (empty($_GET['pkg'])) {
 			header("Location: pkg_mgr_installed.php");
@@ -86,24 +83,17 @@ if ($_POST) {
 	}
 }
 
-?>
+$pgtitle = array(gettext("System"),gettext("Package Manager"),gettext("Install Package"));
+include("head.inc");
 
-<body link="#0000CC" vlink="#0000CC" alink="#0000CC">
-<?php include("fbegin.inc"); ?>
-	<form action="pkg_mgr_install.php" method="post">
-		<div id="mainareapkg">
-			<table width="100%" border="0" cellpadding="0" cellspacing="0" summary="package manager install">
-				<tr>
-					<td>
-						<?php
-							$tab_array = array();
-							$tab_array[] = array(gettext("Available packages"), false, "pkg_mgr.php");
-							$tab_array[] = array(gettext("Installed packages"), false, "pkg_mgr_installed.php");
-							$tab_array[] = array(gettext("Package Installer"), true, "");
-							display_top_tabs($tab_array);
-						?>
-					</td>
-				</tr>
+$tab_array = array();
+$tab_array[] = array(gettext("Available packages"), false, "pkg_mgr.php");
+$tab_array[] = array(gettext("Installed packages"), false, "pkg_mgr_installed.php");
+$tab_array[] = array(gettext("Package Installer"), true, "");
+display_top_tabs($tab_array);
+?>
+<form action="pkg_mgr_install.php" method="post" class="form-horizontal">
+	<h2>Add / remove package</h2>
 <?php if ((empty($_GET['mode']) && $_GET['id']) || (!empty($_GET['mode']) && (!empty($_GET['pkg']) || $_GET['mode'] == 'reinstallall') && ($_GET['mode'] != 'installedinfo' && $_GET['mode'] != 'showlog'))):
 	if (empty($_GET['mode']) && $_GET['id']) {
 		$pkgname = str_replace(array("<", ">", ";", "&", "'", '"', '.', '/'), "", htmlspecialchars_decode($_GET['id'], ENT_QUOTES | ENT_HTML401));
@@ -114,6 +104,7 @@ if ($_POST) {
 	} else if ($_GET['mode'] == 'reinstallall') {
 		$pkgmode = 'reinstallall';
 	}
+
 	switch ($pkgmode) {
 	case 'reinstallall':
 		$pkgname = 'All packages';
@@ -131,60 +122,35 @@ if ($_POST) {
 		break;
 	}
 ?>
-				<tr>
-					<td class="tabcont" align="center">
-						<table style="height:15;colspacing:0" width="420" border="0" cellpadding="0" cellspacing="0" summary="images">
-							<tr>
-								<td class="tabcont" align="center">Package: <b><?=$pkgname;?></b> will be <?=$pkgtxt;?>.<br/>
-								Please confirm the action.<br/>
-								</td>
-								<td class="tabcont" align="center">
-									<input type="hidden" name="id" value="<?=$pkgname;?>" />
-									<input type="hidden" name="mode" value="<?=$pkgmode;?>" />
-									<input type="submit" name="pkgconfirm" id="pkgconfirm" value="Confirm"/>
-									<input type="submit" name="pkgcancel" id="pkgcancel" value="Cancel"/>
-								</td>
-							</tr>
-						</table>
-					</td>
-				</tr>
-<?php endif; if (!empty($_POST['id']) || $_GET['mode'] == 'showlog' || ($_GET['mode'] == 'installedinfo' && !empty($_GET['pkg']))): ?>
-				<tr>
-					<td class="tabcont" align="center">
-						<table style="height:15;colspacing:0" width="420" border="0" cellpadding="0" cellspacing="0" summary="images">
-							<tr>
-								<td style="background:url('./themes/<?=$g['theme'];?>/images/misc/bar_left.gif')" height="15" width="5"></td>
-								<td>
-									<table id="progholder" style="height:15;colspacing:0" width="410" border="0" cellpadding="0" cellspacing="0" summary="progress bar">
-										<tr><td style="background:url('./themes/<?=$g['theme'];?>/images/misc/bar_gray.gif')" valign="top" align="left">
-											<img src='./themes/<?= $g['theme']; ?>/images/misc/bar_blue.gif' width="0" height="15" name="progressbar" id="progressbar" alt="progress bar" />
-										</td></tr>
-									</table>
-								</td>
-								<td style="background:url('./themes/<?=$g['theme'];?>/images/misc/bar_right.gif')" height="15" width="5">
-								</td>
-							</tr>
-						</table>
-						<br />
-						<!-- status box -->
-						<textarea cols="80" rows="1" name="status" id="status" wrap="hard"><?=gettext("Beginning package installation.");?></textarea>
-						<br />
-						<!-- command output box -->
-						<textarea cols="80" rows="35" name="output" id="output" wrap="hard"></textarea>
-					</td>
-				</tr>
-<?php endif; ?>
-			</table>
+	<div class="panel panel-default">
+		<div class="panel-body">
+			<p>Package: <b><?=$pkgname;?></b> will be <?=$pkgtxt;?>.</p>
+		</div>
+		<div class="panel-footer">
+			<input type="hidden" name="id" value="<?=$pkgname;?>" />
+			<input type="hidden" name="mode" value="<?=$pkgmode;?>" />
+			<input type="submit" name="pkgconfirm" class="btn btn-primary" value="Confirm"/>
+			<input type="submit" name="pkgcancel" class="btn" value="Cancel"/>
+		</div>
+	</div>
+<?php endif;?>
+
+<?php if (!empty($_POST['id']) || $_GET['mode'] == 'showlog' || ($_GET['mode'] == 'installedinfo' && !empty($_GET['pkg']))):?>
+	<div class="panel panel-default">
+		<div class="panel-heading">
+			<h2 id="status"><?=gettext("Beginning package installation.")?></h2>
 		</div>
-	</form>
-<?php include("fend.inc"); ?>
-<script type="text/javascript">
-//<![CDATA[
-NiftyCheck();
-Rounded("div#mainareapkg","bl br","#FFF","#eeeeee","smooth");
-//]]>
-</script>
 
+		<div class="panel-body">
+			<textarea rows="15" class="form-control" id="output"></textarea>
+
+			<div class="progress">
+				<div id="progressbar" class="progress-bar progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 1%"><span class="sr-only">1% Complete</span></div>
+			</div>
+		</div>
+	</div>
+<?php endif?>
+</form>
 <?php
 
 ob_flush();
@@ -279,7 +245,7 @@ if ($_GET) {
 				$status_a = gettext(sprintf("Installation of %s completed.", $pkgid));
 				update_status($status_a);
 				$status = get_after_install_info($pkgid);
-				if($status) 
+				if($status)
 					$static_output .= "\n" . gettext("Installation completed.") . "\n{$pkgid} " . gettext("setup instructions") . ":\n{$status}";
 				else
 					$static_output .= "\n" . gettext("Installation completed.   Please check to make sure that the package is configured from the respective menu then start the package.");
@@ -302,7 +268,5 @@ if ($_GET) {
 	/* Restore to read only fs */
 	conf_mount_ro();
 }
-?>
 
-</body>
-</html>
+include('foot.inc')?>
\ No newline at end of file
diff --git a/usr/local/www/pkg_mgr_installed.php b/usr/local/www/pkg_mgr_installed.php
index 82b5dc9..e4695ca 100644
--- a/usr/local/www/pkg_mgr_installed.php
+++ b/usr/local/www/pkg_mgr_installed.php
@@ -72,149 +72,113 @@ if (!verify_all_package_servers())
 
 /* Print package server SSL warning. See https://redmine.pfsense.org/issues/484 */
 if (check_package_server_ssl() === false)
-	print_info_box(package_server_ssl_failure_message())
-?>
-	<table>
+	print_info_box(package_server_ssl_failure_message());
+
+$version = file_get_contents("/etc/version");
+$tab_array = array();
+$tab_array[] = array(gettext("Available Packages"), false, "pkg_mgr.php");
+//	$tab_array[] = array("{$version} " . gettext("packages"), false, "pkg_mgr.php");
+//	$tab_array[] = array("Packages for any platform", false, "pkg_mgr.php?ver=none");
+//	$tab_array[] = array("Packages for a different platform", $requested_version == "other" ? true : false, "pkg_mgr.php?ver=other");
+$tab_array[] = array(gettext("Installed Packages"), true, "pkg_mgr_installed.php");
+display_top_tabs($tab_array);
+
+if(!is_array($config['installedpackages']['package'])):?>
+	<div class="alert alert-warning">
+		<?=gettext("There are no packages currently installed.")?>
+	</div>
+<?php else: ?>
+	<table class="table table-striped">
+	<thead>
 		<tr>
-			<td>
-				<?php
-					$version = file_get_contents("/etc/version");
-					$tab_array = array();
-					$tab_array[] = array(gettext("Available Packages"), false, "pkg_mgr.php");
-//					$tab_array[] = array("{$version} " . gettext("packages"), false, "pkg_mgr.php");
-//					$tab_array[] = array("Packages for any platform", false, "pkg_mgr.php?ver=none");
-//					$tab_array[] = array("Packages for a different platform", $requested_version == "other" ? true : false, "pkg_mgr.php?ver=other");
-					$tab_array[] = array(gettext("Installed Packages"), true, "pkg_mgr_installed.php");
-					display_top_tabs($tab_array);
-?>
-			</td>
+			<th><span class="sr-only"><?=gettext("Status")?></span></th>
+			<th><?=gettext("Name")?></th>
+			<th><?=gettext("Category")?></th>
+			<th><?=gettext("Version")?></th>
+			<th><?=gettext("Description")?></th>
 		</tr>
-		<tr>
-			<td>
-				<div>
-					<table>
-						<tr>
-							<td><?=gettext("Name")?></td>
-							<td><?=gettext("Category")?></td>
-							<td><?=gettext("Version")?></td>
-							<td><?=gettext("Description")?></td>
-							<td>&nbsp;</td>
-						</tr>
-						<?php
-							if(is_array($config['installedpackages']['package'])):
-
-								$instpkgs = array();
-								foreach($config['installedpackages']['package'] as $instpkg) {
-									$instpkgs[] = $instpkg['name'];
-								}
-								natcasesort($instpkgs);
-
-								foreach ($instpkgs as $index => $pkgname):
-
-									$pkg = $config['installedpackages']['package'][$index];
-									if(!$pkg['name'])
-										continue;
-
-									// get history/changelog git dir
-									$commit_dir=explode("/",$pkg['config_file']);
-									$changeloglink ="https://github.com/pfsense/pfsense-packages/commits/master/config/".$commit_dir[(count($commit_dir)-2)];
-									#check package version
-									$latest_package = $currentvers[$pkg['name']]['version'];
-									if ($latest_package) {
-										// we're running a newer version of the package
-										if(strcmp($pkg['version'], $latest_package) > 0) {
-											$tdclass = "listbggrey";
-											if ($g['disablepackagehistory'])
-												$pkgver  = "<a>".gettext("Available") .": ". $latest_package . "<br />";
-											else
-												$pkgver  = "<a target='_blank' href='$changeloglink'>".gettext("Available") .": ". $latest_package . "<br />";
-											$pkgver .= gettext("Installed") .": ". $pkg['version']. "</a>";
-										}
-										// we're running an older version of the package
-										if(strcmp($pkg['version'], $latest_package) < 0) {
-											$tdclass = "listbg";
-											if ($g['disablepackagehistory'])
-												$pkgver  = "<a><font color='#ffffff'>" . gettext("Available") .": ". $latest_package . "</font><br />";
-											else
-												$pkgver  = "<a target='_blank' href='$changeloglink'><font color='#ffffff'>" . gettext("Available") .": ". $latest_package . "<br />";
-											$pkgver .= gettext("Installed") .": ". $pkg['version']."</font></a>";
-										}
-										// we're running the current version
-										if(!strcmp($pkg['version'], $latest_package)) {
-											$tdclass = "listr";
-											if ($g['disablepackagehistory'])
-												$pkgver = "<a>{$pkg['version']}</a>";
-											else
-												$pkgver = "<a target='_blank' href='$changeloglink'>{$pkg['version']}</a>";
-										}
-										$pkgdescr = $currentvers[$pkg['name']]['descr'];
-									} else {
-										// unknown available package version
-										$tdclass = "listbg";
-										if ($g['disablepackagehistory'])
-											$pkgver = "<a><font color='#ffffff'>" . gettext("Latest") .": ". gettext("N/A") . "</font><br />";
-										else
-											$pkgver = "<a target='_blank' href='$changeloglink'><font color='#ffffff'>" . gettext("Latest") .": ". gettext("N/A") . "<br />";
-										$pkgver .= gettext("Installed") .": ". $pkg['version']."</font></a>";
-										$pkgdescr = $pkg['descr'];
-									}
-									/* Check package info link */
-									if($pkg['pkginfolink']){
-										$pkginfolink = $pkg['pkginfolink'];
-										$pkginfo=gettext("Package info");
-										}
-									else{
-										$pkginfolink = "https://forum.pfsense.org/index.php/board,15.0.html";
-										$pkginfo=gettext("No package info, check the forum");
-										}
-
-?>
-						<tr valign="top">
-							<td>
-								<?=$pkg['name']?>
-							</td>
-							<td>
-								<?=$pkg['category']?>
-							</td>
-							<?php
-							if (isset($g['disablepackagehistory']))
-									echo "<td>{$pkgver}</td>";
-							else
-									echo "<td>{$pkgver}</td>";
-?>
-							<td>>
-									<?=$pkgdescr?>
-							<?php if (! $g['disablepackageinfo']):?>
-							<br /><br />
-							<a target='_blank' href='<?=$pkginfolink?>' style='align:center;color:#ffffff; filter:Glow(color=#ff0000, strength=12);'><?=$pkginfo?></a>
-							<?php endif?>
-							</td>
-							<td>
-								<a href="pkg_mgr_install.php?mode=delete&amp;pkg=<?=$pkg['name']?>">
-									<img <?=domTT_title(gettext("Remove ".ucfirst($pkg['name'])." package."))?> src="./themes/<?=$g['theme']?>/images/icons/icon_x.gif" alt="delete" />
-								</a>
-								<br />
-								<a href="pkg_mgr_install.php?mode=reinstallpkg&amp;pkg=<?=$pkg['name']?>">
-									<img <?=domTT_title(gettext("Reinstall ".ucfirst($pkg['name'])." package."))?> src="./themes/<?=$g['theme']?>/images/icons/icon_reinstall_pkg.gif" alt="reinstall" />
-								</a>
-								<a href="pkg_mgr_install.php?mode=reinstallxml&amp;pkg=<?=$pkg['name']?>">
-									<img <?=domTT_title(gettext("Reinstall ".ucfirst($pkg['name'])."'s GUI components."))?> src="./themes/<?=$g['theme']?>/images/icons/icon_reinstall_xml.gif" alt="reinstall" />
-								</a>
-							</td>
-						</tr>
-						<?php
-								endforeach;
-							else:
+	</thead>
+	<tbody>
+<?php
+	$instpkgs = array();
+	foreach($config['installedpackages']['package'] as $instpkg) {
+		$instpkgs[] = $instpkg['name'];
+	}
+	natcasesort($instpkgs);
+
+	foreach ($instpkgs as $index => $pkgname):
+		$pkg = $config['installedpackages']['package'][$index];
+		if(!$pkg['name'])
+			continue;
+
+		// get history/changelog git dir
+		$commit_dir=explode("/",$pkg['config_file']);
+		$changeloglink ="https://github.com/pfsense/pfsense-packages/commits/master/config/".$commit_dir[(count($commit_dir)-2)];
+		#check package version
+		$latest_package = $currentvers[$pkg['name']]['version'];
+		if ($latest_package) {
+			// we're running a newer version of the package
+			if(strcmp($pkg['version'], $latest_package) > 0) {
+				$status = 'Newer then available ('. $latest_package .')';
+				$statusicon = 'exclamation';
+			}
+			// we're running an older version of the package
+			if(strcmp($pkg['version'], $latest_package) < 0) {
+				$status = 'Upgrade available to '.$latest_package;
+				$statusicon = 'plus';
+			}
+			// we're running the current version
+			if(!strcmp($pkg['version'], $latest_package)) {
+				$status = 'Up-to-date';
+				$statusicon = 'ok';
+			}
+			$pkgdescr = $currentvers[$pkg['name']]['descr'];
+		} else {
+			// unknown available package version
+			$status = 'Unknown';
+			$statusicon = 'question';
+			$pkgdescr = $pkg['descr'];
+		}
 ?>
-						<tr>
-							<td>
-								<?=gettext("There are no packages currently installed.")?>
-							</td>
-						</tr>
-						<?php endif?>
-					</table>
-				</div>
-			</td>
-		</tr>
-	</table>
+	<tr>
+		<td>
+			<i title="<?=$status?>" class="icon icon-<?=$statusicon?>-sign"></i>
+		</td>
+		<td>
+			<?=$pkg['name']?>
+		</td>
+		<td>
+			<?=$pkg['category']?>
+		</td>
+		<td>
+<?php if (!$g['disablepackagehistory']):?>
+			<a target="_blank" title="<?=gettext("View changelog")?>" href="<?=htmlspecialchars($changeloglink)?>">
+<?php endif;?>
+				<?=htmlspecialchars($pkg['version'])?>
+			</a>
+		</td>
+		<td>
+			<?=$pkgdescr?>
+		</td>
+		<td>
+			<a href="pkg_mgr_install.php?mode=delete&amp;pkg=<?=$pkg['name']?>">
+				<i class="icon icon-remove"></i>
+			</a>
+			<a title="<?=gettext("Click to reinstall")?>" href="pkg_mgr_install.php?mode=reinstallpkg&amp;pkg=<?=$pkg['name']?>">
+				<i class="icon icon-retweet"></i>
+			</a>
+			<a title="<?=gettext("Click to reinstall GUI components")?>" href="pkg_mgr_install.php?mode=reinstallxml&amp;pkg=<?=$pkg['name']?>">
+				<i class="icon icon-share"></i>
+			</a>
+<?php if(!$g['disablepackageinfo'] && $pkg['pkginfolink'] && $pkg['pkginfolink'] != $pkg['website']):?>
+			<a target="_blank" title="<?=gettext("View more inforation")?>" href="<?=htmlspecialchars($pkg['pkginfolink'])?>">
+				<i class="icon icon-question-sign"></i>
+			</a>
+<?php endif;?>
+		</td>
+	</tr>
+<?php endforeach;?>
+	</tbody>
+</table>
+<?php endif; ?>
 <?php include("foot.inc")?>
\ No newline at end of file