From f9a1bc6c9b466e6f980ba7810a50bf22408df24c Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Fri, 4 Dec 2020 09:48:47 -0700
Subject: [PATCH] Show installing status instead of offline when a server is
 installing

---
 .../Servers/Network/NewAllocationRequest.php  |  3 ---
 .../components/server/ServerDetailsBlock.tsx  | 22 ++++++++++++++++---
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/app/Http/Requests/Api/Client/Servers/Network/NewAllocationRequest.php b/app/Http/Requests/Api/Client/Servers/Network/NewAllocationRequest.php
index 7628afaaf..4a29378dd 100644
--- a/app/Http/Requests/Api/Client/Servers/Network/NewAllocationRequest.php
+++ b/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;
     }
-
 }
diff --git a/resources/scripts/components/server/ServerDetailsBlock.tsx b/resources/scripts/components/server/ServerDetailsBlock.tsx
index 321c01943..0d87089c1 100644
--- a/resources/scripts/components/server/ServerDetailsBlock.tsx
+++ b/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`}>