Merge branch 'main' into lporoli/generate-cluster-topology-refac

kurtosis-tech · Sep 26, 2024 · 9506bce · 9506bce
2 parents 74dafc4 + a48e1ab
commit 9506bce
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 25 deletions.
diff --git a/kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx b/kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx
@@ -77,17 +77,21 @@ const Legend = () => {
                   <Td>{flowId}</Td>
                   <Td textTransform={"capitalize"}>{isBaseline.toString()}</Td>
                   <Td whiteSpace={"nowrap"}>
-                    <Link
-                      href={`http://${flowUrls[0]}`}
-                      isExternal
-                      target="_blank"
-                      display={"flex"}
-                      alignItems={"center"}
-                      gap={2}
-                    >
-                      {flowUrls[0].hostname}
-                      <FiExternalLink size={12} />
-                    </Link>
+                    {flowUrls[0]?.hostname != null ? (
+                      <Link
+                        href={`http://${flowUrls[0]}`}
+                        isExternal
+                        target="_blank"
+                        display={"flex"}
+                        alignItems={"center"}
+                        gap={2}
+                      >
+                        {flowUrls[0].hostname}
+                        <FiExternalLink size={12} />
+                      </Link>
+                    ) : (
+                      "—"
+                    )}
                   </Td>
                   <Td textAlign={"right"}>
                     {flowVisibility[flowId] === true ? (

diff --git a/kontrol-frontend/src/components/Navbar.tsx b/kontrol-frontend/src/components/Navbar.tsx
@@ -7,9 +7,21 @@ import {
   Image,
   Spacer,
   AvatarBadge,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Button,
 } from "@chakra-ui/react";
+import { useNavigate } from "react-router-dom";
 
 const Navbar = () => {
+  const navigate = useNavigate();
+
+  const navigateToPlaceholder = () => {
+    navigate("profile");
+  };
+
   return (
     <Box
       bg="white"
@@ -21,7 +33,6 @@ const Navbar = () => {
       borderBottomColor="gray.100"
     >
       <Flex h={16} alignItems="center">
-        {/* Logo */}
         <Link href="/" display="flex" alignItems="center">
           <Image
             src="/logo.png"
@@ -36,17 +47,19 @@ const Navbar = () => {
 
         <Spacer />
 
-        {/* User Profile */}
         <Flex alignItems="center">
-          <Avatar size="sm" name="Charlie Brown">
-            <AvatarBadge boxSize="1.25em" bg="green.500" />
-          </Avatar>
-          <Box ml={2}>
-            <Text>Charlie Brown</Text>
-            <Text fontSize="sm" color="gray.500">
-              ACME Corporation
-            </Text>
-          </Box>
+          <Menu>
+            <MenuButton as={Button} p={0} bg={"white"}>
+              <Avatar size="sm">
+                <AvatarBadge boxSize="1.25em" bg="green.500" />
+              </Avatar>
+            </MenuButton>
+            <MenuList>
+              <MenuItem onClick={navigateToPlaceholder}>Profile</MenuItem>
+              <MenuItem onClick={navigateToPlaceholder}>Settings</MenuItem>
+              <MenuItem onClick={navigateToPlaceholder}>Log in</MenuItem>
+            </MenuList>
+          </Menu>
         </Flex>
       </Flex>
     </Box>

diff --git a/kontrol-frontend/src/contexts/ApiContext.tsx b/kontrol-frontend/src/contexts/ApiContext.tsx
@@ -43,20 +43,21 @@ export interface ApiContextType {
 
 const defaultContextValue: ApiContextType = {
   deleteFlow: async () => [],
-  deleteTemplate: async () => { },
+  deleteTemplate: async () => {},
   error: null,
   getFlows: async () => [],
-  getTemplates: async () => { },
+  getTemplates: async () => {},
   getTopology: async () => {
     return { nodes: [], edges: [] };
   },
   loading: false,
   postFlowCreate: async () => ({
     "flow-id": "",
     "access-entry": [],
+    "flow-urls": [],
     isBaseline: false,
   }),
-  postTemplateCreate: async () => { },
+  postTemplateCreate: async () => {},
   templates: [],
 };
 

diff --git a/kontrol-frontend/src/main.tsx b/kontrol-frontend/src/main.tsx
@@ -11,6 +11,7 @@ import FlowsCreate from "@/pages/FlowsCreate";
 import FlowsIndex from "@/pages/FlowsIndex";
 import MaturityGates from "@/pages/MaturityGates";
 import TrafficConfiguration from "@/pages/TrafficConfiguration";
+import Profile from "@/pages/Profile";
 import NotFound from "@/pages/NotFound";
 
 import { ErrorBoundary } from "react-error-boundary";
@@ -60,6 +61,10 @@ const router = createBrowserRouter([
         path: "data-configuration",
         element: <DataConfiguration />,
       },
+      {
+        path: "profile",
+        element: <Profile />,
+      },
     ],
   },
   {

diff --git a/kontrol-frontend/src/pages/Profile.tsx b/kontrol-frontend/src/pages/Profile.tsx
@@ -0,0 +1,19 @@
+import EmptyState from "@/components/EmptyState";
+import { BiChevronLeft } from "react-icons/bi";
+import { FiUser } from "react-icons/fi";
+
+const Page = () => {
+  return (
+    <EmptyState
+      icon={FiUser}
+      buttonText="Go back"
+      buttonIcon={BiChevronLeft}
+      buttonTo="../traffic-configuration"
+    >
+      We’re working on getting this functionality up and running. We’ll let you
+      know when it’s ready for you!
+    </EmptyState>
+  );
+};
+
+export default Page;