mprovements into the server view

This commit is contained in:
2026-01-04 20:58:11 +01:00
parent 73529ae34a
commit f84eb6d149
9 changed files with 249 additions and 51 deletions

View File

@@ -277,7 +277,9 @@ return [
'server_licenses' => 'Licenses',
'server_backup' => 'Backups',
'disk_space' => 'Disk space',
'disk_reserved_space' => 'Provisioned size',
'disk_used' => 'Disk used',
'disk_file_used' => 'Used size',
'disk_location' => 'Disk location',
'type' => 'Type',
'all_technical_information' => 'All technical information',

View File

@@ -276,8 +276,10 @@ return [
'server_vm_generation' => 'Gen',
'server_licenses' => 'Licenties',
'server_backup' => 'Backups',
'disk_space' => 'Schijf grote',
'disk_used' => 'Schijf gebruikt',
'disk_space' => 'Schijf grootte',
'disk_reserved_space' => 'Toegewezen grootte',
'disk_used' => 'Schijf gebruik',
'disk_file_used' => 'Gebruikte grootte',
'disk_location' => 'Schijf locatie',
'type' => 'Type',
'all_technical_information' => 'Alle technische informatie',

View File

@@ -24,6 +24,7 @@ if (!$API->checkPermissions('servers', 'RO', true)) {
# JS Scripts to load for this page
$jsScriptLoadData['delete_confirmation'] = true;
$jsScriptLoadData['breadCrumbs'] = true;
$jsScriptLoadData['codeblocks'] = true;
# PageClasses Setup
$pageNavbar = new pageNavbar(true);
@@ -84,6 +85,8 @@ if (is_array($disks) && count($disks) > 0) {
$totalDiskSpace = array_sum($sizes);
}
$server_state_color = returnServerStateColor($server_data['server_state']);
# Licences
$licenses = json_decode($server_data['server_licenses'], true);
@@ -131,6 +134,7 @@ $pageNavbar->outPutNavbar();
<div class="row">
<h1>
<i class="<?php echo $GLOBALS['pages']['servers']['server_overview']['page_icon'] ?>"> </i> <?php echo $server_data['server_vm_host_name'] ?>
<span class="badge bg-<?php echo $server_state_color ?> fs-4 align-middle"><?php echo ucfirst($server_data['server_state']) ?></span>
</h1>
</div>
@@ -263,8 +267,7 @@ $pageNavbar->outPutNavbar();
</h4>
</td>
</tr>
<?php
if ($API->checkPermissions('servers', 'RW', true)) { ?>
<?php if ($API->checkPermissions('servers', 'RW', true)) { ?>
<tr>
<td></td>
<td>
@@ -280,25 +283,36 @@ $pageNavbar->outPutNavbar();
</div>
<?php if (is_array($disks) && count($disks) > 0) { ?>
<h2>
<i class="fa-solid fa-hard-drive"></i> <?php echo __('server_disks') ?>
<h2 class="">
<i class="fa-solid fa-hard-drive text-secondary"></i> <?php echo __('server_disks') ?>
</h2>
<div id="accordion">
<div class="card">
<?php foreach ($disks as $disk) { ?>
<a data-bs-toggle="collapse" data-bs-target="#collapse<?php echo $disk['disk_name'] ?>">
<div class="card-header py-1" id="heading<?php echo $disk['disk_name'] ?>">
<h4 class="mb-0 text-success">
<i class="fa-solid fa-hard-drive"></i> <?php echo $disk['disk_name'] ?>
<h4 class="mb-0">
<i class="fa-solid fa-hard-drive text-secondary"></i> <?php echo $disk['disk_name'] ?>
</h4>
</div>
</a>
<div id="collapse<?php echo $disk['disk_name'] ?>" class="collapse" data-parent="#accordion">
<div class="card-body">
<?php echo __('disk_space') ?>: <?php echo $disk['disk_space'] ?>
<br> <?php echo __('disk_used') ?>: <?php echo $disk['disk_used'] ?>
<br> <?php echo __('disk_location') ?>: <?php echo $disk['disk_location'] ?>
<table class="table table-borderless table-sm">
<tr>
<td><?php echo __('disk_space') ?>:</td>
<td><?php echo $disk['disk_space'] ?>GB</td>
</tr>
<tr>
<td><?php echo __('disk_file_used') ?>:</td>
<td><?php echo $disk['disk_used'] ?>GB</td>
</tr>
<tr>
<td><?php echo __('disk_location') ?>:</td>
<td><?php echo $disk['disk_location'] ?></td>
</tr>
</table>
</div>
</div>
<?php
@@ -310,15 +324,15 @@ $pageNavbar->outPutNavbar();
if (is_array($licenses) && count($licenses) > 0) { ?>
<h2>
<i class="fa-solid fa-file-invoice-dollar"></i> <?php echo __('server_licenses') ?>
<i class="fa-solid fa-file-invoice-dollar text-success"></i> <?php echo __('server_licenses') ?>
</h2>
<div id="accordion">
<div class="card">
<?php foreach ($licenses as $key => $licence) { ?>
<a data-bs-toggle="collapse" data-bs-target="#collapse<?php echo array_key_first($licence) ?>">
<div class="card-header py-1" id="heading<?php echo array_key_first($licence) ?>">
<h4 class="mb-0 text-success">
<i class="fa-solid fa-file-invoice-dollar"></i> <?php echo array_key_first($licence) ?>
<h4 class="mb-0">
<i class="fa-solid fa-file-invoice-dollar text-success"></i> <?php echo ucfirst(array_key_first($licence)) ?>
</h4>
</div>
</a>
@@ -335,11 +349,11 @@ $pageNavbar->outPutNavbar();
<?php } ?>
<h1 class="pt-5"><?php echo __('all_technical_information') ?></h1>
<div class="col-md-6 col-lg-6">
<table>
<div class="col-md-12 col-lg-12">
<table class="table table-borderless table-sm table-responsive">
<tr>
<td>server_uuid:</td>
<td><?php echo $server_data['server_uuid'] ?></td>
<td class="w-100"><?php echo $server_data['server_uuid'] ?></td>
</tr>
<tr>
<td>company_uuid:</td>
@@ -353,10 +367,22 @@ $pageNavbar->outPutNavbar();
<td>server_vm_host_name:</td>
<td><?php echo $server_data['server_vm_host_name'] ?></td>
</tr>
<tr>
<td>server_vm_snapshot:</td>
<td><?php echo $server_data['server_vm_snapshot'] ?></td>
</tr>
<tr>
<td>server_vm_generation:</td>
<td><?php echo $server_data['server_vm_generation'] ?></td>
</tr>
<tr>
<td>server_power_state:</td>
<td><?php echo $server_data['server_power_state'] ?></td>
</tr>
<tr>
<td>server_state:</td>
<td><?php echo $server_data['server_state'] ?></td>
</tr>
<tr>
<td>server_hostname:</td>
<td><?php echo $server_data['server_hostname'] ?></td>
@@ -379,23 +405,33 @@ $pageNavbar->outPutNavbar();
</tr>
<tr>
<td>server_disks:</td>
<td><?php echo $server_data['server_disks'] ?></td>
<td>
<pre class="bg-dark border rounded"><code class="language-json"><?= htmlspecialchars(json_encode(json_decode($server_data['server_disks']), JSON_PRETTY_PRINT)) ?></code></pre>
</td>
</tr>
<tr>
<td>server_ipv4:</td>
<td><?php echo $server_data['server_ipv4'] ?></td>
<td>
<pre class="bg-dark border rounded w-100 overflow-auto mb-0"><code class="language-json"><?= htmlspecialchars(json_encode(json_decode($server_data['server_ipv4']), JSON_PRETTY_PRINT)) ?></code></pre>
</td>
</tr>
<tr>
<td>server_ipv6:</td>
<td><?php echo $server_data['server_ipv6'] ?></td>
<td>
<pre class="bg-dark border rounded"><code class="language-json"><?= htmlspecialchars(json_encode(json_decode($server_data['server_ipv6']), JSON_PRETTY_PRINT)) ?></code></pre>
</td>
</tr>
<tr>
<td>server_licenses:</td>
<td><?php echo $server_data['server_licenses'] ?></td>
<td>
<pre class="bg-dark border rounded"><code class="language-json"><?= htmlspecialchars(json_encode(json_decode($server_data['server_licenses']), JSON_PRETTY_PRINT)) ?></code></pre>
</td>
</tr>
<tr>
<td>server_backup:</td>
<td><?php echo $server_data['server_backup'] ?></td>
<td>
<pre class="bg-dark border rounded"><code class="language-json"><?= htmlspecialchars(json_encode(json_decode($server_data['server_backup']), JSON_PRETTY_PRINT)) ?></code></pre>
</td>
</tr>
<tr>
<td>server_description:</td>
@@ -403,11 +439,11 @@ $pageNavbar->outPutNavbar();
</tr>
<tr>
<td>server_create_timestamp:</td>
<td><?php echo $server_data['server_create_timestamp'] ?></td>
<td><?php echo $server_data['server_create_timestamp'] ?> (<?php echo date('Y-m-d H:i:s', $server_data['server_create_timestamp']) ?>)</td>
</tr>
<tr>
<td>server_modified_timestamp:</td>
<td><?php echo $server_data['server_modified_timestamp'] ?></td>
<td><?php echo $server_data['server_modified_timestamp'] ?> (<?php echo date('Y-m-d H:i:s', $server_data['server_modified_timestamp']) ?>)</td>
</tr>
</table>
</div>

View File

@@ -386,33 +386,13 @@ array_push($GLOBALS['breadCrumbArray'], array('display' => __('view'), 'href' =>
$company_name = $server['company_name'];
}
$server_state_color = 'secondary';
if (strlen($server['server_state']) > 0) {
$server_state = ucfirst($server['server_state']);
switch ($server_state) {
case 'New':
$server_state_color = 'secondary';
break;
case 'Deleted':
$server_state_color = 'danger';
break;
case 'Trial':
$server_state_color = 'primary';
break;
case 'Disabled':
$server_state_color = 'gray';
break;
case 'Active':
$server_state_color = 'success';
break;
}
}
$server_state_color = returnServerStateColor($server['server_state']);
?>
<tr data-item-id="<?php echo $server['server_uuid'] ?>">
<td data-column="server_state" class="text-nowrap" data-filter="<?php echo htmlspecialchars($server_state); ?>" data-sort="<?php echo htmlspecialchars($server_state); ?>">
<span class="badge rounded-pill bg-<?php echo $server_state_color ?>"><?php echo $server_state ?></span>
<td data-column="server_state" class="text-nowrap" data-filter="<?php echo htmlspecialchars($server['server_state']); ?>" data-sort="<?php echo htmlspecialchars($server['server_state']); ?>">
<span class="badge rounded-pill bg-<?php echo $server_state_color ?>"><?php echo $server['server_state'] ?></span>
</td>
<td data-column="server_hostname" class="text-nowrap" data-filter="<?php echo htmlspecialchars($hostname); ?>" data-sort="<?php echo htmlspecialchars($hostname); ?>">
<i class="fa-solid fa-server"></i> <?php echo $hostname ?>

View File

@@ -114,4 +114,30 @@ function getEnabledModules()
}
return $modules_enabled;
}
function returnServerStateColor($serverState)
{
$server_state_color = 'secondary';
if (strlen($serverState) > 0) {
$server_state = ucfirst($serverState);
switch ($server_state) {
case 'New':
$server_state_color = 'secondary';
break;
case 'Deleted':
$server_state_color = 'danger';
break;
case 'Trial':
$server_state_color = 'primary';
break;
case 'Disabled':
$server_state_color = 'gray';
break;
case 'Active':
$server_state_color = 'success';
break;
}
}
return $server_state_color;
}

View File

@@ -28,6 +28,17 @@ if (isset($this->jsScriptLoadData['datatables'])) { ?>
<script src="/src/js/plugin/datatables/datatables.min.js"></script>
<?php }
if (isset($this->jsScriptLoadData['codeblocks'])) { ?>
<link rel="stylesheet" href="/src/css/prism.css">
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-json.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/plugins/toolbar/prism-toolbar.css">
<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<?php } ?>
<?php
# Filter datatables
if (isset($this->jsScriptLoadData['multiFilterSelect'])) { ?>
<script>

View File

@@ -9048,7 +9048,7 @@ body[data-background-color="dark2"] .main-panel h5,
body[data-background-color="dark2"] .main-panel h6,
body[data-background-color="dark2"] .main-panel label,
body[data-background-color="dark2"] .main-panel .badge-count {
color: #ebdbb2 !important;
color: #ebdbb2;
}
body[data-background-color="dark"] .card:not(.card-primary,

View File

@@ -9048,7 +9048,7 @@ body[data-background-color="dark2"] .main-panel h5,
body[data-background-color="dark2"] .main-panel h6,
body[data-background-color="dark2"] .main-panel label,
body[data-background-color="dark2"] .main-panel .badge-count {
color: #ebdbb2 !important;
color: #ebdbb2;
}
body[data-background-color="dark"] .card:not(.card-primary,
@@ -9540,7 +9540,7 @@ body[data-background-color="dark"] .jvm-zoom-btn, body[data-background-color="da
}
.bg-primary2 {
background-color: #83a598 !important;
background-color: #076678 !important;
}
.bg-secondary {
@@ -9556,7 +9556,7 @@ body[data-background-color="dark"] .jvm-zoom-btn, body[data-background-color="da
}
.bg-info2 {
background-color: #3697E1 !important;
background-color: #83a598 !important;
}
.bg-success {

141
pub/src/css/prism.css Normal file
View File

@@ -0,0 +1,141 @@
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre-wrap;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #fbf1c7;
}
.token.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.constant,
.token.symbol,
.token.deleted {
color: #fe8019;
}
.token.number {
color: #fb4934;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #8ec07c;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #458588;
}
.token.function,
.token.class-name {
color: #d3869b;
}
.token.regex,
.token.important,
.token.variable {
color: #d79921;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}