+ apache restart monitor

src/components/ApacheRestartMonitor.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    v-if="isApacheNeedRestart || isApacheRestartPending"
+    class="
+      container
+      d-flex
+      flex-row
+      rounded
+      bg-warning bg-gradient
+      shadow
+      p-3
+      mt-lg-5
+      w-50
+    "
+  >
+    <span class="fw-bold me-2">Apache: </span>
+    <span
+      v-if="isApacheNeedRestart && !isApacheRestartPending"
+      class="badge rounded-pill bg-danger m-auto p-auto"
+      >Нужен перезапуск</span
+    >
+    <span
+      v-if="isApacheRestartPending"
+      class="badge rounded-pill bg-success m-auto p-auto"
+      >Перезапуск</span
+    >
+    <span class="flex-fill"></span>
+    <button
+      v-if="isApacheRestartPending"
+      type="button"
+      class="btn btn-success btn-sm bg-gradient align-self-end shadow"
+      @click.prevent="fetchApacheRestartFlag"
+      title="Обновить статус"
+      v-tooltip:top
+    >
+      Обновить
+    </button>
+    <button
+      v-if="isApacheNeedRestart && !isApacheRestartPending"
+      type="button"
+      class="btn btn-danger btn-sm bg-gradient align-self-end shadow"
+      @click.prevent="updateApacheRestartFlag"
+      title="Перезапустить Apache"
+      v-tooltip:top
+    >
+      Перезапустить
+    </button>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from "vuex";
+
+export default {
+  computed: mapGetters([
+    "isApacheNeedRestart",
+    "isApacheRestartPending",
+    "isApacheRestartFlagSent",
+  ]),
+  methods: mapActions(["updateApacheRestartFlag", "fetchApacheRestartFlag"]),
+  async updated() {
+    this.fetchApacheRestartFlag();
+  },
+};
+</script>

src/store/index.js

@@ -1,9 +1,11 @@
 import { createStore } from "vuex";
 
 import infobases from "@/store/modules/infobases.js";
+import apache_restart from "@/store/modules/apache_restart.js";
 
 export default createStore({
   modules: {
     infobases,
+    apache_restart,
   },
 });

src/store/modules/apache_restart.js

@@ -4,19 +4,24 @@ import config from "@/config.js";
 
 const api_base = config.api;
 
+const pass = (some) => some
+
 export default {
   state: {
     apache_need_restart: false,
     restart_flag: false,
+    flag_sent: false,
   },
   mutations: {
     setApacheNeedRestart(state) {
       state.apache_need_restart = true;
-      console.log("restart need");
     },
     setApacheRestartFlag(state, flag) {
       state.restart_flag = flag;
     },
+    setApacheRestartFlagSent(state, flag) {
+      state.flag_sent = flag;
+    },
   },
   actions: {
     async fetchApacheRestartFlag(ctx) {
@@ -25,6 +30,10 @@ export default {
         ctx.commit("setApacheRestartFlag", true);
       } catch (err) {
         ctx.commit("setApacheRestartFlag", false);
+        if (ctx.getters.isApacheRestartFlagSent) {
+          ctx.commit("setApacheNeedRestart", false);
+          ctx.commit("setApacheRestartFlagSent", false);
+        }
       }
     },
     async updateApacheRestartFlag(ctx) {
@@ -37,8 +46,9 @@ export default {
       try {
         await axios.put(`${api_base}/apache-restart`);
         ctx.commit("setApacheRestartFlag", true);
+        ctx.commit("setApacheRestartFlagSent", true);
       } catch(err) {
-        ctx.commit("setApacheRestartFlag", false);
+        pass()
       }
     },
   },
@@ -49,5 +59,8 @@ export default {
     isApacheRestartPending(state) {
       return state.restart_flag;
     },
+    isApacheRestartFlagSent(state) {
+      return state.flag_sent;
+    },
   },
 };

src/store/modules/infobases.js

@@ -63,7 +63,7 @@ export default {
           state.infobases.splice(idx, 1);
           setInfobaseLock(state, { name, lock: false });
         } else {
-          infobase.publicated = true;
+          //infobase.publicated = true; // debug
           state.infobases[idx] = infobase;
         }
       }

src/views/Home.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="home">
-    <InfobaseList msg="Welcome to Your Vue.js App" />
+    <InfobaseList />
+    <ApacheRestartMonitor />
   </div>
 </template>
 
@@ -8,11 +9,13 @@
 // @ is an alias to /src
 //import HelloWorld from "@/components/HelloWorld.vue";
 import InfobaseList from "@/components/InfobaseList.vue";
+import ApacheRestartMonitor from "@/components/ApacheRestartMonitor.vue";
 
 export default {
   name: "Home",
   components: {
     InfobaseList,
+    ApacheRestartMonitor,
   },
 };
 </script>