Register
Submit a solution
The challenge is finished.

Challenge Overview

BASIC REQUIREMENTS
  • Continue fix desktop native app by following challenge requirements
  • Replace static data and connecting with JSON-server Mockup API
  • Must not breaking unit testing after updates based on Sonarqube result
  • Need support Sonarqube for Code quality
  • Testing desktop native app on required Operation System

CHALLENGE GOAL
The goal of this challenge is to build native desktop app that allows the user to configure a set of devices that are included in a particular customer order.

PROJECT BACKGROUND
  • This application is used to configure a set of devices that are included in a particular customer order.
  • The user starts by entering the order number.
  • The application queries the API and retrieves the order details.
  • These details include a list of individual devices that are used to populate the devices list. The details for each device are also fetched from the API.
  • Each of these devices needs to be configured before the order is complete.
  • Devices are configured by navigating to the device details page and clicking the Configure button.

CHALLENGE ASSETS
Technology Stack
  • Electron and the Forge: https://electronforge.io/
  • ReactJS
  • JSON-Server

OS Requirements
IMPORTANT: Your submission need build as desktop native app that will work on these required OS:
  • Windows 7
  • Windows 10
  • Mac

Submission Requirements
A). Fix Issues from previous challe ge
  • Run 'npx jest --coverage', (here's the output => https://prnt.sc/p8bd45), Right now tests cover 5 out of 16 pages & components (31%) and the coverage data shows that around half of the code is being executed when running the tests.
    • Your updated code need cover minimum 90%
  • As part of this challenge, you also need support integration testing when pull data from Mockup API
  • When build Mac and Windows installer, we need able to set the version example: 0.0.1Remove shadow behind the header bar
  • On Login page, remove shadow behind x button and Sign in button
  • On Locate Order page, remove shadow behind Sign in button
  • On Search Result page
    • remove shadow behind Configure button. Disable the link to show the configuration flow
    • Remove the hover state on satus buttons
    • Whole row need clickable to take to details page
  • On Device Detail, remove the hover state on Configuration Details

B). Mock API for order/device information
General Mock API Requirements
Individual Mock API  Requirements
1). Login
API endpoint: POST /api/login
  • Need accept this parameters:
    • Email Address
    • Password
    • Application ID
  • On return with http code 200 you get a token valid for 1 HOUR.
    • Need auto redirect to Locate page if success
  • This login endpoint api can also return 401 unauthorized or 403 account locked out
    • Use existing validation error and success message from PXBlue Design system
  • Forgot password can be dead link
  • Make sure this login endpoint automatically covered all different scenarios like on Postman collections
  • IMPORTANT: In the mockup app we need to pass the token in every API endpoint calls. App needs to monitor for expiration of token.
    • Before expiration call RefreshTokenApi with username and old token as parameters.  Normally you would refresh every 55 minutes or so to make sure you don’t time out.
    • You can display the message in app if token expired.
2). Locate Page
API endpoint: GET /api/devices
  • This is the Locate page, the user is presented with a search field:
    • The Order Number and Item Number fields should accept any alphanumeric input
    • Order Number should be limited to 10 characters
    • Item Number should be limited to 5 characters
    • Search button should be disabled until a valid Order Number is entered
  • When searching the order, an API request should be made to retrieve the details for that order.
  • Make sure this endpoint automatically covered all different parameters and scenarios like on Postman collections
  • Use preloader while retrieve data from API
  • And need auto redirect to Device List Result screen explained below

3). Device List Result
API endpoint: GET /api/devices
  • After retrieving the details for the specified Order Number, the screen shall display a list of devices associated with that order
  • Make sure this endpoint automatically covered all different parameters and scenarios like on Postman collections
  • For Show location dropdown, use this endpoint: GET /api/structures
  • User need able to filter device list data based on Show location dropdown and Search input. Notice there’s number counter for each Location. By default it need show “All Structures" dropdown
    • This is endpoint example when change location dropdown: GET api/devices?orderNum=abc1234567&itemNum=xyz01&structureId=2
    • This is endpoint example when search within specific field : GET {{apiBaseUri}}/devices?orderNum=abc1234567&itemNum=xyz01&page=1&perpage=5&sort=id&order=desc&structureId=3&model_like=PXG&family_like=meter&compartment_like=star&ip_like=10.240&subnet_like=255&subnet=255.255.255.0
  • Search input need able to change to these options for specific search target
    • By Device Name
    • By Device ID
    • By Device Family
    • By Device Model
    • By Device Compartment
    • By IP Address
    • By Subnet
  • Device List need use table layout, table need able to sort for each column.
    • You need call endpoint that use sort. Example: GET api/devices?orderNum=abc1234567&itemNum=xyz01&page=1&perpage=5&sort=deviceStatus&order=asc
  • Each device on the page will have a status field which will contain either a description of any current errors, or a Configuration Button.
  • Clicking the Configure button in the device list row will trigger the configuration workflow for selected device

