Use client API to get resource use for a server

Author: DaneEveritt

app/Http/Controllers/Base/DashboardController.php

@@ -3,6 +3,8 @@
 namespace Pterodactyl\Transformers\Api\Client;
 
 use Pterodactyl\Models\Server;
+use GuzzleHttp\Exception\RequestException;
+use Pterodactyl\Exceptions\Http\Connection\DaemonConnectionException;
 use Pterodactyl\Contracts\Repository\Daemon\ServerRepositoryInterface;
 
 class StatsTransformer extends BaseClientTransformer
@@ -36,6 +38,8 @@ public function getResourceName(): string
      *
      * @param \Pterodactyl\Models\Server $model
      * @return array
+     *
+     * @throws \Pterodactyl\Exceptions\Http\Connection\DaemonConnectionException
      */
     public function transform(Server $model)
     {
@@ -61,7 +65,10 @@ public function transform(Server $model)
             'disk' => [
                 'current' => round(object_get($object, 'proc.disk.used', 0)),
                 'limit' => floatval($model->disk),
+                'io' => $model->io,
             ],
+            'installed' => $model->installed === 1,
+            'suspended' => (bool) $model->suspended,
         ];
     }
 

app/Transformers/Api/Client/StatsTransformer.php

@@ -19,7 +19,6 @@
                     v-for="(server, index) in servers.models"
                     v-bind:key="index"
                     v-bind:server="server"
-                    v-bind:resources="resources[server.uuid]"
             />
         </transition-group>
     </div>
@@ -39,14 +38,26 @@
                 loading: true,
                 search: '',
                 servers: new ServerCollection,
-                resources: {},
             }
         },
 
-        mounted: function () {
+        /**
+         * Start loading the servers before the DOM $.el is created.
+         */
+        created: function () {
             this.loadServers();
         },
 
+        /**
+         * Once the page is mounted set a function to run every 5 seconds that will
+         * iterate through the visible servers and fetch their resource usage.
+         */
+        mounted: function () {
+            setInterval(() => {
+                this.servers.each(this.getResourceUse)
+            }, 10000);
+        },
+
         methods: {
             /**
              * Load the user's servers and render them onto the dashboard.
@@ -64,8 +75,9 @@
                     .then(response => {
                         this.servers = new ServerCollection;
                         response.data.data.forEach(obj => {
-                            this.resources[obj.attributes.uuid] = { cpu: 0, memory: 0 };
-                            this.servers.add(obj.attributes);
+                            this.getResourceUse(
+                                this.servers.add(obj.attributes)
+                            );
                         });
 
                         if (this.servers.models.length === 0) {
@@ -93,6 +105,25 @@
             onChange: _.debounce(function () {
                 this.loadServers(this.$data.search);
             }, 500),
+
+            /**
+             * Get resource usage for an individual server for rendering purposes.
+             *
+             * @param {Server} server
+             */
+            getResourceUse: function (server) {
+                window.axios.get(this.route('api.client.servers.resources', { server: server.identifier }))
+                    .then(response => {
+                        if (!(response.data instanceof Object)) {
+                            throw new Error('Received an invalid response object back from status endpoint.');
+                        }
+
+                        window.events.$emit(`server:${server.uuid}::resources`, response.data.attributes);
+                    })
+                    .catch(err => {
+                        console.error(err);
+                    });
+            },
         }
     };
 </script>

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

@@ -2,7 +2,7 @@
     <div class="server-box animate fadein">
         <router-link :to="{ name: 'server', params: { id: server.identifier }}" class="content">
             <div class="float-right">
-                <div class="indicator"></div>
+                <div class="indicator" :class="status"></div>
             </div>
             <div class="mb-4">
                 <div class="text-black font-bold text-xl">
@@ -19,11 +19,11 @@
             </div>
             <div class="mb-4 flex text-center">
                 <div class="inline-block border border-grey-lighter border-l-0 p-4 flex-1">
-                    <span class="font-bold text-xl">{{ resources.cpu > 0 ? resources.cpu : '&mdash;' }}</span>
+                    <span class="font-bold text-xl">{{ cpu > 0 ? cpu : '&mdash;' }}</span>
                     <span class="font-light text-sm">%</span>
                 </div>
                 <div class="inline-block border border-grey-lighter border-l-0 border-r-0 p-4 flex-1">
-                    <span class="font-bold text-xl">{{ resources.memory > 0 ? resources.memory : '&mdash;' }}</span>
+                    <span class="font-bold text-xl">{{ memory > 0 ? memory : '&mdash;' }}</span>
                     <span class="font-light text-sm">Mb</span>
                 </div>
             </div>
@@ -38,13 +38,76 @@
 </template>
 
 <script>
-    import { Server } from '../../models/server';
+    import get from 'lodash/get';
 
     export default {
         name: 'server-box',
         props: {
-            server: { type: Server, required: true },
-            resources: { type: Object, required: true },
+            server: { type: Object, required: true },
+        },
+
+        data: function () {
+            return {
+                resources: undefined,
+                cpu: 0,
+                memory: 0,
+                status: '',
+            };
+        },
+
+        created: function () {
+            window.events.$on(`server:${this.server.uuid}::resources`, data => {
+                this.resources = data;
+                this.status = this.getServerStatus();
+
+                this.memory = Number(get(data, 'memory.current', 0)).toFixed(0);
+                this.cpu = this._calculateCpu(
+                    Number(get(data, 'cpu.current', 0)),
+                    Number(this.server.limits.cpu)
+                );
+            });
+        },
+
+        methods: {
+            /**
+             * Set the CSS to use for displaying the server's current status.
+             */
+            getServerStatus: function () {
+                if (!(this.resources instanceof Object)) {
+                    return '';
+                }
+
+                if (!this.resources.installed || this.resources.suspended) {
+                    return '';
+                }
+
+                switch (this.resources.state) {
+                    case 'off':
+                        return 'offline';
+                    case 'on':
+                    case 'starting':
+                    case 'stopping':
+                        return 'online';
+                    default:
+                        return '';
+                }
+            },
+
+            /**
+             * Calculate the CPU usage for a given server relative to their set maximum.
+             *
+             * @param {Number} current
+             * @param {Number} max
+             * @return {Number}
+             * @private
+             */
+            _calculateCpu: function (current, max) {
+                if (max === 0) {
+                    return parseFloat(current.toFixed(1));
+                }
+
+                return parseFloat((current / max * 100).toFixed(1));
+            }
         }
     };
 </script>

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

@@ -23,7 +23,7 @@
 Route::group(['prefix' => '/servers/{server}', 'middleware' => [AuthenticateClientAccess::class]], function () {
     Route::get('/', 'Servers\ServerController@index')->name('api.client.servers.view');
     Route::get('/utilization', 'Servers\ResourceUtilizationController@index')
-        ->middleware(['throttle:15,1'])
+        ->middleware(['throttle:20,1'])
         ->name('api.client.servers.resources');
 
     Route::post('/command', 'Servers\CommandController@index')->name('api.client.servers.command');

routes/api-client.php

@@ -7,8 +7,6 @@
  * https://opensource.org/licenses/MIT
  */
 Route::get('/', 'IndexController@index')->name('index');
-Route::get('/dashboard/servers', 'DashboardController@servers')->name('dashboard.servers');
-Route::get('/status/{server}', 'IndexController@status')->name('index.status');
 
 /*
 |--------------------------------------------------------------------------