Edit File - File Manager

Edit File: RelatedEntries.vue

export default {
        props: ['entry', 'batch'],

mixins: [
            StylesMixin,
        ],

/**
         * The component's data.
         */
        data(){
            return {
                currentTab: 'exceptions'
            };
        },

/**
         * Prepare the component.
         */
        mounted(){
            this.activateFirstTab();
        },

watch: {
            entry(){
                this.activateFirstTab();
            }
        },

methods: {
            activateFirstTab(){
                if (window.location.hash) {
                    this.currentTab = window.location.hash.substring(1);
                } else if (this.exceptions.length) {
                    this.currentTab = 'exceptions'
                } else if (this.logs.length) {
                    this.currentTab = 'logs'
                } else if (this.views.length) {
                    this.currentTab = 'views'
                } else if (this.queries.length) {
                    this.currentTab = 'queries'
                } else if (this.models.length) {
                    this.currentTab = 'models'
                } else if (this.jobs.length) {
                    this.currentTab = 'jobs'
                } else if (this.mails.length) {
                    this.currentTab = 'mails'
                } else if (this.notifications.length) {
                    this.currentTab = 'notifications'
                } else if (this.events.length) {
                    this.currentTab = 'events'
                } else if (this.cache.length) {
                    this.currentTab = 'cache'
                } else if (this.gates.length) {
                    this.currentTab = 'gates'
                } else if (this.redis.length) {
                    this.currentTab = 'redis'
                } else if (this.clientRequests.length) {
                    this.currentTab = 'client_requests';
                }
            },

activateTab(tab){
                this.currentTab = tab;
                if(window.history.replaceState) {
                    window.history.replaceState(null, null, '#' + this.currentTab);
                }
            }
        },

computed: {
            hasRelatedEntries(){
                return !!_.reject(this.batch, entry => {
                    return _.includes(['request', 'command'], entry.type);
                }).length;
            },

entryTypesAvailable(){
                return _.uniqBy(this.batch, 'type').length;
            },

exceptions() {
                return _.filter(this.batch, {type: 'exception'});
            },

gates() {
                return _.filter(this.batch, {type: 'gate'});
            },

logs() {
                return _.filter(this.batch, {type: 'log'});
            },

queries() {
                return _.filter(this.batch, {type: 'query'});
            },

models() {
                return _.filter(this.batch, {type: 'model'});
            },

jobs() {
                return _.filter(this.batch, {type: 'job'});
            },

events() {
                return _.filter(this.batch, {type: 'event'});
            },

cache() {
                return _.filter(this.batch, {type: 'cache'});
            },

redis() {
                return _.filter(this.batch, {type: 'redis'});
            },

mails() {
                return _.filter(this.batch, {type: 'mail'});
            },

notifications() {
                return _.filter(this.batch, {type: 'notification'});
            },

views() {
                return _.filter(this.batch, {type: 'view'});
            },

clientRequests() {
                return _.filter(this.batch, {type: 'client_request'});
            },

queriesSummary() {
                return {
                    time: _.reduce(this.queries, (time, q) => { return time + parseFloat(q.content.time) }, 0.00).toFixed(2),
                    duplicated: this.queries.length - _.size(_.groupBy(this.queries, (q) => { return `${q.content.hash}-${q.content.connection}` })),
                };
            },

tabs(){
                return _.filter([
                    {title: "Exceptions", type: "exceptions", count: this.exceptions.length},
                    {title: "Logs", type: "logs", count: this.logs.length},
                    {title: "Views", type: "views", count: this.views.length},
                    {title: "Queries", type: "queries", count: this.queries.length},
                    {title: "Models", type: "models", count: this.models.length},
                    {title: "Gates", type: "gates", count: this.gates.length},
                    {title: "Jobs", type: "jobs", count: this.jobs.length},
                    {title: "Mail", type: "mails", count: this.mails.length},
                    {title: "Notifications", type: "notifications", count: this.notifications.length},
                    {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: "HTTP Client", type: "client_requests", count: this.clientRequests.length},
                ], tab => tab.count > 0);
            },

separateTabs(){
                return _.slice(this.tabs, 0, 7);
            },

dropdownTabs(){
                return _.slice(this.tabs, 7, 10);
            },

dropdownTabSelected(){
                return _.includes(_.map(this.dropdownTabs, 'type'), this.currentTab);
            }
        }
    }
</script>

