Skip to content

Commit 9590097

Browse files
mustard-mhmustard-mh
committed
💄
1 parent 6d7f014 commit 9590097

File tree

5 files changed

+2147
-1255
lines changed

5 files changed

+2147
-1255
lines changed

‎components/dashboard/src/start/StartPage.tsx

Lines changed: 94 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -4,102 +4,116 @@
44
* See License-AGPL.txt in the project root for license information.
55
*/
66

7-
import { useEffect } from 'react';
8-
import gitpodIconUA from '../icons/gitpod-ua.svg';
7+
import { useEffect } from "react";
8+
import gitpodIconUA from "../icons/gitpod-ua.svg";
99

1010
export enum StartPhase {
11-
Checking = 0,
12-
Preparing = 1,
13-
Creating = 2,
14-
Starting = 3,
15-
Running = 4,
16-
IdeReady = 5,
17-
Stopping = 6,
18-
Stopped = 7,
19-
};
11+
Checking = 0,
12+
Preparing = 1,
13+
Creating = 2,
14+
Starting = 3,
15+
Running = 4,
16+
IdeReady = 5,
17+
Stopping = 6,
18+
Stopped = 7,
19+
}
2020

2121
function getPhaseTitle(phase?: StartPhase, error?: StartWorkspaceError) {
22-
if (!!error) {
23-
return "Oh, no! Something went wrong!";
24-
}
25-
switch (phase) {
26-
case StartPhase.Checking:
27-
return "Checking";
28-
case StartPhase.Preparing:
29-
return "Preparing";
30-
case StartPhase.Creating:
31-
return "Creating";
32-
case StartPhase.Starting:
33-
return "Starting";
34-
case StartPhase.Running:
35-
return "Starting";
36-
case StartPhase.IdeReady:
37-
return "Running";
38-
case StartPhase.Stopping:
39-
return "Stopping";
40-
case StartPhase.Stopped:
41-
return "Stopped";
42-
default:
43-
return "";
44-
}
22+
if (!!error) {
23+
return "Oh, no! Something went wrong!";
24+
}
25+
switch (phase) {
26+
case StartPhase.Checking:
27+
return "Checking";
28+
case StartPhase.Preparing:
29+
return "Preparing";
30+
case StartPhase.Creating:
31+
return "Creating";
32+
case StartPhase.Starting:
33+
return "Starting";
34+
case StartPhase.Running:
35+
return "Starting";
36+
case StartPhase.IdeReady:
37+
return "Running";
38+
case StartPhase.Stopping:
39+
return "Stopping";
40+
case StartPhase.Stopped:
41+
return "Stopped";
42+
default:
43+
return "";
44+
}
4545
}
4646

47-
function ProgressBar(props: { phase: number, error: boolean }) {
48-
const { phase, error } = props;
49-
return <div className="flex mt-4 mb-6">
50-
{[1, 2, 3].map(i => {
51-
let classes = 'h-2 w-10 mx-1 my-2 rounded-full';
52-
if (i < phase) {
53-
// Already passed this phase successfully
54-
classes += ' bg-green-400';
55-
} else if (i > phase) {
56-
// Haven't reached this phase yet
57-
classes += ' bg-gray-200 dark:bg-gray-800';
58-
} else if (error) {
59-
// This phase has failed
60-
classes += ' bg-red-500';
61-
} else {
62-
// This phase is currently running
63-
classes += ' bg-green-400 animate-pulse';
64-
}
65-
return <div key={'phase-' + i} className={classes} />;
66-
})}
67-
</div>;
47+
function ProgressBar(props: { phase: number; error: boolean }) {
48+
const { phase, error } = props;
49+
return (
50+
<div className="flex mt-4 mb-6">
51+
{[1, 2, 3].map((i) => {
52+
let classes = "h-2 w-10 mx-1 my-2 rounded-full";
53+
if (i < phase) {
54+
// Already passed this phase successfully
55+
classes += " bg-green-400";
56+
} else if (i > phase) {
57+
// Haven't reached this phase yet
58+
classes += " bg-gray-200 dark:bg-gray-800";
59+
} else if (error) {
60+
// This phase has failed
61+
classes += " bg-red-500";
62+
} else {
63+
// This phase is currently running
64+
classes += " bg-green-400 animate-pulse";
65+
}
66+
return <div key={"phase-" + i} className={classes} />;
67+
})}
68+
</div>
69+
);
6870
}
6971

7072
export interface StartPageProps {
71-
phase?: number;
72-
error?: StartWorkspaceError;
73-
title?: string;
74-
children?: React.ReactNode;
73+
phase?: number;
74+
error?: StartWorkspaceError;
75+
title?: string;
76+
children?: React.ReactNode;
7577
}
7678

7779
export interface StartWorkspaceError {
78-
message?: string;
79-
code?: number;
80-
data?: any;
80+
message?: string;
81+
code?: number;
82+
data?: any;
8183
}
8284

8385
export function StartPage(props: StartPageProps) {
84-
const { phase, error } = props;
85-
let title = props.title || getPhaseTitle(phase, error);
86-
useEffect(() => { document.title = 'Starting — Gitpod' }, []);
87-
return <div className="w-screen h-screen align-middle">
88-
<div className="flex flex-col mx-auto items-center text-center h-screen">
89-
<div className="h-1/3"></div>
90-
<img src={gitpodIconUA} alt="Gitpod's logo" className={`h-16 flex-shrink-0 ${(error || phase === StartPhase.Stopped || phase === StartPhase.IdeReady) ? '' : 'animate-bounce'}`} />
91-
<h3 className="mt-8 text-xl">{title}</h3>
92-
{typeof(phase) === 'number' && phase < StartPhase.IdeReady && <ProgressBar phase={phase} error={!!error} />}
93-
{error && <StartError error={error} />}
94-
{props.children}
95-
</div>
96-
</div>;
86+
const { phase, error } = props;
87+
let title = props.title || getPhaseTitle(phase, error);
88+
useEffect(() => {
89+
document.title = "Starting — Gitpod";
90+
}, []);
91+
return (
92+
<div className="w-screen h-screen align-middle">
93+
<div className="flex flex-col mx-auto items-center text-center h-screen">
94+
<div className="h-1/3"></div>
95+
<img
96+
src={gitpodIconUA}
97+
alt="Gitpod's logo"
98+
className={`h-16 flex-shrink-0 ${
99+
error || phase === StartPhase.Stopped || phase === StartPhase.IdeReady ? "" : "animate-bounce"
100+
}`}
101+
/>
102+
<h3 className="mt-8 text-xl">{title}</h3>
103+
{typeof phase === "number" && phase < StartPhase.IdeReady && (
104+
<ProgressBar phase={phase} error={!!error} />
105+
)}
106+
{error && <StartError error={error} />}
107+
{props.children}
108+
</div>
109+
</div>
110+
);
97111
}
98112

99113
function StartError(props: { error: StartWorkspaceError }) {
100-
const { error } = props;
101-
if (!error) {
102-
return null;
103-
}
104-
return <p className="text-base text-gitpod-red w-96">{error.message}</p>;
114+
const { error } = props;
115+
if (!error) {
116+
return null;
117+
}
118+
return <p className="text-base text-gitpod-red w-96">{error.message}</p>;
105119
}

0 commit comments

Comments
 (0)