VEE: UI Prototype

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 analyse 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 the previous challenge we created a POC of the waterfall view. In this phase we are looking for you to create a UI prototype based on the given design.

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

The resolution to support is: (1378x768 & above). 

The overall layout should cover the entire screen with the left “Outline view” section having fixed width & the both right sections should have a fluid width.

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)

 

Business Requirements

Resources

Following resources are provided:

• Base react application to start with.

• Log files: These are present in the “docs” folder of the given application.

• Design source Provided in the forum

• Design handoff/marvel: https://marvelapp.com/prototype/fc40947/screens  

 

Initially the application should appear similar to  this: https://marvelapp.com/prototype/fc40947/screen/74862829 

There shouldn't be any loading progress icon, instead show a center-aligned text “Please select log file to visualize” in each of three views. Font-size is up to you. Color & font-family should be the same as it’s for the “Search...” text

1. Menu bar

The menu bar has following components:

• File -> Open file to load log files. Clicking this should open the log files. Ref the given app.

  • If two files are selected at a time then the file tab-name should show “Filename1.log, filename2.log”. The width of filename tabs should be fixed. Implement ellipsis & on hovering show the complete text.

• Find: Clicking the find should focus the search section on the “Debug log view”. Pressing shortcuts “Ctrl + F”(Windows) or “Command + F” (mac) should also do the same.

• View: Checking/unchecking checkboxes in this section should expand/collapse the associated section.

• Preferences: Clicking the “Color config.” opens the color modal: https://marvelapp.com/prototype/fc40947/screen/74862832

• Preferences: Import/export color settings links are explained below.

• Preferences: Clear local-storage should clear the local-storage & reset the three views.

• About: Clicking this should open the about modal.

2. Opening a File & File navigation bar

When a new file is loaded from the file menu, a new filename link item is added to the file-navigation bar. The parsed file content should also be saved in the local-storage. In the given application you can notice the parsed file content is printed in the console window https://i.imgur.com/dcJHLJv.png , the same content should be saved. 

• Clicking an existing file name should load the content of that file from local-storage & update the three views (Outline, debug log & water fall).

• Clicking the close “x” button should close the file & clear its content from the local-storage. The first filename should be automatically selected if the active file is closed. If the file-nav bar contains no more files then reset the view to initial state.

2. Waterfall view

This view is already implemented. Add a loading spinner to this section when the parsing of the log file is in progress.

• Update the layout (not content) of this section to exactly match the storyboard.

2. Outline view

The outline view content should also use the same parsed content that’s used in the waterfall view.

• A checkbox is added to every node. Unchecking the checkbox should grey out the line as in the storyboard.

• Duration column should show the duration in ms similar to the waterfall view.

• The search & go to line.. Functions should trigger at the text change event of the textbox.

 

Search & Go to line is out of scope. Only implement the ui for this.

 

3. Debug log view

Similar to the other two views, this view should also use the same parsed content to populate the table content.

Implement Filtering & Sorting the table.

 

• Hardcode the content for the section “DB: IINFO, callouts….”

• Search & Go to line is out of scope. Only implement the UI for this.

• The function of the copy icon is also out of scope. Only implement the UI.

4. Expanding/collapsing views

Clicking the arrow icons in the title bar of each view should expand/collapse the associate section. https://marvelapp.com/prototype/fc40947/screen/74862824 

5. Refreshing the webpage

On refreshing the webpage the content & state of the web page should be retained using the content saved in the local storage.

In the debug log view the sorting & filtering config should also be retained.

6. Switching another log file

On switching tto another log file. The sorting & table filtering config should also be retained.

 

6. Coloring

The colors of the bars depend on event types in the “Waterfall view”. In the “Debug log view” should also use the same colors for the row text.

Define Color

Ref: https://marvelapp.com/prototype/fc40947/screen/74862832

Clicking the “Color configure” opens the color “Define color” modal: https://marvelapp.com/prototype/fc40947/screen/74862833

• This should list all the colors defined in “colors.js > strokeColorByType”  section. 

• There should also be a default color in the config. 

• If no color is defined for an event type then it should have the default color. The bars in the waterfall view should also have the default color.

• The stroke color of bars in waterfall-view should have the event color defined in “strokeColorByType” 

• The Fill color of bars  should have 50% opacity of the event color defined in “strokeColorByType”. E.g if stroke color is #fc7221 [rgb(252, 114, 33)] then the fill color should be rgba(252, 114, 33, 0.5) 

• 

Adding/Editing Color

Using the define color modal should be able to edit the existing color of an event and add the color config of a new event. To know the event types refer to the existing submission.

A user should be able to enter any text in the event textbox irrespective of the fact that the event exists or not.

Import/Export Color

Functional implementation of this is out of scope. Only implement the UI. Clicking these should do nothing.

Final Submission Guidelines

Submit a zip container containing:

• Source code of the ReactJS application

• Readme.md/Instructions to run the code.

• No need to submit any verification video.