Add view collector

config/telescope.php

@@ -152,5 +152,7 @@
         ],
 
         Watchers\ScheduleWatcher::class => env('TELESCOPE_SCHEDULE_WATCHER', true),
+
+        Watchers\ViewWatcher::class => env('TELESCOPE_VIEW_WATCHER', true),
     ],
 ];

resources/js/components/RelatedEntries.vue

@@ -60,6 +60,8 @@
                     this.currentTab = 'gates'
                 } else if (this.redis.length) {
                     this.currentTab = 'redis'
+                } else if (this.views.length) {
+                    this.currentTab = 'views'
                 }
             },
         },
@@ -120,6 +122,10 @@
                 return _.filter(this.batch, {type: 'notification'});
             },
 
+            views() {
+                return _.filter(this.batch, {type: 'view'});
+            },
+
             tabs(){
                 return _.filter([
                     {title: "Exceptions", type: "exceptions", count: this.exceptions.length},
@@ -133,6 +139,7 @@
                     {title: "Events", type: "events", count: this.events.length},
                     {title: "Cache", type: "cache", count: this.cache.length},
                     {title: "Redis", type: "redis", count: this.redis.length},
+                    {title: "Views", type: "views", count: this.views.length},
                 ], tab => tab.count > 0);
             },
 
@@ -524,6 +531,36 @@
                 </tr>
                 </tbody>
             </table>
+
+            <!-- Related Views -->
+            <table class="table table-hover table-sm mb-0" v-show="currentTab=='views' && views.length">
+                <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Path</th>
+                    <th></th>
+                </tr>
+                </thead>
+
+                <tbody>
+                <tr v-for="entry in views">
+                    <td class="table-fit">
+                        {{entry.content.name}}
+                    </td>
+
+                    <td :title="entry.content.path">{{truncate(entry.content.path, 100)}}</td>
+
+                    <td class="table-fit">
+                        <router-link :to="{name:'view-preview', params:{id: entry.id}}" class="control-action">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 16">
+                                <path d="M16.56 13.66a8 8 0 0 1-11.32 0L.3 8.7a1 1 0 0 1 0-1.42l4.95-4.95a8 8 0 0 1 11.32 0l4.95 4.95a1 1 0 0 1 0 1.42l-4.95 4.95-.01.01zm-9.9-1.42a6 6 0 0 0 8.48 0L19.38 8l-4.24-4.24a6 6 0 0 0-8.48 0L2.4 8l4.25 4.24h.01zM10.9 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path>
+                            </svg>
+                        </router-link>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+
         </div>
     </div>
 </template>

resources/js/routes.js

@@ -180,4 +180,17 @@ export default [
         name: 'gates',
         component: require('./screens/gates/index').default,
     },
+
+    {
+        path: '/views/:id',
+        name: 'view-preview',
+        component: require('./screens/views/preview').default,
+    },
+
+    {
+        path: '/views',
+        name: 'views',
+        component: require('./screens/views/index').default,
+    },
+
 ];

resources/js/screens/views/index.vue

@@ -0,0 +1,40 @@
+<script type="text/ecmascript-6">
+    import StylesMixin from './../../mixins/entriesStyles';
+
+    export default {
+        mixins: [
+            StylesMixin,
+        ],
+    }
+</script>
+
+<template>
+    <index-screen title="Views" resource="views">
+        <tr slot="table-header">
+            <th scope="col">Name</th>
+            <th scope="col">Path</th>
+            <th scope="col">Happened</th>
+            <th scope="col"></th>
+        </tr>
+
+
+        <template slot="row" slot-scope="slotProps">
+
+            <td class="table-fit">
+                {{slotProps.entry.content.name}}
+            </td>
+
+            <td>{{truncate(slotProps.entry.content.path, 80)}}</td>
+
+            <td class="table-fit" :data-timeago="slotProps.entry.created_at">{{timeAgo(slotProps.entry.created_at)}}</td>
+
+            <td class="table-fit">
+                <router-link :to="{name:'view-preview', params:{id: slotProps.entry.id}}" class="control-action">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 16">
+                        <path d="M16.56 13.66a8 8 0 0 1-11.32 0L.3 8.7a1 1 0 0 1 0-1.42l4.95-4.95a8 8 0 0 1 11.32 0l4.95 4.95a1 1 0 0 1 0 1.42l-4.95 4.95-.01.01zm-9.9-1.42a6 6 0 0 0 8.48 0L19.38 8l-4.24-4.24a6 6 0 0 0-8.48 0L2.4 8l4.25 4.24h.01zM10.9 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path>
+                    </svg>
+                </router-link>
+            </td>
+        </template>
+    </index-screen>
+</template>

resources/js/screens/views/preview.vue

