Progress bar Twig helper

Author: cedric-anne

src/Glpi/Application/View/Extension/DataHelpersExtension.php

@@ -41,6 +41,7 @@
 use Toolbox;
 use Twig\Extension\AbstractExtension;
 use Twig\TwigFilter;
+use Twig\TwigFunction;
 use Twig\TwigTest;
 
 /**
@@ -69,6 +70,13 @@ public function getFilters(): array
         ];
     }
 
+    public function getFunctions(): array
+    {
+        return [
+            new TwigFunction('progress_bar', [$this, 'getProgressBar'], ['is_safe' => ['html']]),
+        ];
+    }
+
     public function getTests(): array
     {
         return [
@@ -307,4 +315,17 @@ public function truncateLeft(string $string = "", int $length = 30, string $sepa
 
         return $separator . mb_substr($string, -$length);
     }
+
+    /**
+     * Returns a static progress bar HTML snippet.
+     *
+     * @param float $percentage
+     * @param string $label
+     *
+     * @return string
+     */
+    public function getProgressBar(float $percentage, ?string $label = null): string
+    {
+        return Html::getProgressBar($percentage, $label);
+    }
 }

src/Html.php

@@ -980,6 +980,33 @@ public static function displayProgressBar($width, $percent, $options = [])
         }
     }
 
+    /**
+     * Returns a static progress bar HTML snippet.
+     *
+     * @param float $percentage
+     * @param string $label
+     *
+     * @return string
+     */
+    public static function getProgressBar(float $percentage, ?string $label = null): string
+    {
+        if ($label === null) {
+            $label = floor($percentage) . ' %';
+        }
+
+        return TemplateRenderer::getInstance()->renderFromStringTemplate(
+            <<<TWIG
+              <div class="progress" style="height: 15px; min-width: 50px;">
+                 <div class="progress-bar bg-info" role="progressbar" style="width: {{ percentage }}%;"
+                    aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100">{{ label }}</div>
+              </div>
+TWIG,
+            [
+                'percentage' => $percentage,
+                'label'      => $label,
+            ]
+        );
+    }
 
     /**
      * Include common HTML headers

templates/pages/setup/general/performance.html.twig

@@ -75,10 +75,7 @@
             <th class="fw-normal">{{ _n('Memory', 'Memories', 1) }}</th>
             <td>{{ __('%1$s / %2$s')|format(used|formatted_size, max|formatted_size) }}</td>
             <td>
-               {{ call('Html::displayProgressBar', [100, rate, {
-                  simple: true,
-                  forcepadding: false
-               }]) }}
+               {{ progress_bar(rate) }}
             </td>
             {% if rate > 5 and rate < 75 %}
                {{ _self.success_icon_msg(__('%1$s memory usage is correct')|format(opcache_ext)) }}
@@ -94,10 +91,7 @@
             <th class="fw-normal">{{ __('Hits rate') }}</th>
             <td>{{ __('%1$s / %2$s')|format(hits, num_requests) }}</td>
             <td>
-               {{ call('Html::displayProgressBar', [100, hit_rate, {
-                  simple: true,
-                  forcepadding: false
-               }]) }}
+               {{ progress_bar(hit_rate) }}
             </td>
             {% if hit_rate > 90 %}
                {{ _self.success_icon_msg(__('%1$s hits rate is correct')|format(opcache_ext)) }}