4). Device Detail
API endpoint: POST /api/devices/{id}
  • Clicking the Device Name will open a device details page
  • This page shows assorted information about the selected device
  • The design for this page has been changed from what is in the workflow video refer to DeviceDetails.jpg for reference.
  • Clicking the Configure button on the details page will trigger the Configure workflow
  • Create modal window that show connecting status
  • Show flow when there is Failed to Connect error message
  • Retry need reload the connecting status
  • Match data values need displayed like video reference

5). Configure Device
API endpoint: POST /api/devices/{id}/config/{id}

Important Notes:
the last API section (config_device) is not needed.  The configuration is done locally, so there is no expected call back to an API to figure out if the steps were successful.
We can mock that up in the app itself with a predefined timeout.. for example 5 seconds
 
Class Steps
{
        Public bool Config_Device_Step1 (bool failed = false)
        {
                Thread.Sleep(xxxx)
                Return !failed
        }
}
 
Or something along those lines.
  • The configuration workflow should open in a modal dialog/overlay
  • There are 4 steps in the configuration that should be shown in a stepper
  • Create flow when there is issue detected
  • Notice on the right sidebar there are quick buttons for:
    • Return to this order: This will go back to previous device list
    • Locate a new order: This need take user to Locate page
  • At each step, a description of what is occurring should be shown below the stepper
    • For this sample application, you may use a timer to automate progress through the steps (~5 seconds per step)
    • For this sample application, you need to show the successful and error conditions.
  • Once the configuration process is complete, the configuration button for that device on the Locate page should be replaced with a Configured badge.
    • This should include an API call to update the status of the device in the database. After a device is configured, it’s information in the database should be updated with the proper status and update timestamp.
    • Create different sample data for error and success configuration like displayed on video demo

C). Sonarqube
  • Sonarqube need use docker
  • Follow the instruction to install Sonarqube below
2. 1. Install and Run Sonarqube
By docker:
```
docker pull sonarqube
docker run -d --name sonarqubeThorPDU -p 9000:9000 -p 9092:9092 sonarqube:latest
```
Or Download from https://www.sonarqube.org/downloads/ and follow the guide here: https://docs.sonarqube.org/latest/setup/get-started-2-minutes/

After run the Sonarqube server, you can get instruction page in http://localhost:9000 with admin/admin credential. Create new project for this Thor DC Starter

Restore all files from attached sonarqube-quality-profiles to the Sonarqube server.

Make sure you change correct profile to use from Project Administration menu

Need install these plugins from Administration > Marketplace menu to make all rules show up:
* AEM-Rules-for-SonarQube
* sonar-findbugs

2. 2. Analyzing the code
```
sonar-scanner \
  -Dsonar.projectKey=thor-pdu \
  -Dsonar.sources=. \
  -Dsonar.host.url=http://localhost:9000 \
  -Dsonar.login=130106910eb98a25e826310e0ba30dec68750ed6
```

Replace with correct login token from sonarqube on http://localhost:9000 when you create a new project to be tested. Now you can check the analyzing result at http://localhost:9000/dashboard

You need to fix these types of Issues:
- Bug
- Vulnerability
- Code Smell

You need to fix these type of Severity:
- Blocker
- Critical
- Major

Fix any issues based on the sonarqube result. Follow instructions to fix for each issues
- Let us know if you have any questions/clarifications about the Sonarqube.

Final Submission Guidelines

Deliverables
  • Updated source code that implement the challenge requirements.
  • Include Windows and Mac installer in your submission, use different version ex: 0.0.2
  • Challenge winner need to send MR to our repo
  • README in markup format contains all deployment detail steps

 

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30102972