+ 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>