Show CPU limit next to CPU usage (pterodactyl#3307)

Author: trenutoo

resources/scripts/components/dashboard/ServerRow.tsx

@@ -76,6 +76,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
 
     const diskLimit = server.limits.disk !== 0 ? megabytesToHuman(server.limits.disk) : 'Unlimited';
     const memoryLimit = server.limits.memory !== 0 ? megabytesToHuman(server.limits.memory) : 'Unlimited';
+    const cpuLimit = server.limits.cpu !== 0 ? server.limits.cpu + ' %' : 'Unlimited';
 
     return (
         <StatusIndicatorBox as={Link} to={`/server/${server.id}`} className={className} $status={stats?.status}>
@@ -130,12 +131,15 @@ export default ({ server, className }: { server: Server; className?: string }) =
                             <Spinner size={'small'}/>
                     :
                     <React.Fragment>
-                        <div css={tw`flex-1 flex md:ml-4 sm:flex hidden justify-center`}>
+                        <div css={tw`flex-1 ml-4 sm:block hidden`}>
+                          <div css={tw`flex justify-center`}>
                             <Icon icon={faMicrochip} $alarm={alarms.cpu}/>
                             <IconDescription $alarm={alarms.cpu}>
-                                {stats.cpuUsagePercent} %
+                                {stats.cpuUsagePercent.toFixed(2)} %
                             </IconDescription>
                         </div>
+                        <p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {cpuLimit}</p>
+                        </div>
                         <div css={tw`flex-1 ml-4 sm:block hidden`}>
                             <div css={tw`flex justify-center`}>
                                 <Icon icon={faMemory} $alarm={alarms.memory}/>
@@ -160,4 +164,4 @@ export default ({ server, className }: { server: Server; className?: string }) =
             <div className={'status-bar'}/>
         </StatusIndicatorBox>
     );
-};
+};

resources/scripts/components/server/ServerDetailsBlock.tsx

@@ -74,6 +74,7 @@ const ServerDetailsBlock = () => {
 
     const diskLimit = limits.disk ? megabytesToHuman(limits.disk) : 'Unlimited';
     const memoryLimit = limits.memory ? megabytesToHuman(limits.memory) : 'Unlimited';
+    const cpuLimit = limits.cpu ? limits.cpu + '%' : 'Unlimited';
 
     return (
         <TitledGreyBox css={tw`break-words`} title={name} icon={faServer}>
@@ -96,6 +97,7 @@ const ServerDetailsBlock = () => {
             </CopyOnClick>
             <p css={tw`text-xs mt-2`}>
                 <FontAwesomeIcon icon={faMicrochip} fixedWidth css={tw`mr-1`}/> {stats.cpu.toFixed(2)}%
+                <span css={tw`text-neutral-500`}> / {cpuLimit}</span>
             </p>
             <p css={tw`text-xs mt-2`}>
                 <FontAwesomeIcon icon={faMemory} fixedWidth css={tw`mr-1`}/> {bytesToHuman(stats.memory)}