[5.x] Added 2 types search for entries

public/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=99f84d421ae083196e0a45c3c310168b",
+    "/app.js": "/app.js?id=bf6d27a3dc26f5b74680ffe0b5d56143",
     "/app-dark.css": "/app-dark.css?id=1ea407db56c5163ae29311f1f38eb7b9",
     "/app.css": "/app.css?id=de4c978567bfd90b38d186937dee5ccf"
 }

resources/js/components/IndexScreen.vue

@@ -16,6 +16,8 @@
             return {
                 tag: '',
                 familyHash: '',
+                email: '',
+                status: '',
                 entries: [],
                 ready: false,
                 recordingStatus: 'enabled',
@@ -44,6 +46,8 @@
             document.title = this.title + " - Telescope";
 
             this.familyHash = this.$route.query.family_hash || '';
+            this.email = this.$route.query.email || '';
+            this.status = this.$route.query.status || '';
 
             this.tag = this.$route.query.tag || '';
 
@@ -109,7 +113,9 @@
                         '?tag=' + this.tag +
                         '&before=' + this.lastEntryIndex +
                         '&take=' + this.entriesPerRequest +
-                        '&family_hash=' + this.familyHash
+                        '&family_hash=' + this.familyHash +
+                        '&email=' + this.email +
+                        '&status=' + this.status
                 ).then(response => {
                     this.lastEntryIndex = response.data.entries.length ? _.last(response.data.entries).sequence : this.lastEntryIndex;
 
@@ -134,7 +140,9 @@
                     axios.post(Telescope.basePath + '/telescope-api/' + this.resource +
                             '?tag=' + this.tag +
                             '&take=1' +
-                            '&family_hash=' + this.familyHash
+                            '&family_hash=' + this.familyHash +
+                            '&email=' + this.email +
+                            '&status=' + this.status
                     ).then(response => {
                         if (! this._isDestroyed) {
                             this.recordingStatus = response.data.status;
@@ -173,14 +181,14 @@
             /**
              * Search the entries of this type.
              */
-            search(){
+            search(key){
                 this.debouncer(() => {
                     this.hasNewEntries = false;
                     this.lastEntryIndex = '';
 
                     clearTimeout(this.newEntriesTimeout);
 
-                    this.$router.push({query: _.assign({}, this.$route.query, {tag: this.tag})});
+                    this.$router.push({query: _.assign({}, this.$route.query, {[key]: this[key]})});
                 });
             },
 
@@ -271,15 +279,37 @@
         <div class="card-header d-flex align-items-center justify-content-between">
             <h2 class="h6 m-0">{{this.title}}</h2>
 
-            <div class="form-control-with-icon w-25" v-if="!hideSearch && (tag || entries.length > 0)">
-                <div class="icon-wrapper">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon">
-                        <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
-                    </svg>
+            <div class="d-flex w-100 justify-content-end" style="gap: 12px;">
+                <div class="form-control-with-icon w-25" v-if="!hideSearch && (tag || entries.length > 0)">
+                    <div class="icon-wrapper">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon">
+                            <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
+                        </svg>
+                    </div>
+                    <input type="text" class="form-control w-100"
+                           id="searchInput"
+                           placeholder="Search Tag" v-model="tag" @input.stop="search('tag')">
+                </div>
+                <div class="form-control-with-icon w-25" v-if="!hideSearch && (status || entries.length > 0)">
+                    <div class="icon-wrapper">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon">
+                            <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
+                        </svg>
+                    </div>
+                    <input type="text" class="form-control w-100"
+                           id="searchStatus"
+                           placeholder="Search by status" v-model="status" @input.stop="search('status')">
+                </div>
+                <div class="form-control-with-icon w-25" v-if="!hideSearch && (email || entries.length > 0)">
+                    <div class="icon-wrapper">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon">
+                            <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
+                        </svg>
+                    </div>
+                    <input type="text" class="form-control w-100"
+                           id="searchEmail"
+                           placeholder="Search by email" v-model="email" @input.stop="search('email')">
                 </div>
-                <input type="text" class="form-control w-100"
-                       id="searchInput"
-                       placeholder="Search Tag" v-model="tag" @input.stop="search">
             </div>
         </div>
 

resources/js/screens/requests/index.vue

@@ -13,6 +13,7 @@
         <tr slot="table-header">
             <th scope="col">Verb</th>
             <th scope="col">Path</th>
+            <th scope="col" class="text-center">Email</th>
             <th scope="col" class="text-center">Status</th>
             <th scope="col" class="text-right">Duration</th>
             <th scope="col">Happened</th>
@@ -29,6 +30,12 @@
 
             <td :title="slotProps.entry.content.uri">{{truncate(slotProps.entry.content.uri, 50)}}</td>
 
+            <td class="table-fit text-center">
+                <span class="badge">
+                    {{slotProps.entry.content.user && slotProps.entry.content.user.email}}
+                </span>
+            </td>
+
             <td class="table-fit text-center">
                 <span class="badge" :class="'badge-'+requestStatusClass(slotProps.entry.content.response_status)">
                     {{slotProps.entry.content.response_status}}

src/Storage/EntryModel.php

@@ -66,6 +66,8 @@ public function scopeWithTelescopeOptions($query, $type, EntryQueryOptions $opti
     {
         $this->whereType($query, $type)
                 ->whereBatchId($query, $options)
+                ->whereEmail($query, $options)
+                ->whereStatus($query, $options)
                 ->whereTag($query, $options)
                 ->whereFamilyHash($query, $options)
                 ->whereBeforeSequence($query, $options)
@@ -106,6 +108,38 @@ protected function whereBatchId($query, EntryQueryOptions $options)
         return $this;
     }
 
+    /**
+     * Scope the query for the given email.
+     *
+     * @param  \Illuminate\Database\Eloquent\Builder  $query
+     * @param  \Laravel\Telescope\Storage\EntryQueryOptions  $options
+     * @return $this
+     */
+    protected function whereEmail($query, EntryQueryOptions $options)
+    {
+        $query->when($options->email, function ($query, $email) {
+            return $query->where('content->user', 'like', '%'.$email.'%');
+        });
+
+        return $this;
+    }
+
+    /**
+     * Scope the query for the given status.
+     *
+     * @param  \Illuminate\Database\Eloquent\Builder  $query
+     * @param  \Laravel\Telescope\Storage\EntryQueryOptions  $options
+     * @return $this
+     */
+    protected function whereStatus($query, EntryQueryOptions $options)
+    {
+        $query->when($options->status, function ($query, $status) {
+            return $query->where('content->response_status', 'like', '%'.$status.'%');
+        });
+
+        return $this;
+    }
+
     /**
      * Scope the query for the given type.
      *

src/Storage/EntryQueryOptions.php

@@ -13,6 +13,20 @@ class EntryQueryOptions
      */
     public $batchId;
 
+    /**
+     * The email that entries should belong to.
+     *
+     * @var string
+     */
+    public $email;
+
+    /**
+     * The status that entries should belong to.
+     *
+     * @var string
+     */
+    public $status;
+
     /**
      * The tag that must belong to retrieved entries.
      *
@@ -58,6 +72,8 @@ public static function fromRequest(Request $request)
     {
         return (new static)
                 ->batchId($request->batch_id)
+                ->email($request->email)
+                ->status($request->status)
                 ->uuids($request->uuids)
                 ->beforeSequence($request->before)
                 ->tag($request->tag)
@@ -89,6 +105,32 @@ public function batchId(?string $batchId)
         return $this;
     }
 
+    /**
+     * Set the email that entries should belong to.
+     *
+     * @param  string  $email
+     * @return $this
+     */
+    public function email(?string $email)
+    {
+        $this->email = $email;
+
+        return $this;
+    }
+
+    /**
+     * Set the status that entries should belong to.
+     *
+     * @param  string  $status
+     * @return $this
+     */
+    public function status(?string $status)
+    {
+        $this->status = $status;
+
+        return $this;
+    }
+
     /**
      * Set the list of UUIDs of entries tor retrieve.
      *