added Monaco editor for where filter queries

studio/pages/project/[ref]/settings/logs/[type].tsx

@@ -9,8 +9,9 @@ import { get } from "lib/common/fetch"
 import LogTable, { LogData } from 'components/ui/Logs/LogTable'
 import useSWR from 'swr'
 import { API_URL } from 'lib/constants'
-import { Typography, Input, Button } from '@supabase/ui'
+import { Typography, Button } from '@supabase/ui'
 import debounce from 'lodash/debounce'
+import CodeEditor from 'components/ui/CodeEditor'
 
 interface CountData {
   count: number
@@ -24,6 +25,7 @@ export const LogPage = () => {
   const title = LOG_TYPE_LABEL_MAPPING[type as string]
   const [search, setSearch] = useState("")
   const [queryParams, setQueryParams] = useState("")
+  const [where, setWhere] = useState("")
   const [latestRefresh, setLatestRefresh] = useState(new Date().toISOString())
 
   // handle log fetching
@@ -35,20 +37,21 @@ export const LogPage = () => {
     revalidateOnFocus: false,
   })
   const debouncedSearch = debounce(setSearch, 500)
+  const debouncedWhere = debounce(setWhere, 500)
 
   useEffect(() => {
     const params = {
-      search_query: search,
-      path: `/${type}`
+      search_query: search || "",
+      path: `/${type}`,
+      where: where || ""
     }
     const qs = new URLSearchParams(params).toString()
     setQueryParams(qs)
-  }, [search])
+  }, [search, where])
 
   const countKey = `${API_URL}/projects/${ref}/logs?${queryParams}&count=true&period_start=${latestRefresh}`
   const {
     data: countData,
-    mutate: mutateCount
   } = useSWR<{ data: [CountData] | [], error?: any }>(countKey, get, {
     refreshInterval: 5000
   })
@@ -62,6 +65,13 @@ export const LogPage = () => {
   return (
     <SettingsLayout title={title} className="p-4">
       <LogPanel isLoading={isLoading} onRefresh={handleRefresh} onSearch={debouncedSearch} />
+      <CodeEditor
+        id={"logs-where-editor"}
+        language="pgsql"
+        defaultValue={where}
+        onInputChange={v => setWhere(v || "")}
+        onInputRun={handleRefresh}
+      />
       {error && (<Typography.Text className="text-center w-full block">Could not fetch data</Typography.Text>)}
       {newCount && newCount > 0 && <Button onClick={handleRefresh}>Load new logs</Button>}
       <LogTable data={logData} />

studio/tests/pages/projects/logs.test.js

@@ -18,9 +18,22 @@ jest.mock('next/router')
 import { useRouter } from 'next/router'
 useRouter.mockReturnValue({ query: { ref: "123", type: "auth" } })
 
+// mock monaco editor
+jest.mock("@monaco-editor/react")
+import Editor, { useMonaco } from "@monaco-editor/react"
+Editor = jest.fn()
+Editor.mockImplementation((props) => {
+  return (
+    <textarea
+      className="monaco-editor"
+      onChange={e => props.onChange(e.target.value)}
+    ></textarea>
+  )
+})
+useMonaco.mockImplementation(v => v)
+
 import { LogPage } from 'pages/project/[ref]/settings/logs/[type]'
 import { render, fireEvent, waitFor, screen } from '@testing-library/react'
-import { SWRConfig } from 'swr'
 import userEvent from '@testing-library/user-event'
 
 beforeEach(() => {
@@ -121,5 +134,32 @@ test("poll count for new messages", async () => {
 
   userEvent.click(screen.getByText(/Load new logs/))
   await waitFor(() => screen.queryByText(/Load new logs/) === null)
+  await waitFor(() => screen.getByText(/happened/))
+})
+
+
+test("where clause will trigger a log refresh", async () => {
+  get.mockImplementation((url) => {
+
+    if (url.includes("where") && url.includes("something")) {
+      return {
+        data: [{
+          id: "some-uuid",
+          timestamp: 1621323232312,
+          event_message: "some event happened",
+          metadata: {}
+        }]
+      }
+    }
+    return { data: [] }
+  })
+  const { container } = render(<LogPage />)
+  const editor = container.querySelector('.monaco-editor');
+  userEvent.type(editor, "metadata.field = something")
+  await waitFor(() => {
+    expect(get).toHaveBeenCalledWith(expect.stringContaining("where"))
+    expect(get).toHaveBeenCalledWith(expect.stringContaining("metadata.field"))
+  }, { timeout: 1000 })
+
   await waitFor(() => screen.getByText(/happened/))
 })