Edit File - File Manager

Edit File: PreviewScreen.vue

export default {
        props: {
            resource: {required: true},
            title: {required: true},
            id: {required: true},
            entryPoint: {default: false},
        },

/**
         * The component's data.
         */
        data() {
            return {
                entry: null,
                batch: null,
                ready: false,

updateEntryTimeout: null,
                updateEntryTimer: 2500,
            };
        },

watch: {
            id() {
                this.prepareEntry()
            }
        },

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

/**
         * Clean after the component is destroyed.
         */
        destroyed() {
            clearTimeout(this.updateEntryTimeout);
        },

computed: {
            job() {
                return _.find(this.batch, {type: 'job'})
            },

request() {
                return _.find(this.batch, {type: 'request'})
            },

command() {
                return _.find(this.batch, {type: 'command'})
            },
        },

methods: {
            prepareEntry() {
                document.title = this.title + " - Telescope";
                this.ready = false;

let unwatch = this.$watch('ready', newVal => {
                    if (newVal) {
                        this.$emit('ready');
                        unwatch();
                    }
                });

this.loadEntry((response) => {
                    this.entry = response.data.entry;
                    this.batch = response.data.batch;

this.$parent.entry = response.data.entry;
                    this.$parent.batch = response.data.batch;

this.ready = true;

this.updateEntry();
                });
            },

loadEntry(after){
                axios.get(Telescope.basePath + '/telescope-api/' + this.resource + '/' + this.id).then(response => {
                    if (_.isFunction(after)) {
                        after(response);
                    }
                }).catch(error => {
                    this.ready = true;
                })
            },

/**
             * Update the existing entry if needed.
             */
            updateEntry(){
                if (this.resource != 'jobs') return;
                if (this.entry.content.status !== 'pending') return;

this.updateEntryTimeout = setTimeout(() => {
                    this.loadEntry((response) => {
                        this.entry = response.data.entry;
                        this.batch = response.data.batch;

this.$parent.entry = response.data.entry;
                        this.$parent.batch = response.data.batch;

this.ready = true;
                    });

this.updateEntry();
                }, this.updateEntryTimer);
            }
        }
    }
</script>

<template>
    <div>
        <div class="card overflow-hidden">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h2 class="h6 m-0">{{this.title}}</h2>
            </div>

<span>Fetching...</span>
            </div>

<div v-if="ready && !entry" class="d-flex align-items-center justify-content-center card-bg-secondary p-5 bottom-radius">
                <span>No entry found.</span>
            </div>

<div class="table-responsive border-top">
                <table v-if="ready && entry" class="table mb-0 card-bg-secondary table-borderless">
                    <tbody>
                    <tr>
                        <td class="table-fit text-muted">Time</td>
                        <td>
                            {{localTime(entry.created_at)}} ({{timeAgo(entry.created_at)}})
                        </td>
                    </tr>

<tr>
                        <td class="table-fit text-muted">Hostname</td>
                        <td>
                            {{entry.content.hostname}}
                        </td>
                    </tr>

<tr v-if="!entryPoint && request">
                        <td class="table-fit text-muted">Request</td>
                        <td>
                            <router-link :to="{name:'request-preview', params:{id: request.id}}" class="control-action">
                                View Request
                            </router-link>
                        </td>
                    </tr>

<tr v-if="!entryPoint && command">
                        <td class="table-fit text-muted">Command</td>
                        <td>
                            <router-link :to="{name:'command-preview', params:{id: command.id}}" class="control-action">
                                View Command
                            </router-link>
                        </td>
                    </tr>

<div class="card mt-5" v-if="ready && entry && entry.content.user && entry.content.user.id">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5>Authenticated User</h5>
            </div>

<td>
                        {{entry.content.user.id}}
                    </td>
                </tr>

<td class="align-middle">
                        <img :src="entry.content.user.avatar" :alt="entry.content.user.name" class="mr-2 rounded-circle" height="40" width="40" v-if="entry.content.user.avatar">
                        {{entry.content.user.name}}
                    </td>
                </tr>

<tr v-if="entry.content.user.email">
                    <td class="table-fit text-muted">Email Address</td>

<td>
                        {{entry.content.user.email}}
                    </td>
                </tr>
            </table>
        </div>

Back to File Manager