Skip to content
This repository has been archived by the owner on Jun 6, 2024. It is now read-only.

Commit

Permalink
[Web Portal] Align job submit page's submission section to task role …
Browse files Browse the repository at this point in the history 
…card's text field #3065
  • Loading branch information
@sunqinzheng
sunqinzheng authored Jul 4, 2019
1 parent cec6c7d commit 3c1c478
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 36 deletions.
3 changes: 2 additions & 1 deletion src/webportal/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"@babel/preset-react": "^7.0.0",
"@hapi/joi": "^15.1.0",
"@hapi/joi": "~15.1.0",
"@webcomponents/custom-elements": "^1.2.1",
"admin-lte": "~2.4.2",
"app-root-path": "~2.0.1",
Expand Down Expand Up @@ -85,6 +85,7 @@
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-monaco-editor": "^0.25.1",
"react-responsive": "^7.0.0",
"regenerator-runtime": "^0.13.2",
"rimraf": "~2.6.2",
"sass-loader": "~6.0.6",
Expand Down
6 changes: 5 additions & 1 deletion src/webportal/src/app/job-submission/components/basic-section.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,8 +82,12 @@ export const BasicSection = (props) => {
);
};

BasicSection.defaultProps = {
sectionLabel: '',
};

BasicSection.propTypes = {
sectionLabel: PropTypes.string.isRequired,
sectionLabel: PropTypes.string,
sectionTooltip: PropTypes.node,
children: PropTypes.node,
sectionOptional: PropTypes.bool,
Expand Down
119 changes: 87 additions & 32 deletions src/webportal/src/app/job-submission/components/submission-section.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@
* SOFTWARE.
*/

import PropTypes from 'prop-types';
import {isNil, debounce, isEqual, isEmpty, cloneDeep} from 'lodash';
import React, {useState, useRef, useEffect, useContext} from 'react';
import MediaQuery from 'react-responsive';
import {
Stack,
DefaultButton,
Expand All @@ -49,9 +52,8 @@ import {
removePreCommandsFromProtocolTaskRoles,
} from '../utils/utils';
import Context from './context';

import PropTypes from 'prop-types';
import {isNil, debounce, isEqual, isEmpty, cloneDeep} from 'lodash';
import {BasicSection} from './basic-section';
import {FormShortSection} from './form-page';

const JOB_PROTOCOL_SCHEMA_URL =
'https://github.com/microsoft/pai/blob/master/docs/pai-job-protocol.yaml';
Expand Down Expand Up @@ -231,39 +233,92 @@ export const SubmissionSection = (props) => {
}
};

const widthBreakpoint = 1550;

return (
<Card>
<Stack horizontal gap='s1' horizontalAlign='center'>
<PrimaryButton onClick={_submitJob} disabled={!isEmpty(errorMessages)}>
Submit
</PrimaryButton>
<DefaultButton
onClick={_openEditor}
styles={{root: {marginRight: spacing.l2}}}
>
Edit YAML
</DefaultButton>
<DefaultButton onClick={_exportYaml}>Export</DefaultButton>
<DefaultButton>
<Label styles={{root: importButtonStyle.label}}>
{'Import'}
<input
type='file'
style={importButtonStyle.input}
accept='.yml,.yaml'
onChange={_importFile}
{/* large - align with task role card (simulate the top section taskrole-sidebar layout) */}
<MediaQuery minWidth={widthBreakpoint}>
<Stack horizontal gap='l1'>
<StackItem grow styles={{root: {minWidth: 600, flexBasis: 0}}}>
<BasicSection>
<Stack horizontal gap='l1'>
<FormShortSection>
<Stack horizontal horizontalAlign='space-between'>
<Stack horizontal gap='s1'>
<PrimaryButton onClick={_submitJob} disabled={!isEmpty(errorMessages)}>
Submit
</PrimaryButton>
<DefaultButton
onClick={_openEditor}
>
Edit YAML
</DefaultButton>
</Stack>
<Stack horizontal gap='s1'>
<DefaultButton onClick={_exportYaml}>Export</DefaultButton>
<DefaultButton>
<Label styles={{root: importButtonStyle.label}}>
{'Import'}
<input
type='file'
style={importButtonStyle.input}
accept='.yml,.yaml'
onChange={_importFile}
/>
</Label>
</DefaultButton>
</Stack>
</Stack>
</FormShortSection>
<Stack horizontal verticalAlign='center' gap='s1'>
<div>Advanced</div>
<Toggle
styles={{root: {margin: 0}}}
checked={advanceFlag}
onChange={onToggleAdvanceFlag}
/>
</Stack>
</Stack>
</BasicSection>
</StackItem>
<div style={{width: 550}}></div>
</Stack>
</MediaQuery>
{/* small screen - center */}
<MediaQuery maxWidth={widthBreakpoint-1}>
<Stack horizontal gap='s1' horizontalAlign='center'>
<PrimaryButton onClick={_submitJob} disabled={!isEmpty(errorMessages)}>
Submit
</PrimaryButton>
<DefaultButton
onClick={_openEditor}
styles={{root: {marginRight: spacing.l2}}}
>
Edit YAML
</DefaultButton>
<DefaultButton onClick={_exportYaml}>Export</DefaultButton>
<DefaultButton>
<Label styles={{root: importButtonStyle.label}}>
{'Import'}
<input
type='file'
style={importButtonStyle.input}
accept='.yml,.yaml'
onChange={_importFile}
/>
</Label>
</DefaultButton>
<Stack horizontal padding='0 0 0 s1' verticalAlign='center' gap='s1'>
<div>Advanced</div>
<Toggle
styles={{root: {margin: 0}}}
checked={advanceFlag}
onChange={onToggleAdvanceFlag}
/>
</Label>
</DefaultButton>
<Stack horizontal padding='0 0 0 s1' verticalAlign='center' gap='s1'>
<div>Advanced</div>
<Toggle
styles={{root: {margin: 0}}}
checked={advanceFlag}
onChange={onToggleAdvanceFlag}
/>
</Stack>
</Stack>
</Stack>
</MediaQuery>
<MonacoPanel
isOpen={isEditorOpen}
onDismiss={_closeEditor}
Expand Down
30 changes: 28 additions & 2 deletions src/webportal/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -708,7 +708,7 @@
resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.0.1.tgz#9712fa2ad124ac64668ab06ba847b1eaf83a03fd"
integrity sha512-cctMYH5RLbElaUpZn3IJaUj9QNQD8iXDnl7xNY6KB1aFD2ciJrwpo3kvZowIT75uA+silJFDnSR2kGakALUymg==

"@hapi/joi@^15.1.0":
"@hapi/joi@~15.1.0":
version "15.1.0"
resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-15.1.0.tgz#940cb749b5c55c26ab3b34ce362e82b6162c8e7a"
integrity sha512-n6kaRQO8S+kepUTbXL9O/UOL788Odqs38/VOfoCrATDtTvyfiO3fgjlSRaNkHabpTLgM7qru9ifqXlXbXk8SeQ==
Expand Down Expand Up @@ -2577,6 +2577,11 @@ css-loader@^2.1.1:
postcss-value-parser "^3.3.0"
schema-utils "^1.0.0"

css-mediaquery@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
integrity sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=

css-select-base-adapter@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
Expand Down Expand Up @@ -4347,6 +4352,11 @@ https-browserify@^1.0.0:
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=

hyphenate-style-name@^1.0.0:
version "1.0.3"
resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==

iconv-lite@0.4.23:
version "0.4.23"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
Expand Down Expand Up @@ -5267,6 +5277,13 @@ marked@^0.3.9, marked@~0.3.9:
resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.19.tgz#5d47f709c4c9fc3c216b6d46127280f40b39d790"
integrity sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg==

matchmediaquery@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.3.0.tgz#6f672bcdbc44de16825c6917fbcdcfb9b82607b1"
integrity sha512-u0dlv+VENJ+3YepvwSPBieuvnA6DWfaYa/ctwysAR13y4XLJNyt7bEVKzNj/Nvjo+50d88Pj+xL9xaSo6JmX/w==
dependencies:
css-mediaquery "^0.1.2"

md5.js@^1.3.4:
version "1.3.5"
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
Expand Down Expand Up @@ -6690,7 +6707,7 @@ promise-inflight@^1.0.1:
resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=

prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
Expand Down Expand Up @@ -6895,6 +6912,15 @@ react-monaco-editor@^0.25.1:
monaco-editor "^0.16.0"
prop-types "^15.7.2"

react-responsive@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-7.0.0.tgz#0abde0ccbb50e5e8407e3d61dd4696447e7ebd3c"
integrity sha512-RukaKD+UI/MIR+P8eUgVGURfiCafRvvcVnq41scT0eEQWHwDGliH/OAlrwIr1oyz8aKLGroZa+U8mTZV5ihPfA==
dependencies:
hyphenate-style-name "^1.0.0"
matchmediaquery "^0.3.0"
prop-types "^15.6.1"

react@^16.8.3:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
Expand Down

0 comments on commit 3c1c478

Please sign in to comment.