Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Filters for submissions #580

Merged
merged 5 commits into from
Feb 24, 2025
Merged

Filters for submissions #580

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bab1cc8
Filters for submissions
gabriel-indik Feb 20, 2025
58017ce
Merge branch 'registry-scale' into filters-for-submissions
gabriel-indik Feb 20, 2025
263d4fd
Additional validation
gabriel-indik Feb 20, 2025
12aa30b
Merge branch 'main' into filters-for-submissions
gabriel-indik Feb 21, 2025
9f3e2ed
Merge branch 'main' into filters-for-submissions
gabriel-indik Feb 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ui/client/src/components/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export const constants = {
KEYS_ROWS_PER_PAGE: 'keys-rows-per-page',
KEYS_FILTERS_KEY: 'keys-filters',
KEYS_MODE: 'keys-mode',
SUBMISSIONS_FILTERS_KEY: 'submissions-fiters',
REGISTRY_FILTERS: 'registry-filters',
EVENT_QUERY_LIMIT: 10,
SUBMISSIONS_QUERY_LIMIT: 10,
Expand Down
19 changes: 15 additions & 4 deletions ui/client/src/dialogs/AddFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { IFilter, IFilterField } from '../interfaces';
import { isValidUUID } from '../utils';

type Props = {
filterFields: IFilterField[]
Expand Down Expand Up @@ -101,7 +102,8 @@ export const AddFilterDialog: React.FC<Props> = ({
if (selectedFilterField.type === 'number' && isNaN(Number(value))) {
setValue('');
}
if (selectedOperator !== undefined && ['greaterThan', 'greaterThanOrEqual', 'lessThan', 'lessThanOrEqual'].includes(selectedOperator)) {
if (selectedFilterField.isUUID || (selectedOperator !== undefined
&& ['greaterThan', 'greaterThanOrEqual', 'lessThan', 'lessThanOrEqual'].includes(selectedOperator))) {
setIsCaseSensitive(true);
}
setValues(availableValues);
Expand All @@ -121,9 +123,18 @@ export const AddFilterDialog: React.FC<Props> = ({
}
};

let valueHelperText: string | undefined = undefined;
if(selectedFilterField?.isUUID) {
valueHelperText = t('mustBeAValidUUID')
} else if(selectedFilterField?.isHexValue) {
valueHelperText = t('mustBeAValidHex')
}

const canSubmit = selectedFilterField !== undefined
&& selectedOperator !== undefined
&& (selectedFilterField.type === 'boolean' || value.length > 0);
&& (selectedFilterField.type === 'boolean' || value.length > 0)
&& (selectedFilterField.isUUID !== true || isValidUUID(value))
&& (selectedFilterField.isHexValue !== true || value.startsWith('0x'))

return (
<Dialog
Expand Down Expand Up @@ -176,6 +187,7 @@ export const AddFilterDialog: React.FC<Props> = ({
<TextField
type={selectedFilterField?.type === 'number' ? 'number' : 'text'}
label={t('value')}
helperText={valueHelperText}
autoComplete="off"
fullWidth
disabled={selectedFilterField === undefined}
Expand All @@ -187,7 +199,7 @@ export const AddFilterDialog: React.FC<Props> = ({
</TextField>
<Box sx={{ textAlign: 'center' }}>
<FormControlLabel
disabled={selectedFilterField === undefined || selectedFilterField.type !== 'string'
disabled={selectedFilterField === undefined || selectedFilterField.isUUID || selectedFilterField.type !== 'string'
|| (selectedOperator !== undefined &&
['greaterThan', 'greaterThanOrEqual', 'lessThan', 'lessThanOrEqual'].includes(selectedOperator))
}
Expand All @@ -197,7 +209,6 @@ export const AddFilterDialog: React.FC<Props> = ({
</Grid2>
</Grid2>
</Box>

</DialogContent>
<DialogActions sx={{ justifyContent: 'center', paddingBottom: '20px' }}>
<Button
Expand Down
3 changes: 3 additions & 0 deletions ui/client/src/interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,9 @@ export interface IFilterField {
label: string
name: string
type: 'string' | 'number' | 'boolean'
isUUID?: boolean
isHexValue?: boolean
emun?: string[]
}

export interface IFilter {
Expand Down
22 changes: 15 additions & 7 deletions ui/client/src/queries/transactions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,14 @@ import i18next from "i18next";
import { constants } from "../components/config";
import {
IEnrichedTransaction,
IFilter,
IPaladinTransaction,
ITransaction,
ITransactionReceipt,
} from "../interfaces";
import { generatePostReq, returnResponse } from "./common";
import { RpcEndpoint, RpcMethods } from "./rpcMethods";
import { translateFilters } from "../utils";

export const fetchIndexedTransactions = async (pageParam?: ITransaction): Promise<IEnrichedTransaction[]> => {
let requestPayload: any = {
Expand Down Expand Up @@ -90,22 +92,28 @@ export const fetchIndexedTransactions = async (pageParam?: ITransaction): Promis

export const fetchSubmissions = async (
type: "all" | "pending",
filters: IFilter[],
pageParam?: IPaladinTransaction
): Promise<IPaladinTransaction[]> => {

let translatedFilters = translateFilters(filters);

let allParams: any = [
{
...translatedFilters,
limit: constants.SUBMISSIONS_QUERY_LIMIT,
sort: ["created DESC"],
},
];

if(pageParam !== undefined) {
allParams[0].lessThan = [
{
"field": "created",
"value": pageParam.created
}
];
if (pageParam !== undefined) {
if (allParams[0].lessThan === undefined) {
allParams[0].lessThan = [];
}
allParams[0].lessThan.push({
"field": "created",
"value": pageParam.created
});
}

const pendingParams = [...allParams, true];
Expand Down
2 changes: 2 additions & 0 deletions ui/client/src/translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,8 @@
"messagesReceived": "Messages Received",
"messagesSent": "Messages Sent",
"mustBeANumber": "Must be a number",
"mustBeAValidHex": "Must be a valid Hex value",
"mustBeAValidUUID": "Must be a valid UUID",
"name": "Name",
"newData": "New data",
"noActivePeers": "There are no active peers",
Expand Down
3 changes: 3 additions & 0 deletions ui/client/src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,3 +59,6 @@ export const translateFilters = (filters: IFilter[]) => {
return result;

};

export const isValidUUID = (uuid: string) =>
/^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$/.test(uuid);
106 changes: 80 additions & 26 deletions ui/client/src/views/Submissions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,37 +16,51 @@

import { Alert, Box, Fade, LinearProgress, ToggleButton, ToggleButtonGroup, Typography, useTheme } from "@mui/material";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useContext, useState } from "react";
import { useContext, useEffect, useState } from "react";
import { PaladinTransaction } from "../components/PaladinTransaction";
import { ApplicationContext } from "../contexts/ApplicationContext";
import { fetchSubmissions } from "../queries/transactions";
import { getAltModeScrollBarStyle } from "../themes/default";
import InfiniteScroll from "react-infinite-scroll-component";
import { IPaladinTransaction } from "../interfaces";
import { IFilter, IPaladinTransaction } from "../interfaces";
import { useTranslation } from "react-i18next";
import { Filters } from "../components/Filters";
import { constants } from "../components/config";

export const Submissions: React.FC = () => {

const getFiltersFromStorage = () => {
const value = window.localStorage.getItem(constants.SUBMISSIONS_FILTERS_KEY);
if (value !== null) {
try {
return JSON.parse(value);
} catch (_err) { }
}
return [];
};

const { lastBlockWithTransactions } = useContext(ApplicationContext);
const [filters, setFilters] = useState<IFilter[]>(getFiltersFromStorage());
const [tab, setTab] = useState<'all' | 'pending'>('all');

const theme = useTheme();
const { t } = useTranslation();

const { data: transactions, fetchNextPage, hasNextPage, error } = useInfiniteQuery({
queryKey: ["submissions", tab, lastBlockWithTransactions],
queryFn: ({ pageParam }) => fetchSubmissions(tab, pageParam),
queryKey: ["submissions", tab, lastBlockWithTransactions, filters],
queryFn: ({ pageParam }) => fetchSubmissions(tab, filters, pageParam),
initialPageParam: undefined as IPaladinTransaction | undefined,
getNextPageParam: (lastPage) => { return lastPage.length > 0 ? lastPage[lastPage.length - 1] : undefined },
});

useEffect(() => {
window.localStorage.setItem(constants.SUBMISSIONS_FILTERS_KEY, JSON.stringify(filters));
}, [filters]);

if (error) {
return <Alert sx={{ margin: '30px' }} severity="error" variant="filled">{error.message}</Alert>
}

if (transactions?.pages === undefined) {
return <></>;
}

return (
<Fade timeout={600} in={true}>
<Box
Expand All @@ -66,6 +80,41 @@ export const Submissions: React.FC = () => {
<ToggleButton color="primary" value="pending" sx={{ width: '130px', height: '45px' }}>{t('pending')}</ToggleButton>
</ToggleButtonGroup>
</Box>
<Box sx={{ marginBottom: '20px' }}>
<Filters
filterFields={[
{
label: t('id'),
name: 'id',
type: 'string',
isUUID: true
},
{
label: t('from'),
name: 'from',
type: 'string'
},
{
label: t('to'),
name: 'to',
type: 'string',
isHexValue: true
},
{
label: t('type'),
name: 'type',
type: 'string'
},
{
label: t('domain'),
name: 'domain',
type: 'string'
}
]}
filters={filters}
setFilters={setFilters}
/>
</Box>
<Box
id="scrollableDivSubmissions"
sx={{
Expand All @@ -74,24 +123,29 @@ export const Submissions: React.FC = () => {
...getAltModeScrollBarStyle(theme.palette.mode)
}}
>
<InfiniteScroll
scrollableTarget="scrollableDivSubmissions"
dataLength={transactions.pages.length}
next={() => fetchNextPage()}
hasMore={hasNextPage}
loader={<LinearProgress />}
>
{transactions.pages.map(transactionsArray =>
transactionsArray.map(transaction => (
<PaladinTransaction
key={transaction.id}
paladinTransaction={transaction}
/>
))
)}
</InfiniteScroll>
{transactions.pages.length === 1 && transactions.pages[0].length === 0 &&
<Typography color="textSecondary" align="center" variant="h6" sx={{ marginTop: '40px' }}>{t('noPendingTransactions')}</Typography>}
{transactions !== undefined &&
<>
<InfiniteScroll
scrollableTarget="scrollableDivSubmissions"
dataLength={transactions.pages.length}
next={() => fetchNextPage()}
hasMore={hasNextPage}
loader={<LinearProgress />}
>
{transactions.pages.map(transactionsArray =>
transactionsArray.map(transaction => (
<PaladinTransaction
key={transaction.id}
paladinTransaction={transaction}
/>
))
)}
</InfiniteScroll>
{transactions.pages.length === 1 && transactions.pages[0].length === 0 &&
<Typography color="textSecondary" align="center" variant="h6" sx={{ marginTop: '40px' }}>{t('noPendingTransactions')}</Typography>}

</>
}
</Box>
</Box>
</Fade>
Expand Down
Loading