bench-routes / dashboard

Bench-routes

Modern web applications can have routes ranging from a few to millions in numbers. This makes it tough to discover the condition and state of such application at any given point. Bench-routes monitors the routes of a web application and helps you know about the current state of each route, along with various related performance metrics.

Dataflow

Primary goals

1. Monitoring web applications routes at scale.
2. Querying the monitored data in an interactive UI that is minimalistic to learn.
3. Reporting in case of any abnormalities.

For installation instructions, please head-over to INSTALL.md.

Use of MakeFile in bench-routes

We use make for building and executing the program.

Follow the commands to make the development process easier:

1. Updating the dependencies: make update
2. Executing the application (assuming all dependencies are installed): make run
3. Building the application for the current OS: make build
4. Testing Golang code: make test
5. Complete testing include building for all OSs out there: make test_complete
6. Cleaning up the residual files: make clean
7. (optional) Check linting (assuming golangci-lint is installed): make lint

UI of Bench-routes

The old UI for the project is depreceated for now and no longer mantained. Kindly have a look at our new UI here.

Postman Usage

1. Download Postman and Install it.
2. Create a new collection.

To Check Service State

1. Add request
2. Select method GET
3. Copy and Enter below request url
   http://localhost:9990/service-state
4. Send the request to url.
5. This API returns the state of the services (active or passive) in real-time.

To Get Routes Summary

1. Add request
2. Select method GET
3. Copy and Enter below request url
   http://localhost:9990/routes-summary
4. Send the request to url.
5. This API returns the list of all URLs/Routes that are being monitored for testing using the application.

For more information, regarding the APIs. Visit Bench-Routes.

👬 Active maintainers

• Aquib Baig ([email protected])
• Muskan Khedia ([email protected])
• Harkishen Singh ([email protected])

Communication

• Instant messaging: bench-routes/community
• Discussions (Recent): https://groups.google.com/forum/#!forum/bench-routes-discussion

Want to contribute?

Want to file a bug, request a feature, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing and then check out one of our issues. Make sure you follow the guidelines before sending a contribution!

Supported by

dashboard's Issues

Unified error handling in bench routes

Currently, when a user does something invalid, for, e.g. set the Step value in the time querier less than or equal to 0, although we have conditions to ensure that such invalid actions are not executed, it will be better if we can inform the user about this by some toast notification or something similar

Approach -
We can have a separate store for handling errors and whenever we catch an error and want to display it we can dispatch an action setting the text that need to be displayed in the error thus rendering some toast notification for the user to see.

center fetch button

Hi , the fetch button is currently left aligned and i feel it would be better if it could be in center.

expected

Add Alerting UI

Add UI for displaying the alerts fetched from the bench routes backend. Although this needs to be done once the implementation of alerting is done in the backend. One possible solution I thought of for the UI of alerting is reusing the sidebar provided in the current UI, and we can use it as follows-

When the user click on Alerts, then he will have the following options -

1. To see all the alerts(Incase no machine is selected).
2. To see alerts corresponding to a particular machine(Using the machine selector component).
3. To see alerts corresponding to a particular route(Using the Route selector component).
4. On top of that, the user will have the option to select the time range for which he wishes to see the alerts (Using the existing time querier component).

User can use any of these options according to his requirements and preference.

Migrating to react-query for fetching data

Currently, we have coded our own reusable fetch service for fetching data from the server but there might be some edge cases that are left out/ not handled efficiently like -

• Caching
• Deduping multiple requests for the same data into a single request
• Updating "out of date" data in the background
• Knowing when data is "out of date"
• Reflecting updates to data as quickly as possible
• Performance optimizations like pagination and lazy loading data
• Managing memory and garbage collection of server state
• Memoizing query results with structural sharing

So we can use react-query that will help us to achieve all this and will also -

• Help remove many lines of complicated and misunderstood code from your application and replace them with just a handful of lines of React Query logic.
• Make your application more maintainable and easier to build new features without worrying about wiring up new server state data sources
• Have a direct impact on your end-users by making your application feel faster and more responsive than ever before.
• Potentially help you save on bandwidth and increase memory performance

