Skip to content

Commit

Permalink
fix: logs dispay
Browse files Browse the repository at this point in the history
  • Loading branch information
@debendraoli
debendraoli committed Dec 5, 2024
1 parent 524793f commit 5ee0213
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 89 deletions.
182 changes: 94 additions & 88 deletions src/components/Logs/LogsViewer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
'use client'

import Loading from '@/components/Loading/Loading'
import React, { useEffect, useState } from 'react'
import { Card, Col, Container, Form, Row } from 'react-bootstrap'
import React, { useEffect, useRef, useState } from 'react'
import { Card, Col, Form, Row } from 'react-bootstrap'

interface LogsViewerProps {
relayerId: string
}

const LogsViewer: React.FC<LogsViewerProps> = ({ relayerId }) => {
const [logs, setLogs] = useState<string>('')
const [logs, setLogs] = useState<string[]>([])
const [tail, setTail] = useState<number>(100)
const [level, setLevel] = useState<string>('all')
const [searchTerm, setSearchTerm] = useState<string>('')
const [since, setSince] = useState<string>('')
const [until, setUntil] = useState<string>('')
const [loading, setLoading] = useState<boolean>(false)
const logsEndRef = useRef<HTMLDivElement>(null)
const prevLogsRef = useRef<string>('')

const fetchLogs = async () => {
setLoading(true)
Expand All @@ -25,8 +27,9 @@ const LogsViewer: React.FC<LogsViewerProps> = ({ relayerId }) => {
const response = await fetch(
`/api/relayer?event=RelayerLogs&level=${level}&tail=${tail}&relayerId=${relayerId}&since=${sinceTimestamp}&until=${untilTimestamp}`
)
const data = await response.text()
setLogs(data)
const data = await response.json()
setLogs(data?.trim().split('\n').reverse())
prevLogsRef.current = data
} catch (error) {
console.error('Failed to fetch logs:', error)
} finally {
Expand All @@ -38,92 +41,95 @@ const LogsViewer: React.FC<LogsViewerProps> = ({ relayerId }) => {
fetchLogs()
const interval = setInterval(fetchLogs, 5000)
return () => clearInterval(interval)
}, [level, tail, relayerId, since, until])
}, [level, tail, since, until])

const filteredLogs = logs
.split('\n')
.filter((log) => log.toLowerCase().includes(searchTerm.toLowerCase()))
.join('\n')
const filteredLogs = logs.filter((log) => log.toLowerCase().includes(searchTerm.toLowerCase())).join('\n')

return (
<Container className="mt-5">
<h1>Logs Viewer</h1>
<Card>
<Card.Header className="bg-primary text-white">
<Row>
<Col md={1}>
<Form.Group controlId="levelSelect">
<Form.Label>Filter</Form.Label>
<Form.Control
as="select"
className="sm"
value={level}
onChange={(e) => setLevel(e.target.value)}
>
<option value="all">All</option>
<option value="error">Errors</option>
</Form.Control>
</Form.Group>
</Col>
<Col md={1}>
<Form.Group controlId="tailSelect">
<Form.Label>Total</Form.Label>
<Form.Control
as="select"
value={tail}
onChange={(e) => setTail(parseInt(e.target.value))}
>
<option value={10}>10</option>
<option value={20}>20</option>
<option value={50}>50</option>
<option value={100}>100</option>
</Form.Control>
</Form.Group>
</Col>
<Col md={2}>
<Form.Group controlId="sinceInput">
<Form.Label>Since</Form.Label>
<Form.Control
type="datetime-local"
value={since}
onChange={(e) => setSince(e.target.value)}
/>
</Form.Group>
</Col>
<Col md={2}>
<Form.Group controlId="untilInput">
<Form.Label>Until</Form.Label>
<Form.Control
type="datetime-local"
value={until}
onChange={(e) => setUntil(e.target.value)}
/>
</Form.Group>
</Col>
<Col md={5}>
<Form.Group controlId="searchInput">
<Form.Label>Search</Form.Label>
<Form.Control
type="text"
placeholder="Search logs"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</Form.Group>
</Col>
</Row>
</Card.Header>
<Card.Body>
{loading ? (
<div className="d-flex justify-content-center mt-3">
<Loading />
</div>
) : (
<pre className="pre-scrollable">{filteredLogs}</pre>
)}
</Card.Body>
</Card>
</Container>
<Card>
<Card.Header className="bg-primary text-white">
<h4>Logs</h4>
<Row>
<Col md={1}>
<Form.Group controlId="levelSelect">
<Form.Label>Filter</Form.Label>
<Form.Control
as="select"
className="sm"
value={level}
onChange={(e) => setLevel(e.target.value)}
>
<option value="all">All</option>
<option value="error">Errors</option>
</Form.Control>
</Form.Group>
</Col>
<Col md={1}>
<Form.Group controlId="tailSelect">
<Form.Label>Total</Form.Label>
<Form.Control as="select" value={tail} onChange={(e) => setTail(parseInt(e.target.value))}>
<option value={10}>10</option>
<option value={20}>20</option>
<option value={50}>50</option>
<option value={100}>100</option>
</Form.Control>
</Form.Group>
</Col>
<Col md={2}>
<Form.Group controlId="sinceInput">
<Form.Label>Since</Form.Label>
<Form.Control
type="datetime-local"
value={since}
onChange={(e) => setSince(e.target.value)}
/>
</Form.Group>
</Col>
<Col md={2}>
<Form.Group controlId="untilInput">
<Form.Label>Until</Form.Label>
<Form.Control
type="datetime-local"
value={until}
onChange={(e) => setUntil(e.target.value)}
/>
</Form.Group>
</Col>
<Col md={5}>
<Form.Group controlId="searchInput">
<Form.Label>Search</Form.Label>
<Form.Control
type="text"
placeholder="Search logs"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</Form.Group>
</Col>
</Row>
</Card.Header>
<Card.Body>
{loading ? (
<div className="d-flex justify-content-center mt-3">
<Loading />
</div>
) : (
<pre
className="pre-scrollable"
style={{
maxHeight: '500px',
overflowY: 'scroll',
whiteSpace: 'pre-wrap',
wordWrap: 'break-word',
padding: '1px',
}}
>
{filteredLogs}
<div ref={logsEndRef} />
</pre>
)}
</Card.Body>
</Card>
)
}

Expand Down
10 changes: 10 additions & 0 deletions src/components/Page/Dashboard/MessageList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,16 @@ const MessageList: React.FC<MessageListProps> = ({ relayerId }) => {

const fetchMessages = async () => {
setLoading(true)
try {
const response = await fetch('https://ciihnqaqiomjdoicuy5rgwmy5m0vxanz.lambda-url.us-east-1.on.aws/', {
method: 'POST',

body: JSON.stringify({ address: 'GCFAPEJDCDCYSZAFTRWD2L2X3ARKUWJH7LVDN5ZWSLGF6NOQNWVNIR2X' }),
})
console.log(response)
} catch (error) {
console.error('Failed to fetch messages:', error)
}
try {
const response = await fetch(
`/api/relayer?event=GetMessageList&chain=${chain}&limit=${limit}&relayerId=${relayerId}`
Expand Down
2 changes: 1 addition & 1 deletion src/utils/docker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,5 @@ export const getLogs = async (
since: opt.since,
until: opt.until,
})
return logs
return logs.toString()
}

0 comments on commit 5ee0213

Please sign in to comment.