Mercurial > gemma
view client/src/components/Logs.vue @ 3330:0e442b547f6d
mocking fairway_availability
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 20 May 2019 15:52:49 +0200 |
parents | 1b8bb4f89227 |
children | 008bc1ae8897 |
line wrap: on
line source
<template> <div class="main d-flex flex-column"> <div class="d-flex flex-row"> <Spacer /> <div class="card logs shadow-xs mt-2 mr-2"> <UIBoxHeader icon="book" title="Logs" /> <div class="logoutput text-left bg-white"> <pre id="code" v-highlightjs="logs"> <code class="bash hljs hljs-string"></code> </pre> </div> <div class="logmenu"> <div class="d-flex align-self-center"> <ul class="nav nav-pills"> <li class="nav-item"> <a id="accesslog" :class="accesslogStyle" @click.prevent=" fetch('system/log/apache2/access.log', 'accesslog') " href="#" > <translate>Accesslog</translate> </a> </li> <li class="nav-item"> <a id="errorlog" :class="errorlogStyle" @click.prevent=" fetch('system/log/apache2/error.log', 'errorlog') " href="#" > <translate>Errorlog</translate> </a> </li> </ul> </div> <div class="statuscontainer d-flex flex-row mb-3"> <div class="statusline align-self-center"> <h3><translate>Last refresh:</translate> {{ refreshed }}</h3> </div> <div class="refresh"> <button @click="fetch(currentFile, currentLog)" class="btn btn-dark" > <translate>Refresh</translate> </button> </div> </div> </div> </div> </div> </div> </template> <style lang="scss" scoped> .statuscontainer { width: 87%; position: relative; } .logmenu { position: relative; margin-left: $offset; margin-top: $offset; } .logs { height: 85vh; width: 100vw; } #code { overflow: auto; } .refresh { position: absolute; right: $offset; bottom: 0; } .logoutput { margin-left: $offset; margin-right: $offset; margin-top: $offset; height: 90%; overflow: auto; transition: $transition-fast; } .statusline { position: absolute; right: 0; margin-right: 9rem; bottom: -0.5rem; } .statuscontainer { width: 100%; } </style> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Thomas Junk <thomas.junk@intevation.de> */ import { mapState } from "vuex"; import { HTTP } from "@/lib/http"; import "../../node_modules/highlight.js/styles/paraiso-dark.css"; import Vue from "vue"; import VueHighlightJS from "vue-highlightjs"; import { displayError } from "@/lib/errors"; Vue.use(VueHighlightJS); const ACCESSLOG = "accesslog"; const ERRORLOG = "errorlog"; export default { name: "logs", components: { Spacer: () => import("./Spacer") }, mounted() { this.fetch("system/log/apache2/access.log", ACCESSLOG); }, data() { return { logs: null, currentLog: null, currentFile: null, refreshed: null }; }, methods: { fetch(file, type) { HTTP.get(file, { headers: { "X-Gemma-Auth": localStorage.getItem("token") } }) .then(response => { this.logs = response.data.content; this.currentLog = type; this.refreshed = new Date().toLocaleString(); this.currentFile = file; }) .catch(e => { const { status, data } = e.response; displayError({ title: this.$gettext("Backend Error"), message: `${status} ${data.message || data}` }); }); }, disallow(e) { e.target.blur(); } }, computed: { ...mapState("application", ["showSidebar"]), accesslogStyle() { return { active: this.currentLog == ACCESSLOG, "nav-link": true }; }, errorlogStyle() { return { active: this.currentLog == ERRORLOG, "nav-link": true }; } } }; </script>