restat in cli and fix ws

cli/src/components/Restart.tsx

@@ -0,0 +1,164 @@
+import React, { Fragment, useEffect } from "react";
+import LabelledSelector from "./util/LabelledSelector";
+import { useMainSequence } from "../cli";
+import { useStore } from "../util/hooks";
+import { Box, Newline, Text } from "ink";
+import { Input } from "./util/Input";
+import EnterToContinue from "./util/EnterToContinue";
+import { CommandLogError } from "@monitor/types";
+import { restart, RestartError } from "../util/helpers/restart";
+
+type State = {
+  stage:
+    | "query"
+    | "name"
+    | "mongo"
+    | "confirm"
+    | "installing"
+    | "finished"
+    | "error";
+  name: string;
+  mongoUrl?: string;
+  result?: CommandLogError;
+  error?: RestartError;
+};
+
+const Restart = () => {
+  const { next, prev } = useMainSequence();
+  const [config, setConfig, setMany] = useStore<State>({
+    stage: "query",
+    name: "monitor-core",
+  });
+
+  const { stage, name, mongoUrl, result, error } = config;
+
+  useEffect(() => {
+    if (stage === "installing") {
+      restart({ name, mongoUrl: mongoUrl! }, (err) =>
+        setMany(["stage", "error"], ["error", err])
+      ).then((success) => {
+        if (success) {
+          setMany(["stage", "finished"], ["result", success]);
+        }
+      });
+    } else if (stage === "finished" || stage === "error") {
+      process.exit();
+    }
+  }, [stage]);
+
+  if (stage === "query") {
+    return (
+      <LabelledSelector
+        label="What are you trying to do?"
+        items={["deploy monitor core", "restart monitor core"]}
+        onSelect={(option) => {
+          switch (option) {
+            case "deploy monitor core":
+              next();
+              break;
+
+            case "restart monitor core":
+              setConfig("stage", "name");
+              break;
+          }
+        }}
+        onEsc={prev}
+        vertical
+      />
+    );
+  } else {
+    return (
+      <Box flexDirection="column">
+        <Text color="green">
+          name:{" "}
+          <Text color="white">
+            {stage === "name" ? (
+              <Input
+                initialValue={name}
+                onSubmit={(name) => setMany(["stage", "mongo"], ["name", name])}
+                onEsc={() => setConfig("stage", "query")}
+              />
+            ) : (
+              name
+            )}
+          </Text>
+        </Text>
+
+        {stage === "mongo" && (
+          <Text color="green">
+            mongo url:{" "}
+            <Text color="white">
+              <Input
+                initialValue={mongoUrl || "mongodb://127.0.0.1:27017/monitor"}
+                onSubmit={(mongoUrl) =>
+                  setMany(["stage", "confirm"], ["mongoUrl", mongoUrl])
+                }
+                onEsc={() => setConfig("stage", "name")}
+              />
+            </Text>
+          </Text>
+        )}
+
+        {mongoUrl && stage !== "mongo" && (
+          <Text color="green">
+            mongo url: <Text color="white">{mongoUrl}</Text>
+          </Text>
+        )}
+
+        <Newline />
+
+        {stage === "confirm" && (
+          <EnterToContinue
+            onEnter={() => {
+              setConfig("stage", "installing");
+            }}
+            onEsc={() => setConfig("stage", "mongo")}
+            pressEnterTo="restart monitor"
+          />
+        )}
+
+        {(stage === "installing" || stage === "error") && (
+          <Fragment>
+            <Text>restarting...</Text>
+          </Fragment>
+        )}
+
+        {result && (
+          <Fragment>
+            <Text color="green">finished restarting</Text>
+            <Newline />
+            <Box flexDirection="column" marginLeft={2}>
+              <Text color="green">
+                command: <Text color="white">{result.command}</Text>
+              </Text>
+              {result.log.stderr ? (
+                <Text color="red">
+                  stderr: <Text color="white">{result.log.stderr}</Text>
+                </Text>
+              ) : undefined}
+              {result.log.stdout ? (
+                <Text color="blue">
+                  stdout: <Text color="white">{result.log.stdout}</Text>
+                </Text>
+              ) : undefined}
+            </Box>
+            <Newline />
+          </Fragment>
+        )}
+
+        {error && (
+          <Fragment>
+            <Newline />
+            <Text color="red">error restarting</Text>
+            <Newline />
+            <Text>{error.message}</Text>
+            <Text>{error.error}</Text>
+            <Newline />
+          </Fragment>
+        )}
+      </Box>
+    );
+  }
+};
+
+export default Restart;

cli/src/components/util/EnterToContinue.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { Text } from "ink";
-import { useEnter } from "../../util/hooks";
+import { useEnter, useEsc } from "../../util/hooks";
 
-const EnterToContinue = ({ onEnter, pressEnterTo }: { onEnter: () => void; pressEnterTo?: string }) => {
+const EnterToContinue = ({ onEnter, pressEnterTo, onEsc }: { onEnter: () => void; pressEnterTo?: string; onEsc?: () => void; }) => {
 	useEnter(onEnter);
+  useEsc(() => onEsc && onEsc());
   return (
     <Text>
       press{" "}

cli/src/components/util/LabelledSelector.tsx

@@ -6,6 +6,7 @@ const LabelledSelector = ({
   label,
   items,
   onSelect,
+  onEsc,
   vertical,
   labelColor = "white",
 }: {
@@ -14,6 +15,7 @@ const LabelledSelector = ({
   items: string[];
   onSelect?: (item: string, index: number) => void;
   vertical?: boolean;
+  onEsc?: () => void;
 }) => {
   return (
     <Box flexDirection={vertical ? "column" : "row"}>
@@ -23,7 +25,7 @@ const LabelledSelector = ({
         label
       )}
       {vertical && <Newline />}
-      <Selector items={items} onSelect={onSelect} />
+      <Selector items={items} onSelect={onSelect} onEsc={onEsc} />
     </Box>
   );
 };

cli/src/components/util/Selector.tsx

@@ -4,6 +4,7 @@ import { Box, Text, useInput } from "ink";
 const Selector = (p: {
 	items: string[];
 	onSelect?: (item: string, i: number) => void;
+	onEsc?: () => void;
 }) => {
 	const [highlighted, setHighlighted] = useState(0);
 	useInput((_, key) => {
@@ -13,6 +14,8 @@ const Selector = (p: {
 			setHighlighted(Math.min(highlighted + 1, p.items.length - 1));
 		} else if (key.return) {
 			if (p.onSelect) p.onSelect(p.items[highlighted]!, highlighted);
+		} else if (key.escape) {
+			if (p.onEsc) p.onEsc();
 		}
 	});
 	return (

cli/src/components/util/YesNo.tsx

@@ -8,7 +8,8 @@ const YesNo = ({
   onSelect,
   vertical,
   labelColor,
-	noYes
+	noYes,
+  onEsc
 }: {
   label: ReactNode;
   onYes?: () => void;
@@ -17,6 +18,7 @@ const YesNo = ({
   vertical?: boolean;
   labelColor?: "green" | "white";
   noYes?: boolean;
+  onEsc?: () => void;
 }) => {
   return (
     <LabelledSelector
@@ -32,6 +34,7 @@ const YesNo = ({
       }}
       vertical={vertical}
       labelColor={labelColor}
+      onEsc={onEsc}
     />
   );
 };