Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Features/resources bids #59

Merged
merged 4 commits into from
Dec 8, 2023
Merged

Features/resources bids #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5fdaacc
Update @akashnetwork/akashjs version to 0.5.0
baktun14 Dec 7, 2023
c55e27a
map resources offer to bids
baktun14 Dec 7, 2023
43dbe4e
Refactor BidRow component styles
baktun14 Dec 7, 2023
c978ea0
added gpu in bid row
baktun14 Dec 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions deploy-web/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 5 additions & 3 deletions deploy-web/src/components/newDeploymentWizard/BidGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
159 changes: 101 additions & 58 deletions deploy-web/src/components/newDeploymentWizard/BidRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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",
Expand All @@ -52,7 +53,8 @@ const useStyles = makeStyles()(theme => ({
marginBottom: "4px"
},
providerOffline: {
marginTop: "4px"
marginTop: "4px",
fontSize: ".85rem"
},
stateIcon: {
marginRight: ".5rem"
Expand All @@ -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"
}
}));

Expand All @@ -84,14 +94,24 @@ 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
} = useProviderStatus(provider?.hostUri, {
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) {
Expand Down Expand Up @@ -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 ? (
Expand All @@ -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>
);
Expand Down
3 changes: 2 additions & 1 deletion deploy-web/src/queries/useBidQuery.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}));
}

Expand Down
Loading