Challenge Overview
Welcome to “REPOST!! Mnemosyne – Array Layout Prototype Challenge”. The main task of this competition is to develop a HTML5 prototype based on the provided storyboard designs. The prototype must follow our coding standards and our guidelines.
The goal of this challenge to to create UI Prototype for our UI/UX Array Layout, which displays information about the disks in a storage array. It will be used in a web application that allows users to plan and configure a new array. The Array Layout will display information about the storage array's model, enclosures, slots, disks, and storage pools. Users will be able to select and drag and drop parts of the layout to perform specific configuration tasks.
It will appear in the main content section of the browser window, sometimes the full section, sometimes in a split view with the Array Layout in the top portion and a table with related data in the bottom half. It may also appear by itself in a print-friendly view. Please read more details below for our details requirements :
General Requirements :
- Provide hover condition for links and button.
- Documented your codes for any specific javascript function.
- Make sure your UI Prototype consistent in all required browser
- Please read our coding standard and documentation to get better understanding about our codes expectation.
- If you want to use javascript framework, please use jquery 1.11.0 version.
- Check "VNXE-ArrayLayoutDesignandPrototype-190214-2101-86.pdf" for any interaction needed in the prototype.
- Minimize/Normal button, will hidden/show drives information (2_LUNs-06-scrolled.png and 2_LUNs-07-small-drivers-only-for-LUNs.png)
- Pay attention to the enclosure arrangement. Each array has one or more enclosures. There is no maximum number of enclosures, but in practice the number of enclosures is limited by the maximum number of supported disks. The enclosures currently supported or expected may have 12, 15, 25, 60, or 120 slots that each hold one disk. Enclosures with up to 25 slots are currently represented as a single row. Enclosures with 60 or 120 disks are represented with rows or "banks" of 12 drives each. A 60 disk enclosure will have 5 banks; a 120 disk enclosure will have 10 banks. For reference, each bank is assigned a letter, starting with "A."There are 3 pages that needs to be built, they are :
1. Array Layout Page
- When the entire Array Layout can not be shown in the available space, both vertical and horizontal scroll-bars will be used. (1_Array-01.png, 1_Array-12-hor-scroll.png, 1_Array-13-vert-scroll.png)
- User can move and re-ordered each enclosure. (1_Array-02-reorder.png)
- User can drag and drop each drives to any enclosure and pools. (1_Array-03-swap-1.png, 1_Array-04-swap-2.png, 1_Array-05-swap-3.png, 1_Array-06-swap-4.png)
- User can insert drives between existing drives in other enclosure (1_Array-07-insert.png)
- User can swap the existing drives with their selection. (1_Array-08-swap.png, 1_Array-09-swap-done.png).
- When user swaps drives and the drives configuration not match each other, user cannot perform swap and some alert will appear (1_Array-10-swap-alert.png)
- Add enclosure button will create new empty enclosure in the array layout content.
- User can see the array content in full view by clicking the expand/collapes button in sidebar (1_Array-14-full-screen.png)
2. LUN's Page
- This page will show LUN's content in split view (array layout and table layout). User can arrange percentages of the display by drag and drop separator between array and table layout (2_LUNs-01.png)
- each row in the luns table can be moved and inserted to array pool. (2_LUNs-02-drag-LUNs-to-pool.png)
- Selecting the pool will show luns information in the table (2_LUNs-03-select-pool-to-see-LUNs.png), release the pool by clicking in any area on the screen and the LUN's will show unconfigured LUN's item.
- User can see the LUN's content in full view by clicking the expand/collapes button in sidebar (2_LUNs-04-full-screen.png, please note the sidebar in screenshot is wrong, it's needs to be hidden in full view)
3. Storage Pools Page
- Pools page will be shown like 3_Pools-01.png
- Pools must have drag and drop features (3_Pools-02-drag-pool.png)
- Pools can be inserted to any enclosure.
- Pools that want to replace any existing pools must have same slot, otherwise, it will trigger an alert and the swap action cannot be done. (3_Pools-03-drag-alert.png)
Additional Screens :
- Show us screen variation for 1920px width (4_1920_Array-01-empty.png, 4_1920_Array-02-full.png, 4_1920_Array-03-swap.png, 4_1920_Array-04-one-color.png, 4_1920_LUNs-01.png)
- Create a new css, js and html pages for the additional screens.
NOTES : For drag and drop features, you can use jquery plugin like gridster (http://gridster.net/) or else, however, please confirm first in forum if you want to use another plugin.
Following are specific requirements for HTML, CSS and Javascript files:
- As your references, we provides you with several code design guidelines from our previous project. Use this as your code references and follow the prototype standards.
- Your HTML code must be HTML5 Compliant. Note that this doesn't imply use of any HTML 5 features. If any HTML 5 features are used they must either be supported by all of the browsers above or there must be an alternative way of achieving the same functionality.
- 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.
- 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 tabular data and not for page layout.
- No inline CSS styles, all styles must be placed in an external stylesheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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".
- 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. You are allowed to use the JQuery JavaScript library for this contest.
- All elements that will eventually need to be accessible for automated testing (e.g. any type of input) must have the 'id' attribute set.
Your submission must works on browser in the list below:
- Latest Firefox
- Latest Chrome
Attachment : All download files (storyboard, documentation, codes example, and coding references can be found in challenge forum)
Final Submission Guidelines
N/A