From dd0164b1ef15e42267ff3b790f18702ac934b6d6 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 1 Jun 2022 21:52:04 +1000
Subject: [PATCH] add CloudLogs

---
 package.json                                  |   3 +
 .../CloudLogs/BuildLogs/BuildLogList.tsx      | 107 ++++++
 .../CloudLogs/BuildLogs/BuildLogRow.tsx       |  68 ++++
 .../CloudLogs/BuildLogs/BuildLogs.tsx         | 210 +++++++++++
 .../CloudLogs/BuildLogs/BuildLogsSnack.tsx    | 181 +++++++++
 .../TableToolbar/CloudLogs/BuildLogs/index.ts |   2 +
 .../CloudLogs/BuildLogs/useBuildLogs.ts       |  48 +++
 .../TableToolbar/CloudLogs/CloudLogItem.tsx   | 257 +++++++++++++
 .../TableToolbar/CloudLogs/CloudLogList.tsx   |  85 +++++
 .../CloudLogs/CloudLogSeverityIcon.tsx        | 100 +++++
 .../CloudLogs/CloudLogSubheader.tsx           |  21 ++
 .../TableToolbar/CloudLogs/CloudLogs.tsx      |  39 ++
 .../TableToolbar/CloudLogs/CloudLogsModal.tsx | 346 ++++++++++++++++++
 .../CloudLogs/TimeRangeSelect.tsx             |  96 +++++
 .../TableToolbar/CloudLogs/index.ts           |   2 +
 .../TableToolbar/CloudLogs/utils.ts           | 104 ++++++
 src/components/TableToolbar/TableToolbar.tsx  |  10 +-
 src/types/table.d.ts                          |   2 +-
 src/utils/ui.ts                               |   5 +
 yarn.lock                                     |  28 ++
 20 files changed, 1707 insertions(+), 7 deletions(-)
 create mode 100644 src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogList.tsx
 create mode 100644 src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogRow.tsx
 create mode 100644 src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogs.tsx
 create mode 100644 src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogsSnack.tsx
 create mode 100644 src/components/TableToolbar/CloudLogs/BuildLogs/index.ts
 create mode 100644 src/components/TableToolbar/CloudLogs/BuildLogs/useBuildLogs.ts
 create mode 100644 src/components/TableToolbar/CloudLogs/CloudLogItem.tsx
 create mode 100644 src/components/TableToolbar/CloudLogs/CloudLogList.tsx
 create mode 100644 src/components/TableToolbar/CloudLogs/CloudLogSeverityIcon.tsx
 create mode 100644 src/components/TableToolbar/CloudLogs/CloudLogSubheader.tsx
 create mode 100644 src/components/TableToolbar/CloudLogs/CloudLogs.tsx
 create mode 100644 src/components/TableToolbar/CloudLogs/CloudLogsModal.tsx
 create mode 100644 src/components/TableToolbar/CloudLogs/TimeRangeSelect.tsx
 create mode 100644 src/components/TableToolbar/CloudLogs/index.ts
 create mode 100644 src/components/TableToolbar/CloudLogs/utils.ts
 create mode 100644 src/utils/ui.ts

diff --git a/package.json b/package.json
index 5b5b59a3..ed563663 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@rowy/multiselect": "^0.3.0",
     "@tinymce/tinymce-react": "^3",
     "algoliasearch": "^4.13.1",
+    "ansi-to-react": "^6.1.6",
     "buffer": "^6.0.3",
     "compare-versions": "^4.1.3",
     "csv-parse": "^5.0.4",
@@ -39,6 +40,7 @@
     "monaco-editor-auto-typings": "^0.4.0",
     "notistack": "^2.0.4",
     "path-browserify": "^1.0.1",
+    "pb-util": "^1.0.3",
     "quicktype-core": "^6.0.71",
     "react": "^18.0.0",
     "react-color-palette": "^6.2.0",
@@ -58,6 +60,7 @@
     "react-router-dom": "^6.3.0",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "^5.0.0",
+    "react-usestateref": "^1.0.8",
     "remark-gfm": "^3.0.1",
     "stream-browserify": "^3.0.0",
     "swr": "^1.3.0",
