VEE: Log visualiser using Waterfall view

In our client’s production environment, the developers have limited access to existing debug tools (i.e. Developer Console). Furthermore, existing debug logs are verbose, requiring train eyes to quite find and interpret issues.

To improve the ability of developers to analyze debug logs in environments such as SIT and Production, without a dependency on elevated privileges we will be creating a developer tool/application that is going to analyze the log files at different levels & provide a visualization of the events happening in the application. The dev tools/application should also present a tabular view of the events happening.

In this phase, we are looking for you to create an application that reads the log file, parse it to get relevant data & draw a waterfall view chart.

Note: The challenge has an internal review. The results will be based on the review done by th

Technology Stack

• ReactJS

• CSS/SCSS

• D3

• NodeJS

General requirements

Code Formatting

• Make sure code is well documented, all classes, methods, variables, parameters, return values must be documented in every single code file, and appropriate inline comments should be provided too where the code is not straightforward to understand.

• Please use clean INDENTATION for all the code so future developers can follow the code.

• Use appropriate linter to validate your code.

JAVASCRIPT SPECIFIC

• Code written in JavaScript should pass the lint Validation.

LAYOUT

It’s a POC application. The layout doesn’t matter a lot. The overall layout can be simple and should work on the required platforms. The resolution to support is: (1378x768 & above). 

In order to keep application layout simple, third party layout libs like bootstrap, material theme, etc. are not allowed.

PLATFORM

The application should support Chrome, FireFox & IE Edge (Chromium)

REFERENCES:

• https://dhtmlx.com/docs/products/dhtmlxGantt/04_baselines.html 

• https://github.com/DHTMLX/gantt 

• https://github.com/jsGanttImproved/react-jsgantt 

• https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsText

• https://web.dev/read-files 

 

Please note that only MIT & BSD licensed frameworks/libs can be used. Using a licenced framework/lib will result in disqualification.

 

Business Requirements

Resources

Following resources are provided:

• Log files: Provided in the forum

1. Reading log files

On the webpage create a “Open Log” button. Clicking button should allow a user to upload *.log files (Multiple log files can be opened at a time).

On selecting the provided log files the application should parse the log file in a form that can be used to draw the waterfall view chart. After parsing, print the parsed output in the console window using console.log(....) 

2. Waterfall View

Waterfall view wireframe

 

The waterfall chart must render in a <svg> tag.

• The waterfall lists a series of functions and their corresponding execution times. The execution time is represented as a bar. A longer bar indicates a longer execution time.

• A user can expand parent elements (that house multiple execution units) to reveal more detailed and itemised breakdown of the timings.

• The user can customize the visible length of the waterfall (in seconds). Where the overall execution exceeds the visible length, the waterfall will become scrollable in a horizontal direction.

• When the user scrolls towards the right, the corresponding function element remains visible

 

The waterfall items should display only events associated to: [CODE_UNIT_STARTED, CODE_UNIT_FINISHED], [METHOD_ENTRY, METHOD_EXIT], [SOQL_EXECUTE_BEGIN, SOQL_EXECUTE_END]

 

Refer these for more details on the error format: https://help.salesforce.com/articleView?id=code_setting_debug_log_levels.htm&type=5 

 

Final Submission Guidelines

Submit a zip container containing:

• Source code of the ReactJS application

• Readme.md/Instructions to run the code.