From 1b0c6d3e09b0f6316431ad09bec1944d65b36cb9 Mon Sep 17 00:00:00 2001 From: Austin Best Date: Tue, 10 Dec 2024 21:38:45 -0500 Subject: [PATCH] WIP - Add a detailed view for the overview (#49) Add some on clicks to the overview page (#49) Add a setting to pick which page loads by default --- root/app/www/public/ajax/overview.php | 231 +++++++++++++++++- root/app/www/public/ajax/settings.php | 49 +++- root/app/www/public/classes/interfaces/UI.php | 14 ++ root/app/www/public/includes/footer.php | 2 + root/app/www/public/includes/header.php | 1 + root/app/www/public/js/common.js | 22 +- root/app/www/public/js/overview.js | 140 +++++++++++ .../public/libraries/chart/chart.umd.min.js | 1 + .../chart/chartjs.plugin.datalabels.min.js | 7 + root/app/www/public/loader.php | 11 +- .../www/public/migrations/008_ui_settings.php | 38 +++ 11 files changed, 494 insertions(+), 22 deletions(-) create mode 100644 root/app/www/public/classes/interfaces/UI.php create mode 100644 root/app/www/public/js/overview.js create mode 100644 root/app/www/public/libraries/chart/chart.umd.min.js create mode 100644 root/app/www/public/libraries/chart/chartjs.plugin.datalabels.min.js create mode 100644 root/app/www/public/migrations/008_ui_settings.php diff --git a/root/app/www/public/ajax/overview.php b/root/app/www/public/ajax/overview.php index 23e910f..a115506 100644 --- a/root/app/www/public/ajax/overview.php +++ b/root/app/www/public/ajax/overview.php @@ -11,7 +11,7 @@ if ($_POST['m'] == 'init') { $dependencyFile = $docker->setContainerDependencies($processList); - $ports = $networks = []; + $ports = $networks = $graphs = []; $running = $stopped = $memory = $cpu = $network = $size = $updated = $outdated = $healthy = $unhealthy = $unknownhealth = 0; foreach ($processList as $process) { @@ -81,16 +81,37 @@ //-- GET NETWORK USAGE list($netUsed, $netAllowed) = explode(' / ', $process['stats']['NetIO']); $network += bytesFromString($netUsed); + + $graphs['utilization']['cpu']['total']['percent'] = 100; + $graphs['utilization']['cpu']['containers'][$process['Names']] = str_replace('%', '', $process['stats']['CPUPerc']); + + list($memUsed, $memTotal) = explode('/', $process['stats']['MemUsage']); + $graphs['utilization']['memory']['total']['size'] = trim($memTotal); + $graphs['utilization']['memory']['total']['percent'] = 100; + $graphs['utilization']['memory']['containers'][$process['Names']]['percent'] = str_replace('%', '', $process['stats']['MemPerc']); + $graphs['utilization']['memory']['containers'][$process['Names']]['size'] = trim($memUsed); } if (intval($settingsTable['cpuAmount']) > 0) { $cpuActual = number_format(($cpu / intval($settingsTable['cpuAmount'])), 2); } + ?> +
+
at a glance
+
+
+ + > +
+
+
+
-
+

Status

@@ -102,7 +123,7 @@
-
+

Health

@@ -114,7 +135,7 @@
-
+

Updates

@@ -135,13 +156,13 @@
Disk:
- CPU: %(' . $cpuActual . '%)' : '') ?>
+ CPU: %(' . $cpuActual . '%)' : '' ?>
Memory: %
Network I/O:
-
+

Network

@@ -195,6 +216,204 @@
+ +
+
+
+
+
+
+ Status +
+
+ Running: +
+
+ Stopped: +
+
+ Total: +
+
+
+
+
+
+ Health +
+
+ Healthy: +
+
+ Unhealthy: +
+
+ Unknown: +
+
+
+
+
+
+ Updates +
+
+ Updated: +
+
+ Outdated: +
+
+ Unchecked: +
+
+
+
+
+
+
+
+
+
+
+
+
Disk usage
+
+
+
+
+
+
+
+
Network I/O
+
+
+
+
+
+
+
+
CPU
+
%(' . $cpuActual . '%)' : '' ?>
+
Memory
+
%
+
+
+
+
+
+
+ + + + + + + + + $networkCount) { ?> + + + + + + +
NetworkContainers
+
+
+
+
+
+
+ + + + + + + + + $containerPorts) { + foreach ($containerPorts as $containerPort) { + $portArray[$containerPort] = $container; + } + } + ksort($portArray); + $portArray = formatPortRanges($portArray); + + if ($portArray) { + foreach ($portArray as $port => $container) { + ?> + + + + + + +
ContainerPort
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
$containerPercent) { + $utilizationCPULabels[] = $containerName; + $utilizationCPUData[] = $containerPercent; + } + + //-- MEMORY PERCENT + $utilizationMemoryPercentLabels = $utilizationMemoryPercentData = []; + foreach ($graphs['utilization']['memory']['containers'] as $containerName => $graphDetails) { + $utilizationMemoryPercentLabels[] = $containerName; + $utilizationMemoryPercentData[] = $graphDetails['percent']; + } + + //-- MEMORY SIZE + $utilizationMemorySizeLabels = $utilizationMemorySizeData = $utilizationmemorySizeColors = []; + foreach ($graphs['utilization']['memory']['containers'] as $containerName => $graphDetails) { + $g = str_contains($graphDetails['size'], 'GiB') ? true : false; + $utilizationMemorySizeLabels[] = $containerName; + $utilizationMemorySizeData[] = preg_replace('/[^0-9.]/', '', $graphDetails['size']) * ($g ? 1024 : 1); + $utilizationmemorySizeColors[] = '#' . str_pad(dechex(mt_rand(0, 0xFFFFFF)), 6, '0', STR_PAD_LEFT); + } + + ?> + + setSetting('overviewLayout', $layout); } diff --git a/root/app/www/public/ajax/settings.php b/root/app/www/public/ajax/settings.php index 758d6d1..bd1eea0 100644 --- a/root/app/www/public/ajax/settings.php +++ b/root/app/www/public/ajax/settings.php @@ -26,7 +26,7 @@ ?>
-

General

+

Instance

@@ -61,7 +61,36 @@
-

Login failures

+

UI

+
+ + + + + + + + + + + + + + + +
NameSettingDescription
Default page + + Which page should be loaded when first opens
+
+

Login failures

@@ -89,7 +118,7 @@
-

servers

+

servers

@@ -123,7 +152,7 @@ ?> @@ -151,7 +180,7 @@
- +
-

New containers

+

New containers

@@ -177,7 +206,7 @@
-

Auto prune

+

Auto prune

@@ -227,7 +256,7 @@
-

Thresholds

+

Thresholds

@@ -262,7 +291,7 @@
-

SSE

+

SSE

@@ -283,7 +312,7 @@
-

Logging

+

Logging

@@ -325,7 +354,7 @@
-

Development

+

Development