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