♻️ : create vue component to manage cli badge

src/main/resources/templates/job.html

@@ -41,7 +41,7 @@
             <div class="block">
                 <div class="block_head_flex">
                     <h2>Stack {{stack.name}}</h2>
-                    <img :src="'https://img.shields.io/badge/terraform-' + job.cliVersion + '-blue.svg?style=for-the-badge'" :alt="job.cliVersion" :title="job.cliVersion" />
+                    <cli-badge :cli-version="job.cliVersion" :badge-style="'for-the-badge'"></cli-badge>
                 </div>
                 <div class="block_content">
 
@@ -72,6 +72,8 @@ <h2>Stack {{stack.name}}</h2>
 
 <script src="/webjars/vue/2.5.16/vue.js"></script>
 
+<div th:replace="vue_templates/cli-badge"></div>
+
 <script src="/js/ansi_to_html.js"></script>
 
 <script th:inline="javascript" type="application/ecmascript">

src/main/resources/templates/vue_templates/cli-badge.vue

@@ -0,0 +1,11 @@
+<template id="cli-badge">
+    <img :src="'https://img.shields.io/badge/terraform-' + cliVersion + '-blue.svg?style=' + badgeStyle"
+         :alt="cliVersion" :title="cliVersion"/>
+</template>
+
+<script>
+    Vue.component('cli-badge', {
+        template: '#cli-badge',
+        props: ['cliVersion', 'badgeStyle'],
+    });
+</script>