Browse Source

Refactor server info section (#3120)

- Add note to development docs about clearing backups
- Improve some syntax compatibility with Prettier in views
- Format login views with Prettier, to cut down on eventual diff
Alec Rust 3 years ago
parent
commit
81b44495b3

+ 5 - 0
docs/docs/contributing/development.md

@@ -118,6 +118,11 @@ Please ensure you have [Yarn](https://yarnpkg.com) v3 installed and are using [N
 
 1. Reload the page in your browser to see your changes
 
+::: info
+A backup is created each time the Hestia build script is run. If you run this a lot it can fill up your VM's disk space.
+You can delete the backups by running `rm -rf /root/hst_backups` as root user on the VM.
+:::
+
 Please refer to the [contributing guidelines](https://github.com/hestiacp/hestiacp/blob/main/CONTRIBUTING.md) for more details on submitting code changes for review.
 
 ### Building packages

+ 12 - 9
web/css/src/themes/dark.css

@@ -960,18 +960,10 @@ li[aria-expanded="true"] a {
 	color: #dadada;
 }
 
-.server-info-name {
-	color: #fafafa !important;
-}
-
-.server-info-output {
+.server-console-output {
 	background: #282828;
 }
 
-.icon-server-info {
-	color: #707070;
-}
-
 .body-rrd .units .l-unit {
 	background-color: #282828 !important;
 	border-left: 1px solid transparent !important;
@@ -1012,6 +1004,17 @@ li[aria-expanded="true"] a {
 	border-color: #454545;
 }
 
+/* Server summary component
+   ========================================================================== */
+
+.server-summary-icon {
+	color: #707070;
+}
+
+.server-summary-title {
+	color: #fafafa;
+}
+
 /* Panel component
    ========================================================================== */
 

+ 74 - 23
web/css/src/themes/default.css

@@ -2240,6 +2240,79 @@
 .values-list-value {
 }
 
+/* Server summary component
+   ========================================================================== */
+
+.server-summary {
+	padding: 20px;
+
+	@media (--viewport-medium) {
+		display: flex;
+	}
+}
+
+.server-summary-icon {
+	text-align: center;
+	margin-bottom: 10px;
+
+	& .fas {
+		font-size: 4.6rem;
+	}
+
+	@media (--viewport-medium) {
+		margin-top: 8px;
+		margin-bottom: 0;
+	}
+}
+
+.server-summary-content {
+	text-align: center;
+
+	@media (--viewport-medium) {
+		text-align: left;
+		flex-grow: 1;
+		margin-left: 30px;
+	}
+
+	@media (--viewport-large) {
+		margin-left: 40px;
+	}
+}
+
+.server-summary-title {
+	color: #414141;
+	margin-bottom: 10px;
+
+	@media (--viewport-medium) {
+		font-size: 1.7rem;
+		margin-bottom: 0;
+	}
+}
+
+.server-summary-list {
+	@media (--viewport-medium) {
+		display: flex;
+		justify-content: space-between;
+	}
+}
+
+.server-summary-item {
+	@media (--viewport-large) {
+		min-width: 200px;
+	}
+}
+
+.server-summary-list-label {
+	font-weight: 600;
+
+	@media (--viewport-medium) {
+		display: block;
+	}
+}
+
+.server-summary-list-value {
+}
+
 /* Panel component
    ========================================================================== */
 
@@ -2716,34 +2789,12 @@ li[aria-expanded="true"] a {
 	}
 }
 
-.server-info-data {
-	margin-left: 100px;
-	margin-top: -20px;
-
-	& table {
-		width: auto;
-	}
-}
-
-.server-info-name {
-	margin-top: 8px;
-	margin-bottom: 22px;
-	font-weight: 400;
-}
-
-.server-info-output {
+.server-console-output {
 	color: #c36;
 	padding: 10px 0 20px 20px;
 	background: #fff;
 }
 
-.icon-server-info {
-	font-size: 4.6rem;
-	float: left;
-	margin-right: 32px;
-	margin-left: 2px;
-}
-
 .userlist-email {
 	font-size: 0.75rem;
 	white-space: nowrap;

+ 0 - 4
web/css/src/themes/vestia.css

@@ -380,10 +380,6 @@ strong {
 	border-radius: 4px !important;
 }
 
-.server-info-data {
-	line-height: 1rem !important;
-}
-
 /* Shortcuts panel
    ========================================================================== */
 

File diff suppressed because it is too large
+ 0 - 0
web/css/themes/dark.min.css


File diff suppressed because it is too large
+ 0 - 0
web/css/themes/default.min.css


File diff suppressed because it is too large
+ 0 - 0
web/css/themes/vestia.min.css


+ 5 - 5
web/templates/header.php

@@ -1,12 +1,12 @@
 <!doctype html>
-<html class="no-js" lang="<?=$_SESSION['LANGUAGE']?>">
+<html class="no-js" lang="<?= $_SESSION["LANGUAGE"] ?>">
 
 <head>
 <?php
-	require $_SERVER['HESTIA'] . '/web/templates/includes/title.php';
-	require $_SERVER['HESTIA'] . '/web/templates/includes/css.php';
-	require $_SERVER['HESTIA'] . '/web/templates/includes/js.php';
+require $_SERVER["HESTIA"] . "/web/templates/includes/title.php";
+require $_SERVER["HESTIA"] . "/web/templates/includes/css.php";
+require $_SERVER["HESTIA"] . "/web/templates/includes/js.php";
 ?>
 </head>
 
-<body class="body-<?=strtolower($TAB)?> lang-<?=$_SESSION['language']?>">
+<body class="body-<?= strtolower($TAB) ?> lang-<?= $_SESSION["language"] ?>">

+ 18 - 17
web/templates/includes/js.php

@@ -1,11 +1,11 @@
-<script defer src="/js/main.js?<?=JS_LATEST_UPDATE?>"></script>
-<script defer src="/js/shortcuts.js?<?=JS_LATEST_UPDATE?>"></script>
-<script defer src="/js/vendor/alpine-3.10.5.min.js?<?=JS_LATEST_UPDATE?>"></script>
-<script defer src="/js/vendor/jquery-3.6.1.min.js?<?=JS_LATEST_UPDATE?>"></script>
-<script defer src="/js/vendor/jquery-ui.min.js?<?=JS_LATEST_UPDATE?>"></script>
-<script defer src="/js/vendor/chart.min.js?<?=JS_LATEST_UPDATE?>"></script>
-<script defer src="/js/events.js?<?=JS_LATEST_UPDATE?>"></script>
-<script defer src="/js/init.js?<?=JS_LATEST_UPDATE?>"></script>
+<script defer src="/js/main.js?<?= JS_LATEST_UPDATE ?>"></script>
+<script defer src="/js/shortcuts.js?<?= JS_LATEST_UPDATE ?>"></script>
+<script defer src="/js/vendor/alpine-3.10.5.min.js?<?= JS_LATEST_UPDATE ?>"></script>
+<script defer src="/js/vendor/jquery-3.6.1.min.js?<?= JS_LATEST_UPDATE ?>"></script>
+<script defer src="/js/vendor/jquery-ui.min.js?<?= JS_LATEST_UPDATE ?>"></script>
+<script defer src="/js/vendor/chart.min.js?<?= JS_LATEST_UPDATE ?>"></script>
+<script defer src="/js/events.js?<?= JS_LATEST_UPDATE ?>"></script>
+<script defer src="/js/init.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script>
 	// TODO: REMOVE
 	const App = {
@@ -27,9 +27,9 @@
 	document.documentElement.classList.replace('no-js', 'js');
 	document.addEventListener('alpine:init', () => {
 		Alpine.store('globals', {
-			FTP_USER_PREFIX: '<?= $user_plain; ?>_',
-			DB_USER_PREFIX: '<?= $user_plain; ?>_',
-			DB_DBNAME_PREFIX: '<?= $user_plain; ?>_',
+			FTP_USER_PREFIX: '<?= $user_plain ?>_',
+			DB_USER_PREFIX: '<?= $user_plain ?>_',
+			DB_DBNAME_PREFIX: '<?= $user_plain ?>_',
 			UNLIM_VALUE: 'unlimited',
 			UNLIM_TRANSLATED_VALUE: '<?= _("unlimited") ?>',
 			NOTIFICATIONS_EMPTY: '<?= _("no notifications") ?>',
@@ -40,10 +40,11 @@
 		});
 	})
 </script>
-<?php foreach(new DirectoryIterator($_SERVER['HESTIA'].'/web/js/custom_scripts') as $customScript){
-	if($customScript->getExtension() === 'js'){
-		echo '<script defer src="/js/custom_scripts/'.rawurlencode($customScript->getBasename()).'"></script>';
-	} elseif($customScript->getExtension() === "php"){
-		require_once($customScript->getPathname());
+
+<?php foreach (new DirectoryIterator($_SERVER["HESTIA"] . "/web/js/custom_scripts") as $customScript) {
+	if ($customScript->getExtension() === "js") {
+		echo '<script defer src="/js/custom_scripts/' . rawurlencode($customScript->getBasename()) . '"></script>';
+	} elseif ($customScript->getExtension() === "php") {
+		require_once $customScript->getPathname();
 	}
- } ?>
+} ?>

+ 1 - 1
web/templates/includes/title.php

@@ -1,3 +1,3 @@
 <meta charset="utf-8">
-<title><?=_($TAB)?> - <?=htmlentities($_SERVER['HTTP_HOST']); ?> - <?=_('Hestia Control Panel');?></title>
+<title><?= _($TAB) ?> - <?= htmlentities($_SERVER["HTTP_HOST"]) ?> - <?= _("Hestia Control Panel") ?></title>
 <meta name="viewport" content="width=device-width, initial-scale=1">

+ 8 - 8
web/templates/pages/add_access_key.php

@@ -3,12 +3,12 @@
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
 			<a class="button button-secondary" id="btn-back" href="/list/access-key/">
-				<i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?>
+				<i class="fas fa-arrow-left status-icon blue"></i><?= _("Back") ?>
 			</a>
 		</div>
 		<div class="toolbar-buttons">
 			<button class="button" type="submit" form="vstobjects">
-				<i class="fas fa-floppy-disk status-icon purple"></i><?=_('Save');?>
+				<i class="fas fa-floppy-disk status-icon purple"></i><?= _("Save") ?>
 			</button>
 		</div>
 	</div>
@@ -17,24 +17,24 @@
 
 <div class="container animate__animated animate__fadeIn">
 	<form id="vstobjects" name="v_add_access_key" method="post">
-		<input type="hidden" name="token" value="<?= $_SESSION['token'] ?>">
+		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<input type="hidden" name="ok" value="Add">
 
 		<div class="form-container">
-			<h1 class="form-title"><?=_('Adding Access Key');?></h1>
-			<?php show_alert_message($_SESSION);?>
-			<p class="u-mb10"><?=_('Permissions');?></p>
+			<h1 class="form-title"><?= _("Adding Access Key") ?></h1>
+			<?php show_alert_message($_SESSION); ?>
+			<p class="u-mb10"><?= _("Permissions") ?></p>
 			<?php foreach ($apis as $api_name => $api_data) { ?>
 				<div class="form-check">
 					<input class="form-check-input" type="checkbox" value="<?= $api_name ?>" name="v_apis[]" id="v_apis_<?= $api_name ?>" tabindex="5">
 					<label for="v_apis_<?= $api_name ?>">
-						<?=_($api_name); ?>
+						<?= _($api_name) ?>
 					</label>
 				</div>
 			<?php } ?>
 			<div class="u-mt15">
 				<label for="v_comment" class="form-label">
-					<?=_('Comment');?> <span class="optional">(<?=_('optional');?>)</span>
+					<?= _("Comment") ?> <span class="optional">(<?= _("optional") ?>)</span>
 				</label>
 				<input type="text" class="form-control" name="v_comment" id="v_comment" maxlength="255">
 			</div>

+ 14 - 8
web/templates/pages/list_db.php

@@ -16,18 +16,24 @@
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
 			<?php if ($read_only !== 'true') {?>
-				<a href="/add/db/" class="button button-secondary" id="btn-create"><i class="fas fa-circle-plus status-icon green"></i><?=_('Add Database');?></a>
+				<a href="/add/db/" class="button button-secondary" id="btn-create">
+					<i class="fas fa-circle-plus status-icon green"></i><?=_('Add Database');?>
+				</a>
 				<?php if (($_SESSION['DB_SYSTEM'] === 'mysql') || ($_SESSION['DB_SYSTEM'] === 'mysql,pgsql') || ($_SESSION['DB_SYSTEM'] === 'pgsql,mysql')) {?>
-					<a class="button button-secondary <?=(ipUsed() ? 'button-suspended':'');?>" href="<?=$db_myadmin_link; ?>" target="_blank"><i class="fas fa-database status-icon orange"></i>phpMyAdmin</a>
+					<a class="button button-secondary <?=(ipUsed() ? 'button-suspended':'');?>" href="<?=$db_myadmin_link; ?>" target="_blank">
+						<i class="fas fa-database status-icon orange"></i>phpMyAdmin
+					</a>
 				<?php } ?>
 				<?php if (($_SESSION['DB_SYSTEM'] === 'pgsql') || ($_SESSION['DB_SYSTEM'] === 'mysql,pgsql') || ($_SESSION['DB_SYSTEM'] === 'pgsql,mysql')) {?>
-					<a class="button button-secondary <?=(ipUsed() ? 'button-suspended':'');?>" href="<?=$db_pgadmin_link; ?>" target="_blank"><i class="fas fa-database status-icon orange"></i>phpPgAdmin</a>
+					<a class="button button-secondary <?=(ipUsed() ? 'button-suspended':'');?>" href="<?=$db_pgadmin_link; ?>" target="_blank">
+						<i class="fas fa-database status-icon orange"></i>phpPgAdmin
+					</a>
+				<?php } ?>
+				<?php if (ipUsed()) {?>
+					<a target="_blank" href="https://docs.hestiacp.com/admin_docs/database.html#why-i-can-t-use-http-ip-phpmyadmin">
+						<i class="fas fa-circle-question"></i>
+					</a>
 				<?php } ?>
-				<?php if(ipUsed()){
-				?>
-				<a target="_blank" href="https://docs.hestiacp.com/admin_docs/database.html#why-i-can-t-use-http-ip-phpmyadmin"><i class="fas fa-circle-question"></i></a>
-				<?
-				}?>
 			<?php } ?>
 		</div>
 		<div class="toolbar-right">

+ 1 - 1
web/templates/pages/list_server_info.php

@@ -114,6 +114,6 @@
 		<span class="u-hidden"><?=_('Top');?></span>
 	</a>
 
-	<div class="server-info-output">.</div>
+	<div class="server-console-output">.</div>
 	<div class="container">
 		<pre class="console-output animate__animated animate__fadeIn">

+ 130 - 121
web/templates/pages/list_services.php

@@ -2,13 +2,23 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a href="/edit/server/" class="button button-secondary"><i class="fas fa-gear status-icon maroon"></i><?=_('Configure');?></a>
-			<a href="/list/rrd/" class="button button-secondary"><i class="fas fa-chart-area status-icon blue"></i><?=_('Graphs');?></a>
-			<a href="/list/updates/" class="button button-secondary"><i class="fas fa-arrows-rotate status-icon green"></i><?=_('Updates');?></a>
+			<a href="/edit/server/" class="button button-secondary">
+				<i class="fas fa-gear status-icon maroon"></i><?=_('Configure');?>
+			</a>
+			<a href="/list/rrd/" class="button button-secondary">
+				<i class="fas fa-chart-area status-icon blue"></i><?=_('Graphs');?>
+			</a>
+			<a href="/list/updates/" class="button button-secondary">
+				<i class="fas fa-arrows-rotate status-icon green"></i><?=_('Updates');?>
+			</a>
 			<?php if (!empty($_SESSION['FIREWALL_SYSTEM']) && $_SESSION['FIREWALL_SYSTEM'] == "iptables" ) {?>
-				<a href="/list/firewall/" class="button button-secondary"><i class="fas fa-shield-halved status-icon red"></i><?=_('Firewall');?></a>
+				<a href="/list/firewall/" class="button button-secondary">
+					<i class="fas fa-shield-halved status-icon red"></i><?=_('Firewall');?>
+				</a>
 			<?php }?>
-			<a href="/list/log/?user=system&token=<?=$_SESSION['token']?>" class="button button-secondary"><i class="fas fa-binoculars status-icon orange"></i><?=_('Logs');?></a>
+			<a href="/list/log/?user=system&token=<?=$_SESSION['token']?>" class="button button-secondary">
+				<i class="fas fa-binoculars status-icon orange"></i><?=_('Logs');?>
+			</a>
 			<div class="actions-panel" key-action="js">
 				<a class="data-controls do_servicerestart button button-secondary button-danger">
 					<i class="do_servicerestart fas fa-arrow-rotate-left status-icon red"></i><?=_('Restart');?>
@@ -37,135 +47,134 @@
 </div>
 <!-- End toolbar -->
 
-<div class="container units">
+<div class="container">
 
-	<div>
-		<div class="l-unit__col l-unit__col--right server-info">
-			<div class="icon-server-info"><i class="fas fa-server"></i></div>
-			<div class="l-unit__servername separate server-info-name"><?=$sys['sysinfo']['HOSTNAME']?></div>
-			<div class="server-info-data">
-				<table class="u-text-small">
-					<tr>
-						<td>
-							<div class="l-unit__stat-cols clearfix">
-								<div class="l-unit__stat-col l-unit__stat-col--left wide"><b><?=_('Hestia Control Panel');?>:</b></div>
-								<div class="l-unit__stat-col l-unit__stat-col--right">
-									<?php if ($sys['sysinfo']['RELEASE'] != 'release') { ?>
-										<i class="fas fa-flask icon-large status-icon red" title="<?=$sys['sysinfo']['RELEASE'];?>"></i>
-									<?php } ?>
-									<?php if ($sys['sysinfo']['RELEASE'] == 'release') { ?>
-										<i class="fas fa-cube icon-large status-icon" title="<?=_('Production release');?>"></i>
-									<?php } ?>
-									&nbsp;v<?=$sys['sysinfo']['HESTIA']?>
-								</div>
-							</div>
-						</td>
-						<td>
-							<div class="l-unit__stat-cols clearfix">
-								<div class="l-unit__stat-col l-unit__stat-col--left wide"><b><?=_('Operating System');?>:</b></div>
-								<div class="l-unit__stat-col l-unit__stat-col--right"><?=$sys['sysinfo']['OS']?> <?=$sys['sysinfo']['VERSION']?> (<?=$sys['sysinfo']['ARCH']?>)</div>
-							</div>
-						</td>
-						<td>
-							<div class="l-unit__stat-cols clearfix">
-								<div class="l-unit__stat-col l-unit__stat-col--left wide"><b><?=_('Load Average');?>:</b></div>
-								<div class="l-unit__stat-col l-unit__stat-col--right"><?=$sys['sysinfo']['LOADAVERAGE']?></div>
-							</div>
-						</td>
-						<td>
-							<div class="l-unit__stat-cols clearfix last">
-								<div class="l-unit__stat-col l-unit__stat-col--left wide"><b><?=_('Uptime');?>:</b></div>
-								<div class="l-unit__stat-col l-unit__stat-col--right"><?=humanize_time($sys['sysinfo']['UPTIME'])?></div>
-							</div>
-						</td>
-					</tr>
-				</table>
-			</div>
+	<div class="server-summary">
+		<div class="server-summary-icon">
+			<i class="fas fa-server"></i>
 		</div>
-	</div>
-
-	<div class="table-header">
-		<div class="l-unit__col l-unit__col--right">
-			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>">
-			</div>
-
-			<div class="clearfix l-unit__stat-col--left wide-2"><b><?=_('Service');?></b></div>
-			<div class="clearfix l-unit__stat-col--left text-right compact-2">&nbsp;</div>
-			<div class="clearfix l-unit__stat-col--left wide-3"><b><?=_('Description');?></b></div>
-			<div class="clearfix l-unit__stat-col--left text-center"><b><?=_('Uptime');?></b></div>
-			<div class="clearfix l-unit__stat-col--left text-center"><b><?=_('CPU');?></b></div>
-			<div class="clearfix l-unit__stat-col--left text-center"><b><?=_('Memory');?></b></div>
+		<div class="server-summary-content">
+			<h1 class="server-summary-title"><?=$sys['sysinfo']['HOSTNAME']?></h1>
+			<ul class="server-summary-list">
+				<li class="server-summary-item">
+					<span class="server-summary-list-label"><?=_('Hestia Control Panel');?></span>
+					<span class="server-summary-list-value">
+						<?php if ($sys['sysinfo']['RELEASE'] != 'release') { ?>
+							<i class="fas fa-flask icon-large status-icon red" title="<?=$sys['sysinfo']['RELEASE'];?>"></i>
+						<?php } ?>
+						<?php if ($sys['sysinfo']['RELEASE'] == 'release') { ?>
+							<i class="fas fa-cube icon-large status-icon" title="<?=_('Production release');?>"></i>
+						<?php } ?>
+						&nbsp;v<?=$sys['sysinfo']['HESTIA']?>
+					</span>
+				</li>
+				<li class="server-summary-item">
+					<span class="server-summary-list-label"><?=_('Operating System');?></span>
+					<span class="server-summary-list-value">
+						<?=$sys['sysinfo']['OS']?> <?=$sys['sysinfo']['VERSION']?> (<?=$sys['sysinfo']['ARCH']?>)
+					</span>
+				</li>
+				<li class="server-summary-item">
+					<span class="server-summary-list-label"><?=_('Load Average');?></span>
+					<span class="server-summary-list-value">
+						<?=$sys['sysinfo']['LOADAVERAGE']?>
+					</span>
+				</li>
+				<li class="server-summary-item">
+					<span class="server-summary-list-label"><?=_('Uptime');?></span>
+					<span class="server-summary-list-value">
+						<?=humanize_time($sys['sysinfo']['UPTIME'])?>
+					</span>
+				</li>
+			</ul>
 		</div>
 	</div>
 
-	<!-- Begin services status list item loop -->
-	<?php
-		foreach ($data as $key => $value) {
-		++$i;
-			if ($data[$key]['STATE'] == 'running') {
-				$status = 'active';
-				$action = 'stop';
-				$spnd_icon = 'fa-stop';
-				$state_icon = 'fa-circle-check status-icon green';
-			} else {
-				$status = 'suspended';
-				$action = 'start';
-				$spnd_icon = 'fa-play';
-				$state_icon = 'fa-circle-minus status-icon red';
-			}
-			if(in_array($key, $phpfpm)){
-				$edit_url="php";
-			} else {
-				$edit_url=$key;
-			}
+	<div class="units">
 
-			$cpu = $data[$key]['CPU'] / 10;
-			$cpu = number_format($cpu, 1);
-			if ($cpu == '0.0')	$cpu = 0;
-		?>
-		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended';?> animate__animated animate__fadeIn" sort-name="<?=strtolower($key)?>"
-			sort-memory="<?=$data[$key]['MEM']?>" sort-cpu="<?=$cpu;?>" sort-uptime="<?=$data[$key]['RTIME']?>">
+		<div class="table-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="check<?=$i ?>" class="ch-toggle" type="checkbox" title="<?=_('Select');?>" name="service[]" value="<?=$key?>">
+					<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>">
 				</div>
-				<div class="clearfix l-unit__stat-col--left wide-2">
-					<i class="fas <?=$state_icon;?> icon-pad-right"></i>
-					<b><a href="/edit/server/<? echo $edit_url ?>/" title="<?=_('edit');?>: <?=$key?>"><?=$key?></a></b>
-				</div>
-				<div class="clearfix l-unit__stat-col--left text-center compact-2">
-					<div class="actions-panel clearfix">
-						<div class="actions-panel__col actions-panel__edit shortcut-enter" key-action="href">
-							<a href="/edit/server/<? echo $edit_url ?>/" title="<?=_('edit');?>"><i class="fas fa-pencil status-icon orange status-icon dim icon-large"></i></a>
-						</div>
-						<div class="actions-panel__col actions-panel__stop shortcut-s" key-action="js">
-							<a id="restart_link_<?=$i?>" class="data-controls do_servicerestart" title="<?=_('restart');?>">
-								<i class="do_servicerestart data-controls fas fa-arrow-rotate-left status-icon highlight status-icon dim icon-large"></i>
-								<input type="hidden" name="servicerestart_url" value="/restart/service/?srv=<?=$key?>&token=<?=$_SESSION['token']?>">
-								<div id="restart_link_dialog_<?=$i?>" class="dialog js-confirm-dialog-servicerestart" title="<?=_('Confirmation');?>">
-									<p><?=sprintf(_('RESTART_CONFIRMATION'),$key); ?></p>
-								</div>
-							</a>
-						</div>
-						<div class="actions-panel__col actions-panel__delete shortcut-delete" key-action="js">
-							<a id="delete_link_<?=$i?>" class="data-controls do_servicestop" title="<?=_($action)?>">
-								<i class="do_servicestop fas <?=$spnd_icon?> status-icon red status-icon dim icon-large"></i>
-								<input type="hidden" name="servicestop_url" value="/<?=$action ?>/service/?srv=<?=$key?>&token=<?=$_SESSION['token']?>">
-								<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-servicestop" title="<?=_('Confirmation');?>">
-									<p><?php if($action == 'stop'){ echo sprintf(_('Are you sure you want to stop service'),$key); }else{ echo sprintf(_('Are you sure you want to start service'),$key); }?></p>
-								</div>
-							</a>
+
+				<div class="clearfix l-unit__stat-col--left wide-2"><b><?=_('Service');?></b></div>
+				<div class="clearfix l-unit__stat-col--left text-right compact-2">&nbsp;</div>
+				<div class="clearfix l-unit__stat-col--left wide-3"><b><?=_('Description');?></b></div>
+				<div class="clearfix l-unit__stat-col--left text-center"><b><?=_('Uptime');?></b></div>
+				<div class="clearfix l-unit__stat-col--left text-center"><b><?=_('CPU');?></b></div>
+				<div class="clearfix l-unit__stat-col--left text-center"><b><?=_('Memory');?></b></div>
+			</div>
+		</div>
+
+		<!-- Begin services status list item loop -->
+		<?php
+			foreach ($data as $key => $value) {
+			++$i;
+				if ($data[$key]['STATE'] == 'running') {
+					$status = 'active';
+					$action = 'stop';
+					$spnd_icon = 'fa-stop';
+					$state_icon = 'fa-circle-check status-icon green';
+				} else {
+					$status = 'suspended';
+					$action = 'start';
+					$spnd_icon = 'fa-play';
+					$state_icon = 'fa-circle-minus status-icon red';
+				}
+				if(in_array($key, $phpfpm)){
+					$edit_url="php";
+				} else {
+					$edit_url=$key;
+				}
+
+				$cpu = $data[$key]['CPU'] / 10;
+				$cpu = number_format($cpu, 1);
+				if ($cpu == '0.0')	$cpu = 0;
+			?>
+			<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended';?> animate__animated animate__fadeIn" sort-name="<?=strtolower($key)?>"
+				sort-memory="<?=$data[$key]['MEM']?>" sort-cpu="<?=$cpu;?>" sort-uptime="<?=$data[$key]['RTIME']?>">
+				<div class="l-unit__col l-unit__col--right">
+					<div class="clearfix l-unit__stat-col--left super-compact">
+						<input id="check<?=$i ?>" class="ch-toggle" type="checkbox" title="<?=_('Select');?>" name="service[]" value="<?=$key?>">
+					</div>
+					<div class="clearfix l-unit__stat-col--left wide-2">
+						<i class="fas <?=$state_icon;?> icon-pad-right"></i>
+						<b><a href="/edit/server/<? echo $edit_url ?>/" title="<?=_('edit');?>: <?=$key?>"><?=$key?></a></b>
+					</div>
+					<div class="clearfix l-unit__stat-col--left text-center compact-2">
+						<div class="actions-panel clearfix">
+							<div class="actions-panel__col actions-panel__edit shortcut-enter" key-action="href">
+								<a href="/edit/server/<? echo $edit_url ?>/" title="<?=_('edit');?>"><i class="fas fa-pencil status-icon orange status-icon dim icon-large"></i></a>
+							</div>
+							<div class="actions-panel__col actions-panel__stop shortcut-s" key-action="js">
+								<a id="restart_link_<?=$i?>" class="data-controls do_servicerestart" title="<?=_('restart');?>">
+									<i class="do_servicerestart data-controls fas fa-arrow-rotate-left status-icon highlight status-icon dim icon-large"></i>
+									<input type="hidden" name="servicerestart_url" value="/restart/service/?srv=<?=$key?>&token=<?=$_SESSION['token']?>">
+									<div id="restart_link_dialog_<?=$i?>" class="dialog js-confirm-dialog-servicerestart" title="<?=_('Confirmation');?>">
+										<p><?=sprintf(_('RESTART_CONFIRMATION'),$key); ?></p>
+									</div>
+								</a>
+							</div>
+							<div class="actions-panel__col actions-panel__delete shortcut-delete" key-action="js">
+								<a id="delete_link_<?=$i?>" class="data-controls do_servicestop" title="<?=_($action)?>">
+									<i class="do_servicestop fas <?=$spnd_icon?> status-icon red status-icon dim icon-large"></i>
+									<input type="hidden" name="servicestop_url" value="/<?=$action ?>/service/?srv=<?=$key?>&token=<?=$_SESSION['token']?>">
+									<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-servicestop" title="<?=_('Confirmation');?>">
+										<p><?php if($action == 'stop'){ echo sprintf(_('Are you sure you want to stop service'),$key); }else{ echo sprintf(_('Are you sure you want to start service'),$key); }?></p>
+									</div>
+								</a>
+							</div>
 						</div>
 					</div>
+					<div class="clearfix l-unit__stat-col--left wide-3"><?=_($data[$key]['SYSTEM'])?></div>
+					<div class="clearfix l-unit__stat-col--left text-center"><b><?=humanize_time($data[$key]['RTIME'])?></b></div>
+					<div class="clearfix l-unit__stat-col--left text-center"><b><?=$cpu?></b></div>
+					<div class="clearfix l-unit__stat-col--left text-center"><b><?=$data[$key]['MEM']?> <?=_('mb');?></b></div>
 				</div>
-				<div class="clearfix l-unit__stat-col--left wide-3"><?=_($data[$key]['SYSTEM'])?></div>
-				<div class="clearfix l-unit__stat-col--left text-center"><b><?=humanize_time($data[$key]['RTIME'])?></b></div>
-				<div class="clearfix l-unit__stat-col--left text-center"><b><?=$cpu?></b></div>
-				<div class="clearfix l-unit__stat-col--left text-center"><b><?=$data[$key]['MEM']?> <?=_('mb');?></b></div>
 			</div>
-		</div>
-	<?php } ?>
+		<?php } ?>
+	</div>
 </div>
 
 <footer class="app-footer">

+ 5 - 5
web/templates/pages/login/login.php

@@ -1,20 +1,20 @@
 <div class="login animate__animated animate__zoomIn">
 	<a href="/" class="u-block u-mr30 u-mb40">
-		<img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
+		<img src="/images/logo.svg" alt="<?= _("Hestia Control Panel") ?>" width="100" height="120">
 	</a>
 	<form id="form_login" method="post" action="/login/">
-		<input type="hidden" name="token" value="<?=$_SESSION['token']; ?>">
+		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<input type="hidden" name="murmur" value="" id="murmur">
 		<h1 class="login-title">
-			<?=_('Welcome to Hestia Control Panel');?>
+			<?= _("Welcome to Hestia Control Panel") ?>
 		</h1>
 		<?php if (isset($error)) echo $error ?>
 		<div class="u-mb20">
-			<label for="user" class="form-label"><?=_('Username');?></label>
+			<label for="user" class="form-label"><?= _("Username") ?></label>
 			<input type="text" class="form-control" name="user" id="user" autofocus>
 		</div>
 		<button type="submit" class="button">
-			<i class="fas fa-right-to-bracket"></i><?=_('Next');?>
+			<i class="fas fa-right-to-bracket"></i><?= _("Next") ?>
 		</button>
 	</form>
 </div>

+ 8 - 8
web/templates/pages/login/login_1.php

@@ -1,20 +1,20 @@
 <div class="login animate__animated animate__zoomIn">
 	<a href="/" class="u-block u-mr30 u-mb40">
-		<img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
+		<img src="/images/logo.svg" alt="<?= _("Hestia Control Panel") ?>" width="100" height="120">
 	</a>
 	<form id="form_login" method="post" action="/login/">
-		<input type="hidden" name="token" value="<?=$_SESSION['token']; ?>">
+		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<input type="hidden" name="murmur" value="" id="murmur">
 		<h1 class="login-title">
-			<?=_('Welcome');?> <?=htmlspecialchars($_SESSION['login']['username']); ?>!
+			<?= _("Welcome") ?> <?= htmlspecialchars($_SESSION["login"]["username"]) ?>!
 		</h1>
 		<?php if (isset($ERROR)) echo $ERROR ?>
 		<div class="u-mb20">
 			<label for="password" class="form-label u-side-by-side">
-				<?=_('Password');?>
-				<?php if ($_SESSION['POLICY_SYSTEM_PASSWORD_RESET'] !== 'no' ) {?>
+				<?= _("Password") ?>
+				<?php if ($_SESSION["POLICY_SYSTEM_PASSWORD_RESET"] !== "no") { ?>
 					<a class="login-label-link" href="/reset/">
-						<?=_('forgot password');?>
+						<?= _("forgot password") ?>
 					</a>
 				<?php } ?>
 			</label>
@@ -22,10 +22,10 @@
 		</div>
 		<div class="u-side-by-side">
 			<button type="submit" class="button">
-				<i class="fas fa-right-to-bracket"></i><?=_('Login');?>
+				<i class="fas fa-right-to-bracket"></i><?= _("Login") ?>
 			</button>
 			<button type="button" class="button button-secondary" onclick="location.href='/login/?logout=true'">
-				<?=_('Back');?>
+				<?= _("Back") ?>
 			</button>
 		</div>
 	</form>

+ 7 - 7
web/templates/pages/login/login_2.php

@@ -1,29 +1,29 @@
 <div class="login animate__animated animate__zoomIn">
 	<a href="/" class="u-block u-mr30 u-mb40">
-		<img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
+		<img src="/images/logo.svg" alt="<?= _("Hestia Control Panel") ?>" width="100" height="120">
 	</a>
 	<form id="form_login" method="post" action="/login/">
-		<input type="hidden" name="token" value="<?=$_SESSION['token']; ?>">
+		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<input type="hidden" name="murmur" value="" id="murmur">
 		<h1 class="login-title">
-			<?=_('2 Factor Authentication');?>
+			<?= _("2 Factor Authentication") ?>
 		</h1>
 		<?php if (isset($ERROR)) echo $ERROR ?>
 		<div class="u-mb20">
 			<label for="twofa" class="form-label u-side-by-side">
-				<?=_('2FA Token');?>
+				<?= _("2FA Token") ?>
 				<a class="login-label-link" href="/reset2fa/">
-					<?=_('Forgot token');?>
+					<?= _("Forgot token") ?>
 				</a>
 			</label>
 			<input type="text" class="form-control" name="twofa" id="twofa" autofocus>
 		</div>
 		<div class="u-side-by-side">
 			<button type="submit" class="button">
-				<i class="fas fa-right-to-bracket"></i><?=_('Login');?>
+				<i class="fas fa-right-to-bracket"></i><?= _("Login") ?>
 			</button>
 			<button type="button" class="button button-secondary" onclick="location.href='/login/?logout'">
-				<?=_('Back');?>
+				<?= _("Back") ?>
 			</button>
 		</div>
 	</form>

+ 8 - 8
web/templates/pages/login/login_a.php

@@ -1,31 +1,31 @@
 <div class="login animate__animated animate__zoomIn">
 	<a href="/" class="u-block u-mr30 u-mb40">
-		<img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
+		<img src="/images/logo.svg" alt="<?= _("Hestia Control Panel") ?>" width="100" height="120">
 	</a>
 	<form id="form_login" method="post" action="/login/">
-		<input type="hidden" name="token" value="<?=$_SESSION['token']; ?>">
+		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<input type="hidden" name="murmur" value="" id="murmur">
 		<h1 class="login-title">
-			<?=_('Welcome to Hestia Control Panel');?>
+			<?= _("Welcome to Hestia Control Panel") ?>
 		</h1>
 		<?php if (isset($error)) echo $error ?>
 		<div class="u-mb10">
-			<label for="user" class="form-label"><?=_('Username');?></label>
+			<label for="user" class="form-label"><?= _("Username") ?></label>
 			<input type="text" class="form-control" name="user" id="user" autofocus>
 		</div>
 		<div class="u-mb20">
 			<label for="password" class="form-label u-side-by-side">
-				<?=_('Password');?>
-				<?php if ($_SESSION['POLICY_SYSTEM_PASSWORD_RESET'] !== 'no' ) {?>
+				<?= _("Password") ?>
+				<?php if ($_SESSION["POLICY_SYSTEM_PASSWORD_RESET"] !== "no") { ?>
 					<a class="login-label-link" href="/reset/">
-						<?=_('forgot password');?>
+						<?= _("forgot password") ?>
 					</a>
 				<?php } ?>
 			</label>
 			<input type="password" class="form-control" name="password" id="password" autofocus>
 		</div>
 		<button type="submit" class="button">
-			<i class="fas fa-right-to-bracket"></i><?=_('Next');?>
+			<i class="fas fa-right-to-bracket"></i><?= _("Next") ?>
 		</button>
 	</form>
 </div>

+ 10 - 10
web/templates/pages/login/reset2fa.php

@@ -1,40 +1,40 @@
 <div class="login animate__animated animate__zoomIn">
 	<a href="/" class="u-block u-mr30 u-mb40">
-		<img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
+		<img src="/images/logo.svg" alt="<?= _("Hestia Control Panel") ?>" width="100" height="120">
 	</a>
-	<?php if ($success) {?>
+	<?php if ($success) { ?>
 		<div>
 			<h1 class="login-title">
-				<?=_('2FA Reset successfully');?>
+				<?= _("2FA Reset successfully") ?>
 			</h1>
 			<?php if (isset($ERROR)) echo $ERROR ?>
 			<div class="u-mt20">
 				<button type="button" class="button button-secondary" onclick="location.href='/login/'">
-					<?=_('Log in');?>
+					<?= _("Log in") ?>
 				</button>
 			</div>
 		</div>
 	<?php } else { ?>
 		<form method="post" action="/reset2fa/">
-			<input type="hidden" name="token" value="<?=$_SESSION['token'];?>">
+			<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 			<h1 class="login-title">
-				<?=_('Reset 2FA');?>
+				<?= _("Reset 2FA") ?>
 			</div>
 			<?php if (isset($ERROR)) echo $ERROR ?>
 			<div class="u-mb10">
-				<label for="user" class="form-label"><?=_('Username');?></label>
+				<label for="user" class="form-label"><?= _("Username") ?></label>
 				<input type="text" class="form-control" name="user" id="user">
 			</div>
 			<div class="u-mb20">
-				<label for="twofa" class="form-label"><?=_('2FA Reset Code');?></label>
+				<label for="twofa" class="form-label"><?= _("2FA Reset Code") ?></label>
 				<input type="text" class="form-control" name="twofa" id="twofa">
 			</div>
 			<div class="u-side-by-side">
 				<button type="submit" class="button">
-					<?=_('Submit');?>
+					<?= _("Submit") ?>
 				</button>
 				<button type="button" class="button button-secondary" onclick="location.href='/login/?logout'">
-					<?=_('Back');?>
+					<?= _("Back") ?>
 				</button>
 			</div>
 		</form>

+ 7 - 7
web/templates/pages/login/reset_1.php

@@ -1,27 +1,27 @@
 <div class="login animate__animated animate__zoomIn">
 	<a href="/" class="u-block u-mr30 u-mb40">
-		<img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
+		<img src="/images/logo.svg" alt="<?= _("Hestia Control Panel") ?>" width="100" height="120">
 	</a>
 	<form method="post" action="/reset/">
-		<input type="hidden" name="token" value="<?=$_SESSION['token'];?>">
+		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<h1 class="login-title">
-			<?=_('Forgot Password');?>
+			<?= _("Forgot Password") ?>
 		</h1>
 		<?php if (isset($ERROR)) echo $ERROR ?>
 		<div class="u-mb10">
-			<label for="user" class="form-label"><?=_('Username');?></label>
+			<label for="user" class="form-label"><?= _("Username") ?></label>
 			<input type="text" class="form-control" name="user" id="user">
 		</div>
 		<div class="u-mb20">
-			<label for="email" class="form-label"><?=_('Email');?></label>
+			<label for="email" class="form-label"><?= _("Email") ?></label>
 			<input type="email" class="form-control" name="email" id="email">
 		</div>
 		<div class="u-side-by-side">
 			<button type="submit" class="button">
-				<?=_('Submit');?>
+				<?= _("Submit") ?>
 			</button>
 			<button type="button" class="button button-secondary" onclick="location.href='/login/?logout'">
-				<?=_('Back');?>
+				<?= _("Back") ?>
 			</button>
 		</div>
 	</form>

+ 8 - 8
web/templates/pages/login/reset_2.php

@@ -1,28 +1,28 @@
 <div class="login animate__animated animate__zoomIn">
 	<a href="/" class="u-block u-mr30 u-mb40">
-		<img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
+		<img src="/images/logo.svg" alt="<?= _("Hestia Control Panel") ?>" width="100" height="120">
 	</a>
 	<form method="get" action="/reset/">
 		<h1 class="login-title">
-			<?=_('Forgot Password');?>
+			<?= _("Forgot Password") ?>
 		</h1>
 		<?php if (isset($ERROR)) echo $ERROR ?>
 		<p style="padding: 12px 0 0 2px;">
-			<?=_('RESET_CODE_SENT');?>
+			<?= _("RESET_CODE_SENT") ?>
 		</p>
 		<div class="u-mb20">
 			<input type="hidden" name="action" value="confirm">
-			<input type="hidden" name="token" value="<?=htmlentities($_SESSION['token']);?>">
-			<input type="hidden" name="user" value="<?=htmlentities($_GET['user'])?>">
-			<label for="code" class="form-label"><?=_('Reset Code');?></label>
+			<input type="hidden" name="token" value="<?= htmlentities($_SESSION["token"]) ?>">
+			<input type="hidden" name="user" value="<?= htmlentities($_GET["user"]) ?>">
+			<label for="code" class="form-label"><?= _("Reset Code") ?></label>
 			<input type="text" class="form-control" name="code" id="code">
 		</div>
 		<div class="u-side-by-side">
 			<button type="submit" class="button">
-				<?=_('Confirm');?>
+				<?= _("Confirm") ?>
 			</button>
 			<button type="button" class="button button-secondary" onclick="location.href='/reset/'">
-				<?=_('Back');?>
+				<?= _("Back") ?>
 			</button>
 		</div>
 	</form>

+ 9 - 9
web/templates/pages/login/reset_3.php

@@ -1,30 +1,30 @@
 <div class="login animate__animated animate__zoomIn">
 	<a href="/" class="u-block u-mr30 u-mb40">
-		<img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
+		<img src="/images/logo.svg" alt="<?= _("Hestia Control Panel") ?>" width="100" height="120">
 	</a>
 	<form method="post">
 		<h1 class="login-title">
-			<?=_('Forgot Password');?>
+			<?= _("Forgot Password") ?>
 		</h1>
 		<?php if (isset($ERROR)) echo $ERROR ?>
 		<div class="u-mb10">
 			<input type="hidden" name="action" value="confirm">
-			<input type="hidden" name="token" value="<?=htmlentities($_SESSION['token']);?>">
-			<input type="hidden" name="user" value="<?=htmlentities($_GET['user']);?>">
-			<input type="hidden" name="code" value="<?=htmlentities($_GET['code']);?>">
-			<label for="password" class="form-label"><?=_('New Password');?></label>
+			<input type="hidden" name="token" value="<?= htmlentities($_SESSION["token"]) ?>">
+			<input type="hidden" name="user" value="<?= htmlentities($_GET["user"]) ?>">
+			<input type="hidden" name="code" value="<?= htmlentities($_GET["code"]) ?>">
+			<label for="password" class="form-label"><?= _("New Password") ?></label>
 			<input type="password" class="form-control" name="password" id="password">
 		</div>
 		<div class="u-mb20">
-			<label for="password_confirm" class="form-label"><?=_('Confirm Password');?></label>
+			<label for="password_confirm" class="form-label"><?= _("Confirm Password") ?></label>
 			<input type="password" class="form-control" name="password_confirm" id="password_confirm">
 		</div>
 		<div class="u-side-by-side">
 			<button type="submit" class="button">
-				<?=_('Reset');?>
+				<?= _("Reset") ?>
 			</button>
 			<button type="button" class="button button-secondary" onclick="location.href='/login/'">
-				<?=_('Back');?>
+				<?= _("Back") ?>
 			</button>
 		</div>
 	</form>

Some files were not shown because too many files changed in this diff