Merge branch 'main' into bgazzard/port-navigation

kurtosis-tech · Feb 21, 2024 · 8555d74 · 8555d74
2 parents 2141eeb + ad00ee1
commit 8555d74
Showing 1 changed file with 71 additions and 10 deletions.
diff --git a/enclave-manager/web/packages/app/src/emui/enclaves/enclave/logs/EnclaveLogs.tsx b/enclave-manager/web/packages/app/src/emui/enclaves/enclave/logs/EnclaveLogs.tsx
@@ -1,4 +1,21 @@
-import { ButtonGroup, CircularProgress, Flex, Icon, Tag } from "@chakra-ui/react";
+import {
+  ButtonGroup,
+  CircularProgress,
+  Flex,
+  FormControl,
+  FormLabel,
+  Icon,
+  IconButton,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
+  Switch,
+  Tag,
+} from "@chakra-ui/react";
 import { StarlarkRunResponseLine } from "enclave-manager-sdk/build/api_container_service_pb";
 import {
   AppPageLayout,
@@ -8,8 +25,8 @@ import {
   stringifyError,
   TitledBox,
 } from "kurtosis-ui-components";
-import { useEffect, useState } from "react";
-import { FiCheck, FiX } from "react-icons/fi";
+import { useEffect, useMemo, useState } from "react";
+import { FiCheck, FiSettings, FiX } from "react-icons/fi";
 import { Location, useBlocker, useLocation, useNavigate } from "react-router-dom";
 import { EditEnclaveButton } from "../../components/EditEnclaveButton";
 import { LogNavigationWarningModal } from "../../components/modals/LogNavigationWarningModal";
@@ -28,10 +45,17 @@ type EnclaveLogStage =
 
 const LOG_STARTING_EXECUTION = "Starting execution";
 
-export function starlarkResponseLineToLogLineMessage(l: StarlarkRunResponseLine): LogLineMessage {
+export function starlarkResponseLineToLogLineMessage(
+  l: StarlarkRunResponseLine,
+  shouldUseDescriptionField: boolean,
+): LogLineMessage {
   switch (l.runResponseLine.case) {
     case "instruction":
-      return { message: l.runResponseLine.value.executableInstruction };
+      return {
+        message: shouldUseDescriptionField
+          ? l.runResponseLine.value.description
+          : l.runResponseLine.value.executableInstruction,
+      };
     case "progressInfo":
       return { message: l.runResponseLine.value.currentStepInfo[l.runResponseLine.value.currentStepNumber] };
     case "instructionResult":
@@ -54,23 +78,33 @@ export const EnclaveLogs = () => {
   const navigator = useNavigate();
   const location = useLocation() as Location<{ logs: AsyncIterable<StarlarkRunResponseLine> }>;
   const [progress, setProgress] = useState<EnclaveLogStage>({ stage: "waiting" });
-  const [logLines, setLogLines] = useState<LogLineMessage[]>([]);
+  const [shouldUseDescriptionField, setShouldUseDescriptionField] = useState(true);
+  const [rawLogLines, setRawLogLines] = useState<(StarlarkRunResponseLine | { message: string; status: "error" })[]>(
+    [],
+  );
+  const logLines = useMemo((): LogLineMessage[] => {
+    return rawLogLines.map((rawLogLine) =>
+      rawLogLine.hasOwnProperty("status")
+        ? (rawLogLine as LogLineMessage)
+        : starlarkResponseLineToLogLineMessage(rawLogLine as StarlarkRunResponseLine, shouldUseDescriptionField),
+    );
+  }, [rawLogLines, shouldUseDescriptionField]);
 
   const blocker = useBlocker(({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname);
 
   useEffect(() => {
     let cancelled = false;
     (async () => {
       if (location.state && isAsyncIterable(location.state.logs)) {
-        setLogLines([]);
+        setRawLogLines([]);
         setProgress({ stage: "waiting" });
         try {
           for await (const line of location.state.logs) {
             if (cancelled) {
               return;
             }
-            const parsedLine = starlarkResponseLineToLogLineMessage(line);
-            setLogLines((logLines) => [...logLines, parsedLine]);
+            const parsedLine = starlarkResponseLineToLogLineMessage(line, shouldUseDescriptionField);
+            setRawLogLines((logLines) => [...logLines, line]);
             setProgress((oldProgress) => {
               if (line.runResponseLine.case === "progressInfo") {
                 if (oldProgress.stage === "waiting") {
@@ -105,7 +139,7 @@ export const EnclaveLogs = () => {
           if (cancelled) {
             return;
           }
-          setLogLines((logLines) => [...logLines, { message: `Error: ${stringifyError(error)}`, status: "error" }]);
+          setRawLogLines((logLines) => [...logLines, { message: `Error: ${stringifyError(error)}`, status: "error" }]);
           await Promise.all([refreshStarlarkRun(enclave), refreshServices(enclave), refreshFilesAndArtifacts(enclave)]);
         } finally {
           updateStarlarkFinishedInEnclave(enclave);
@@ -131,6 +165,10 @@ export const EnclaveLogs = () => {
       ? 100
       : 0;
 
+  const handleToggleDescriptive = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setShouldUseDescriptionField(e.target.checked);
+  };
+
   return (
     <AppPageLayout preventPageScroll>
       <>
@@ -142,6 +180,29 @@ export const EnclaveLogs = () => {
             <Flex justifyContent={"space-between"} alignItems={"center"} width={"100%"}>
               <ProgressSummary progress={progress} />
               <ButtonGroup>
+                <Popover>
+                  <PopoverTrigger>
+                    <IconButton icon={<FiSettings />} aria-label={"Settings"} />
+                  </PopoverTrigger>
+                  <PopoverContent>
+                    <PopoverArrow />
+                    <PopoverCloseButton />
+                    <PopoverHeader>Settings</PopoverHeader>
+                    <PopoverBody>
+                      <FormControl display="flex" alignItems="center" justifyContent={"center"} mb={"0"}>
+                        <FormLabel htmlFor={"descriptive"} size={"sm"}>
+                          Use descriptive starlark output
+                        </FormLabel>
+                        <Switch
+                          id={"descriptive"}
+                          size={"sm"}
+                          isChecked={shouldUseDescriptionField}
+                          onChange={handleToggleDescriptive}
+                        />
+                      </FormControl>
+                    </PopoverBody>
+                  </PopoverContent>
+                </Popover>
                 <DeleteEnclavesButton enclaves={[enclave]} size={"md"} />
                 <EditEnclaveButton
                   enclave={enclave}