Skip to content

Commit 8ba9ed1

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Refactor how version logs were consumed
1 parent 34f97e8 commit 8ba9ed1

File tree

8 files changed

+89
-79
lines changed

8 files changed

+89
-79
lines changed

‎site/src/api/queries/templates.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,7 @@ export type CreateTemplateOptions = {
211211
version: CreateTemplateVersionRequest;
212212
template: Omit<CreateTemplateRequest, "template_version_id">;
213213
onCreateVersion?: (version: TemplateVersion) => void;
214+
onTemplateVersionChanges?: (version: TemplateVersion) => void;
214215
};
215216

216217
const createTemplateFn = async (options: CreateTemplateOptions) => {
@@ -219,7 +220,7 @@ const createTemplateFn = async (options: CreateTemplateOptions) => {
219220
options.version,
220221
);
221222
options.onCreateVersion?.(version);
222-
await waitBuildToBeFinished(version);
223+
await waitBuildToBeFinished(version, options.onTemplateVersionChanges);
223224
return API.createTemplate(options.organizationId, {
224225
...options.template,
225226
template_version_id: version.id,
@@ -282,12 +283,16 @@ export const previousTemplateVersion = (
282283
};
283284
};
284285

285-
const waitBuildToBeFinished = async (version: TemplateVersion) => {
286+
const waitBuildToBeFinished = async (
287+
version: TemplateVersion,
288+
onRequest?: (data: TemplateVersion) => void,
289+
) => {
286290
let data: TemplateVersion;
287291
let jobStatus: ProvisionerJobStatus;
288292
do {
289293
await delay(1000);
290294
data = await API.getTemplateVersion(version.id);
295+
onRequest?.(data);
291296
jobStatus = data.job.status;
292297

293298
if (jobStatus === "succeeded") {

‎site/src/modules/templates/useVersionLogs.ts renamed to ‎site/src/modules/templates/useWatchVersionLogs.ts

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
import { watchBuildLogsByTemplateVersionId } from "api/api";
2-
import {
3-
ProvisionerJobLog,
4-
ProvisionerJobStatus,
5-
TemplateVersion,
6-
} from "api/typesGenerated";
2+
import { ProvisionerJobLog, TemplateVersion } from "api/typesGenerated";
73
import { useState, useEffect } from "react";
84

9-
export const useVersionLogs = (
5+
export const useWatchVersionLogs = (
106
templateVersion: TemplateVersion | undefined,
117
options?: { onDone: () => Promise<unknown> },
128
) => {
@@ -15,14 +11,15 @@ export const useVersionLogs = (
1511
const templateVersionStatus = templateVersion?.job.status;
1612

1713
useEffect(() => {
18-
setLogs([]);
19-
const enabledStatuses: ProvisionerJobStatus[] = ["running", "pending"];
14+
setLogs(undefined);
15+
}, [templateVersionId]);
2016

17+
useEffect(() => {
2118
if (!templateVersionId || !templateVersionStatus) {
2219
return;
2320
}
2421

25-
if (!enabledStatuses.includes(templateVersionStatus)) {
22+
if (templateVersionStatus !== "running") {
2623
return;
2724
}
2825

@@ -41,8 +38,5 @@ export const useVersionLogs = (
4138
};
4239
}, [options?.onDone, templateVersionId, templateVersionStatus]);
4340

44-
return {
45-
logs,
46-
setLogs,
47-
};
41+
return logs;
4842
};

‎site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,6 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
6262
}}
6363
{...attrs}
6464
>
65-
{stages.length === 0 && (
66-
<div css={styles.header(theme)}>Waiting for logs...</div>
67-
)}
6865
{stages.map((stage) => {
6966
const logs = groupedLogsByStage[stage];
7067
const isEmpty = logs.every((log) => log.output === "");

‎site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx

Lines changed: 64 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,11 @@ import { TemplateVersion } from "api/typesGenerated";
77
import { WorkspaceBuildLogs } from "modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs";
88
import { useTheme } from "@emotion/react";
99
import { navHeight } from "theme/constants";
10-
import { useVersionLogs } from "modules/templates/useVersionLogs";
10+
import { useWatchVersionLogs } from "modules/templates/useWatchVersionLogs";
1111
import { JobError } from "api/queries/templates";
12-
import AlertTitle from "@mui/material/AlertTitle";
13-
import { Alert, AlertDetail } from "components/Alert/Alert";
1412
import Button from "@mui/material/Button";
15-
import Collapse from "@mui/material/Collapse";
13+
import { Loader } from "components/Loader/Loader";
14+
import WarningOutlined from "@mui/icons-material/WarningOutlined";
1615

1716
type BuildLogsDrawerProps = {
1817
error: unknown;
@@ -29,7 +28,7 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
2928
...drawerProps
3029
}) => {
3130
const theme = useTheme();
32-
const { logs } = useVersionLogs(templateVersion);
31+
const logs = useWatchVersionLogs(templateVersion);
3332
const logsContainer = useRef<HTMLDivElement>(null);
3433

3534
const scrollToBottom = () => {
@@ -83,21 +82,54 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
8382
</IconButton>
8483
</header>
8584

86-
<Collapse in={isMissingVariables}>
87-
<Alert
85+
{isMissingVariables ? (
86+
<div
8887
css={{
89-
borderTop: 0,
90-
borderRight: 0,
91-
backgroundColor: theme.palette.background.paper,
92-
borderRadius: 0,
93-
borderBottomColor: theme.palette.divider,
94-
paddingLeft: 24,
88+
display: "flex",
89+
alignItems: "center",
90+
justifyContent: "center",
91+
padding: 40,
9592
}}
96-
severity="warning"
97-
actions={
93+
>
94+
<div
95+
css={{
96+
display: "flex",
97+
flexDirection: "column",
98+
alignItems: "center",
99+
textAlign: "center",
100+
maxWidth: 360,
101+
}}
102+
>
103+
<WarningOutlined
104+
css={{ fontSize: 32, color: theme.roles.warning.fill.outline }}
105+
/>
106+
<h3
107+
css={{
108+
fontWeight: 500,
109+
lineHeight: "1",
110+
margin: 0,
111+
marginTop: 16,
112+
}}
113+
>
114+
Missing variables
115+
</h3>
116+
<p
117+
css={{
118+
color: theme.palette.text.secondary,
119+
fontSize: 14,
120+
margin: 0,
121+
marginTop: 8,
122+
lineHeight: "1.5",
123+
}}
124+
>
125+
During the build process, we identified some missing variables.
126+
Rest assured, we have automatically added them to the form for
127+
you.
128+
</p>
98129
<Button
130+
css={{ marginTop: 16 }}
99131
size="small"
100-
variant="text"
132+
variant="outlined"
101133
onClick={() => {
102134
variablesSectionRef.current?.scrollIntoView({
103135
behavior: "smooth",
@@ -108,24 +140,24 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
108140
drawerProps.onClose();
109141
}}
110142
>
111-
Add variables
143+
Fill variables
112144
</Button>
113-
}
145+
</div>
146+
</div>
147+
) : logs ? (
148+
<section
149+
ref={logsContainer}
150+
css={{
151+
flex: 1,
152+
overflow: "auto",
153+
backgroundColor: theme.palette.background.default,
154+
}}
114155
>
115-
<AlertTitle>Failed to create template</AlertTitle>
116-
<AlertDetail>{isMissingVariables && error.message}</AlertDetail>
117-
</Alert>
118-
</Collapse>
119-
<section
120-
ref={logsContainer}
121-
css={{
122-
flex: 1,
123-
overflow: "auto",
124-
backgroundColor: theme.palette.background.default,
125-
}}
126-
>
127-
<WorkspaceBuildLogs logs={logs ?? []} css={{ border: 0 }} />
128-
</section>
156+
<WorkspaceBuildLogs logs={logs} css={{ border: 0 }} />
157+
</section>
158+
) : (
159+
<Loader />
160+
)}
129161
</div>
130162
</Drawer>
131163
);

‎site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const CreateTemplatePage: FC = () => {
3030
const template = await createTemplateMutation.mutateAsync({
3131
...options,
3232
onCreateVersion: setTemplateVersion,
33+
onTemplateVersionChanges: setTemplateVersion,
3334
});
3435
navigate(`/templates/${template.name}/files`);
3536
},

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ const meta: Meta<typeof TemplateVersionEditor> = {
3030
template: MockTemplate,
3131
templateVersion: MockTemplateVersion,
3232
defaultFileTree: MockTemplateVersionFileTree,
33-
onPreview: action("onPreview"),
3433
onPublish: action("onPublish"),
3534
onConfirmPublish: action("onConfirmPublish"),
3635
onCancelPublish: action("onCancelPublish"),

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export interface TemplateVersionEditorProps {
6767
resources?: WorkspaceResource[];
6868
disablePreview?: boolean;
6969
disableUpdate?: boolean;
70-
onPreview: (files: FileTree) => void;
70+
onPreview: (files: FileTree) => Promise<void>;
7171
onPublish: () => void;
7272
onConfirmPublish: (data: PublishVersionData) => void;
7373
onCancelPublish: () => void;
@@ -122,14 +122,14 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
122122
const [renameFileOpen, setRenameFileOpen] = useState<string>();
123123
const [dirty, setDirty] = useState(false);
124124

125-
const triggerPreview = useCallback(() => {
126-
onPreview(fileTree);
125+
const triggerPreview = useCallback(async () => {
126+
await onPreview(fileTree);
127127
setSelectedTab("logs");
128128
}, [fileTree, onPreview]);
129129

130130
// Stop ctrl+s from saving files and make ctrl+enter trigger a preview.
131131
useEffect(() => {
132-
const keyListener = (event: KeyboardEvent) => {
132+
const keyListener = async (event: KeyboardEvent) => {
133133
if (!(navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) {
134134
return;
135135
}
@@ -140,7 +140,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
140140
break;
141141
case "Enter":
142142
event.preventDefault();
143-
triggerPreview();
143+
await triggerPreview();
144144
break;
145145
}
146146
};
@@ -252,8 +252,8 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
252252
}
253253
title="Build template (Ctrl + Enter)"
254254
disabled={disablePreview}
255-
onClick={() => {
256-
triggerPreview();
255+
onClick={async () => {
256+
await triggerPreview();
257257
}}
258258
>
259259
Build
@@ -719,7 +719,7 @@ const styles = {
719719
// Hack to update logs header and lines
720720
"& .logs-header": {
721721
border: 0,
722-
padding: "0 16px",
722+
padding: "8px 16px",
723723
fontFamily: MONOSPACE_FONT_FAMILY,
724724

725725
"&:first-of-type": {

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { FileTree, traverse } from "utils/filetree";
2323
import { createTemplateVersionFileTree } from "utils/templateVersion";
2424
import { displayError } from "components/GlobalSnackbar/utils";
2525
import { FullScreenLoader } from "components/Loader/FullScreenLoader";
26-
import { useVersionLogs } from "modules/templates/useVersionLogs";
26+
import { useWatchVersionLogs } from "modules/templates/useWatchVersionLogs";
2727

2828
type Params = {
2929
version: string;
@@ -54,7 +54,7 @@ export const TemplateVersionEditorPage: FC = () => {
5454
...resources(templateVersionQuery.data?.id ?? ""),
5555
enabled: templateVersionQuery.data?.job.status === "succeeded",
5656
});
57-
const { logs, setLogs } = useVersionLogs(templateVersionQuery.data, {
57+
const logs = useWatchVersionLogs(templateVersionQuery.data, {
5858
onDone: templateVersionQuery.refetch,
5959
});
6060
const { fileTree, tarFile } = useFileTree(templateVersionQuery.data);
@@ -93,22 +93,6 @@ export const TemplateVersionEditorPage: FC = () => {
9393
);
9494
};
9595

96-
// Optimistically update the template version data job status to make the
97-
// build action feels faster
98-
const onBuildStart = () => {
99-
setLogs([]);
100-
101-
queryClient.setQueryData(templateVersionOptions.queryKey, () => {
102-
return {
103-
...templateVersionQuery.data,
104-
job: {
105-
...templateVersionQuery.data?.job,
106-
status: "pending",
107-
},
108-
};
109-
});
110-
};
111-
11296
const onBuildEnds = (newVersion: TemplateVersion) => {
11397
queryClient.setQueryData(templateVersionOptions.queryKey, newVersion);
11498
navigateToVersion(newVersion);
@@ -141,7 +125,6 @@ export const TemplateVersionEditorPage: FC = () => {
141125
if (!tarFile) {
142126
return;
143127
}
144-
onBuildStart();
145128
const newVersionFile = await generateVersionFiles(
146129
tarFile,
147130
newFileTree,
@@ -214,7 +197,6 @@ export const TemplateVersionEditorPage: FC = () => {
214197
if (!uploadFileMutation.data) {
215198
return;
216199
}
217-
onBuildStart();
218200
const newVersion = await createTemplateVersionMutation.mutateAsync({
219201
provisioner: "terraform",
220202
storage_method: "file",

0 commit comments

Comments
 (0)