<template>
    <div class="card overflow-hidden mt-5" v-if="hasRelatedEntries">
        <ul class="nav nav-pills">
            <li class="nav-item" v-for="tab in separateTabs">
                <a class="nav-link" :class="{active: currentTab==tab.type}" href="#" v-on:click.prevent="activateTab(tab.type)" v-if="tab.count">
                    {{tab.title}} ({{tab.count}})
                </a>
            </li>
            <li class="nav-item dropdown" v-if="dropdownTabs.length">
                <a class="nav-link dropdown-toggle" :class="{active: dropdownTabSelected}" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">More</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" :class="{active: currentTab==tab.type}" href="#" v-for="tab in dropdownTabs" v-on:click.prevent="activateTab(tab.type)">{{tab.title}} ({{tab.count}})</a>
                </div>
            </li>
        </ul>
        <div>
            
            <table class="table table-hover mb-0" v-show="currentTab=='exceptions' && exceptions.length">
                <thead>
                <tr>
                    <th>Message</th>
                    <th></th>
                </tr>
                </thead>

<tbody>
                    <tr v-for="entry in exceptions">
                        <td :title="entry.content.class">
                            {{truncate(entry.content.class, 70)}}<br>
                            <small class="text-muted text-break">{{truncate(entry.content.message, 200)}}</small>
                        </td>

<table class="table table-hover mb-0" v-show="currentTab=='logs' && logs.length">
                <thead>
                <tr>
                    <th>Message</th>
                    <th scope="col">Level</th>
                    <th></th>
                </tr>
                </thead>

<tbody>
                <tr v-for="entry in logs">
                    <td :title="entry.content.message">{{truncate(entry.content.message, 90)}}</td>
                    <td class="table-fit">
                        <span class="badge" :class="'badge-'+logLevelClass(entry.content.level)">
                            {{entry.content.level}}
                        </span>
                    </td>

<table class="table table-hover mb-0" v-show="currentTab=='queries' && queries.length">
                <thead>
                <tr>
                    <th>Query<br/><small>{{ queries.length }} queries, {{ queriesSummary.duplicated }} of which are duplicated.</small></th>
                    <th class="text-right">Duration<br/><small>{{ queriesSummary.time }}ms</small></th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="entry in queries">
                    <td :title="entry.content.sql"><code>{{truncate(entry.content.sql, 110)}}</code></td>

<td class="table-fit text-right">
                        <span class="badge badge-danger" v-if="entry.content.slow">
                            {{entry.content.time}}ms
                        </span>

<span v-else class="text-muted">
                            {{entry.content.time}}ms
                        </span>
                    </td>

<table class="table table-hover mb-0" v-show="currentTab=='models' && models.length">
                <thead>
                <tr>
                    <th>Model</th>
                    <th>Action</th>
                    <th></th>
                </tr>
                </thead>

<tbody>
                <tr v-for="entry in models">
                    <td :title="entry.content.model">{{truncate(entry.content.model, 100)}}</td>
                    <td class="table-fit">
                        <span class="badge" :class="'badge-'+modelActionClass(entry.content.action)">
                            {{entry.content.action}}
                        </span>
                    </td>

<table class="table table-hover mb-0" v-show="currentTab=='gates' && gates.length">
                <thead>
                <tr>
                    <th>Ability</th>
                    <th>Result</th>
                    <th></th>
                </tr>
                </thead>

<tbody>
                <tr v-for="entry in gates">
                    <td :title="entry.content.ability">{{truncate(entry.content.ability, 80)}}</td>
                    <td class="table-fit">
                        <span class="badge" :class="'badge-'+gateResultClass(entry.content.result)">
                            {{entry.content.result}}
                        </span>
                    </td>

<table class="table table-hover mb-0" v-show="currentTab=='jobs' && jobs.length">
                <thead>
                <tr>
                    <th>Job</th>
                    <th scope="col">Status</th>
                    <th></th>
                </tr>
                </thead>

<tbody>
                <tr v-for="entry in jobs">
                    <td>
                        <span :title="entry.content.name">{{truncate(entry.content.name, 68)}}</span><br>
                        <small class="text-muted">
                            Connection: {{entry.content.connection}} | Queue: {{entry.content.queue}}
                        </small>
                    </td>

<td class="table-fit">
                        <span class="badge" :class="'badge-'+jobStatusClass(entry.content.status)">
                            {{entry.content.status}}
                        </span>
                    </td>

<table class="table table-hover mb-0" v-show="currentTab=='events' && events.length">
                <thead>
                <tr>
                    <th>Name</th>
                    <th class="text-right">Listeners</th>
                    <th></th>
                </tr>
                </thead>

