feat: emui service overview

enclave-manager/web/package.json

@@ -10,6 +10,7 @@
     "@connectrpc/connect-web": "^0.13.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@monaco-editor/react": "^4.6.0",
     "@tanstack/react-table": "^8.10.7",
     "enclave-manager-sdk": "file:../api/typescript",
     "framer-motion": "^10.16.4",
@@ -30,6 +31,7 @@
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "monaco-editor": "^0.44.0",
     "prettier": "3.0.3",
     "prettier-plugin-curly": "^0.1.3",
     "prettier-plugin-organize-imports": "^3.2.3",

enclave-manager/web/src/components/CodeEditor.tsx

@@ -0,0 +1,63 @@
+import { Editor, OnChange, OnMount, useMonaco } from "@monaco-editor/react";
+import { isDefined } from "../utils";
+import { useMemo, useRef, useState } from "react";
+import { editor } from "monaco-editor";
+import { Box } from "@chakra-ui/react";
+
+type CodeEditorProps = {
+  text: string;
+  onTextChange?: (newText: string) => void;
+  showLineNumbers?: boolean;
+};
+
+export const CodeEditor = ({ text, onTextChange, showLineNumbers }: CodeEditorProps) => {
+  const isReadOnly = !isDefined(onTextChange);
+  const [editor, setEditor] = useState<editor.IStandaloneCodeEditor>();
+
+  const handleContentSizeChange = (e: editor.IContentSizeChangedEvent) => {
+    editor?.layout({ width: 500, height: e.contentHeight });
+  };
+
+  const handleMount: OnMount = (editor, monaco) => {
+    setEditor(editor);
+    monaco.editor.defineTheme("kurtosis-theme", {
+      base: "vs-dark",
+      inherit: true,
+      rules: [],
+      colors: {},
+    });
+    monaco.editor.setTheme("kurtosis-theme");
+    editor.onDidContentSizeChange(handleContentSizeChange);
+  };
+
+  const handleChange: OnChange = (value, ev) => {
+    if (isDefined(value) && onTextChange) {
+      onTextChange(value);
+    }
+  };
+
+  return (
+    <Box width={"100%"} minHeight={`${editor?.getContentHeight() || 10}px`}>
+      <Editor
+        onMount={handleMount}
+        value={text}
+        onChange={handleChange}
+        options={{
+          readOnly: isReadOnly,
+          lineNumbers: showLineNumbers || (!isDefined(showLineNumbers) && !isReadOnly) ? "on" : "off",
+          minimap: { enabled: false },
+          wordWrap: "on",
+          wrappingStrategy: "advanced",
+          scrollBeyondLastLine: false,
+          renderLineHighlight: isReadOnly ? "none" : "line",
+          selectionHighlight: !isReadOnly,
+          occurrencesHighlight: !isReadOnly,
+          overviewRulerLanes: isReadOnly ? 0 : 3,
+        }}
+        defaultLanguage={"json"}
+        theme={"vs-dark"}
+        height={"100%"}
+      />
+    </Box>
+  );
+};

enclave-manager/web/src/components/DataTable.tsx

