From 0833897d59887787c2e1fea85a0384ba47cfdfcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=B3bert=20Kel=C4=8D=C3=A1k?= Date: Sun, 14 Jul 2024 18:09:06 +0200 Subject: [PATCH] UI updates --- assets/css/styles.css | 12 ++++ src/Dashboards/APCu/APCuDashboard.php | 2 + src/Dashboards/APCu/APCuTrait.php | 1 - .../Memcached/MemcachedDashboard.php | 9 +++ src/Dashboards/Memcached/MemcachedTrait.php | 20 ++---- src/Dashboards/OPCache/OPCacheDashboard.php | 2 + src/Dashboards/OPCache/OPCacheTrait.php | 1 - src/Dashboards/Realpath/RealpathDashboard.php | 15 +++-- src/Dashboards/Realpath/RealpathTrait.php | 15 ++--- src/Dashboards/Redis/RedisDashboard.php | 2 + src/Dashboards/Redis/RedisTrait.php | 2 - templates/dashboards/apcu.twig | 64 ++++++++----------- templates/dashboards/memcached.twig | 55 +++++++--------- templates/dashboards/opcache.twig | 62 ++++++++---------- templates/dashboards/redis/redis.twig | 61 ++++++++---------- templates/layout.twig | 24 ++++--- tests/FormatTest.php | 2 +- 17 files changed, 170 insertions(+), 179 deletions(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 774af57..3a9dda1 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -677,6 +677,10 @@ video { margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse))); } +.self-center { + align-self: center; +} + .overflow-hidden { overflow: hidden; } @@ -1202,6 +1206,14 @@ video { margin-bottom: 0px; } + .md\:me-4 { + margin-inline-end: 1rem; + } + + .md\:inline-flex { + display: inline-flex; + } + .md\:table-cell { display: table-cell; } diff --git a/src/Dashboards/APCu/APCuDashboard.php b/src/Dashboards/APCu/APCuDashboard.php index f997fc4..08ca0dc 100644 --- a/src/Dashboards/APCu/APCuDashboard.php +++ b/src/Dashboards/APCu/APCuDashboard.php @@ -58,6 +58,8 @@ public function ajax(): string { } public function dashboard(): string { + $this->template->addGlobal('side', $this->panels()); + if (isset($_GET['moreinfo'])) { return $this->moreInfo(); } diff --git a/src/Dashboards/APCu/APCuTrait.php b/src/Dashboards/APCu/APCuTrait.php index 26def35..f58d5a8 100644 --- a/src/Dashboards/APCu/APCuTrait.php +++ b/src/Dashboards/APCu/APCuTrait.php @@ -207,7 +207,6 @@ private function mainDashboard(): string { $info = apcu_cache_info(true); return $this->template->render('dashboards/apcu', [ - 'panels' => $this->panels(), 'keys' => $paginator->getPaginated(), 'all_keys' => (int) $info['num_entries'], 'new_key_url' => Http::queryString([], ['form' => 'new']), diff --git a/src/Dashboards/Memcached/MemcachedDashboard.php b/src/Dashboards/Memcached/MemcachedDashboard.php index ffd5e7e..d975bd6 100644 --- a/src/Dashboards/Memcached/MemcachedDashboard.php +++ b/src/Dashboards/Memcached/MemcachedDashboard.php @@ -27,6 +27,11 @@ class MemcachedDashboard implements DashboardInterface { public Compatibility\Memcached|Compatibility\Memcache|Compatibility\PHPMem $memcached; + /** + * @var array + */ + private array $all_keys = []; + public function __construct(private readonly Template $template) { $this->servers = Config::get('memcached', []); @@ -116,6 +121,10 @@ public function dashboard(): string { try { $this->memcached = $this->connect($this->servers[$this->current_server]); + $this->all_keys = $this->memcached->getKeys(); + $select = Helpers::serverSelector($this->template, $this->servers, $this->current_server); + + $this->template->addGlobal('side', $select.$this->panels()); if (isset($_GET['moreinfo'])) { return $this->moreInfo(); diff --git a/src/Dashboards/Memcached/MemcachedTrait.php b/src/Dashboards/Memcached/MemcachedTrait.php index f282761..fdb3e27 100644 --- a/src/Dashboards/Memcached/MemcachedTrait.php +++ b/src/Dashboards/Memcached/MemcachedTrait.php @@ -16,10 +16,7 @@ use RobiNN\Pca\Value; trait MemcachedTrait { - /** - * @param array $all_keys - */ - private function panels(array $all_keys): string { + private function panels(): string { if (extension_loaded('memcached') || extension_loaded('memcache')) { $memcached = extension_loaded('memcached') ? 'd' : ''; $title = 'PHP Memcache'.$memcached.' extension v'.phpversion('memcache'.$memcached); @@ -46,7 +43,7 @@ private function panels(array $all_keys): string { 'data' => [ 'Cache limit' => Format::bytes((int) $server_info['limit_maxbytes'], 0), 'Used' => Format::bytes((int) $server_info['bytes']), - 'Keys' => Format::number(count($all_keys)), // Keys are loaded via sockets and not extension itself + 'Keys' => Format::number(count($this->all_keys)), // Keys are loaded via sockets and not extension itself ], ], ]; @@ -177,17 +174,15 @@ private function form(): string { } /** - * @param array $all_keys - * * @return array> */ - private function getAllKeys(array $all_keys): array { + private function getAllKeys(): array { static $keys = []; $search = Http::get('s', ''); $this->template->addGlobal('search_value', $search); - foreach ($all_keys as $key_data) { + foreach ($this->all_keys as $key_data) { $key = $key_data['key'] ?? $key_data; if (stripos($key, $search) !== false) { @@ -212,8 +207,7 @@ private function getAllKeys(array $all_keys): array { * @throws MemcachedException */ private function mainDashboard(): string { - $all_keys = $this->memcached->getKeys(); - $keys = $this->getAllKeys($all_keys); + $keys = $this->getAllKeys(); if (isset($_POST['submit_import_key'])) { Helpers::import( @@ -225,10 +219,8 @@ private function mainDashboard(): string { $paginator = new Paginator($this->template, $keys); return $this->template->render('dashboards/memcached', [ - 'select' => Helpers::serverSelector($this->template, $this->servers, $this->current_server), - 'panels' => $this->panels($all_keys), 'keys' => $paginator->getPaginated(), - 'all_keys' => count($all_keys), + 'all_keys' => count($this->all_keys), 'new_key_url' => Http::queryString([], ['form' => 'new']), 'paginator' => $paginator->render(), 'view_key' => Http::queryString([], ['view' => 'key', 'ttl' => '__ttl__', 'key' => '__key__']), diff --git a/src/Dashboards/OPCache/OPCacheDashboard.php b/src/Dashboards/OPCache/OPCacheDashboard.php index 4a57e4d..5f699ec 100644 --- a/src/Dashboards/OPCache/OPCacheDashboard.php +++ b/src/Dashboards/OPCache/OPCacheDashboard.php @@ -58,6 +58,8 @@ public function ajax(): string { } public function dashboard(): string { + $this->template->addGlobal('side', $this->panels()); + if (isset($_GET['moreinfo'])) { return $this->moreInfo(); } diff --git a/src/Dashboards/OPCache/OPCacheTrait.php b/src/Dashboards/OPCache/OPCacheTrait.php index 2997b0d..7fcc999 100644 --- a/src/Dashboards/OPCache/OPCacheTrait.php +++ b/src/Dashboards/OPCache/OPCacheTrait.php @@ -157,7 +157,6 @@ private function mainDashboard(): string { $status = opcache_get_status(false); return $this->template->render('dashboards/opcache', [ - 'panels' => $this->panels(), 'cached_scripts' => $paginator->getPaginated(), 'all_files' => $status['opcache_statistics']['num_cached_scripts'], 'paginator' => $paginator->render(), diff --git a/src/Dashboards/Realpath/RealpathDashboard.php b/src/Dashboards/Realpath/RealpathDashboard.php index d342ed1..fcb66da 100644 --- a/src/Dashboards/Realpath/RealpathDashboard.php +++ b/src/Dashboards/Realpath/RealpathDashboard.php @@ -16,6 +16,12 @@ class RealpathDashboard implements DashboardInterface { use RealpathTrait; + /** + * @var array + * @noinspection PhpPrivateFieldCanBeLocalVariableInspection + */ + private array $all_keys = []; + public function __construct(private readonly Template $template) { } @@ -57,15 +63,16 @@ public function ajax(): string { } public function dashboard(): string { - $all_keys = realpath_cache_get(); - $keys = $this->getAllKeys($all_keys); + $this->all_keys = realpath_cache_get(); + + $this->template->addGlobal('side', $this->panels()); + $keys = $this->getAllKeys(); $paginator = new Paginator($this->template, $keys); return $this->template->render('dashboards/realpath', [ - 'panels' => $this->panels($all_keys), 'keys' => $paginator->getPaginated(), - 'all_keys' => count($all_keys), + 'all_keys' => count($this->all_keys), 'paginator' => $paginator->render(), ]); } diff --git a/src/Dashboards/Realpath/RealpathTrait.php b/src/Dashboards/Realpath/RealpathTrait.php index 47ddb2d..d4cd626 100644 --- a/src/Dashboards/Realpath/RealpathTrait.php +++ b/src/Dashboards/Realpath/RealpathTrait.php @@ -12,10 +12,7 @@ use RobiNN\Pca\Http; trait RealpathTrait { - /** - * @param array $all_keys - */ - private function panels(array $all_keys): string { + private function panels(): string { $total_memory = Format::iniSizeToBytes(ini_get('realpath_cache_size')); $memory_used = realpath_cache_size(); $memory_usage_percentage = round(($memory_used / $total_memory) * 100, 2); @@ -32,26 +29,24 @@ private function panels(array $all_keys): string { 'title' => 'Keys', 'data' => [ 'TTL' => ini_get('realpath_cache_ttl'), - 'Cached' => Format::number(count($all_keys)), + 'Cached' => Format::number(count($this->all_keys)), ], ], ]; - return $this->template->render('partials/info', ['panels' => $panels]); + return $this->template->render('partials/info', ['panels' => $panels, 'left' => true]); } /** - * @param array $all_keys - * * @return array> */ - private function getAllKeys(array $all_keys): array { + private function getAllKeys(): array { static $keys = []; $search = Http::get('s', ''); $this->template->addGlobal('search_value', $search); - foreach ($all_keys as $key_name => $key_data) { + foreach ($this->all_keys as $key_name => $key_data) { if ($search === '' || stripos($key_name, $search) !== false) { $keys[] = [ 'key' => $key_name, diff --git a/src/Dashboards/Redis/RedisDashboard.php b/src/Dashboards/Redis/RedisDashboard.php index d8c1f56..6b220ca 100644 --- a/src/Dashboards/Redis/RedisDashboard.php +++ b/src/Dashboards/Redis/RedisDashboard.php @@ -120,6 +120,8 @@ public function dashboard(): string { try { $this->redis = $this->connect($this->servers[$this->current_server]); + $this->template->addGlobal('side', $this->select().$this->panels()); + if (isset($_GET['moreinfo'])) { return $this->moreInfo(); } diff --git a/src/Dashboards/Redis/RedisTrait.php b/src/Dashboards/Redis/RedisTrait.php index 2ddc2d5..d4bfcc6 100644 --- a/src/Dashboards/Redis/RedisTrait.php +++ b/src/Dashboards/Redis/RedisTrait.php @@ -406,8 +406,6 @@ function (string $key): bool { $paginator = new Paginator($this->template, $keys, [['db', 's', 'pp'], ['p' => '']]); return $this->template->render('dashboards/redis/redis', [ - 'select' => $this->select(), - 'panels' => $this->panels(), 'keys' => $paginator->getPaginated(), 'all_keys' => $this->redis->dbSize(), 'new_key_url' => Http::queryString(['db'], ['form' => 'new']), diff --git a/templates/dashboards/apcu.twig b/templates/dashboards/apcu.twig index 4990e78..1366257 100644 --- a/templates/dashboards/apcu.twig +++ b/templates/dashboards/apcu.twig @@ -1,41 +1,33 @@ -
-
- {{ panels|raw }} +
+
+ {% if all_keys != 0 %} +
{{ include('components/search_input.twig') }}
+ {% endif %}
-
-
-
- {% if all_keys != 0 %} -
{{ include('components/search_input.twig') }}
- {% endif %} -
- -
- {{ include('partials/keys_buttons.twig', { - import_btn: true, - add_new_btn: true, - }) }} -
-
- - {{ include('partials/import_form.twig', { - expire_default: '0', - expire_max: 2592000, - key_desc: 'The text value in the .txt file.', - }) }} - - {{ include('partials/keys_table.twig', { - head_items: [ - {'title': 'Key'}, - {'title': 'Hits', 'class': 'w-16'}, - {'title': 'Last used', 'class': 'w-32'}, - {'title': 'Created', 'class': 'w-40 hidden md:table-cell'}, - {'title': 'TTL', 'class': 'w-32'}, - ], - classes: { - 4: 'hidden md:table-cell', - }, +
+ {{ include('partials/keys_buttons.twig', { + import_btn: true, + add_new_btn: true, }) }}
+ +{{ include('partials/import_form.twig', { + expire_default: '0', + expire_max: 2592000, + key_desc: 'The text value in the .txt file.', +}) }} + +{{ include('partials/keys_table.twig', { + head_items: [ + {'title': 'Key'}, + {'title': 'Hits', 'class': 'w-16'}, + {'title': 'Last used', 'class': 'w-32'}, + {'title': 'Created', 'class': 'w-40 hidden md:table-cell'}, + {'title': 'TTL', 'class': 'w-32'}, + ], + classes: { + 4: 'hidden md:table-cell', + }, +}) }} diff --git a/templates/dashboards/memcached.twig b/templates/dashboards/memcached.twig index 077befe..10e2068 100644 --- a/templates/dashboards/memcached.twig +++ b/templates/dashboards/memcached.twig @@ -1,37 +1,28 @@ -
-
- {{ select|raw }} - {{ panels|raw }} +
+
+ {% if all_keys != 0 %} +
{{ include('components/search_input.twig') }}
+ {% endif %}
-
-
-
- {% if all_keys != 0 %} -
{{ include('components/search_input.twig') }}
- {% endif %} -
- -
- {{ include('partials/keys_buttons.twig', { - import_btn: true, - add_new_btn: true, - }) }} -
-
- - {{ include('partials/import_form.twig', { - expire_default: '0', - expire_max: 2592000, - key_desc: 'The text value in the .txt file.', - }) }} - - {{ include('partials/keys_table.twig', { - head_items: [ - {'title': 'Key'}, - {'title': 'Last used', 'class': 'w-32'}, - {'title': 'TTL', 'class': 'w-32'}, - ], +
+ {{ include('partials/keys_buttons.twig', { + import_btn: true, + add_new_btn: true, }) }}
+ +{{ include('partials/import_form.twig', { + expire_default: '0', + expire_max: 2592000, + key_desc: 'The text value in the .txt file.', +}) }} + +{{ include('partials/keys_table.twig', { + head_items: [ + {'title': 'Key'}, + {'title': 'Last used', 'class': 'w-32'}, + {'title': 'TTL', 'class': 'w-32'}, + ], +}) }} diff --git a/templates/dashboards/opcache.twig b/templates/dashboards/opcache.twig index ade05f8..ba7ac5c 100644 --- a/templates/dashboards/opcache.twig +++ b/templates/dashboards/opcache.twig @@ -1,40 +1,32 @@ -
-
- {{ panels|raw }} +
+
+ {% if all_files != 0 %} +
{{ include('components/search_input.twig') }}
+ {% endif %}
-
-
-
- {% if all_files != 0 %} -
{{ include('components/search_input.twig') }}
- {% endif %} -
- -
-
- {{ include('components/button.twig', { - text: (is_ignored ? 'Show' : 'Ignore') ~ ' scripts from this tool', - link: ignore_url, - class: 'mr-1', - }) }} -
- {{ include('partials/keys_buttons.twig', {all_keys: all_files}) }} -
+
+
+ {{ include('components/button.twig', { + text: (is_ignored ? 'Show' : 'Ignore') ~ ' scripts from this tool', + link: ignore_url, + class: 'mr-1', + }) }}
- - {{ include('partials/keys_table.twig', { - head_items: [ - {'title': 'Filename'}, - {'title': 'Hits', 'class': 'w-16'}, - {'title': 'Memory', 'class': 'w-24'}, - {'title': 'Last used', 'class': 'w-32'}, - {'title': 'Created', 'class': 'w-40 hidden md:table-cell'}, - ], - classes: { - 5: 'hidden md:table-cell', - }, - keys: cached_scripts, - }) }} + {{ include('partials/keys_buttons.twig', {all_keys: all_files}) }}
+ +{{ include('partials/keys_table.twig', { + head_items: [ + {'title': 'Filename'}, + {'title': 'Hits', 'class': 'w-16'}, + {'title': 'Memory', 'class': 'w-24'}, + {'title': 'Last used', 'class': 'w-32'}, + {'title': 'Created', 'class': 'w-40 hidden md:table-cell'}, + ], + classes: { + 5: 'hidden md:table-cell', + }, + keys: cached_scripts, +}) }} diff --git a/templates/dashboards/redis/redis.twig b/templates/dashboards/redis/redis.twig index 4fe81c5..6c7812b 100644 --- a/templates/dashboards/redis/redis.twig +++ b/templates/dashboards/redis/redis.twig @@ -1,40 +1,31 @@ -
-
- {{ select|raw }} - {{ panels|raw }} +
+
+ {% if all_keys != 0 %} +
{{ include('components/search_input.twig') }}
+ {% endif %}
-
-
-
- {% if all_keys != 0 %} -
{{ include('components/search_input.twig') }}
- {% endif %} -
- -
- {{ include('partials/keys_buttons.twig', { - import_btn: true, - add_new_btn: true, - }) }} -
-
- - {{ include('partials/import_form.twig', { - expire_default: '-1', - expire_max: 2147483647, - key_desc: 'A binary value in a .bin file.', - }) }} - - {{ include('partials/keys_table.twig', { - head_items: [ - {'title': 'Key'}, - {'title': 'Type', 'class': 'w-24 hidden md:table-cell'}, - {'title': 'TTL', 'class': 'w-32'}, - ], - classes: { - 2: 'hidden md:table-cell', - }, +
+ {{ include('partials/keys_buttons.twig', { + import_btn: true, + add_new_btn: true, }) }}
+ +{{ include('partials/import_form.twig', { + expire_default: '-1', + expire_max: 2147483647, + key_desc: 'A binary value in a .bin file.', +}) }} + +{{ include('partials/keys_table.twig', { + head_items: [ + {'title': 'Key'}, + {'title': 'Type', 'class': 'w-24 hidden md:table-cell'}, + {'title': 'TTL', 'class': 'w-32'}, + ], + classes: { + 2: 'hidden md:table-cell', + }, +}) }} diff --git a/templates/layout.twig b/templates/layout.twig index 8d3dcbb..3c6a73a 100644 --- a/templates/layout.twig +++ b/templates/layout.twig @@ -18,7 +18,15 @@
- {{ svg('logo', null) }} +
+ {{ svg('logo', null) }} + + {% if back_url %} + + {% endif %} +
{% for link, item in nav %} @@ -40,15 +48,15 @@
{{ alerts|raw }}
- {% if back_url %} -
- - {{ svg('back', 16, 'mr-1') }} Back - + {% if side %} +
+
{{ side|raw }}
+ +
{{ dashboard|raw }}
+ {% else %} + {{ dashboard|raw }} {% endif %} - - {{ dashboard|raw }}