@@ -0,0 +1,48 @@
+<script type="text/ecmascript-6">
+    import _ from 'lodash';
+    import StylesMixin from './../../mixins/entriesStyles';
+
+    export default {
+        mixins: [
+            StylesMixin,
+        ],
+
+
+        data(){
+            return {
+                entry: null,
+                batch: [],
+            };
+        },
+    }
+</script>
+
+<template>
+    <preview-screen title="View Action" resource="views" :id="$route.params.id">
+        <template slot="table-parameters" slot-scope="slotProps">
+            <tr>
+                <td class="table-fit font-weight-bold">View</td>
+                <td>
+                    {{slotProps.entry.content.name}}
+                </td>
+            </tr>
+
+            <tr>
+                <td class="table-fit font-weight-bold">Path</td>
+                <td>
+                    {{slotProps.entry.content.path}}
+                </td>
+            </tr>
+        </template>
+
+        <div slot="after-attributes-card" slot-scope="slotProps">
+            <div class="card mt-5" v-if="slotProps.entry.content.data">
+                <div class="card-header"><h5>Data</h5></div>
+
+                <div class="code-bg p-4 mb-0 text-white">
+                    <vue-json-pretty :data="slotProps.entry.content.data"></vue-json-pretty>
+                </div>
+            </div>
+        </div>
+    </preview-screen>
+</template>

resources/views/layout.blade.php

@@ -178,6 +178,14 @@
                             <span>Redis</span>
                         </router-link>
                     </li>
+                    <li class="nav-item">
+                        <router-link active-class="active" to="/views" class="nav-link d-flex align-items-center">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                                <path d="M10 1l10 6-10 6L0 7l10-6zm6.67 10L20 13l-10 6-10-6 3.33-2L10 15l6.67-4z"></path>
+                            </svg>
+                            <span>Views</span>
+                        </router-link>
+                    </li>
                 </ul>
             </div>
 

src/EntryType.php

@@ -19,4 +19,5 @@ class EntryType
     public const REQUEST = 'request';
     public const SCHEDULED_TASK = 'schedule';
     public const GATE = 'gate';
+    public const VIEW = 'view';
 }

src/Http/Controllers/ViewsController.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace Laravel\Telescope\Http\Controllers;
+
+use Laravel\Telescope\EntryType;
+use Laravel\Telescope\Watchers\ModelWatcher;
+use Laravel\Telescope\Watchers\ViewWatcher;
+
+class ViewsController extends EntryController
+{
+    /**
+     * The entry type for the controller.
+     *
+     * @return string
+     */
+    protected function entryType()
+    {
+        return EntryType::VIEW;
+    }
+
+    /**
+     * The watcher class for the controller.
+     *
+     * @return string
+     */
+    protected function watcher()
+    {
+        return ViewWatcher::class;
+    }
+}

src/Http/routes.php

@@ -63,6 +63,10 @@
 Route::post('/telescope-api/redis', 'RedisController@index');
 Route::get('/telescope-api/redis/{telescopeEntryId}', 'RedisController@show');
 
+// View entries...
+Route::post('/telescope-api/views', 'ViewsController@index');
+Route::get('/telescope-api/views/{telescopeEntryId}', 'ViewsController@show');
+
 // Monitored Tags...
 Route::get('/telescope-api/monitored-tags', 'MonitoredTagController@index');
 Route::post('/telescope-api/monitored-tags/', 'MonitoredTagController@store');

src/Telescope.php

@@ -448,6 +448,17 @@ public static function recordScheduledCommand(IncomingEntry $entry)
         static::record(EntryType::SCHEDULED_TASK, $entry);
     }
 
+    /**
+     * Record the given entry.
+     *
+     * @param  \Laravel\Telescope\IncomingEntry  $entry
+     * @return void
+     */
+    public static function recordView(IncomingEntry $entry)
+    {
+        static::record(EntryType::VIEW, $entry);
+    }
+
     /**
      * Flush all entries in the queue.
      *

src/Watchers/ViewWatcher.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace Laravel\Telescope\Watchers;
+
+use Illuminate\Support\Str;
+use Illuminate\View\View;
+use Laravel\Telescope\ExtractProperties;
+use Laravel\Telescope\Telescope;
+use Laravel\Telescope\FormatModel;
+use Laravel\Telescope\IncomingEntry;
+
+class ViewWatcher extends Watcher
+{
+    /**
+     * Register the watcher.
+     *
+     * @param  \Illuminate\Contracts\Foundation\Application  $app
+     * @return void
+     */
+    public function register($app)
+    {
+        $app['events']->listen($this->options['events'] ?? 'composing:*', [$this, 'recordAction']);
+    }
+
+    /**
+     * Record an action.
+     *
+     * @param  string  $event
+     * @param  array  $data
+     * @return void
+     */
+    public function recordAction($event, $data)
+    {
+        if (! Telescope::isRecording()) {
+            return;
+        }
+
+        /** @var View $view */
+        $view = $data[0];
+
+        Telescope::recordView(IncomingEntry::make(array_filter([
+            'name' => $view->getName(),
+            'path' => $view->getPath(),
+            'data' => array_keys($view->getData()),
+        ])));
+    }
+}