add config to use rabbitmq for remote runtime

Author: lihebi

README.md

@@ -98,6 +98,24 @@ npm install -g ijavascript
 ijsinstall
 ```
 
+# Using remote runtime
+
+In the runtime section in the sidebar, you can add a new runtime. For the runtime, you need to specify the two addresses: the websocket address for sending code to server, and the MQ address for receiving output. If MQ address is empty, the websocket will be used.
+
+The default runtime is the local runtime, which is `localhost:14321`
+
+To start the server, on the server machine, you need to setup the kernels. Then, you need to clone this repo, go into the cpkernel folder, and do:
+
+1. `docker-compose up -d`. This will setup a rabbitmq server. The MQ address is `:15674`
+2. `npm run kernel-server`. This will run the server. The websocket address is `:14321`
+
+So to use this server, enter:
+
+- `<your-server-ip>:14321` for the socket address
+- `<your-server-ip>:15674` for the MQ address
+
+We can spawn a docker container on the server for the kernels. However, it will be tricky to access files and install packages. One has to install packages for every restart of the kernel, and one has to mount a volume to exchange files between the server and the container. Thus we think it is a better experience to use the bare-metal server.
+
 # Development Scripts
 
 Develop

ui/src/components/repo/sidebar.js

@@ -118,13 +118,133 @@ function SidebarSession() {
   );
 }
 
+function RuntimeItem({ socketAddress, mqAddress }) {
+  const [edit, setEdit] = useState(false);
+  const [addr1, setAddr1] = useState(socketAddress);
+  const [addr2, setAddr2] = useState(mqAddress);
+  const dispatch = useDispatch();
+  const activeRuntime = useSelector((state) => state.repo.activeRuntime);
+  let reponame = useSelector((state) => state.repo.reponame);
+  const repoConfig = useSelector((state) => state.repo.repoConfig);
+  const [updateRepoConfig, {}] = useMutation(
+    gql`
+      mutation UpdateRepoConfig($reponame: String, $config: String) {
+        updateRepoConfig(name: $reponame, config: $config)
+      }
+    `,
+    { refetchQueries: ["RepoConfig"] }
+  );
+  return (
+    <Stack key={socketAddress} direction="row" alignItems="center">
+      <Radio
+        checked={
+          JSON.stringify([socketAddress, mqAddress]) ==
+          JSON.stringify(activeRuntime)
+        }
+        onChange={() => {
+          dispatch(wsActions.wsDisconnect());
+          dispatch(
+            repoSlice.actions.activateRuntime([socketAddress, mqAddress])
+          );
+          // dispatch(wsActions.wsConnect());
+        }}
+        value="a"
+        name="radio-buttons"
+        inputProps={{ "aria-label": "A" }}
+      />
+      {edit ? (
+        <Box sx={{ display: "flex", flexDirection: "column" }}>
+          <TextField
+            size="small"
+            value={addr1}
+            onChange={(e) => {
+              setAddr1(e.target.value);
+            }}
+          ></TextField>
+          <TextField
+            size="small"
+            value={addr2}
+            onChange={(e) => {
+              setAddr2(e.target.value);
+            }}
+          ></TextField>
+          <Button
+            onClick={() => {
+              updateRepoConfig({
+                variables: {
+                  reponame,
+                  config: JSON.stringify({
+                    runtimes: produce(repoConfig.runtimes, (draft) => {
+                      let idx = draft.findIndex(
+                        ([addr1, addr2]) => addr1 === socketAddress
+                      );
+                      draft[idx] = [addr1, addr2];
+                    }),
+                  }),
+                },
+              });
+              setEdit(false);
+            }}
+          >
+            Save
+          </Button>
+          <Button
+            onClick={() => {
+              setAddr1(socketAddress);
+              setAddr2(mqAddress);
+              setEdit(false);
+            }}
+          >
+            Cancel
+          </Button>
+        </Box>
+      ) : (
+        <Box>
+          <Box fontSize="small">{socketAddress}</Box>
+          {mqAddress && <Box fontSize="small">{mqAddress}</Box>}
+        </Box>
+      )}
+
+      {!edit && socketAddress !== "localhost:14321" && (
+        <Box>
+          <IconButton
+          // onClick={() => {
+          //   updateRepoConfig({
+          //     variables: {
+          //       reponame,
+          //       config: JSON.stringify({
+          //         runtimes: produce(repoConfig.runtimes, (draft) => {
+          //           let idx = draft.findIndex(
+          //             ([addr1, addr2]) => addr1 === socketAddress
+          //           );
+          //           draft.splice(idx, 1);
+          //         }),
+          //       }),
+          //     },
+          //   });
+          // }}
+          >
+            <DeleteForeverTwoToneIcon sx={{ fontSize: 15, color: "red" }} />
+          </IconButton>
+          <Button
+            onClick={() => {
+              setEdit(true);
+            }}
+          >
+            Edit
+          </Button>
+        </Box>
+      )}
+    </Stack>
+  );
+}
+
 function SidebarRuntime() {
   const sessionRuntime = useSelector((state) => state.repo.sessionRuntime);
   const runtimeConnected = useSelector((state) => state.repo.runtimeConnected);
   // const runtimes = useSelector((state) => state.repo.runtimes);
-  const activeRuntime = useSelector((state) => state.repo.activeRuntime);
-  let reponame = useSelector((state) => state.repo.reponame);
 
+  let reponame = useSelector((state) => state.repo.reponame);
   const [updateRepoConfig, {}] = useMutation(
     gql`
       mutation UpdateRepoConfig($reponame: String, $config: String) {
@@ -151,54 +271,28 @@ function SidebarRuntime() {
               variables: {
                 reponame,
                 config: JSON.stringify({
-                  runtimes: Object.assign(
-                    { [value]: true },
-                    repoConfig.runtimes
-                  ),
+                  runtimes: produce(repoConfig.runtimes, (draft) => {
+                    draft[value] = true;
+                  }),
                 }),
               },
             });
           }}
         >
           Add
         </ClickInputButton>
