feat: add a forget button in the cache panel (barryvdh#728)

* feat: add a forget button in the cache panel

* LaravelCacheWidget now extends TimelineWidget

* fix: escape value

src/Controllers/CacheController.php

@@ -0,0 +1,27 @@
+<?php namespace Barryvdh\Debugbar\Controllers;
+
+use Illuminate\Http\Response;
+
+class CacheController extends BaseController
+{
+    /**
+     * Forget a cache key
+     *
+     */
+    public function delete($key, $tags = '')
+    {
+        $cache = app('cache');
+
+        if (!empty($tags)) {
+            $tags = json_decode($tags, true);
+            $cache = $cache->tags($tags);
+        } else {
+            unset($tags);
+        }
+
+        $success = $cache->forget($key);
+
+        return response()->json(compact('success'));
+    }
+
+}

src/DataCollector/CacheCollector.php

@@ -34,16 +34,26 @@ public function onCacheEvent(CacheEvent $event)
         $class = get_class($event);
         $params = get_object_vars($event);
 
-        if(isset($params['value'])) {
+        $label = $this->classMap[$class];
+
+        if (isset($params['value'])) {
             if ($this->collectValues) {
-                $params['value'] = $this->getDataFormatter()->formatVar($event->value);
+                $params['value'] = htmlspecialchars($this->getDataFormatter()->formatVar($event->value));
             } else {
                 unset($params['value']);
             }
         }
 
+
+        if (!empty($params['key']) && in_array($label, ['hit', 'written'])) {
+            $params['delete'] = route('debugbar.cache.delete', [
+                'key' => urlencode($params['key']),
+                'tags' => !empty($params['tags']) ? json_encode($params['tags']) : '',
+            ]);
+        }
+
         $time = microtime(true);
-        $this->addMeasure($this->classMap[$class] . "\t" . $event->key, $time, $time, $params);
+        $this->addMeasure($label . "\t" . $event->key, $time, $time, $params);
     }
 
 
@@ -72,7 +82,7 @@ public function getWidgets()
         return [
           'cache' => [
             'icon' => 'clipboard',
-            'widget' => 'PhpDebugBar.Widgets.TimelineWidget',
+            'widget' => 'PhpDebugBar.Widgets.LaravelCacheWidget',
             'map' => 'cache',
             'default' => '{}',
           ],

src/JavascriptRenderer.php

@@ -20,6 +20,7 @@ public function __construct(DebugBar $debugBar, $baseUrl = null, $basePath = nul
         $this->cssFiles['laravel'] = __DIR__ . '/Resources/laravel-debugbar.css';
         $this->cssVendors['fontawesome'] = __DIR__ . '/Resources/vendor/font-awesome/style.css';
         $this->jsFiles['laravel-sql'] = __DIR__ . '/Resources/sqlqueries/widget.js';
+        $this->jsFiles['laravel-cache'] = __DIR__ . '/Resources/cache/widget.js';
     }
 
     /**

src/Resources/cache/widget.js

@@ -0,0 +1,59 @@
+(function($) {
+
+    var csscls = PhpDebugBar.utils.makecsscls('phpdebugbar-widgets-');
+
+    /**
+     * Widget for the displaying cache events
+     *
+     * Options:
+     *  - data
+     */
+    var LaravelCacheWidget = PhpDebugBar.Widgets.LaravelCacheWidget = PhpDebugBar.Widgets.TimelineWidget.extend({
+
+        tagName: 'ul',
+
+        className: csscls('timeline cache'),
+
+        onForgetClick: function(e, el) {
+            e.stopPropagation();
+
+            $.ajax({
+                url: $(el).attr("data-url"),
+                type: 'DELETE',
+                success: function(result) {
+                    $(el).fadeOut(200);
+                }
+            });
+        },
+
+        render: function() {
+            LaravelCacheWidget.__super__.render.apply(this);
+
+            this.bindAttr('data', function(data) {
+
+                if (data.measures) {
+                    var self = this;
+                    var lines = this.$el.find('.'+csscls('measure'));
+
+                    for (var i = 0; i < data.measures.length; i++) {
+                        var measure = data.measures[i];
+                        var m = lines[i];
+
+                        if (measure.params && !$.isEmptyObject(measure.params)) {
+
+                            if (measure.params.delete && measure.params.key) {
+                                $('<a />')
+                                    .addClass(csscls('forget'))
+                                    .text('forget')
+                                    .attr('data-url', measure.params.delete)
+                                    .one('click', function(e) { self.onForgetClick(e, this); })
+                                    .appendTo(m);
+                            }
+                        }
+                    }
+                }
+            });
+        }
+    });
+
+})(PhpDebugBar.$);

src/Resources/laravel-debugbar.css

@@ -303,3 +303,15 @@ ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-table-list-item {
 .phpdebugbar-text-muted {
     color: #888;
 }
+
+ul.phpdebugbar-widgets-cache a.phpdebugbar-widgets-forget {
+    float: right;
+    font-size: 12px;
+    padding: 0 4px;
+    background: #f4645f;
+    margin: 0 2px;
+    border-radius: 4px;
+    color: #fff;
+    text-decoration: none;
+    line-height: 1.5rem;
+}

src/ServiceProvider.php

@@ -93,6 +93,11 @@ public function boot()
                 'uses' => 'AssetController@js',
                 'as' => 'debugbar.assets.js',
             ]);
+
+            $router->delete('cache/{key}/{tags?}', [
+                'uses' => 'CacheController@delete',
+                'as' => 'debugbar.cache.delete',
+            ]);
         });
 
         $this->registerMiddleware(InjectDebugbar::class);