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.

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

Introduce Logs Table v1 #728

Merged
merged 23 commits into from
May 28, 2024
Merged

Introduce Logs Table v1 #728

merged 23 commits into from
May 28, 2024

Conversation

Kevin101Zhang
Copy link
Contributor

@Kevin101Zhang Kevin101Zhang commented May 10, 2024

Introduce an improved logs table with new fields and the ability to search and filter based of radio inputs.

@Kevin101Zhang Kevin101Zhang linked an issue May 10, 2024 that may be closed by this pull request
@Kevin101Zhang Kevin101Zhang linked an issue May 21, 2024 that may be closed by this pull request
@Kevin101Zhang Kevin101Zhang changed the title 726 gridjs Introduce Logs Table v1 May 21, 2024
@Kevin101Zhang
Copy link
Contributor Author

Kevin101Zhang commented May 21, 2024

All the Logs Table Logic begins by following the container file

frontend/src/components/Logs/LogsViewContainer/IndexerLogsContainer.tsx

here we defined a series of configs

getIndexerLogConfig
getSearchConfig
getPaginationConfig
getGridStyle
getLanguageConfig

**That is used by gridjs and rendered/reloaded out with a basic react hook**

const getGridConfig: any = () => {
        return {
            columns: [...],
            search: getSearchConfig(), **Any Interaction of the search bar**
            pagination: getPaginationConfig(), // static JSON
            style: getGridStyle(), //just style
            server: getIndexerLogsConfig(),  **Any interaction with filters**
            language: getLanguageConfig(), // just placeholder style 
            // sort: true,
        };
    };
 
From there on each portion is broken down into smaller files and a series of helper functions. 

The Logs Menu is on houses all the logic for the menu
frontend/src/components/Logs/LogsMenu.tsx

@Kevin101Zhang
Copy link
Contributor Author

Kevin101Zhang commented May 21, 2024

Lots of work to do but kicking off an initial review The files add/removed should be relatively simple. Fingers crossed for the reviewers.

Only change required on my end is exporting DEV_ENV/PROD_ENV environment variables.

There is a refactor of graphQL queries into dynamic queries using default variables that @morgsmccauley mentioned.
I intend to do later down the rode. I believe this can be considered after the following features are implemented in order to get a clearer depiction of the calls needed.

  1. Dynamically fetch the count of severity and logtype fields (and update the value based off Filters)
  2. Infinite Scroll (rendering more)
  3. Add Custom Date Selection  
  4. toggle (on/off) for a socket to subscribe and listen to bh/status/log data
  5. sorting

@Kevin101Zhang Kevin101Zhang marked this pull request as ready for review May 21, 2024 20:09
@Kevin101Zhang Kevin101Zhang requested a review from a team as a code owner May 21, 2024 20:09
@Kevin101Zhang Kevin101Zhang linked an issue May 21, 2024 that may be closed by this pull request
5 tasks
@Kevin101Zhang Kevin101Zhang removed a link to an issue May 22, 2024
@Kevin101Zhang Kevin101Zhang linked an issue May 22, 2024 that may be closed by this pull request
@Kevin101Zhang Kevin101Zhang removed a link to an issue May 22, 2024
Copy link
Collaborator

@morgsmccauley morgsmccauley left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work, I like how you separated out the smaller view components 🙌🏼

},
body: JSON.stringify({
query: Query(tableName),
variables: QueryValidation({ limit: LOGS_PER_PAGE, offset: 0, order_by_timestamp: 'desc', level: severity, type: logType, timestamp: startTime })
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does offset need to change based on page number?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do not have any form of pagination currently. Each filter/added filter is its individual call. But yes it would have to change when we implement infinite scroll.

Copy link
Collaborator

@darunrs darunrs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Nice work on it! The broken up files are much easier to ingest mentally.

@Kevin101Zhang Kevin101Zhang merged commit bb3c772 into main May 28, 2024
@Kevin101Zhang Kevin101Zhang deleted the 726-gridjs branch May 28, 2024 21:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Make GridJS query from GraphQL Improve UX for viewing logs and status on the Indexer Status page
3 participants