<tbody>
                <tr v-for="entry in events">
                    <td :title="entry.content.name">
                        {{truncate(entry.content.name, 80)}}

<span class="badge badge-info ml-2" v-if="entry.content.broadcast">
                            Broadcast
                        </span>
                    </td>

<td class="table-fit text-right text-muted">{{entry.content.listeners.length}}</td>

<table class="table table-hover mb-0" v-show="currentTab=='cache' && cache.length">
                <thead>
                <tr>
                    <th>Key</th>
                    <th>Action</th>
                    <th></th>
                </tr>
                </thead>

<tbody>
                <tr v-for="entry in cache">
                    <td :title="entry.content.key">{{truncate(entry.content.key, 100)}}</td>
                    <td class="table-fit">
                        <span class="badge" :class="'badge-'+cacheActionTypeClass(entry.content.type)">
                            {{entry.content.type}}
                        </span>
                    </td>

<table class="table table-hover mb-0" v-show="currentTab=='redis' && redis.length">
                <thead>
                <tr>
                    <th>Command</th>
                    <th class="text-right">Duration</th>
                    <th></th>
                </tr>
                </thead>

<tbody>
                <tr v-for="entry in redis">
                    <td :title="entry.content.command">{{truncate(entry.content.command, 100)}}</td>
                    <td class="table-fit text-right text-muted">{{entry.content.time}}ms</td>

<table class="table table-hover mb-0" v-show="currentTab=='mails' && mails.length">
                <thead>
                <tr>
                    <th>Mailable</th>
                    <th></th>
                </tr>
                </thead>

<tbody>
                <tr v-for="entry in mails">
                    <td>
                        <span :title="entry.content.mailable">{{truncate(entry.content.mailable || '-', 70)}}</span>

<span class="badge badge-secondary ml-2" v-if="entry.content.queued">
                            Queued
                        </span>

<br>

<small class="text-muted" :title="entry.content.subject">
                            Subject: {{truncate(entry.content.subject, 90)}}
                        </small>
                    </td>

<table class="table table-hover mb-0" v-show="currentTab=='notifications' && notifications.length">
                <thead>
                <tr>
                    <th>Notification</th>
                    <th>Channel</th>
                    <th></th>
                </tr>
                </thead>

<tbody>
                <tr v-for="entry in notifications">
                    <td>
                        <span :title="entry.content.notification">{{truncate(entry.content.notification || '-', 70)}}</span>

<span class="badge badge-secondary ml-2" v-if="entry.content.queued">
                            Queued
                        </span>

<br>

<small class="text-muted" :title="entry.content.notifiable">
                            Recipient: {{truncate(entry.content.notifiable, 90)}}
                        </small>
                    </td>

<td class="table-fit text-muted">{{truncate(entry.content.channel, 20)}}</td>

<table class="table table-hover mb-0" v-show="currentTab=='views' && views.length">
                <thead>
                <tr>
                    <th>Name</th>
                    <th class="text-right">Composers</th>
                    <th></th>
                </tr>
                </thead>

<tbody>
                <tr v-for="entry in views">
                    <td>
                        {{entry.content.name}} <br/>
                        <small class="text-muted">{{truncate(entry.content.path, 100)}}</small>
                    </td>

<td class="table-fit text-right text-muted">
                        {{entry.content.composers ? entry.content.composers.length : 0}}
                    </td>

<table class="table table-hover mb-0" v-show="currentTab=='client_requests' && clientRequests.length">
                <thead>
                <tr>
                    <th>Verb</th>
                    <th>URI</th>
                    <th>Status</th>
                    <th class="text-right">Happened</th>
                    <th></th>
                </tr>
                </thead>

<tbody>
                <tr v-for="entry in clientRequests">
                    <td class="table-fit pr-0">
                        <span class="badge" :class="'badge-'+requestMethodClass(entry.content.method)">
                            {{entry.content.method}}
                        </span>
                    </td>

<td :title="entry.content.uri">{{truncate(entry.content.uri, 60)}}</td>

<td class="table-fit">
                        <span class="badge" :class="'badge-'+requestStatusClass(entry.content.response_status !== undefined ? entry.content.response_status : null)">
                            {{entry.content.response_status !== undefined ? entry.content.response_status : 'N/A'}}
                        </span>
                    </td>

<td class="table-fit text-right text-muted" :data-timeago="entry.created_at" :title="entry.created_at">
                        {{timeAgo(entry.created_at)}}
                    </td>

</div>
    </div>
</template>

Back to File Manager