From 80bfd05be4b433fc432b5b8752fdd17aec14b381 Mon Sep 17 00:00:00 2001
From: Bobby <bofei@mail.com>
Date: Fri, 18 Jun 2021 19:23:56 +1000
Subject: [PATCH 1/3] ft build stream: auto scroll to latest log

---
 www/package.json                              |  1 +
 .../Table/TableHeader/TableLogs.tsx           | 83 +++++++++++++++++--
 www/yarn.lock                                 |  5 ++
 3 files changed, 84 insertions(+), 5 deletions(-)

diff --git a/www/package.json b/www/package.json
index 8d616972..82248a27 100644
--- a/www/package.json
+++ b/www/package.json
@@ -49,6 +49,7 @@
     "react-router-dom": "^5.0.1",
     "react-scripts": "^3.4.3",
     "react-scroll-sync": "^0.8.0",
+    "react-usestateref": "^1.0.5",
     "serve": "^11.3.2",
     "tinymce": "^5.2.0",
     "typescript": "^3.7.2",
diff --git a/www/src/components/Table/TableHeader/TableLogs.tsx b/www/src/components/Table/TableHeader/TableLogs.tsx
index 2e181fb6..33f7f2e4 100644
--- a/www/src/components/Table/TableHeader/TableLogs.tsx
+++ b/www/src/components/Table/TableHeader/TableLogs.tsx
@@ -1,12 +1,14 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import useRouter from "hooks/useRouter";
 import useTable from "hooks/useFiretable/useTable";
 import { useFiretableContext } from "contexts/FiretableContext";
+import useStateRef from "react-usestateref";
 
 import _camelCase from "lodash/camelCase";
 import _get from "lodash/get";
 import _find from "lodash/find";
 import _sortBy from "lodash/sortBy";
