features/rent-gpu-form

api/src/caching/helpers.ts

@@ -54,6 +54,7 @@ export const cacheKeys = {
   getAuditors: "getAuditors",
   getProviderList: "getProviderList",
   getChainStats: "getChainStats",
+  getProviderRegions: "getProviderRegions",
   getMainnetNodes: "getMainnetNodes",
   getTestnetNodes: "getTestnetNodes",
   getSandboxNodes: "getSandboxNodes",

api/src/providers/githubProvider.ts

@@ -1,8 +1,10 @@
 import { Octokit } from "@octokit/rest";
 import { cacheKeys, cacheResponse } from "@src/caching/helpers";
+import { chainDb } from "@src/db/dbConnection";
 import { ProviderAttributesSchema } from "@src/types/provider";
 import { env } from "@src/utils/env";
 import axios from "axios";
+import { QueryTypes } from "sequelize";
 
 export function getOctokit() {
   const githubPAT = env.AkashlyticsGithubPAT;
@@ -37,3 +39,25 @@ export async function getAuditors() {
 
   return response;
 }
+
+export async function getProviderRegions() {
+  const providerAttributesSchema = await getProviderAttributesSchema();
+  const regions = providerAttributesSchema["location-region"].values;
+
+  let result: { owner: string; location_region: string }[] = await chainDb.query(
+    `SELECT p.owner, pa.value AS location_region
+    FROM public."provider" p
+    JOIN public."providerAttribute" pa ON p.owner = pa.provider
+    WHERE pa.key = 'location-region';`,
+    {
+      type: QueryTypes.SELECT
+    }
+  );
+
+  const res = regions.map((region) => {
+    const providers = result.filter((provider) => provider.location_region === region.key).map((provider) => provider.owner);
+    return { ...region, providers };
+  });
+
+  return res;
+}

api/src/routers/apiRouter.ts

@@ -22,7 +22,7 @@ import { ProviderStatsKey } from "@src/types/graph";
 import { cacheKeys, cacheResponse } from "@src/caching/helpers";
 import axios from "axios";
 import { getMarketData } from "@src/providers/marketDataProvider";
-import { getAuditors, getProviderAttributesSchema } from "@src/providers/githubProvider";
+import { getAuditors, getProviderAttributesSchema, getProviderRegions } from "@src/providers/githubProvider";
 
 export const apiRouter = express.Router();
 
@@ -336,6 +336,14 @@ apiRouter.get(
   })
 );
 
+apiRouter.get(
+  "/provider-regions",
+  asyncHandler(async (req, res) => {
+    const response = await cacheResponse(60 * 5, cacheKeys.getProviderRegions, getProviderRegions);
+    res.send(response);
+  })
+);
+
 apiRouter.post(
   "/pricing",
   express.json(),
@@ -381,6 +389,14 @@ apiRouter.get(
   })
 );
 
