add ServiceList view and ServiceInfo base file + routes

app/src/locales/en.json

@@ -274,6 +274,7 @@
     "search": {
         "domain": "Search for domains...",
         "group": "Search for groups...",
+        "service": "Search for services",
         "user": "Search for users..."
     },
     "search_for_apps": "Search for apps...",

app/src/routes.js

@@ -3,6 +3,7 @@ import Login from './views/Login'
 import { UserList, UserCreate, UserInfo, UserEdit } from './views/user'
 import { GroupList, GroupCreate } from './views/group'
 import { DomainList, DomainAdd, DomainInfo, DomainDns, DomainCert } from './views/domain'
+import { ServiceList, ServiceInfo } from './views/service'
 
 const routes = [
   { name: 'home', path: '/', component: Home },
@@ -142,6 +143,32 @@ const routes = [
         { name: 'domain-cert', trad: 'certificate' }
       ]
     }
+  },
+
+  /* ──────────╮
+   │  SERVICE  │
+   ╰────────── */
+  {
+    name: 'service-list',
+    path: '/services',
+    component: ServiceList,
+    meta: {
+      breadcrumb: [
+        { name: 'service-list', trad: 'services' }
+      ]
+    }
+  },
+  {
+    name: 'service-info',
+    path: '/services/:name',
+    component: ServiceInfo,
+    props: true,
+    meta: {
+      breadcrumb: [
+        { name: 'service-list', trad: 'services' },
+        { name: 'service-info', param: 'name' }
+      ]
+    }
   }
 ]
 

app/src/views/Home.vue

@@ -24,7 +24,7 @@ export default {
         { id: 1, routeName: 'domain-list', icon: 'globe', translation: 'domains' },
         { id: 2, routeName: 'apps', icon: 'cubes', translation: 'applications' },
         { id: 3, routeName: 'update', icon: 'refresh', translation: 'system_update' },
-        { id: 4, routeName: 'services', icon: 'cog', translation: 'services' },
+        { id: 4, routeName: 'service-list', icon: 'cog', translation: 'services' },
         { id: 5, routeName: 'tools', icon: 'wrench', translation: 'tools' },
         { id: 6, routeName: 'diagnosis', icon: 'stethoscope', translation: 'diagnosis' },
         { id: 7, routeName: 'backup', icon: 'archive', translation: 'backup' }

app/src/views/domain/DomainAdd.vue

@@ -72,7 +72,7 @@ import BasicForm from '@/components/BasicForm'
 import AdressInputSelect from '@/components/AdressInputSelect'
 
 export default {
-  name: 'GroupCreate',
+  name: 'DomainAdd',
 
   data () {
     return {

app/src/views/service/ServiceInfo.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="service-info">
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ServiceInfo',
+
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

app/src/views/service/ServiceList.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="service-list">
+    <div class="actions">
+      <b-input-group>
+        <b-input-group-prepend is-text>
+          <icon iname="search" />
+        </b-input-group-prepend>
+        <b-form-input id="search-service" v-model="search" :placeholder="$t('search.service')" />
+      </b-input-group>
+    </div>
+
+    <b-list-group v-if="filteredServices">
+      <b-list-group-item
+        v-for="{ name, description, status, last_state_change } in filteredServices"
+        :key="name || service"
+        :to="{ name: 'service-info', params: { name }}"
+        class="d-flex justify-content-between align-items-center pr-0"
+      >
+        <div class="w-100">
+          <h5>{{ name }} <small>{{ description }}</small></h5>
+          <p class="mb-0">
+            <span :class="status === 'running' ? 'text-success' : 'text-danger'">
+              <icon :iname="status === 'running' ? 'check-circle' : 'times'" />
+              {{ status }}
+            </span>
+            <!-- FIXME format date to: (now - date) as words -->
+            {{ $t('since') }} {{ last_state_change }}
+          </p>
+        </div>
+        <icon iname="chevron-right" class="lg fs-sm ml-auto" />
+      </b-list-group-item>
+    </b-list-group>
+  </div>
+</template>
+
+<script>
+import api from '@/helpers/api'
+
+export default {
+  name: 'ServiceList',
+
+  data: function () {
+    return {
+      search: '',
+      services: undefined
+    }
+  },
+
+  computed: {
+    filteredServices () {
+      if (!this.services) return
+      const search = this.search.toLowerCase()
+      return this.services.filter(({ name }) => {
+        return name.toLowerCase().includes(search)
+      })
+    }
+  },
+
+  methods: {
+    fetchData () {
+      // simply use the api helper since we will not store the request's result.
+      api.get('services').then(servicesData => {
+        this.services = Object.keys(servicesData).sort().map(name => {
+          const service = servicesData[name]
+          if (service.last_state_change === 'unknown') {
+            service.last_state_change = 0
+          }
+          return { ...service, name }
+        })
+      })
+    }
+  },
+
+  created () {
+    this.fetchData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@include media-breakpoint-down(sm) {
+   h5 small {
+     display: block;
+   }
+}
+</style>

app/src/views/service/index.js

@@ -0,0 +1,2 @@
+export { default as ServiceList } from './ServiceList'
+export { default as ServiceInfo } from './ServiceInfo'