From 3bd00b2d897d31f3429a9297b206fcc0f9c064d8 Mon Sep 17 00:00:00 2001 From: Jamie Hewitt Date: Thu, 2 May 2024 16:03:06 +0300 Subject: [PATCH 01/10] Creating component for the indexing queue --- dashboard/src/components/IndexQueue.tsx | 43 +++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 dashboard/src/components/IndexQueue.tsx diff --git a/dashboard/src/components/IndexQueue.tsx b/dashboard/src/components/IndexQueue.tsx new file mode 100644 index 000000000..e2c110f38 --- /dev/null +++ b/dashboard/src/components/IndexQueue.tsx @@ -0,0 +1,43 @@ +import React, { useState, useEffect } from 'react' + +interface QueueItem { + txId: string + chainId: string +} + +// Assuming RPCS is available in environment and properly formatted as JSON +const rpcs = JSON.parse(process.env.RPCS || '{}') + +const IndexQueueComponent: React.FC = () => { + const [queue, setQueue] = useState([]) + + useEffect(() => { + fetch('/api/services/indexQueue') + .then((response) => response.json()) + .then((data) => { + const transformedQueue = data.queue.map((item: any) => ({ + txId: item.txId, + chainId: rpcs[item.chainId]?.network || item.chainId + })) + setQueue(transformedQueue) + }) + .catch((error) => { + console.error('Error fetching queue:', error) + }) + }, []) + + return ( +
+

Indexing Queue

+
    + {queue.map((item, index) => ( +
  • + Transaction ID: {item.txId} - Network: {item.chainId} +
    • + ))} +
+
+ ) +} + +export default IndexQueueComponent From 3a8fe99ed502bafe00336aa7d7ef244b40c39c95 Mon Sep 17 00:00:00 2001 From: Jamie Hewitt Date: Thu, 2 May 2024 16:05:27 +0300 Subject: [PATCH 02/10] Updates --- dashboard/src/components/IndexQueue.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/dashboard/src/components/IndexQueue.tsx b/dashboard/src/components/IndexQueue.tsx index e2c110f38..808b3064a 100644 --- a/dashboard/src/components/IndexQueue.tsx +++ b/dashboard/src/components/IndexQueue.tsx @@ -1,14 +1,13 @@ -import React, { useState, useEffect } from 'react' +import { useState, useEffect } from 'react' interface QueueItem { txId: string chainId: string } -// Assuming RPCS is available in environment and properly formatted as JSON const rpcs = JSON.parse(process.env.RPCS || '{}') -const IndexQueueComponent: React.FC = () => { +export default function IndexQueueComponent() { const [queue, setQueue] = useState([]) useEffect(() => { @@ -39,5 +38,3 @@ const IndexQueueComponent: React.FC = () => { ) } - -export default IndexQueueComponent From a055fa6fc62e56be1e1bc22607f700d7b3e0463c Mon Sep 17 00:00:00 2001 From: Jamie Hewitt Date: Thu, 2 May 2024 16:12:42 +0300 Subject: [PATCH 03/10] Polling the API for updates --- dashboard/src/components/IndexQueue.tsx | 33 ++++++++++++++++--------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/dashboard/src/components/IndexQueue.tsx b/dashboard/src/components/IndexQueue.tsx index 808b3064a..c79e61bd2 100644 --- a/dashboard/src/components/IndexQueue.tsx +++ b/dashboard/src/components/IndexQueue.tsx @@ -11,18 +11,27 @@ export default function IndexQueueComponent() { const [queue, setQueue] = useState([]) useEffect(() => { - fetch('/api/services/indexQueue') - .then((response) => response.json()) - .then((data) => { - const transformedQueue = data.queue.map((item: any) => ({ - txId: item.txId, - chainId: rpcs[item.chainId]?.network || item.chainId - })) - setQueue(transformedQueue) - }) - .catch((error) => { - console.error('Error fetching queue:', error) - }) + const fetchQueue = () => { + fetch('/api/services/indexQueue') + .then((response) => response.json()) + .then((data) => { + const transformedQueue = data.queue.map((item: any) => ({ + txId: item.txId, + chainId: rpcs[item.chainId]?.network || item.chainId + })) + setQueue(transformedQueue) + }) + .catch((error) => { + console.error('Error fetching queue:', error) + }) + } + + fetchQueue() // Initial fetch + const intervalId = setInterval(fetchQueue, 2000) // Poll API every 2000 milliseconds (2 seconds) + + return () => { + clearInterval(intervalId) // Clear interval on component unmount + } }, []) return ( From c3ac83475ab30d41fe98b6b51b89d949b5e600b9 Mon Sep 17 00:00:00 2001 From: Jamie Hewitt Date: Thu, 2 May 2024 16:20:58 +0300 Subject: [PATCH 04/10] Showing indexing queue in a table --- dashboard/src/components/Dashboard/index.tsx | 2 ++ dashboard/src/components/IndexQueue.tsx | 38 +++++++++++++++----- 2 files changed, 31 insertions(+), 9 deletions(-) diff --git a/dashboard/src/components/Dashboard/index.tsx b/dashboard/src/components/Dashboard/index.tsx index f9f118d29..483c04ee8 100644 --- a/dashboard/src/components/Dashboard/index.tsx +++ b/dashboard/src/components/Dashboard/index.tsx @@ -7,6 +7,7 @@ import AdminActions from '../Admin' import Spinner from '../Spinner' import NodePeers from '../NodePeers' import Copy from '../Copy' +import IndexQueue from '../IndexQueue' type IndexerType = { block: string @@ -273,6 +274,7 @@ export default function Dashboard() { + )} diff --git a/dashboard/src/components/IndexQueue.tsx b/dashboard/src/components/IndexQueue.tsx index c79e61bd2..c71e33821 100644 --- a/dashboard/src/components/IndexQueue.tsx +++ b/dashboard/src/components/IndexQueue.tsx @@ -1,4 +1,11 @@ -import { useState, useEffect } from 'react' +import React, { useState, useEffect } from 'react' +import Table from '@mui/material/Table' +import TableBody from '@mui/material/TableBody' +import TableCell from '@mui/material/TableCell' +import TableContainer from '@mui/material/TableContainer' +import TableHead from '@mui/material/TableHead' +import TableRow from '@mui/material/TableRow' +import Paper from '@mui/material/Paper' interface QueueItem { txId: string @@ -7,7 +14,7 @@ interface QueueItem { const rpcs = JSON.parse(process.env.RPCS || '{}') -export default function IndexQueueComponent() { +export default function IndexQueue() { const [queue, setQueue] = useState([]) useEffect(() => { @@ -37,13 +44,26 @@ export default function IndexQueueComponent() { return (

