Implemented memory graph

k9krew · Jun 23, 2013 · 31fc979 · 31fc979
1 parent e76b42b
commit 31fc979
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 2 deletions.
diff --git a/bootstrap.php b/bootstrap.php
@@ -59,6 +59,14 @@
         ob_end_clean();
         break;
 
+    case 'graphs':
+        ob_start();
+        require __DIR__ . '/template/graphs.phtml';
+        $content = ob_get_contents();
+        $active = 'graphs';
+        ob_end_clean();
+        break;
+
     default:
         ob_start();
         require __DIR__ . '/template/status.phtml';

diff --git a/public/js/main.js b/public/js/main.js
@@ -0,0 +1,7 @@
+(function() {
+    var graphs = document.querySelectorAll('canvas.graph');
+    for (var i = 0, l = graphs.length; i < l; i++) {
+        var ctx = graphs[i].getContext('2d');
+        new Chart(ctx).Pie(JSON.parse(graphs[i].getAttribute('data-data')), {segmentShowStroke: false});
+    }
+}());
diff --git a/public/style/style.css b/public/style/style.css
@@ -126,6 +126,10 @@ footer ul li a:hover {
     padding-top: 10px;
 }
 
+article {
+    xposition: relative;
+}
+
 article.cols-3.first {
     margin-left: 0;
 }
@@ -157,7 +161,7 @@ article h2 {
     border-radius: 4px 4px 0 0;
 }
 
-article table {
+article table, article canvas {
     padding: 20px;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
@@ -191,3 +195,33 @@ article td.empty {
 article .odd {
     background: #eeeeee;
 }
+
+article ul {
+    border-right: 1px solid #d8dee2;
+    border-bottom: 1px solid #d8dee2;
+    display: inline;
+    position: absolute;
+    border-bottom-right-radius: 5px;
+    padding: 5px 5px 5px 20px;
+    background: white;
+}
+
+article .graph-legend {
+    width: 10px;
+    height: 10px;
+    border: 1px solid #d8dee2;
+    border-radius: 3px;
+    display: inline-block;
+}
+
+article .graph-legend.red {
+    background: #ff0000;
+}
+
+article .graph-legend.green {
+    background: #00ff00;
+}
+
+article .graph-legend.blue {
+    background: #0000ff;
+}
diff --git a/src/OpCacheGUI/OpCache/Status.php b/src/OpCacheGUI/OpCache/Status.php
@@ -77,6 +77,31 @@ public function getMemoryInfo()
         ];
     }
 
+    /**
+     * Gets the memory info formatted to build a graph
+     *
+     * @return string JSON encoded memory info
+     */
+    public function getGraphMemoryInfo()
+    {
+        $memory = $this->statusData['memory_usage'];
+
+        return json_encode([
+            [
+                'value' => $memory['wasted_memory'],
+                'color' => '#ff0000',
+            ],
+            [
+                'value' => $memory['used_memory'],
+                'color' => '#0000ff',
+            ],
+            [
+                'value' => $memory['free_memory'],
+                'color' => '#00ff00',
+            ],
+        ]);
+    }
+
     /**
      * Gets the statistics info
      *

diff --git a/template/graphs.phtml b/template/graphs.phtml
@@ -0,0 +1,25 @@
+<?php
+$status = new OpCacheGUI\OpCache\Status($byteFormatter);
+$classCycler = new OpCacheGUI\Presentation\ClassCycler(['odd', 'even']);
+
+$memoryInfo = $status->getMemoryInfo();
+?>
+
+<article class="cols-3">
+    <h2><?= $translator->translate('graph.memory.title'); ?></h2>
+    <ul>
+        <li>
+            <div class="graph-legend green"></div>
+            <?= sprintf($translator->translate('graph.memory.free.%'), $memoryInfo['free_memory']); ?>
+        </li>
+        <li>
+            <div class="graph-legend red"></div>
+            <?= sprintf($translator->translate('graph.memory.used.%'), $memoryInfo['used_memory']); ?>
+        </li>
+        <li>
+            <div class="graph-legend blue"></div>
+            <?= sprintf($translator->translate('graph.memory.wasted.%'), $memoryInfo['wasted_memory']); ?>
+        </li>
+    </ul>
+    <canvas id="memory" width="310" height="310" class="graph" data-data='<?= $status->getGraphMemoryInfo(); ?>'></canvas>
+</article>
diff --git a/template/page.phtml b/template/page.phtml
@@ -16,7 +16,7 @@
                         <li<?= $active == 'status' ? ' class="active"' : null ?>><a href="/"><?= $translator->translate('menu.status'); ?></a></li>
                         <li<?= $active == 'config' ? ' class="active"' : null ?>><a href="/configuration"><?= $translator->translate('menu.config'); ?></a></li>
                         <li<?= $active == 'cached' ? ' class="active"' : null ?>><a href="/cached-scripts"><?= $translator->translate('menu.scripts'); ?></a></li>
-                        <li><a href="/"><?= $translator->translate('menu.graphs'); ?> (not implemented yet)</a></li>
+                        <li<?= $active == 'graphs' ? ' class="active"' : null ?>><a href="/graphs"><?= $translator->translate('menu.graphs'); ?></a></li>
                     </ul>
                 </nav>
             </div>
@@ -34,5 +34,6 @@
             </ul>
         </footer>
         <script src="/js/Chart.js"></script>
+        <script src="/js/main.js"></script>
     </body>
 </html>
diff --git a/texts/en.php b/texts/en.php
@@ -95,4 +95,9 @@
     'scripts.memory_consumption'                            => 'Memory',
     'scripts.last_used_timestamp'                           => 'Last used',
     'scripts.timestamp'                                     => 'Created',
+
+    'graph.memory.title'                                    => 'Memory',
+    'graph.memory.free.%'                                   => '%s free',
+    'graph.memory.used.%'                                   => '%s used',
+    'graph.memory.wasted.%'                                 => '%s wasted',
 ];