Mercurial > gemma

comparison client/src/components/admin/Logs.vue @ 1276:aec9ed491dad

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
more cleanup in client/src
author Markus Kottlaender <markus@intevation.de>
date Thu, 22 Nov 2018 07:40:23 +0100
parents
children ea3a89a1813a
comparison
equal deleted inserted replaced
1275:9e23a2b02b32 1276:aec9ed491dad
1 <template>
2 <div class="main d-flex flex-column">
3 <div class="d-flex flex-row">
4 <div :class="spacer"></div>
5 <div class="logoutput text-left bg-white shadow mt-3 mx-3">
6 <pre id="code" v-highlightjs="logs"><code class="bash hljs hljs-string"></code></pre>
7 </div>
8 </div>
9 <div class="d-flex flex-row logmenu">
10 <div class="d-flex align-self-center">
11 <ul class="nav nav-pills">
12 <li class="nav-item">
13 <a
14 @click="fetch('system/log/apache2/access.log', 'accesslog')"
15 :class="accesslogStyle"
16 href="#"
17 >Accesslog</a>
18 </li>
19 <li class="nav-item">
20 <a
21 @click="fetch('system/log/apache2/error.log', 'errorlog')"
22 :class="errorlogStyle"
23 href="#"
24 >Errorlog</a>
25 </li>
26 </ul>
27 </div>
28 <div class="statuscontainer d-flex flex-row">
29 <div class="statusline ml-3 mt-1 align-self-center">
30 <h3>Last refresh: {{refreshed}}</h3>
31 </div>
32 <div class="refresh">
33 <button class="btn btn-dark" @click="fetch(currentFile, currentLog)">Refresh</button>
34 </div>
35 </div>
36 </div>
37 </div>
38 </template>
39
40 <style lang="sass" scoped>
41 .statuscontainer
42 width: 87%
43 position: relative
44
45 .logmenu
46 margin-left: 5rem
47 min-width: 60vw
48
49 #code
50 overflow: auto
51
52 .refresh
53 position: absolute
54 right: 0
55
56 .logoutput
57 width: 95%
58 height: 85vh
59 overflow: auto
60 transition: $transition-fast
61
62 .spacer
63 height: 90vh
64
65 .spacer-collapsed
66 min-width: $icon-width + $offset
67 transition: $transition-fast
68
69 .spacer-expanded
70 min-width: $sidebar-width + $offset
71
72 .statusline
73 position: absolute
74 right: 0
75 margin-right: 7rem
76 </style>
77
78 <script>
79 /*
80 * This is Free Software under GNU Affero General Public License v >= 3.0
81 * without warranty, see README.md and license for details.
82 *
83 * SPDX-License-Identifier: AGPL-3.0-or-later
84 * License-Filename: LICENSES/AGPL-3.0.txt
85 *
86 * Copyright (C) 2018 by via donau
87 * – Österreichische Wasserstraßen-Gesellschaft mbH
88 * Software engineering by Intevation GmbH
89 *
90 * Author(s):
91 * Thomas Junk <thomas.junk@intevation.de>
92 */
93 import { mapState } from "vuex";
94 import { HTTP } from "../../lib/http.js";
95 import "../../../node_modules/highlight.js/styles/paraiso-dark.css";
96 import Vue from "vue";
97 import VueHighlightJS from "vue-highlightjs";
98 Vue.use(VueHighlightJS);
99
100 const ACCESSLOG = "accesslog";
101 const ERRORLOG = "errorlog";
102
103 export default {
104 name: "logs",
105 mounted() {
106 this.fetch("system/log/apache2/access.log", ACCESSLOG);
107 },
108 data() {
109 return {
110 logs: null,
111 currentLog: null,
112 currentFile: null,
113 refreshed: null
114 };
115 },
116 methods: {
117 fetch(file, type) {
118 HTTP.get(file, {
119 headers: { "X-Gemma-Auth": localStorage.getItem("token") }
120 })
121 .then(response => {
122 this.logs = response.data.content;
123 this.currentLog = type;
124 this.refreshed = new Date().toLocaleString();
125 this.currentFile = file;
126 })
127 .catch();
128 },
129 disallow(e) {
130 e.target.blur();
131 }
132 },
133 computed: {
134 ...mapState("application", ["showSidebar"]),
135 accesslogStyle() {
136 return {
137 active: this.currentLog == ACCESSLOG,
138 "nav-link": true
139 };
140 },
141 errorlogStyle() {
142 return {
143 active: this.currentLog == ERRORLOG,
144 "nav-link": true
145 };
146 },
147 spacer() {
148 return [
149 "spacer ml-3",
150 {
151 "spacer-expanded": this.showSidebar,
152 "spacer-collapsed": !this.showSidebar
153 }
154 ];
155 }
156 }
157 };
158 </script>