Improve task manager

web/css/styles.min.css

@@ -305,6 +305,25 @@
        url('../webfonts/exo-2-v5-latin-900italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../webfonts/exo-2-v5-latin-900italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
+/* inconsolata-bold - latin */
+@font-face {
+  font-family: 'Inconsolata';
+  src: local('Inconsolata Bold'), local('Inconsolata-Bold'),
+      url('hinted-Inconsolata-Bold.woff2') format('woff2'),
+      url('hinted-Inconsolata-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
+/* inconsolata - latin */
+@font-face {
+  font-family: 'Inconsolata';
+  src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
+      url('hinted-Inconsolata-Regular.woff2') format('woff2'),
+      url('hinted-Inconsolata-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
 /* Base
    ========================================================================== */
 /**
@@ -874,7 +893,9 @@ input[type="checkbox"] {
   color: #f7f7f7;
   position: relative;
   line-height: 38px;
-  padding: 12px 24px;
+  padding: 12px 18px;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent; 
 }
 
 .l-menu__item a:hover {
@@ -885,6 +906,8 @@ input[type="checkbox"] {
   box-shadow: inset 0px 0px 1px #fff,
               inset 0px 0px 6px rgba(255,255,255,0.6) !important;
   transition: 0.2s;
+  border-left: 1px solid rgba(0,0,0,0.1);
+  border-right: 1px solid rgba(0,0,0,0.1);
 }
 .l-menu__item a:active {
   border: 0;
@@ -894,6 +917,8 @@ input[type="checkbox"] {
   box-shadow: inset 0px 0px 1px #fff,
               inset -1px -1px 4px rgba(220,220,220,0.4) !important;
   transition: 0.2s;
+  border-left: 1px solid rgba(0,0,0,0.15);
+  border-right: 1px solid rgba(0,0,0,0.15);
 }
 
 .l-menu.active .l-menu__item.focus a {
@@ -1379,14 +1404,14 @@ div.l-content > div.l-separator:nth-of-type(4) {
   float: left;
   width: 32px;
   height: 28px;
-  border: 1px solid rgba(41,90,152,0.15);
+  border: 1px solid #ddd;
   background-color: rgba(255,255,255,0.90);
   text-shadow: 0px 1px rgba(255,255,255,0.95);
   border-radius: 4px;
   border-bottom-left-radius: 0px;
   border-top-left-radius: 0px;
   border-left: 0px;
-  box-shadow: inset 0px 0px 1px rgba(41,90,152,0.1), inset 0 0px 2px rgba(255,255,255,1), 0px 0px 2px rgba(41,90,152,0.15);
+  box-shadow: inset 0px 0px 1px rgba(41,90,152,0.1), inset 0 0px 2px rgba(255,255,255,1);
   text-shadow: 1px 1px rgba(255,255,255,0.9);
   color: #006699;
   padding: 0;
@@ -2854,7 +2879,7 @@ a.vst-text:active b{
   font-size: 0.8rem;
   width: 630px;
   height: 300px;
-  font-family:"Lucida Console", Monaco, monospace;
+  font-family: "Inconsolata", "Lucida Console", Monaco, monospace;
   white-space: pre;
 }
 .vst-textinput.short {
@@ -3313,8 +3338,8 @@ div.l-content.collapsed .l-sort {
 }
 
 .console-output {
-  font-family: 'Courier New', Courier, monospace;
-  font-size: 0.8rem;
+  font-family: "Inconsolata", "Lucida Console", Monaco, monospace;
+  font-size: 0.7rem;
   color: #202020;
   letter-spacing: -0.01em;
 }
@@ -3383,6 +3408,19 @@ form#vstobjects.suspended {
   background-color: #54a6e5;
 }
 
+.status-icon-yellow, .status-icon-maroon:hover {
+  color: #f3e72c;
+}
+.status-icon-teal, .status-icon-teal:hover {
+  color: #33cccc;
+}
+.status-icon-purple, .status-icon-purple:hover {
+  color: #8e2fca;
+}
+
+.status-icon-maroon, .status-icon-maroon:hover {
+  color: #cc3366;
+}
 
 .status-icon-red, .status-icon-red:hover {
   color: #ff3333;
@@ -3393,7 +3431,7 @@ form#vstobjects.suspended {
 }
 
 .status-icon-orange, .status-icon-orange:hover {
-  color: #faab00;
+  color: #f6a800;
 }
 
 .status-icon-lightblue, .status-icon-lightblue:hover {

web/inc/i18n/en.php

@@ -7,7 +7,7 @@
 $LANG['en'] = array(
     'Packages'  => 'Packages',
     'IP'  => 'Network',
-    'Graphs'  => 'Graphs',
+    'Graphs'  => 'Task Monitor',
     'Statistics'  => 'Statistics',
     'Log'  => 'Logs',
     'Server'  => 'Server',
@@ -583,7 +583,7 @@ $LANG['en'] = array(
     'Template Manager' => 'Template Manager',
     'Backup Migration Manager' => 'Backup Migration Manager',
     'FileManager' => 'File Manager',
-    'show: CPU / MEM / NET / DISK' => 'Usage Details',
+    'show: CPU / MEM / NET / DISK' => 'View Advanced Details',
 
     'sort by' => 'sort by',
     'Date' => 'Date',

web/templates/admin/list_rrd.html

@@ -2,6 +2,7 @@
       <div class="l-sort clearfix noselect">
         <div class="l-unit-toolbar__buttonstrip">
           <a class="ui-button cancel" href="/list/server/"><i class="fas fa-arrow-left status-icon-blue"></i> <?=__('Back')?></a>
+          <a href="/list/server/?cpu" class="ui-button cancel" title="<?=__('show: CPU / MEM / NET / DISK');?>"><i class="fas fa-chart-pie status-icon-green"></i> <?=__('show: CPU / MEM / NET / DISK');?></a>
         </div>
         <div class="l-sort-toolbar clearfix">
           <table>

web/templates/admin/list_server_info.html

@@ -3,10 +3,12 @@
 <head>
   <meta charset="utf-8">
   <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
-  <title>Hestia - <?=__($TAB)?></title>
-  <link rel="stylesheet" href="/css/styles.min.css">
-
-  <link type="text/css" href="/css/jquery-custom-dialogs.css" rel="stylesheet" />
+  <title>Hestia Task Viewer - <?=__($TAB)?></title>
+  <link rel="stylesheet" href="/css/styles.min.css?1446554103">
+  <link type="text/css" href="/css/animate.css?1446554103" rel="stylesheet" />
+  <link type="text/css" href="/css/jquery-custom-dialogs.css?1446554103" rel="stylesheet" />
+  <link type="text/css" href="/css/all.min.css?1446554103" rel="stylesheet" />
+  <script src="/inc/jquery/jquery-3.3.1.min.js"></script>
   <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
   <script type="text/javascript" src="/js/jquery.cookie.js"></script>
   <script type="text/javascript" src="/js/jquery-ui-1.8.20.custom.min.js"></script>
@@ -18,22 +20,25 @@
   </a>
   <div class="l-header">
     <div class="l-center">
-      <a href="/list/user/" class="l-logo"></a>
+      <a href="/list/web/" class="l-logo"></a>
       <!-- /.l-logo -->
       <div class="l-menu clearfix">
-        <div class="l-menu__item <?php if(isset($_GET['cpu'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?cpu"><?=__('CPU')?></a></div>
-        <div class="l-menu__item <?php if(isset($_GET['mem'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?mem"><?=__('MEMORY')?></a></div>
-        <div class="l-menu__item <?php if(isset($_GET['disk'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?disk"><?=__('DISK')?></a></div>
-        <div class="l-menu__item <?php if(isset($_GET['net'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?net"><?=__('NETWORK')?></a></div>
-        <div class="l-menu__item <?php if(isset($_GET['web'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?web"><?=__('WEB')?></a></div>
-        <div class="l-menu__item <?php if(isset($_GET['dns'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?dns"><?=__('DNS')?></a></div>
-        <div class="l-menu__item <?php if(isset($_GET['mail'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?mail"><?=__('MAIL')?></a></div>
-        <div class="l-menu__item <?php if(isset($_GET['db'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?db"><?=__('DB')?></a></div>
+        <div class="l-menu__item"><a href="/list/rrd/"><i class="fas fa-arrow-alt-circle-left"></i>&nbsp;&nbsp;&nbsp;<?=__('Back')?></a></div>
+        <div class="l-menu__item <?php if(isset($_GET['cpu'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?cpu"><i class="fas fa-microchip"></i>&nbsp;&nbsp;&nbsp;<?=__('CPU')?></a></div>
+        <div class="l-menu__item <?php if(isset($_GET['mem'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?mem"><i class="fas fa-memory"></i>&nbsp;&nbsp;&nbsp;<?=__('RAM')?></a></div>
+        <div class="l-menu__item <?php if(isset($_GET['disk'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?disk"><i class="fas fa-hdd"></i>&nbsp;&nbsp;&nbsp;<?=__('Disk')?></a></div>
+        <div class="l-menu__item <?php if(isset($_GET['net'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?net"><i class="fas fa-ethernet"></i>&nbsp;&nbsp;&nbsp;<?=__('Network')?></a></div>
+        <div class="l-menu__item <?php if(isset($_GET['web'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?web"><i class="fas fa-globe-europe"></i>&nbsp;&nbsp;&nbsp;<?=__('Web')?></a></div>
+        <div class="l-menu__item <?php if(isset($_GET['dns'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?dns"><i class="fas fa-at"></i>&nbsp;&nbsp;&nbsp;<?=__('DNS')?></a></div>
+        <div class="l-menu__item <?php if(isset($_GET['mail'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?mail"><i class="fas fa-mail-bulk"></i>&nbsp;&nbsp;&nbsp;<?=__('Mail')?></a></div>
+        <div class="l-menu__item <?php if(isset($_GET['db'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?db"><i class="fas fa-database"></i>&nbsp;&nbsp;&nbsp;<?=__('DB')?></a></div>
+        
       </div>
       <!-- /.l-menu -->
       <div class="l-profile">
+        <div class="l-menu__item"><a href="javascript:location.reload();"><i class="fas fa-redo"></i></a></div>
         <a class="l-profile__username" href="/edit/user/?user=<?php echo $user; ?>"><?=$user?></a>
-        <a class="l-profile__logout" href="/logout/"> <?=__('Log out')?> </a>
+        <a class="l-profile__logout" href="/logout/"> <?=__('Log out')?> <i class="fas fa-sign-out-alt"></i></a>
       </div>
       <!-- /.l-profile -->
     </div>

web/templates/admin/list_services.html

@@ -1,13 +1,12 @@
     <div class="l-center">
       <div class="l-sort clearfix noselect">
         <div class="l-unit-toolbar__buttonstrip">
-          <a href="/edit/server/" class="ui-button cancel" title="<?=__('Configure')?>"><i class="fas fa-cog status-icon-lightblue"></i> <?=__('Configure')?></a>
+          <a href="/edit/server/" class="ui-button cancel" title="<?=__('Configure')?>"><i class="fas fa-cog status-icon-maroon"></i> <?=__('Configure')?></a>
+          <a href="/list/rrd/" class="ui-button cancel" title="<?=__('Graphs')?>"><i class="fas fa-chart-area status-icon-green"></i> <?=__('Graphs')?></a>
           <a href="/list/package/" class="ui-button cancel" title="<?=__('Packages')?>"><i class="fas fa-box-open status-icon-orange"></i> <?=__('Packages')?></a>
           <a href="/list/ip/" class="ui-button cancel" title="<?=__('IP')?>"><i class="fas fa-ethernet status-icon-blue"></i> <?=__('IP')?></a>
           <?php if ((isset($_SESSION['FIREWALL_SYSTEM'])) && (!empty($_SESSION['FIREWALL_SYSTEM']))) {?><a href="/list/firewall/" class="ui-button cancel" title="<?=__('Firewall')?>"><i class="fas fa-shield-alt status-icon-red"></i> <?=__('Firewall')?></a><?php }?>
-          <a href="/list/rrd/" class="ui-button cancel" title="<?=__('Graphs')?>"><i class="fas fa-chart-area status-icon-orange"></i> <?=__('Graphs')?></a>
           <a href="/list/updates/" class="ui-button cancel" title="<?=__('Updates')?>"><i class="fas fa-sync status-icon-green"></i> <?=__('Updates')?></a>
-          <a href="/list/server/?cpu" class="ui-button cancel" title="<?=__('show: CPU / MEM / NET / DISK');?>"><i class="fas fa-search status-icon-blue"></i> <?=__('show: CPU / MEM / NET / DISK');?></a>
         </div>
         <div class="l-sort-toolbar clearfix">
           <table>