PHP Classes
elePHPant
Icontem

File: resources/js/components/Show/Logs.vue

Recommend this page to a friend!
  Classes of Nyi Nyi Lwin  >  Laravel Nova Log Viewer  >  resources/js/components/Show/Logs.vue  >  Download  
File: resources/js/components/Show/Logs.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Laravel Nova Log Viewer
Display information about logs in Laravel Nova
Author: By
Last change:
Date: 7 months ago
Size: 9,684 bytes
 

 

Contents

Class file image Download
<template>
    <div>
        <heading class="mb-6">Log [ {{ $route.params.date }} ]</heading>

        <div class="flex mb-4">
            <div class="w-1/6">
                <card class="flex mr-1 rounded-none">
                    <div class="w-full p-4">
                       <div>
                           <div>
                               <div class="font-bold text-xl mb-2">Levels</div>
                           </div>
                       </div>

                        <ul class="list-reset">
                            <li class="leading-wide text-sm" v-for="(menu, key) in menus" :key="key">
                                <button
                                    :disabled="menu.count === 0"
                                    :style="{ 'background-color' : key !== 'date' ? getColor(menu.count === 0 ? 'empty' : key) : '#1976D2' }"
                                    class="w-full font-bold py-2 px-4 inline-flex items-center"
                                    @click="$router.push({name: 'nova-log-viewer-show', params: {
                                        date: $route.params.date,
                                        level: key
                                    }})"
                                >
                                    <span class="text-white">{{ menu.name }}</span>
                                    <span class="flex rounded-full text-white uppercase px-2 py-1 text-xs font-bold mr-3">{{ menu.count }}</span>
                                </button>
                            </li>
                        </ul>
                    </div>
                </card>
            </div>
            <div class="w-5/6">
                <card class="flex rounded-none" v-if="info != null">
                    <div class="w-full p-4">
                        <div>
                            <div class="float-left">
                                <div class="font-bold text-xl mb-2">Log info</div>
                            </div>

                            <div class="float-right">
                                <div class="inline-flex">
                                    <a :href="downloadUrl + log.date" target="_blank" class="bg-success font-bold py-2 px-4 rounded-l inline-flex items-center">
                                        <icon class="fill-current w-4 h-4 text-white" type="download" view-box="0 0 24 24" />
                                    </a>
                                    <button @click="openDeleteModal(log)" class="bg-danger font-bold py-2 px-4 rounded-r inline-flex items-center">
                                        <icon class="fill-current w-4 h-4 text-white" type="delete" viewBox="0 0 20 20" />
                                    </button>
                                </div>
                            </div>
                        </div>
                        <table class="w-full">
                            <tbody class="align-baseline">
                            <tr>
                                <td style="width: 23%;" class="text-sm pl-0 p-2">File Path :</td>
                                <td>{{ info.path }}</td>
                            </tr>
                            <tr>
                                <td style="width: 23%;" class="text-sm pl-0 p-2">Log Entries :</td>
                                <td>{{ info.entries }}</td>
                            </tr>
                            <tr>
                                <td style="width: 23%;" class="text-sm pl-0 p-2">Size :</td>
                                <td>{{ info.size }}</td>
                            </tr>
                            <tr>
                                <td style="width: 23%;" class="text-sm pl-0 p-2">Created At :</td>
                                <td>{{ info.created_at }}</td>
                            </tr>
                            <tr>
                                <td style="width: 23%;" class="text-sm pl-0 p-2">Updated At :</td>
                                <td>{{ info.updated_at }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </card>

                <card class="flex rounded-none mt-1 p-2">
                    <table class="table w-full border-0">
                        <thead>
                        <tr>
                            <th>Logs</th>
                            <th> Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        <log
                            :entry="entry"
                            v-for="(entry, key) in entries"
                            :key="key"
                            @stack="openStackModal(entry)"
                        />
                        </tbody>
                    </table>
                </card>

                <card class="flex rounded-none justify-end" v-if="prev != null || next != null">
                    <div class="inline-flex">
                        <button @click="getLog(prev)" v-if="prev != null" class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded-l">
                            Prev
                        </button>
                        <button @click="getLog(next)" v-if="next != null" class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded-r">
                            Next
                        </button>
                    </div>
                </card>
            </div>
        </div>

        <portal to="modals">
            <transition name="fade">
                <delete-resource-modal
                    v-if="deleteModalOpen"
                    @confirm="confirmDelete"
                    @close="closeDeleteModal"
                    mode="delete"
                >
                    <div class="p-8">
                        <heading :level="2" class="mb-6">
                            Delete Log File
                        </heading>
                        <p class="text-80 leading-normal">
                            Are you sure you want to delete this log file {{ deleting.date }}?
                        </p>
                    </div>
                </delete-resource-modal>

                <modal v-if="stackModalOpen">
                    <div class="bg-white">
                        <button type="button" @click="closeStackModal" class="btn text-danger float-right p-2">
                            X
                        </button>
                        <div style="width: 950px;height:600px;overflow: overlay;">
                            <div class="p-4 stack-content">
                                {{ stack }}
                            </div>
                        </div>
                    </div>
                </modal>
            </transition>
        </portal>
    </div>
</template>

<script>
import Log from './Log';
import color from '../../utils/color';

export default {
    name: 'Show',
    components: {
        Log,
    },
    data() {
        return {
            info: null,
            log: null,
            levels: null,
            level: null,
            entries: null,
            menus: null,
            deleteModalOpen: false,
            deleting: null,
            next: null,
            prev: null,

            stackModalOpen: false,
            stack: null,
        };
    },
    watch: {
        '$route.params.level': function(level) {
            this.getLog(`/nova-vendor/php-junior/nova-log-viewer/get/${this.$route.params.date}/${level}`)
        },
    },
    computed: {
        downloadUrl() {
            return '/nova-vendor/php-junior/nova-log-viewer/download/';
        },
    },
    mounted() {
        this.getLog();
    },
    methods: {
        getColor(level) {
            return color(level);
        },
        getLog(url) {
            url =
                url ||
                `/nova-vendor/php-junior/nova-log-viewer/get/${this.$route.params.date}/${
                    this.$route.params.level
                }`;
            axios.get(url).then(({ data }) => {
                this.log = data.log;
                this.levels = data.levels;
                this.level = data.level;
                this.entries = data.entries.data;
                this.menus = data.menus;
                this.prev = data.entries.prev_page_url;
                this.next = data.entries.next_page_url;
                this.info = data.info;
            });
        },
        openDeleteModal(log) {
            this.deleteModalOpen = true;
            this.deleting = log;
        },

        closeDeleteModal() {
            this.deleteModalOpen = false;
            this.deleting = null;
        },

        openStackModal(entry) {
            this.stackModalOpen = true;
            this.stack = entry.stack;
        },

        closeStackModal() {
            this.stackModalOpen = false;
            this.stack = null;
        },

        confirmDelete() {
            axios({
                method: 'delete',
                url: '/nova-vendor/php-junior/nova-log-viewer/delete',
                data: {
                    date: this.deleting.date,
                },
            }).then(res => {
                this.deleteModalOpen = false;
                this.$router.push({ name: 'nova-log-viewer-list' });
            });
        },
    },
};
</script>

<style scoped>
.stack-content {
    color: #ae0e0e;
    font-family: consolas, Menlo, Courier, monospace;
    font-size: 12px;
    font-weight: 400;
    white-space: pre-line;
    width: 100%;
}
</style>