[INTERNAL] Reorganize Vue templates #440

promgen/locale/ja/LC_MESSAGES/django.po

@@ -62,7 +62,7 @@ msgstr "Projectを削除"
 #: templates/promgen/project_detail_hosts.html:21
 #: templates/promgen/service_block.html:20
 #: templates/promgen/service_block.html:105
-#: templates/promgen/silence_form.html:28
+#: templates/promgen/vue/silence_form.html:28
 msgid "Silence"
 msgstr "Silence"
 

promgen/static/js/promgen.vue.js

@@ -188,6 +188,7 @@ Vue.filter("time", function (value, fmtstr = "yyyy-MM-dd HH:mm:ss") {
 });
 
 Vue.component("promql-query", {
+    delimiters: ['[[', ']]'],
     props: ["href", "query", "max"],
     data: function () {
         return {
@@ -206,11 +207,7 @@ Vue.component("promql-query", {
             return "label label-success";
         },
     },
-    template: `
-    <span style="display:none" :title="load|percent" :class="classes">
-        {{count|localize}} <slot></slot>
-    </span>
-    `,
+    template: '#promql-query-template',
     mounted() {
         var this_ = this;
         var url = new URL(this.href);
@@ -229,21 +226,24 @@ Vue.component("promql-query", {
 });
 
 Vue.component('bootstrap-panel', {
+    delimiters: ['[[', ']]'],
     props: ['heading'],
-    template: '<div class="panel"><div class="panel-heading">{{heading}}</div><div class="panel-body"><slot /></div></div>'
-})
+    template: '#bootstrap-panel-template',
+});
 
 const ExporterResult = Vue.component('exporter-result', {
+    delimiters: ['[[', ']]'],
     props: ['results'],
-    template: '<bootstrap-panel class="panel-info" heading="Results"><table class="table"><tr v-for="(val, key, index) in results"><td>{{key}}</td><td>{{val}}</td></tr></table></bootstrap-panel>'
-})
+    template: '#exporter-result-template',
+});
 
 const ExporterTest = Vue.component('exporter-test', {
     // Exporter Test button for Forms
     // Acts like a regular form submit button, but hijacks the button
     // click and submits it to an alternate URL for testing
+    delimiters: ['[[', ']]'],
     props: ['href', 'target'],
-    template: '<button @click.prevent="onTestSubmit"><slot /></button>',
+    template: '#exporter-test-template',
     methods: {
         onTestSubmit: function (event) {
             // Find the parent form our button belongs to so that we can
@@ -262,4 +262,4 @@ const ExporterTest = Vue.component('exporter-test', {
                 .catch(error => alert(error))
         }
     }
-})
+});

promgen/templates/base.html

@@ -36,8 +36,20 @@
   <script src="{% static 'js/linkify.min.js' %}"></script>
   <script src="{% static 'js/linkify-string.min.js' %}"></script>
   <script src="{% static 'js/vue.min.js' %}"></script>
+  <script type="text/x-template" id="bootstrap-panel-template">
+    {% include 'promgen/vue/bootstrap_panel.html' %}
+  </script>
+  <script type="text/x-template" id="exporter-result-template">
+    {% include 'promgen/vue/exporter_result.html' %}
+  </script>
+  <script type="text/x-template" id="exporter-test-template">
+    {% include 'promgen/vue/exporter_test.html' %}
+  </script>
+  <script type="text/x-template" id="promql-query-template">
+    {% include 'promgen/vue/promql_query.html' %}
+  </script>
   <script type="text/x-template" id="silence-form-template">
-    {% include 'promgen/silence_form.html' %}
+    {% include 'promgen/vue/silence_form.html' %}
   </script>
   <script src="{% static 'js/promgen.js' %}"></script>
   <script src="{% static 'js/promgen.vue.js' %}"></script>

promgen/templates/promgen/vue/bootstrap_panel.html

@@ -0,0 +1,4 @@
+<div class="panel">
+  <div class="panel-heading">[[ heading ]]</div>
+  <div class="panel-body"><slot /></div>
+</div>

promgen/templates/promgen/vue/exporter_result.html

@@ -0,0 +1,8 @@
+<bootstrap-panel class="panel-info" heading="Results">
+  <table class="table">
+    <tr v-for="(val, key, index) in results">
+      <td>[[ key ]]</td>
+      <td>[[ val ]]</td>
+    </tr>
+  </table>
+</bootstrap-panel>

promgen/templates/promgen/vue/exporter_test.html

@@ -0,0 +1 @@
+<button @click.prevent="onTestSubmit"><slot /></button>

promgen/templates/promgen/vue/promql_query.html

@@ -0,0 +1,3 @@
+<span style="display: none" :title="load | percent" :class="classes">
+  [[ count | localize ]] <slot></slot>
+</span>