+import _throttle from "lodash/throttle";
 import moment from "moment";
 
 import {
@@ -57,6 +59,10 @@ const useStyles = makeStyles((theme) => ({
     width: "100%",
     backgroundColor: "#1E1E1E",
   },
+  logPanelProgress: {
+    marginLeft: "3em",
+    marginTop: "1em",
+  },
   logEntryWrapper: {
     overflowY: "scroll",
     maxHeight: "100%",
@@ -136,23 +142,88 @@ function LogRow({ logRecord, index }) {
 }
 
 function LogPanel(props) {
-  const { logs, status, value, index, ...other } = props;
+  const { logs, status, value, index, isOpen, ...other } = props;
   const classes = useStyles();
 
+  // useStateRef is necessary to resolve the state syncing issue
+  // https://stackoverflow.com/a/63039797/12208834
+  const [liveStreaming, setLiveStreaming, liveStreamingStateRef] = useStateRef(
+    true
+  );
+  const liveStreamingRef = useRef<any>();
+  const isActive = value === index;
+
+  const handleScroll = _throttle(() => {
+    const target = document.querySelector("#live-stream-target");
+    const scrollBox = document.querySelector("#live-stream-scroll-box");
+    const liveStreamTargetVisible = isTargetInsideBox(target, scrollBox);
+    if (liveStreamTargetVisible !== liveStreamingStateRef.current) {
+      console.log("live streaming:", liveStreamTargetVisible);
+      setLiveStreaming(liveStreamTargetVisible);
+    }
+  }, 100);
+
+  const scrollToLive = () => {
+    const liveStreamTarget = document.querySelector("#live-stream-target");
+    liveStreamTarget?.scrollIntoView?.({
+      behavior: "smooth",
+    });
+  };
+
+  const isTargetInsideBox = (target, box) => {
+    const targetRect = target.getBoundingClientRect();
+    const boxRect = box.getBoundingClientRect();
+    return targetRect.y < boxRect.y + boxRect.height;
+  };
+
+  useEffect(() => {
+    if (liveStreaming && isActive && status === "BUILDING") {
+      if (!liveStreamingRef.current) {
+        scrollToLive();
+      } else {
+        setTimeout(scrollToLive, 100);
+      }
+    }
+  }, [logs, value]);
+
+  useEffect(() => {
+    if (isActive) {
+      const liveStreamScrollBox = document.querySelector(
+        "#live-stream-scroll-box"
+      );
+      liveStreamScrollBox!.addEventListener("scroll", () => {
+        handleScroll();
+      });
+    }
+  }, [value]);
+
   return (
     <div
       role="tabpanel"
-      hidden={value !== index}
+      hidden={!isActive}
       id={`vertical-tabpanel-${index}`}
       aria-labelledby={`vertical-tab-${index}`}
       className={classes.logPanel}
       {...other}
     >
       {value === index && (
-        <Box p={3} className={classes.logEntryWrapper}>
+        <Box
+          p={3}
+          className={classes.logEntryWrapper}
+          id="live-stream-scroll-box"
+        >
           {logs?.map((log, index) => {
-            return <LogRow logRecord={log} index={index} />;
+            return <LogRow logRecord={log} index={index} key={index} />;
           })}
+          <div ref={liveStreamingRef} id="live-stream-target">
+            {status === "BUILDING" && (
+              <CircularProgress
+                className={classes.logPanelProgress}
+                size={30}
+              />
+            )}
+          </div>
+          <div style={{ height: 10 }} />
         </Box>
       )}
     </div>
@@ -238,6 +309,7 @@ export default function TableLogs() {
                   >
                     {collectionState.rows.map((logEntry, index) => (
                       <Tab
+                        key={index}
                         label={
                           <Box className={classes.tab}>
                             <Box>
@@ -260,6 +332,7 @@ export default function TableLogs() {
                   </Tabs>
                   {collectionState.rows.map((logEntry, index) => (
                     <LogPanel
+                      key={index}
                       value={tabIndex}
                       index={index}
                       logs={logEntry?.fullLog}
diff --git a/www/yarn.lock b/www/yarn.lock
index 05d6170e..1480509c 100644
--- a/www/yarn.lock
+++ b/www/yarn.lock
@@ -12685,6 +12685,11 @@ react-transition-group@^4.0.0, react-transition-group@^4.4.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-usestateref@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/react-usestateref/-/react-usestateref-1.0.5.tgz#0b5659217022a7e88087875ec1745730940b7882"
+  integrity sha512-Bia+nJDuhmakaUQR6ztVPvZnGz2cV8ZOh9Tlgpc2iZorwc2Li4xcQUICtMwdAms5N9bH8FnPX+mXn91EsExvvg==
+
 "react@^16.8.0 || ^17.0.0":
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"

From 21a77de82b0fb0264a1b6e568f022940ae816cec Mon Sep 17 00:00:00 2001
From: Bobby <bofei@mail.com>
Date: Sat, 19 Jun 2021 00:03:13 +1000
Subject: [PATCH 2/3] ft build streamer: add snack log window

---
 .../components/Table/TableHeader/Sparks.tsx   |   3 +-
 .../Table/TableHeader/TableLogs.tsx           | 200 ++++++++++++++++--
 .../components/Table/TableHeader/index.tsx    |  19 +-
 3 files changed, 195 insertions(+), 27 deletions(-)

diff --git a/www/src/components/Table/TableHeader/Sparks.tsx b/www/src/components/Table/TableHeader/Sparks.tsx
index 335e4bbd..7bbfedac 100644
--- a/www/src/components/Table/TableHeader/Sparks.tsx
+++ b/www/src/components/Table/TableHeader/Sparks.tsx
@@ -17,7 +17,7 @@ import { useAppContext } from "contexts/AppContext";
 
 import CodeEditor from "../editors/CodeEditor";
 
-export default function SparksEditor() {
+export default function SparksEditor({ requestSnackLog }) {
   const snack = useSnackContext();
   const { tableState, tableActions } = useFiretableContext();
   const appContext = useAppContext();
@@ -64,6 +64,7 @@ export default function SparksEditor() {
         const userTokenInfo = await appContext?.currentUser?.getIdTokenResult();
         const userToken = userTokenInfo?.token;
         try {
+          requestSnackLog(Date.now());
           const response = await fetch(ftBuildUrl, {
             method: "POST",
             headers: {
diff --git a/www/src/components/Table/TableHeader/TableLogs.tsx b/www/src/components/Table/TableHeader/TableLogs.tsx
index 33f7f2e4..090f0cb9 100644
--- a/www/src/components/Table/TableHeader/TableLogs.tsx
+++ b/www/src/components/Table/TableHeader/TableLogs.tsx
@@ -18,12 +18,17 @@ import {
   Box,
   Tabs,
   Tab,
+  IconButton,
 } from "@material-ui/core";
 import Modal from "components/Modal";
 import { makeStyles } from "@material-ui/core/styles";
 import LogsIcon from "@material-ui/icons/QueryBuilder";
 import SuccessIcon from "@material-ui/icons/CheckCircle";
 import FailIcon from "@material-ui/icons/Cancel";
+import ExpandIcon from "@material-ui/icons/ExpandLess";
+import CollapseIcon from "@material-ui/icons/ExpandMore";
+import OpenIcon from "@material-ui/icons/OpenInNew";
+import CloseIcon from "@material-ui/icons/Close";
 import TableHeaderButton from "./TableHeaderButton";
 import { LOG_FONT, LOG_TEXT } from "Themes";
 import Ansi from "ansi-to-react";
@@ -38,6 +43,12 @@ function a11yProps(index) {
   };
 }
 
+const isTargetInsideBox = (target, box) => {
+  const targetRect = target.getBoundingClientRect();
+  const boxRect = box.getBoundingClientRect();
+  return targetRect.y < boxRect.y + boxRect.height;
+};
+
 const useStyles = makeStyles((theme) => ({
   root: {
     flexGrow: 1,
@@ -60,7 +71,7 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: "#1E1E1E",
   },
   logPanelProgress: {
-    marginLeft: "3em",
+    marginLeft: "2em",
     marginTop: "1em",
   },
   logEntryWrapper: {
@@ -69,13 +80,13 @@ const useStyles = makeStyles((theme) => ({
   },
   logNumber: {
     float: "left",
-    width: "3em",
+    width: "2em",
     textAlign: "right",
     paddingRight: "1em",
   },
   logEntry: {
     lineBreak: "anywhere",
-    paddingLeft: "3em",
+    paddingLeft: "2em",
     whiteSpace: "break-spaces",
     userSelect: "text",
   },
@@ -96,6 +107,22 @@ const useStyles = makeStyles((theme) => ({
       fontFamily: LOG_FONT,
     },
   },
+
+  snackLog: {
+    position: "absolute",
+    left: 40,
+    bottom: 40,
+    backgroundColor: "#282829",
+    width: "min(40vw, 640px)",
+    padding: theme.spacing(1, 2, 2, 2),
+    borderRadius: 4,
+    zIndex: 1,
+    height: 300,
+    transition: "height 300ms ease-out",
+  },
+  snackLogExpanded: {
+    height: "calc(100% - 300px)",
+  },
 }));
 
 LogPanel.propTypes = {
@@ -161,7 +188,7 @@ function LogPanel(props) {
       console.log("live streaming:", liveStreamTargetVisible);
       setLiveStreaming(liveStreamTargetVisible);
     }
-  }, 100);
+  }, 500);
 
   const scrollToLive = () => {
     const liveStreamTarget = document.querySelector("#live-stream-target");
@@ -170,12 +197,6 @@ function LogPanel(props) {
     });
   };
 
-  const isTargetInsideBox = (target, box) => {
-    const targetRect = target.getBoundingClientRect();
-    const boxRect = box.getBoundingClientRect();
-    return targetRect.y < boxRect.y + boxRect.height;
-  };
-
   useEffect(() => {
     if (liveStreaming && isActive && status === "BUILDING") {
       if (!liveStreamingRef.current) {
@@ -230,13 +251,141 @@ function LogPanel(props) {
   );
 }
 
-export default function TableLogs() {
+function SnackLog({ log, onClose, onOpenPanel }) {
+  const logs = log?.fullLog;
+  const status = log?.status;
+  const classes = useStyles();
+  const [expanded, setExpanded] = useState(false);
+  const [liveStreaming, setLiveStreaming, liveStreamingStateRef] = useStateRef(
+    true
+  );
+  const liveStreamingRef = useRef<any>();
+
+  const handleScroll = _throttle(() => {
+    const target = document.querySelector("#live-stream-target-snack");
+    const scrollBox = document.querySelector("#live-stream-scroll-box-snack");
+    const liveStreamTargetVisible =
+      target && scrollBox && isTargetInsideBox(target, scrollBox);
+    if (liveStreamTargetVisible !== liveStreamingStateRef.current) {
+      console.log("live streaming:", liveStreamTargetVisible);
+      setLiveStreaming(liveStreamTargetVisible);
+    }
+  }, 100);
+
+  const scrollToLive = () => {
+    const liveStreamTarget = document.querySelector(
+      "#live-stream-target-snack"
+    );
+    liveStreamTarget?.scrollIntoView?.();
+  };
+
+  useEffect(() => {
+    if (liveStreaming && status === "BUILDING") {
+      if (!liveStreamingRef.current) {
+        scrollToLive();
+      } else {
+        setTimeout(scrollToLive, 500);
+      }
+    }
+  }, [log]);
+
+  useEffect(() => {
+    const liveStreamScrollBox = document.querySelector(
+      "#live-stream-scroll-box-snack"
+    );
+    liveStreamScrollBox!.addEventListener("scroll", () => {
+      handleScroll();
+    });
+  }, []);
+
+  return (
+    <Box
+      className={`${classes.snackLog} ${expanded && classes.snackLogExpanded}`}
+    >
+      <Box display="flex" justifyContent="space-between" alignItems="center">
+        <Typography variant="overline">
+          {!log && <span>Build Pending...</span>}
+          {log?.status === "SUCCESS" && (
+            <span
+              style={{
+                color: "#aed581",
+              }}
+            >
+              Build Completed
+            </span>
+          )}
+          {log?.status === "FAIL" && (
+            <span
+              style={{
+                color: "#e57373",
+              }}
+            >
+              Build Failed
+            </span>
+          )}
+          {log?.status === "BUILDING" && <span>Building...</span>}
+        </Typography>
+        <Box>
+          <IconButton
+            aria-label="expand"
+            size="small"
+            onClick={() => setExpanded(!expanded)}
+          >
+            {expanded ? <CollapseIcon /> : <ExpandIcon />}
+          </IconButton>
+          <IconButton aria-label="open" size="small" onClick={onOpenPanel}>
+            <OpenIcon />
+          </IconButton>
+          <IconButton aria-label="close" size="small" onClick={onClose}>
+            <CloseIcon />
+          </IconButton>
+        </Box>
+      </Box>
+
+      <Box
+        className={classes.logEntryWrapper}
+        height={"calc(100% - 25px)"}
+        id="live-stream-scroll-box-snack"
+      >
+        {log && (
+          <>
+            {logs?.map((log, index) => {
+              return <LogRow logRecord={log} index={index} key={index} />;
+            })}
+            <div ref={liveStreamingRef} id="live-stream-target-snack">
+              {status === "BUILDING" && (
+                <CircularProgress
+                  className={classes.logPanelProgress}
+                  size={30}
+                />
+              )}
+            </div>
+            <div style={{ height: 10 }} />
+          </>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export default function TableLogs({ requestSnackLog }) {
   const router = useRouter();
   const { tableState } = useFiretableContext();
 
   const classes = useStyles();
-  const [open, setOpen] = useState(false);
+  const [panalOpen, setPanelOpen] = useState(false);
+  const [snackOpen, setSnackOpen] = useState(false);
   const [tabIndex, setTabIndex] = React.useState(0);
+  const [activeLogTimestamp, setActiveLogTimestamp] = useState(Date.now());
+
+  useEffect(() => {
+    if (requestSnackLog > 0) {
+      setTimeout(() => {
+        setActiveLogTimestamp(requestSnackLog);
+        setSnackOpen(true);
+      }, 500);
+    }
+  }, [requestSnackLog]);
 
   const tableCollection = decodeURIComponent(router.match.params.id);
   const ftBuildStreamID =
@@ -253,21 +402,20 @@ export default function TableLogs() {
     path: `${ftBuildStreamID}/ftBuildLogs`,
     orderBy: [{ key: "startTimeStamp", direction: "desc" }],
   });
-  const latestStatus = collectionState?.rows?.[0]?.status;
+  const latestLog = collectionState?.rows?.[0];
+  const latestStatus = latestLog?.status;
+  const latestActiveLog =
+    latestLog?.startTimeStamp > activeLogTimestamp ? latestLog : null;
 
   const handleTabChange = (event, newValue) => {
     setTabIndex(newValue);
   };
 
-  const handleClose = () => {
-    setOpen(false);
-  };
-
   return (
     <>
       <TableHeaderButton
         title="Build Logs"
-        onClick={() => setOpen(true)}
+        onClick={() => setPanelOpen(true)}
         icon={
           <>
             {latestStatus === "BUILDING" && <CircularProgress size={20} />}
@@ -278,9 +426,21 @@ export default function TableLogs() {
         }
       />
 
-      {open && !!tableState && (
+      {snackOpen && (
+        <SnackLog
+          log={latestActiveLog}
+          onClose={() => setSnackOpen(false)}
+          onOpenPanel={() => {
+            setPanelOpen(true);
+          }}
+        />
+      )}
+
+      {panalOpen && !!tableState && (
         <Modal
-          onClose={handleClose}
+          onClose={() => {
+            setPanelOpen(false);
+          }}
           maxWidth="xl"
           fullWidth
           title={
diff --git a/www/src/components/Table/TableHeader/index.tsx b/www/src/components/Table/TableHeader/index.tsx
index 9331e0d5..514037f4 100644
--- a/www/src/components/Table/TableHeader/index.tsx
+++ b/www/src/components/Table/TableHeader/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 import {
   makeStyles,
@@ -86,6 +86,11 @@ export default function TableHeader({
 
   const { currentUser } = useAppContext();
   const { tableActions, tableState, userClaims } = useFiretableContext();
+  const [snackCount, setSnackCount] = useState(0);
+
+  const openSnackLog = (requestTimestamp) => {
+    setSnackCount(requestTimestamp);
+  };
 
   const hasDerivatives =
     tableState &&
@@ -210,7 +215,13 @@ export default function TableHeader({
 
       {userClaims?.roles?.includes("ADMIN") && (
         <Grid item>
-          <Sparks />
+          <Sparks requestSnackLog={openSnackLog} />
+        </Grid>
+      )}
+
+      {userClaims?.roles?.includes("ADMIN") && (
+        <Grid item>
+          <TableLogs requestSnackLog={snackCount} />
         </Grid>
       )}
 
@@ -220,10 +231,6 @@ export default function TableHeader({
         </Grid>
       )}
 
-      <Grid item>
-        <TableLogs />
-      </Grid>
-
       <Grid item>
         <TableSettings />
       </Grid>

From 5139f9fe4920eb278ae6a2c7ad809a054250415e Mon Sep 17 00:00:00 2001
From: Bobby <bofei@mail.com>
Date: Sat, 19 Jun 2021 00:11:44 +1000
Subject: [PATCH 3/3] ft build streamer: add build url configuration reminder

---
 .../Table/TableHeader/TableLogs.tsx           | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/www/src/components/Table/TableHeader/TableLogs.tsx b/www/src/components/Table/TableHeader/TableLogs.tsx
index 090f0cb9..8320961f 100644
--- a/www/src/components/Table/TableHeader/TableLogs.tsx
+++ b/www/src/components/Table/TableHeader/TableLogs.tsx
@@ -3,6 +3,7 @@ import useRouter from "hooks/useRouter";
 import useTable from "hooks/useFiretable/useTable";
 import { useFiretableContext } from "contexts/FiretableContext";
 import useStateRef from "react-usestateref";
+import { db } from "../../../firebase";
 
 import _camelCase from "lodash/camelCase";
 import _get from "lodash/get";
@@ -19,6 +20,7 @@ import {
   Tabs,
   Tab,
   IconButton,
+  Link,
 } from "@material-ui/core";
 import Modal from "components/Modal";
 import { makeStyles } from "@material-ui/core/styles";
@@ -375,9 +377,22 @@ export default function TableLogs({ requestSnackLog }) {
   const classes = useStyles();
   const [panalOpen, setPanelOpen] = useState(false);
   const [snackOpen, setSnackOpen] = useState(false);
+  const [buildURLConfigured, setBuildURLConfigured] = useState(true);
   const [tabIndex, setTabIndex] = React.useState(0);
   const [activeLogTimestamp, setActiveLogTimestamp] = useState(Date.now());
 
+  useEffect(() => {
+    checkBuildURL();
+  }, []);
+
+  const checkBuildURL = async () => {
+    const settingsDoc = await db.doc("/_FIRETABLE_/settings").get();
+    const ftBuildUrl = settingsDoc.get("ftBuildUrl");
+    if (!ftBuildUrl) {
+      setBuildURLConfigured(false);
+    }
+  };
+
   useEffect(() => {
     if (requestSnackLog > 0) {
       setTimeout(() => {
@@ -450,7 +465,7 @@ export default function TableLogs({ requestSnackLog }) {
           }
           children={
             <>
-              {!latestStatus && (
+              {!latestStatus && buildURLConfigured && (
                 <EmptyState
                   message="No Logs Found"
                   description={
@@ -458,6 +473,27 @@ export default function TableLogs({ requestSnackLog }) {
                   }
                 />
               )}
+              {!latestStatus && !buildURLConfigured && (
+                <EmptyState
+                  message="Need Configuration"
+                  description={
+                    <>
+                      Cloud Run trigger URL not configured. Configuration guide:{" "}
+                      <Link
+                        href={
+                          "https://github.com/AntlerVC/firetable/wiki/Setting-up-cloud-Run-FT-Builder"
+                        }
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        variant="body2"
+                        underline="always"
+                      >
+                        https://github.com/AntlerVC/firetable/wiki/Setting-up-cloud-Run-FT-Builder
+                      </Link>
+                    </>
+                  }
+                />
+              )}
               {latestStatus && (
                 <div className={classes.root}>
                   <Tabs