Date library moment needed to be replaced

I was reading code and found that we have used moment in a lot of places and it is needed to be replaced as it is being deprecated . can anyone suggest which library we should use instead of moment

Issue with Github logo in Dark-mode

Discription

On the main website there is an issue with the github logo in dark-mode . Github logo is not visible in dark mode because of its black color.

In Light mode

In Dark mode

One can clearly see the difference on the top in both the mode.

Request

Please assign it to me, I will make it to look like this!!!
@Harkishen-Singh @muskankhedia

what happens when there is no selected route on the first render of the App

We currently make a request to query-entity which will fail since no route is selected when the app loads.

The solution may be to render a "No route selected" rather than making a component render

Replace store with zustand

We use https://github.com/jamiebuilds/unstated-next to manage our stores, but this package has some issues with memoization, so we would like to switch to a simple redux implementation such as zustand

[GSoC 2021] Revamping the UI

Tasks and milestones that need to be completed -

• Updating Readme
• Updating boilerplate #3
• Adding Custom theme #3
• Wriiting reusable fetch service #6
• Add MachineSelector component #7
• Add TimeQuerier component #9
• Add RouteSelector component #17
• Add Graph Component #20
• Migrate the dashboard from mock API to backend #21
• Writting tests #4
• Add documentation #28

Create GUIDE.md, CONTRIBUTING.md and CODE_OF_CONDUCT.md

Document everything in an organized way for making it easy for contributors and users to get started with the project.

pre-commit hooks do not work

We have set up husky for the project, but it doesn't work for me smh

Why is chakra ui's "select" component direction upwards in machine selector

I haven't researched more on it, but it can be a good first issue. The solution can be replacing it with a "Menu" component instead

Integrate dashboard with the backend

Currently, we are using mock API for the data instead we need to migrate to the backend of bench routes and ensure proper integration

mock environment for development

Bootstraps the dashboard in a mock environment. Even if the backend is not up and running, you can still use mock data to populate dashboard pages.

Add MachineSelector Component

A component responsible for giving the user option of selecting the machine whose routes and metrics need to be monitored

Code reusable fetch service

Add a reusable fetch service that can be used for making requests

Add Route Selector Component

Add route selector component responsible for rendering,searching and selecting of routes

Add configuration page

Add a page for the configuration of routes to the project. This page will be used to edit the details of existing routes in the config.yml file of the backend. We thought of two ways for implementing this in the frontend-

1. Having a single page with something like a text editor where the user can directly edit the config file.

• Pros: It will be less burdensome for the user if he wants to change multiple routes at once.
• Cons: The user might feel absurd on suddenly seeing an entirely new page without the sidebar.

2. Having an option to switch between the graph and the config page of an individual route.

• Pros: This will have a better UI, and the user can seamlessly use the same sidebar that he was using for getting the graphs of routes, even to edit the routes.
• Cons: This might lead to unnecessary complications in the frontend code.

Note: The proposed design for the second approach could be found here

Add Graph

Add graph showing the queried data corresponding to a route

Remove faker js and use another library

Because What really happened with Aaron Swartz?

Add Time Querier Component

Add a time querier component responsible for setting the start/end time

Add Custom Theme and update boilerplate

Adding of custom color, font and global style that will be used in the project

Check for endTime being an older date than startTime in date picker

data is not consistently fetched on clicking route

I noticed that sometimes on clicking on a particular route, I do not see a network request being made for the new data and the graph for the older data is still shown

Writing unit and e2e tests

Frameworks:

• e2e - puppeteer
• unit - jest

consistent data pattern across all the page components

Based on our useFetch service, the data pattern needs to be consistent across all page components (this is definitely what we need for a more readable and efficient design), for example:

// top level
const {error, loading, data} = useFetch(url)

if (error) return <div className="errorStyles">{error.message}</div>

if (loading && !data) return <div className="loading"><Spinner /></div>

if (!data) return <div>No data for the request</div>

// finally, shows data if everything's alright
return <div>{data.data}</div>