From 47560ba21c70c0b9c400473ce60de4dd5858b2b6 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <dsatkuna@akamai.com>
Date: Thu, 8 Dec 2022 06:51:10 -0800
Subject: [PATCH 1/5] feature(admin(js,vue)): add system service button, add
 rsyslog system service button to syslog forwarders, fixes #6532

---
 .../new/BaseButtonSystemService.vue           | 227 ++++++++++++++++++
 .../root/src/components/new/index.js          |   2 +
 .../root/src/store/modules/cluster.js         |  93 ++++++-
 .../_components/AlertServices.vue             |  42 ++++
 .../syslogForwarders/_components/TheView.js   |  27 ++-
 .../syslogForwarders/_components/index.js     |   2 +
 .../_components/BaseSystemService.vue         | 158 ++++++++++++
 7 files changed, 537 insertions(+), 14 deletions(-)
 create mode 100644 html/pfappserver/root/src/components/new/BaseButtonSystemService.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/AlertServices.vue
 create mode 100644 html/pfappserver/root/src/views/Status/services/_components/BaseSystemService.vue

diff --git a/html/pfappserver/root/src/components/new/BaseButtonSystemService.vue b/html/pfappserver/root/src/components/new/BaseButtonSystemService.vue
new file mode 100644
index 000000000000..508992fe124a
--- /dev/null
+++ b/html/pfappserver/root/src/components/new/BaseButtonSystemService.vue
@@ -0,0 +1,227 @@
+<template>
+  <b-dropdown ref="buttonRef"
+    :disabled="isDisabled"
+    :size="size"
+    :text="service"
+    no-flip
+    variant="outline-primary"
+    v-b-tooltip.hover.top.d300 :title="tooltip"
+    v-bind="$attrs"
+  >
+    <template v-slot:button-content>
+      <div class="d-inline px-1">
+        <icon v-if="!Object.keys(servers).length" name="circle-notch" spin class="fa-overlap mr-1" />
+        <template v-else v-for="(service, server) in servers">
+          <icon v-if="service.status === 'loading'" :key="`icon-${server}`"
+            name="circle-notch" spin class="text-primary fa-overlap mr-1" />
+          <icon v-else-if="service.status === 'error'" :key="`icon-${server}`"
+            name="exclamation-triangle" class="text-danger fa-overlap mr-1" />
+          <icon v-else-if="service.isRestarting || service.isStarting || service.isStopping"  :key="`icon-${server}`"
+            class="fa-overlap mr-1">
+            <icon name="circle" class="text-white" />
+            <icon v-if="service.isRestarting"
+              name="redo" class="text-primary" scale="0.5" />
+            <icon v-else-if="service.isStarting"
+              name="play" class="text-primary" scale="0.5" />
+            <icon v-else-if="service.isStopping"
+              name="stop" class="text-primary" scale="0.5" />
+          </icon>
+          <icon v-else :key="`icon-${server}`"
+            name="circle" :class="(service.alive && service.pid) ? 'text-success' : 'text-danger'" class="fa-overlap mr-1" />
+        </template>
+        {{ service }}
+      </div>
+    </template>
+
+    <b-dropdown-group v-if="isAllowed && isCluster"
+      :header="$i18n.t('CLUSTER')">
+      <b-dropdown-item v-if="restart && cluster.hasAlive"
+        @click="doRestartAll" @click.stop="onClick" :disabled="isLoading"><icon name="redo" class="mr-1" /> {{ $t('Restart All Sequentially') }}</b-dropdown-item>
+      <b-dropdown-item v-if="start && cluster.hasDead"
+        @click="doStartAll" @click.stop="onClick" :disabled="isLoading"><icon name="play" class="mr-1" /> {{ $t('Start All Sequentially') }}</b-dropdown-item>
+      <b-dropdown-item v-if="stop && cluster.hasAlive"
+        @click="doStopAll" @click.stop="onClick" :disabled="isLoading"><icon name="stop" class="mr-1" /> {{ $t('Stop All Sequentially') }}</b-dropdown-item>
+    </b-dropdown-group>
+
+    <template v-for="(service, server) in servers">
+      <b-dropdown-divider v-if="isCluster" :key="`divider-${server}`" />
+      <b-dropdown-group :key="`group-${server}`">
+       <template v-slot:header>
+         {{ server }}
+        </template>
+        <b-dropdown-form style="width: 400px;">
+          <base-system-service :id="service.id" :server="server" v-bind="{ acl, restart, start, stop }" />
+        </b-dropdown-form>
+      </b-dropdown-group>
+    </template>
+  </b-dropdown>
+</template>
+<script>
+import BaseSystemService from '@/views/Status/services/_components/BaseSystemService'
+
+const components = {
+  BaseSystemService
+}
+
+import { computed, nextTick, ref, toRefs, watch } from '@vue/composition-api'
+import acl from '@/utils/acl'
+import i18n from '@/utils/locale'
+import { localeStrings } from '@/views/Status/services/config'
+
+const props = {
+  service: {
+    type: String
+  },
+  restart: {
+    type: Boolean
+  },
+  start: {
+    type: Boolean
+  },
+  stop: {
+    type: Boolean
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: value => ['sm', 'md', 'lg'].includes(value)
+  },
+  disabled: {
+    type: Boolean
+  },
+  acl: {
+    type: String,
+    default: 'SERVICES_READ'
+  }
+}
+
+const setup = (props, context) => {
+
+  const buttonRef = ref(null)
+
+  const onClick = event => {
+    event.stopPropagation()
+    nextTick(() => {
+      buttonRef.value.show() // keep open on click
+    })
+  }
+
+  const {
+    service,
+    disabled,
+    acl: _acl
+  } = toRefs(props)
+
+  const { root: { $store } = {}, emit } = context
+
+  const isAllowed = computed(() => {
+    if (_acl.value) {
+      const [ verb, ...nouns ] = Array.prototype.slice.call(_acl.value.toLowerCase().split('_')).reverse()
+      const noun = nouns.reverse().join('_')
+      return verb && nouns.length > 0 && acl.$can(verb, noun)
+    }
+    return true
+  })
+
+  const servers = computed(() => {
+    const { [service.value]: { servers = {} } = {} } = $store.getters['cluster/systemServicesByServer']
+    return servers
+  })
+  watch(service, () => {
+    if (isAllowed.value) {
+      $store.dispatch('cluster/getSystemServiceCluster', service.value)
+    }
+  }, { immediate: true })
+
+  const isCluster = computed(() => $store.getters['cluster/isCluster'])
+  const isLoading = computed(() => $store.getters['cluster/isLoading'])
+  const isDisabled = computed(() => disabled.value || !isAllowed.value || !Object.keys(servers.value).length)
+  const cluster = computed(() => {
+    const { [service.value]: cluster = {} } = $store.getters['cluster/systemServicesByServer']
+    return cluster
+  })
+
+  const tooltip = computed(() => {
+    switch (true) {
+      case !isAllowed.value:
+        return i18n.t('No permission, admin role {acl} required.', { acl: _acl.value })
+        //break
+
+      default:
+        return undefined
+    }
+  })
+
+  const doRestart = server => $store.dispatch('cluster/restartSystemService', { server, id: service.value }).then(() => {
+    $store.dispatch('notification/info', { url: server, message: i18n.t(localeStrings.SERVICES_RESTARTED_SUCCESS, { services: `<code>${service.value}</code>` }) })
+    emit('restart', { server, id: service.value })
+  }).catch(() => {
+    $store.dispatch('notification/danger', { url: server, message: i18n.t(localeStrings.SERVICES_RESTARTED_ERROR, { services: `<code>${service.value}</code>` }) })
+  })
+
+  const doStart = server => $store.dispatch('cluster/startSystemService', { server, id: service.value }).then(() => {
+    $store.dispatch('notification/info', { url: server, message: i18n.t(localeStrings.SERVICES_STARTED_SUCCESS, { services: `<code>${service.value}</code>` }) })
+    emit('start', { server, id: service.value })
+  }).catch(() => {
+    $store.dispatch('notification/danger', { url: server, message: i18n.t(localeStrings.SERVICES_STARTED_ERROR, { services: `<code>${service.value}</code>` }) })
+  })
+
+  const doStop = server => $store.dispatch('cluster/stopSystemService', { server, id: service.value }).then(() => {
+    $store.dispatch('notification/info', { url: server, message: i18n.t(localeStrings.SERVICES_STOPPED_SUCCESS, { services: `<code>${service.value}</code>` }) })
+    emit('stop', { server, id: service.value })
+  }).catch(() => {
+    $store.dispatch('notification/danger', { url: server, message: i18n.t(localeStrings.SERVICES_STOPPED_ERROR, { services: `<code>${service.value}</code>` }) })
+  })
+
+  const doRestartAll = () => $store.dispatch('cluster/restartSystemServiceCluster', service.value).then(() => {
+    $store.dispatch('notification/info', { url: 'CLUSTER', message: i18n.t(localeStrings.SERVICES_RESTARTED_SUCCESS, { services: `<code>${service.value}</code>` }) })
+    emit('restart', { id: service.value })
+  }).catch(() => {
+    $store.dispatch('notification/danger', { url: 'CLUSTER', message: i18n.t(localeStrings.SERVICES_RESTARTED_ERROR, { services: `<code>${service.value}</code>` }) })
+  })
+
+  const doStartAll = () => $store.dispatch('cluster/startSystemServiceCluster', service.value).then(() => {
+    $store.dispatch('notification/info', { url: 'CLUSTER', message: i18n.t(localeStrings.SERVICES_STARTED_SUCCESS, { services: `<code>${service.value}</code>` }) })
+    emit('start', { id: service.value })
+  }).catch(() => {
+    $store.dispatch('notification/danger', { url: 'CLUSTER', message: i18n.t(localeStrings.SERVICES_STARTED_ERROR, { services: `<code>${service.value}</code>` }) })
+  })
+
+  const doStopAll = () => $store.dispatch('cluster/stopSystemServiceCluster', service.value).then(() => {
+    $store.dispatch('notification/info', { url: 'CLUSTER', message: i18n.t(localeStrings.SERVICES_STOPPED_SUCCESS, { services: `<code>${service.value}</code>` }) })
+    emit('stop', { id: service.value })
+  }).catch(() => {
+    $store.dispatch('notification/danger', { url: 'CLUSTER', message: i18n.t(localeStrings.SERVICES_STOPPED_ERROR, { services: `<code>${service.value}</code>` }) })
+  })
+
+  return {
+    servers,
+
+    buttonRef,
+    onClick,
+
+    isAllowed,
+    isCluster,
+    isDisabled,
+    isLoading,
+    cluster,
+    tooltip,
+
+    doRestart,
+    doRestartAll,
+    doStart,
+    doStartAll,
+    doStop,
+    doStopAll
+  }
+}
+
+// @vue/component
+export default {
+  name: 'base-button-system-service',
+  inheritAttrs: false,
+  components,
+  props,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/components/new/index.js b/html/pfappserver/root/src/components/new/index.js
index 0b893f4359d2..e3ebc55a7a05 100644
--- a/html/pfappserver/root/src/components/new/index.js
+++ b/html/pfappserver/root/src/components/new/index.js
@@ -6,6 +6,7 @@ import BaseButtonRefresh from './BaseButtonRefresh'
 import BaseButtonSave from './BaseButtonSave'
 import BaseButtonSaveSearch from './BaseButtonSaveSearch'
 import BaseButtonService from './BaseButtonService'
+import BaseButtonSystemService from './BaseButtonSystemService'
 import BaseButtonUpload from './BaseButtonUpload'
 import BaseContainerLoading from './BaseContainerLoading'
 import BaseCsvImport from './BaseCsvImport'
@@ -150,6 +151,7 @@ export {
   BaseButtonSave,
   BaseButtonSaveSearch,
   BaseButtonService,
+  BaseButtonSystemService,
   BaseButtonUpload,
 
   // containers
diff --git a/html/pfappserver/root/src/store/modules/cluster.js b/html/pfappserver/root/src/store/modules/cluster.js
index 9839049161b3..af8f22c33b25 100644
--- a/html/pfappserver/root/src/store/modules/cluster.js
+++ b/html/pfappserver/root/src/store/modules/cluster.js
@@ -106,6 +106,17 @@ const api = (state, server = store.state.system.hostname) => {
           })
         })
     },
