chore: Add two new generic container types, add reset button in the error page

Author: wzrdx

app/error.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import ActionButton from '@/shared/ActionButton';
 import { DetailedAlert } from '@shared/DetailedAlert';
 import { useEffect } from 'react';
 import { RiErrorWarningLine } from 'react-icons/ri';
@@ -16,14 +17,22 @@ export default function ErrorPage({ error, reset }: { error: Error & { digest?:
                 icon={<RiErrorWarningLine />}
                 title="Something went wrong"
                 description={
-                    <div>
-                        An unexpected error occurred. Please try again, or return to the home page.
-                        {process.env.NODE_ENV === 'development' && (
-                            <div className="col gap-1 px-3 py-2 pt-2 font-mono text-sm">
-                                <div>{error.message}</div>
-                                {!!error.digest && <div className="text-slate-500">{error.digest}</div>}
-                            </div>
-                        )}
+                    <div className="col gap-3">
+                        <div>
+                            An unexpected error occurred. Please try again, or return to the home page.
+                            {process.env.NODE_ENV === 'development' && (
+                                <div className="col gap-1 px-3 py-2 pt-2 font-mono text-sm">
+                                    <div>{error.message}</div>
+                                    {!!error.digest && <div className="text-slate-500">{error.digest}</div>}
+                                </div>
+                            )}
+                        </div>
+
+                        <div className="center-all w-full">
+                            <ActionButton color="primary" onPress={reset}>
+                                Try Again
+                            </ActionButton>
+                        </div>
                     </div>
                 }
                 fullWidth

package-lock.json

@@ -61,7 +61,7 @@ export default function DraftCard({ project }: { project: DraftProject }) {
                     <div className="min-w-[110px]">
                         {!!jobs && (
                             <div className="font-medium">
-                                {jobs.length} job{jobs.length > 1 ? 's' : ''}
+                                {jobs.length} job{jobs.length > 1 || jobs.length === 0 ? 's' : ''}
                             </div>
                         )}
                     </div>

src/components/deeploys/DraftCard.tsx

@@ -55,6 +55,32 @@ type RunningJobResources = {
 };
 
 export const genericContainerTypes: ContainerOrWorkerType[] = [
+    {
+        id: 53,
+        name: 'MICRO',
+        jobType: 53,
+        notes: 'No GPU',
+        notesColor: 'red',
+        monthlyBudgetPerWorker: 3,
+        pricePerEpoch: 100_000n,
+        minimalBalancing: 2,
+        cores: 0.25,
+        ram: 0.5,
+        storage: 2,
+    },
+    {
+        id: 54,
+        name: 'LITE',
+        jobType: 54,
+        notes: 'No GPU',
+        notesColor: 'red',
+        monthlyBudgetPerWorker: 5,
+        pricePerEpoch: 166_666n,
+        minimalBalancing: 2,
+        cores: 0.5,
+        ram: 1,
+        storage: 4,
+    },
     {
         id: 1,
         name: 'ENTRY',
@@ -332,54 +358,49 @@ export const gpuMappings: {
 export const getRunningJobResources = (jobType: bigint): RunningJobResources | undefined => {
     const jobTypeN = Number(jobType);
 
-    if (jobTypeN <= 9) {
-        // Generic
-        const genericContainerType = genericContainerTypes.find((type) => type.jobType === jobTypeN);
+    const genericContainerType = genericContainerTypes.find((type) => type.jobType === jobTypeN);
 
-        if (genericContainerType) {
-            return {
-                containerOrWorkerType: genericContainerType,
-                jobType: JobType.Generic,
-            };
-        }
-    } else if (jobTypeN >= 16 && jobTypeN <= 20) {
-        // Native
-        const nativeWorkerType = nativeWorkerTypes.find((type) => type.jobType === jobTypeN);
+    if (genericContainerType) {
+        return {
+            containerOrWorkerType: genericContainerType,
+            jobType: JobType.Generic,
+        };
+    }
 
-        if (nativeWorkerType) {
-            return {
-                containerOrWorkerType: nativeWorkerType,
-                jobType: JobType.Native,
-            };
-        }
-    } else if (jobTypeN >= 50 && jobTypeN <= 52) {
-        // Service
-        const serviceContainerType = serviceContainerTypes.find((type) => type.jobType === jobTypeN);
+    const nativeWorkerType = nativeWorkerTypes.find((type) => type.jobType === jobTypeN);
 
-        if (serviceContainerType) {
-            return {
-                containerOrWorkerType: serviceContainerType,
-                jobType: JobType.Service,
-            };
-        }
-    } else {
-        const gpuMapping = gpuMappings[jobTypeN];
+    if (nativeWorkerType) {
+        return {
+            containerOrWorkerType: nativeWorkerType,
+            jobType: JobType.Native,
+        };
+    }
 
-        if (gpuMapping) {
-            const gpuType = gpuTypes.find((type) => type.id === gpuMapping.gpuTypeId);
+    const serviceContainerType = serviceContainerTypes.find((type) => type.jobType === jobTypeN);
 
-            const containerOrWorkerType =
-                gpuMapping.jobType === JobType.Generic
-                    ? genericContainerTypes.find((type) => type.id === gpuMapping.containerOrWorkerTypeId)
-                    : nativeWorkerTypes.find((type) => type.id === gpuMapping.containerOrWorkerTypeId);
+    if (serviceContainerType) {
+        return {
+            containerOrWorkerType: serviceContainerType,
+            jobType: JobType.Service,
+        };
+    }
+
+    const gpuMapping = gpuMappings[jobTypeN];
+
+    if (gpuMapping) {
+        const gpuType = gpuTypes.find((type) => type.id === gpuMapping.gpuTypeId);
 
-            if (gpuType && containerOrWorkerType) {
-                return {
-                    containerOrWorkerType,
-                    gpuType,
-                    jobType: gpuMapping.jobType,
-                };
-            }
+        const containerOrWorkerType =
+            gpuMapping.jobType === JobType.Generic
+                ? genericContainerTypes.find((type) => type.id === gpuMapping.containerOrWorkerTypeId)
+                : nativeWorkerTypes.find((type) => type.id === gpuMapping.containerOrWorkerTypeId);
+
+        if (gpuType && containerOrWorkerType) {
+            return {
+                containerOrWorkerType,
+                gpuType,
+                jobType: gpuMapping.jobType,
+            };
         }
     }
 };