changeset 835:5bb4f1e4a4e5

refresh for logs
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 28 Sep 2018 10:17:10 +0200
parents 232f3f345cf0
children 1761694dad4a
files client/src/logs/logs.vue
diffstat 1 files changed, 40 insertions(+), 12 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/logs/logs.vue	Fri Sep 28 10:13:54 2018 +0200
+++ b/client/src/logs/logs.vue	Fri Sep 28 10:17:10 2018 +0200
@@ -6,27 +6,45 @@
                 <pre id="code" v-highlightjs="logs"><code class="bash"></code></pre>
             </div>
         </div>
-        <div class="logmenu">
-            <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 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('system/log/apache2/access.log', currentLog)">Refresh</button>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
 <style scoped lang="scss">
+.statuscontainer {
+  width: 87%;
+  position: relative;
+}
 .logmenu {
-  margin-left: auto;
-  margin-right: auto;
+  margin-left: 5rem;
+  min-width: 60vw;
 }
 #code {
   overflow: auto;
 }
+.refresh {
+  position: absolute;
+  right: 0;
+}
 .logoutput {
   width: 95%;
   height: 85vh;
@@ -52,6 +70,14 @@
 .spacer-expanded {
   min-width: $sidebar-width + $offset;
 }
+
+.statusline {
+  position: absolute;
+  right: 0;
+  margin-top: 0.3rem;
+  margin-left: $offset;
+  margin-right: 7rem;
+}
 </style>
 
 <script>
@@ -69,7 +95,8 @@
   data() {
     return {
       logs: null,
-      currentLog: null
+      currentLog: null,
+      refreshed: null
     };
   },
   methods: {
@@ -80,6 +107,7 @@
         .then(response => {
           this.logs = response.data.content;
           this.currentLog = type;
+          this.refreshed = new Date().toLocaleString();
         })
         .catch(error => {
           console.log(error);