+    systemService: id => {
+      return apiCall.getQuiet(['system_service', id, 'status'], { headers }).then(response => {
+        return response.data
+      }).catch(error => {
+        // 500 response error w/ not running
+        if (error.response && (!['ERR_BAD_RESPONSE'].includes(error.code) || ![500].includes(error.response.status))) {
+          throw error
+        }
+        return error.response.data
+      })
+    },
     restartSystem: id => {
       return apiCall.postQuiet(['system_service', id, 'restart'], { async: true }, { headers })
         .then(response => {
@@ -196,6 +207,33 @@ const getters = {
         }
       }, sorted)
     }, {})
+  },
+  systemServicesByServer: state => {
+    return Object.entries(state.servers).reduce((sorted, [server, {system_services = {}}]) => {
+      return Object.entries(system_services).reduce((sorted, [id, service]) => {
+        return {
+          ...sorted,
+          [id]: {
+            servers: {
+               ...((id in sorted) ? sorted[id].servers : {} ),
+              [server]: {
+                ...service,
+                isDisabling: service.status === types.DISABLING,
+                isEnabling: service.status === types.ENABLING,
+                isRestarting: service.status === types.RESTARTING,
+                isStarting: service.status === types.STARTING,
+                isStopping: service.status === types.STOPPING,
+              }
+            },
+            hasAlive: Object.values(state.servers).findIndex(({ services: { [id]: service } }) => service && service.alive && service.pid) > -1,
+            hasDead: Object.values(state.servers).findIndex(({ services: { [id]: service } }) => service && !(service.alive || service.pid)) > -1,
+            hasEnabled: Object.values(state.servers).findIndex(({ services: { [id]: service } }) => service && service.enabled) > -1,
+            hasDisabled: Object.values(state.servers).findIndex(({ services: { [id]: service } }) => service && !service.enabled) > -1,
+            isProtected: !!protectedServices.find(listed => listed === id),
+          }
+        }
+      }, sorted)
+    }, {})
   }
 }
 
@@ -471,42 +509,68 @@ const actions = {
     })
   },
 
-  restartSystemService: ({ state, commit }, { id, server = store.state.system.hostname }) => {
+  getSystemService: ({ state, commit }, { server, id }) => {
+    commit('SYSTEM_SERVICE_REQUEST', { server, id })
+    return api(state, server).systemService(id).then(service => {
+      commit('SYSTEM_SERVICE_SUCCESS', { server, id, service })
+      return state.servers[server].services[id]
+    }).catch(err => {
+      const { response: { data: { message: error } = {} } = {} } = err
+      commit('SYSTEM_SERVICE_ERROR', { server, id, error })
+      throw err
+    })
+  },
+  getSystemServiceCluster: ({ state, dispatch }, id) => {
+    return dispatch('getConfig').then(() => {
+      let promises = []
+      Object.keys(state.servers).map(server => {
+        promises.push(dispatch('getSystemService', { server, id }))
+      })
+      return Promise.all(promises).then(servers => {
+        return servers.reduce((assoc, service, index) => {
+          const server = Object.keys(state.servers)[index]
+          return { ...assoc, [server]: state.servers[server].system_services[id] }
+        }, {})
+      })
+    })
+  },
+  restartSystemService: ({ state, commit, dispatch }, { id, server = store.state.system.hostname }) => {
     commit('SYSTEM_SERVICE_REQUEST', { server, id })
     commit('SYSTEM_SERVICE_RESTARTING', { server, id })
     return api(state, server).restartSystem(id).then(response => {
       commit('SYSTEM_SERVICE_RESTARTED', { server, id, response })
-      return state.servers[server].services[id]
+      return state.servers[server].system_services[id]
     }).catch(err => {
       const { response: { data: error } = {} } = err
       commit('SYSTEM_SERVICE_ERROR', { server, id, error })
       throw err
-    })
+    }).finally(() => dispatch('getSystemService', { server, id }))
   },
-  startSystemService: ({ state, commit }, { id, server = store.state.system.hostname }) => {
+  startSystemService: ({ state, commit, dispatch }, { id, server = store.state.system.hostname }) => {
     commit('SYSTEM_SERVICE_REQUEST', { server, id })
     commit('SYSTEM_SERVICE_STARTING', { server, id })
     return api(state, server).startSystem(id).then(response => {
       commit('SYSTEM_SERVICE_STARTED', { server, id, response })
-      return state.servers[server].services[id]
+      return state.servers[server].system_services[id]
     }).catch(err => {
       const { response: { data: error } = {} } = err
       commit('SYSTEM_SERVICE_ERROR', { server, id, error })
       throw err
-    })
+    }).finally(() => dispatch('getSystemService', { server, id }))
   },
-  stopSystemService: ({ state, commit }, { id, server = store.state.system.hostname }) => {
+  stopSystemService: ({ state, commit, dispatch }, { id, server = store.state.system.hostname }) => {
     commit('SYSTEM_SERVICE_REQUEST', { server, id })
     commit('SYSTEM_SERVICE_STOPPING', { server, id })
     return api(state, server).stopSystem(id).then(response => {
       commit('SYSTEM_SERVICE_STOPPED', { server, id, response })
-      return state.servers[server].services[id]
+      return state.servers[server].system_services[id]
     }).catch(err => {
       const { response: { data: error } = {} } = err
       commit('SYSTEM_SERVICE_ERROR', { server, id, error })
       throw err
-    })
+    }).finally(() => dispatch('getSystemService', { server, id }))
   },
