11import React , { useEffect , useState } from 'react' ;
2- import tw from 'twin.macro' ;
2+ import tw , { TwStyle } from 'twin.macro' ;
33import { faCircle , faEthernet , faHdd , faMemory , faMicrochip , faServer } from '@fortawesome/free-solid-svg-icons' ;
44import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' ;
55import { bytesToHuman , megabytesToHuman } from '@/helpers' ;
@@ -13,6 +13,21 @@ interface Stats {
1313 disk : number ;
1414}
1515
16+ function statusToColor ( status : string | null , installing : boolean ) : TwStyle {
17+ if ( installing ) {
18+ status = '' ;
19+ }
20+
21+ switch ( status ) {
22+ case 'offline' :
23+ return tw `text-red-500` ;
24+ case 'running' :
25+ return tw `text-green-500` ;
26+ default :
27+ return tw `text-yellow-500` ;
28+ }
29+ }
30+
1631const ServerDetailsBlock = ( ) => {
1732 const [ stats , setStats ] = useState < Stats > ( { memory : 0 , cpu : 0 , disk : 0 } ) ;
1833
@@ -49,6 +64,7 @@ const ServerDetailsBlock = () => {
4964 } , [ instance , connected ] ) ;
5065
5166 const name = ServerContext . useStoreState ( state => state . server . data ! . name ) ;
67+ const isInstalling = ServerContext . useStoreState ( state => state . server . data ! . isInstalling ) ;
5268 const limits = ServerContext . useStoreState ( state => state . server . data ! . limits ) ;
5369 const primaryAllocation = ServerContext . useStoreState ( state => state . server . data ! . allocations . filter ( alloc => alloc . isDefault ) . map (
5470 allocation => ( allocation . alias || allocation . ip ) + ':' + allocation . port
@@ -65,10 +81,10 @@ const ServerDetailsBlock = () => {
6581 fixedWidth
6682 css = { [
6783 tw `mr-1` ,
68- status === 'offline' ? tw `text-red-500` : ( status === 'running' ? tw `text-green-500` : tw `text-yellow-500` ) ,
84+ statusToColor ( status , isInstalling ) ,
6985 ] }
7086 />
71- { ! status ? 'Connecting...' : status }
87+ { ! status ? 'Connecting...' : ( isInstalling ? 'Installing' : status ) }
7288 </ p >
7389 < CopyOnClick text = { primaryAllocation } >
7490 < p css = { tw `text-xs mt-2` } >
0 commit comments