modal for UI confirmations

frontend/config/webpack.config.prod.js

@@ -74,7 +74,7 @@ const webpackConfig = merge(commonConfig, {
             threshold: 10240,
             minRatio: 0.8
         }),
-        new webpack.HashedModuleIdsPlugin(),
+        // new webpack.HashedModuleIdsPlugin(),
         new HtmlPlugin({
             template: 'public/base.gohtml',
             filename: 'base.gohtml',

frontend/src/assets/scss/layout.scss

@@ -14,6 +14,34 @@ A:HOVER {
   color: lighten($text-color, 12%) !important;
 }
 
+.modal-backdrop {
+  top: 0;
+  left: 0;
+  position: absolute;
+  display: block;
+  z-index: 10000;
+  width: 100%;
+  height: 100%;
+  background-color: #00000073;
+}
+
+.modal {
+  z-index: 999999 !important;
+  display: block;
+}
+
+.modal-dialog {
+  top: 20%;
+}
+
+.modal-header {
+  padding: 0.5rem 1rem;
+}
+
+.modal-footer {
+  padding: 0.5rem 1rem;
+}
+
 .text-muted {
   color: lighten($text-color, 30%) !important;
 }

frontend/src/components/Dashboard/DashboardMessages.vue

@@ -81,13 +81,21 @@
     serviceName (service) {
       return service.name || "Global Message"
     },
+    async delete(m) {
+      await Api.message_delete(m.id)
+      const messages = await Api.messages()
+      this.$store.commit('setMessages', messages)
+    },
     async deleteMessage(m) {
-      let c = confirm(`Are you sure you want to delete message '${m.title}'?`)
+      const modal = {
-      if (c) {
+        visible: true,
-        await Api.message_delete(m.id)
+        title: "Delete Announcement",
-        const messages = await Api.messages()
+        body: `Are you sure you want to delete Announcement ${m.title}?`,
-        this.$store.commit('setMessages', messages)
+        btnColor: "btn-danger",
+        btnText: "Delete Announcement",
+        func: () => this.delete(m),
       }
+      this.$store.commit("setModal", modal)
     }
   }
 }

frontend/src/components/Dashboard/DashboardServices.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="col-12">
+
         <div class="card contain-card mb-4">
             <div class="card-header">{{ $t('top_nav.services') }}
                 <router-link v-if="$store.state.admin" to="/dashboard/create_service" class="btn btn-sm btn-success float-right">
@@ -67,6 +68,7 @@
 </template>
 
 <script>
+  const Modal = () => import(/* webpackChunkName: "dashboard" */ "@/components/Elements/Modal")
   const FormGroup = () => import(/* webpackChunkName: "dashboard" */ '@/forms/Group')
   const ToggleSwitch = () => import(/* webpackChunkName: "dashboard" */ '@/forms/ToggleSwitch')
   const ServicesList = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/ServicesList')
@@ -76,6 +78,7 @@
   export default {
       name: 'DashboardServices',
       components: {
+        Modal,
           ServicesList,
           ToggleSwitch,
           FormGroup,
@@ -112,13 +115,24 @@
               this.group = g
               this.edit = !mode
           },
+        confirm_delete(service) {
+
+        },
+        async delete(g) {
+          await Api.group_delete(g.id)
+          const groups = await Api.groups()
+          this.$store.commit('setGroups', groups)
+        },
           async deleteGroup(g) {
-              let c = confirm(`Are you sure you want to delete '${g.name}'?`)
+            const modal = {
-              if (c) {
+              visible: true,
-                  await Api.group_delete(g.id)
+              title: "Delete Group",
-                  const groups = await Api.groups()
+              body: `Are you sure you want to delete group ${g.name}? All services attached will be removed from this group.`,
-                  this.$store.commit('setGroups', groups)
+              btnColor: "btn-danger",
-              }
+              btnText: "Delete Group",
+              func: () => this.delete(g),
+            }
+            this.$store.commit("setModal", modal)
           }
       }
   }

frontend/src/components/Dashboard/DashboardUsers.vue

@@ -74,13 +74,21 @@
       this.user = u
       this.edit = !mode
     },
+    async delete(u) {
+      await Api.user_delete(u.id)
+      const users = await Api.users()
+      this.$store.commit('setUsers', users)
+    },
     async deleteUser(u) {
-      let c = confirm(`Are you sure you want to delete user '${u.username}'?`)
+      const modal = {
-      if (c) {
+        visible: true,
-        await Api.user_delete(u.id)
+        title: "Delete User",
-        const users = await Api.users()
+        body: `Are you sure you want to delete user ${u.username}?`,
-        this.$store.commit('setUsers', users)
+        btnColor: "btn-danger",
+        btnText: "Delete User",
+        func: () => this.delete(u),
       }
+      this.$store.commit("setModal", modal)
     }
   }
 }

