Skip to content

Commit

Permalink
fix(console): stop blocking the ui unnecessarily (#5241)
Browse files Browse the repository at this point in the history 
- The Console will show the logs even when there's an error during compile
- The Console won't block the hierarchy, the explorer and the logs while the Simulator is compiling
  • Loading branch information
@skyrpex
skyrpex authored Dec 18, 2023
1 parent 74e22cc commit b5fa0cb
Show file tree
Hide file tree
Showing 4 changed files with 174 additions and 204 deletions.
24 changes: 13 additions & 11 deletions apps/wing-console/console/ui/src/features/map-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,18 +96,20 @@ export const MapView = memo(
</div>
</div>
)}
<div
className={classNames(
"absolute h-full w-full bg-white/70 dark:bg-slate-600/70",
"transition-all",
!mapData && "opacity-100 z-10",
mapData && "opacity-0 -z-10",
)}
>
<div className="absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<SpinnerLoader data-testid="main-view-loader" />

{!mapData && (
<div
className={classNames(
"absolute h-full w-full bg-white/70 dark:bg-slate-600/70",
"transition-all",
"z-10",
)}
>
<div className="absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<SpinnerLoader data-testid="main-view-loader" />
</div>
</div>
</div>
)}

<div className="absolute inset-0">
<ElkMap
Expand Down
181 changes: 85 additions & 96 deletions apps/wing-console/console/ui/src/layout/default-layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,12 +119,6 @@ export const DefaultLayout = ({
};
}, [layoutConfig]);

const renderApp = useMemo(() => {
return !(
layout.errorScreen?.position === "default" && cloudAppState === "error"
);
}, [layout.errorScreen?.position, cloudAppState]);

const selectedItemId = useMemo(() => selectedItems.at(0), [selectedItems]);

const onTestsSelectedItemsChange = useCallback(
Expand Down Expand Up @@ -175,10 +169,7 @@ export const DefaultLayout = ({
theme.bg3,
)}
>
<LogsWidget
loading={deferredLoading}
onResourceClick={onResourceClick}
/>
<LogsWidget onResourceClick={onResourceClick} />
</div>
);
}
Expand All @@ -196,7 +187,6 @@ export const DefaultLayout = ({
onTestsSelectedItemsChange,
showTests,
theme.bg3,
deferredLoading,
onResourceClick,
],
);
Expand Down Expand Up @@ -243,7 +233,7 @@ export const DefaultLayout = ({
</div>
)}

