Use the client API to load servers on the listing page

resources/assets/scripts/bootstrap.js

@@ -21,6 +21,14 @@ window.axios = require('axios');
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 window.axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.token || '';
 
+if (typeof phpdebugbar !== 'undefined') {
+    window.axios.interceptors.response.use(function (response) {
+        phpdebugbar.ajaxHandler.handle(response.request);
+
+        return response;
+    });
+}
+
 /**
  * Next we will register the CSRF Token as a common header with Axios so that
  * all outgoing HTTP requests automatically have it attached. This is just

resources/assets/scripts/components/dashboard/Dashboard.vue

@@ -9,7 +9,7 @@
         </div>
         <transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start">
             <div class="server-box" :key="index" v-for="(server, index) in servers">
-                <router-link :to="{ name: 'server', params: { id: server.uuidShort }}" class="content">
+                <router-link :to="{ name: 'server', params: { id: server.identifier }}" class="content">
                     <div class="float-right">
                         <div class="indicator"></div>
                     </div>
@@ -49,6 +49,7 @@
 </template>
 
 <script>
+    import Server from '../../models/server';
     import _ from 'lodash';
 
     export default {
@@ -73,11 +74,14 @@
             loadServers: function (query = '') {
                 const self = this;
 
-                window.axios.get(this.route('dashboard.servers'), {
+                window.axios.get(this.route('api.client.index'), {
                     params: { query },
                 })
                     .then(function (response) {
-                        self.servers = response.data;
+                        self.servers = [];
+                        response.data.data.forEach(function (obj) {
+                           self.servers.push(new Server().fill(obj.attributes))
+                        });
                     })
                     .catch(function (error) {
                         console.error(error);

resources/assets/scripts/models/allocation.js

@@ -0,0 +1,19 @@
+const Allocation = function () {
+    this.ip = null;
+    this.port = null;
+};
+
+/**
+ * Return a new allocation model.
+ *
+ * @param obj
+ * @returns {Allocation}
+ */
+Allocation.prototype.fill = function (obj) {
+    this.ip = obj.ip || null;
+    this.port = obj.port || null;
+
+    return this;
+};
+
+export default Allocation;

resources/assets/scripts/models/server.js

@@ -0,0 +1,40 @@
+import Allocation from './allocation';
+
+const Server = function () {
+    this.identifier = null;
+    this.uuid = null;
+    this.name = '';
+    this.description = '';
+    this.allocation = null;
+    this.limits = {
+        memory: 0,
+        swap: 0,
+        disk: 0,
+        io: 0,
+        cpu: 0,
+    };
+    this.feature_limits = {
+        databases: 0,
+        allocations: 0,
+    };
+};
+
+/**
+ * Return a new server model filled with data from the provided object.
+ *
+ * @param {object} obj
+ * @returns {Server}
+ */
+Server.prototype.fill = function (obj) {
+    this.identifier = obj.identifier;
+    this.uuid = obj.uuid;
+    this.name = obj.name;
+    this.description = obj.description;
+    this.allocation = new Allocation().fill(obj.allocation || {});
+    this.limits = obj.limits;
+    this.feature_limits = obj.feature_limits;
+
+    return this;
+};
+
+export default Server;