New Job Submission

[Morningssir]

Introduction

The new job submission design will make new attempts in UI design, data storage and css solution. The original page has structural redundancy in expressing job data. The new design idea will introduce redux as the data storage scheme and job-protocol-schema as the data storage format. This will greatly reduce the call and parameter transfer between components and make the structure as clear as possible. At the same time, it will cooperate with the prototype design to complete the construction of the new UI interface. On this basis, the new design plan will try to use a new css solution, combining functional css and styled components to achieve the unification and standardization of styles.

Issues / Motivations

• Redundant representation in job data. JobProtocol is based on job-protocol-schema to represent the overall form of job data, and it is also the carrier of yaml parsing. But in the component, a class of data is also parsed from JobProtocol to represent basic info, taskroles, parameters and secrets
• Complex parameter transfer between components
• Ensure the unity of css style and introduce new related technologies
• Standard definition of css unified theme
• Prototype design issues involved in multiple task roles

Proposals / Solutions

• Introduce redux technology, store data in store, and provide components with direct access to store permissions. Any modification of job-protocol directly requests the corresponding action, triggering the reducer to update the state
• Introduce redux-saga as redux middleware technology to handle async requests
• tachyons+styled system as a css solution. Develop theme according to tachyons standard

Work Plan

• Transfer the original model and utils code
• Build the redux structure, complete the connection between the components and the store, and test the accuracy of data access and action requests
• Rely on the prototype to complete the refactoring of the sidebar. Finish modules such as parameters and environment variables
• Finish form components and complete the construction of job basic info. *responsive issues
• Design the demo of multiple task roles

UI Development Process Check List

• P0 side bar refine
• P0 basic info + task role
• P0 More info (advanced mode)
• yaml editor
• P1 SKU (hived scheduler logic)
• P1 secrets function (including image auth)
• P1 ssh function
• P2 data (team storage)
• P2 save as template

Demo

Test cases

• 1. Test UI interaction
  1. More Info Button
     1. Click the More Info button of Job Information, display the Retry Count form item and the button is displayed as Hide.
     2. Click the More Info button of Task Role, display the Task Retry Count and Completion Policy form items and the button is displayed as Hide.
  2. Sidebar section
     1. Click the sidebar expand button to show the sidebar.
     2. Click the Parameter or PAI environment variables to change the sidebar content.
     3. Click the Sidebar Setting button, show the panel setting modal. Change the selection of sidebar items and click Save button, should correctly change the sidebar items.
• 2. Test responsive UI
  1. When the page width is less than 1200 pixels， hide the left navigation bar.
  2. When the page width is greater than 1024 pixels, the submission page is displayed in three columns.
  3. When the page width is less than 1024 pixels and greater than 832 pixels, the submission page is displayed in two columns.
  4. When the page width is less than 832 pixels, the submission page is displayed in a single column.
• 3. Test create a blank job
  1. test address: http://host/submit_demo.html#/general.
  2. Job Name should starts with the current user and Job Name can be modified correctly.
  3. Default Virtual Cluster should be selected as default and the dropdown list is fetched according to current user.
  4. Retry Count should be 1 by default and Retry Count can be modified correctly.
  5. When change the task role name, the task role tab's name should update meanwhile.
  6. When create a new task role, create a new dockerimage in the prerequisites and when change the dockerImage, should update and merge the dockerImage in prerequisites.
  7. Instances should be 1 in the new task role.
  8. Command should display with placeholder in the new taskrole. Command should be able to start with a blank line.
  9. Task Retry Count should be 1 by default and Task Retry Count can be modified correctly.
  10. Min failed instances should be 1 by default and Min succeed instances should be 1 by default.
  11. Add parameter in parameters. When the key is null, the error message shows Empty Key; when the key is duplicated, the error message shows Duplicated Key.
  12. Click Submit button, check the job protocol in the console window.
• 4. Test clone job
  1. test address: http://host/submit_demo.html?op=resubmit&type=job&user=tiqint&jobName=couplet_training_69563279#/general.
  2. Should display the clone job's value in the submission page.
  3. Click Submit button, check the job protocol in the console window.
• 5. Test marketplace import job.

[yiyione]

1. case 2.ii When the page width is greater than 1024 pixels, the submission page is displayed in three columns.
   Only show 2 columns when show the sidebar.
2. case 3.iv Retry Count should be 1 by default and Retry Count can be modified correctly.
   Default retry count is 0.
3. case 3.ix Task Retry Count should be 1 by default and Task Retry Count can be modified correctly.
   Default task retry count is 0.