Challenge Overview
Welcome to Styx Dashboard Configuration Updates UI Prototype Challenge
For this UI Prototype challenge, we need your help update existing prototype by follow all requirements described in challenge spec. Pay attention to all update tasks, in some point you might need adjust the updates based on your judgement.
FYI: Existing prototype use fluid layout on Desktop and Tablet Platform. As part of this challenge task you need make sure every pages running okay in required browsers
Final Submission Guidelines
Attachment Files
Full-Configuration-UI-Prototype.zip - Existing UI Prototype as Base Updates
Important!
- This UI Prototype challenge tasks are only described in this challenge specification
- Make sure your submission still run okay in required Desktop and Tablet platform
- You can ignore existing CSS and HTML validation error
- There might be final fixes for winner about configuration prototype in some sections after client review
UI Prototype Update List:
1. System Overview Page
page to update: system-overview-page.html
- All headings should be in sentence case. For example: “Area utilization” instead of “Area Utilization”
- The main System Overview page is a system snap shot of the current day and does not require the date picker below. Please remove the date picker and blue bar (screenshot: 1.png)
- The FailedRPC is a numerical count now a %. Please change to numerical count the "2" text only, ".04%" should remain as it is (screenshot: 2.png)
- The Area utilization should not have two numerical counts. It should only have one count which is the actual value of access events on the configured readers. Please remove the “/” and the second numerical count. (screenshot: 3.png)
- Change “TOTAL SYSTEM COUNTS” below to “ONGUARD COUNTS” (screenshot: 4.png)
2. Area utilization page
page to update: area-utilization.html
- The area utilization should not have two numerical counts. It should only have one count which is the actual value of access events on the configured readers. Please remove the “/” and the second numerical count. (screenshot: 5.png)
3. OnGuard Server Page
page to update: onGuard-server.html
- Change the “New badges created per day” below to “Badges created PER DAY” (screenshot: 6a.png). Also change the type face for “per day” as shown below. (screenshot: 6b.png)
- Remove the orange horizontal line from all line graphs as below. (screenshot: 7.png)
- Make the grey text and icons darker, hard to see on monitor. This needs to be done on all alerts popups throughout the application. (screenshot: 8.png)
- Change “Onguard” to “OnGuard” below on all occurrences within the application. (screenshot: 9.png)
- Change “Onguard alarm” to “OnGuard alarms” (screenshot: 9.png)
- Change “Onguard credentials by type” to “OnGuard badges BY TYPE” (screenshot: 10.png)
- Change “Onguard credentials by status” to “OnGuard badges BY STATUS” (screenshot: 11.png)
- Change the “Service monitor to “OnGuard services” and move to full screen width. (screenshot: 12.png)
- Change the “Error log monitor” to “OnGuard error logs” and move to full screen width (screenshot: 12.png)
- These two graphs should be vertically stacked, same as other graphs on this page. (screenshot: 12.png)
- “Service monitor” should match the same style color and placement as the “Security KPI” below. (screenshot: 13.png)
4. Database Server Page
page to update: database-servers.html
- Remove the Database log monitor graph from the application (screenshot: 14.png)
- Change “Database service monitor” to “Database services” and move to full screen width (screenshot: 15.png)
- Move “Database size growth” to full screen width. (screenshot: 15.png)
- These two graphs should be vertically stacked, same as other graphs on this page. (screenshot: 15.png)
- “Database services” should match the same style color and placement as the “Security KPI” below. (screenshot: 16.png)
- Change “Database server performance monitor” to “Database metrics” (screenshot: 17.png)
- Change line graph to same style as “System performance graphs” and remove the data point circles. (screenshot: 17.png)
5. Communication Server Page
page to update: east-coast-communication-server.html, mid-atlantic-communication-server.html and system-overview-page.html
- Remove the below two graphs below from the page. (screenshot: 18.png)
- Change “Communication server error monitor” to “Communication server statistics” (screenshot: 19.png)
- Change “Communication server log growth” to “Communication server error logs” (screenshot: 19.png)
- Move “Communication server statistics” and “Communication server error logs” to full screen width. (screenshot: 19.png)
- These two graphs should be vertically stacked, same as other graphs on this page. (screenshot: 19.png)
- Change “Onguard alarm” to “OnGuard alarms” (screenshot: 20.png)
6. Configuration Pages
page to update: all pages > click "Gear" icon on top of page.
General Tab
- Remove Area Utilization Monitor from the tab. The configuration for new areas should only be done from the threshold configuration screen. (screenshot: 21.png)
- The “Area Utilization” tab under “Thresholds Configuration" should have the same half circle threshold graphs as the rest of the pages. The user should also be able to view the Area configurations for each graph by selecting a “view configuration” or similar located next to each graph. (screenshot: 22.png)
- The error threshold should not be able to be less than the warning threshold. The warning threshold should be automatically moved to equal the error threshold. (screenshot: 23.png)
- The manual changing on the circles by dragging them is very difficult and inconsistent. (screenshot: 23.png)
- Move “Trend Configuration” to the general tab (screenshot: 24.png)
- Remove Error log configuration from the left navigation. The configuration for new Error logs should only be done from the threshold configuration screen for each server. (screenshot: 25.png)
- The threshold configuration should show all communication servers configured in the OnGuard database. After selecting the “communication server” another navigation bar is presented with the existing configured communication servers. (screenshot: 26.png)
- Remove “Total System counts” and “System Overview” under “Threshold Configurations”. There are not thresholds to configure for Total System counts. (screenshot: 27.png)
- The unconfirmed threshold is shown with a grey half circle but there is no way to begin configuring a threshold for it. The system must allow the user to add the thresholds for each half circle configurator. (screenshot: 28.png)
- We need put Enable button to activate the threshold. Once enabled, the user should be able to set the thresholds.
- Remove “Processor” from System Performance” threshold configuration for the OnGuard Server. (screenshot: 29.png)
- The OnGuard services should have a category called “OnGuard Services” and all the thresholds for the services should be contained in that category and should not have their own minimize arrow. Show indentation for children levels. (screenshot: 30.png)
- Change “Error Log Monitor” to “OnGuard error logs” (screenshot: 30.png)
- Remove the following items from the OnGuard error logs: Error Name, Date Created, Memory, Status, Active under each graph threshold and the date created under each graph threshold. (screenshot: 31.png)
- Change “memory” counter to show file size growth size in MB. (screenshot: 32.png)
- "Database Service Monitor" should show the following services under thresholds. Existing prototype services should be removed. Example: The instance name on the server screenshot is “MSSQL SERVER (screenshot: 33.png)
-- SQL Server (<instancename>)
-- SQL Server Agent (<instancename>)
-- SQL Server Browser
-- SQL Server VSS Writer
-- SQL Full-text Filter Daemon Launcher (<Instancename>) running SQL 2014
- Change all service references from “Crashes” to “Restarts” throughout the application. (screenshot: 34.png)
- Remove “Database log monitor” threshold since the graph was deleted from the Database page. (screenshot: 35.png)
- Rename “Connection” to “Connections” (screenshot: 36.png)
- Rename “Lock Wait Time” to “Processes” (screenshot: 36.png)
- Add another threshold for “Sessions” (screenshot: 37.png)
- Add another threshold for “Cursors” (screenshot: 37.png)
- Change “Hardware Counts” to “Hardware counts”
- Change “Access Panel” to “Access Panels”
- Change “Input” to “Inputs”
- Change “Output” to “Outputs”
- Change “Communication Server Error Monitor” to “Communication server statistics”.
- Change “Comm Server Log Growth” to “Communication server error logs”
- Modify the “Communication server error logs” to match the changes as outlined under the “OnGuard error logs” section above. Remove the following items from the Communication server error logs.
- Error Name, Date Created, Memory, Status, Active under each graph threshold and the date created under each graph threshold.
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
CODE REQUIREMENTS:
HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
Windows & Mac OS
- Safari latest version
- Firefox latest version
- Chrome latest version
Tablet/Mobile
- Safari Browsers on iPad (Landscape and Portrait View)