+
   updateSystemd: ({ state, commit }, { id, server = store.state.system.hostname }) => {
     commit('SYSTEMD_REQUEST', { server, id })
     return api(state, server).updateSystemd(id).then(response => {
@@ -640,9 +704,18 @@ const mutations = {
   SYSTEM_SERVICE_REQUEST: (state, { server, id }) => {
     state.status = types.LOADING
     Vue.set(state.servers, server, state.servers[server] || { services: {}, system_services: {} })
-    Vue.set(state.servers[server].system_services, id, state.servers[server].services[id] || {})
+    Vue.set(state.servers[server].system_services, id, state.servers[server].system_services[id] || {})
     Vue.set(state.servers[server].system_services[id], 'status', types.LOADING)
   },
+  SYSTEM_SERVICE_SUCCESS: (state, { server, id, service }) => {
+    service.id = id
+    service.pid = parseInt(service.pid)
+    service.alive = !!(service.pid)
+    service.message = ''
+    state.status = types.SUCCESS
+    state.message = ''
+    Vue.set(state.servers[server].system_services, id, { ...state.servers[server].system_services[id], ...service, status: types.SUCCESS })
+  },
   SYSTEM_SERVICE_RESTARTING: (state, { server, id }) => {
     state.status = types.LOADING
     Vue.set(state.servers[server].system_services[id], 'status', types.RESTARTING)
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/AlertServices.vue b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/AlertServices.vue
new file mode 100644
index 000000000000..da310eae01dd
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/AlertServices.vue
@@ -0,0 +1,42 @@
+<template>
+  <b-alert :show="isModified" variant="warning" fade>
+    <h4 class="alert-heading" v-t="'Warning'"/>
+    <p>
+      {{ $t('Some services must be restarted to load the new settings.') }}
+      <span v-html="$t('Creating or modifying the syslog forwarders requires to restart the rsyslog system service.')"></span>
+    </p>
+    <base-button-system-service service="rsyslog" restart start stop
+      :disabled="isLoading" class="mr-1" size="sm"/>
+  </b-alert>
+</template>
+<script>
+import {
+  BaseButtonSystemService
+} from '@/components/new/'
+const components = {
+  BaseButtonSystemService
+}
+
+const props = {
+  isLoading: {
+    type: Boolean,
+    default: true
+  },
+  isModified: {
+    type: Boolean,
+    default: true
+  }
+}
+
+const setup = () => {}
+
+// @vue/component
+export default {
+  name: 'alert-services',
+  inheritAttrs: false,
+  components,
+  props,
+  setup
+}
+</script>
+
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheView.js
index e35e28224e69..fc91f061b9e8 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheView.js
@@ -1,6 +1,6 @@
 import {
+  AlertServices,
   BaseView,
-
   FormButtonBar,
   TheForm
 } from './'
@@ -10,6 +10,8 @@ const components = {
   TheForm
 }
 
+import { computed } from '@vue/composition-api'
+import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -18,14 +20,31 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+const setup = (props, context) => {
+
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const {
+    isLoading,
+    isModified
+  } = viewCollectionItem
+
+  const scopedSlotProps = computed(() => ({ ...props, isLoading: isLoading.value, isModified: isModified.value }))
+
+  return {
+    ...viewCollectionItem,
+    scopedSlotProps
+  }
+}
+
+const render = renderHOCWithScopedSlots(BaseView, { components, props, setup }, {
+  buttonsPrepend: AlertServices
+})
 
 // @vue/component
 export default {
   name: 'the-view',
   extends: BaseView,
   inheritAttrs: false,
-  components,
   props,
-  setup
+  render
 }
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/index.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/index.js
index 8239d1e1e07a..ec65549bc336 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/index.js
@@ -7,6 +7,7 @@ import {
   BaseFormGroupInputNumber,
   BaseFormGroupToggleDisabledEnabled
 } from '@/components/new/'
+import AlertServices from './AlertServices'
 import TheForm from './TheForm'
 import TheView from './TheView'
 
@@ -21,6 +22,7 @@ export {
   BaseFormGroupInputNumber            as FormGroupPort,
   BaseFormGroupChosenOne              as FormGroupProto,
 
+  AlertServices,
   TheForm,
   TheView
 }
diff --git a/html/pfappserver/root/src/views/Status/services/_components/BaseSystemService.vue b/html/pfappserver/root/src/views/Status/services/_components/BaseSystemService.vue
new file mode 100644
index 000000000000..2e8c3e46cd09
--- /dev/null
+++ b/html/pfappserver/root/src/views/Status/services/_components/BaseSystemService.vue
@@ -0,0 +1,158 @@
+<template>
+  <b-overlay :show="service.status && !['success', 'error'].includes(service.status)" variant="white">
+    <b-container fluid class="px-0">
+      <b-row class="row-nowrap mx-0" align-v="center">
+        <b-col cols="7">
+          <b-row class="row-nowrap py-1" cols="2"
+            v-b-tooltip.hover.left.d300 :title="$t('PID: {pid}', service)"
+          >
+            <b-col cols="6" class="text-nowrap">{{ $i18n.t('Alive') }}</b-col>
+            <b-col cols="auto" class="text-right ml-auto"><icon :class="(service.alive && service.pid) ? 'text-success' : 'text-danger'" name="circle"/></b-col>
+          </b-row>
+        </b-col>
+        <b-col cols="5" class="text-wrap" v-if="isAllowed">
+          <b-button v-if="restart && service.alive && service.pid"
+            @click="doRestart(server)" :disabled="isLoading" variant="link" size="sm" class="text-nowrap text-secondary mr-1">
+            <icon name="redo" class="mr-1" /> {{ $i18n.t('Restart') }}
+          </b-button>
+          <b-button v-if="start && !(service.alive && service.pid)"
+            @click="doStart(server)" :disabled="isLoading" variant="link" size="sm" class="text-nowrap text-secondary mr-1">
+            <icon name="play" class="mr-1" /> {{ $i18n.t('Start') }}
+          </b-button>
+          <b-button v-if="stop && service.alive && service.pid"
+            @click="doStop(server)" :disabled="isLoading" variant="link" size="sm" class="text-nowrap text-secondary mr-1">
+            <icon name="stop" class="mr-1" /> {{ $i18n.t('Stop') }}
+          </b-button>
+        </b-col>
+      </b-row>
+      <b-row v-if="service.message"
+        class="mt-2 mx-0">
+        <b-col cols="auto" class="small text-danger text-wrap">
+          <icon name="info-circle" scale="1.5" class="mr-1" /> {{ service.message }}
+        </b-col>
+      </b-row>
+    </b-container>
+    <template v-slot:overlay v-if="service.status && service.status !== 'loading'">
+      <b-row class="justify-content-md-center">
+        <b-col cols="auto">
+          <b-media class="text-gray text-uppercase font-weight-bold">
+            <template v-slot:aside><icon name="circle-notch" spin scale="1.5" /></template>
+            <p v-if="service.status === 'restarting'" class="mb-0">{{ $i18n.t('Restarting') }}</p>
+            <p v-if="service.status === 'starting'" class="mb-0">{{ $i18n.t('Starting') }}</p>
+            <p v-if="service.status === 'stopping'" class="mb-0">{{ $i18n.t('Stopping') }}</p>
+          </b-media>
+        </b-col>
+      </b-row>
+    </template>
+  </b-overlay>
+</template>
+<script>
+const props = {
+  id: {
+    type: String
+  },
+  server: {
+    type: String
+  },
+  enable: {
+    type: Boolean
+  },
+  disable: {
+    type: Boolean
+  },
+  restart: {
+    type: Boolean
+  },
+  start: {
+    type: Boolean
+  },
+  stop: {
+    type: Boolean
+  },
+  acl: {
+    type: String,
+    default: 'SERVICES_READ'
+  },
+  lazy: {
+    type: Boolean
+  }
+}
+
+import { computed, toRefs, watch } from '@vue/composition-api'
+import acl from '@/utils/acl'
+import i18n from '@/utils/locale'
+import { localeStrings } from '../config'
+
+const setup = (props, context) => {
+
+  const {
+    id,
+    server,
+    lazy,
+    acl: _acl
+  } = toRefs(props)
+
+  const { emit, root: { $store } = {} } = context
+
+  const isAllowed = computed(() => {
+    if (_acl.value) {
+      const [ verb, ...nouns ] = Array.prototype.slice.call(_acl.value.toLowerCase().split('_')).reverse()
+      const noun = nouns.reverse().join('_')
+      return verb && nouns.length > 0 && acl.$can(verb, noun)
+    }
+    return true
+  })
+
+  watch([id, server], () => {
+    if (id.value && server.value && isAllowed.value && !lazy.value) {
+      $store.dispatch('system/getHostname').then(() => {
+        $store.dispatch('cluster/getSystemService', { server: server.value, id: id.value })
+      })
+    }
+  }, { immediate: true })
+  const service = computed(() => $store.state.cluster.servers[server.value].system_services[id.value] || {})
+  const isCluster = computed(() => $store.getters['cluster/isCluster'])
+  const isLoading = computed(() => $store.getters['cluster/isLoading'])
+
+  const doRestart = () => $store.dispatch('cluster/restartSystemService', { server: server.value, id: id.value }).then(() => {
+    $store.dispatch('notification/info', { url: server.value, message: i18n.t(localeStrings.SERVICES_RESTARTED_SUCCESS, { services: `<code>${id.value}</code>` }) })
+    emit('restart', { server, id: id.value })
+  }).catch(() => {
+    const message = i18n.t(localeStrings.SERVICES_RESTARTED_ERROR, { services: `<code>${id.value}</code>` })
+    $store.dispatch('notification/danger', { url: server.value, message })
+  })
+
+  const doStart = () => $store.dispatch('cluster/startSystemService', { server: server.value, id: id.value }).then(() => {
+    $store.dispatch('notification/info', { url: server.value, message: i18n.t(localeStrings.SERVICES_STARTED_SUCCESS, { services: `<code>${id.value}</code>` }) })
+    emit('start', { server, id: id.value })
+  }).catch(() => {
+    $store.dispatch('notification/danger', { url: server.value, message: i18n.t(localeStrings.SERVICES_STARTED_ERROR, { services: `<code>${id.value}</code>` }) })
+  })
+
+  const doStop = () => $store.dispatch('cluster/stopSystemService', { server: server.value, id: id.value }).then(() => {
+    $store.dispatch('notification/info', { url: server.value, message: i18n.t(localeStrings.SERVICES_STOPPED_SUCCESS, { services: `<code>${id.value}</code>` }) })
+    emit('stop', { server, id: id.value })
+  }).catch(() => {
+    $store.dispatch('notification/danger', { url: server.value, message: i18n.t(localeStrings.SERVICES_STOPPED_ERROR, { services: `<code>${id.value}</code>` }) })
+  })
+
+  return {
+    service,
+
+    isAllowed,
+    isCluster,
+    isLoading,
+
+    doRestart,
+    doStart,
+    doStop,
+  }
+}
+
+// @vue/component
+export default {
+  name: 'base-system-service',
+  props,
+  setup
+}
+</script>

From f82d5de9d298c2a549065a1321fa02161d23f246 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <dsatkuna@akamai.com>
Date: Thu, 8 Dec 2022 07:09:57 -0800
Subject: [PATCH 2/5] add monit system service in monit configuration

---
 .../monit/_components/AlertServices.vue       | 42 +++++++++++++++++++
 .../monit/_components/TheForm.vue             |  4 --
 .../monit/_components/TheView.js              | 30 ++++++++++---
 .../Configuration/monit/_components/index.js  |  4 +-
 4 files changed, 69 insertions(+), 11 deletions(-)
 create mode 100644 html/pfappserver/root/src/views/Configuration/monit/_components/AlertServices.vue

diff --git a/html/pfappserver/root/src/views/Configuration/monit/_components/AlertServices.vue b/html/pfappserver/root/src/views/Configuration/monit/_components/AlertServices.vue
new file mode 100644
index 000000000000..3a5d701e4113
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/monit/_components/AlertServices.vue
@@ -0,0 +1,42 @@
+<template>
+  <b-alert :show="isModified" variant="warning" fade>
+    <h4 class="alert-heading" v-t="'Warning'"/>
+    <p>
+      {{ $t('Some services must be restarted to load the new settings.') }}
+      <span v-html="$t('Creating or modifying the monit configuration requires to restart the monit service.')"></span>
+    </p>
+    <base-button-system-service service="monit" restart start stop
+      :disabled="isLoading" class="mr-1" size="sm"/>
+  </b-alert>
+</template>
+<script>
+import {
+  BaseButtonSystemService
+} from '@/components/new/'
+const components = {
+  BaseButtonSystemService
+}
+
+const props = {
+  isLoading: {
+    type: Boolean,
+    default: true
+  },
+  isModified: {
+    type: Boolean,
+    default: true
+  }
+}
+
+const setup = () => {}
+
+// @vue/component
+export default {
+  name: 'alert-services',
+  inheritAttrs: false,
+  components,
+  props,
+  setup
+}
+</script>
+
diff --git a/html/pfappserver/root/src/views/Configuration/monit/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/monit/_components/TheForm.vue
index 94e6a0020ece..750a42d8a877 100644
--- a/html/pfappserver/root/src/views/Configuration/monit/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/monit/_components/TheForm.vue
@@ -5,10 +5,6 @@
     :schema="schema"
     :isLoading="isLoading"
   >
-    <div
-      class="alert alert-warning mx-3"
-    >{{ $t('Modifying this configuration requires to restart monit using the following command: `systemctl restart monit`') }}</div>
-
     <form-group-status namespace="status"
       :column-label="$i18n.t('Status')"
       :text="$i18n.t('Whether or not monit should be enabled on this system. Enabling or disabling the service requires to run the following command: `/usr/local/pf/bin/pfcmd service pf updatesystemd`')"
diff --git a/html/pfappserver/root/src/views/Configuration/monit/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/monit/_components/TheView.js
index 4b2bb2b13c42..6fd97ba6c867 100644
--- a/html/pfappserver/root/src/views/Configuration/monit/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/monit/_components/TheView.js
@@ -1,6 +1,6 @@
 import {
+  AlertServices,
   BaseView,
-
   FormButtonBar,
   TheForm
 } from './'
@@ -10,18 +10,36 @@ const components = {
   TheForm
 }
 
+import { computed } from '@vue/composition-api'
+import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewResource, useViewResourceProps as props } from '../../_composables/useViewResource'
-
 import * as resource from '../_composables/useResource'
-const setup = (props, context) => useViewResource(resource, props, context)
+
+const setup = (props, context) => {
+
+  const viewResource = useViewResource(resource, props, context)
+  const {
+    isLoading,
+    isModified
+  } = viewResource
+
+  const scopedSlotProps = computed(() => ({ ...props, isLoading: isLoading.value, isModified: isModified.value }))
+
+  return {
+    ...viewResource,
+    scopedSlotProps
+  }
+}
+
+const render = renderHOCWithScopedSlots(BaseView, { components, props, setup }, {
+  buttonsPrepend: AlertServices
+})
 
 // @vue/component
 export default {
   name: 'the-view',
   extends: BaseView,
   inheritAttrs: false,
-  components,
   props,
-  setup
+  render
 }
-
diff --git a/html/pfappserver/root/src/views/Configuration/monit/_components/index.js b/html/pfappserver/root/src/views/Configuration/monit/_components/index.js
index a6eef0cbf351..0c769e1b0281 100644
--- a/html/pfappserver/root/src/views/Configuration/monit/_components/index.js
+++ b/html/pfappserver/root/src/views/Configuration/monit/_components/index.js
@@ -5,6 +5,7 @@ import {
   BaseFormGroupTextarea,
   BaseFormGroupToggleDisabledEnabled
 } from '@/components/new/'
+import AlertServices from './AlertServices'
 import TheForm from './TheForm'
 import TheView from './TheView'
 
@@ -18,7 +19,8 @@ export {
   BaseFormGroupToggleDisabledEnabled  as FormGroupStatus,
   BaseFormGroupInput                  as FormGroupSubjectPrefix,
 
-  BaseViewResource                    as BaseView,
+  BaseViewResource as BaseView,
+  AlertServices,
   TheForm,
   TheView
 }

From b5c93bbb841550bbb469d7482e383e426f74c6a4 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <dsatkuna@akamai.com>
Date: Thu, 8 Dec 2022 10:03:44 -0800
Subject: [PATCH 3/5] move services

---
 .../src/components/new/BaseButtonService.vue  |  4 ++--
 .../new/BaseButtonSystemService.vue           |  4 ++--
 .../new}/BaseService.vue                      |  2 +-
 .../new}/BaseSystemService.vue                |  2 +-
 .../root/src/components/new/index.js          |  6 +++++
 .../pfappserver/root/src/globals/pfLocales.js | 22 ++++++++++++++++++-
 .../_components/BaseButtonBulkActions.vue     |  2 +-
 .../Status/services/_components/TheView.vue   |  4 ++--
 .../root/src/views/Status/services/config.js  | 19 ----------------
 9 files changed, 36 insertions(+), 29 deletions(-)
 rename html/pfappserver/root/src/{views/Status/services/_components => components/new}/BaseService.vue (99%)
 rename html/pfappserver/root/src/{views/Status/services/_components => components/new}/BaseSystemService.vue (99%)
 delete mode 100644 html/pfappserver/root/src/views/Status/services/config.js

diff --git a/html/pfappserver/root/src/components/new/BaseButtonService.vue b/html/pfappserver/root/src/components/new/BaseButtonService.vue
index 317dc0bfc600..f4539488b651 100644
--- a/html/pfappserver/root/src/components/new/BaseButtonService.vue
+++ b/html/pfappserver/root/src/components/new/BaseButtonService.vue
@@ -65,7 +65,7 @@
   </b-dropdown>
 </template>
 <script>
-import BaseService from '@/views/Status/services/_components/BaseService'
+import BaseService from './BaseService'
 
 const components = {
   BaseService
@@ -74,7 +74,7 @@ const components = {
 import { computed, nextTick, ref, toRefs, watch } from '@vue/composition-api'
 import acl from '@/utils/acl'
 import i18n from '@/utils/locale'
-import { localeStrings } from '@/views/Status/services/config'
+import { localeStrings } from '@/globals/pfLocales'
 
 const props = {
   service: {
diff --git a/html/pfappserver/root/src/components/new/BaseButtonSystemService.vue b/html/pfappserver/root/src/components/new/BaseButtonSystemService.vue
index 508992fe124a..bd01d5ffa811 100644
--- a/html/pfappserver/root/src/components/new/BaseButtonSystemService.vue
+++ b/html/pfappserver/root/src/components/new/BaseButtonSystemService.vue
@@ -57,7 +57,7 @@
   </b-dropdown>
 </template>
 <script>
-import BaseSystemService from '@/views/Status/services/_components/BaseSystemService'
+import BaseSystemService from './BaseSystemService'
 
 const components = {
   BaseSystemService
@@ -66,7 +66,7 @@ const components = {
 import { computed, nextTick, ref, toRefs, watch } from '@vue/composition-api'
 import acl from '@/utils/acl'
 import i18n from '@/utils/locale'
-import { localeStrings } from '@/views/Status/services/config'
+import { localeStrings } from '@/globals/pfLocales'
 
 const props = {
   service: {
diff --git a/html/pfappserver/root/src/views/Status/services/_components/BaseService.vue b/html/pfappserver/root/src/components/new/BaseService.vue
similarity index 99%
rename from html/pfappserver/root/src/views/Status/services/_components/BaseService.vue
rename to html/pfappserver/root/src/components/new/BaseService.vue
index b581fea9f97f..9cc75dc3637f 100644
--- a/html/pfappserver/root/src/views/Status/services/_components/BaseService.vue
+++ b/html/pfappserver/root/src/components/new/BaseService.vue
@@ -114,7 +114,7 @@ import { computed, toRefs, watch } from '@vue/composition-api'
 import { protectedServices } from '@/store/modules/cluster'
 import acl from '@/utils/acl'
 import i18n from '@/utils/locale'
-import { localeStrings } from '../config'
+import { localeStrings } from '@/globals/pfLocales'
 
 const setup = (props, context) => {
 
diff --git a/html/pfappserver/root/src/views/Status/services/_components/BaseSystemService.vue b/html/pfappserver/root/src/components/new/BaseSystemService.vue
similarity index 99%
rename from html/pfappserver/root/src/views/Status/services/_components/BaseSystemService.vue
rename to html/pfappserver/root/src/components/new/BaseSystemService.vue
index 2e8c3e46cd09..bc5e2280ebcc 100644
--- a/html/pfappserver/root/src/views/Status/services/_components/BaseSystemService.vue
+++ b/html/pfappserver/root/src/components/new/BaseSystemService.vue
@@ -81,7 +81,7 @@ const props = {
 import { computed, toRefs, watch } from '@vue/composition-api'
 import acl from '@/utils/acl'
 import i18n from '@/utils/locale'
-import { localeStrings } from '../config'
+import { localeStrings } from '@/globals/pfLocales'
 
 const setup = (props, context) => {
 
diff --git a/html/pfappserver/root/src/components/new/index.js b/html/pfappserver/root/src/components/new/index.js
index e3ebc55a7a05..26f7400be800 100644
--- a/html/pfappserver/root/src/components/new/index.js
+++ b/html/pfappserver/root/src/components/new/index.js
@@ -67,6 +67,8 @@ import BaseSearchInputAdvanced from './BaseSearchInputAdvanced'
 import BaseSearchInputColumns from './BaseSearchInputColumns'
 import BaseSearchInputLimit from './BaseSearchInputLimit'
 import BaseSearchInputPage from './BaseSearchInputPage'
+import BaseService from './BaseService'
+import BaseSystemService from './BaseSystemService'
 import BaseTableEmpty from './BaseTableEmpty'
 import BaseTableSortable from './BaseTableSortable'
 import BaseUpload from './BaseUpload'
@@ -165,6 +167,10 @@ export {
   BaseSearchInputLimit,
   BaseSearchInputPage,
 
+  // services
+  BaseService,
+  BaseSystemService,
+
   // tables
   BaseTableEmpty,
   BaseTableSortable,
diff --git a/html/pfappserver/root/src/globals/pfLocales.js b/html/pfappserver/root/src/globals/pfLocales.js
index a03b6d114883..7b08ac0d9f39 100644
--- a/html/pfappserver/root/src/globals/pfLocales.js
+++ b/html/pfappserver/root/src/globals/pfLocales.js
@@ -6,10 +6,30 @@ export const pfLocales = [
   'fr_FR',
   'he_IL',
   'it_IT',
-  'nb_NO',  
+  'nb_NO',
   'nl_NL',
   'pl_PL',
   'pt_BR'
 ]
 
 export const pfLocalesList = pfLocales.map(locale => { return { text: locale, value: locale } })
+
+export const localeStrings = {
+  SERVICES_DISABLED_SUCCESS: 'Disabled services {services}.', // i18n defer
+  SERVICES_DISABLED_ERROR: 'Failed to disable services {services}. See the server error logs for more information.', // i18n defer
+  SERVICES_PROTECTED_DISABLED_ERROR: 'Failed to disable services {services}. This service is required for this page to function and CLI access may be required to remediate any issues caused by the failure. See the server error logs for more information.', // i18n defer
+
+  SERVICES_ENABLED_SUCCESS: 'Enabled services {services}.', // i18n defer
+  SERVICES_ENABLED_ERROR: 'Failed to enable services {services}. See the server error logs for more information.', // i18n defer
+  SERVICES_PROTECTED_ENABLED_ERROR: 'Failed to enable services {services}. This service is required for this page to function and CLI access may be required to remediate any issues caused by the failure. See the server error logs for more information.', // i18n defer
+
+  SERVICES_RESTARTED_SUCCESS: 'Restarted services {services}.', // i18n defer
+  SERVICES_RESTARTED_ERROR: 'Failed to restart services {services}. See the server error logs for more information.', // i18n defer
+  SERVICES_PROTECTED_RESTARTED_ERROR: 'Failed to restart services {services}. This service is required for this page to function and CLI access may be required to remediate any issues caused by the failure. See the server error logs for more information.', // i18n defer
+
+  SERVICES_STARTED_SUCCESS: 'Started services {services}.', // i18n defer
+  SERVICES_STARTED_ERROR: 'Failed to start services {services}. See the server error logs for more information.', // i18n defer
+
+  SERVICES_STOPPED_SUCCESS: 'Stopped services {services}.', // i18n defer
+  SERVICES_STOPPED_ERROR: 'Failed to stop services {services}. See the server error logs for more information.', // i18n defer
+}
diff --git a/html/pfappserver/root/src/views/Status/services/_components/BaseButtonBulkActions.vue b/html/pfappserver/root/src/views/Status/services/_components/BaseButtonBulkActions.vue
index 827247c6224f..d49a4a78ded7 100644
--- a/html/pfappserver/root/src/views/Status/services/_components/BaseButtonBulkActions.vue
+++ b/html/pfappserver/root/src/views/Status/services/_components/BaseButtonBulkActions.vue
@@ -38,7 +38,7 @@ const props = {
 
 import { computed, nextTick, ref, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import { localeStrings } from '../config'
+import { localeStrings } from '@/globals/pfLocales'
 
 const setup = (props, context) => {
 
diff --git a/html/pfappserver/root/src/views/Status/services/_components/TheView.vue b/html/pfappserver/root/src/views/Status/services/_components/TheView.vue
index a5cf7a1485c9..f724843d6a87 100644
--- a/html/pfappserver/root/src/views/Status/services/_components/TheView.vue
+++ b/html/pfappserver/root/src/views/Status/services/_components/TheView.vue
@@ -95,10 +95,10 @@
 
 <script>
 import {
+  BaseService,
   BaseTableEmpty
 } from '@/components/new/'
 import BaseButtonBulkActions from './BaseButtonBulkActions'
-import BaseService from './BaseService'
 
 const components = {
   BaseButtonBulkActions,
@@ -109,7 +109,7 @@ const components = {
 import { computed, customRef, onMounted, ref } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import i18n from '@/utils/locale'
-import { localeStrings } from '../config'
+import { localeStrings } from '@/globals/pfLocales'
 
 const setup = (props, context) => {
 
diff --git a/html/pfappserver/root/src/views/Status/services/config.js b/html/pfappserver/root/src/views/Status/services/config.js
deleted file mode 100644
index d81dd37139b5..000000000000
--- a/html/pfappserver/root/src/views/Status/services/config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-export const localeStrings = {
-  SERVICES_DISABLED_SUCCESS: 'Disabled services {services}.', // i18n defer
-  SERVICES_DISABLED_ERROR: 'Failed to disable services {services}. See the server error logs for more information.', // i18n defer
-  SERVICES_PROTECTED_DISABLED_ERROR: 'Failed to disable services {services}. This service is required for this page to function and CLI access may be required to remediate any issues caused by the failure. See the server error logs for more information.', // i18n defer
-
-  SERVICES_ENABLED_SUCCESS: 'Enabled services {services}.', // i18n defer
-  SERVICES_ENABLED_ERROR: 'Failed to enable services {services}. See the server error logs for more information.', // i18n defer
-  SERVICES_PROTECTED_ENABLED_ERROR: 'Failed to enable services {services}. This service is required for this page to function and CLI access may be required to remediate any issues caused by the failure. See the server error logs for more information.', // i18n defer
-
-  SERVICES_RESTARTED_SUCCESS: 'Restarted services {services}.', // i18n defer
-  SERVICES_RESTARTED_ERROR: 'Failed to restart services {services}. See the server error logs for more information.', // i18n defer
-  SERVICES_PROTECTED_RESTARTED_ERROR: 'Failed to restart services {services}. This service is required for this page to function and CLI access may be required to remediate any issues caused by the failure. See the server error logs for more information.', // i18n defer
-
-  SERVICES_STARTED_SUCCESS: 'Started services {services}.', // i18n defer
-  SERVICES_STARTED_ERROR: 'Failed to start services {services}. See the server error logs for more information.', // i18n defer
-
-  SERVICES_STOPPED_SUCCESS: 'Stopped services {services}.', // i18n defer
-  SERVICES_STOPPED_ERROR: 'Failed to stop services {services}. See the server error logs for more information.', // i18n defer
-}
\ No newline at end of file

From 4449474365373c95d559e1cfeea4438b596bace1 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <dsatkuna@akamai.com>
Date: Fri, 9 Dec 2022 05:53:01 -0800
Subject: [PATCH 4/5] add systemd update button

---
 .../new/BaseButtonSystemService.vue           |   2 +-
 .../new/BaseButtonSystemdUpdate.vue           | 173 ++++++++++++++++++
 .../src/components/new/BaseSystemdUpdate.vue  |  96 ++++++++++
 .../root/src/components/new/index.js          |   2 +
 .../pfappserver/root/src/globals/pfLocales.js |   3 +
 .../root/src/store/modules/cluster.js         | 161 ++++++++++++++--
 .../eventLoggers/_components/TheSearch.vue    |   8 +
 7 files changed, 429 insertions(+), 16 deletions(-)
 create mode 100644 html/pfappserver/root/src/components/new/BaseButtonSystemdUpdate.vue
 create mode 100644 html/pfappserver/root/src/components/new/BaseSystemdUpdate.vue

diff --git a/html/pfappserver/root/src/components/new/BaseButtonSystemService.vue b/html/pfappserver/root/src/components/new/BaseButtonSystemService.vue
index bd01d5ffa811..60042d47b01a 100644
--- a/html/pfappserver/root/src/components/new/BaseButtonSystemService.vue
+++ b/html/pfappserver/root/src/components/new/BaseButtonSystemService.vue
@@ -91,7 +91,7 @@ const props = {
   },
   acl: {
     type: String,
-    default: 'SERVICES_READ'
+    default: 'SYSTEM_READ'
   }
 }
 
diff --git a/html/pfappserver/root/src/components/new/BaseButtonSystemdUpdate.vue b/html/pfappserver/root/src/components/new/BaseButtonSystemdUpdate.vue
new file mode 100644
index 000000000000..a1fb4788e0ab
--- /dev/null
+++ b/html/pfappserver/root/src/components/new/BaseButtonSystemdUpdate.vue
@@ -0,0 +1,173 @@
+<template>
+  <b-dropdown ref="buttonRef"
+    :disabled="isDisabled"
+    :size="size"
+    :text="service"
+    no-flip
+    variant="outline-primary"
+    v-b-tooltip.hover.top.d300 :title="tooltip"
+    v-bind="$attrs"
+  >
+    <template v-slot:button-content>
+      <div class="d-inline px-1">
+        <icon v-if="!servers.length"
+          name="circle-notch" spin class="fa-overlap mr-1" />
+        <icon v-else-if="!Object.entries(cluster).length"
+          v-for="server of servers" :key="`icon-${server}`"
+          name="circle" class="text-secondary fa-overlap mr-1" />
+        <template v-else
+          v-for="(service, server) in cluster">
+          <icon v-if="service.status === 'loading'" :key="`icon-${server}`"
+            name="circle-notch" spin class="text-primary fa-overlap mr-1" />
+          <icon v-else-if="service.status === 'error'" :key="`icon-${server}`"
+            name="exclamation-triangle" class="text-danger fa-overlap mr-1" />
+          <icon v-else-if="service.status === 'updating'" :key="`icon-${server}`"
+            class="fa-overlap mr-1">
+            <icon name="circle" class="text-white" />
+            <icon v-if="service.status === 'updating'"
+              name="sync" class="text-primary" scale="0.5" />
+          </icon>
+          <icon v-else :key="`icon-${server}`"
+            name="circle" class="text-success fa-overlap mr-1" />
+        </template>
+        systemd
+      </div>
+    </template>
+
+    <b-dropdown-group v-if="isAllowed && isCluster"
+      :header="$i18n.t('CLUSTER')">
+      <b-dropdown-item @click="doUpdateAll" @click.stop="onClick" :disabled="isLoading"><icon name="sync" class="mr-1" /> {{ $t('Update All Sequentially') }}</b-dropdown-item>
+    </b-dropdown-group>
+
+    <template v-for="server of servers">
+      <b-dropdown-divider v-if="isCluster" :key="`divider-${server}`" />
+      <b-dropdown-group :key="`group-${server}`">
+       <template v-slot:header>
+         {{ server }}
+        </template>
+        <b-dropdown-form style="width: 400px;">
+          <base-systemd-update :id="service" :server="server" v-bind="{ acl }" />
+        </b-dropdown-form>
+      </b-dropdown-group>
+    </template>
+  </b-dropdown>
+</template>
+<script>
+import BaseSystemdUpdate from './BaseSystemdUpdate'
+
+const components = {
+  BaseSystemdUpdate
+}
+
+import { computed, nextTick, ref, toRefs } from '@vue/composition-api'
+import acl from '@/utils/acl'
+import i18n from '@/utils/locale'
+import { localeStrings } from '@/globals/pfLocales'
+
+const props = {
+  service: {
+    type: String,
+    default: 'pf'
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: value => ['sm', 'md', 'lg'].includes(value)
+  },
+  disabled: {
+    type: Boolean
+  },
+  acl: {
+    type: String,
+    default: 'SERVICES_UPDATE'
+  }
+}
+
+const setup = (props, context) => {
+
+  const buttonRef = ref(null)
+
+  const onClick = event => {
+    event.stopPropagation()
+    nextTick(() => {
+      buttonRef.value.show() // keep open on click
+    })
+  }
+
+  const {
+    service,
+    disabled,
+    acl: _acl
+  } = toRefs(props)
+
+  const { root: { $store } = {}, emit } = context
+
+  const isAllowed = computed(() => {
+    if (_acl.value) {
+      const [ verb, ...nouns ] = Array.prototype.slice.call(_acl.value.toLowerCase().split('_')).reverse()
+      const noun = nouns.reverse().join('_')
+      return verb && nouns.length > 0 && acl.$can(verb, noun)
+    }
+    return true
+  })
+
+  const cluster = computed(() => {
+    const { [service.value]: { servers = {} } = {}  } = $store.getters['cluster/systemdByServer']
+    return servers
+  })
+  const servers = computed(() => $store.getters['cluster/servers'])
+  const isCluster = computed(() => $store.getters['cluster/isCluster'])
+  const isLoading = computed(() => $store.getters['cluster/isLoading'])
+  const isDisabled = computed(() => disabled.value || !isAllowed.value || !servers.value.length)
+
+  const tooltip = computed(() => {
+    switch (true) {
+      case !isAllowed.value:
+        return i18n.t('No permission, admin role {acl} required.', { acl: _acl.value })
+        //break
+
+      default:
+        return undefined
+    }
+  })
+
+  const doUpdate = server => $store.dispatch('cluster/updateSystemd', { server, id: service.value }).then(() => {
+    $store.dispatch('notification/info', { url: server, message: i18n.t(localeStrings.SYSTEMD_UPDATED_SUCCESS, { service: `<code>${service.value}</code>` }) })
+    emit('update', { server, id: service.value })
+  }).catch(() => {
+    $store.dispatch('notification/danger', { url: server, message: i18n.t(localeStrings.SYSTEMD_UPDATED_ERROR, { service: `<code>${service.value}</code>` }) })
+  })
+
+  const doUpdateAll = () => $store.dispatch('cluster/updateSystemdCluster', service.value).then(() => {
+    $store.dispatch('notification/info', { url: 'CLUSTER', message: i18n.t(localeStrings.SYSTEMD_UPDATED_SUCCESS, { service: `<code>${service.value}</code>` }) })
+    emit('update', { id: service.value })
+  }).catch(() => {
+    $store.dispatch('notification/danger', { url: 'CLUSTER', message: i18n.t(localeStrings.SYSTEMD_UPDATED_ERROR, { service: `<code>${service.value}</code>` }) })
+  })
+
+   return {
+    buttonRef,
+    onClick,
+
+    isAllowed,
+    isCluster,
+    isDisabled,
+    isLoading,
+    cluster,
+    servers,
+    tooltip,
+
+    doUpdate,
+    doUpdateAll,
+  }
+}
+
+// @vue/component
+export default {
+  name: 'base-button-systemd-update',
+  inheritAttrs: false,
+  components,
+  props,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/components/new/BaseSystemdUpdate.vue b/html/pfappserver/root/src/components/new/BaseSystemdUpdate.vue
new file mode 100644
index 000000000000..a6c7ffa39f05
--- /dev/null
+++ b/html/pfappserver/root/src/components/new/BaseSystemdUpdate.vue
@@ -0,0 +1,96 @@
+<template>
+  <b-overlay :show="service.status && !['success', 'error'].includes(service.status)" variant="white">
+    <b-container fluid class="px-0">
+      <b-row class="row-nowrap mx-0" align-v="center">
+        <b-col cols="5" class="text-wrap" v-if="isAllowed">
+          <b-button
+            @click="doUpdate(server)" :disabled="isLoading" variant="link" size="sm" class="text-nowrap text-secondary mr-1">
+            <icon name="sync" class="mr-1" /> {{ $i18n.t('Update') }}
+          </b-button>
+        </b-col>
+      </b-row>
+      <b-row v-if="service.message"
+        class="mt-2 mx-0">
+        <b-col cols="auto" class="small text-danger text-wrap">
+          <icon name="info-circle" scale="1.5" class="mr-1" /> {{ service.message }}
+        </b-col>
+      </b-row>
+    </b-container>
+    <template v-slot:overlay v-if="service.status && service.status !== 'loading'">
+      <b-row class="justify-content-md-center">
+        <b-col cols="auto">
+          <b-media class="text-gray text-uppercase font-weight-bold">
+            <template v-slot:aside><icon name="circle-notch" spin scale="1.5" /></template>
+            <p v-if="service.status === 'updating'" class="mb-0">{{ $i18n.t('Updating') }}</p>
+          </b-media>
+        </b-col>
+      </b-row>
+    </template>
+  </b-overlay>
+</template>
+<script>
+const props = {
+  id: {
+    type: String
+  },
+  server: {
+    type: String
+  },
+  acl: {
+    type: String,
+    default: 'SERVICES_UPDATE'
+  },
+}
+
+import { computed, toRefs } from '@vue/composition-api'
+import acl from '@/utils/acl'
+import i18n from '@/utils/locale'
+import { localeStrings } from '@/globals/pfLocales'
+
+const setup = (props, context) => {
+
+  const {
+    id,
+    server,
+    acl: _acl
+  } = toRefs(props)
+
+  const { emit, root: { $store } = {} } = context
+
+  const isAllowed = computed(() => {
+    if (_acl.value) {
+      const [ verb, ...nouns ] = Array.prototype.slice.call(_acl.value.toLowerCase().split('_')).reverse()
+      const noun = nouns.reverse().join('_')
+      return verb && nouns.length > 0 && acl.$can(verb, noun)
+    }
+    return true
+  })
+
+  const service = computed(() => $store.state.cluster.servers[server.value].systemd[id.value] || {})
+  const isLoading = computed(() => $store.getters['cluster/isLoading'])
+
+  const doUpdate = () => $store.dispatch('cluster/updateSystemd', { server: server.value, id: id.value }).then(() => {
+    $store.dispatch('notification/info', { url: server.value, message: i18n.t(localeStrings.SYSTEMD_UPDATED_SUCCESS, { service: `<code>${id.value}</code>` }) })
+    emit('update', { server, id: id.value })
+  }).catch(() => {
+    const message = i18n.t(localeStrings.SYSTEMD_UPDATED_ERROR, { services: `<code>${id.value}</code>` })
+    $store.dispatch('notification/danger', { url: server.value, message })
+  })
+
+  return {
+    service,
+
+    isAllowed,
+    isLoading,
+
+    doUpdate,
+  }
+}
+
+// @vue/component
+export default {
+  name: 'base-systemd-update',
+  props,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/components/new/index.js b/html/pfappserver/root/src/components/new/index.js
index 26f7400be800..4e057d938cc6 100644
--- a/html/pfappserver/root/src/components/new/index.js
+++ b/html/pfappserver/root/src/components/new/index.js
@@ -7,6 +7,7 @@ import BaseButtonSave from './BaseButtonSave'
 import BaseButtonSaveSearch from './BaseButtonSaveSearch'
 import BaseButtonService from './BaseButtonService'
 import BaseButtonSystemService from './BaseButtonSystemService'
+import BaseButtonSystemdUpdate from './BaseButtonSystemdUpdate'
 import BaseButtonUpload from './BaseButtonUpload'
 import BaseContainerLoading from './BaseContainerLoading'
 import BaseCsvImport from './BaseCsvImport'
@@ -154,6 +155,7 @@ export {
   BaseButtonSaveSearch,
   BaseButtonService,
   BaseButtonSystemService,
+  BaseButtonSystemdUpdate,
   BaseButtonUpload,
 
   // containers
diff --git a/html/pfappserver/root/src/globals/pfLocales.js b/html/pfappserver/root/src/globals/pfLocales.js
index 7b08ac0d9f39..ea01886eecbf 100644
--- a/html/pfappserver/root/src/globals/pfLocales.js
+++ b/html/pfappserver/root/src/globals/pfLocales.js
@@ -32,4 +32,7 @@ export const localeStrings = {
 
   SERVICES_STOPPED_SUCCESS: 'Stopped services {services}.', // i18n defer
   SERVICES_STOPPED_ERROR: 'Failed to stop services {services}. See the server error logs for more information.', // i18n defer
+
+  SYSTEMD_UPDATED_SUCCESS: 'Updated systemd for {service}.', // i18n defer
+  SYSTEMD_UPDATED_ERROR: 'Failed to update systemd for {service}. See the server error logs for more information.', // i18n defer
 }
diff --git a/html/pfappserver/root/src/store/modules/cluster.js b/html/pfappserver/root/src/store/modules/cluster.js
index af8f22c33b25..26a583addeb7 100644
--- a/html/pfappserver/root/src/store/modules/cluster.js
+++ b/html/pfappserver/root/src/store/modules/cluster.js
@@ -155,6 +155,7 @@ const types = {
   RESTARTING: 'restarting',
   STARTING: 'starting',
   STOPPING: 'stopping',
+  UPDATING: 'updating',
   SUCCESS: 'success',
   ERROR: 'error'
 }
@@ -227,14 +228,30 @@ const getters = {
             },
             hasAlive: Object.values(state.servers).findIndex(({ services: { [id]: service } }) => service && service.alive && service.pid) > -1,
             hasDead: Object.values(state.servers).findIndex(({ services: { [id]: service } }) => service && !(service.alive || service.pid)) > -1,
-            hasEnabled: Object.values(state.servers).findIndex(({ services: { [id]: service } }) => service && service.enabled) > -1,
-            hasDisabled: Object.values(state.servers).findIndex(({ services: { [id]: service } }) => service && !service.enabled) > -1,
-            isProtected: !!protectedServices.find(listed => listed === id),
           }
         }
       }, sorted)
     }, {})
-  }
+  },
+  systemdByServer: state => {
+    return Object.entries(state.servers).reduce((sorted, [server, {systemd = {}}]) => {
+      return Object.entries(systemd).reduce((sorted, [id, service]) => {
+        return {
+          ...sorted,
+          [id]: {
+            servers: {
+               ...((id in sorted) ? sorted[id].servers : {} ),
+              [server]: {
+                ...service,
+                isUpdating: service.status === types.UPDATING,
+              }
+            }
+          }
+        }
+      }, sorted)
+    }, {})
+  },
+  servers: state => Object.keys(state.servers),
 }
 
 const actions = {
@@ -323,7 +340,7 @@ const actions = {
   disableServiceCluster: ({ state, dispatch }, id) => {
     return new Promise((resolve, reject) => {
       dispatch('getConfig').then(() => {
-        // async requests
+        // serialize async requests
         const async = (idx = 0) => {
           const server = Object.keys(state.servers)[idx]
           const next = () => {
@@ -363,7 +380,7 @@ const actions = {
   enableServiceCluster: ({ state, dispatch }, id) => {
     return new Promise((resolve, reject) => {
       dispatch('getConfig').then(() => {
-        // async requests
+        // serialize async requests
         const async = (idx = 0) => {
           const server = Object.keys(state.servers)[idx]
           const next = () => {
@@ -403,7 +420,7 @@ const actions = {
   restartServiceCluster: ({ state, dispatch }, id) => {
     return new Promise((resolve, reject) => {
       dispatch('getConfig').then(() => {
-        // async requests
+        // serialize async requests
         const async = (idx = 0) => {
           const server = Object.keys(state.servers)[idx]
           const next = () => {
@@ -443,7 +460,7 @@ const actions = {
   startServiceCluster: ({ state, dispatch }, id) => {
     return new Promise((resolve, reject) => {
       dispatch('getConfig').then(() => {
-        // async requests
+        // serialize async requests
         const async = (idx = 0) => {
           const server = Object.keys(state.servers)[idx]
           const next = () => {
@@ -483,7 +500,7 @@ const actions = {
   stopServiceCluster: ({ state, dispatch }, id) => {
     return new Promise((resolve, reject) => {
       dispatch('getConfig').then(() => {
-        // async requests
+        // serialize async requests
         const async = (idx = 0) => {
           const server = Object.keys(state.servers)[idx]
           const next = () => {
@@ -509,6 +526,7 @@ const actions = {
     })
   },
 
+
   getSystemService: ({ state, commit }, { server, id }) => {
     commit('SYSTEM_SERVICE_REQUEST', { server, id })
     return api(state, server).systemService(id).then(service => {
@@ -546,6 +564,34 @@ const actions = {
       throw err
     }).finally(() => dispatch('getSystemService', { server, id }))
   },
+  restartSystemServiceCluster: ({ state, dispatch }, id) => {
+    return new Promise((resolve, reject) => {
+      dispatch('getConfig').then(() => {
+        // serialize async requests
+        const async = (idx = 0) => {
+          const server = Object.keys(state.servers)[idx]
+          const next = () => {
+            if (idx < Object.keys(state.servers).length-1) {
+              async(++idx)
+            }
+            else {
+              resolve()
+            }
+          }
+          const { [server]: { system_services: { [id]: { alive = false, pid = false } = {} } = {} } = {} } = state.servers
+          if (alive && pid) {
+            dispatch('restartSystemService', { server, id })
+             .catch(err => reject(err))
+              .then(() => next())
+          }
+          else {
+             next()
+          }
+        }
+        async()
+      })
+    })
+  },
   startSystemService: ({ state, commit, dispatch }, { id, server = store.state.system.hostname }) => {
     commit('SYSTEM_SERVICE_REQUEST', { server, id })
     commit('SYSTEM_SERVICE_STARTING', { server, id })
@@ -558,6 +604,34 @@ const actions = {
       throw err
     }).finally(() => dispatch('getSystemService', { server, id }))
   },
+  startSystemServiceCluster: ({ state, dispatch }, id) => {
+    return new Promise((resolve, reject) => {
+      dispatch('getConfig').then(() => {
+        // serialize async requests
+        const async = (idx = 0) => {
+          const server = Object.keys(state.servers)[idx]
+          const next = () => {
+            if (idx < Object.keys(state.servers).length - 1) {
+              async(++idx)
+            }
+            else {
+              resolve()
+            }
+          }
+          const { [server]: { system_services: { [id]: { alive = false, pid = false } = {} } = {} } = {} } = state.servers
+          if (!(alive && pid)) {
+            dispatch('startSystemService', { server, id })
+             .catch(err => reject(err))
+             .then(() => next())
+          }
+          else {
+            next()
+          }
+        }
+        async()
+      })
+    })
+  },
   stopSystemService: ({ state, commit, dispatch }, { id, server = store.state.system.hostname }) => {
     commit('SYSTEM_SERVICE_REQUEST', { server, id })
     commit('SYSTEM_SERVICE_STOPPING', { server, id })
@@ -570,6 +644,35 @@ const actions = {
       throw err
     }).finally(() => dispatch('getSystemService', { server, id }))
   },
+  stopSystemServiceCluster: ({ state, dispatch }, id) => {
+    return new Promise((resolve, reject) => {
+      dispatch('getConfig').then(() => {
+        // serialize async requests
+        const async = (idx = 0) => {
+          const server = Object.keys(state.servers)[idx]
+          const next = () => {
+            if (idx < Object.keys(state.servers).length - 1) {
+              async(++idx)
+            }
+            else {
+              resolve()
+            }
+          }
+          const { [server]: { system_services: { [id]: { alive = false, pid = false } = {} } = {} } = {} } = state.servers
+          if (alive && pid) {
+            dispatch('stopSystemService', { server, id })
+             .catch(err => reject(err))
+             .then(() => next())
+          }
+          else {
+            next()
+          }
+        }
+        async()
+      })
+    })
+  },
+
 
   updateSystemd: ({ state, commit }, { id, server = store.state.system.hostname }) => {
     commit('SYSTEMD_REQUEST', { server, id })
@@ -582,6 +685,28 @@ const actions = {
       throw err
     })
   },
+  updateSystemdCluster: ({ state, dispatch }, id) => {
+    return new Promise((resolve, reject) => {
+      dispatch('getConfig').then(() => {
+        // serialize async requests
+        const async = (idx = 0) => {
+          const server = Object.keys(state.servers)[idx]
+          const next = () => {
+            if (idx < Object.keys(state.servers).length - 1) {
+              async(++idx)
+            }
+            else {
+              resolve()
+            }
+          }
+          dispatch('updateSystemd', { server, id })
+            .catch(err => reject(err))
+            .then(() => next())
+        }
+        async()
+      })
+    })
+  },
 }
 
 const mutations = {
@@ -593,7 +718,7 @@ const mutations = {
   },
   CONFIG_SUCCESS: (state, items) => {
     items.map(server => {
-      Vue.set(state.servers, server.host, { services: {}, system_services: {}, ...state.servers[server.host], ...server })
+      Vue.set(state.servers, server.host, { services: {}, system_services: {}, systemd: {}, ...state.servers[server.host], ...server })
     })
     state.status = types.SUCCESS
     state.message = ''
@@ -625,7 +750,7 @@ const mutations = {
 
   SERVICE_REQUEST: (state, { server, id }) => {
     state.status = types.LOADING
-    Vue.set(state.servers, server, state.servers[server] || { services: {}, system_services: {} })
+    Vue.set(state.servers, server, state.servers[server] || { services: {}, system_services: {}, systemd: {} })
     Vue.set(state.servers[server].services, id, state.servers[server].services[id] || {})
     Vue.set(state.servers[server].services[id], 'status', types.LOADING)
   },
@@ -703,7 +828,7 @@ const mutations = {
 
   SYSTEM_SERVICE_REQUEST: (state, { server, id }) => {
     state.status = types.LOADING
-    Vue.set(state.servers, server, state.servers[server] || { services: {}, system_services: {} })
+    Vue.set(state.servers, server, state.servers[server] || { services: {}, system_services: {}, systemd: {} })
     Vue.set(state.servers[server].system_services, id, state.servers[server].system_services[id] || {})
     Vue.set(state.servers[server].system_services[id], 'status', types.LOADING)
   },
@@ -746,17 +871,23 @@ const mutations = {
     Vue.set(state.servers[server].system_services[id], 'status', types.ERROR)
   },
 
-  SYSTEMD_REQUEST: state => {
+  SYSTEMD_REQUEST: (state, { server, id }) => {
     state.status = types.LOADING
+    Vue.set(state.servers, server, state.servers[server] || { services: {}, system_services: {}, systemd: {} })
+    Vue.set(state.servers[server].systemd, id, state.servers[server].systemd[id] || {})
+    Vue.set(state.servers[server].systemd[id], 'status', types.UPDATING)
   },
-  SYSTEMD_SUCCESS: state => {
+  SYSTEMD_SUCCESS: (state, { server, id }) => {
     state.status = types.SUCCESS
     state.message = ''
+    Vue.set(state.servers[server].systemd, id, { ...state.servers[server].systemd[id], status: types.SUCCESS })
   },
-  SYSTEMD_ERROR: (state, error) => {
+  SYSTEMD_ERROR: (state, { server, id, error }) => {
     state.status = types.ERROR
     state.message = error
+    Vue.set(state.servers[server].systemd[id], 'status', types.ERROR)
   },
+
   $RESET: (state) => {
     // eslint-disable-next-line no-unused-vars
     state = initialState()
diff --git a/html/pfappserver/root/src/views/Configuration/eventLoggers/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/eventLoggers/_components/TheSearch.vue
index a54d35166b55..425830dde0c6 100644
--- a/html/pfappserver/root/src/views/Configuration/eventLoggers/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/eventLoggers/_components/TheSearch.vue
@@ -13,6 +13,10 @@
             :to="{ name: 'newEventLogger', params: { eventLoggerType: value } }"
           >{{ text }}</b-dropdown-item>
         </b-dropdown>
+        <base-button-system-service
+          service="packetfence-mariadb" restart start stop
+          class="ml-1" />
+        <base-button-systemd-update class="ml-1" />
       </base-search>
       <b-table ref="tableRef"
         :busy="isLoading"
@@ -98,6 +102,8 @@
 import {
   BaseButtonConfirm,
   BaseButtonHelp,
+  BaseButtonSystemService,
+  BaseButtonSystemdUpdate,
   BaseSearch,
   BaseSearchInputColumns,
   BaseTableEmpty
@@ -106,6 +112,8 @@ import {
 const components = {
   BaseButtonConfirm,
   BaseButtonHelp,
+  BaseButtonSystemService,
+  BaseButtonSystemdUpdate,
   BaseSearch,
   BaseSearchInputColumns,
   BaseTableEmpty

From 06064bc6cf7bbbfc0da9cb350ef0a1eb0361f6c1 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <dsatkuna@akamai.com>
Date: Fri, 9 Dec 2022 06:04:41 -0800
Subject: [PATCH 5/5] add systemd button to monit and services

---
 .../Configuration/eventLoggers/_components/TheSearch.vue | 6 ------
 .../Configuration/monit/_components/AlertServices.vue    | 9 ++++++---
 .../src/views/Status/services/_components/TheView.vue    | 5 +++++
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/eventLoggers/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/eventLoggers/_components/TheSearch.vue
index 425830dde0c6..9f113f1ff6c0 100644
--- a/html/pfappserver/root/src/views/Configuration/eventLoggers/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/eventLoggers/_components/TheSearch.vue
@@ -4,9 +4,6 @@
       <h4 class="mb-0">{{ $t('Event Loggers') }}</h4>
     </b-card-header>
     <div class="card-body">
-      <div
-        class="alert alert-warning"
-      >{{ $t(`Creating, modifying or deleting an event logger entry requires to restart the packetfence-mariadb service using the following command: systemctl restart packetfence-mariadb`) }}</div>
       <base-search :use-search="useSearch">
         <b-dropdown :text="$t('New Event Logger')" variant="outline-primary">
           <b-dropdown-item v-for="({ text, value }) in typeOptions" :key="value"
@@ -16,7 +13,6 @@
         <base-button-system-service
           service="packetfence-mariadb" restart start stop
           class="ml-1" />
-        <base-button-systemd-update class="ml-1" />
       </base-search>
       <b-table ref="tableRef"
         :busy="isLoading"
@@ -103,7 +99,6 @@ import {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseButtonSystemService,
-  BaseButtonSystemdUpdate,
   BaseSearch,
   BaseSearchInputColumns,
   BaseTableEmpty
@@ -113,7 +108,6 @@ const components = {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseButtonSystemService,
-  BaseButtonSystemdUpdate,
   BaseSearch,
   BaseSearchInputColumns,
   BaseTableEmpty
diff --git a/html/pfappserver/root/src/views/Configuration/monit/_components/AlertServices.vue b/html/pfappserver/root/src/views/Configuration/monit/_components/AlertServices.vue
index 3a5d701e4113..519a62d5a0f5 100644
--- a/html/pfappserver/root/src/views/Configuration/monit/_components/AlertServices.vue
+++ b/html/pfappserver/root/src/views/Configuration/monit/_components/AlertServices.vue
@@ -6,15 +6,18 @@
       <span v-html="$t('Creating or modifying the monit configuration requires to restart the monit service.')"></span>
     </p>
     <base-button-system-service service="monit" restart start stop
-      :disabled="isLoading" class="mr-1" size="sm"/>
+      :disabled="isLoading" class="mr-1" size="sm" />
+    <base-button-systemd-update class="ml-1" size="sm" />
   </b-alert>
 </template>
 <script>
 import {
-  BaseButtonSystemService
+  BaseButtonSystemService,
+  BaseButtonSystemdUpdate,
 } from '@/components/new/'
 const components = {
-  BaseButtonSystemService
+  BaseButtonSystemService,
+  BaseButtonSystemdUpdate,
 }
 
 const props = {
diff --git a/html/pfappserver/root/src/views/Status/services/_components/TheView.vue b/html/pfappserver/root/src/views/Status/services/_components/TheView.vue
index f724843d6a87..6fdfef665e48 100644
--- a/html/pfappserver/root/src/views/Status/services/_components/TheView.vue
+++ b/html/pfappserver/root/src/views/Status/services/_components/TheView.vue
@@ -4,6 +4,9 @@
       <h4 class="d-inline mb-0" v-t="'Services'"></h4>
     </b-card-header>
     <div class="card-body">
+      <div class="d-flex mb-3">
+        <base-button-systemd-update class="ml-1" />
+      </div>
       <b-table ref="tableRef"
         :busy="isLoading"
         :hover="serviceItems.length > 0"
@@ -95,6 +98,7 @@
 
 <script>
 import {
+  BaseButtonSystemdUpdate,
   BaseService,
   BaseTableEmpty
 } from '@/components/new/'
@@ -102,6 +106,7 @@ import BaseButtonBulkActions from './BaseButtonBulkActions'
 
 const components = {
   BaseButtonBulkActions,
+  BaseButtonSystemdUpdate,
   BaseService,
   BaseTableEmpty
 }