diff --git a/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogList.tsx b/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogList.tsx
new file mode 100644
index 00000000..0c4267f0
--- /dev/null
+++ b/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogList.tsx
@@ -0,0 +1,107 @@
+import { useEffect, useRef } from "react";
+import useStateRef from "react-usestateref";
+import { throttle } from "lodash-es";
+
+import { Box } from "@mui/material";
+
+import BuildLogRow from "./BuildLogRow";
+import CircularProgressOptical from "@src/components/CircularProgressOptical";
+
+import { isTargetInsideBox } from "@src/utils/ui";
+
+export interface IBuildLogListProps
+  extends React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > {
+  logs: Record<string, any>[];
+  status: string;
+  value: number;
+  index: number;
+}
+
+export default function BuildLogList({
+  logs,
+  status,
+  value,
+  index,
+  ...props
+}: IBuildLogListProps) {
+  // 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) {
+      setLiveStreaming(liveStreamTargetVisible);
+    }
+  }, 500);
+
+  const scrollToLive = () => {
+    const liveStreamTarget = document.querySelector("#live-stream-target");
+    liveStreamTarget?.scrollIntoView?.({
+      behavior: "smooth",
+    });
+  };
+
+  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={!isActive}
+      id={`vertical-tabpanel-${index}`}
+      aria-labelledby={`vertical-tab-${index}`}
+      {...props}
+      style={{
+        width: "100%",
+        backgroundColor: "#1E1E1E",
+        ...props.style,
+      }}
+    >
+      {value === index && (
+        <Box
+          p={3}
+          style={{ overflowY: "auto", maxHeight: "100%" }}
+          id="live-stream-scroll-box"
+        >
+          {Array.isArray(logs) &&
+            logs.map((log, index) => (
+              <BuildLogRow logRecord={log} index={index} key={index} />
+            ))}
+          <div ref={liveStreamingRef} id="live-stream-target">
+            {status === "BUILDING" && (
+              <CircularProgressOptical sx={{ ml: 4, mt: 2 }} size={30} />
+            )}
+          </div>
+          <div style={{ height: 10 }} />
+        </Box>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogRow.tsx b/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogRow.tsx
new file mode 100644
index 00000000..de0bf052
--- /dev/null
+++ b/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogRow.tsx
@@ -0,0 +1,68 @@
+import { format } from "date-fns";
+
+import { styled, Typography } from "@mui/material";
+import Ansi from "ansi-to-react";
+
+import { TIME_FORMAT } from "constants/dates";
+
+const Root = styled("div")(({ theme }) => ({
+  ...(theme.typography.caption as any),
+  fontFamily: theme.typography.fontFamilyMono,
+  // TODO:
+  color: "#CCC",
+
+  "& code": {
+    background: "none",
+    borderRadius: 0,
+    padding: 0,
+  },
+
+  "& .color-info": { color: theme.palette.info.light },
+  "& .color-error": { color: theme.palette.error.light },
+}));
+
+export interface IBuildLogRowProps {
+  logRecord: Record<string, any>;
+  index: number;
+}
+
+export default function BuildLogRow({ logRecord, index }: IBuildLogRowProps) {
+  return (
+    <Root>
+      <Typography
+        variant="inherit"
+        sx={{
+          float: "left",
+          width: "2em",
+          textAlign: "right",
+          pr: 2,
+        }}
+      >
+        {index}
+      </Typography>
+
+      <Typography
+        variant="inherit"
+        sx={{
+          lineBreak: "anywhere",
+          paddingLeft: "2em",
+          whiteSpace: "break-spaces",
+          userSelect: "text",
+        }}
+      >
+        <Ansi
+          className={logRecord.level === "info" ? "color-nfo" : "color-error"}
+        >
+          {format(logRecord.timestamp, TIME_FORMAT + ":ss")}
+        </Ansi>
+        {"  "}
+        <Ansi>
+          {logRecord.log
+            .replaceAll("\\n", "\n")
+            .replaceAll("\\t", "\t")
+            .replaceAll("\\", "")}
+        </Ansi>
+      </Typography>
+    </Root>
+  );
+}
diff --git a/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogs.tsx b/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogs.tsx
new file mode 100644
index 00000000..d544ebc0
--- /dev/null
+++ b/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogs.tsx
@@ -0,0 +1,210 @@
+import { format, differenceInCalendarDays } from "date-fns";
+import { useAtom } from "jotai";
+import { get } from "lodash-es";
+
+import {
+  styled,
+  Accordion as MuiAccordion,
+  AccordionSummary as MuiAccordionSummary,
+  Tooltip,
+  AccordionDetails,
+  List,
+  ListProps,
+} from "@mui/material";
+import SuccessIcon from "@mui/icons-material/Check";
+import FailIcon from "@mui/icons-material/Close";
+import HourglassIcon from "@mui/icons-material/HourglassEmpty";
+import LogsIcon from "@src/assets/icons/CloudLogs";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+import EmptyState from "@src/components/EmptyState";
+import BuildLogList from "./BuildLogList";
+import CloudLogSubheader from "@src/components/TableToolbar/CloudLogs/CloudLogSubheader";
+
+import { DATE_TIME_FORMAT } from "@src/constants/dates";
+import useBuildLogs from "./useBuildLogs";
+import { cloudLogFiltersAtom } from "@src/components/TableToolbar/CloudLogs/utils";
+import { globalScope } from "@src/atoms/globalScope";
+
+const Accordion = styled(MuiAccordion)(({ theme }) => ({
+  background: "none",
+  marginTop: 0,
+  "&::before": { display: "none" },
+
+  ...(theme.typography.caption as any),
+  fontFamily: theme.typography.fontFamilyMono,
+}));
+
+const AccordionSummary = styled(MuiAccordionSummary)(({ theme }) => ({
+  minHeight: 32,
+  alignItems: "flex-start",
+
+  padding: theme.spacing(0, 1.375, 0, 1.5),
+  borderRadius: theme.shape.borderRadius,
+  "&:hover": { backgroundColor: theme.palette.action.hover },
+
+  userSelect: "auto",
+
+  "&.Mui-expanded": {
+    backgroundColor: theme.palette.background.paper,
+    ".MuiPaper-elevation24 &": {
+      backgroundImage:
+        "linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16))",
+    },
+
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      zIndex: -1,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      borderRadius: "inherit",
+
+      transition: theme.transitions.create(["background-color"], {
+        duration: theme.transitions.duration.short,
+      }),
+      backgroundColor: theme.palette.action.hover,
+    },
+    "&:hover::before": { backgroundColor: theme.palette.action.selected },
+    "&.Mui-focusVisible::before": {
+      backgroundColor: theme.palette.action.disabledBackground,
+    },
+
+    position: "sticky",
+    zIndex: 1,
+    top: 0,
+    ".MuiListSubheader-sticky ~ li &": { top: 32 },
+  },
+
+  "& svg": {
+    fontSize: 18,
+    height: 20,
+  },
+
+  "& .MuiAccordionSummary-content, & .MuiAccordionSummary-expandIconWrapper": {
+    marginTop: (32 - 20) / 2,
+    marginBottom: (32 - 20) / 2,
+  },
+
+  "& .MuiAccordionSummary-content": {
+    overflow: "hidden",
+    paddingRight: theme.spacing(1),
+    display: "flex",
+    alignItems: "flex-start",
+    gap: theme.spacing(0.5, 2),
+    "& > *": { flexShrink: 0 },
+
+    [theme.breakpoints.down("lg")]: {
+      flexWrap: "wrap",
+      paddingLeft: theme.spacing(18 / 8 + 2),
+      "& > :first-child": { marginLeft: theme.spacing((18 / 8 + 2) * -1) },
+    },
+  },
+}));
+
+export default function BuildLogs(props: Partial<ListProps>) {
+  const { logs, latestStatus } = useBuildLogs();
+  const [cloudLogFilters, setCloudLogFilters] = useAtom(
+    cloudLogFiltersAtom,
+    globalScope
+  );
+
+  if (!latestStatus)
+    return (
+      <EmptyState
+        Icon={LogsIcon}
+        message="No logs"
+        description="You have no cloud deploys for this table"
+      />
+    );
+
+  const renderedLogItems: React.ReactNode[] = [];
+
+  for (let i = 0; i < logs.length; i++) {
+    const logEntry = logs[i];
+    const prevEntry = logs[i - 1];
+
+    // Group by day
+    const diff = differenceInCalendarDays(
+      Date.now(),
+      get(logEntry, "startTimeStamp") ?? 0
+    );
+    const prevDiff = differenceInCalendarDays(
+      Date.now(),
+      get(prevEntry, "startTimeStamp") ?? 0
+    );
+
+    if (diff !== prevDiff) {
+      renderedLogItems.push(
+        <CloudLogSubheader key={`${diff} days ago`}>
+          {diff === 0 ? "Today" : diff === 1 ? "Yesterday" : `${diff} days ago`}
+        </CloudLogSubheader>
+      );
+    }
+
+    renderedLogItems.push(
+      <li key={logEntry.startTimeStamp}>
+        <Accordion
+          disableGutters
+          elevation={0}
+          square
+          TransitionProps={{ unmountOnExit: true }}
+          expanded={cloudLogFilters.buildLogExpanded === i}
+          onChange={(_, expanded) =>
+            setCloudLogFilters((c) => ({
+              ...c,
+              buildLogExpanded: expanded ? i : -1,
+            }))
+          }
+        >
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls={`${logEntry.id}-content`}
+            id={`${logEntry.id}-header`}
+          >
+            {logEntry.status === "BUILDING" && (
+              <Tooltip title="Building">
+                <HourglassIcon />
+              </Tooltip>
+            )}
+            {logEntry.status === "SUCCESS" && (
+              <Tooltip title="Success">
+                <SuccessIcon color="success" />
+              </Tooltip>
+            )}
+            {logEntry.status === "FAIL" && (
+              <Tooltip title="Fail">
+                <FailIcon color="error" />
+              </Tooltip>
+            )}
+
+            {format(logEntry.startTimeStamp, DATE_TIME_FORMAT + ":ss.SSS X")}
+          </AccordionSummary>
+
+          <AccordionDetails style={{ paddingLeft: 0, paddingRight: 0 }}>
+            <BuildLogList
+              key={i}
+              value={cloudLogFilters.buildLogExpanded!}
+              index={i}
+              logs={logEntry?.fullLog}
+              status={logEntry?.status}
+            />
+          </AccordionDetails>
+        </Accordion>
+      </li>
+    );
+  }
+
+  return (
+    <List
+      disablePadding
+      {...({ component: "ol" } as any)}
+      {...props}
+      sx={{ mx: -1.5, mt: 1.5, ...props.sx }}
+    >
+      {renderedLogItems}
+    </List>
+  );
+}
diff --git a/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogsSnack.tsx b/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogsSnack.tsx
new file mode 100644
index 00000000..a2589291
--- /dev/null
+++ b/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogsSnack.tsx
@@ -0,0 +1,181 @@
+import { useEffect, useRef, useState } from "react";
+import { throttle } from "lodash-es";
+import { useSetAtom } from "jotai";
+
+import { Typography, Box, Tooltip, IconButton } from "@mui/material";
+import ExpandIcon from "@mui/icons-material/ExpandLess";
+import CollapseIcon from "@mui/icons-material/ExpandMore";
+import OpenIcon from "@mui/icons-material/Fullscreen";
+import CloseIcon from "@mui/icons-material/Close";
+
+import BuildLogRow from "./BuildLogRow";
+import CircularProgressOptical from "@src/components/CircularProgressOptical";
+
+import { isTargetInsideBox } from "@src/utils/ui";
+import { useSnackLogContext } from "@src/contexts/SnackLogContext";
+import useBuildLogs from "./useBuildLogs";
+import { globalScope, tableModalAtom } from "@src/atoms/globalScope";
+import { cloudLogFiltersAtom } from "@src/components/TableToolbar/CloudLogs/utils";
+
+export interface IBuildLogsSnackProps {
+  onClose: () => void;
+  onOpenPanel: () => void;
+}
+
+export default function BuildLogsSnack({
+  onClose,
+  onOpenPanel,
+}: IBuildLogsSnackProps) {
+  const snackLogContext = useSnackLogContext();
+  const { latestLog } = useBuildLogs();
+  const setModal = useSetAtom(tableModalAtom, globalScope);
+  const setCloudLogFilters = useSetAtom(cloudLogFiltersAtom, globalScope);
+  const latestActiveLog =
+    latestLog?.startTimeStamp > snackLogContext.latestBuildTimestamp - 5000 ||
+    latestLog?.startTimeStamp > snackLogContext.latestBuildTimestamp + 5000
+      ? latestLog
+      : null;
+  const logs = latestActiveLog?.fullLog;
+  const status = latestActiveLog?.status;
+
+  const [expanded, setExpanded] = useState(false);
+  const [liveStreaming, setLiveStreaming] = useState(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);
+    setLiveStreaming(Boolean(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);
+      }
+    }
+  }, [latestActiveLog]);
+
+  useEffect(() => {
+    const liveStreamScrollBox = document.querySelector(
+      "#live-stream-scroll-box-snack"
+    );
+    liveStreamScrollBox!.addEventListener("scroll", () => {
+      handleScroll();
+    });
+  }, []);
+
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        left: (theme) => theme.spacing(2),
+        bottom: (theme) => theme.spacing(2),
+        backgroundColor: "#282829",
+        boxShadow: 6,
+        color: "#fff",
+        width: 650,
+        p: 2,
+        pt: 1,
+        borderRadius: 1,
+        zIndex: 1,
+        transition: (theme) => theme.transitions.create("height"),
+        height: expanded ? "calc(100% - 300px)" : 300,
+      }}
+    >
+      <Box display="flex" justifyContent="space-between" alignItems="center">
+        <Typography
+          variant="subtitle2"
+          color={
+            latestActiveLog?.status === "SUCCESS"
+              ? "success.light"
+              : latestActiveLog?.status === "FAIL"
+              ? "error.light"
+              : ""
+          }
+        >
+          {!latestActiveLog && "Build pending…"}
+          {latestActiveLog?.status === "SUCCESS" && "Build success"}
+          {latestActiveLog?.status === "FAIL" && "Build failed"}
+          {latestActiveLog?.status === "BUILDING" && "Building…"}
+        </Typography>
+
+        <Box>
+          <Tooltip title="Expand">
+            <IconButton
+              aria-label="Expand"
+              size="small"
+              onClick={() => setExpanded(!expanded)}
+              style={{ color: "white" }}
+            >
+              {expanded ? <CollapseIcon /> : <ExpandIcon />}
+            </IconButton>
+          </Tooltip>
+
+          <Tooltip title="Full screen">
+            <IconButton
+              aria-label="Full screen"
+              size="small"
+              onClick={() => {
+                setModal("cloudLogs");
+                setCloudLogFilters({
+                  type: "build",
+                  timeRange: { type: "days", value: 7 },
+                  buildLogExpanded: 0,
+                });
+              }}
+              style={{ color: "white" }}
+            >
+              <OpenIcon />
+            </IconButton>
+          </Tooltip>
+
+          <Tooltip title="Close">
+            <IconButton
+              aria-label="Close"
+              size="small"
+              onClick={onClose}
+              style={{ color: "white" }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      </Box>
+
+      <Box
+        sx={{
+          overflowY: "scroll",
+          maxHeight: "100%",
+        }}
+        height={"calc(100% - 25px)"}
+        id="live-stream-scroll-box-snack"
+      >
+        {latestActiveLog && (
+          <>
+            {logs?.map((log: any, index: number) => (
+              <BuildLogRow logRecord={log} index={index} key={index} />
+            ))}
+            <div ref={liveStreamingRef} id="live-stream-target-snack">
+              {status === "BUILDING" && (
+                <CircularProgressOptical sx={{ ml: 4, mt: 2 }} size={30} />
+              )}
+            </div>
+            <div style={{ height: 10 }} />
+          </>
+        )}
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/components/TableToolbar/CloudLogs/BuildLogs/index.ts b/src/components/TableToolbar/CloudLogs/BuildLogs/index.ts
new file mode 100644
index 00000000..f0110580
--- /dev/null
+++ b/src/components/TableToolbar/CloudLogs/BuildLogs/index.ts
@@ -0,0 +1,2 @@
+export * from "./BuildLogs";
+export { default } from "./BuildLogs";
diff --git a/src/components/TableToolbar/CloudLogs/BuildLogs/useBuildLogs.ts b/src/components/TableToolbar/CloudLogs/BuildLogs/useBuildLogs.ts
new file mode 100644
index 00000000..b221f783
--- /dev/null
+++ b/src/components/TableToolbar/CloudLogs/BuildLogs/useBuildLogs.ts
@@ -0,0 +1,48 @@
+import { useState, useEffect } from "react";
+import { useAtom } from "jotai";
+import useMemoValue from "use-memo-value";
+import {
+  query,
+  collection,
+  orderBy,
+  limit,
+  queryEqual,
+  onSnapshot,
+  DocumentData,
+} from "firebase/firestore";
+
+import { globalScope } from "@src/atoms/globalScope";
+import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase";
+import { tableScope, tableSchemaAtom } from "@src/atoms/tableScope";
+
+export default function useBuildLogs() {
+  const [firebaseDb] = useAtom(firebaseDbAtom, globalScope);
+  const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
+  const functionConfigPath = tableSchema.functionConfigPath;
+
+  const [logs, setLogs] = useState<DocumentData[]>([]);
+  const logsQuery = useMemoValue(
+    functionConfigPath
+      ? query(
+          collection(firebaseDb, `${functionConfigPath}/buildLogs`),
+          orderBy("timestamp", "desc"),
+          limit(15)
+        )
+      : null,
+    (next, prev) => queryEqual(next as any, prev as any)
+  );
+
+  useEffect(() => {
+    if (!logsQuery) return;
+
+    const unsubscribe = onSnapshot(logsQuery, (snapshot) => {
+      setLogs(snapshot.docs.map((doc) => doc.data()));
+    });
+
+    return unsubscribe;
+  }, [logsQuery]);
+
+  const latestLog = logs[0];
+  const latestStatus = latestLog?.status as string;
+  return { logs, latestLog, latestStatus };
+}
diff --git a/src/components/TableToolbar/CloudLogs/CloudLogItem.tsx b/src/components/TableToolbar/CloudLogs/CloudLogItem.tsx
new file mode 100644
index 00000000..f82a75f1
--- /dev/null
+++ b/src/components/TableToolbar/CloudLogs/CloudLogItem.tsx
@@ -0,0 +1,257 @@
+import { format } from "date-fns";
+import { get } from "lodash-es";
+import ReactJson from "react-json-view";
+import { struct } from "pb-util";
+import stringify from "json-stable-stringify-without-jsonify";
+
+import {
+  styled,
+  useTheme,
+  Accordion as MuiAccordion,
+  AccordionSummary as MuiAccordionSummary,
+  AccordionDetails as MuiAccordionDetails,
+  Stack,
+  Chip as MuiChip,
+  ChipProps,
+  Typography,
+  Divider,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import CloudLogSeverityIcon from "./CloudLogSeverityIcon";
+
+import { DATE_FORMAT, TIME_FORMAT } from "@src/constants/dates";
+
+const Accordion = styled(MuiAccordion)(({ theme }) => ({
+  background: "none",
+  marginTop: 0,
+  "&::before": { display: "none" },
+
+  ...(theme.typography.caption as any),
+  fontFamily: theme.typography.fontFamilyMono,
+}));
+
+const AccordionSummary = styled(MuiAccordionSummary)(({ theme }) => ({
+  minHeight: 32,
+  alignItems: "flex-start",
+
+  padding: theme.spacing(0, 1.375, 0, 1.5),
+  borderRadius: theme.shape.borderRadius,
+  "&:hover": { backgroundColor: theme.palette.action.hover },
+
+  userSelect: "auto",
+
+  "&.Mui-expanded": {
+    backgroundColor: theme.palette.background.paper,
+    ".MuiPaper-elevation24 &": {
+      backgroundImage:
+        "linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16))",
+    },
+
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      zIndex: -1,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      borderRadius: "inherit",
+
+      transition: theme.transitions.create(["background-color"], {
+        duration: theme.transitions.duration.short,
+      }),
+      backgroundColor: theme.palette.action.hover,
+    },
+    "&:hover::before": { backgroundColor: theme.palette.action.selected },
+    "&.Mui-focusVisible::before": {
+      backgroundColor: theme.palette.action.disabledBackground,
+    },
+
+    position: "sticky",
+    zIndex: 1,
+    top: 0,
+    ".MuiListSubheader-sticky ~ li &": { top: 32 },
+  },
+
+  "& svg": {
+    fontSize: 18,
+    height: 20,
+  },
+
+  "& .MuiAccordionSummary-content, & .MuiAccordionSummary-expandIconWrapper": {
+    marginTop: (32 - 20) / 2,
+    marginBottom: (32 - 20) / 2,
+  },
+
+  "& .MuiAccordionSummary-content": {
+    overflow: "hidden",
+    paddingRight: theme.spacing(1),
+    display: "flex",
+    alignItems: "flex-start",
+    gap: theme.spacing(0.5, 2),
+    "& > *": { flexShrink: 0 },
+
+    [theme.breakpoints.down("lg")]: {
+      flexWrap: "wrap",
+      paddingLeft: theme.spacing(18 / 8 + 2),
+      "& > :first-child": { marginLeft: theme.spacing((18 / 8 + 2) * -1) },
+    },
+  },
+
+  "& .log-preview": { flexShrink: 1 },
+}));
+
+const Chip = styled((props: ChipProps) => <MuiChip size="small" {...props} />)({
+  font: "inherit",
+  minHeight: 20,
+  padding: 0,
+  cursor: "inherit",
+});
+
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+  paddingLeft: theme.spacing(18 / 8 + 2 + 1.5),
+  paddingRight: theme.spacing(18 / 8 + 2 + 1.5),
+}));
+
+export interface ICloudLogItemProps {
+  // https://cloud.google.com/logging/docs/reference/v2/rest/v2/LogEntry#FIELDS.insert_id
+  data: Record<string, any>;
+  chips?: string[];
+}
+
+export default function CloudLogItem({
+  data: dataProp,
+  chips,
+}: ICloudLogItemProps) {
+  const theme = useTheme();
+
+  const data = { ...dataProp };
+  if (dataProp.payload === "jsonPayload" && dataProp.jsonPayload)
+    data.jsonPayload = struct.decode(dataProp.jsonPayload ?? {});
+
+  const timestamp = new Date(
+    data.timestamp.seconds * 1000 + data.timestamp.nanos / 1_000_000
+  );
+
+  const renderedChips = Array.isArray(chips)
+    ? chips
+        .map((key) => {
+          const value = get(data, key);
+          if (!value) return null;
+
+          return (
+            <Chip
+              key={key}
+              label={
+                typeof value === "string" || typeof value === "number"
+                  ? value
+                  : JSON.stringify(value)
+              }
+              aria-describedby={key}
+            />
+          );
+        })
+        .filter(Boolean)
+    : [];
+
+  return (
+    <Accordion
+      disableGutters
+      elevation={0}
+      square
+      TransitionProps={{ unmountOnExit: true }}
+    >
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon />}
+        aria-controls={`${data.insertId}-content`}
+        id={`${data.insertId}-header`}
+      >
+        <CloudLogSeverityIcon severity={data.severity} />
+
+        <time dateTime={timestamp.toISOString()}>
+          <Typography variant="inherit" color="text.secondary" component="span">
+            {format(timestamp, DATE_FORMAT)}
+          </Typography>{" "}
+          <Typography variant="inherit" fontWeight="bold" component="span">
+            {format(timestamp, TIME_FORMAT)}
+          </Typography>
+          <Typography variant="inherit" color="text.secondary" component="span">
+            {format(timestamp, ":ss.SSS X")}
+          </Typography>
+        </time>
+
+        {renderedChips.length > 0 && (
+          <Stack direction="row" spacing={0.75}>
+            {renderedChips}
+          </Stack>
+        )}
+
+        <Typography variant="inherit" noWrap className="log-preview">
+          {data.payload === "textPayload" && data.textPayload}
+          {get(data, "httpRequest.requestUrl")?.split(".run.app").pop()}
+          {data.payload === "jsonPayload" && (
+            <Typography
+              variant="inherit"
+              color="error"
+              fontWeight="bold"
+              component="span"
+            >
+              {data.jsonPayload.error}{" "}
+            </Typography>
+          )}
+          {data.payload === "jsonPayload" &&
+            stringify(data.jsonPayload.body ?? data.jsonPayload, {
+              space: 2,
+            })}
+        </Typography>
+      </AccordionSummary>
+
+      <AccordionDetails>
+        {data.payload === "textPayload" && (
+          <Typography variant="inherit" style={{ whiteSpace: "pre-wrap" }}>
+            {data.textPayload}
+          </Typography>
+        )}
+        {data.payload === "jsonPayload" && (
+          <>
+            {data.payload === "jsonPayload" && data.jsonPayload.error && (
+              <Typography
+                variant="inherit"
+                color="error"
+                fontWeight="bold"
+                paragraph
+                style={{ whiteSpace: "pre-wrap" }}
+              >
+                {data.jsonPayload.error}
+              </Typography>
+            )}
+            <ReactJson
+              src={data.jsonPayload.body ?? data.jsonPayload}
+              name={data.jsonPayload.body ? "body" : "jsonPayload"}
+              theme={theme.palette.mode === "dark" ? "monokai" : "rjv-default"}
+              iconStyle="triangle"
+              style={{ font: "inherit", backgroundColor: "transparent" }}
+              displayDataTypes={false}
+              quotesOnKeys={false}
+              sortKeys
+            />
+          </>
+        )}
+
+        {data.payload && <Divider sx={{ my: 1 }} />}
+
+        <ReactJson
+          src={data}
+          collapsed={!!data.payload}
+          name="Full log entry"
+          theme={theme.palette.mode === "dark" ? "monokai" : "rjv-default"}
+          iconStyle="triangle"
+          style={{ font: "inherit", backgroundColor: "transparent" }}
+          displayDataTypes={false}
+          quotesOnKeys={false}
+          sortKeys
+        />
+      </AccordionDetails>
+    </Accordion>
+  );
+}
diff --git a/src/components/TableToolbar/CloudLogs/CloudLogList.tsx b/src/components/TableToolbar/CloudLogs/CloudLogList.tsx
new file mode 100644
index 00000000..5e5382ee
--- /dev/null
+++ b/src/components/TableToolbar/CloudLogs/CloudLogList.tsx
@@ -0,0 +1,85 @@
+import { get } from "lodash-es";
+import { differenceInCalendarDays } from "date-fns";
+
+import { List, ListProps } from "@mui/material";
+import CloudLogSubheader from "./CloudLogSubheader";
+import CloudLogItem from "./CloudLogItem";
+
+export interface ICloudLogListProps extends Partial<ListProps> {
+  items: Record<string, any>[];
+}
+
+export default function CloudLogList({ items, ...props }: ICloudLogListProps) {
+  const renderedLogItems: React.ReactNode[] = [];
+  if (Array.isArray(items)) {
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const prevItem = items[i - 1];
+
+      // Group by function execution ID if available
+      if (item.labels.execution_id) {
+        if (
+          get(item, "labels.execution_id") !==
+          get(prevItem, "labels.execution_id")
+        ) {
+          renderedLogItems.push(
+            <CloudLogSubheader key={get(item, "labels.execution_id")}>
+              Function <code>{get(item, "resource.labels.function_name")}</code>{" "}
+              execution <code>{get(item, "labels.execution_id")}</code>
+            </CloudLogSubheader>
+          );
+        }
+      }
+      // Otherwise, group by day
+      else {
+        const diff = differenceInCalendarDays(
+          Date.now(),
+          (get(item, "timestamp.seconds") ?? 0) * 1000
+        );
+        const prevDiff = differenceInCalendarDays(
+          Date.now(),
+          (get(prevItem, "timestamp.seconds") ?? 0) * 1000
+        );
+
+        if (diff !== prevDiff) {
+          renderedLogItems.push(
+            <CloudLogSubheader key={`${diff} days ago`}>
+              {diff === 0
+                ? "Today"
+                : diff === 1
+                ? "Yesterday"
+                : `${diff} days ago`}
+            </CloudLogSubheader>
+          );
+        }
+      }
+
+      renderedLogItems.push(
+        <li key={item.insertId}>
+          <CloudLogItem
+            data={item}
+            chips={[
+              // Rowy Run HTTP request
+              "httpRequest.requestMethod",
+              "httpRequest.status",
+              // Rowy audit logs
+              "jsonPayload.type",
+              // "jsonPayload.ref.tableId",
+              "jsonPayload.ref.rowId",
+              "jsonPayload.data.updatedField",
+              "jsonPayload.rowyUser.displayName",
+              // Webhook event
+              "jsonPayload.params.endpoint",
+            ]}
+          />
+        </li>
+      );
+    }
+  }
+
+  return (
+    <List disablePadding {...({ component: "ol" } as any)} {...props}>
+      {renderedLogItems}
+    </List>
+  );
+}
diff --git a/src/components/TableToolbar/CloudLogs/CloudLogSeverityIcon.tsx b/src/components/TableToolbar/CloudLogs/CloudLogSeverityIcon.tsx
new file mode 100644
index 00000000..dcfb1fea
--- /dev/null
+++ b/src/components/TableToolbar/CloudLogs/CloudLogSeverityIcon.tsx
@@ -0,0 +1,100 @@
+import { SvgIcon, SvgIconProps, Tooltip } from "@mui/material";
+import DebugIcon from "@mui/icons-material/BugReportOutlined";
+import InfoIcon from "@mui/icons-material/InfoOutlined";
+import NoticeIcon from "@mui/icons-material/NotificationsOutlined";
+import WarningIcon from "@mui/icons-material/WarningAmberOutlined";
+import ErrorIcon from "@mui/icons-material/ErrorOutline";
+import { mdiCarBrakeAlert } from "@mdi/js";
+import AlertIcon from "@mui/icons-material/Error";
+import EmergencyIcon from "@mui/icons-material/NewReleases";
+
+// https://cloud.google.com/logging/docs/reference/v2/rest/v2/LogEntry#LogSeverity
+export const SEVERITY_LEVELS = {
+  DEFAULT: "The log entry has no assigned severity level.",
+  DEBUG: "Debug or trace information.",
+  INFO: "Routine information, such as ongoing status or performance.",
+  NOTICE:
+    "Normal but significant events, such as start up, shut down, or a configuration change.",
+  WARNING: "Warning events might cause problems.",
+  ERROR: "Error events are likely to cause problems.",
+  CRITICAL: "Critical events cause more severe problems or outages.",
+  ALERT: "A person must take an action immediately.",
+  EMERGENCY: "One or more systems are unusable.",
+};
+
+export interface ICloudLogSeverityIconProps extends SvgIconProps {
+  severity: keyof typeof SEVERITY_LEVELS;
+}
+
+export default function CloudLogSeverityIcon({
+  severity,
+  ...props
+}: ICloudLogSeverityIconProps) {
+  const commonIconProps: SvgIconProps = {
+    ...props,
+    "aria-hidden": "false",
+    "aria-label": `Severity: ${severity.toLowerCase()}`,
+  };
+
+  let icon = (
+    <SvgIcon {...commonIconProps} color="disabled" viewBox="0 0 18 18">
+      <circle cx="9" cy="9" r="2" />
+    </SvgIcon>
+  );
+
+  switch (severity) {
+    case "DEBUG":
+      icon = <DebugIcon {...commonIconProps} color="action" />;
+      break;
+
+    case "INFO":
+      icon = <InfoIcon {...commonIconProps} color="info" />;
+      break;
+
+    case "NOTICE":
+      icon = <NoticeIcon {...commonIconProps} color="info" />;
+      break;
+
+    case "WARNING":
+      icon = <WarningIcon {...commonIconProps} color="warning" />;
+      break;
+
+    case "ERROR":
+      icon = <ErrorIcon {...commonIconProps} color="error" />;
+      break;
+
+    case "CRITICAL":
+      icon = (
+        <SvgIcon {...commonIconProps} color="error">
+          <path d={mdiCarBrakeAlert} />
+        </SvgIcon>
+      );
+      break;
+
+    case "ALERT":
+      icon = <AlertIcon {...commonIconProps} color="error" />;
+      break;
+
+    case "EMERGENCY":
+      icon = <EmergencyIcon {...commonIconProps} color="error" />;
+      break;
+
+    default:
+      break;
+  }
+
+  return (
+    <Tooltip
+      title={
+        <>
+          {severity}
+          <br />
+          {SEVERITY_LEVELS[severity]}
+        </>
+      }
+      describeChild
+    >
+      {icon}
+    </Tooltip>
+  );
+}
diff --git a/src/components/TableToolbar/CloudLogs/CloudLogSubheader.tsx b/src/components/TableToolbar/CloudLogs/CloudLogSubheader.tsx
new file mode 100644
index 00000000..a9cbd2d7
--- /dev/null
+++ b/src/components/TableToolbar/CloudLogs/CloudLogSubheader.tsx
@@ -0,0 +1,21 @@
+import { styled, ListSubheader, ListSubheaderProps } from "@mui/material";
+
+export const CloudLogSubheader = styled((props: ListSubheaderProps) => (
+  <ListSubheader disableGutters disableSticky={false} {...props} />
+))(({ theme }) => ({
+  zIndex: 2,
+
+  "&:not(:first-child)": { marginTop: theme.spacing(2) },
+  ...(theme.typography.subtitle2 as any),
+  padding: theme.spacing((32 - 20) / 2 / 8, 1.5),
+  lineHeight: "20px",
+
+  "& code": { fontSize: "90%" },
+
+  ".MuiPaper-elevation24 &": {
+    backgroundImage:
+      "linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16))",
+  },
+}));
+
+export default CloudLogSubheader;
diff --git a/src/components/TableToolbar/CloudLogs/CloudLogs.tsx b/src/components/TableToolbar/CloudLogs/CloudLogs.tsx
new file mode 100644
index 00000000..c6cce823
--- /dev/null
+++ b/src/components/TableToolbar/CloudLogs/CloudLogs.tsx
@@ -0,0 +1,39 @@
+import { useAtom, useSetAtom } from "jotai";
+
+import TableToolbarButton from "@src/components/TableToolbar/TableToolbarButton";
+import LogsIcon from "@src/assets/icons/CloudLogs";
+import CloudLogsModal from "./CloudLogsModal";
+
+import {
+  globalScope,
+  projectSettingsAtom,
+  rowyRunModalAtom,
+  tableModalAtom,
+} from "@src/atoms/globalScope";
+
+export default function CloudLogs() {
+  const [projectSettings] = useAtom(projectSettingsAtom, globalScope);
+  const openRowyRunModal = useSetAtom(rowyRunModalAtom, globalScope);
+  const [modal, setModal] = useAtom(tableModalAtom, globalScope);
+
+  const open = modal === "cloudLogs";
+  const setOpen = (open: boolean) => setModal(open ? "cloudLogs" : null);
+
+  return (
+    <>
+      <TableToolbarButton
+        title="Cloud logs"
+        icon={<LogsIcon />}
+        onClick={
+          projectSettings.rowyRunUrl
+            ? () => setOpen(true)
+            : () => openRowyRunModal({ feature: "Cloud logs" })
+        }
+      />
+
+      {open && (
+        <CloudLogsModal onClose={() => setOpen(false)} title="Cloud logs" />
+      )}
+    </>
+  );
+}
diff --git a/src/components/TableToolbar/CloudLogs/CloudLogsModal.tsx b/src/components/TableToolbar/CloudLogs/CloudLogsModal.tsx
new file mode 100644
index 00000000..ee87e68a
--- /dev/null
+++ b/src/components/TableToolbar/CloudLogs/CloudLogsModal.tsx
@@ -0,0 +1,346 @@
+import useSWR from "swr";
+import { useAtom } from "jotai";
+import { startCase } from "lodash-es";
+
+import {
+  LinearProgress,
+  ToggleButtonGroup,
+  ToggleButton,
+  Stack,
+  Typography,
+  TextField,
+  InputAdornment,
+  Button,
+} from "@mui/material";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import LogsIcon from "@src/assets/icons/CloudLogs";
+
+import Modal, { IModalProps } from "@src/components/Modal";
+import TableToolbarButton from "@src/components/TableToolbar/TableToolbarButton";
+import MultiSelect from "@rowy/multiselect";
+import TimeRangeSelect from "./TimeRangeSelect";
+import CloudLogList from "./CloudLogList";
+import BuildLogs from "./BuildLogs";
+import EmptyState from "@src/components/EmptyState";
+import CloudLogSeverityIcon, { SEVERITY_LEVELS } from "./CloudLogSeverityIcon";
+
+import {
+  globalScope,
+  projectIdAtom,
+  rowyRunAtom,
+  compatibleRowyRunVersionAtom,
+} from "@src/atoms/globalScope";
+import {
+  tableScope,
+  tableSettingsAtom,
+  tableSchemaAtom,
+} from "@src/atoms/tableScope";
+import { cloudLogFiltersAtom, cloudLogFetcher } from "./utils";
+
+export default function CloudLogsModal(props: IModalProps) {
+  const [projectId] = useAtom(projectIdAtom, globalScope);
+  const [rowyRun] = useAtom(rowyRunAtom, globalScope);
+  const [compatibleRowyRunVersion] = useAtom(
+    compatibleRowyRunVersionAtom,
+    globalScope
+  );
+  const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
+  const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
+  const [cloudLogFilters, setCloudLogFilters] = useAtom(
+    cloudLogFiltersAtom,
+    globalScope
+  );
+
+  const { data, mutate, isValidating } = useSWR(
+    cloudLogFilters.type === "build"
+      ? null
+      : [
+          "/logs",
+          rowyRun,
+          projectId,
+          cloudLogFilters,
+          tableSettings.collection || "",
+        ],
+    cloudLogFetcher,
+    {
+      fallbackData: [],
+      revalidateOnMount: true,
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
+  );
+
+  return (
+    <Modal
+      {...props}
+      maxWidth="xl"
+      fullWidth
+      fullHeight
+      ScrollableDialogContentProps={{ disableBottomDivider: true }}
+      header={
+        <>
+          <Stack
+            direction="row"
+            spacing={2}
+            justifyContent="space-between"
+            alignItems="center"
+            sx={{
+              mt: { md: "calc(var(--dialog-title-height) * -1)" },
+              "&, & .MuiTab-root": {
+                minHeight: { md: "var(--dialog-title-height)" },
+              },
+              ml: { md: 18 },
+              mr: { md: 40 / 8 + 3 },
+
+              minHeight: 32,
+              boxSizing: "content-box",
+              overflowX: "auto",
+              overflowY: "hidden",
+              py: 0,
+              px: { xs: "var(--dialog-spacing)", md: 0 },
+              pb: { xs: 1.5, md: 0 },
+
+              "& > *": { flexShrink: 0 },
+            }}
+          >
+            {compatibleRowyRunVersion!({ minVersion: "1.2.0" }) ? (
+              <ToggleButtonGroup
+                value={cloudLogFilters.type}
+                exclusive
+                onChange={(_, v) =>
+                  setCloudLogFilters((c) => ({
+                    type: v,
+                    timeRange: c.timeRange,
+                  }))
+                }
+                aria-label="Filter by log type"
+              >
+                <ToggleButton value="webhook">Webhooks</ToggleButton>
+                <ToggleButton value="functions">Functions</ToggleButton>
+                <ToggleButton value="audit">Audit</ToggleButton>
+                <ToggleButton value="build">Build</ToggleButton>
+              </ToggleButtonGroup>
+            ) : (
+              <ToggleButtonGroup
+                value={cloudLogFilters.type}
+                exclusive
+                onChange={(_, v) =>
+                  setCloudLogFilters((c) => ({
+                    type: v,
+                    timeRange: c.timeRange,
+                  }))
+                }
+                aria-label="Filter by log type"
+              >
+                <ToggleButton value="build">Build</ToggleButton>
+              </ToggleButtonGroup>
+            )}
+
+            {cloudLogFilters.type === "webhook" && (
+              <MultiSelect
+                multiple
+                label="Webhook:"
+                labelPlural="webhooks"
+                options={
+                  Array.isArray(tableSchema.webhooks)
+                    ? tableSchema.webhooks.map((x) => ({
+                        label: x.name,
+                        value: x.endpoint,
+                      }))
+                    : []
+                }
+                value={cloudLogFilters.webhook ?? []}
+                onChange={(v) =>
+                  setCloudLogFilters((prev) => ({ ...prev, webhook: v }))
+                }
+                TextFieldProps={{
+                  id: "webhook",
+                  className: "labelHorizontal",
+                  sx: { "& .MuiInputBase-root": { width: 180 } },
+                  fullWidth: false,
+                }}
+                itemRenderer={(option) => (
+                  <>
+                    {option.label}&nbsp;<code>{option.value}</code>
+                  </>
+                )}
+              />
+            )}
+            {cloudLogFilters.type === "audit" && (
+              <TextField
+                id="auditRowId"
+                label="Row ID:"
+                value={cloudLogFilters.auditRowId}
+                onChange={(e) =>
+                  setCloudLogFilters((prev) => ({
+                    ...prev,
+                    auditRowId: e.target.value,
+                  }))
+                }
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      {tableSettings.collection}/
+                    </InputAdornment>
+                  ),
+                }}
+                className="labelHorizontal"
+                sx={{
+                  "& .MuiInputBase-root, & .MuiInputBase-input": {
+                    typography: "body2",
+                    fontFamily: "mono",
+                  },
+                  "& .MuiInputAdornment-positionStart": {
+                    m: "0 !important",
+                    pointerEvents: "none",
+                  },
+                  "& .MuiInputBase-input": { pl: 0 },
+                }}
+              />
+            )}
+
+            {/* Spacer */}
+            <div style={{ flexGrow: 1 }} />
+
+            {cloudLogFilters.type !== "build" && (
+              <>
+                {!isValidating && Array.isArray(data) && (
+                  <Typography
+                    variant="body2"
+                    color="text.disabled"
+                    display="block"
+                    style={{ userSelect: "none" }}
+                  >
+                    {data.length} entries
+                  </Typography>
+                )}
+
+                <MultiSelect
+                  aria-label="Severity"
+                  labelPlural="severity levels"
+                  options={Object.keys(SEVERITY_LEVELS)}
+                  value={cloudLogFilters.severity ?? []}
+                  onChange={(severity) =>
+                    setCloudLogFilters((prev) => ({ ...prev, severity }))
+                  }
+                  TextFieldProps={{
+                    style: { width: 130 },
+                    placeholder: "Severity",
+                    SelectProps: {
+                      renderValue: () => {
+                        if (
+                          !Array.isArray(cloudLogFilters.severity) ||
+                          cloudLogFilters.severity.length === 0
+                        )
+                          return `Severity`;
+
+                        if (cloudLogFilters.severity.length === 1)
+                          return (
+                            <>
+                              Severity{" "}
+                              <CloudLogSeverityIcon
+                                severity={cloudLogFilters.severity[0]}
+                                style={{ marginTop: -2, marginBottom: -7 }}
+                              />
+                            </>
+                          );
+
+                        return `Severity (${cloudLogFilters.severity.length})`;
+                      },
+                    },
+                  }}
+                  itemRenderer={(option) => (
+                    <>
+                      <CloudLogSeverityIcon
+                        severity={option.value}
+                        sx={{ mr: 1 }}
+                      />
+                      {startCase(option.value.toLowerCase())}
+                    </>
+                  )}
+                />
+                <TimeRangeSelect
+                  aria-label="Time range"
+                  value={cloudLogFilters.timeRange}
+                  onChange={(value) =>
+                    setCloudLogFilters((c) => ({ ...c, timeRange: value }))
+                  }
+                />
+                <TableToolbarButton
+                  onClick={() => mutate()}
+                  title="Refresh"
+                  icon={<RefreshIcon />}
+                  disabled={isValidating}
+                />
+              </>
+            )}
+          </Stack>
+
+          {isValidating && (
+            <LinearProgress
+              style={{
+                borderRadius: 0,
+                marginTop: -4,
+                marginBottom: -1,
+                minHeight: 4,
+              }}
+            />
+          )}
+
+          {/* <code>{logQueryUrl}</code> */}
+        </>
+      }
+    >
+      {cloudLogFilters.type === "build" ? (
+        <BuildLogs />
+      ) : Array.isArray(data) && data.length > 0 ? (
+        <>
+          <CloudLogList items={data} sx={{ mx: -1.5, mt: 1.5 }} />
+          {cloudLogFilters.timeRange.type !== "range" && (
+            <Button
+              style={{
+                marginLeft: "auto",
+                marginRight: "auto",
+                display: "flex",
+              }}
+              onClick={() =>
+                setCloudLogFilters((c) => ({
+                  ...c,
+                  timeRange: {
+                    ...c.timeRange,
+                    value: (c.timeRange as any).value * 2,
+                  },
+                }))
+              }
+            >
+              Load more (last {cloudLogFilters.timeRange.value * 2}{" "}
+              {cloudLogFilters.timeRange.type})
+            </Button>
+          )}
+        </>
+      ) : isValidating ? (
+        <EmptyState
+          Icon={LogsIcon}
+          message="Fetching logs…"
+          description="\xa0"
+        />
+      ) : (
+        <EmptyState
+          Icon={LogsIcon}
+          message="No logs"
+          description={
+            cloudLogFilters.type === "webhook" &&
+            (!Array.isArray(tableSchema.webhooks) ||
+              tableSchema.webhooks?.length === 0)
+              ? "There are no webhooks in this table"
+              : cloudLogFilters.type === "audit" &&
+                tableSettings.audit === false
+              ? "Auditing is disabled in this table"
+              : "\xa0"
+          }
+        />
+      )}
+    </Modal>
+  );
+}
diff --git a/src/components/TableToolbar/CloudLogs/TimeRangeSelect.tsx b/src/components/TableToolbar/CloudLogs/TimeRangeSelect.tsx
new file mode 100644
index 00000000..34693791
--- /dev/null
+++ b/src/components/TableToolbar/CloudLogs/TimeRangeSelect.tsx
@@ -0,0 +1,96 @@
+import {
+  TextField,
+  FilledTextFieldProps,
+  InputAdornment,
+  MenuItem,
+} from "@mui/material";
+
+import type { CloudLogFilters } from "./utils";
+
+export interface ITimeRangeSelectProps
+  extends Partial<Omit<FilledTextFieldProps, "value" | "onChange">> {
+  value: CloudLogFilters["timeRange"];
+  onChange: (value: CloudLogFilters["timeRange"]) => void;
+}
+
+export default function TimeRangeSelect({
+  value,
+  onChange,
+  ...props
+}: ITimeRangeSelectProps) {
+  return (
+    <fieldset style={{ appearance: "none", padding: 0, border: 0 }}>
+      {value && value.type !== "range" && (
+        <TextField
+          aria-label={`Custom ${value.type} value`}
+          id="timeRangeSelect.value"
+          type="number"
+          value={value.value}
+          onChange={(e) =>
+            onChange({ type: value.type, value: Number(e.target.value) })
+          }
+          sx={{
+            mr: "-1px",
+            "& .MuiInputBase-root": {
+              borderTopRightRadius: 0,
+              borderBottomRightRadius: 0,
+            },
+
+            "& .MuiInputAdornment-positionStart": {
+              mt: "0 !important",
+              pointerEvents: "none",
+              mr: -0.75,
+            },
+
+            "& .MuiInputBase-input": {
+              width: "calc(3ch + 16px)",
+              pr: 0,
+            },
+          }}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">Last</InputAdornment>
+            ),
+          }}
+          inputProps={{ min: 1 }}
+        />
+      )}
+
+      <TextField
+        select
+        id="timeRangeSelect.type"
+        value={value?.type || "days"}
+        {...props}
+        sx={{
+          "& .MuiInputBase-root":
+            value?.type !== "range"
+              ? {
+                  borderTopLeftRadius: 0,
+                  borderBottomLeftRadius: 0,
+                }
+              : {},
+
+          "& .MuiInputBase-input": { minHeight: 20 },
+
+          ...props.sx,
+        }}
+        onChange={(e) => {
+          const newValue: any = { type: e.target.value };
+
+          if (e.target.value === "seconds") newValue.value = 30;
+          else if (e.target.value === "minutes") newValue.value = 15;
+          else if (e.target.value === "hours") newValue.value = 3;
+          else if (e.target.value === "days") newValue.value = 7;
+
+          onChange(newValue);
+        }}
+      >
+        <MenuItem value="seconds">seconds</MenuItem>
+        <MenuItem value="minutes">minutes</MenuItem>
+        <MenuItem value="hours">hours</MenuItem>
+        <MenuItem value="days">days</MenuItem>
+        {/* <MenuItem value="range">Custom range…</MenuItem> */}
+      </TextField>
+    </fieldset>
+  );
+}
diff --git a/src/components/TableToolbar/CloudLogs/index.ts b/src/components/TableToolbar/CloudLogs/index.ts
new file mode 100644
index 00000000..925dc06c
--- /dev/null
+++ b/src/components/TableToolbar/CloudLogs/index.ts
@@ -0,0 +1,2 @@
+export * from "./CloudLogs";
+export { default } from "./CloudLogs";
diff --git a/src/components/TableToolbar/CloudLogs/utils.ts b/src/components/TableToolbar/CloudLogs/utils.ts
new file mode 100644
index 00000000..2c1cc112
--- /dev/null
+++ b/src/components/TableToolbar/CloudLogs/utils.ts
@@ -0,0 +1,104 @@
+import { atomWithHash } from "jotai/utils";
+import { sub } from "date-fns";
+
+import { rowyRunAtom } from "@src/atoms/globalScope";
+import { SEVERITY_LEVELS } from "./CloudLogSeverityIcon";
+
+export type CloudLogFilters = {
+  type: "webhook" | "functions" | "audit" | "build";
+  timeRange:
+    | { type: "seconds" | "minutes" | "hours" | "days"; value: number }
+    | { type: "range"; start: Date; end: Date };
+  severity?: Array<keyof typeof SEVERITY_LEVELS>;
+  webhook?: string[];
+  auditRowId?: string;
+  buildLogExpanded?: number;
+};
+
+export const cloudLogFiltersAtom = atomWithHash<CloudLogFilters>(
+  "cloudLogFilters",
+  {
+    type: "build",
+    timeRange: { type: "days", value: 7 },
+  }
+);
+
+export const cloudLogFetcher = (
+  endpointRoot: string,
+  rowyRun: ReturnType<typeof rowyRunAtom["read"]>,
+  projectId: string,
+  cloudLogFilters: CloudLogFilters,
+  tablePath: string
+) => {
+  // https://cloud.google.com/logging/docs/view/logging-query-language
+  let logQuery: string[] = [];
+
+  switch (cloudLogFilters.type) {
+    case "webhook":
+      logQuery.push(
+        `logName = "projects/${projectId}/logs/rowy-webhook-events"`
+      );
+      logQuery.push(`jsonPayload.url : "${tablePath}"`);
+      if (
+        Array.isArray(cloudLogFilters.webhook) &&
+        cloudLogFilters.webhook.length > 0
+      )
+        logQuery.push(
+          cloudLogFilters.webhook
+            .map((id) => `jsonPayload.url : "${id}"`)
+            .join(encodeURIComponent(" OR "))
+        );
+      break;
+
+    case "audit":
+      logQuery.push(`logName = "projects/${projectId}/logs/rowy-audit"`);
+      logQuery.push(`jsonPayload.ref.collectionPath = "${tablePath}"`);
+      if (cloudLogFilters.auditRowId)
+        logQuery.push(
+          `jsonPayload.ref.rowId = "${cloudLogFilters.auditRowId}"`
+        );
+      break;
+
+    case "functions":
+      logQuery.push(`resource.labels.function_name = "R-${tablePath}"`);
+      break;
+
+    default:
+      break;
+  }
+
+  if (cloudLogFilters.timeRange.type === "range") {
+  } else {
+    try {
+      const minDate = sub(new Date(), {
+        [cloudLogFilters.timeRange.type]: cloudLogFilters.timeRange.value,
+      });
+      logQuery.push(`timestamp >= "${minDate.toISOString()}"`);
+    } catch (e) {
+      console.error("Failed to calculate minimum date", e);
+    }
+  }
+
+  if (
+    Array.isArray(cloudLogFilters.severity) &&
+    cloudLogFilters.severity.length > 0
+  ) {
+    logQuery.push(`severity = (${cloudLogFilters.severity.join(" OR ")})`);
+  }
+
+  const logQueryUrl =
+    endpointRoot +
+    (logQuery.length > 0
+      ? `?filter=${logQuery
+          .map((item) => `(${item})`)
+          .join(encodeURIComponent("\n"))}`
+      : "");
+
+  if (rowyRun) {
+    return rowyRun({
+      route: { path: logQueryUrl, method: "GET" },
+    });
+  }
+
+  return [];
+};
diff --git a/src/components/TableToolbar/TableToolbar.tsx b/src/components/TableToolbar/TableToolbar.tsx
index 181b8458..e4382cdd 100644
--- a/src/components/TableToolbar/TableToolbar.tsx
+++ b/src/components/TableToolbar/TableToolbar.tsx
@@ -27,7 +27,7 @@ const Export = lazy(() => import("./Export" /* webpackChunkName: "Export" */));
 // prettier-ignore
 const ImportCsv = lazy(() => import("./ImportCsv" /* webpackChunkName: "ImportCsv" */));
 // prettier-ignore
