Merge pull request #2781 from pterodactyl/matthewpi/server-details-patch-1

Show installing status instead of offline when a server is installing

app/Http/Requests/Api/Client/Servers/Network/NewAllocationRequest.php

@@ -2,8 +2,6 @@
 
 namespace Pterodactyl\Http\Requests\Api\Client\Servers\Network;
 
-use Illuminate\Support\Collection;
-use Pterodactyl\Models\Allocation;
 use Pterodactyl\Models\Permission;
 use Pterodactyl\Http\Requests\Api\Client\ClientApiRequest;
 
@@ -16,5 +14,4 @@ class NewAllocationRequest extends ClientApiRequest
     {
         return Permission::ACTION_ALLOCATION_CREATE;
     }
-
 }

resources/scripts/components/server/ServerDetailsBlock.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import tw from 'twin.macro';
+import tw, { TwStyle } from 'twin.macro';
 import { faCircle, faEthernet, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { bytesToHuman, megabytesToHuman } from '@/helpers';
@@ -13,6 +13,21 @@ interface Stats {
     disk: number;
 }
 
+function statusToColor (status: string|null, installing: boolean): TwStyle {
+    if (installing) {
+        status = '';
+    }
+
+    switch (status) {
+        case 'offline':
+            return tw`text-red-500`;
+        case 'running':
+            return tw`text-green-500`;
+        default:
+            return tw`text-yellow-500`;
+    }
+}
+
 const ServerDetailsBlock = () => {
     const [ stats, setStats ] = useState<Stats>({ memory: 0, cpu: 0, disk: 0 });
 
@@ -49,6 +64,7 @@ const ServerDetailsBlock = () => {
     }, [ instance, connected ]);
 
     const name = ServerContext.useStoreState(state => state.server.data!.name);
+    const isInstalling = ServerContext.useStoreState(state => state.server.data!.isInstalling);
     const limits = ServerContext.useStoreState(state => state.server.data!.limits);
     const primaryAllocation = ServerContext.useStoreState(state => state.server.data!.allocations.filter(alloc => alloc.isDefault).map(
         allocation => (allocation.alias || allocation.ip) + ':' + allocation.port
@@ -65,10 +81,10 @@ const ServerDetailsBlock = () => {
                     fixedWidth
                     css={[
                         tw`mr-1`,
-                        status === 'offline' ? tw`text-red-500` : (status === 'running' ? tw`text-green-500` : tw`text-yellow-500`),
+                        statusToColor(status, isInstalling),
                     ]}
                 />
-                &nbsp;{!status ? 'Connecting...' : status}
+                &nbsp;{!status ? 'Connecting...' : (isInstalling ? 'Installing' : status)}
             </p>
             <CopyOnClick text={primaryAllocation}>
                 <p css={tw`text-xs mt-2`}>