Revert "feat: Add new ports view to the EM UI (#1919)"

This reverts commit 027d74b.

enclave-manager/web/src/components/enclaves/tables/PortsTable.tsx

@@ -1,133 +1,103 @@
 import { ExternalLinkIcon } from "@chakra-ui/icons";
-import { Flex, Link, Text } from "@chakra-ui/react";
+import { Flex, Icon, Link, Text, Tooltip } from "@chakra-ui/react";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import { Port } from "enclave-manager-sdk/build/api_container_service_pb";
 import { useMemo } from "react";
-import { KURTOSIS_CLOUD_HOST, KURTOSIS_CLOUD_PROTOCOL } from "../../../client/constants";
+import { FiAlertTriangle } from "react-icons/fi";
 import { useKurtosisClient } from "../../../client/enclaveManager/KurtosisClientContext";
-import { isDefined } from "../../../utils";
+import { CopyButton } from "../../CopyButton";
 import { DataTable } from "../../DataTable";
 import { transportProtocolToString } from "../utils";
 
 type PortsTableRow = {
-  port: {
-    transportProtocol: string;
-    privatePort: number;
-    publicPort: number;
-    name: string;
-    applicationProtocol: string;
-  };
+  port: { transportProtocol: string; privatePort: number; name: string };
   link: string;
 };
-const shortUUID = (fullUUID: string) => fullUUID.substring(0, 12);
 
 const getPortTableRows = (
-  instanceUUID: string,
-  enclaveUUID: string,
-  serviceUUID: string,
   privatePorts: Record<string, Port>,
   publicPorts: Record<string, Port>,
   publicIp: string,
 ): PortsTableRow[] => {
-  return Object.entries(privatePorts).map(([name, port]) => {
-    let link;
-    if (isDefined(instanceUUID) && instanceUUID.length > 0) {
-      link =
-        `${KURTOSIS_CLOUD_PROTOCOL}://` +
-        `${port.number}-${shortUUID(serviceUUID)}-${shortUUID(enclaveUUID)}-${shortUUID(instanceUUID)}` +
-        `.${KURTOSIS_CLOUD_HOST}`;
-    } else {
-      link = `${port.maybeApplicationProtocol ? port.maybeApplicationProtocol + "://" : ""}${publicIp}:${
-        publicPorts[name].number
-      }`;
-    }
-    return {
-      port: {
-        applicationProtocol: port.maybeApplicationProtocol,
-        transportProtocol: transportProtocolToString(port.transportProtocol),
-        privatePort: port.number,
-        publicPort: publicPorts[name].number,
-        name,
-      },
-      link: link,
-    };
-  });
+  return Object.entries(privatePorts).map(([name, port]) => ({
+    port: { transportProtocol: transportProtocolToString(port.transportProtocol), privatePort: port.number, name },
+    link: `${port.maybeApplicationProtocol ? port.maybeApplicationProtocol + "://" : ""}${publicIp}:${
+      publicPorts[name].number
+    }`,
+  }));
 };
 
 const columnHelper = createColumnHelper<PortsTableRow>();
 
 type PortsTableProps = {
-  instanceUUID: string;
-  enclaveUUID: string;
-  serviceUUID: string;
   privatePorts: Record<string, Port>;
   publicPorts: Record<string, Port>;
   publicIp: string;
 };
 
