show green tick for runs in the current session; show last executed at (

#289)
codepod-io · May 8, 2023 · f52999a · f52999a
1 parent 6693fc8
commit f52999a
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 25 deletions.
diff --git a/ui/src/components/nodes/Code.tsx b/ui/src/components/nodes/Code.tsx
@@ -61,13 +61,29 @@ import { NodeResizeControl, NodeResizer } from "reactflow";
 
 import "@reactflow/node-resizer/dist/style.css";
 import { NewPodButtons, ResizeIcon } from "./utils";
+import { timeDifference } from "../../lib/utils";
+
+function Timer({ lastExecutedAt }) {
+  const [counter, setCounter] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCounter(counter + 1);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [counter]);
+  return <Box>Last executed: {timeDifference(new Date(), lastExecutedAt)}</Box>;
+}
 
 export const ResultBlock = memo<any>(function ResultBlock({ id }) {
   const store = useContext(RepoContext)!;
   const result = useStore(store, (state) => state.pods[id].result);
   const error = useStore(store, (state) => state.pods[id].error);
   const stdout = useStore(store, (state) => state.pods[id].stdout);
   const running = useStore(store, (state) => state.pods[id].running);
+  const lastExecutedAt = useStore(
+    store,
+    (state) => state.pods[id].lastExecutedAt
+  );
   const [showOutput, setShowOutput] = useState(true);
   return (
     <Box
@@ -82,7 +98,7 @@ export const ResultBlock = memo<any>(function ResultBlock({ id }) {
             <div dangerouslySetInnerHTML={{ __html: result.html }}></div>
           ) : (
             <>
-              {!error && (
+              {lastExecutedAt && !error && (
                 <Box
                   color="rgb(0, 183, 87)"
                   sx={{
@@ -114,6 +130,7 @@ export const ResultBlock = memo<any>(function ResultBlock({ id }) {
                       style={{ marginTop: "5px" }}
                       fontSize="inherit"
                     />
+                    <Timer lastExecutedAt={lastExecutedAt} />
                   </Box>
                 </Box>
               )}
@@ -714,7 +731,7 @@ export const CodeNode = memo<NodeProps>(function ({
                     top: isRightLayout ? 0 : "100%",
                     left: isRightLayout ? "100%" : 0,
                     ...(isRightLayout
-                      ? {}
+                      ? { minWidth: "250px" }
                       : { maxWidth: "100%", minWidth: "100%" }),
                     boxSizing: "border-box",
                     backgroundColor: "white",

diff --git a/ui/src/lib/store/index.tsx b/ui/src/lib/store/index.tsx
@@ -28,6 +28,7 @@ export type Pod = {
   stdout?: string;
   stderr?: string;
   error?: { evalue: string; stacktrace: string[] } | null;
+  lastExecutedAt?: Date;
   lang: string;
   column?: number;
   raw?: boolean;

diff --git a/ui/src/lib/store/podSlice.tsx b/ui/src/lib/store/podSlice.tsx
@@ -178,6 +178,7 @@ export const createPodSlice: StateCreator<MyState, [], [], PodSlice> = (
           // };
           // console.log("WS_EXECUTE_REPLY", result);
           state.pods[id].running = false;
+          state.pods[id].lastExecutedAt = Date.now();
           if (!state.pods[id].result) {
             state.pods[id].result = {
               text: result,

diff --git a/ui/src/lib/utils.tsx b/ui/src/lib/utils.tsx
@@ -10,6 +10,29 @@ export const getAuthHeaders = () => {
   };
 };
 
+export function timeDifference(current, previous) {
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerMonth = msPerDay * 30;
+  const msPerYear = msPerDay * 365;
+  const elapsed = current - previous;
+
+  if (elapsed < msPerMinute) {
+    return Math.round(elapsed / 1000) + " seconds ago";
+  } else if (elapsed < msPerHour) {
+    return Math.round(elapsed / msPerMinute) + " minutes ago";
+  } else if (elapsed < msPerDay) {
+    return Math.round(elapsed / msPerHour) + " hours ago";
+  } else if (elapsed < msPerMonth) {
+    return Math.round(elapsed / msPerDay) + " days ago";
+  } else if (elapsed < msPerYear) {
+    return Math.round(elapsed / msPerMonth) + " months ago";
+  } else {
+    return Math.round(elapsed / msPerYear) + " years ago";
+  }
+}
+
 // pretty print the time difference
 export function prettyPrintTime(d) {
   let year = d.getUTCFullYear() - 1970;

diff --git a/ui/src/pages/repos.tsx b/ui/src/pages/repos.tsx
@@ -29,29 +29,7 @@ import { getUpTime } from "../lib/utils";
 import { Button } from "@mui/material";
 import { useAuth } from "../lib/auth";
 import { GoogleSignin } from "./login";
-
-function timeDifference(current, previous) {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 24;
-  const msPerMonth = msPerDay * 30;
-  const msPerYear = msPerDay * 365;
-  const elapsed = current - previous;
-
-  if (elapsed < msPerMinute) {
-    return Math.round(elapsed / 1000) + " seconds ago";
-  } else if (elapsed < msPerHour) {
-    return Math.round(elapsed / msPerMinute) + " minutes ago";
-  } else if (elapsed < msPerDay) {
-    return Math.round(elapsed / msPerHour) + " hours ago";
-  } else if (elapsed < msPerMonth) {
-    return Math.round(elapsed / msPerDay) + " days ago";
-  } else if (elapsed < msPerYear) {
-    return Math.round(elapsed / msPerMonth) + " months ago";
-  } else {
-    return Math.round(elapsed / msPerYear) + " years ago";
-  }
-}
+import { timeDifference } from "../lib/utils";
 
 function RepoLine({ repo, deletable, sharable, runtimeInfo }) {
   const { me } = useMe();