From e33b1792b1d7f0a685b643a3b27ff05339d3f7d0 Mon Sep 17 00:00:00 2001
From: Alex <admin@softwarenoob.com>
Date: Sat, 5 Jun 2021 18:40:48 +0300
Subject: [PATCH] Show CPU limit next to CPU usage (#3307)

---
 resources/scripts/components/dashboard/ServerRow.tsx   | 10 +++++++---
 .../scripts/components/server/ServerDetailsBlock.tsx   |  2 ++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/resources/scripts/components/dashboard/ServerRow.tsx b/resources/scripts/components/dashboard/ServerRow.tsx
index 2b33dbab..21240756 100644
--- a/resources/scripts/components/dashboard/ServerRow.tsx
+++ b/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>
     );
-};
+};
\ No newline at end of file
diff --git a/resources/scripts/components/server/ServerDetailsBlock.tsx b/resources/scripts/components/server/ServerDetailsBlock.tsx
index 68c57444..6df4a764 100644
--- a/resources/scripts/components/server/ServerDetailsBlock.tsx
+++ b/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)}