mprovements into the server view

pub/bin/locales/en.php

@@ -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',

pub/bin/locales/nl.php

@@ -276,8 +276,10 @@ return [
     'server_vm_generation' => 'Gen',
     'server_licenses' => 'Licenties',
     'server_backup' => 'Backups',
-    'disk_space' => 'Schijf grote',
+    'disk_space' => 'Schijf grootte',
-    'disk_used' => 'Schijf gebruikt',
+    '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',

pub/bin/pages/servers/pageServerOverview_server_view.php

@@ -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
+                        <?php if ($API->checkPermissions('servers', 'RW', true)) { ?>
-                        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>
+            <h2 class="">
-                <i class="fa-solid fa-hard-drive"></i> <?php echo __('server_disks') ?>
+                <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">
+                                <h4 class="mb-0">
-                                    <i class="fa-solid fa-hard-drive"></i> <?php echo $disk['disk_name'] ?>
+                                    <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'] ?>
+                                <table class="table table-borderless table-sm">
-                                <br> <?php echo __('disk_used') ?>: <?php echo $disk['disk_used'] ?>
+                                    <tr>
-                                <br> <?php echo __('disk_location') ?>: <?php echo $disk['disk_location'] ?>
+                                        <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">
+                                <h4 class="mb-0">
-                                    <i class="fa-solid fa-file-invoice-dollar"></i> <?php echo array_key_first($licence) ?>
+                                    <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">
+        <div class="col-md-12 col-lg-12">
-            <table>
+            <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>

pub/bin/pages/servers/pageServerOverview_view.php

@@ -386,33 +386,13 @@ array_push($GLOBALS['breadCrumbArray'], array('display' => __('view'), 'href' =>
                         $company_name = $server['company_name'];
                     }
 
-                    $server_state_color = 'secondary';
+                    $server_state_color = returnServerStateColor($server['server_state']);
-                    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;
-                        }
-                    }
 
                     ?>
 
                     <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); ?>">
+                        <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_state ?></span>
+                            <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 ?>

pub/bin/php/Functions/globalFunctions.php

@@ -115,3 +115,29 @@ 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;
+}

pub/bin/php/jsScripts.php

@@ -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>

pub/src/css/kaiadmin.gruvbox.dark.css

@@ -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,

pub/src/css/kaiadmin.gruvbox.dark.min.css

@@ -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 {

pub/src/css/prism.css

@@ -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;
+}