Fix

Author: easyCZ

components/dashboard/src/projects/Prebuilds.tsx

@@ -359,84 +359,46 @@ export function prebuildStatusIcon(prebuild?: PrebuildWithStatus) {
     }
 }
 
-function formatDuration(milliseconds: number) {
-    const hours = Math.floor(milliseconds / (1000 * 60 * 60));
-    return (hours > 0 ? `${hours}:` : "") + moment(milliseconds).format("mm:ss");
-}
-
-export function PrebuildStatus(props: { prebuild: PrebuildWithStatus }) {
-    const prebuild = props.prebuild;
-
-    let status = (
-        <div className="flex space-x-1 items-center">
-            {prebuildStatusIcon(prebuild)}
-            {prebuildStatusLabel(prebuild)}
-        </div>
-    );
-
-    let details;
-
-    switch (prebuild.status) {
+function prebuildStatusDescription(prebuild: PrebuildWithStatus): string {
+    switch (prebuild?.status) {
+        case undefined: // Fall through
         case "queued":
-            details = (
-                <div className="flex space-x-1 items-center text-gray-400">
-                    <span>Prebuild is queued and will be processed when there is execution capacity ...</span>
-                </div>
-            );
-            break;
+            return "Prebuild is queued and will be processed when there is execution capacity.";
         case "building":
-            details = (
-                <div className="flex space-x-1 items-center text-gray-400">
-                    <span>Prebuild is currently in progress.</span>
-                </div>
-            );
-            break;
+            return "Prebuild is currently in progress.";
         case "aborted":
-            details = (
-                <div className="flex space-x-1 items-center text-gray-400">
-                    <span>
-                        Prebuild has been cancelled. Either a user cancelled it, or the prebuild rate limit has been
-                        exceeded.
-                    </span>
-                </div>
-            );
-            break;
+            return "Prebuild has been cancelled. Either a user cancelled it, or the prebuild rate limit has been exceeded.";
         case "failed":
-            details = (
-                <div className="flex space-x-1 items-center text-gray-400">
-                    <span>Prebuild failed. {prebuild.error}</span>
-                </div>
-            );
-            break;
+            return "Prebuild failed for system reasons. Please contact support. Error: {prebuild.error}";
         case "timeout":
-            details = (
-                <div className="flex space-x-1 items-center text-gray-400">
-                    <span>Prebuild timed out. {prebuild.error}</span>
-                </div>
-            );
-            break;
+            return "Prebuild timed out. Either the image, or the prebuild tasks took too long.";
         case "available":
             if (prebuild?.error) {
-                details = (
-                    <div className="flex space-x-1 items-center text-gray-400">
-                        <span>Prebuild failed. {prebuild.error}</span>
-                    </div>
-                );
-                break;
+                return "The tasks executed in the prebuild returned a non-zero exit code.";
             }
-
-            details = (
-                <div className="flex space-x-1 items-center text-gray-400">
-                    <span>Prebuild failed. {prebuild.error}</span>
-                </div>
-            );
-            break;
+            return "Prebuild completed succesfully.";
     }
+}
+
+function formatDuration(milliseconds: number) {
+    const hours = Math.floor(milliseconds / (1000 * 60 * 60));
+    return (hours > 0 ? `${hours}:` : "") + moment(milliseconds).format("mm:ss");
+}
+
+export function PrebuildStatus(props: { prebuild: PrebuildWithStatus }) {
+    const prebuild = props.prebuild;
 
     return (
         <div className="flex flex-col space-y-1 justify-center text-sm font-semibold">
-            <div>{status}</div>
-            <div>{details}</div>
+            <div>
+                <div className="flex space-x-1 items-center">
+                    {prebuildStatusIcon(prebuild)}
+                    {prebuildStatusLabel(prebuild)}
+                </div>
+            </div>
+            <div className="flex space-x-1 items-center text-gray-400">
+                <span>{prebuildStatusDescription(prebuild)}</span>
+            </div>
         </div>
     );
 }