Mercurial > gemma
view client/src/logs/logs.vue @ 938:fe923c8ef08f
client: add static legend image to contour_lines
* Add a new image asset `legend_contour_lines.png` and display it
for the "Bottleneck isolines" layer's legend.
* Ensure that the "Bottleneck isolines" layer is not visible at startup.
* Remove some outdated TODOISO and TODOSTYLE comments.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Tue, 09 Oct 2018 00:12:12 +0200 |
parents | aa2acb942e55 |
children | ca628dce90dd |
line wrap: on
line source
<template> <div class="main d-flex flex-column"> <div class="d-flex flex-row"> <div :class="spacer"></div> <div class="logoutput shadow"> <pre id="code" v-highlightjs="logs"><code class="bash"></code></pre> </div> </div> <div class="d-flex flex-row logmenu"> <div class="d-flex align-self-center"> <ul class="nav nav-pills"> <li class="nav-item"> <a @click="fetch('system/log/apache2/access.log', 'accesslog')" :class="accesslogStyle" href="#">Accesslog</a> </li> <li class="nav-item"> <a @click="fetch('system/log/apache2/error.log', 'errorlog')" :class="errorlogStyle" href="#">Errorlog</a> </li> </ul> </div> <div class="statuscontainer d-flex flex-row"> <div class="statusline align-self-center"> <h3>Last refresh: {{refreshed}}</h3> </div> <div class="refresh"> <button class="btn btn-dark" @click="fetch(currentFile, currentLog)">Refresh</button> </div> </div> </div> </div> </template> <style scoped lang="scss"> .statuscontainer { width: 87%; position: relative; } .logmenu { margin-left: 5rem; min-width: 60vw; } #code { overflow: auto; } .refresh { position: absolute; right: 0; } .logoutput { width: 95%; height: 85vh; margin-top: $offset; margin-right: $offset; margin-left: $offset; text-align: left; background-color: white; overflow: auto; transition: $transition-fast; } .spacer { margin-left: $offset; height: 90vh; } .spacer-collapsed { min-width: $icon-width + $offset; transition: $transition-fast; } .spacer-expanded { min-width: $sidebar-width + $offset; } .statusline { position: absolute; right: 0; margin-top: 0.3rem; margin-left: $offset; margin-right: 7rem; } </style> <script> import { mapGetters } from "vuex"; import { HTTP } from "../application/lib/http.js"; import "../../node_modules/highlight.js/styles/paraiso-dark.css"; import Vue from "vue"; import VueHighlightJS from "vue-highlightjs"; Vue.use(VueHighlightJS); const ACCESSLOG = "accesslog"; const ERRORLOG = "errorlog"; export default { name: "logs", 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(); }, disallow(e) { e.target.blur(); } }, computed: { ...mapGetters("application", ["sidebarCollapsed", "isUsermenuCollapsed"]), accesslogStyle() { return { active: this.currentLog == ACCESSLOG, "nav-link": true }; }, errorlogStyle() { return { active: this.currentLog == ERRORLOG, "nav-link": true }; }, spacer() { return { spacer: true, "spacer-expanded": !this.sidebarCollapsed, "spacer-collapsed": this.sidebarCollapsed }; } } }; </script>