Canvas: Reuse Name component in node details
Change-Id: Ide8094b50f9ac019e7bada9a000100f9233133da
diff --git a/apps/canvas/front/src/Overview.tsx b/apps/canvas/front/src/Overview.tsx
index 8b5d496..43ba776 100644
--- a/apps/canvas/front/src/Overview.tsx
+++ b/apps/canvas/front/src/Overview.tsx
@@ -1,12 +1,14 @@
import React, { useMemo } from "react";
-import { useStateStore, ServiceNode } from "@/lib/state";
+import { useStateStore } from "@/lib/state";
import { NodeDetails } from "./components/node-details";
import { Actions } from "./components/actions";
import { Canvas } from "./components/canvas";
export function Overview(): React.ReactNode {
const store = useStateStore();
- const nodes = useMemo(() => store.nodes, [store.nodes]);
+ const nodes = useMemo(() => {
+ return store.nodes.filter((n) => n.type !== "network" && n.type !== "github");
+ }, [store.nodes]);
const isDeployMode = useMemo(() => store.mode === "deploy", [store.mode]);
return (
<div className="h-full w-full overflow-auto bg-white p-2">
@@ -15,15 +17,13 @@
<Canvas className="hidden" />
</div>
<div className="flex flex-wrap gap-4 pt-2">
- {nodes
- .filter((n): n is ServiceNode => n.type === "app")
- .map((n) => {
- return (
- <div key={n.id} className="h-fit w-fit rounded-lg border-gray-200 border-2 p-2">
- <NodeDetails node={n} disabled={isDeployMode} />
- </div>
- );
- })}
+ {nodes.map((n) => {
+ return (
+ <div key={n.id} className="h-fit w-fit rounded-lg border-gray-200 border-2 p-2">
+ <NodeDetails node={n} disabled={isDeployMode} showName={true} />
+ </div>
+ );
+ })}
</div>
</div>
);