-        {/* <Box>{JSON.stringify(runtimes)}</Box> */}
-        {Object.entries(
-          Object.assign({ "localhost:14321": false }, repoConfig?.runtimes)
-        ).map(([address, canDelete]) => (
-          <Stack key={address} direction="row" alignItems="center">
-            <Radio
-              checked={address === activeRuntime}
-              onChange={() => {
-                dispatch(wsActions.wsDisconnect());
-                dispatch(repoSlice.actions.activateRuntime(address));
-                // dispatch(wsActions.wsConnect());
-              }}
-              value="a"
-              name="radio-buttons"
-              inputProps={{ "aria-label": "A" }}
-            />
-            <Box fontSize="small">{address}</Box>
-            {canDelete && (
-              <IconButton
-                onClick={() => {
-                  updateRepoConfig({
-                    variables: {
-                      reponame,
-                      config: JSON.stringify({
-                        runtimes: produce(repoConfig.runtimes, (draft) => {
-                          delete draft[address];
-                        }),
-                      }),
-                    },
-                  });
-                }}
-              >
-                <DeleteForeverTwoToneIcon sx={{ fontSize: 15, color: "red" }} />
-              </IconButton>
-            )}
-          </Stack>
-        ))}
+        <Button
+          onClick={() => {
+            dispatch(repoSlice.actions.addRuntime());
+          }}
+        >
+          +
+        </Button>
+        {[["localhost:14321", ""]]
+          .concat(repoConfig?.runtimes || [])
+          .map(([address, mqAddress]) => (
+            <RuntimeItem socketAddress={address} mqAddress={mqAddress} />
+          ))}
       </Box>
       <Box>
         Runtime connected?{" "}

ui/src/lib/reducers/runtime.js

@@ -12,12 +12,15 @@ export default {
       state.pods[id].error = null;
     });
   },
-
   setRunning: (state, action) => {
     let id = action.payload;
     state.pods[id].running = true;
   },
   activateRuntime: (state, action) => {
     state.activeRuntime = action.payload;
   },
+  addRuntime: (state, action) => {
+    // socket address, MQ address, editing
+    state.repoConfig.runtimes.push(["", ""]);
+  },
 };

ui/src/lib/store.js

@@ -132,7 +132,7 @@ const initialState = {
   // sessionId: nanoid(),
   sessionId: null,
   sessionRuntime: {},
-  activeRuntime: "localhost:14321",
+  activeRuntime: ["localhost:14321", ""],
   runtimeConnected: false,
   kernels: {
     julia: {

ui/src/lib/ws/middleware.js

@@ -531,7 +531,7 @@ const socketMiddleware = () => {
           // socket_url = `ws://localhost:14321`;
           // socket_url = `ws://192.168.1.142:14321`;
           // FIXME variable not ready?
-          socket_url = `ws://${store.getState().repo.activeRuntime}`;
+          socket_url = `ws://${store.getState().repo.activeRuntime[0]}`;
         } else if (window.location.protocol === "http:") {
           socket_url = `ws://${window.location.host}/ws`;
         } else {
@@ -541,9 +541,12 @@ const socketMiddleware = () => {
         socket = new WebSocket(socket_url);
         // socket.emit("spawn", state.sessionId, lang);
 
-        if (!window.codepodio) {
+        if (!store.getState().repo.activeRuntime[1]) {
+          // If the mqAddress is not supplied, use the websocket
           socket.onmessage = onMessage(store);
         } else {
+          // otherwise, use the mqAddress
+
           // if (mq_client) {
           //   mq_client.disconnect()
           // }
@@ -554,10 +557,13 @@ const socketMiddleware = () => {
             // "ws://codepod.test/ws"
             // "ws://mq.codepod.test/ws"
             // FIXME why have to use /ws suffix?
-            mq_url = `ws://mq.${window.location.host}/ws`;
+            // mq_url = `ws://mq.${window.location.host}/ws`;
+            // mq_url = `ws://192.168.1.142:15674/ws`;
+            mq_url = `ws://${store.getState().repo.activeRuntime[1]}/ws`;
           } else {
             mq_url = `wss://mq.${window.location.host}/ws`;
           }
+          console.log("connecting to MQ:", mq_url);
           mq_client = Stomp.over(new WebSocket(mq_url));
           // remove debug messages
           mq_client.debug = () => {};