UI updates

RobiNN1 · Jul 14, 2024 · 0833897 · 0833897
1 parent 00b168a
commit 0833897
Show file tree

Hide file tree

Showing 17 changed files with 170 additions and 179 deletions.
diff --git 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
@@ -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
@@ -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
@@ -27,6 +27,11 @@ class MemcachedDashboard implements DashboardInterface {
 
     public Compatibility\Memcached|Compatibility\Memcache|Compatibility\PHPMem $memcached;
 
+    /**
+     * @var array<int, mixed>
+     */
+    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
@@ -16,10 +16,7 @@
 use RobiNN\Pca\Value;
 
 trait MemcachedTrait {
-    /**
-     * @param array<int, mixed> $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<int, mixed> $all_keys
-     *
      * @return array<int, array<string, string|int>>
      */
-    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
@@ -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
@@ -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
@@ -16,6 +16,12 @@
 class RealpathDashboard implements DashboardInterface {
     use RealpathTrait;
 
+    /**
+     * @var array<string, mixed>
+     * @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
@@ -12,10 +12,7 @@
 use RobiNN\Pca\Http;
 
 trait RealpathTrait {
-    /**
-     * @param array<string, mixed> $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<string, mixed> $all_keys
-     *
      * @return array<int, array<string, string|int>>
      */
-    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
@@ -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
@@ -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
@@ -1,41 +1,33 @@
-<div class="md:grid md:grid-cols-10 gap-4">
-    <div class="col-span-2">
-        {{ panels|raw }}
+<div class="mb-4 lg:grid lg:grid-cols-2 lg:gap-4">
+    <div class="mb-4 md:grid md:grid-cols-2 md:gap-2 lg:mb-0">
+        {% if all_keys != 0 %}
+            <div>{{ include('components/search_input.twig') }}</div>
+        {% endif %}
     </div>
 
-    <div class="col-span-8">
-        <div class="mb-4 lg:grid lg:grid-cols-2 lg:gap-4">
-            <div class="mb-4 md:grid md:grid-cols-2 md:gap-2 lg:mb-0">
-                {% if all_keys != 0 %}
-                    <div>{{ include('components/search_input.twig') }}</div>
-                {% endif %}
-            </div>
-
-            <div class="lg:flex lg:justify-end">
-                {{ include('partials/keys_buttons.twig', {
-                    import_btn: true,
-                    add_new_btn: true,
-                }) }}
-            </div>
-        </div>
-
-        {{ 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',
-            },
+    <div class="lg:flex lg:justify-end">
+        {{ include('partials/keys_buttons.twig', {
+            import_btn: true,
+            add_new_btn: true,
         }) }}
     </div>
 </div>
+
+{{ 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
@@ -1,37 +1,28 @@
-<div class="md:grid md:grid-cols-10 gap-4">
-    <div class="col-span-2">
-        {{ select|raw }}
-        {{ panels|raw }}
+<div class="mb-4 lg:grid lg:grid-cols-2 lg:gap-4">
+    <div class="mb-4 md:grid md:grid-cols-2 md:gap-2 lg:mb-0">
+        {% if all_keys != 0 %}
+            <div>{{ include('components/search_input.twig') }}</div>
+        {% endif %}
     </div>
 
-    <div class="col-span-8">
-        <div class="mb-4 lg:grid lg:grid-cols-2 lg:gap-4">
-            <div class="mb-4 md:grid md:grid-cols-2 md:gap-2 lg:mb-0">
-                {% if all_keys != 0 %}
-                    <div>{{ include('components/search_input.twig') }}</div>
-                {% endif %}
-            </div>
-
-            <div class="lg:flex lg:justify-end">
-                {{ include('partials/keys_buttons.twig', {
-                    import_btn: true,
-                    add_new_btn: true,
-                }) }}
-            </div>
-        </div>
-
-        {{ 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'},
-            ],
+    <div class="lg:flex lg:justify-end">
+        {{ include('partials/keys_buttons.twig', {
+            import_btn: true,
+            add_new_btn: true,
         }) }}
     </div>
 </div>
+
+{{ 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'},
+    ],
+}) }}