Display pooled resources in the Hero component

Author: wzrdx

app/page.tsx

@@ -19,11 +19,13 @@ export default async function HomePage(props: {
         [key: string]: types.NodeState;
     } = response.result.nodes;
 
+    // console.log(response);
+
     const pagesCount: number = response.result.nodes_total_pages;
 
     return (
         <>
-            <Hero nodesTotalItems={response.result.nodes_total_items} />
+            <Hero nodesTotalItems={response.result.nodes_total_items} resourcesTotal={response.result.resources_total} />
 
             <Suspense fallback={<NodesListSkeleton />}>
                 <List nodes={nodes} pagesCount={pagesCount} currentPage={currentPage} />

app/server-components/Nodes/Hero.tsx

@@ -1,19 +1,56 @@
 import HeroEpochCard from '@/components/Hero/HeroEpochCard';
+import * as types from '@/typedefs/blockchain';
 import { Skeleton } from '@heroui/skeleton';
+import { round } from 'lodash';
 import { Suspense } from 'react';
 import R1MintedLastEpoch from '../R1MintedLastEpoch';
 import { BorderedCard } from '../shared/cards/BorderedCard';
 import { CardHorizontal } from '../shared/cards/CardHorizontal';
 import R1TotalSupply from '../shared/R1TotalSupply';
 
-export default async function Hero({ nodesTotalItems }) {
+export default async function Hero({
+    nodesTotalItems,
+    resourcesTotal,
+}: {
+    nodesTotalItems: number;
+    resourcesTotal: types.ResourcesTotal;
+}) {
     return (
         <div className="w-full">
             <BorderedCard>
                 <div className="card-title-big font-bold">Nodes</div>
 
                 <div className="flexible-row">
-                    <CardHorizontal label="Active Nodes" value={nodesTotalItems} isFlexible widthClasses="min-w-[192px]" />
+                    <CardHorizontal label="Active Nodes" value={nodesTotalItems} isFlexible widthClasses="min-w-[196px]" />
+
+                    <CardHorizontal
+                        label="CPU Cores Available"
+                        value={round(resourcesTotal.cpu_cores_avail, 1)}
+                        isFlexible
+                        widthClasses="min-w-[274px]"
+                    />
+
+                    <CardHorizontal
+                        label="Memory Available"
+                        value={
+                            <div>
+                                {round(resourcesTotal.mem_avail, 1)} <span className="text-slate-500">GB</span>
+                            </div>
+                        }
+                        isFlexible
+                        widthClasses="min-w-[302px]"
+                    />
+
+                    <CardHorizontal
+                        label="Disk Available"
+                        value={
+                            <div>
+                                {round(resourcesTotal.disk_avail, 1)} <span className="text-slate-500">GB</span>
+                            </div>
+                        }
+                        isFlexible
+                        widthClasses="min-w-[282px]"
+                    />
 
                     <CardHorizontal
                         label={
@@ -35,7 +72,7 @@ export default async function Hero({ nodesTotalItems }) {
                             }
                             value={<R1MintedLastEpoch />}
                             isFlexible
-                            widthClasses="min-w-[254px]"
+                            widthClasses="min-w-[300px]"
                         />
                     </Suspense>
 

app/server-components/Nodes/List.tsx

@@ -22,7 +22,7 @@ export default async function List({
         <div className="list-wrapper">
             <div className="list">
                 <ListHeader>
-                    <div className="min-w-[200px] lg:min-w-[228px]">Alias</div>
+                    <div className="min-w-[200px]">Alias</div>
                     <div className="min-w-[164px]">Addresses</div>
                     <div className="min-w-[244px]">License</div>
                     <div className="min-w-[112px]">Owner</div>

app/server-components/Nodes/NodeListNodeCard.tsx

@@ -34,7 +34,7 @@ export default async function NodeListNodeCard({
     return (
         <BorderedCard useCustomWrapper useFixedWidthLarge>
             <div className="row justify-between gap-3 py-2 md:py-3 lg:gap-6">
-                <Link href={`${routePath.node}/${node.eth_addr}`} className="group min-w-[200px] py-3 lg:min-w-[228px]">
+                <Link href={`${routePath.node}/${node.eth_addr}`} className="group min-w-[200px] py-3">
                     <div className="row gap-1.5">
                         <div className="overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium group-hover:text-primary lg:text-[15px]">
                             {node.alias}

app/server-components/shared/R1TotalSupply.tsx

@@ -7,7 +7,7 @@ export default async function R1TotalSupply() {
     return (
         <div className="text-lg text-primary md:text-xl">
             {R1TotalSupply !== undefined
-                ? `${parseFloat(Number(formatUnits(R1TotalSupply, 18)).toFixed(2)).toLocaleString()}`
+                ? `${parseFloat(Number(formatUnits(R1TotalSupply, 18)).toFixed(1)).toLocaleString()}`
                 : '...'}
         </div>
     );

app/server-components/shared/cards/CardHorizontal.tsx

@@ -21,7 +21,7 @@ export const CardHorizontal = ({
 }) => {
     return (
         <CardFlexible isFlexible={isFlexible} isDarker={isDarker} widthClasses={widthClasses}>
-            <div className="row w-full justify-between gap-4 px-4 py-4 sm:gap-6 md:gap-12 lg:px-6 lg:py-6">
+            <div className="row w-full justify-between gap-4 px-4 py-4 sm:gap-6 md:gap-10 lg:px-6 lg:py-6">
                 <div className="text-[15px] font-medium text-slate-500">{label}</div>
                 <div
                     className={clsx('text-right font-semibold', {

typedefs/blockchain.ts

@@ -92,6 +92,19 @@ type ServerInfo = {
     server_uptime: string;
 };
 
+type ResourcesTotal = {
+    cpu_cores: number;
+    cpu_cores_avail: number;
+    default_cuda: {
+        cpu: number;
+        'cuda:0': number;
+    };
+    disk_avail: number;
+    disk_total: number;
+    mem_avail: number;
+    mem_total: number;
+};
+
 type OraclesDefaultResult = {
     result: {
         nodes_total_items: number;
@@ -101,6 +114,7 @@ type OraclesDefaultResult = {
         nodes: {
             [key: R1Address | string]: NodeState;
         };
+        resources_total: ResourcesTotal;
         server_alias: string;
         server_version: string;
         server_time: string;
@@ -126,5 +140,6 @@ export type {
     OraclesAvailabilityResult,
     OraclesDefaultResult,
     R1Address,
+    ResourcesTotal,
     ServerInfo,
 };