Skip to content

feat: setup connection to dynamic parameters websocket #17393

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 20 commits into from
Apr 16, 2025
Merged

feat: setup connection to dynamic parameters websocket #17393

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
7b61485
feat: create dynamic parameter component
jaaydenh Apr 10, 2025
f5d4a1c
fix: format
jaaydenh Apr 11, 2025
0fc4289
chore: cleanup, update validation
jaaydenh Apr 11, 2025
d109874
chore: update for types from typesGenerated
jaaydenh Apr 11, 2025
7c13eb7
fix: remove filters
jaaydenh Apr 11, 2025
4290284
chore: remove unused typesParameter.ts
jaaydenh Apr 11, 2025
74084fb
fix: updates for PR review
jaaydenh Apr 15, 2025
05adc15
fix: format
jaaydenh Apr 15, 2025
b2c662a
fix: remove websocket code
jaaydenh Apr 15, 2025
2da7d99
feat: connect to dynamic parameters websocket
jaaydenh Apr 14, 2025
98dfee2
chore: cleanup
jaaydenh Apr 14, 2025
d1ada89
fix: set initial values
jaaydenh Apr 14, 2025
e04ce2f
fix: fix commit
jaaydenh Apr 16, 2025
a6f480d
fix: fix rebase issues
jaaydenh Apr 16, 2025
2613100
chore: update valid value methods
jaaydenh Apr 16, 2025
1e66a71
chore: onError is required
jaaydenh Apr 16, 2025
9a9201e
chore: display websocket error in UI
jaaydenh Apr 16, 2025
1777ca9
fix: format
jaaydenh Apr 16, 2025
440fedc
fix: updates for PR review
jaaydenh Apr 16, 2025
4f056af
chore: add useCallback
jaaydenh Apr 16, 2025
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
Prev Previous commit
Next Next commit
chore: cleanup
  • Loading branch information
@jaaydenh
jaaydenh committed Apr 16, 2025
commit 98dfee25fcef47c69513c68e40c8de2309b77e5d
21 changes: 20 additions & 1 deletion site/src/api/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1009,10 +1009,29 @@ class ApiMethods {
return response.data;
};

templateVersionDynamicParameters = (versionId: string): WebSocket => {
templateVersionDynamicParameters = (
versionId: string,
{
onMessage,
onError,
}: {
onMessage: (response: TypesGen.DynamicParametersResponse) => void;
onError: (error: Error) => void;
},
): WebSocket => {
const socket = createWebSocket(
`/api/v2/templateversions/${versionId}/dynamic-parameters`,
);

socket.addEventListener("message", (event) =>
onMessage(JSON.parse(event.data) as TypesGen.DynamicParametersResponse),
);

socket.addEventListener("error", () => {
onError?.(new Error("Connection for dynamic parameters failed."));
socket.close();
});

return socket;
};

Expand Down
76 changes: 36 additions & 40 deletions site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const CreateWorkspacePageExperimental: FC = () => {
const [currentResponse, setCurrentResponse] =
useState<DynamicParametersResponse | null>(null);
const [wsResponseId, setWSResponseId] = useState<number>(-1);
const webSocket = useRef<WebSocket | null>(null);
const ws = useRef<WebSocket | null>(null);

const customVersionId = searchParams.get("version") ?? undefined;
const defaultName = searchParams.get("name");
Expand Down Expand Up @@ -81,58 +81,54 @@ const CreateWorkspacePageExperimental: FC = () => {
const realizedVersionId =
customVersionId ?? templateQuery.data?.active_version_id;

const onMessage = useCallback((response: DynamicParametersResponse) => {
setCurrentResponse((prev) => {
if (prev?.id === response.id) {
return prev;
}
return response;
});
}, []);

// Initialize the WebSocket connection when there is a valid template version ID
useEffect(() => {
if (!realizedVersionId) {
return;
}

if (webSocket.current) {
webSocket.current.close();
if (ws.current) {
ws.current.close();
}

const socket = API.templateVersionDynamicParameters(realizedVersionId);

socket.addEventListener("message", (event) => {
try {
const response = JSON.parse(event.data) as DynamicParametersResponse;

if (response && response.id >= wsResponseId) {
setCurrentResponse((prev) => {
if (prev?.id === response.id) {
return prev;
}
return response;
});
}
} catch (error) {
console.error("Failed to parse WebSocket message:", error);
}
const socket = API.templateVersionDynamicParameters(realizedVersionId, {
onMessage,
onError: (error) => {
console.error("Failed to parse dynamic parameters webSocket message:", error);
},
});

webSocket.current = socket;
ws.current = socket;

return () => {
if (webSocket.current) {
webSocket.current.close();
if (ws.current) {
ws.current.close();
}
};
}, [realizedVersionId]);

const sendMessage =
(formValues: Record<string, string>) => {
setWSResponseId(prevId => {
const request: DynamicParametersRequest = {
id: prevId + 1,
inputs: formValues,
};
if (webSocket.current && webSocket.current.readyState === WebSocket.OPEN) {
webSocket.current.send(JSON.stringify(request));
return prevId + 1;
}
return prevId;
})
};
}, [realizedVersionId, onMessage]);

const sendMessage = (formValues: Record<string, string>) => {
setWSResponseId((prevId) => {
const request: DynamicParametersRequest = {
id: prevId + 1,
inputs: formValues,
};
if (ws.current && ws.current.readyState === WebSocket.OPEN) {
ws.current.send(JSON.stringify(request));
return prevId + 1;
}
return prevId;
});
};
Copy link
Member

Choose a reason for hiding this comment

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

one last thought, I noticed that onMessage is wrapped in a useCallback but this isn't. was that intentional? could be nice to wrap this one as well since it's also being passed as a prop to a child 🤷‍♀️

Copy link
Contributor Author

Choose a reason for hiding this comment

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

onMessage was wrapped because its used as a dependency for a useEffect. Sure I can wrap sendMessage as well.


const organizationId = templateQuery.data?.organization_id;

Expand All @@ -143,7 +139,7 @@ const CreateWorkspacePageExperimental: FC = () => {
isLoadingExternalAuth,
} = useExternalAuth(realizedVersionId);

const isLoadingFormData =
const isLoadingFormData = ws.current?.readyState !== WebSocket.OPEN ||
templateQuery.isLoading || permissionsQuery.isLoading;
const loadFormDataError = templateQuery.error ?? permissionsQuery.error;

Expand Down