-// const CloudLogs = lazy(() => import("./CloudLogs" /* webpackChunkName: "CloudLogs" */));
+const CloudLogs = lazy(() => import("./CloudLogs" /* webpackChunkName: "CloudLogs" */));
 // prettier-ignore
 // const Extensions = lazy(() => import("./Extensions" /* webpackChunkName: "Extensions" */));
 // prettier-ignore
@@ -105,11 +105,9 @@ export default function TableToolbar() {
           <Extensions /> 
       </Suspense>
           */}
-          {/* 
-      <Suspense fallback={<ButtonSkeleton/>}>
-          <CloudLogs /> 
-      </Suspense>
-          */}
+          <Suspense fallback={<ButtonSkeleton />}>
+            <CloudLogs />
+          </Suspense>
           {/* {snackLogContext.isSnackLogOpen && (
             <BuildLogsSnack
               onClose={snackLogContext.closeSnackLog}
diff --git a/src/types/table.d.ts b/src/types/table.d.ts
index 98e7592e..9f1b2df2 100644
--- a/src/types/table.d.ts
+++ b/src/types/table.d.ts
@@ -75,7 +75,7 @@ export type TableSchema = {
 
   extensionObjects?: any[];
   compiledExtension?: string;
-  webhooks?: any[];
+  webhooks?: { name: string; endpoint: string; [key: string]: any }[];
 };
 
 export type ColumnConfig = {
diff --git a/src/utils/ui.ts b/src/utils/ui.ts
new file mode 100644
index 00000000..514bca02
--- /dev/null
+++ b/src/utils/ui.ts
@@ -0,0 +1,5 @@
+export const isTargetInsideBox = (target: Element, box: Element) => {
+  const targetRect = target.getBoundingClientRect();
+  const boxRect = box.getBoundingClientRect();
+  return targetRect.y < boxRect.y + boxRect.height;
+};
diff --git a/yarn.lock b/yarn.lock
index 365d645b..a97b2b51 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4442,6 +4442,11 @@ algoliasearch@^4.13.1:
     "@algolia/requester-node-http" "4.13.1"
     "@algolia/transporter" "4.13.1"
 
+anser@^1.4.1:
+  version "1.4.10"
+  resolved "https://registry.yarnpkg.com/anser/-/anser-1.4.10.tgz#befa3eddf282684bd03b63dcda3927aef8c2e35b"
+  integrity sha512-hCv9AqTQ8ycjpSd3upOJd7vFwW1JaoYQ7tpham03GJ1ca8/65rqn0RpaWpItOAd6ylW9wAw6luXYPJIyPFVOww==
+
 ansi-escapes@^4.2.1, ansi-escapes@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.1.tgz#a5c47cc43181f1f38ffd7076837700d395522a61"
@@ -4495,6 +4500,14 @@ ansi-styles@^6.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.1.0.tgz#87313c102b8118abd57371afab34618bf7350ed3"
   integrity sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ==
 
+ansi-to-react@^6.1.6:
+  version "6.1.6"
+  resolved "https://registry.yarnpkg.com/ansi-to-react/-/ansi-to-react-6.1.6.tgz#d6fe15ecd4351df626a08121b1646adfe6c02ccb"
+  integrity sha512-+HWn72GKydtupxX9TORBedqOMsJRiKTqaLUKW8txSBZw9iBpzPKLI8KOu4WzwD4R7hSv1zEspobY6LwlWvwZ6Q==
+  dependencies:
+    anser "^1.4.1"
+    escape-carriage "^1.3.0"
+
 anymatch@^3.0.3:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
@@ -6270,6 +6283,11 @@ escalade@^3.1.1:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
+escape-carriage@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/escape-carriage/-/escape-carriage-1.3.0.tgz#71006b2d4da8cb6828686addafcb094239c742f3"
+  integrity sha512-ATWi5MD8QlAGQOeMgI8zTp671BG8aKvAC0M7yenlxU4CRLGO/sKthxVUyjiOFKjHdIo+6dZZUNFgHFeVEaKfGQ==
+
 escape-html@^1.0.3, escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -9934,6 +9952,11 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+pb-util@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/pb-util/-/pb-util-1.0.3.tgz#013800d6c2d1e1d1950d595f8b7d7e608ceca9e1"
+  integrity sha512-8+weUH2YEYnPf5sTpZ3q7Drq41tSEL8vDSU96/CzSvu2qrbspbjbbuKLjHocAQpmyMbICTcvovVl3cETwxwIkQ==
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -11116,6 +11139,11 @@ react-transition-group@^4.4.2:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-usestateref@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/react-usestateref/-/react-usestateref-1.0.8.tgz#b40519af0d6f3b3822c70eb5db80f7d47f1b1ff5"
+  integrity sha512-whaE6H0XGarFKwZ3EYbpHBsRRCLZqdochzg/C7e+b6VFMTA3LS3K4ZfpI4NT40iy83jG89rGXrw70P9iDfOdsA==
+
 react@^18.0.0:
   version "18.0.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"