Mercurial > gemma

comparison client/src/components/Logs.vue @ 1558:0ded4c56978e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: component filestructure. remove admin/map hierarchy
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 12 Dec 2018 09:22:20 +0100
parents client/src/components/admin/Logs.vue@6eec1c324a64
children ef5cc5f1c757
comparison
equal deleted inserted replaced
1557:62171cd9a42b 1558:0ded4c56978e
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="card logs shadow-xs mt-3 mr-3">
6 <h6
7 class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
8 >
9 <font-awesome-icon class="mr-2 fa-fw" icon="book"></font-awesome-icon>
10 <translate class="headline">Logs</translate>
11 </h6>
12 <div class="logoutput text-left bg-white">
13 <pre id="code" v-highlightjs="logs">
14 <code class="bash hljs hljs-string"></code>
15 </pre>
16 </div>
17 <div class="logmenu">
18 <div class="d-flex align-self-center">
19 <ul class="nav nav-pills">
20 <li class="nav-item">
21 <a
22 :class="accesslogStyle"
23 @click="fetch('system/log/apache2/access.log', 'accesslog')"
24 href="#"
25 >
26 <translate>Accesslog</translate>
27 </a>
28 </li>
29 <li class="nav-item">
30 <a
31 :class="errorlogStyle"
32 @click="fetch('system/log/apache2/error.log', 'errorlog')"
33 href="#"
34 >
35 <translate>Errorlog</translate>
36 </a>
37 </li>
38 </ul>
39 </div>
40 <div class="statuscontainer d-flex flex-row mb-3">
41 <div class="statusline align-self-center">
42 <h3><translate>Last refresh:</translate> {{ refreshed }}</h3>
43 </div>
44 <div class="refresh">
45 <button
46 @click="fetch(currentFile, currentLog)"
47 class="btn btn-dark"
48 >
49 <translate>Refresh</translate>
50 </button>
51 </div>
52 </div>
53 </div>
54 </div>
55 </div>
56 </div>
57 </template>
58
59 <style lang="scss" scoped>
60 .statuscontainer {
61 width: 87%;
62 position: relative;
63 }
64
65 .logmenu {
66 position: relative;
67 margin-left: $offset;
68 margin-top: $offset;
69 }
70
71 .logs {
72 height: 85vh;
73 }
74
75 #code {
76 overflow: auto;
77 }
78
79 .refresh {
80 position: absolute;
81 right: $offset;
82 bottom: 0;
83 }
84
85 .logoutput {
86 margin-left: $offset;
87 margin-right: $offset;
88 margin-top: $offset;
89 height: 90%;
90 overflow: auto;
91 transition: $transition-fast;
92 }
93
94 .spacer {
95 height: 90vh;
96 }
97
98 .spacer-collapsed {
99 min-width: $icon-width + $offset;
100 transition: $transition-fast;
101 }
102
103 .spacer-expanded {
104 min-width: $sidebar-width + $offset;
105 }
106
107 .statusline {
108 position: absolute;
109 right: 0;
110 margin-right: 9rem;
111 bottom: -0.5rem;
112 }
113
114 .statuscontainer {
115 width: 100%;
116 }
117 </style>
118
119 <script>
120 /* This is Free Software under GNU Affero General Public License v >= 3.0
121 * without warranty, see README.md and license for details.
122 *
123 * SPDX-License-Identifier: AGPL-3.0-or-later
124 * License-Filename: LICENSES/AGPL-3.0.txt
125 *
126 * Copyright (C) 2018 by via donau
127 * – Österreichische Wasserstraßen-Gesellschaft mbH
128 * Software engineering by Intevation GmbH
129 *
130 * Author(s):
131 * Thomas Junk <thomas.junk@intevation.de>
132 */
133 import { mapState } from "vuex";
134 import { HTTP } from "../lib/http.js";
135 import "../../node_modules/highlight.js/styles/paraiso-dark.css";
136 import Vue from "vue";
137 import VueHighlightJS from "vue-highlightjs";
138 Vue.use(VueHighlightJS);
139
140 const ACCESSLOG = "accesslog";
141 const ERRORLOG = "errorlog";
142
143 export default {
144 name: "logs",
145 mounted() {
146 this.fetch("system/log/apache2/access.log", ACCESSLOG);
147 },
148 data() {
149 return {
150 logs: null,
151 currentLog: null,
152 currentFile: null,
153 refreshed: null
154 };
155 },
156 methods: {
157 fetch(file, type) {
158 HTTP.get(file, {
159 headers: { "X-Gemma-Auth": localStorage.getItem("token") }
160 })
161 .then(response => {
162 this.logs = response.data.content;
163 this.currentLog = type;
164 this.refreshed = new Date().toLocaleString();
165 this.currentFile = file;
166 })
167 .catch();
168 },
169 disallow(e) {
170 e.target.blur();
171 }
172 },
173 computed: {
174 ...mapState("application", ["showSidebar"]),
175 accesslogStyle() {
176 return {
177 active: this.currentLog == ACCESSLOG,
178 "nav-link": true
179 };
180 },
181 errorlogStyle() {
182 return {
183 active: this.currentLog == ERRORLOG,
184 "nav-link": true
185 };
186 },
187 spacer() {
188 return [
189 "spacer ml-3",
190 {
191 "spacer-expanded": this.showSidebar,
192 "spacer-collapsed": !this.showSidebar
193 }
194 ];
195 }
196 }
197 };
198 </script>