Challenge Overview
App environment:
- Meteor Javascript application: https://www.meteor.com/
Basic requirements for this challenge:
- Continue build desktop native app with Meteor Javascript as the main framework
- Polish existing meteor app
- Need to use dynamic JSON Schema form to render the application layout.
- All data can use static values, we will running another challenge that will able to process some client standard configuration files
Thor PDU Mass Commissioning - Overview
A PDU (Power Distribution Unit) is a device fitted with multiple outputs designed to distribute electric power, especially to racks of computers and networking equipment located within a data center. The PDU Mass Commissioning tool that we are designing will allow users to create configuration files and networking capabilities for PDUs in a system. The app will allow for the necessary configuration parameters needed for operation within the system. Once all of the configuration parameters have been set within the app, users will be able to "export" the files to a USB drive, which will be plugged into the PDUs to be commissioned.
The PDU Mass Commissioning tool will be a simple user interface that allows customers to create all of the necessary configuration files to configure all of their PDUs. The app will have a variable number of input fields for all the configuration parameters in which users will enter their desired configurations. Once they have entered all of the configuration parameters they will click "export" and the application will build the configuration file hierarchy into a chosen USB drive.
Standard User Flow
- Meteor Javascript App
- Angular Meteor Integration
Deployment environment requirements
- Your submission need build as desktop native app that will working on these required OS:
- Windows
- Mac OS
- Linux
Design Assets: https://drive.google.com/open?id=1PfNVY-oRHew5DbkMm2msYNMASoLuSgoy
Ragnar Link Registration: https://ragnar.topcoder.com/api/v1/gitlab/groups/registration/d42d6843-1342-4ff0-9e15-36c6e4bd095f-1542418825700
Base of App Updates: https://gitlab.com/thor-pducomm/meteor-app
General Requirements
- This will be built as desktop native application using: https://www.meteor.com/
- A Meteor application is a mix of JavaScript that runs inside a client web browser, JavaScript that runs on the Meteor server inside a Node.js container, and all the supporting HTML fragments, CSS rules, and static assets.
- Check this page about guide how to build javascript apps and website using Meteor: https://www.meteor.com/developers
- You MUST use the Meteor integration with AngularJS. Getting started here:
https://www.meteor.com/tutorials/angular/creating-an-app
https://angular-meteor.com/
- We need you use the Material Design Styling on this desktop app. Feel free to suggest any good library as long they are open source
- Current application need support BASIC vs EXPERT view. Check fields reference here: docs.google.com/spreadsheets/d/1-hRjswJ-_mbxEevogFPnaRZJkKoAvl8EMFieB0CZHRk/edit?usp=sharing
- Check each required pages explained below based on storyboard screens
- Important, You also must use sample file configurations that need to use with the desktop application.
Individual Requirements
1). Pre-Setup Thor PDU Mass Commissioning Tool Application
- Application need support data model render before specified JSON Schema file:
- All pages, navigation, label, input, logic, rules need taken from JSON Schema file: Data-model-descriptor.json
- Application need able to set path to get the configuration
- Application need detect the structure and then render the application layout/elements/rules etc based on the values.
- Check the Data Model Descriptor sample here: https://drive.google.com/open?id=1Zal3qOhWXpgBoZZjd_8lxbr5PrcOOq_p
- Important: This file is created based on old application. With the new winning storyboard design, we need you create proper content and level per required pages. Keep some existing rules.
- This is web reference about Dynamic JSON form to build the application:
https://codeburst.io/reactjs-a-quick-tutorial-to-build-dynamic-json-based-form-a4768b3151c0
http://brutusin.org/json-forms/
- The rendered elements in page need follow existing storyboard styling.
2). Fix existing storyboard
- in the General settings screen, the multiple firmware images selection is now implemented but the Browse button and the Drag and Drop indication are lost as soon as a file has been uploaded. Instead, we should have these functions always accessible (for multiple upload purpose)
- In the Asset management wizard, it is not possible to delete multiple selected devices (probably not implemented yet ?)
- The "select all" function should only apply to the devices visible in the wizard
- Make sure all Basic VS Expert match the required fields: docs.google.com/spreadsheets/d/1-hRjswJ-_mbxEevogFPnaRZJkKoAvl8EMFieB0CZHRk/edit?usp=sharing
- Compare all page with storyboard design. We need complete fixes for all pages.
- Important: Right now app only running on browser, for this challenge you need make sure it running with no error as desktop application.
3). Asset Management
3).2). Network Infrastructure
- This is Network Infrastructure tab (Screenshot: 18_network infrastructure.png)
- Notice the layout changes when expand/collapse the sidebar to show up the device table. Follow storyboard structure (Screenshot: 19_network infrastructure_expanded.png)
- User can change each devices network infrastructure
- Need able to expand the and collapse by click the + or - buttons (Screenshot: 20_network infrastructure_EXPERT_expanded.png)
- Match fields on storyboard
- This is the Basic Mode look. Some fields are hidden (Screenshot: 21_network infrastructure_BASIC_expanded.png)
- TODO: Update the fields based on original document
BASIC
- IPv4
-- Protocol IPv4
-- DHCP
-- Subnet Mask
-- Gateway address
-- Hostname
-- Domain name
- DNS
-- Primary DNS
- SMTP
-- SMTP Server
-- SMTP Port
-- SMTP Server Authentication
-- Login
-- Password
-- Sender Address
- Globale Settings
-- Format
-- Time Zone
- Date & Time
-- Daylight Saving Time
-- Time Server NTP
- Email Notification Settings
-- Email Receiver
-- Description
-- Status
-- On Event
EXPERT
ALL FIELDS & SECTION TITLE
3).3). Protocols
- This is the expanded right sidebar look for Protocol tab (Screenshot: 22_protocols_EXPERT_expanded.png)
- This is Basic mode look (Screenshot: 23_protocols_BASIC_expanded.png)
- Match fields based on storyboard.
BASIC
- SNMP General
-- SNMP Version
-- SNMP Port
-- SNMP Trap Port
-- Community name 1
-- Access
-- Community name 2
-- Access
-- User Name
-- Access
-- Security Level
-- Authentication Password
-- Privacy key
- Trap Notification Settings
-- Trap Receiver 1 Name
-- Trap Receiver 1 Protocol
-- Trap Receiver 1 IP Address
-- Trap Receiver 1 Community
-- Trap Receiver 1 On event
EXPERT
ALL FIELDS & SECTION TITLE
3).4). Power / Environment
- This is the expanded right sidebar look for Power/Environment tab (Screenshot: 24_power-environment_EXPERT_expanded.png)
- This is Basic mode look (Screenshot: 25_power-environment_BASIC_expanded.png)
- Match fields based on storyboard.
- TODO: Update the fields based on original document
BASIC
- Environment
-- Environment temperature
- Overview ePDU Settings
-- Name
-- Feed Name
EXPERT
ALL FIELDS & SECTION TITLE
4). Export
- Export page will be the area to export the configuration files based on what the user filled out in the previous steps (Screenshot: 26_export.png)
- When the user plugs in a USB drive, there should be some type of indication showing that that either the USB is ok or an error message showing that it is not properly formatted
- Shows a list of the PDUs being configured and commissioned
- Create some expandable by click the + or - buttons
- Show same table format for each row
- This is when click Export to USB Button (Screenshot: 27_export_progress.png)
5). After Commissioning
- This is After Commissioning screen Screenshot: 28_after commissioning.png
- After the user has commissioned the PDUs, they can plug the USB back into their desktop and view the commissioning status. The status would be either “Successful” or “Unsuccessful”
- On top placed the selected USB
- Each section “Successful” or “Unsuccessful” need able to expand/collapse
- There’s a Restore old configuration button placed on top.
- Click each row need show the related overview (Screenshot: 29_after commissioning_Unsuccessful.png)
- This screen when click the USB Drive USB (Screenshot: 30_after commissioning_dropdown.png)
- This is when user click the Successful device (Screenshot: 31_after commissioning_Successful.png)
- Click Restore old configuration need load this modal window (Screenshot: 32_after commissioning_restore_confirmation.png)
- This is when user click the expanded area (Screenshot: 33_after commissioning_expanded.png)
- Show complete list of read-only data (Screenshot: 34_after commissioning_expanded_FULL.png)
- Updated source code
- Challenge winner need send Merge Request to our repo
- README in markup language
- Meteor Javascript application: https://www.meteor.com/
Basic requirements for this challenge:
- Continue build desktop native app with Meteor Javascript as the main framework
- Polish existing meteor app
- Need to use dynamic JSON Schema form to render the application layout.
- All data can use static values, we will running another challenge that will able to process some client standard configuration files
Thor PDU Mass Commissioning - Overview
A PDU (Power Distribution Unit) is a device fitted with multiple outputs designed to distribute electric power, especially to racks of computers and networking equipment located within a data center. The PDU Mass Commissioning tool that we are designing will allow users to create configuration files and networking capabilities for PDUs in a system. The app will allow for the necessary configuration parameters needed for operation within the system. Once all of the configuration parameters have been set within the app, users will be able to "export" the files to a USB drive, which will be plugged into the PDUs to be commissioned.
The PDU Mass Commissioning tool will be a simple user interface that allows customers to create all of the necessary configuration files to configure all of their PDUs. The app will have a variable number of input fields for all the configuration parameters in which users will enter their desired configurations. Once they have entered all of the configuration parameters they will click "export" and the application will build the configuration file hierarchy into a chosen USB drive.
Standard User Flow
- User creates a CSV file from a provided template offline, and from outside of the application.
- User opens Mass Commissioning app and goes to the general settings page
- User clicks "upload configuration" button and selects the CSV file that was created outside of the app.
- User goes to general settings configuration.
- User goes to Network Infrastructure settings and inputs necessary configurations. See the provided spreadsheet for the settings and configurations sample data. The items highlighted in Blue are the configurations for Basic mode and are always present. The other items in White are expert features and depending on the PDU type, some of these will be shown on the app. So just pick a few when designing for Expert mode.
- User goes to Asset Management. A table displays all of the devices which were loaded from the CSV file in step 3. If no template has been loaded, the user will start from an empty wizard and add devices manually. The user configures each device’s specific settings by clicking the device and configuring the settings on the additional section which comes up for that device. See the spreadsheet for the sample data. The items highlighted in Blue are the configurations for Basic mode and are always present. The other items in White are expert features and dependant on the PDU type. So just pick a few when designing for Expert mode.
- User goes to Export screen and confirms there are no validation issues.
- User clicks the "Export" button and selects the USB drive they are exporting to
- Application saves all configuration elements to a CSV file in a local application folder
- Application converts the saved CSV file into the proper folder and file structure on the user's selected drive/folder
- Application prompts user when export is complete
- User unplugs the USB drive they exported to and plugs it into each of the PDUs that need to be configured
- When the user finishes with all of the PDU configurations, they plug the USB drive back into their computer, and opens the Mass Commissioning App.
- User goes to the Post-Configuration screen and clicks the "View Commissioning Logs" button which brings them to a folder selection on the USB drive
- The application loads a table of all the devices from the folder structure and analyzes the log file. The table displays each of the Device Serial/MAC addresses and Commissioning Status, which shows Green/Yellow/Red icons for Success/Not Commissioned (no log)/Error Commissioning.
- User views a detailed log file displayed below the table, for the devices with errors to see error messages.
- Meteor Javascript App
- Angular Meteor Integration
Deployment environment requirements
- Your submission need build as desktop native app that will working on these required OS:
- Windows
- Mac OS
- Linux
Design Assets: https://drive.google.com/open?id=1PfNVY-oRHew5DbkMm2msYNMASoLuSgoy
Ragnar Link Registration: https://ragnar.topcoder.com/api/v1/gitlab/groups/registration/d42d6843-1342-4ff0-9e15-36c6e4bd095f-1542418825700
Base of App Updates: https://gitlab.com/thor-pducomm/meteor-app
General Requirements
- This will be built as desktop native application using: https://www.meteor.com/
- A Meteor application is a mix of JavaScript that runs inside a client web browser, JavaScript that runs on the Meteor server inside a Node.js container, and all the supporting HTML fragments, CSS rules, and static assets.
- Check this page about guide how to build javascript apps and website using Meteor: https://www.meteor.com/developers
- You MUST use the Meteor integration with AngularJS. Getting started here:
https://www.meteor.com/tutorials/angular/creating-an-app
https://angular-meteor.com/
- We need you use the Material Design Styling on this desktop app. Feel free to suggest any good library as long they are open source
- Current application need support BASIC vs EXPERT view. Check fields reference here: docs.google.com/spreadsheets/d/1-hRjswJ-_mbxEevogFPnaRZJkKoAvl8EMFieB0CZHRk/edit?usp=sharing
- Check each required pages explained below based on storyboard screens
- Important, You also must use sample file configurations that need to use with the desktop application.
Individual Requirements
1). Pre-Setup Thor PDU Mass Commissioning Tool Application
- Application need support data model render before specified JSON Schema file:
- All pages, navigation, label, input, logic, rules need taken from JSON Schema file: Data-model-descriptor.json
- Application need able to set path to get the configuration
- Application need detect the structure and then render the application layout/elements/rules etc based on the values.
- Check the Data Model Descriptor sample here: https://drive.google.com/open?id=1Zal3qOhWXpgBoZZjd_8lxbr5PrcOOq_p
- Important: This file is created based on old application. With the new winning storyboard design, we need you create proper content and level per required pages. Keep some existing rules.
- This is web reference about Dynamic JSON form to build the application:
https://codeburst.io/reactjs-a-quick-tutorial-to-build-dynamic-json-based-form-a4768b3151c0
http://brutusin.org/json-forms/
- The rendered elements in page need follow existing storyboard styling.
2). Fix existing storyboard
- in the General settings screen, the multiple firmware images selection is now implemented but the Browse button and the Drag and Drop indication are lost as soon as a file has been uploaded. Instead, we should have these functions always accessible (for multiple upload purpose)
- In the Asset management wizard, it is not possible to delete multiple selected devices (probably not implemented yet ?)
- The "select all" function should only apply to the devices visible in the wizard
- Make sure all Basic VS Expert match the required fields: docs.google.com/spreadsheets/d/1-hRjswJ-_mbxEevogFPnaRZJkKoAvl8EMFieB0CZHRk/edit?usp=sharing
- Compare all page with storyboard design. We need complete fixes for all pages.
- Important: Right now app only running on browser, for this challenge you need make sure it running with no error as desktop application.
3). Asset Management
3).2). Network Infrastructure
- This is Network Infrastructure tab (Screenshot: 18_network infrastructure.png)
- Notice the layout changes when expand/collapse the sidebar to show up the device table. Follow storyboard structure (Screenshot: 19_network infrastructure_expanded.png)
- User can change each devices network infrastructure
- Need able to expand the and collapse by click the + or - buttons (Screenshot: 20_network infrastructure_EXPERT_expanded.png)
- Match fields on storyboard
- This is the Basic Mode look. Some fields are hidden (Screenshot: 21_network infrastructure_BASIC_expanded.png)
- TODO: Update the fields based on original document
BASIC
- IPv4
-- Protocol IPv4
-- DHCP
-- Subnet Mask
-- Gateway address
-- Hostname
-- Domain name
- DNS
-- Primary DNS
- SMTP
-- SMTP Server
-- SMTP Port
-- SMTP Server Authentication
-- Login
-- Password
-- Sender Address
- Globale Settings
-- Format
-- Time Zone
- Date & Time
-- Daylight Saving Time
-- Time Server NTP
- Email Notification Settings
-- Email Receiver
-- Description
-- Status
-- On Event
EXPERT
ALL FIELDS & SECTION TITLE
3).3). Protocols
- This is the expanded right sidebar look for Protocol tab (Screenshot: 22_protocols_EXPERT_expanded.png)
- This is Basic mode look (Screenshot: 23_protocols_BASIC_expanded.png)
- Match fields based on storyboard.
BASIC
- SNMP General
-- SNMP Version
-- SNMP Port
-- SNMP Trap Port
-- Community name 1
-- Access
-- Community name 2
-- Access
-- User Name
-- Access
-- Security Level
-- Authentication Password
-- Privacy key
- Trap Notification Settings
-- Trap Receiver 1 Name
-- Trap Receiver 1 Protocol
-- Trap Receiver 1 IP Address
-- Trap Receiver 1 Community
-- Trap Receiver 1 On event
EXPERT
ALL FIELDS & SECTION TITLE
3).4). Power / Environment
- This is the expanded right sidebar look for Power/Environment tab (Screenshot: 24_power-environment_EXPERT_expanded.png)
- This is Basic mode look (Screenshot: 25_power-environment_BASIC_expanded.png)
- Match fields based on storyboard.
- TODO: Update the fields based on original document
BASIC
- Environment
-- Environment temperature
- Overview ePDU Settings
-- Name
-- Feed Name
EXPERT
ALL FIELDS & SECTION TITLE
4). Export
- Export page will be the area to export the configuration files based on what the user filled out in the previous steps (Screenshot: 26_export.png)
- When the user plugs in a USB drive, there should be some type of indication showing that that either the USB is ok or an error message showing that it is not properly formatted
- Shows a list of the PDUs being configured and commissioned
- Create some expandable by click the + or - buttons
- Show same table format for each row
- This is when click Export to USB Button (Screenshot: 27_export_progress.png)
5). After Commissioning
- This is After Commissioning screen Screenshot: 28_after commissioning.png
- After the user has commissioned the PDUs, they can plug the USB back into their desktop and view the commissioning status. The status would be either “Successful” or “Unsuccessful”
- On top placed the selected USB
- Each section “Successful” or “Unsuccessful” need able to expand/collapse
- There’s a Restore old configuration button placed on top.
- Click each row need show the related overview (Screenshot: 29_after commissioning_Unsuccessful.png)
- This screen when click the USB Drive USB (Screenshot: 30_after commissioning_dropdown.png)
- This is when user click the Successful device (Screenshot: 31_after commissioning_Successful.png)
- Click Restore old configuration need load this modal window (Screenshot: 32_after commissioning_restore_confirmation.png)
- This is when user click the expanded area (Screenshot: 33_after commissioning_expanded.png)
- Show complete list of read-only data (Screenshot: 34_after commissioning_expanded_FULL.png)
Final Submission Guidelines
Deliverables- Updated source code
- Challenge winner need send Merge Request to our repo
- README in markup language