chore: use monorepo organization

packages/admin-ui/src/pages/Logs/ServerLogs.jsx

@@ -0,0 +1,197 @@
+import { useQuery, gql } from '@apollo/client'
+import * as R from 'ramda'
+import React, { useState, useRef } from 'react'
+import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper.jsx'
+import Title from 'src/components/Title.jsx'
+import Uptime from 'src/pages/Logs/Uptime.jsx'
+import { Info3, H4 } from 'src/components/typography/index.jsx'
+
+import { Select } from 'src/components/inputs/index.js'
+import {
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell
+} from 'src/components/table/index.js'
+import { startCase } from 'src/utils/string.js'
+import { formatDate } from 'src/utils/timezones.js'
+
+import logsClasses from './Logs.module.css'
+import classes from './ServerLogs.module.css'
+
+const SHOW_ALL = { code: 'SHOW_ALL', display: 'Show all' }
+
+const NUM_LOG_RESULTS = 500
+
+const GET_CSV = gql`
+  query ServerData(
+    $limit: Int
+    $from: DateTimeISO
+    $until: DateTimeISO
+    $timezone: String
+  ) {
+    serverLogsCsv(
+      limit: $limit
+      from: $from
+      until: $until
+      timezone: $timezone
+    )
+  }
+`
+
+const GET_SERVER_DATA = gql`
+  query ServerData($limit: Int, $from: DateTimeISO, $until: DateTimeISO) {
+    serverVersion
+    uptime {
+      name
+      state
+      uptime
+    }
+    serverLogs(limit: $limit, from: $from, until: $until) {
+      logLevel
+      id
+      timestamp
+      message
+    }
+  }
+`
+
+const GET_DATA = gql`
+  query getData {
+    config
+  }
+`
+
+const Logs = () => {
+  const tableEl = useRef()
+
+  const [saveMessage, setSaveMessage] = useState(null)
+  const [logLevel, setLogLevel] = useState(SHOW_ALL)
+
+  const { data, loading: dataLoading } = useQuery(GET_SERVER_DATA, {
+    onCompleted: () => setSaveMessage(''),
+    variables: {
+      limit: NUM_LOG_RESULTS
+    }
+  })
+  const { data: configResponse, loading: configLoading } = useQuery(GET_DATA)
+  const timezone = R.path(['config', 'locale_timezone'], configResponse)
+
+  const defaultLogLevels = [
+    { code: 'error', display: 'Error' },
+    { code: 'info', display: 'Info' },
+    { code: 'debug', display: 'Debug' }
+  ]
+  const serverVersion = data?.serverVersion
+  const processStates = data?.uptime ?? []
+
+  const getLogLevels = R.compose(
+    R.prepend(SHOW_ALL),
+    R.uniq,
+    R.concat(defaultLogLevels),
+    R.map(it => ({
+      code: R.path(['logLevel'])(it),
+      display: startCase(R.path(['logLevel'])(it))
+    })),
+    R.path(['serverLogs'])
+  )
+
+  const handleLogLevelChange = logLevel => {
+    if (tableEl.current) tableEl.current.scrollTo(0, 0)
+
+    setLogLevel(logLevel)
+  }
+
+  const loading = dataLoading || configLoading
+
+  return (
+    <>
+      <div className={logsClasses.titleWrapper}>
+        <div className={logsClasses.titleAndButtonsContainer}>
+          <Title>Server</Title>
+          {data && (
+            <div className={logsClasses.buttonsWrapper}>
+              <LogsDowloaderPopover
+                title="Download logs"
+                name="server-logs"
+                query={GET_CSV}
+                args={{ timezone }}
+                logs={data.serverLogs}
+                getLogs={logs => R.path(['serverLogsCsv'])(logs)}
+                timezone={timezone}
+              />
+              <Info3>{saveMessage}</Info3>
+            </div>
+          )}
+        </div>
+        <div className={classes.serverVersion}>
+          {serverVersion && <span>Server version: v{serverVersion}</span>}
+        </div>
+      </div>
+      <div className={classes.headerLine2}>
+        {data && (
+          <Select
+            onSelectedItemChange={handleLogLevelChange}
+            label="Level"
+            items={getLogLevels(data)}
+            default={SHOW_ALL}
+            selectedItem={logLevel}
+          />
+        )}
+        <div className={classes.uptimeContainer}>
+          {processStates &&
+            processStates.map((process, idx) => (
+              <Uptime key={idx} process={process} />
+            ))}
+        </div>
+      </div>
+      <div className={logsClasses.wrapper}>
+        <div ref={tableEl} className={classes.serverTableWrapper}>
+          <Table className={logsClasses.table}>
+            <TableHead>
+              <TableRow header>
+                <TableHeader className={logsClasses.dateColumn}>
+                  Date
+                </TableHeader>
+                <TableHeader className={logsClasses.levelColumn}>
+                  Level
+                </TableHeader>
+                <TableHeader className={logsClasses.fillColumn} />
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data &&
+                data.serverLogs
+                  .filter(
+                    log =>
+                      logLevel === SHOW_ALL || log.logLevel === logLevel.code
+                  )
+                  .map((log, idx) => (
+                    <TableRow key={idx} size="sm">
+                      <TableCell>
+                        {timezone &&
+                          formatDate(
+                            log.timestamp,
+                            timezone,
+                            'yyyy-MM-dd HH:mm'
+                          )}
+                      </TableCell>
+                      <TableCell>{log.logLevel}</TableCell>
+                      <TableCell>{log.message}</TableCell>
+                    </TableRow>
+                  ))}
+            </TableBody>
+          </Table>
+          {loading && <H4>{'Loading...'}</H4>}
+          {!loading && !data?.serverLogs?.length && (
+            <H4>{'No activity so far'}</H4>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Logs