implement silence-modal

Bump docker/build-push-action from 5.3.0 to 6.1.0 Bumps [docker/build-push-action](https://github.com/docker/build-push-action) from 5.3.0 to 6.1.0. - [Release notes](https://github.com/docker/build-push-action/releases) - [Commits](docker/build-push-action@v5.3.0...v6.1.0) --- updated-dependencies: - dependency-name: docker/build-push-action dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Bump actions/checkout from 4.1.6 to 4.1.7 Bumps [actions/checkout](https://github.com/actions/checkout) from 4.1.6 to 4.1.7. - [Release notes](https://github.com/actions/checkout/releases) - [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md) - [Commits](actions/checkout@v4.1.6...v4.1.7) --- updated-dependencies: - dependency-name: actions/checkout dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> update flow according to comments Bump docker/build-push-action from 5.3.0 to 6.1.0 Bumps [docker/build-push-action](https://github.com/docker/build-push-action) from 5.3.0 to 6.1.0. - [Release notes](https://github.com/docker/build-push-action/releases) - [Commits](docker/build-push-action@v5.3.0...v6.1.0) --- updated-dependencies: - dependency-name: docker/build-push-action dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Bump actions/checkout from 4.1.6 to 4.1.7 Bumps [actions/checkout](https://github.com/actions/checkout) from 4.1.6 to 4.1.7. - [Release notes](https://github.com/actions/checkout/releases) - [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md) - [Commits](actions/checkout@v4.1.6...v4.1.7) --- updated-dependencies: - dependency-name: actions/checkout dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]>
line · Jul 2, 2024 · 0cd465c · 0cd465c
1 parent 3098e89
commit 0cd465c
Show file tree

Hide file tree

Showing 5 changed files with 236 additions and 58 deletions.
diff --git a/promgen/static/css/promgen.css b/promgen/static/css/promgen.css
@@ -49,3 +49,66 @@ a[rel]:after {
   word-break: break-word;
   font-family: monospace;
 }
+
+/* silence-modal */
+.promgen-labels-list {
+  padding: 10px 5px;
+  min-height: 116px;
+  border-radius: 8px 0px 0px 0px;
+  margin-left: 0px;
+  background: #F9F9F9;
+}
+
+.promgen-label-target {
+  height: 32px;
+  border-radius: 4px;
+  color: #000000;
+  border: 0.5px solid #3269BC;
+  background: #F1F6FF;
+  padding: 0px 10px;
+  margin-bottom: 10px;
+}
+
+.promgen-label-target:hover {
+  text-decoration: none !important;
+  color: #000000;
+}
+
+.promgen-label-close {
+  font-size: 20px;
+  margin-left: 10px;
+  color: #aaaaaa;
+  cursor: pointer;
+}
+
+/* Margin Top */
+.mt-0 { margin-top: 0 !important; }
+.mt-1 { margin-top: 0.25rem !important; }
+.mt-2 { margin-top: 0.5rem !important; }
+.mt-3 { margin-top: 1rem !important; }
+.mt-4 { margin-top: 1.5rem !important; }
+.mt-5 { margin-top: 3rem !important; }
+
+/* Margin Bottom */
+.mb-0 { margin-bottom: 0 !important; }
+.mb-1 { margin-bottom: 0.25rem !important; }
+.mb-2 { margin-bottom: 0.5rem !important; }
+.mb-3 { margin-bottom: 1rem !important; }
+.mb-4 { margin-bottom: 1.5rem !important; }
+.mb-5 { margin-bottom: 3rem !important; }
+
+/* Margin Left (Bootstrap 4) */
+.ml-0 { margin-left: 0 !important; }
+.ml-1 { margin-left: 0.25rem !important; }
+.ml-2 { margin-left: 0.5rem !important; }
+.ml-3 { margin-left: 1rem !important; }
+.ml-4 { margin-left: 1.5rem !important; }
+.ml-5 { margin-left: 3rem !important; }
+
+/* Margin Right (Bootstrap 4) */
+.mr-0 { margin-right: 0 !important; }
+.mr-1 { margin-right: 0.25rem !important; }
+.mr-2 { margin-right: 0.5rem !important; }
+.mr-3 { margin-right: 1rem !important; }
+.mr-4 { margin-right: 1.5rem !important; }
+.mr-5 { margin-right: 3rem !important; }
diff --git a/promgen/static/js/promgen.vue.js b/promgen/static/js/promgen.vue.js
@@ -25,15 +25,18 @@ const silenceStore = Vue.reactive({
         show: false,
         labels: {}
     },
-    showForm() {
-        this.state.show = true;
-    },
     setLabels(labels) {
         this.state.labels = { ...labels };
     },
     addLabel(label, value) {
         this.state.labels[label] = value;
-    }
+    },
+    showModal() {
+        this.state.show = true;
+    },
+    hideModal() {
+        this.state.show = false;
+    },
 });
 
 const exporterTestResultStore = Vue.reactive({
@@ -67,16 +70,14 @@ const app = Vue.createApp({
         },
         setSilenceLabels(labels) {
             silenceStore.setLabels(labels);
-            silenceStore.showForm();
-            scroll(0, 0);
+            silenceStore.showModal();
         },
         setSilenceDataset(event) {
             this.setSilenceLabels(event.target.dataset);
         },
         addSilenceLabel(label, value) {
             silenceStore.addLabel(label, value);
-            silenceStore.showForm();
-            scroll(0, 0);
+            silenceStore.showModal();
         },
         silenceSelectedHosts(event) {
             this.setSilenceLabels(event.target.dataset);
@@ -116,7 +117,7 @@ const app = Vue.createApp({
             // and set the target list
             let tgt = document.getElementById(target);
             tgt.setAttribute('list', dst + '.' + src);
-        }
+        },
     },
     computed: {
         activeServiceAlerts: function () {
@@ -149,21 +150,37 @@ const app = Vue.createApp({
 
 app.config.compilerOptions.whitespace = "preserve";
 
-app.component('silence-form', {
-    template: '#silence-form-template',
+app.component('silence-modal', {
+    template: '#silence-modal-template',
     delimiters: ['[[', ']]'],
     data: () => ({
         state: silenceStore.state,
         form: {}
     }),
+    computed: {
+        globalMessages() {
+            return globalStore.state.messages;
+        },
+    },
     methods: {
+        addLabel() {
+            if (this.form.label && this.form.value) {
+                silenceStore.addLabel(this.form.label, this.form.value);
+                this.form.label = '';
+                this.form.value = '';
+            }
+        },
         removeLabel(label) {
             delete this.state.labels[label];
         },
         submit() {
             const body = JSON.stringify({
                 labels: this.state.labels,
-                ...this.form
+                startsAt: this.form.startsAt,
+                endsAt: this.form.endsAt,
+                duration: this.form.duration,
+                createdBy: this.form.createdBy,
+                comment: this.form.comment
             });
 
             fetch('/proxy/v1/silences', { method: 'POST', body })
@@ -180,7 +197,39 @@ app.component('silence-form', {
                     }
                 });
         },
-    }
+        hideModal() {
+            const modal = $('#silenceModal');
+            if (modal.length) {
+                globalStore.setMessages([]);
+                this.form = {};
+                this.state = silenceStore.state;
+                modal.modal('hide');
+            }
+        },
+        showModal() {
+            const modal = $('#silenceModal');
+            if (modal.length) {
+                // Detect when the modal is closed, and update the state accordingly. This is
+                // necessary in case the user closes the modal by clicking outside of it, instead of
+                // using the close button.
+                //
+                // https://getbootstrap.com/docs/3.3/javascript/#modals-events
+                modal.on('hidden.bs.modal', function (e) {
+                    silenceStore.hideModal();
+                });
+                modal.modal('show');
+            }
+        },
+    },
+    watch: {
+        "state.show"(val) {
+            if (val) {
+                this.showModal();
+            } else {
+                this.hideModal();
+            }
+        },
+    },
 });
 
 app.component("promql-query", {

diff --git a/promgen/templates/base.html b/promgen/templates/base.html
@@ -23,7 +23,7 @@
     {% endblock %}
     <div class="container">
       {% include 'promgen/global_messages.html' %}
-      <silence-form></silence-form>
+      <silence-modal></silence-modal>
       {% include 'promgen/global_alerts.html' %}
       {% include 'promgen/global_silences.html' %}
       {% block content %}{% endblock %}
@@ -52,8 +52,8 @@
   <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/vue/silence_form.html' %}
+  <script type="text/x-template" id="silence-modal-template">
+    {% include 'promgen/vue/silence_modal.html' %}
   </script>
   <script src="{% static 'js/promgen.js' %}"></script>
   <script src="{% static 'js/mixins.vue.js' %}"></script>

diff --git a/promgen/templates/promgen/vue/silence_form.html b/promgen/templates/promgen/vue/silence_form.html
diff --git a/promgen/templates/promgen/vue/silence_modal.html b/promgen/templates/promgen/vue/silence_modal.html
@@ -0,0 +1,108 @@
+<div id="silenceModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="silenceModalLabel">
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" @click="state.show = false" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="silenceModalLabel">New Silence</h4>
+      </div>
+      <div class="modal-body" style="padding:10px 30px;">
+
+        <div>
+          <div v-for="message in globalMessages" :key="message.id">
+            <div :class="message.class" >
+              [[ message.message ]]
+              <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            </div>
+
+          </div>
+        </div>
+
+        <form @submit.prevent="submit()">
+
+          <div class="row mb-4">
+            <div class="col-md-4">
+              <h5>
+                Start from
+              </h5>
+              <div>
+                <input v-model="form.startsAt" placeholder="2006-10-25 14:30" type='datetime-local' class="form-control" /> 
+              </div>
+            </div>
+            <div class="col-md-4">
+              <h5>
+                End
+              </h5>
+              <div>
+                <input v-model="form.endsAt" placeholder="2006-10-25 14:30" type='datetime-local' class="form-control" /> 
+              </div>
+            </div>
+            <div class="col-md-4">
+              <h5>
+                Duration
+              </h5>
+              <div>
+                <input v-model="form.duration" placeholder="1m/1h/etc" class="form-control" />
+              </div>
+            </div>           
+          </div>
+
+          <div class="row mb-4">
+            <div class="col-md-12">
+              <h5>
+                Target
+              </h5>
+              <div class="labels">
+                <ul class="list-inline promgen-labels-list">
+                  <li v-for="(value, label) in state.labels">
+                    <div class="promgen-label-target">
+                      <span>[[label]]=~[[value]]</span>
+                      <span @click="removeLabel(label)" aria-hidden="true" class="promgen-label-close">&times;</span>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <div class="row mb-4">
+            <div class="col-md-12">
+              <h5>Matcher</h5>
+              <div style="display: flex;align-items: center;">
+                <input type="text" placeholder="Label" v-model="form.label" class="form-control">
+                <input type="text" placeholder="=~" style="max-width: 50px; text-align: center;" class="form-control ml-2 mr-2"  disabled>
+                <input type="text" placeholder="Value" v-model="form.value" class="form-control">
+                <button type="button" class="btn btn-primary ml-2" @click="addLabel">&plus;</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="row mb-4">
+            <div class="col-md-6">
+              <h5>
+                Created By
+              </h5>
+              <div>
+                <input v-model="form.createdBy" class="form-control" /> 
+              </div>
+            </div>  
+          </div>
+
+          <div class="row mb-4">
+            <div class="col-md-12">
+              <h5>
+                Comment
+              </h5>
+              <div>
+                <textarea v-model="form.comment" class="form-control" rows="3"></textarea>
+              </div>
+            </div>
+          </div>
+
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-primary" @click="submit()">Create</button>
+      </div>
+    </div>
+  </div>
+</div>