frontend/src/components/Dashboard/Failures.vue

@@ -151,14 +151,22 @@ export default {
         await this.gotoPage(1)
       },
     methods: {
+      async delete() {
+        await Api.service_failures_delete(this.service)
+        this.service = await Api.service(this.service.id)
+        this.total = 0
+        await this.load()
+      },
       async deleteFailures() {
-        const c = confirm('Are you sure you want to delete all failures?')
+        const modal = {
-        if (c) {
+          visible: true,
-          await Api.service_failures_delete(this.service)
+          title: "Delete All Failures",
-          this.service = await Api.service(this.service.id)
+          body: `Are you sure you want to delete all Failures for service ${this.service.title}?`,
-          this.total = 0
+          btnColor: "btn-danger",
-          await this.load()
+          btnText: "Delete Failures",
+          func: () => this.delete(),
         }
+        this.$store.commit("setModal", modal)
       },
       async gotoPage(page) {
         this.page = page;

frontend/src/components/Dashboard/Incidents.vue

@@ -80,15 +80,23 @@ const FormIncidentUpdates = () => import(/* webpackChunkName: "dashboard" */ '@/
 
     methods: {
 
+      async delete(i) {
+        this.res = await Api.incident_delete(i)
+        if (this.res.status === "success") {
+          this.incidents = this.incidents.filter(obj => obj.id !== i.id);
+          //await this.loadIncidents()
+        }
+      },
         async deleteIncident(incident) {
-            let c = confirm(`Are you sure you want to delete '${incident.title}'?`)
+          const modal = {
-            if (c) {
+            visible: true,
-                this.res = await Api.incident_delete(incident)
+            title: "Delete Incident",
-                if (this.res.status === "success") {
+            body: `Are you sure you want to delete Incident ${incident.title}?`,
-                    this.incidents = this.incidents.filter(obj => obj.id !== incident.id); // this is better in terms of not having to querry the db to get a fresh copy of all updates
+            btnColor: "btn-danger",
-                    //await this.loadIncidents()
+            btnText: "Delete Incident",
-                } // TODO: further error checking here... maybe alert user it failed with modal or so
+            func: () => this.delete(incident),
-            }
+          }
+          this.$store.commit("setModal", modal)
         },
 
         async createIncident() {

frontend/src/components/Dashboard/ServicesList.vue

@@ -72,12 +72,14 @@
 <script>
 import Api from "../../API";
 import ServiceSparkList from "@/components/Service/ServiceSparkList";
+import Modal from "@/components/Elements/Modal";
 const draggable = () => import(/* webpackChunkName: "dashboard" */ 'vuedraggable')
 const ToggleSwitch = () => import(/* webpackChunkName: "dashboard" */ '../../forms/ToggleSwitch');
 
 export default {
       name: 'ServicesList',
     components: {
+      Modal,
       ServiceSparkList,
         ToggleSwitch,
           draggable
@@ -159,14 +161,25 @@ export default {
               await Api.services_reorder(data)
               await this.update()
           },
+        tester(s) {
+          console.log(s)
+        },
+        async delete(s) {
+          this.loading = true
+          await Api.service_delete(s.id)
+          await this.update()
+          this.loading = false
+        },
           async deleteService(s) {
-              let c = confirm(`Are you sure you want to delete '${s.name}'?`)
+            const modal = {
-              if (c) {
+              visible: true,
-                this.loading = true
+              title: "Delete Service",
-                  await Api.service_delete(s.id)
+              body: `Are you sure you want to delete service ${s.name}? This will also delete all failures, checkins, and incidents for this service.`,
-                  await this.update()
+              btnColor: "btn-danger",
-                this.loading = false
+              btnText: "Delete Service",
-              }
+              func: () => this.delete(s),
+            }
+            this.$store.commit("setModal", modal)
           },
           serviceGroup(s) {
               let group = this.$store.getters.groupById(s.group_id)

frontend/src/components/Dashboard/ThemeEditor.vue

@@ -144,14 +144,22 @@ import('codemirror/mode/css/css.js')
               this.pending = false
             await this.fetchTheme()
           },
+        async delete() {
+          this.pending = true
+          const resp = await Api.theme_generate(false)
+          await this.fetchTheme()
+          this.pending = false
+        },
           async deleteAssets() {
-              this.pending = true
+            const modal = {
-              let c = confirm('Are you sure you want to delete all local assets?')
+              visible: true,
-              if (c) {
+              title: "Delete Local Assets",
-                  const resp = await Api.theme_generate(false)
+              body: `Are you sure you want to delete all local assets?`,
-                  await this.fetchTheme()
+              btnColor: "btn-danger",
-              }
+              btnText: "Delete",
-              this.pending = false
+              func: () => this.delete(),
+            }
+            this.$store.commit("setModal", modal)
           },
           async saveAssets() {
               this.pending = true

frontend/src/components/Elements/Modal.vue

@@ -0,0 +1,50 @@
+<template>
+    <div v-if="modal.visible" class="modal d-block" tabindex="-1">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">{{modal.title}}</h5>
+          </div>
+          <div class="modal-body">
+            <p>{{modal.body}}</p>
+          </div>
+          <div class="modal-footer">
+            <button @click.prevent="close" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            <button @click.prevent="runFunc" type="button" :class="`btn ${modal.btnColor}`">{{modal.btnText}}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+name: "Modal",
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+    modal() {
+     return this.$store.getters.modal
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    runFunc() {
+      this.$store.getters.modal.func()
+      this.close()
+    },
+    close() {
+      this.$store.commit("setModal", {visible: false})
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/forms/Notifier.vue

@@ -149,11 +149,11 @@
 
                 <div v-for="(log, i) in notifier.logs.reverse()" class="alert" :class="{'alert-danger': log.error, 'alert-dark': !log.success && !log.error, 'alert-success': log.success && !log.error}">
                         <span class="d-block">
-                            Service '{{$store.getters.serviceById(log.service).name}}'
+                            Service {{log.service}}
                             {{log.success ? "Success Triggered" : "Failure Triggered"}}
                         </span>
 
-                    <div class="bg-white p-3 small mt-2">
+                    <div v-if="log.message !== ''" class="bg-white p-3 small mt-2">
                         <code>{{log.message}}</code>
                     </div>
 

frontend/src/pages/Dashboard.vue

@@ -1,16 +1,20 @@
 <template>
     <div class="container col-md-7 col-sm-12 mt-md-5">
+      <div v-if="modal" class="modal-backdrop"></div>
+      <Modal/>
         <TopNav :admin="admin"/>
         <router-view :admin="admin"/>
     </div>
 </template>
 
 <script>
+  import Modal from "@/components/Elements/Modal";
   const TopNav = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/TopNav')
 
   export default {
   name: 'Dashboard',
   components: {
+    Modal,
     TopNav,
   },
   data () {
@@ -20,6 +24,9 @@
       }
   },
     computed: {
+      modal() {
+        return this.$store.getters.modal.visible
+      },
       admin() {
         return this.$store.getters.admin
       },

frontend/src/pages/Settings.vue

@@ -189,15 +189,23 @@
           liClass(id) {
               return this.tab === id
           },
+        async renew() {
+          await Api.renewApiKeys()
+          const core = await Api.core()
+          this.$store.commit('setCore', core)
+          this.core = core
+          await this.logout()
+        },
         async renewApiKeys() {
-          let r = confirm("Are you sure you want to reset the API keys? You will be logged out.");
+          const modal = {
-          if (r === true) {
+            visible: true,
-            await Api.renewApiKeys()
+            title: "Reset API Key",
-            const core = await Api.core()
+            body: `Are you sure you want to reset the API keys? You will be logged out.`,
-            this.$store.commit('setCore', core)
+            btnColor: "btn-danger",
-            this.core = core
+            btnText: "Reset",
-            await this.logout()
+            func: () => this.renew(),
           }
+          this.$store.commit("setModal", modal)
         },
         async logout () {
           await Api.logout()

frontend/src/store.js

@@ -31,7 +31,15 @@ export default new Vuex.Store({
     checkins: [],
     admin: false,
     user: false,
-    loggedIn: false
+    loggedIn: false,
+    modal: {
+      visible: false,
+      title: "Modal Header",
+      body: "This is the content for the modal body",
+      btnText: "Save Changes",
+      btnColor: "btn-primary",
+      func: null,
+    }
   },
   getters: {
     hasAllData: state => state.hasAllData,
@@ -49,6 +57,7 @@ export default new Vuex.Store({
     notifiers: state => state.notifiers,
     checkins: state => state.checkins,
     loggedIn: state => state.loggedIn,
+    modal: state => state.modal,
 
     isAdmin: state => state.admin,
     isUser: state => state.user,
@@ -140,6 +149,9 @@ export default new Vuex.Store({
     setOAuth(state, oauth) {
       state.oauth = oauth
     },
+    setModal(state, modal) {
+      state.modal = modal
+    },
   },
   actions: {
     async getAllServices(context) {