Skip to content

[dashboard] Remove Prebuild logs and button from Project Settings #8831

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 5, 2022
Merged

[dashboard] Remove Prebuild logs and button from Project Settings #8831

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
180 changes: 39 additions & 141 deletions components/dashboard/src/projects/ConfigureProject.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,11 @@
*/

import React, { Suspense, useContext, useEffect, useState } from "react";
import { Project, StartPrebuildResult, WorkspaceInstance } from "@gitpod/gitpod-protocol";
import PrebuildLogs from "../components/PrebuildLogs";
import { Project } from "@gitpod/gitpod-protocol";
import TabMenuItem from "../components/TabMenuItem";
import { getGitpodService } from "../service/service";
import Spinner from "../icons/Spinner.svg";
import NoAccess from "../icons/NoAccess.svg";
import PrebuildLogsEmpty from "../images/prebuild-logs-empty.svg";
import PrebuildLogsEmptyDark from "../images/prebuild-logs-empty-dark.svg";
import { ThemeContext } from "../theme-context";
import { PrebuildInstanceStatus } from "./Prebuilds";
import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
import { openAuthorizeWindow } from "../provider-utils";
import { ProjectSettingsPage } from "./ProjectSettings";
Expand All @@ -30,15 +25,6 @@ const TASKS = {
echo 'TODO: start app'`,
};

// const IMAGES = {
// Default: 'gitpod/workspace-full',
// '.NET': 'gitpod/workspace-dotnet',
// MongoDB: 'gitpod/workspace-mongodb',
// MySQL: 'gitpod/workspace-mysql',
// PostgreSQL: 'gitpod/workspace-postgres',
// 'Virtual Desktop (VNC)': 'gitpod/workspace-full-vnc',
// }

export default function () {
const { project } = useContext(ProjectContext);
const [gitpodYml, setGitpodYml] = useState<string>("");
Expand All @@ -47,12 +33,7 @@ export default function () {
const [selectedEditor, setSelectedEditor] = useState<".gitpod.yml" | ".gitpod.Dockerfile">(".gitpod.yml");
const [isEditorDisabled, setIsEditorDisabled] = useState<boolean>(true);
const [isDetecting, setIsDetecting] = useState<boolean>(true);
const [prebuildWasTriggered, setPrebuildWasTriggered] = useState<boolean>(false);
const [prebuildWasCancelled, setPrebuildWasCancelled] = useState<boolean>(false);
const [startPrebuildResult, setStartPrebuildResult] = useState<StartPrebuildResult | undefined>();
const [prebuildInstance, setPrebuildInstance] = useState<WorkspaceInstance | undefined>();
const { isDark } = useContext(ThemeContext);

const [progressMessage, setProgressMessage] = useState<string>("");
const [showAuthBanner, setShowAuthBanner] = useState<{ host: string; scope?: string } | undefined>(undefined);
const [buttonNewWorkspaceEnabled, setButtonNewWorkspaceEnabled] = useState<boolean>(true);

Expand Down Expand Up @@ -108,7 +89,7 @@ export default function () {
<EditorMessage
type="warning"
heading="Configuration already exists in git."
message="Run a prebuild or open a new workspace to edit project configuration."
message="Open a new workspace to edit project configuration."
/>,
);
setGitpodYml(repoConfigString);
Expand All @@ -128,7 +109,7 @@ export default function () {
<EditorMessage
type="success"
heading="Project type detected."
message="You can edit project configuration below before running a prebuild"
message="You can edit project configuration below before starting a workspace."
/>,
);
setGitpodYml(guessedConfigString);
Expand All @@ -138,7 +119,7 @@ export default function () {
<EditorMessage
type="warning"
heading="Project type could not be detected."
message="You can edit project configuration below before running a prebuild."
message="You can edit project configuration below before starting a workspace."
/>,
);
setGitpodYml(TASKS.Other);
Expand Down Expand Up @@ -176,66 +157,39 @@ export default function () {
});
};

const buildProject = async () => {
useEffect(() => {
document.title = "Configure Project — Gitpod";
}, []);

const onNewWorkspace = async () => {
if (!project) {
return;
}
setEditorMessage(null);
if (!!startPrebuildResult) {
setStartPrebuildResult(undefined);
}
if (!!prebuildInstance) {
setPrebuildInstance(undefined);
}
try {
setPrebuildWasTriggered(true);
if (!isEditorDisabled) {
await getGitpodService().server.setProjectConfiguration(project.id, gitpodYml);
}
const result = await getGitpodService().server.triggerPrebuild(project.id, null);
setStartPrebuildResult(result);
} catch (error) {
setPrebuildWasTriggered(false);
setEditorMessage(
<EditorMessage
type="warning"
heading="Could not run prebuild."
message={String(error).replace(/Error: Request \w+ failed with message: /, "")}
/>,
);
}
};

const cancelPrebuild = async () => {
if (!project || !startPrebuildResult) {
return;
}
setPrebuildWasCancelled(true);
try {
await getGitpodService().server.cancelPrebuild(project.id, startPrebuildResult.prebuildId);
} catch (error) {
setEditorMessage(
<EditorMessage
type="warning"
heading="Could not cancel prebuild."
message={String(error).replace(/Error: Request \w+ failed with message: /, "")}
/>,
);
} finally {
setPrebuildWasCancelled(false);
}
};
setButtonNewWorkspaceEnabled(false);

const onInstanceUpdate = (instance: WorkspaceInstance) => {
setPrebuildInstance(instance);
};
if (!isEditorDisabled) {
try {
setProgressMessage("Saving project configuration...");
await getGitpodService().server.setProjectConfiguration(project.id, gitpodYml);

useEffect(() => {
document.title = "Configure Project — Gitpod";
}, []);
setProgressMessage("Starting a new prebuild...");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: Is there a limitation that does not allow us to simply redirect to the workspace start page which automatically surfaces when a prebuild is running?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In my testing, starting a prebuild was required to actually use the new config. It wouldn't get picked up after the save without the prebuild. However, this may be a red-herring. I need to dig into the config & prebuild flow a bit more to understand why this is, and if in fact this is the case.

Will investigate!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've attempted to remove the prebuild step but the saved configuration is not reflected in the workspace. I will continue to investigate but in the meantime, this PR is functionally complete and will land.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good! Thanks for taking a closer look, @easyCZ!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: This could be minor but starting a prebuild is not always the case, right? When the default skeleton configuration is generated for a new project, a prebuild will not actually start, no?

tasks:
  - init: |
      echo 'TODO: build project'
    command: |
      echo 'TODO: start app'

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point! Related to the other point raised around:

question: Is there a limitation that does not allow us to simply redirect to the workspace start page which automatically surfaces when a prebuild is running?

Will investigate!

await getGitpodService().server.triggerPrebuild(project.id, null);
} catch (error) {
setEditorMessage(
<EditorMessage
type="warning"
heading="Could not run prebuild."
message={String(error).replace(/Error: Request \w+ failed with message: /, "")}
/>,
);

setProgressMessage("");
setButtonNewWorkspaceEnabled(true);
return;
}
}

const onNewWorkspace = async () => {
setButtonNewWorkspaceEnabled(false);
const redirectToNewWorkspace = () => {
// instead of `history.push` we want forcibly to redirect here in order to avoid a following redirect from `/` -> `/projects` (cf. App.tsx)
const url = new URL(window.location.toString());
Expand All @@ -244,25 +198,15 @@ export default function () {
window.location.href = url.toString();
};

if (
prebuildInstance?.status.phase === "stopped" &&
!prebuildInstance?.status.conditions.failed &&
!prebuildInstance?.status.conditions.headlessTaskFailed
) {
redirectToNewWorkspace();
return;
}
if (!prebuildWasTriggered) {
await buildProject();
}
redirectToNewWorkspace();
return;
};

return (
<ProjectSettingsPage project={project}>
<div className="grid xl:grid-cols-2 grid-cols-1 gap-4">
<div className="flex-1 h-96 rounded-xl overflow-hidden relative flex flex-col">
<div className="flex bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-600 px-6 pt-3">
<div className="grid xl:grid-cols-1 grid-cols-1">
<div className="flex-1 h-96 overflow-hidden relative flex flex-col">
<div className="flex bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-600 px-6 pt-3 rounded-t-xl">
<TabMenuItem
name=".gitpod.yml"
selected={selectedEditor === ".gitpod.yml"}
Expand Down Expand Up @@ -338,56 +282,10 @@ export default function () {
</div>
)}
</div>
<div className="flex-1 h-96 rounded-xl overflow-hidden bg-gray-100 dark:bg-gray-700 flex flex-col">
<div className="flex-grow flex">
{startPrebuildResult ? (
<PrebuildLogs workspaceId={startPrebuildResult.wsid} onInstanceUpdate={onInstanceUpdate} />
) : (
!prebuildWasTriggered && (
<div className="flex-grow flex flex-col items-center justify-center">
<img
alt=""
className="w-14"
role="presentation"
src={isDark ? PrebuildLogsEmptyDark : PrebuildLogsEmpty}
/>
<h3 className="text-center text-lg text-gray-500 dark:text-gray-50 mt-4">
No Recent Prebuild
</h3>
<p className="text-center text-base text-gray-500 dark:text-gray-400 mt-2 w-64">
Edit the project configuration on the left to get started.{" "}
<a className="gp-link" href="https://www.gitpod.io/docs/config-gitpod-file/">
Learn more
</a>
</p>
</div>
)
)}
</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">
{prebuildWasTriggered && <PrebuildInstanceStatus prebuildInstance={prebuildInstance} />}
<div className="flex-grow" />
{prebuildWasTriggered && prebuildInstance?.status.phase !== "stopped" ? (
<button
className="danger flex items-center space-x-2"
disabled={
prebuildWasCancelled ||
(prebuildInstance?.status.phase !== "initializing" &&
prebuildInstance?.status.phase !== "running")
}
onClick={cancelPrebuild}
>
<span>Cancel Prebuild</span>
</button>
) : (
<button disabled={isDetecting} className="secondary" onClick={buildProject}>
Run Prebuild
</button>
)}
<button disabled={isDetecting && buttonNewWorkspaceEnabled} onClick={onNewWorkspace}>
New Workspace
</button>
</div>
<div className="h-20 px-6 bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-600 flex flex-row-reverse space-x-2 rounded-b-xl">
<button disabled={isDetecting || !buttonNewWorkspaceEnabled} onClick={onNewWorkspace}>
{progressMessage === "" ? "New workspace" : progressMessage}
</button>
</div>
</div>
</ProjectSettingsPage>
Expand Down
Loading