From b148e08c19967d9e6d6dc93056164cb551d68625 Mon Sep 17 00:00:00 2001
From: Maxime Beauchamp <15185355+baktun14@users.noreply.github.com>
Date: Fri, 8 Dec 2023 16:23:49 -0500
Subject: [PATCH] Features/resources bids (#59)

* Update @akashnetwork/akashjs version to 0.5.0

* map resources offer to bids

* Refactor BidRow component styles

* added gpu in bid row
---
 .../newDeploymentWizard/BidGroup.tsx          |   8 +-
 .../components/newDeploymentWizard/BidRow.tsx | 159 +++++++++++-------
 deploy-web/src/queries/useBidQuery.ts         |   3 +-
 deploy-web/src/types/deployment.ts            | 105 +++++-------
 4 files changed, 151 insertions(+), 124 deletions(-)

diff --git a/deploy-web/src/components/newDeploymentWizard/BidGroup.tsx b/deploy-web/src/components/newDeploymentWizard/BidGroup.tsx
index 5b96c59c6..cf84abdac 100644
--- a/deploy-web/src/components/newDeploymentWizard/BidGroup.tsx
+++ b/deploy-web/src/components/newDeploymentWizard/BidGroup.tsx
@@ -158,9 +158,11 @@ export const BidGroup: React.FunctionComponent<Props> = ({
                   <TableCell width="10%" align="center">
                     Provider
                   </TableCell>
-                  <TableCell width="10%" align="center">
-                    Favorite
-                  </TableCell>
+                  {deploymentDetail.gpuAmount > 0 && (
+                    <TableCell width="10%" align="center">
+                      GPU
+                    </TableCell>
+                  )}
                   <TableCell width="10%" align="center">
                     Audited
                   </TableCell>
diff --git a/deploy-web/src/components/newDeploymentWizard/BidRow.tsx b/deploy-web/src/components/newDeploymentWizard/BidRow.tsx
index c57335e32..e190ceebb 100644
--- a/deploy-web/src/components/newDeploymentWizard/BidRow.tsx
+++ b/deploy-web/src/components/newDeploymentWizard/BidRow.tsx
@@ -1,4 +1,4 @@
-import { Radio, Box, Chip, TableCell, CircularProgress, Typography } from "@mui/material";
+import { Radio, Box, Chip, TableCell, CircularProgress, Typography, lighten, darken } from "@mui/material";
 import CloudOffIcon from "@mui/icons-material/CloudOff";
 import { useEffect } from "react";
 import { useLocalNotes } from "@src/context/LocalNoteProvider";
@@ -30,15 +30,16 @@ const useStyles = makeStyles()(theme => ({
     }
   },
   selectedRow: {
-    backgroundColor: `${theme.palette.mode === "dark" ? theme.palette.grey[700] : theme.palette.grey[400]} !important`
+    backgroundColor: `${theme.palette.mode === "dark" ? darken(theme.palette.success.main, 0.8) : lighten(theme.palette.success.main, 0.8)} !important`,
+    border: "1px solid"
   },
   secondaryText: {
     fontSize: ".8rem"
   },
   chip: {
-    height: ".9rem",
-    fontSize: ".7rem",
-    lineHeight: ".7rem"
+    height: "1rem",
+    fontSize: ".75rem",
+    lineHeight: ".75rem"
   },
   priceTooltip: {
     display: "flex",
@@ -52,7 +53,8 @@ const useStyles = makeStyles()(theme => ({
     marginBottom: "4px"
   },
   providerOffline: {
-    marginTop: "4px"
+    marginTop: "4px",
+    fontSize: ".85rem"
   },
   stateIcon: {
     marginRight: ".5rem"
@@ -61,11 +63,19 @@ const useStyles = makeStyles()(theme => ({
     color: theme.palette.secondary.main
   },
   stateInactive: {
-    color: theme.palette.primary.main
+    color: theme.palette.primary.contrastText
   },
   flexCenter: {
     display: "flex",
     alignItems: "center"
+  },
+  gpuChip: {
+    height: "16px",
+    fontSize: ".65rem",
+    fontWeight: "bold"
+  },
+  gpuChipLabel: {
+    padding: "0 4px"
   }
 }));
 
@@ -84,7 +94,6 @@ export const BidRow: React.FunctionComponent<Props> = ({ bid, selectedBid, handl
   const isFavorite = favoriteProviders.some(x => provider.owner === x);
   const isCurrentBid = selectedBid?.id === bid.id;
   const {
-    data: providerStatus,
     isLoading: isLoadingStatus,
     refetch: fetchProviderStatus,
     error
@@ -92,6 +101,17 @@ export const BidRow: React.FunctionComponent<Props> = ({ bid, selectedBid, handl
     enabled: false,
     retry: false
   });
+  const gpuModels = bid.resourcesOffer
+    .map(x =>
+      x.resources.gpu.attributes
+        .filter(y => y.key.startsWith("vendor/"))
+        .map(y => {
+          const modelKey = y.key.split("/");
+          // vendor/nvidia/model/h100 -> nvidia,h100
+          return { vendor: modelKey[1], model: modelKey[modelKey.length - 1] };
+        })
+    )
+    .flat();
 
   useEffect(() => {
     if (provider) {
@@ -149,29 +169,46 @@ export const BidRow: React.FunctionComponent<Props> = ({ bid, selectedBid, handl
 
       <TableCell align="center">{provider.uptime7d ? <Uptime value={provider.uptime7d} /> : <div>-</div>}</TableCell>
 
-      <TableCell align="center">
-        {provider.name ? (
-          <Link href={UrlService.providerDetail(provider.owner)} onClick={e => e.stopPropagation()}>
-            {provider.name?.length > 20 ? (
-              <CustomTooltip title={provider.name}>
-                <span>{getSplitText(provider.name, 4, 13)}</span>
-              </CustomTooltip>
+      <TableCell align="left">
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          <FavoriteButton isFavorite={isFavorite} onClick={onStarClick} />
+          <Box sx={{ marginLeft: ".5rem" }}>
+            {provider.name ? (
+              <Link href={UrlService.providerDetail(provider.owner)} onClick={e => e.stopPropagation()}>
+                {provider.name?.length > 20 ? (
+                  <CustomTooltip title={provider.name}>
+                    <span>{getSplitText(provider.name, 4, 13)}</span>
+                  </CustomTooltip>
+                ) : (
+                  provider.name
+                )}
+              </Link>
             ) : (
-              provider.name
+              <div>
+                <CustomTooltip title={provider.hostUri}>
+                  <div>{getSplitText(provider.hostUri, 4, 13)}</div>
+                </CustomTooltip>
+              </div>
             )}
-          </Link>
-        ) : (
-          <div>
-            <CustomTooltip title={provider.hostUri}>
-              <div>{getSplitText(provider.hostUri, 4, 13)}</div>
-            </CustomTooltip>
-          </div>
-        )}
+          </Box>
+        </Box>
       </TableCell>
 
-      <TableCell align="center">
-        <FavoriteButton isFavorite={isFavorite} onClick={onStarClick} />
-      </TableCell>
+      {gpuModels.length > 0 && (
+        <TableCell align="center">
+          {gpuModels.map((gpu, i) => (
+            <Chip
+              key={`${gpu.vendor}-${gpu.model}`}
+              label={`${gpu.vendor}-${gpu.model}`}
+              className={classes.gpuChip}
+              classes={{ label: classes.gpuChipLabel }}
+              sx={{ marginRight: i < gpuModels.length ? ".2rem" : 0 }}
+              color="secondary"
+              size="small"
+            />
+          ))}
+        </TableCell>
+      )}
 
       <TableCell align="center">
         {provider.isAudited ? (
@@ -191,39 +228,45 @@ export const BidRow: React.FunctionComponent<Props> = ({ bid, selectedBid, handl
       </TableCell>
 
       <TableCell align="center">
-        {isLoadingStatus && (
-          <Box sx={{ height: "42px", display: "flex", alignItems: "center", justifyContent: "center" }}>
-            <CircularProgress size="1.5rem" color="secondary" />
-          </Box>
-        )}
-        {!isLoadingStatus && error && !isSendingManifest && (
-          <div className={cx(classes.flexCenter, classes.providerOffline)}>
-            <CloudOffIcon className={cx(classes.stateIcon, classes.stateInactive)} fontSize="small" />
-            <strong>OFFLINE</strong>
-          </div>
-        )}
+        <Box sx={{ height: "38px", display: "flex", alignItems: "center", justifyContent: "center" }}>
+          {isLoadingStatus && (
+            <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
+              <CircularProgress size="1rem" color="secondary" />
+            </Box>
+          )}
+          {!isLoadingStatus && error && !isSendingManifest && (
+            <div className={cx(classes.flexCenter, classes.providerOffline)}>
+              <CloudOffIcon className={cx(classes.stateIcon, classes.stateInactive)} sx={{ fontSize: "1rem" }} />
+              <Typography variant="caption">OFFLINE</Typography>
+            </div>
+          )}
 
-        {!isLoadingStatus && !error && !isSendingManifest && (
-          <>
-            {bid.state !== "open" || disabled ? (
-              <Box>
-                <Chip label={bid.state} size="small" color={bid.state === "active" ? "success" : "error"} classes={{ root: classes.chip }} />
-              </Box>
-            ) : (
-              <Radio
-                checked={isCurrentBid}
-                onChange={() => handleBidSelected(bid)}
-                value={bid.id}
-                name="radio-button-demo"
-                disabled={bid.state !== "open" || disabled}
-                size="medium"
-                color="success"
-              />
-            )}
-          </>
-        )}
+          {!isLoadingStatus && !error && !isSendingManifest && (
+            <>
+              {bid.state !== "open" || disabled ? (
+                <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
+                  <Chip label={bid.state} size="medium" color={bid.state === "active" ? "success" : "error"} classes={{ root: classes.chip }} />
+                </Box>
+              ) : (
+                <Radio
+                  checked={isCurrentBid}
+                  onChange={() => handleBidSelected(bid)}
+                  value={bid.id}
+                  name="radio-button-demo"
+                  disabled={bid.state !== "open" || disabled}
+                  size="small"
+                  color="success"
+                />
+              )}
+            </>
+          )}
 
-        {isSendingManifest && isCurrentBid && <Chip label="Deploying! 🚀" size="small" color="success" />}
+          {isSendingManifest && isCurrentBid && (
+            <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
+              <Chip label="Deploying! 🚀" size="small" color="success" />
+            </Box>
+          )}
+        </Box>
       </TableCell>
     </CustomTableRow>
   );
diff --git a/deploy-web/src/queries/useBidQuery.ts b/deploy-web/src/queries/useBidQuery.ts
index 64d3cecd5..6bf20028b 100644
--- a/deploy-web/src/queries/useBidQuery.ts
+++ b/deploy-web/src/queries/useBidQuery.ts
@@ -18,7 +18,8 @@ async function getBidList(apiEndpoint: string, address: string, dseq: string): P
     gseq: b.bid.bid_id.gseq,
     oseq: b.bid.bid_id.oseq,
     price: b.bid.price,
-    state: b.bid.state
+    state: b.bid.state,
+    resourcesOffer: b.bid.resources_offer
   }));
 }
 
diff --git a/deploy-web/src/types/deployment.ts b/deploy-web/src/types/deployment.ts
index 24a1bd013..d7d105218 100644
--- a/deploy-web/src/types/deployment.ts
+++ b/deploy-web/src/types/deployment.ts
@@ -58,6 +58,39 @@ export interface RpcDeployment {
 
 type DeploymentGroup = DeploymentGroup_v2 | DeploymentGroup_v3;
 
+interface DeploymentResource_V2 {
+  cpu: {
+    units: {
+      val: string;
+    };
+    attributes: {key: string, value: string}[];
+  };
+  gpu: {
+    units: {
+      val: string;
+    };
+    attributes: {key: string, value: string}[];
+  };
+  memory: {
+    quantity: {
+      val: string;
+    };
+    attributes: {key: string, value: string}[];
+  };
+  storage: Array<{
+    name: string;
+    quantity: {
+      val: string;
+    };
+    attributes: {key: string, value: string}[];
+  }>;
+  endpoints: Array<{
+    kind: string;
+    sequence_number: number;
+  }>;
+}
+interface DeploymentResource_V3 extends DeploymentResource_V2 {}
+
 interface DeploymentGroup_v2 {
   group_id: {
     owner: string;
@@ -78,37 +111,7 @@ interface DeploymentGroup_v2 {
       }>;
     };
     resources: Array<{
-      resources: {
-        cpu: {
-          units: {
-            val: string;
-          };
-          attributes: any[];
-        };
-        gpu: {
-          units: {
-            val: string;
-          };
-          attributes: any[];
-        };
-        memory: {
-          quantity: {
-            val: string;
-          };
-          attributes: any[];
-        };
-        storage: Array<{
-          name: string;
-          quantity: {
-            val: string;
-          };
-          attributes: any[];
-        }>;
-        endpoints: Array<{
-          kind: string;
-          sequence_number: number;
-        }>;
-      };
+      resources: DeploymentResource_V2;
       count: number;
       price: {
         denom: string;
@@ -139,37 +142,7 @@ interface DeploymentGroup_v3 {
       }>;
     };
     resources: Array<{
-      resource: {
-        cpu: {
-          units: {
-            val: string;
-          };
-          attributes: any[];
-        };
-        gpu: {
-          units: {
-            val: string;
-          };
-          attributes: any[];
-        };
-        memory: {
-          quantity: {
-            val: string;
-          };
-          attributes: any[];
-        };
-        storage: Array<{
-          name: string;
-          quantity: {
-            val: string;
-          };
-          attributes: any[];
-        }>;
-        endpoints: Array<{
-          kind: string;
-          sequence_number: number;
-        }>;
-      };
+      resource: DeploymentResource_V3;
       count: number;
       price: {
         denom: string;
@@ -300,6 +273,10 @@ export interface RpcBid {
       amount: string;
     };
     created_at: string;
+    resources_offer: Array<{
+      resources: DeploymentResource_V3;
+      count: number;
+    }>;
   };
   escrow_account: {
     id: {
@@ -337,4 +314,8 @@ export interface BidDto {
     amount: string;
   };
   state: string;
+  resourcesOffer: Array<{
+    resources: DeploymentResource_V3;
+    count: number;
+  }>;
 }