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