-export const PortsTable = ({
-  instanceUUID,
-  enclaveUUID,
-  serviceUUID,
-  privatePorts,
-  publicPorts,
-  publicIp,
-}: PortsTableProps) => {
+export const PortsTable = ({ privatePorts, publicPorts, publicIp }: PortsTableProps) => {
   const kurtosisClient = useKurtosisClient();
 
   const columns = useMemo<ColumnDef<PortsTableRow, any>[]>(
     () => [
       columnHelper.accessor("port", {
-        header: "Name",
+        header: "Port",
         cell: ({ row, getValue }) => (
           <Flex flexDirection={"column"} gap={"10px"}>
-            <Text>
-              {row.original.port.applicationProtocol?.startsWith("http") ? (
-                <Link href={row.original.link} isExternal>
-                  {row.original.port.name}&nbsp;
-                  <ExternalLinkIcon mx="2px" />
-                </Link>
-              ) : (
-                row.original.port.name
-              )}
+            <Text>{row.original.port.name || "Unknown protocol"}</Text>
+            <Text fontSize={"xs"} color={"gray.400"} fontWeight={"semibold"}>
+              {row.original.port.privatePort}/{row.original.port.transportProtocol}
             </Text>
           </Flex>
         ),
       }),
-      columnHelper.accessor("port", {
-        header: "Private / Public Ports",
-        cell: ({ row, getValue }) => (
-          <Flex flexDirection={"column"} gap={"10px"}>
-            <Text>
-              {row.original.port.privatePort} / {row.original.port.publicPort}
-            </Text>
-          </Flex>
-        ),
-      }),
-      columnHelper.accessor("port", {
-        header: "Application Protocol",
-        cell: ({ row, getValue }) => (
-          <Flex flexDirection={"column"} gap={"10px"}>
-            <Text>{row.original.port.applicationProtocol}</Text>
-          </Flex>
+      columnHelper.accessor("link", {
+        header: "Link",
+        minSize: 800,
+        cell: ({ row }) => (
+          <Text width={"100%"}>
+            {row.original.link.startsWith("http") ? (
+              <Link href={row.original.link} isExternal>
+                {row.original.link}
+                <ExternalLinkIcon mx="2px" />
+              </Link>
+            ) : (
+              row.original.link
+            )}
+            {kurtosisClient.isRunningInCloud() && (
+              <Tooltip
+                label={
+                  "Only enclaves started using the CLI will have their ports available. This port may not work if it was started using the app."
+                }
+                shouldWrapChildren
+              >
+                <Icon m="0 10px" as={FiAlertTriangle} color={"orange.400"} />
+              </Tooltip>
+            )}
+          </Text>
         ),
       }),
-      columnHelper.accessor("port", {
-        header: "Transport Protocol",
-        cell: ({ row, getValue }) => (
-          <Flex flexDirection={"column"} gap={"10px"}>
-            <Text>{row.original.port.transportProtocol}</Text>
+      columnHelper.display({
+        id: "copyButton",
+        cell: ({ row }) => (
+          <Flex justifyContent={"flex-end"}>
+            <CopyButton
+              contentName={"link"}
+              isIconButton
+              aria-label={"Copy this port"}
+              valueToCopy={`${row.original.link}`}
+            />
           </Flex>
         ),
       }),
     ],
-    [],
+    [kurtosisClient],
   );
 
   return (
     <DataTable
       columns={columns}
-      data={getPortTableRows(instanceUUID, enclaveUUID, serviceUUID, privatePorts, publicPorts, publicIp)}
+      data={getPortTableRows(privatePorts, publicPorts, publicIp)}
       defaultSorting={[{ id: "port", desc: true }]}
     />
   );

enclave-manager/web/src/components/enclaves/utils.ts

@@ -9,8 +9,6 @@ export function transportProtocolToString(protocol: Port_TransportProtocol) {
       return "SCTP";
     case Port_TransportProtocol.UDP:
       return "UDP";
-    default:
-      return "";
   }
 }
 

enclave-manager/web/src/emui/enclaves/enclave/service/Service.tsx

@@ -11,9 +11,8 @@ import { EnclaveFullInfo } from "../../types";
 import { useEnclaveFromParams } from "../EnclaveRouteContext";
 import { ServiceLogs } from "./logs/ServiceLogs";
 import { ServiceOverview } from "./overview/ServiceOverview";
-import Cookies from "js-cookie";
 
-const tabs: { path: string; element: FunctionComponent<{ enclave: EnclaveFullInfo; service: ServiceInfo; instanceUUID: string }> }[] = [
+const tabs: { path: string; element: FunctionComponent<{ enclave: EnclaveFullInfo; service: ServiceInfo }> }[] = [
   { path: "overview", element: ServiceOverview },
   { path: "logs", element: ServiceLogs },
 ];
@@ -68,8 +67,6 @@ const ServiceImpl = ({ enclave, service }: ServiceImplProps) => {
     navigator(`/enclave/${enclave.shortenedUuid}/service/${service.shortenedUuid}/${tab.path}`);
   };
 
-  const instanceUUID = Cookies.get("_kurtosis_instance_id") || "";
-
   return (
     <Tabs isManual isLazy index={activeIndex} onChange={handleTabChange}>
       <AppPageLayout>
@@ -80,7 +77,7 @@ const ServiceImpl = ({ enclave, service }: ServiceImplProps) => {
         <TabPanels>
           {tabs.map((tab) => (
             <TabPanel key={tab.path}>
-              <tab.element enclave={enclave} service={service} instanceUUID={instanceUUID} />
+              <tab.element enclave={enclave} service={service} />
             </TabPanel>
           ))}
         </TabPanels>

enclave-manager/web/src/emui/enclaves/enclave/service/overview/ServiceOverview.tsx

@@ -15,10 +15,9 @@ import { EnclaveFullInfo } from "../../../types";
 type ServiceOverviewProps = {
   enclave: EnclaveFullInfo;
   service: ServiceInfo;
-  instanceUUID: string;
 };
 
-export const ServiceOverview = ({ service, enclave, instanceUUID }: ServiceOverviewProps) => {
+export const ServiceOverview = ({ service, enclave }: ServiceOverviewProps) => {
   return (
     <Flex flexDirection={"column"} gap={FLEX_STANDARD_GAP}>
       <Grid templateColumns={"repeat(4, 1fr)"} gap={FLEX_STANDARD_GAP}>
@@ -45,9 +44,6 @@ export const ServiceOverview = ({ service, enclave, instanceUUID }: ServiceOverv
       </Grid>
       <TitledBox title={"Ports"}>
         <PortsTable
-          instanceUUID={instanceUUID}
-          enclaveUUID={enclave.enclaveUuid}
-          serviceUUID={service.serviceUuid}
           privatePorts={service.privatePorts}
           publicPorts={service.maybePublicPorts}
           publicIp={service.maybePublicIpAddr}

engine/server/webapp/asset-manifest.json

@@ -1,10 +1,10 @@
 {
   "files": {
-    "main.js": "./static/js/main.de76da51.js",
+    "main.js": "./static/js/main.2ecb326d.js",
     "index.html": "./index.html",
-    "main.de76da51.js.map": "./static/js/main.de76da51.js.map"
+    "main.2ecb326d.js.map": "./static/js/main.2ecb326d.js.map"
   },
   "entrypoints": [
-    "static/js/main.de76da51.js"
+    "static/js/main.2ecb326d.js"
   ]
 }

engine/server/webapp/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Kurtosis Enclave Manager"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.de76da51.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Kurtosis Enclave Manager"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.2ecb326d.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>