{renderApp && (
{cloudAppState !== "error" && (
<>
{loading && (
<div
Expand All @@ -253,19 +243,6 @@ export const DefaultLayout = ({
)}

<div className="flex-1 flex relative gap-0.5">
<div
className={classNames(
"absolute h-full w-full bg-white/70 dark:bg-slate-600/70",
"transition-all",
deferredLoading && "opacity-100 z-50",
!deferredLoading && "opacity-100 -z-10",
)}
>
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<SpinnerLoader data-testid="main-view-loader" />
</div>
</div>

{!layout.leftPanel?.hide &&
layout.leftPanel?.components?.length && (
<RightResizableWidget
Expand Down Expand Up @@ -353,6 +330,19 @@ export const DefaultLayout = ({
"rounded-lg overflow-hidden",
)}
>
<div
className={classNames(
"absolute h-full w-full bg-white/70 dark:bg-slate-600/70",
"transition-all",
deferredLoading && "opacity-100 z-50",
!deferredLoading && "opacity-100 -z-10",
)}
>
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<SpinnerLoader data-testid="main-view-loader" />
</div>
</div>

{metadata.data && (
<ResourceMetadata
node={metadata.data?.node}
Expand All @@ -375,84 +365,83 @@ export const DefaultLayout = ({
</div>
</div>
</div>

{!layout.bottomPanel?.hide && (
<TopResizableWidget
className={classNames(
USE_EXTERNAL_THEME_COLOR,
"relative flex",
theme.text2,
"min-h-[5rem]",
"gap-0.5",
(layout.bottomPanel?.size === "small" && "h-[8rem]") ||
"h-[15rem]",
)}
>
{layout.bottomPanel?.components?.map(
(component: LayoutComponent, index: number) => {
const panelComponent = (
<div
key={index}
className={classNames(
layout.panels?.rounded &&
"rounded-lg overflow-hidden",
"flex grow",
)}
>
{renderLayoutComponent(component)}
</div>
);

if (
layout.bottomPanel?.components?.length &&
layout.bottomPanel.components.length > 1 &&
index !== layout.bottomPanel.components.length - 1
) {
return (
<RightResizableWidget
key={component.type}
className={classNames(
"h-full w-1/4 flex flex-col min-w-[10rem] min-h-[10rem]",
)}
>
{panelComponent}
</RightResizableWidget>
);
}
return panelComponent;
},
)}
</TopResizableWidget>
</>
)}
{!layout.bottomPanel?.hide && (
<TopResizableWidget
className={classNames(
USE_EXTERNAL_THEME_COLOR,
"relative flex",
theme.text2,
"min-h-[5rem]",
"gap-0.5",
(layout.bottomPanel?.size === "small" && "h-[8rem]") ||
"h-[15rem]",
)}
>
{layout.bottomPanel?.components?.map(
(component: LayoutComponent, index: number) => {
const panelComponent = (
<div
key={index}
className={classNames(
layout.panels?.rounded &&
"rounded-lg overflow-hidden",
"flex grow",
)}
>
{renderLayoutComponent(component)}
</div>
);

{cloudAppState === "error" &&
layout.errorScreen?.position === "bottom" && (
<>
<div className="fixed inset-0 flex justify-center items-center z-50 bg-black bg-opacity-40" />

<div className="fixed bottom-0 max-h-[80vh] w-full z-50">
<TopResizableWidget
if (
layout.bottomPanel?.components?.length &&
layout.bottomPanel.components.length > 1 &&
index !== layout.bottomPanel.components.length - 1
) {
return (
<RightResizableWidget
key={component.type}
className={classNames(
theme.border4,
"absolute flex",
theme.bg3,
theme.text2,
"min-h-[5rem] h-[30rem]",
"h-full w-1/4 flex flex-col min-w-[10rem] min-h-[10rem]",
)}
>
<BlueScreenOfDeath
title={"An error has occurred:"}
error={errorMessage.data ?? ""}
displayLinks={layout.errorScreen?.displayLinks}
displayWingTitle={layout.errorScreen?.displayTitle}
/>
</TopResizableWidget>
</div>
</>
)}
</>
{panelComponent}
</RightResizableWidget>
);
}
return panelComponent;
},
)}
</TopResizableWidget>
)}

{cloudAppState === "error" &&
layout.errorScreen?.position === "bottom" && (
<>
<div className="fixed inset-0 flex justify-center items-center z-50 bg-black bg-opacity-40" />

<div className="fixed bottom-0 max-h-[80vh] w-full z-50">
<TopResizableWidget
className={classNames(
theme.border4,
"absolute flex",
theme.bg3,
theme.text2,
"min-h-[5rem] h-[30rem]",
)}
>
<BlueScreenOfDeath
title={"An error has occurred:"}
error={errorMessage.data ?? ""}
displayLinks={layout.errorScreen?.displayLinks}
displayWingTitle={layout.errorScreen?.displayTitle}
/>
</TopResizableWidget>
</div>
</>
)}

{!layout.statusBar?.hide && (
<div className={classNames(USE_EXTERNAL_THEME_COLOR)}>
<StatusBar
Expand Down
13 changes: 2 additions & 11 deletions apps/wing-console/console/ui/src/ui/explorer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@ export const Explorer = memo((props: ExplorerProps) => {
selectedItemId,
onSelectedItemsChange,
onExpandAll,
loading,
onCollapseAll,
expandedItems,
onExpandedItemsChange,
Expand All @@ -87,19 +86,11 @@ export const Explorer = memo((props: ExplorerProps) => {
data-testid={props["data-testid"]}
>
<Toolbar title="Explorer">
<ToolbarButton
onClick={onExpandAll}
title="Expand All"
disabled={loading}
>
<ToolbarButton onClick={onExpandAll} title="Expand All">
<SquareStackPlusIcon className="w-4 h-4 rotate-90" />
</ToolbarButton>

<ToolbarButton
onClick={onCollapseAll}
title="Collapse All"
disabled={loading}
>
<ToolbarButton onClick={onCollapseAll} title="Collapse All">
<SquareStackMinusIcon className="w-4 h-4 rotate-90" />
</ToolbarButton>
</Toolbar>
Expand Down
Loading

0 comments on commit b5fa0cb

Please sign in to comment.