✨ : add vue component to display logs

src/main/resources/static/css/style.css

@@ -3469,15 +3469,6 @@ table.projects tr td:first-child {
     28. Custom style for stack logs
 -------------------------------------------------------------------*/
 
-pre.background_black, pre.background_black code {
-    color: white;
-    background: black;
-}
-
-pre.background_black code b {
-    font-weight: bold;
-}
-
 .form-check{
     margin-bottom: 0.5rem;
 }

src/main/resources/templates/job.html

@@ -53,7 +53,7 @@ <h2>Stack {{stack.name}}</h2>
                         Your deployment has failed ! <i class="far fa-frown"></i>
                     </div>
 
-                    <pre class="background_black"><code v-html="job.logs"></code></pre>
+                    <console :id="'job-logs'" :css-style="'max-height: 500px'" :logs="job.logs"></console>
                 </div>
             </div>
         </div>
@@ -73,17 +73,18 @@ <h2>Stack {{stack.name}}</h2>
 <script src="/webjars/vue/2.5.16/vue.js"></script>
 <script src="/webjars/bootstrap-vue/2.0.0-rc.26/dist/bootstrap-vue.js"></script>
 
+<div th:replace="helpers/messenger"></div>
+
 <div th:replace="vue_templates/cli-badge"></div>
 <div th:replace="vue_templates/breadcrumb"></div>
+<div th:replace="vue_templates/console"></div>
 
 <script src="/js/ansi_to_html.js"></script>
 
 <script th:inline="javascript" type="application/ecmascript">
     const stackId = [[${stackId}]];
     const jobId = [[${jobId}]];
 
-    let logs = "";
-
     let stack;
     let job;
     let vueData = {};
@@ -115,18 +116,14 @@ <h2>Stack {{stack.name}}</h2>
             .then(data => {
                 job = data;
                 vueData.job = job;
-
-                // applying html colors instead of ANSI streams
-                job.logs= new Filter().toHtml(job.logs)
-
                 if(job.status !== "RUNNING"){
                     clearInterval(interval);
                 }
             });
     }
 
     function initFront(){
-        const vue = new Vue({
+        new Vue({
             el: "#app",
             data: vueData,
             template: "#template"

src/main/resources/templates/vue_templates/console.vue

@@ -0,0 +1,106 @@
+<template id="console-template">
+    <div class="console">
+        <div class="console_actions">
+            <a href="#" class="btn" @click="copyToClipboard"><i class="far fa-copy"></i> copy raw</a>
+            <a href="#" class="btn" @click="goToTop"><i class="fas fa-angle-double-up"></i> top</a>
+            <a href="#" class="btn" @click="goToBottom"><i class="fas fa-angle-double-down"></i> bottom</a>
+        </div>
+        <div :id="id" class="console_body" :style="cssStyle">
+            <pre><code v-html="content"></code></pre>
+        </div>
+    </div>
+</template>
+
+<script>
+    Vue.component('console', {
+        template: '#console-template',
+        data: () => ({
+            content: '',
+        }),
+        props: ['id', 'cssStyle', 'logs'],
+        watch: {
+            logs: {
+                immediate: true,
+                handler(newValue) {
+                    // applying html colors instead of ANSI streams
+                    this.content = new Filter().toHtml(newValue);
+                }
+            }
+        },
+        mounted: function () {
+            this.goToBottom();
+        },
+        updated: function () {
+            this.goToBottom();
+        },
+        methods: {
+            goToTop: function () {
+                $(`#${this.id}`).animate({scrollTop: 0}, 500);
+            },
+            goToBottom: function () {
+                const consoleElt = $(`#${this.id}`);
+                consoleElt.animate({scrollTop: consoleElt[0].scrollHeight}, 500);
+            },
+            copyToClipboard: function () {
+                const temp = $("<textarea>");
+                $("body").append(temp);
+                temp.val(this.logs).select();
+                document.execCommand("copy");
+                temp.remove();
+
+                Messenger().post({
+                    id: `message-${this.id}`,
+                    hideAfter: 2,
+                    type: "info",
+                    message: "Logs copied on clipboard."
+                });
+            },
+        }
+    });
+</script>
+
+<style scoped>
+    .console_actions {
+        background: #444444;
+        display: flex;
+        justify-content: flex-end;
+        padding: 7px 15px;
+    }
+
+    .console_actions .btn {
+        border: 1px solid #f1f1f1;
+        color: #f1f1f1;
+        font-size: 12px;
+        margin-left: 10px;
+    }
+
+    .console_actions .btn:hover {
+        background-color: #999a98;
+    }
+
+    .console_body {
+        overflow-y: auto;
+        padding: 1rem;
+    }
+
+    /*for padding-bottom with overflow*/
+    .console_body:after {
+        content: '';
+        display: block;
+        height: 1rem;
+        width: 100%;
+    }
+
+    .console_body, pre, code {
+        color: #f1f1f1;
+        background: #222222;
+    }
+
+    pre {
+        margin-bottom: 0;
+    }
+
+    code b {
+        font-weight: bold;
+    }
+</style>