fix

gitpod-io · Mar 14, 2022 · 351002d · 351002d
1 parent bbd2fad
commit 351002d
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 12 deletions.
diff --git a/components/dashboard/src/projects/Prebuild.tsx b/components/dashboard/src/projects/Prebuild.tsx
@@ -13,7 +13,7 @@ import PrebuildLogs from "../components/PrebuildLogs";
 import Spinner from "../icons/Spinner.svg";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { TeamsContext, getCurrentTeam } from "../teams/teams-context";
-import { PrebuildInstanceStatus } from "./Prebuilds";
+import { PrebuildStatus } from "./Prebuilds";
 import { shortCommitMessage } from "./render-utils";
 
 export default function () {
@@ -167,7 +167,7 @@ export default function () {
                         />
                     </div>
                     <div className="h-20 px-6 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-600 flex space-x-2">
-                        {prebuildInstance && <PrebuildInstanceStatus prebuildInstance={prebuildInstance} />}
+                        {prebuildInstance && <PrebuildStatus prebuild={prebuild!} />}
                         <div className="flex-grow" />
                         {prebuild?.status === "aborted" || prebuild?.status === "timeout" || !!prebuild?.error ? (
                             <button

diff --git a/components/dashboard/src/projects/Prebuilds.tsx b/components/dashboard/src/projects/Prebuilds.tsx
@@ -386,24 +386,66 @@ export function PrebuildStatus(props: { prebuild: PrebuildWithStatus }) {
             );
             break;
         case "building":
-            return <img alt="" className="h-4 w-4" src={StatusRunning} />;
+            details = (
+                <div className="flex space-x-1 items-center text-gray-400">
+                    <img alt="" className="h-4 w-4 animate-spin" src={StatusRunning} />
+                    <span>Prebuild is currently in progress.</span>
+                </div>
+            );
+            break;
         case "aborted":
-            return <img alt="" className="h-4 w-4" src={StatusCanceled} />;
+            details = (
+                <div className="flex space-x-1 items-center text-gray-400">
+                    <img alt="" className="h-4 w-4 animate-spin" src={StatusCanceled} />
+                    <span>
+                        Prebuild has been cancelled. Either a user cancelled it, or the prebuild rate limit has been
+                        exceeded.
+                    </span>
+                </div>
+            );
+            break;
         case "failed":
-            return <img alt="" className="h-4 w-4" src={StatusFailed} />;
+            details = (
+                <div className="flex space-x-1 items-center text-gray-400">
+                    <img alt="" className="h-4 w-4 animate-spin" src={StatusFailed} />
+                    <span>Prebuild failed. Error: '${prebuild.error}'.</span>
+                </div>
+            );
+            break;
         case "timeout":
-            return <img alt="" className="h-4 w-4" src={StatusFailed} />;
+            details = (
+                <div className="flex space-x-1 items-center text-gray-400">
+                    <img alt="" className="h-4 w-4 animate-spin" src={StatusFailed} />
+                    <span>Prebuild timed out. Error: '${prebuild.error}'.</span>
+                </div>
+            );
+            break;
         case "available":
             if (prebuild?.error) {
-                return <img alt="" className="h-4 w-4" src={StatusFailed} />;
+                details = (
+                    <div className="flex space-x-1 items-center text-gray-400">
+                        <img alt="" className="h-4 w-4 animate-spin" src={StatusFailed} />
+                        <span>Prebuild failed. Error: '${prebuild.error}'.</span>
+                    </div>
+                );
+                break;
             }
-            return <img alt="" className="h-4 w-4" src={StatusDone} />;
+
+            details = (
+                <div className="flex space-x-1 items-center text-gray-400">
+                    <img alt="" className="h-4 w-4 animate-spin" src={StatusFailed} />
+                    <span>Prebuild failed. Error: '${prebuild.error}'.</span>
+                </div>
+            );
+            break;
     }
 
-    <div className="flex flex-col space-y-1 justify-center text-sm font-semibold">
-        <div>{status}</div>
-        <div>{details}</div>
-    </div>;
+    return (
+        <div className="flex flex-col space-y-1 justify-center text-sm font-semibold">
+            <div>{status}</div>
+            <div>{details}</div>
+        </div>
+    );
 }
 
 export function PrebuildInstanceStatus(props: { prebuildInstance?: WorkspaceInstance; prebuild?: PrebuildWithStatus }) {