Merge pull request #611 from msqd/fix_topoly_front

🏅 [fix/0.8] Fix topology front bug
msqd · Nov 8, 2024 · b44bbd0 · b44bbd0
2 parents 78f9cd4 + 728299b
commit b44bbd0
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 41 deletions.
diff --git a/docs/changelogs/unreleased.rst b/docs/changelogs/unreleased.rst
@@ -2,6 +2,11 @@ Unreleased
 ==========
 
 Added
-:::::::
+:::::
 
 * Proxy: it is now possible to add not exposed endpoints in the proxy configuration.
+
+Fixed
+:::::
+
+* UI: Fixed the topology UI where changing the state of a remote would cause the page to crash (#578, @ArthurD1).
diff --git a/harp_apps/dashboard/frontend/src/Pages/System/Topology/RemoteEndpointStatusDropDown.tsx b/harp_apps/dashboard/frontend/src/Pages/System/Topology/RemoteEndpointStatusDropDown.tsx
@@ -1,5 +1,6 @@
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react"
 import { ChevronDownIcon } from "@heroicons/react/20/solid"
+import { useCallback, useMemo } from "react"
 import tw, { styled } from "twin.macro"
 
 import { useSystemProxyMutation } from "Domain/System/useSystemProxyQuery.ts"
@@ -26,8 +27,13 @@ export default function RemoteEndpointStatusDropDown({
 }) {
   const mutation = useSystemProxyMutation()
   const status = remoteEndpoint.status ?? 0
-  const humanStatus = getHumanStatus(status)
-
+  const humanStatus = useMemo(() => getHumanStatus(status), [status])
+  const handleMutation = useCallback(
+    (status: string) => {
+      mutation.mutate({ endpoint: endpointName, url: remoteEndpoint.settings.url, action: status })
+    },
+    [mutation, endpointName, remoteEndpoint.settings.url],
+  )
   return (
     <Menu as="div" className="relative text-left">
       <div className="flex">
@@ -66,12 +72,7 @@ export default function RemoteEndpointStatusDropDown({
           {["up", "checking", "down"].map((status) =>
             humanStatus != status ? (
               <MenuItem key={status}>
-                <StyledButtonMenuItem
-                  type="button"
-                  onClick={() =>
-                    mutation.mutate({ endpoint: endpointName, url: remoteEndpoint.settings.url, action: status })
-                  }
-                >
+                <StyledButtonMenuItem type="button" onClick={() => handleMutation(status)}>
                   Set {status}
                 </StyledButtonMenuItem>
               </MenuItem>

diff --git a/harp_apps/dashboard/frontend/src/Pages/System/Topology/TopologyRemoteTable.tsx b/harp_apps/dashboard/frontend/src/Pages/System/Topology/TopologyRemoteTable.tsx
@@ -42,7 +42,10 @@ export default function TopologyRemoteTable({
             <code className="inline-flex font-mono text-xs">{remoteEndpoint.failure_reasons.join(",")}</code>
           ) : null}
           {(remoteEndpoint.settings.pools || ["default"]).map((pool, k) => (
-            <span className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 text-xs font-medium text-gray-500 ring-1 ring-inset ring-gray-200 mx-1">
+            <span
+              key={k}
+              className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 text-xs font-medium text-gray-500 ring-1 ring-inset ring-gray-200 mx-1"
+            >
               <InboxIcon key={k} className="size-3" /> {pool}
             </span>
           ))}

diff --git a/harp_apps/dashboard/frontend/src/Pages/System/Topology/TopologyTable.tsx b/harp_apps/dashboard/frontend/src/Pages/System/Topology/TopologyTable.tsx
@@ -6,10 +6,10 @@ import TopologyRemoteTable from "./TopologyRemoteTable.tsx"
 
 export function TopologyTable({ endpoints }: { endpoints: Apps.Proxy.Endpoint[] }) {
   return (
-    <>
+    <div className="my-6">
       {endpoints.map((endpoint, i) => (
-        <Pane className="flex items-start overflow-auto space-x-1" key={i}>
-          <span className="flex gap-x-2 px-2 py-0.5 text-sm font-medium text-gray-800 items-center ">
+        <Pane className="flex items-start space-x-1" key={i}>
+          <span className="flex gap-x-2 px-2 py-0.5 text-sm font-medium text-gray-800 items-center h-full">
             <PuzzlePieceIcon className="size-4" />
             <span className="flex flex-col text-center">
               {endpoint.settings.name}
@@ -25,6 +25,6 @@ export function TopologyTable({ endpoints }: { endpoints: Apps.Proxy.Endpoint[]
           <TopologyRemoteTable endpointName={endpoint.settings.name} remote={endpoint.remote} />
         </Pane>
       ))}
-    </>
+    </div>
   )
 }
diff --git a/...ps/dashboard/frontend/src/Pages/System/__snapshots__/SystemTopologyTabPanel.test.tsx.snap b/...ps/dashboard/frontend/src/Pages/System/__snapshots__/SystemTopologyTabPanel.test.tsx.snap
@@ -25,41 +25,45 @@ exports[`renders the title and data when the query is successful 1`] = `
           Topology
         </h2>
         <div
-          class="flex items-start overflow-auto space-x-1 css-14upriz"
+          class="my-6"
         >
-          <span
-            class="flex gap-x-2 px-2 py-0.5 text-sm font-medium text-gray-800 items-center "
+          <div
+            class="flex items-start space-x-1 css-14upriz"
           >
-            <svg
-              aria-hidden="true"
-              class="size-4"
-              data-slot="icon"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.39 48.39 0 0 1-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 0 1-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 0 0-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 0 1-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 0 0 .657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 0 0 5.427-.63 48.05 48.05 0 0 0 .582-4.717.532.532 0 0 0-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 0 0 .658-.663 48.422 48.422 0 0 0-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 0 1-.61-.58v0Z"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
             <span
-              class="flex flex-col text-center"
+              class="flex gap-x-2 px-2 py-0.5 text-sm font-medium text-gray-800 items-center h-full"
             >
-              endpoint1
+              <svg
+                aria-hidden="true"
+                class="size-4"
+                data-slot="icon"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.39 48.39 0 0 1-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 0 1-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 0 0-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 0 1-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 0 0 .657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 0 0 5.427-.63 48.05 48.05 0 0 0 .582-4.717.532.532 0 0 0-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 0 0 .658-.663 48.422 48.422 0 0 0-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 0 1-.61-.58v0Z"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
               <span
-                class="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 text-xs font-medium text-gray-500 ring-1 ring-inset ring-gray-200 mx-1"
+                class="flex flex-col text-center"
               >
-                8080
+                endpoint1
+                <span
+                  class="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 text-xs font-medium text-gray-500 ring-1 ring-inset ring-gray-200 mx-1"
+                >
+                  8080
+                </span>
               </span>
             </span>
-          </span>
-          <div
-            class="flex flex-col divide-y divide-gray-200 css-14upriz"
-          />
+            <div
+              class="flex flex-col divide-y divide-gray-200 css-14upriz"
+            />
+          </div>
         </div>
       </div>
     </div>