update api calls for Group and Service views

app/src/views/group/GroupCreate.vue

@@ -12,6 +12,7 @@
 <script>
 import { validationMixin } from 'vuelidate'
 
+import api from '@/api'
 import { required, alphalownum_ } from '@/helpers/validators'
 
 export default {
@@ -42,13 +43,14 @@ export default {
 
   methods: {
     onSubmit () {
-      this.$store.dispatch(
+      api.post(
-        'POST', { uri: 'users/groups', data: this.form, storeKey: 'groups' }
+        { uri: 'users/groups', storeKey: 'groups' },
+        this.form
       ).then(() => {
         this.$router.push({ name: 'group-list' })
-      }).catch(error => {
+      }).catch(err => {
-        this.error.groupname = error.message
+        if (err.name !== 'APIBadRequestError') throw err
-        this.isValid.groupname = false
+        this.serverError = err.message
       })
     }
   },

app/src/views/group/GroupList.vue

@@ -5,7 +5,7 @@
     :items="normalGroups"
     :filtered-items="filteredGroups"
     :queries="queries"
-    @queries-response="formatGroups"
+    @queries-response="onQueriesResponse"
     skeleton="card-form-skeleton"
   >
     <template #top-bar-buttons>
@@ -120,12 +120,17 @@ import BaseSelectize from '@/components/BaseSelectize'
 export default {
   name: 'GroupList',
 
+  components: {
+    ZoneSelectize,
+    BaseSelectize
+  },
+
   data () {
     return {
       queries: [
-        { uri: 'users' },
+        ['GET', { uri: 'users' }],
-        { uri: 'users/groups?full&include_primary_groups', storeKey: 'groups' },
+        ['GET', { uri: 'users/groups?full&include_primary_groups', storeKey: 'groups' }],
-        { uri: 'users/permissions?full', storeKey: 'permissions' }
+        ['GET', { uri: 'users/permissions?full', storeKey: 'permissions' }]
       ],
       search: '',
       permissions: undefined,
@@ -166,7 +171,7 @@ export default {
   },
 
   methods: {
-    formatGroups (users, allGroups, permissions) {
+    onQueriesResponse (users, allGroups, permissions) {
       // Do not use computed properties to get values from the store here to avoid auto
       // updates while modifying values.
       const normalGroups = {}
@@ -247,17 +252,12 @@ export default {
       const confirmed = await this.$askConfirmation(this.$i18n.t('confirm_delete', { name }))
       if (!confirmed) return
 
-      this.$store.dispatch('DELETE',
+      api.delete(
         { uri: 'users/groups', param: name, storeKey: 'groups' }
       ).then(() => {
         Vue.delete(this.normalGroups, name)
       })
     }
-  },
-
-  components: {
-    ZoneSelectize,
-    BaseSelectize
   }
 }
 </script>

app/src/views/service/ServiceInfo.vue

@@ -1,6 +1,6 @@
 <template>
   <view-base
-    :queries="queries" @queries-response="formatServiceData"
+    :queries="queries" @queries-response="onQueriesResponse"
     ref="view" skeleton="card-info-skeleton"
   >
     <!-- INFO CARD -->
@@ -82,8 +82,8 @@ export default {
   data () {
     return {
       queries: [
-        'services/' + this.name,
+        ['GET', 'services/' + this.name],
-        `services/${this.name}/log?number=50`
+        ['GET', `services/${this.name}/log?number=50`]
       ],
       // Service data
       infos: undefined,
@@ -96,7 +96,7 @@ export default {
   },
 
   methods: {
-    formatServiceData (
+    onQueriesResponse (
       // eslint-disable-next-line
       { status, description, start_on_boot, last_state_change, configuration },
       logs
@@ -126,7 +126,6 @@ export default {
         ? `services/${this.name}/restart`
         : 'services/' + this.name
 
-      // FIXME API doesn't return anything to the PUT so => json err
       api[method](uri).then(this.$refs.view.fetchQueries)
     },
 

app/src/views/service/ServiceList.vue

@@ -6,7 +6,7 @@
     :filtered-items="filteredServices"
     items-name="services"
     :queries="queries"
-    @queries-response="formatServices"
+    @queries-response="onQueriesResponse"
   >
     <b-list-group>
       <b-list-group-item
@@ -42,7 +42,9 @@ export default {
 
   data () {
     return {
-      queries: ['services'],
+      queries: [
+        ['GET', 'services']
+      ],
       search: '',
       services: undefined
     }
@@ -60,7 +62,7 @@ export default {
   },
 
   methods: {
-    formatServices (services) {
+    onQueriesResponse (services) {
       this.services = Object.keys(services).sort().map(name => {
         const service = services[name]
         if (service.last_state_change === 'unknown') {