fix: add missing headers for persistant storage

akash-network · Aug 30, 2023 · 53b9c2e · 53b9c2e
1 parent b45f26c
commit 53b9c2e
Show file tree

Hide file tree

Showing 10 changed files with 159 additions and 158 deletions.
diff --git a/web/.eslintrc.yml b/web/.eslintrc.yml
@@ -26,5 +26,6 @@ rules:
   semi:
     - error
     - always
+  @typescript-eslint/no-explicit-any: "off"
   react/react-in-jsx-scope: "off"
   react/no-unescaped-entities: "off"
diff --git a/web/src/_helpers/async-for-each.ts b/web/src/_helpers/async-for-each.ts
diff --git a/web/src/api/rpc/beta2/deployments.tsx b/web/src/api/rpc/beta2/deployments.tsx
@@ -41,11 +41,12 @@ import { fetchRpcNodeStatus } from './rpc';
 import { LeaseStatus } from '../../../types';
 import logging from '../../../logging';
 import { getRpcNode } from '../../../hooks/useRpcNode';
+import { retry } from '../../../_helpers/async-utils';
 
 // 5AKT aka 5000000uakt
 export const defaultInitialDeposit = 5000000;
 
-function getTypeUrl<T extends {$type: string}>(type: T) {
+function getTypeUrl<T extends { $type: string }>(type: T) {
   return `/${type.$type}`;
 }
 
@@ -399,41 +400,31 @@ export async function sendManifest(address: string, lease: Lease, sdl: any) {
   const providerFetch = mtlsFetch(cert, provider.provider.hostUri);
   const manifest = Manifest(sdl, 'beta2', true);
 
-  console.log(manifest);
-
   let jsonStr = JSON.stringify(manifest);
 
   jsonStr = jsonStr.replaceAll('"quantity":{"val', '"size":{"val');
   jsonStr = jsonStr.replaceAll('"mount":', '"readOnlyTmp":');
   jsonStr = jsonStr.replaceAll('"readOnly":', '"mount":');
   jsonStr = jsonStr.replaceAll('"readOnlyTmp":', '"readOnly":');
 
-  return new Promise((resolve, reject) => {
-    const attemptSend = (retry: number) => {
-      return providerFetch(url, {
-        method: 'PUT',
-        body: jsonStr,
-      }).then((result) => {
-        if (result.ok) {
-          resolve(result);
-          return;
-        }
-
-        if (retry > 0) {
-          // logging.warn('Sending manifest failed. Retrying...');
-          setTimeout(() => attemptSend(retry - 1), 1000);
-        } else {
-          // logging.warn('Sending manifest failed.');
-          result.text().then(reject);
-        }
-      }, (error) => {
-        logging.error('Error sending manifest to provider. This is likey an issue with the provider.');
-        console.error(error);
-      });
-    };
-
-    attemptSend(3);
-  });
+  const attemptSend = () => {
+    return providerFetch(url, {
+      method: 'PUT',
+      body: jsonStr,
+    }).then((result) => {
+      if (result.ok) {
+        return result;
+      }
+
+      return Promise.reject(result);
+    });
+  };
+
+  return retry(attemptSend, [1000, 3000, 5000])
+    .catch((error) => {
+      logging.error('Error sending manifest to provider. This is likely an issue with the provider.');
+      console.error(error);
+    });
 }
 
 export async function newDeploymentData(

diff --git a/web/src/api/rpc/beta3/deployments.tsx b/web/src/api/rpc/beta3/deployments.tsx
@@ -41,11 +41,12 @@ import { fetchRpcNodeStatus } from './rpc';
 import { LeaseStatus } from '../../../types';
 import logging from '../../../logging';
 import { getRpcNode } from '../../../hooks/useRpcNode';
+import { retry } from '../../../_helpers/async-utils';
 
 // 5AKT aka 5000000uakt
 export const defaultInitialDeposit = 5000000;
 
-function getTypeUrl<T extends {$type: string}>(type: T) {
+function getTypeUrl<T extends { $type: string }>(type: T) {
   return `/${type.$type}`;
 }
 
@@ -400,29 +401,24 @@ export async function sendManifest(address: string, lease: Lease, sdl: any) {
   const providerFetch = mtlsFetch(cert, provider.provider.hostUri);
   const jsonStr = ManifestYaml(sdl, 'beta3');
 
-  return new Promise((resolve, reject) => {
-    const attemptSend = (retry: number) => {
-      return providerFetch(url, {
-        method: 'PUT',
-        body: jsonStr,
-      }).then((result) => {
-        if (result.ok) {
-          resolve(result);
-          return;
-        }
-
-        if (retry > 0) {
-          // logging.warn('Sending manifest failed. Retrying...');
-          setTimeout(() => attemptSend(retry - 1), 1000);
-        } else {
-          // logging.warn('Sending manifest failed.');
-          result.text().then(reject);
-        }
-      });
-    };
-
-    attemptSend(3);
-  });
+  const attemptSend = () => {
+    return providerFetch(url, {
+      method: 'PUT',
+      body: jsonStr,
+    }).then((result) => {
+      if (result.ok) {
+        return result;
+      }
+
+      return Promise.reject(result);
+    });
+  };
+
+  return retry(attemptSend, [1000, 3000, 5000])
+    .catch((error: any) => {
+      logging.error('Error sending manifest to provider. This is likely an issue with the provider.');
+      console.error(error);
+    });
 }
 
 export async function newDeploymentData(

diff --git a/web/src/components/MeasurementControl/InputNumbers.tsx b/web/src/components/MeasurementControl/InputNumbers.tsx
@@ -33,7 +33,7 @@ export const InputNumber: React.FC<InputNumberProps> = ({ setFieldValue, disable
         <NumberInput
           min="0"
           step="0.1"
-          disabled
+          // disabled
           type="number"
           value={size.value}
           onChange={({ currentTarget }) => {

diff --git a/web/src/components/SdlConfiguration/Gpu.tsx b/web/src/components/SdlConfiguration/Gpu.tsx
@@ -5,6 +5,28 @@ import { AddNewButton, AddNewButtonWrapper, FieldWrapper, PlusSign, SdlSectionWr
 import { Button, Box, Stack, Typography, List, ListItem, OutlinedInput } from '@mui/material';
 import { IconTrash } from '../Icons';
 
+const GPU_VENDORS = [
+  'nvidia',
+  'amd',
+];
+
+const GPU_MODELS = {
+  nvidia: [
+    'a100',
+    'a30',
+    'a40',
+    'a6000',
+    'a40',
+  ],
+  amd: [
+    'mi100',
+    'mi50',
+    'mi60',
+    'mi25',
+    'mi8',
+  ]
+};
+
 type GpuUnitProps = {
   currentProfile: string;
   disabled: boolean;
@@ -81,11 +103,7 @@ const GpuAttributes: React.FC<GpuUnitProps> = ({ currentProfile, disabled }) =>
   return (
     <FieldWrapper>
       <Typography variant="body2" color="text.secondary" marginTop={2}>
-        Example filters:
-        <List>
-          <ListItem>/vendor/nvidia/model/a6000 (nVidia A6000 only)</ListItem>
-          <ListItem>/vendor/amd/model/* (any AMD GPU)</ListItem>
-        </List>
+        Select the GPU vendors/models that you'd like to use for your deployment.
       </Typography>
       <Stack gap={1}>
         {attributes.map((attribute, index) => (

diff --git a/web/src/components/SdlConfiguration/Ports.tsx b/web/src/components/SdlConfiguration/Ports.tsx
@@ -11,6 +11,7 @@ import {
   FieldWrapper,
   Input,
   SdlSectionWrapper,
+  TableTitle,
   VariableWrapper,
 } from './styling';
 
@@ -46,10 +47,10 @@ export const Ports: React.FC<PortsProps> = ({ serviceName, services, updatePage
       render={(arrayHelpers: any) => (
         <SdlSectionWrapper>
           <Stack direction="row" columnGap="10px">
-            <PortTitle>Port</PortTitle>
-            <PortTitle>As</PortTitle>
-            <PortTitle>Host</PortTitle>
-            <PortTitle>Accept</PortTitle>
+            <TableTitle width={178}>Port</TableTitle>
+            <TableTitle width={178}>As</TableTitle>
+            <TableTitle width={178}>Host</TableTitle>
+            <TableTitle width={'auto'}>Accept</TableTitle>
           </Stack>
           {services[serviceName]?.expose?.map((port, index) => (
             <VariableWrapper updatePage={updatePage} key={index}>
@@ -173,17 +174,4 @@ export const Ports: React.FC<PortsProps> = ({ serviceName, services, updatePage
 const HostFiledWithButton = styled.div`
   display: flex;
   column-gap: 10px;
-`;
-
-const PortTitle = styled.div`
-  font-weight: 500;
-  font-size: 14px;
-  color: #3d4148;
-  padding-right: 10px;
-  width: 176.5px;
-  box-sizing: border-box;
-
-  &:last-child {
-    width: auto;
-  }
-`;
+`;
diff --git a/web/src/components/SdlConfiguration/Storage.tsx b/web/src/components/SdlConfiguration/Storage.tsx
@@ -1,4 +1,4 @@
-import { FormControl, IconButton, MenuItem, Select, Tab, Tabs, Tooltip } from '@mui/material';
+import { Box, FormControl, IconButton, MenuItem, Select, Stack, Tab, Tabs, Tooltip } from '@mui/material';
 import { Field, FieldArray } from 'formik';
 import { MeasurementControl } from '../MeasurementControl';
 import React from 'react';
@@ -13,6 +13,7 @@ import {
   VariableWrapper,
   TrashIcon,
   PlusSign,
+  TableTitle,
 } from './styling';
 
 interface TabPanelProps {
@@ -21,21 +22,19 @@ interface TabPanelProps {
   value: number;
 }
 
-const validateStorage = (value: any) => {
-  let error;
-  const strippedValue = value?.slice(0, -2);
-  if (strippedValue && strippedValue <= 0) {
-    error = 'Storage must be a positive value greater than zero';
+const validateStorage = (value: string) => {
+  const size = value.slice(0, -2);
+  const intValue = parseInt(size, 10);
+
+  if (isNaN(intValue) || intValue <= 0) {
+    return 'Storage must be a positive value greater than zero';
   }
-  return error;
 };
 
-const validateStorageData = (value: any) => {
-  let error;
-  if (!value) {
-    error = 'This value can\'t be blank';
+const validateStorageData = (value: string) => {
+  if (value === '') {
+    return 'This value can\'t be blank';
   }
-  return error;
 };
 
 type StorageProfile = {
@@ -78,7 +77,7 @@ export const Storage: React.FC<StorageProps> = ({
         sx={{ marginBottom: '16px', borderBottom: '1px solid #D1D5DB' }}
       >
         <Tab sx={{ textTransform: 'none' }} label={'Ephemeral'} {...a11yProps(0)} />
-        <Tab sx={{ textTransform: 'none' }} label="Persistent" {...a11yProps(1)} />
+        <Tab sx={{ textTransform: 'none' }} label={'Persistent'} {...a11yProps(1)} />
       </Tabs>
       <TabPanel value={value} index={0}>
         <FieldArray
@@ -172,15 +171,29 @@ export const Storage: React.FC<StorageProps> = ({
         />
       </TabPanel>
 
+      {/* Persistent storage */}
       <TabPanel value={value} index={1}>
+        <Stack spacing={2} direction="row" marginBottom={1}>
+          <TableTitle width={163}>Name</TableTitle>
+          <TableTitle width={163}>Mount</TableTitle>
+          <TableTitle width={163}>Size</TableTitle>
+          <TableTitle width={'auto'}>Type</TableTitle>
+        </Stack>
         <FieldArray
           name={`sdl.profiles.compute.${currentProfile}.resources.storage`}
           render={(arrayHelpers: any) => (
             <React.Fragment>
               {profiles.compute[currentProfile]?.resources.storage?.map((storage, index) => {
                 return (
                   storage?.attributes && (
-                    <VariableWrapper key={`${currentProfile}-persistent-${index}`}>
+                    <FieldWrapper
+                      key={`${currentProfile}-persistent-${index}`}
+                      style={{
+                        display: 'flex',
+                        columnGap: '10px',
+                        paddingBottom: '10px',
+                      }}
+                    >
                       <Field
                         name={`sdl.profiles.compute.${currentProfile}.resources.storage.${index}.name`}
                         validate={validateStorageData}
@@ -282,7 +295,7 @@ export const Storage: React.FC<StorageProps> = ({
                           <TrashIcon />
                         </IconButton>
                       )}
-                    </VariableWrapper>
+                    </FieldWrapper>
                   )
                 );
               })}

diff --git a/web/src/components/SdlConfiguration/styling.tsx b/web/src/components/SdlConfiguration/styling.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-import { Button } from '@mui/material';
+import { Box, Button } from '@mui/material';
 
 import PlusIcon from '../../assets/images/plus-icon.svg';
 import Trash from '../../assets/images/icon-trash.svg';
@@ -102,3 +102,10 @@ export const SdlSectionWrapper = styled.div`
   border-radius: 6px;
   padding: 20px;
 `;
+
+export const TableTitle = styled(Box)`
+  font-weight: 500;
+  font-size: 14px;
+  color: #3d4148;
+  box-sizing: border-box;
+`;