@@ -100,7 +100,12 @@ export function DataTable<Data extends object>({
             {row.getVisibleCells().map((cell) => {
               const meta = cell.column.columnDef.meta;
               return (
-                <Td key={cell.id} isNumeric={meta?.isNumeric} textAlign={!!meta?.centerAligned ? "center" : undefined}>
+                <Td
+                  key={cell.id}
+                  isNumeric={meta?.isNumeric}
+                  textAlign={!!meta?.centerAligned ? "center" : undefined}
+                  width={cell.column.getSize()}
+                >
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </Td>
               );

enclave-manager/web/src/components/FileDisplay.tsx

@@ -0,0 +1,29 @@
+import { ButtonGroup, Card, Flex, Text } from "@chakra-ui/react";
+import { CopyButton } from "./CopyButton";
+import { DownloadButton } from "./DownloadButton";
+import { CodeEditor } from "./CodeEditor";
+
+type FileDisplayProps = {
+  title: string;
+  value: string;
+  filename: string;
+};
+
+export const FileDisplay = ({ value, filename, title }: FileDisplayProps) => {
+  return (
+    <Flex flexDirection={"column"} gap={"12px"} height={"100%"}>
+      <Flex justifyContent={"space-between"}>
+        <Text fontSize={"sm"} fontWeight={"medium"}>
+          {title}
+        </Text>
+        <ButtonGroup isAttached>
+          <CopyButton contentName={title.toLowerCase()} valueToCopy={value} />
+          <DownloadButton fileName={filename} valueToDownload={value} />
+        </ButtonGroup>
+      </Flex>
+      <Card height={"100%"}>
+        <CodeEditor text={value} />
+      </Card>
+    </Flex>
+  );
+};

enclave-manager/web/src/components/ValueCard.tsx

@@ -24,7 +24,9 @@ export const ValueCard = ({ title, value, copyEnabled, copyValue }: ValueCardPro
           />
         )}
       </Flex>
-      <Text fontSize={"xl"}>{value}</Text>
+      <Text as={"div"} fontSize={"xl"}>
+        {value}
+      </Text>
     </Card>
   );
 };

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

@@ -0,0 +1,67 @@
+import { Link, Flex, Text } 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 { DataTable } from "../../DataTable";
+import { transportProtocolToString } from "../utils";
+import { CopyButton } from "../../CopyButton";
+import { ExternalLinkIcon } from "@chakra-ui/icons";
+
+const columnHelper = createColumnHelper<Port>();
+
+type PortsTableProps = {
+  ports: Port[];
+  ip: string;
+  isPublic?: boolean;
+};
+
+export const PortsTable = ({ ports, ip, isPublic }: PortsTableProps) => {
+  const columns = useMemo<ColumnDef<Port, any>[]>(
+    () => [
+      columnHelper.accessor("number", {
+        header: "Port",
+        cell: ({ row, getValue }) => (
+          <Flex flexDirection={"column"} gap={"10px"}>
+            <Text>{row.original.maybeApplicationProtocol || "Unknown protocol"}</Text>
+            <Text fontSize={"xs"} color={"gray.400"} fontWeight={"semibold"}>
+              {row.original.number}/{transportProtocolToString(row.original.transportProtocol)}
+            </Text>
+          </Flex>
+        ),
+      }),
+      columnHelper.accessor("maybeApplicationProtocol", {
+        header: "Link",
+        minSize: 800,
+        cell: ({ row }) => (
+          <Text width={"100%"}>
+            {isPublic && (
+              <Link
+                href={`${row.original.maybeApplicationProtocol}://${ip}:${row.original.number}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                isExternal
+              >
+                {row.original.maybeApplicationProtocol}://{ip}:{row.original.number} <ExternalLinkIcon mx="2px" />
+              </Link>
+            )}
+            {!isPublic && `${row.original.maybeApplicationProtocol}://${ip}:${row.original.number}`}
+          </Text>
+        ),
+      }),
+      columnHelper.display({
+        id: "copyButton",
+        cell: ({ row }) => (
+          <Flex justifyContent={"flex-end"}>
+            <CopyButton
+              contentName={"link"}
+              valueToCopy={`${row.original.maybeApplicationProtocol}://${ip}:${row.original.number}`}
+            />
+          </Flex>
+        ),
+      }),
+    ],
+    [],
+  );
+
+  return <DataTable columns={columns} data={ports} defaultSorting={[{ id: "number", desc: true }]} />;
+};

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

@@ -38,12 +38,12 @@ const serviceToRow = (service: ServiceInfo): ServicesTableRow => {
 
 const columnHelper = createColumnHelper<ServicesTableRow>();
 
-type EnclavesTableProps = {
+type ServicesTableProps = {
   enclaveShortUUID: string;
   servicesResponse: RemoveFunctions<GetServicesResponse>;
 };
 
-export const ServicesTable = ({ enclaveShortUUID, servicesResponse }: EnclavesTableProps) => {
+export const ServicesTable = ({ enclaveShortUUID, servicesResponse }: ServicesTableProps) => {
   const services = Object.values(servicesResponse.serviceInfo).map(serviceToRow);
 
   const columns = useMemo<ColumnDef<ServicesTableRow, any>[]>(

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

@@ -0,0 +1,12 @@
+import { Port_TransportProtocol } from "enclave-manager-sdk/build/api_container_service_pb";
+
+export function transportProtocolToString(protocol: Port_TransportProtocol) {
+  switch (protocol) {
+    case Port_TransportProtocol.TCP:
+      return "TCP";
+    case Port_TransportProtocol.SCTP:
+      return "SCTP";
+    case Port_TransportProtocol.UDP:
+      return "UDP";
+  }
+}

enclave-manager/web/src/components/enclaves/widgets/PortsSummary.tsx

@@ -11,19 +11,9 @@ import {
   Thead,
   Tr,
 } from "@chakra-ui/react";
-import { Port, Port_TransportProtocol } from "enclave-manager-sdk/build/api_container_service_pb";
+import { Port } from "enclave-manager-sdk/build/api_container_service_pb";
 import { TitledCard } from "../../TitledCard";
-
-function transportProtocolToString(protocol: Port_TransportProtocol) {
-  switch (protocol) {
-    case Port_TransportProtocol.TCP:
-      return "TCP";
-    case Port_TransportProtocol.SCTP:
-      return "SCTP";
-    case Port_TransportProtocol.UDP:
-      return "UDP";
-  }
-}
+import { transportProtocolToString } from "../utils";
 
 type PortsSummaryProps = {
   privatePorts: Port[];

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

@@ -1,9 +1,18 @@
-import { Flex, Grid, GridItem, Icon, Text } from "@chakra-ui/react";
-import { ServiceInfo } from "enclave-manager-sdk/build/api_container_service_pb";
+import { ButtonGroup, Card, Flex, Grid, GridItem, Icon, Text } from "@chakra-ui/react";
+import { Container, ServiceInfo } from "enclave-manager-sdk/build/api_container_service_pb";
 import { IoLogoDocker } from "react-icons/io5";
 import { ServiceStatusTag } from "../../../../../components/enclaves/widgets/ServiceStatus";
 import { FLEX_STANDARD_GAP } from "../../../../../components/theme/constants";
 import { ValueCard } from "../../../../../components/ValueCard";
+import { isDefined } from "../../../../../utils";
+import { KurtosisAlert } from "../../../../../components/KurtosisAlert";
+import { CopyButton } from "../../../../../components/CopyButton";
+import { DownloadButton } from "../../../../../components/DownloadButton";
+import { useMemo } from "react";
+import { CodeEditor } from "../../../../../components/CodeEditor";
+import { FileDisplay } from "../../../../../components/FileDisplay";
+import { PortsTable } from "../../../../../components/enclaves/tables/PortsTable";
+import { TitledCard } from "../../../../../components/TitledCard";
 
 type ServiceOverviewProps = {
   service: ServiceInfo;
@@ -26,14 +35,53 @@ export const ServiceOverview = ({ service }: ServiceOverviewProps) => {
           <ValueCard
             title={"Image"}
             value={
-              <Flex>
+              <Flex alignItems={"center"} gap={"8px"}>
                 <Icon as={IoLogoDocker} />
                 <Text>{service.container?.imageName || "unknown"}</Text>
               </Flex>
             }
           />
         </GridItem>
       </Grid>
+      <TitledCard title={"Public Ports"}>
+        <PortsTable ports={Object.values(service.maybePublicPorts)} ip={service.maybePublicIpAddr} isPublic />
+      </TitledCard>
+      <TitledCard title={"Private Ports"}>
+        <PortsTable ports={Object.values(service.privatePorts)} ip={service.privateIpAddr} />
+      </TitledCard>
+      {isDefined(service.container) && <ContainerOverview container={service.container} />}
+      {!isDefined(service.container) && (
+        <KurtosisAlert message={"No container details are available for this service."} />
+      )}
+    </Flex>
+  );
+};
+
+type ContainerOverviewProps = {
+  container: Container;
+};
+
+const ContainerOverview = ({ container }: ContainerOverviewProps) => {
+  const environmentJson = useMemo(() => JSON.stringify(container.envVars, undefined, 4), [container]);
+  const cmdJson = useMemo(() => JSON.stringify(container.cmdArgs, undefined, 4), [container]);
+  const entrypointJson = useMemo(() => JSON.stringify(container.entrypointArgs, undefined, 4), [container]);
+
+  const filePrefix = container.imageName.replaceAll(/:/g, "_");
+
+  return (
+    <Flex flexDirection={"column"} gap={"32px"}>
+      <Text fontSize={"md"} fontWeight={"semibold"}>
+        Detailed Info
+      </Text>
+      <Grid gridColumnGap={"32px"} gridTemplateColumns={"1fr 1fr"}>
+        <GridItem display={"flex"} flexDirection={"column"} gap={"16px"}>
+          <FileDisplay value={entrypointJson} title={"Entrypoint"} filename={`${filePrefix}-entrypoint.json`} />
+          <FileDisplay value={cmdJson} title={"CMD"} filename={`${filePrefix}-cmd.json`} />
+        </GridItem>
+        <GridItem>
+          <FileDisplay value={environmentJson} title={"Environment"} filename={`${filePrefix}-env.json`} />
+        </GridItem>
+      </Grid>
     </Flex>
   );
 };

enclave-manager/web/yarn.lock

@@ -2529,6 +2529,20 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
+"@monaco-editor/loader@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.4.0.tgz#f08227057331ec890fa1e903912a5b711a2ad558"
+  integrity sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==
+  dependencies:
+    state-local "^1.0.6"
+
+"@monaco-editor/react@^4.6.0":
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.6.0.tgz#bcc68671e358a21c3814566b865a54b191e24119"
+  integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==
+  dependencies:
+    "@monaco-editor/loader" "^1.4.0"
+
 "@nicolo-ribaudo/[email protected]":
   version "5.1.1-v1"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
@@ -7738,6 +7752,11 @@ mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.6"
 
+monaco-editor@^0.44.0:
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.44.0.tgz#3c0fe3655923bbf7dd647057302070b5095b6c59"
+  integrity sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==
+
 [email protected]:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -9752,6 +9771,11 @@ stackframe@^1.3.4:
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310"
   integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==
 
+state-local@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
+  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
+
 [email protected]:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/static-eval/-/static-eval-2.0.2.tgz#2d1759306b1befa688938454c546b7871f806a42"

engine/server/webapp/asset-manifest.json

@@ -1,10 +1,10 @@
 {
   "files": {
-    "main.js": "./static/js/main.8b855950.js",
+    "main.js": "./static/js/main.90108866.js",
     "index.html": "./index.html",
-    "main.8b855950.js.map": "./static/js/main.8b855950.js.map"
+    "main.90108866.js.map": "./static/js/main.90108866.js.map"
   },
   "entrypoints": [
-    "static/js/main.8b855950.js"
+    "static/js/main.90108866.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="The Kurtosis Enclave Manager Web UI."/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.8b855950.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="The Kurtosis Enclave Manager Web UI."/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.90108866.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>