From 9421427de58cc97ab05a0907a9703c01a17c2214 Mon Sep 17 00:00:00 2001
From: Milan Pavlik <milan@gitpod.io>
Date: Mon, 14 Mar 2022 16:20:19 +0000
Subject: [PATCH 1/2] Normalize usage of prebuild status in dashboard

---
 .../dashboard/src/projects/Prebuild.tsx       |  4 +-
 .../dashboard/src/projects/Prebuilds.tsx      | 56 ++++++++++++++++++-
 2 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/components/dashboard/src/projects/Prebuild.tsx b/components/dashboard/src/projects/Prebuild.tsx
index b55e8e5d133904..f9d31508e382f4 100644
--- 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
index 703ad7c52e24d0..a809613d020f99 100644
--- a/components/dashboard/src/projects/Prebuilds.tsx
+++ b/components/dashboard/src/projects/Prebuilds.tsx
@@ -329,12 +329,66 @@ export function prebuildStatusIcon(prebuild?: PrebuildWithStatus) {
     }
 }
 
+function PrebuildStatusDescription(props: { prebuild: PrebuildWithStatus }) {
+    switch (props.prebuild.status) {
+        case "queued":
+            return <span>Prebuild is queued and will be processed when there is execution capacity.</span>;
+        case "building":
+            return <span>Prebuild is currently in progress.</span>;
+        case "aborted":
+            return (
+                <span>
+                    Prebuild has been cancelled. Either a user cancelled it, or the prebuild rate limit has been
+                    exceeded. {props.prebuild.error}
+                </span>
+            );
+        case "failed":
+            return <span>Prebuild failed for system reasons. Please contact support. {props.prebuild.error}</span>;
+        case "timeout":
+            return (
+                <span>
+                    Prebuild timed out. Either the image, or the prebuild tasks took too long. {props.prebuild.error}
+                </span>
+            );
+        case "available":
+            if (props.prebuild?.error) {
+                return (
+                    <span>
+                        The tasks executed in the prebuild returned a non-zero exit code. {props.prebuild.error}
+                    </span>
+                );
+            }
+            return <span>Prebuild completed succesfully.</span>;
+        default:
+            return <span>Unknown prebuild status.</span>;
+    }
+}
+
 function formatDuration(milliseconds: number) {
     const hours = Math.floor(milliseconds / (1000 * 60 * 60));
     return (hours > 0 ? `${hours}:` : "") + moment(milliseconds).format("mm:ss");
 }
 
-export function PrebuildInstanceStatus(props: { prebuildInstance?: WorkspaceInstance }) {
+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>
+                <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">
+                <PrebuildStatusDescription prebuild={prebuild} />
+            </div>
+        </div>
+    );
+}
+
+// Deprecated. Use PrebuildStatus instead.
+export function PrebuildInstanceStatus(props: { prebuildInstance?: WorkspaceInstance; prebuild?: PrebuildWithStatus }) {
     let status = <></>;
     let details = <></>;
     switch (props.prebuildInstance?.status.phase) {

From 7581fb250680270049aaa5efcda302be0b3298fd Mon Sep 17 00:00:00 2001
From: Milan Pavlik <milan@gitpod.io>
Date: Tue, 29 Mar 2022 11:17:06 +0200
Subject: [PATCH 2/2] Update components/dashboard/src/projects/Prebuild.tsx

Co-authored-by: Jan Keromnes <jan.keromnes@typefox.io>
---
 components/dashboard/src/projects/Prebuild.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dashboard/src/projects/Prebuild.tsx b/components/dashboard/src/projects/Prebuild.tsx
index f9d31508e382f4..fe7cd3113f6eb4 100644
--- a/components/dashboard/src/projects/Prebuild.tsx
+++ b/components/dashboard/src/projects/Prebuild.tsx
@@ -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 && <PrebuildStatus prebuild={prebuild!} />}
+                        {prebuild && <PrebuildStatus prebuild={prebuild} />}
                         <div className="flex-grow" />
                         {prebuild?.status === "aborted" || prebuild?.status === "timeout" || !!prebuild?.error ? (
                             <button