+apiRouter.get(
+  "/regions",
+  asyncHandler(async (req, res) => {
+    const regions = await getProviderRegions();
+    res.send(regions);
+  })
+);
+
 apiRouter.get(
   "/getAuditors",
   asyncHandler(async (req, res) => {

deploy-web/src/components/newDeploymentWizard/BidRow.tsx

@@ -19,6 +19,7 @@ import { cx } from "@emotion/css";
 import { Uptime } from "../providers/Uptime";
 import { udenomToDenom } from "@src/utils/mathHelpers";
 import { hasSomeParentTheClass } from "@src/utils/domUtils";
+import WarningIcon from "@mui/icons-material/Warning";
 
 const useStyles = makeStyles()(theme => ({
   root: {
@@ -149,9 +150,9 @@ export const BidRow: React.FunctionComponent<Props> = ({ bid, selectedBid, handl
       <TableCell align="center">
         {provider.name ? (
           <Link href={UrlService.providerDetail(provider.owner)} onClick={e => e.stopPropagation()}>
-            {provider.name?.length > 25 ? (
+            {provider.name?.length > 20 ? (
               <CustomTooltip title={provider.name}>
-                <span>{getSplitText(provider.name, 10, 10)}</span>
+                <span>{getSplitText(provider.name, 4, 13)}</span>
               </CustomTooltip>
             ) : (
               provider.name
@@ -160,7 +161,7 @@ export const BidRow: React.FunctionComponent<Props> = ({ bid, selectedBid, handl
         ) : (
           <div>
             <CustomTooltip title={provider.hostUri}>
-              <div>{getSplitText(provider.hostUri, 15, 15)}</div>
+              <div>{getSplitText(provider.hostUri, 4, 13)}</div>
             </CustomTooltip>
           </div>
         )}
@@ -177,7 +178,13 @@ export const BidRow: React.FunctionComponent<Props> = ({ bid, selectedBid, handl
             <AuditorButton provider={provider} />
           </Box>
         ) : (
-          <Typography variant="caption">No</Typography>
+          <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
+            <Typography variant="caption">No</Typography>
+
+            <CustomTooltip title={<>This provider is not audited, which may result in a lesser quality experience.</>}>
+              <WarningIcon color="warning" fontSize="small" sx={{ marginLeft: ".5rem" }} />
+            </CustomTooltip>
+          </Box>
         )}
       </TableCell>
 

deploy-web/src/components/newDeploymentWizard/CreateLease.tsx

@@ -42,6 +42,7 @@ import { BidDto } from "@src/types/deployment";
 import { BidCountdownTimer } from "./BidCountdownTimer";
 import { CustomNextSeo } from "../shared/CustomNextSeo";
 import { RouteStepKeys } from "@src/utils/constants";
+import VerifiedUserIcon from "@mui/icons-material/VerifiedUser";
 import { useProviderList } from "@src/queries/useProvidersQuery";
 
 const yaml = require("js-yaml");
@@ -134,7 +135,7 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq }) => {
             }
           });
 
-          if (!isAdded && provider.hostUri.includes(search)) {
+          if (!isAdded && provider?.hostUri.includes(search)) {
             fBids.push(bid.id);
           }
         }
@@ -401,7 +402,12 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq }) => {
 
               <FormControlLabel
                 control={<Checkbox checked={isFilteringAudited} onChange={(ev, value) => setIsFilteringAudited(value)} color="secondary" size="small" />}
-                label="Audited"
+                label={
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                    Audited
+                    <VerifiedUserIcon fontSize="small" color="success" sx={{ marginLeft: ".5rem" }} />
+                  </Box>
+                }
               />
 
               {!isLoadingBids && allClosed && (

deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx

@@ -16,7 +16,7 @@ import ViewPanel from "../shared/ViewPanel";
 import { DeploymentDepositModal } from "../deploymentDetail/DeploymentDepositModal";
 import { TransactionMessageData } from "@src/utils/TransactionMessageData";
 import { saveDeploymentManifestAndName } from "@src/utils/deploymentLocalDataUtils";
-import { UrlService } from "@src/utils/urlUtils";
+import { UrlService, handleDocClick } from "@src/utils/urlUtils";
 import { event } from "nextjs-google-analytics";
 import { AnalyticsEvents } from "@src/utils/analytics";
 import { PrerequisiteList } from "./PrerequisiteList";
@@ -27,6 +27,7 @@ import { updateWallet } from "@src/utils/walletUtils";
 import sdlStore from "@src/store/sdlStore";
 import { useAtom } from "jotai";
 import { SdlBuilder, SdlBuilderRefType } from "./SdlBuilder";
+import { validateDeploymentData } from "@src/utils/deploymentUtils";
 
 const yaml = require("js-yaml");
 
@@ -101,7 +102,7 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
 
       const doc = yaml.load(yamlStr);
       const dd = await deploymentData.NewDeploymentData(settings.apiEndpoint, doc, dseq, address, deposit, depositorAddress);
-      validateDeploymentData(dd);
+      validateDeploymentData(dd, selectedTemplate);
 
       setSdlDenom(dd.deposit.denom);
 
@@ -120,35 +121,14 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
     }
   }
 
-  function handleDocClick(ev, url) {
-    ev.preventDefault();
-
-    window.open(url, "_blank");
-  }
-
-  /**
-   * Validate values to change in the template
-   */
-  function validateDeploymentData(deploymentData) {
-    if (selectedTemplate?.valuesToChange) {
-      for (const valueToChange of selectedTemplate.valuesToChange) {
-        if (valueToChange.field === "accept" || valueToChange.field === "env") {
-          const serviceNames = Object.keys(deploymentData.sdl.services);
-          for (const serviceName of serviceNames) {
-            if (
-              deploymentData.sdl.services[serviceName].expose?.some(e => e.accept?.includes(valueToChange.initialValue)) ||
-              deploymentData.sdl.services[serviceName].env?.some(e => e?.includes(valueToChange.initialValue))
-            ) {
-              let error = new Error(`Template value of "${valueToChange.initialValue}" needs to be changed`);
-              error.name = "TemplateValidation";
-
-              throw error;
-            }
-          }
-        }
-      }
+  const handleCreateDeployment = async () => {
+    if (selectedSdlEditMode === "builder") {
+      const valid = await sdlBuilderRef.current.validate();
+      if (!valid) return;
     }
-  }
+
+    setIsCheckingPrerequisites(true);
+  };
 
   const onPrerequisiteContinue = () => {
     setIsCheckingPrerequisites(false);
@@ -287,7 +267,7 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
               variant="contained"
               color="secondary"
               disabled={isCreatingDeployment || !!parsingError || !editedManifest}
-              onClick={() => setIsCheckingPrerequisites(true)}
+              onClick={() => handleCreateDeployment()}
               sx={{ whiteSpace: "nowrap", width: { xs: "100%", sm: "auto" } }}
             >
               {isCreatingDeployment ? (

deploy-web/src/components/newDeploymentWizard/SdlBuilder.tsx

@@ -17,6 +17,7 @@ interface Props {
 
 export type SdlBuilderRefType = {
   getSdl: () => string;
+  validate: () => Promise<boolean>;
 };
 
 export const SdlBuilder = React.forwardRef<SdlBuilderRefType, Props>(({ sdlString, setEditedManifest }, ref) => {
@@ -42,18 +43,23 @@ export const SdlBuilder = React.forwardRef<SdlBuilderRefType, Props>(({ sdlStrin
   const [serviceCollapsed, setServiceCollapsed] = useState([]);
 
   React.useImperativeHandle(ref, () => ({
-    getSdl: getSdl
+    getSdl: getSdl,
+    validate: async () => {
+      return await trigger();
+    }
   }));
 
   useEffect(() => {
     const { unsubscribe } = watch(data => {
-      const sdl = generateSdl({ services: data.services as Service[] });
+      const sdl = generateSdl(data.services as Service[]);
       setEditedManifest(sdl);
     });
 
     try {
-      const services = createAndValidateSdl(sdlString);
-      setValue("services", services as Service[]);
+      if (!!sdlString) {
+        const services = createAndValidateSdl(sdlString);
+        setValue("services", services as Service[]);
+      }
     } catch (error) {
       setError("Error importing SDL");
     }
@@ -66,7 +72,7 @@ export const SdlBuilder = React.forwardRef<SdlBuilderRefType, Props>(({ sdlStrin
   }, [watch]);
 
   const getSdl = () => {
-    return generateSdl({ services: _services });
+    return generateSdl(_services);
   };
 
   const createAndValidateSdl = (yamlStr: string) => {
@@ -110,7 +116,6 @@ export const SdlBuilder = React.forwardRef<SdlBuilderRefType, Props>(({ sdlStrin
           {services.map((service, serviceIndex) => (
             <SimpleServiceFormControl
               key={service.id}
-              service={service}
               serviceIndex={serviceIndex}
               _services={_services}
               providerAttributesSchema={providerAttributesSchema}

deploy-web/src/components/newDeploymentWizard/TemplateList.tsx

@@ -14,8 +14,11 @@ import { DeployOptionBox } from "./DeployOptionBox";
 import Link from "next/link";
 import { BuildCircleTwoTone } from "@mui/icons-material";
 import { TemplateCreation } from "@src/types";
-import { emptyTemplate, helloWorldTemplate, ubuntuTemplate } from "@src/utils/templates";
+import { helloWorldTemplate, ubuntuTemplate } from "@src/utils/templates";
 import { CustomNextSeo } from "../shared/CustomNextSeo";
+import { useAtom } from "jotai";
+import sdlStore from "@src/store/sdlStore";
+import ShutterSpeedIcon from "@mui/icons-material/ShutterSpeed";
 
 const useStyles = makeStyles()(theme => ({}));
 
@@ -43,6 +46,7 @@ export const TemplateList: React.FunctionComponent<Props> = ({ setSelectedTempla
   const router = useRouter();
   const fileUploadRef = useRef(null);
   const [previewTemplates, setPreviewTemplates] = useState([]);
+  const [, setSdlEditMode] = useAtom(sdlStore.selectedSdlEditMode);
 
   useEffect(() => {
     if (templates) {
@@ -81,7 +85,8 @@ export const TemplateList: React.FunctionComponent<Props> = ({ setSelectedTempla
   };
 
   function onSDLBuilderClick() {
-    router.push(UrlService.sdlBuilder());
+    setSdlEditMode("builder");
+    router.push(UrlService.newDeployment({ step: RouteStepKeys.editDeployment }));
   }
 
   return (
@@ -110,6 +115,13 @@ export const TemplateList: React.FunctionComponent<Props> = ({ setSelectedTempla
             onClick={() => router.push(UrlService.newDeployment({ step: RouteStepKeys.editDeployment, templateId: helloWorldTemplate.code }))}
           />
 
+          <DeployOptionBox
+            title="Rent GPUs"
+            description="Rent GPUs from the Akash Network providers to run your AI workloads."
+            icon={<ShutterSpeedIcon />}
+            onClick={() => router.push(UrlService.rentGpus())}
+          />
+
           <DeployOptionBox
             title={"Build your template"}
             description={"With our new SDL Builder, you can create your own SDL from scratch in a few clicks!"}
@@ -124,13 +136,6 @@ export const TemplateList: React.FunctionComponent<Props> = ({ setSelectedTempla
             icon={<DescriptionIcon />}
             onClick={() => fromFile()}
           />
-
-          <DeployOptionBox
-            title={emptyTemplate.title}
-            description={emptyTemplate.description}
-            icon={<InsertDriveFileIcon />}
-            onClick={() => selectTemplate(emptyTemplate)}
-          />
         </Box>
       </Box>
 

deploy-web/src/components/providers/AuditorButton.tsx

@@ -1,5 +1,5 @@
 import { useState, MouseEvent } from "react";
-import SecurityIcon from "@mui/icons-material/Security";
+import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
 import { IconButton } from "@mui/material";
 import { AuditorsModal } from "./AuditorsModal";
 import { ClientProviderDetailWithStatus, ClientProviderList } from "@src/types/provider";
@@ -28,7 +28,7 @@ export const AuditorButton: React.FunctionComponent<Props> = ({ provider }) => {
   return (
     <>
       <IconButton onClick={onAuditorClick} size="small">
-        <SecurityIcon fontSize="small" color="secondary" />
+        <VerifiedUserIcon fontSize="small" color="success" />
       </IconButton>
 
       {isViewingAuditors && <AuditorsModal attributes={provider.attributes} onClose={onClose} />}

deploy-web/src/components/providers/AuditorsModal.tsx

@@ -78,9 +78,9 @@ export const AuditorsModal: React.FunctionComponent<Props> = ({ attributes, onCl
                   <TableCell>{a.value}</TableCell>
                   <TableCell>
                     {a.auditedBy
-                      .filter(x => auditors.some(y => y.address === x))
+                      .filter(x => auditors?.some(y => y.address === x))
                       .map(x => {
-                        const auditor = auditors.find(y => y.address === x);
+                        const auditor = auditors?.find(y => y.address === x);
                         return (
                           <div key={x}>
                             <CustomTooltip