Indexing Queue

-
    - {queue.map((item, index) => ( -
  • - Transaction ID: {item.txId} - Network: {item.chainId} -
    • - ))} -
+ + + + + Transaction ID + Network + + + + {queue.map((item, index) => ( + + + {item.txId} + + {item.chainId} + + ))} + +
+
) } From d815aa1a04e987bfc0e5a8a23ed0dee86b5aaf9f Mon Sep 17 00:00:00 2001 From: Jamie Hewitt Date: Thu, 2 May 2024 16:30:20 +0300 Subject: [PATCH 05/10] Updating styling in indexing list component --- dashboard/src/components/IndexQueue.tsx | 47 +++++++++++++++---------- 1 file changed, 28 insertions(+), 19 deletions(-) diff --git a/dashboard/src/components/IndexQueue.tsx b/dashboard/src/components/IndexQueue.tsx index c71e33821..89abb72bd 100644 --- a/dashboard/src/components/IndexQueue.tsx +++ b/dashboard/src/components/IndexQueue.tsx @@ -6,6 +6,7 @@ import TableContainer from '@mui/material/TableContainer' import TableHead from '@mui/material/TableHead' import TableRow from '@mui/material/TableRow' import Paper from '@mui/material/Paper' +import styles from './Dashboard/index.module.css' interface QueueItem { txId: string @@ -43,27 +44,35 @@ export default function IndexQueue() { return (
-

Indexing Queue

- - - - - Transaction ID - Network - - - - {queue.map((item, index) => ( - - - {item.txId} +
Indexing Queue
+ {queue.length > 0 ? ( + +
+ + + + Transaction ID + + + Network - {item.chainId} - ))} - -
- + + + {queue.map((item, index) => ( + + + {item.txId} + + {item.chainId} + + ))} + + + + ) : ( +

Indexing queue is empty.

+ )}
) } From 295ed2386f575763900ce503b45d7341c5f1ae89 Mon Sep 17 00:00:00 2001 From: Jamie Hewitt Date: Thu, 2 May 2024 17:31:24 +0300 Subject: [PATCH 06/10] Updating styling --- dashboard/src/components/IndexQueue.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/dashboard/src/components/IndexQueue.tsx b/dashboard/src/components/IndexQueue.tsx index 89abb72bd..c5257340b 100644 --- a/dashboard/src/components/IndexQueue.tsx +++ b/dashboard/src/components/IndexQueue.tsx @@ -5,7 +5,6 @@ import TableCell from '@mui/material/TableCell' import TableContainer from '@mui/material/TableContainer' import TableHead from '@mui/material/TableHead' import TableRow from '@mui/material/TableRow' -import Paper from '@mui/material/Paper' import styles from './Dashboard/index.module.css' interface QueueItem { @@ -46,7 +45,7 @@ export default function IndexQueue() {
Indexing Queue
{queue.length > 0 ? ( - + From addb2925219e959178241540951651b540b195d6 Mon Sep 17 00:00:00 2001 From: Jamie Hewitt Date: Mon, 6 May 2024 16:23:34 +0300 Subject: [PATCH 07/10] Changing dashbaord layout to keeping indexing together --- dashboard/src/components/Dashboard/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dashboard/src/components/Dashboard/index.tsx b/dashboard/src/components/Dashboard/index.tsx index 483c04ee8..7f78516c8 100644 --- a/dashboard/src/components/Dashboard/index.tsx +++ b/dashboard/src/components/Dashboard/index.tsx @@ -184,6 +184,7 @@ export default function Dashboard() { ) })} + ) } @@ -274,7 +275,6 @@ export default function Dashboard() { - )} From f5ac950a67ec24aaaaff1a94b0398b686b080c3b Mon Sep 17 00:00:00 2001 From: Jamie Hewitt Date: Tue, 7 May 2024 15:14:43 +0300 Subject: [PATCH 08/10] Updating index queue on database to use INDEXER_INTERVAL environmental variable --- dashboard/src/components/IndexQueue.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/dashboard/src/components/IndexQueue.tsx b/dashboard/src/components/IndexQueue.tsx index c5257340b..453a68bda 100644 --- a/dashboard/src/components/IndexQueue.tsx +++ b/dashboard/src/components/IndexQueue.tsx @@ -6,6 +6,10 @@ import TableContainer from '@mui/material/TableContainer' import TableHead from '@mui/material/TableHead' import TableRow from '@mui/material/TableRow' import styles from './Dashboard/index.module.css' +import { + ENVIRONMENT_VARIABLES, + existsEnvironmentVariable +} from '../../../src/utils/index.js' interface QueueItem { txId: string @@ -34,7 +38,11 @@ export default function IndexQueue() { } fetchQueue() // Initial fetch - const intervalId = setInterval(fetchQueue, 2000) // Poll API every 2000 milliseconds (2 seconds) + let pollingInterval = 2000 // Default polling interval + if (existsEnvironmentVariable(ENVIRONMENT_VARIABLES.INDEXER_INTERVAL)) { + pollingInterval = Number(process.env.INDEXER_INTERVAL) + } + const intervalId = setInterval(fetchQueue, pollingInterval) // Poll API every 2000 milliseconds (2 seconds) return () => { clearInterval(intervalId) // Clear interval on component unmount From 411fa648da16dfb48714d66b79383439552e4577 Mon Sep 17 00:00:00 2001 From: Jamie Hewitt Date: Tue, 7 May 2024 15:15:09 +0300 Subject: [PATCH 09/10] Removing old comment --- dashboard/src/components/IndexQueue.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dashboard/src/components/IndexQueue.tsx b/dashboard/src/components/IndexQueue.tsx index 453a68bda..600adc998 100644 --- a/dashboard/src/components/IndexQueue.tsx +++ b/dashboard/src/components/IndexQueue.tsx @@ -42,7 +42,7 @@ export default function IndexQueue() { if (existsEnvironmentVariable(ENVIRONMENT_VARIABLES.INDEXER_INTERVAL)) { pollingInterval = Number(process.env.INDEXER_INTERVAL) } - const intervalId = setInterval(fetchQueue, pollingInterval) // Poll API every 2000 milliseconds (2 seconds) + const intervalId = setInterval(fetchQueue, pollingInterval) return () => { clearInterval(intervalId) // Clear interval on component unmount From 7fbca5447f06fdf0be755c991fb1cf28795642f1 Mon Sep 17 00:00:00 2001 From: Jamie Hewitt Date: Tue, 7 May 2024 15:25:05 +0300 Subject: [PATCH 10/10] Updated use of env in dashboard --- dashboard/src/components/IndexQueue.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/dashboard/src/components/IndexQueue.tsx b/dashboard/src/components/IndexQueue.tsx index 600adc998..dd8c3e902 100644 --- a/dashboard/src/components/IndexQueue.tsx +++ b/dashboard/src/components/IndexQueue.tsx @@ -6,10 +6,6 @@ import TableContainer from '@mui/material/TableContainer' import TableHead from '@mui/material/TableHead' import TableRow from '@mui/material/TableRow' import styles from './Dashboard/index.module.css' -import { - ENVIRONMENT_VARIABLES, - existsEnvironmentVariable -} from '../../../src/utils/index.js' interface QueueItem { txId: string @@ -39,7 +35,7 @@ export default function IndexQueue() { fetchQueue() // Initial fetch let pollingInterval = 2000 // Default polling interval - if (existsEnvironmentVariable(ENVIRONMENT_VARIABLES.INDEXER_INTERVAL)) { + if (process.env.INDEXER_INTERVAL) { pollingInterval = Number(process.env.INDEXER_INTERVAL) } const intervalId = setInterval(fetchQueue, pollingInterval)