refine submit job UI page

src/webportal/src/app/job-submission/components/data/custom-storage.jsx

@@ -1,19 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {FontClassNames, FontWeights} from 'office-ui-fabric-react';
+import {FontClassNames, FontWeights, getTheme} from 'office-ui-fabric-react';
 import c from 'classnames';
 
 import {AddDataSource} from './add-data-source';
 import {MountList} from './custom-mount-list';
 import {InputData} from '../../models/data/input-data';
-import t from '../../../../app/components/tachyons.scss';
 
+const {spacing} = getTheme();
 export const CustomStorage = ({dataList, setDataList, setDataError}) => {
   return (
     <div>
       <div
-        className={c(FontClassNames.mediumPlus, t.pv3)}
-        style={{fontWeight: FontWeights.semibold}}
+        className={c(FontClassNames.mediumPlus)}
+        style={{fontWeight: FontWeights.semibold, paddingBottom: spacing.m}}
       >
         Customized Storage
       </div>

src/webportal/src/app/job-submission/components/data/data-component.jsx

@@ -1,5 +1,6 @@
 import React, {useCallback, useReducer, useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
+import {Stack} from 'office-ui-fabric-react';
 
 import {TeamStorage} from './team-storage';
 import {CustomStorage} from './custom-storage';
@@ -15,9 +16,10 @@ import {
   fetchStorageServer,
 } from '../../utils/conn';
 import config from '../../../config/webportal.config';
+import {JobData} from '../../models/data/job-data';
+import {Hint} from '../sidebar/hint';
 
 const host = getHostNameFromUrl(config.restServerUri);
-import {JobData} from '../../models/data/job-data';
 
 function reducer(state, action) {
   let jobData;
@@ -50,7 +52,10 @@ export const DataComponent = React.memo((props) => {
   const {onChange} = props;
   const [teamConfigs, setTeamConfigs] = useState();
   const [defaultTeamConfigs, setDefaultTeamConfigs] = useState();
-  const [dataError, setDataError] = useState({customContainerPathError: false, customDataSourceError: false});
+  const [dataError, setDataError] = useState({
+    customContainerPathError: false,
+    customDataSourceError: false,
+  });
   const [jobData, dispatch] = useReducer(
     reducer,
     new JobData(hdfsClient, [], null),
@@ -134,30 +139,39 @@ export const DataComponent = React.memo((props) => {
         title='Data'
         selected={props.selected}
         onSelect={props.onSelect}
-        error={dataError.customContainerPathError || dataError.customDataSourceError}
+        error={
+          dataError.customContainerPathError || dataError.customDataSourceError
+        }
       >
-        {teamConfigs && (
-          <TeamStorage
-            teamConfigs={teamConfigs}
-            defaultTeamConfigs={defaultTeamConfigs}
-            mountDirs={jobData.mountDirs}
-            onMountDirChange={onMountDirChange}
+        <Stack gap='m'>
+          <Hint>
+            The data configured here will be mounted or copied into job
+            container. You could use them with <code>{'Container Path'}</code>{' '}
+            value below.
+          </Hint>
+          {teamConfigs && (
+            <TeamStorage
+              teamConfigs={teamConfigs}
+              defaultTeamConfigs={defaultTeamConfigs}
+              mountDirs={jobData.mountDirs}
+              onMountDirChange={onMountDirChange}
+            />
+          )}
+          <CustomStorage
+            dataList={jobData.customDataList}
+            setDataList={_onDataListChange}
+            setDataError={setDataError}
           />
-        )}
-        <CustomStorage
-          dataList={jobData.customDataList}
-          setDataList={_onDataListChange}
-          setDataError={setDataError}
-        />
-        <MountTreeView
-          dataList={
-            jobData.mountDirs == null
-              ? jobData.customDataList
-              : jobData.mountDirs
-                  .getTeamDataList()
-                  .concat(jobData.customDataList)
-          }
-        />
+          <MountTreeView
+            dataList={
+              jobData.mountDirs == null
+                ? jobData.customDataList
+                : jobData.mountDirs
+                    .getTeamDataList()
+                    .concat(jobData.customDataList)
+            }
+          />
+        </Stack>
       </SidebarCard>
     </HdfsContext.Provider>
   );

src/webportal/src/app/job-submission/components/data/mount-tree-view.jsx

@@ -133,7 +133,7 @@ export const MountTreeView = ({dataList}) => {
   return (
     <div className={c(t.mb3)}>
       <div className={c(t.flex, t.itemsCenter)}>
-        <div className={c(FontClassNames.mediumPlus)} style={{fontWeight: FontWeights.semibold}}>Preview Mounted Files</div>
+        <div className={c(FontClassNames.mediumPlus)} style={{fontWeight: FontWeights.semibold}}>Preview Container Paths</div>
       </div>
       <TreeNode label={treeData.label} isVisible subpaths={treeData.subpaths} />
     </div>

src/webportal/src/app/job-submission/components/data/team-storage.jsx

@@ -24,14 +24,15 @@
  */
 
 import React, {useEffect, useState} from 'react';
-import {Stack, Checkbox, FontClassNames, FontWeights} from 'office-ui-fabric-react';
+import {Stack, Checkbox, FontClassNames, FontWeights, getTheme} from 'office-ui-fabric-react';
 import c from 'classnames';
 import PropTypes from 'prop-types';
 import {cloneDeep} from 'lodash';
 
 import {MountDirectories} from '../../models/data/mount-directories';
 import {TeamMountList} from './team-mount-list';
-import t from '../../../../app/components/tachyons.scss';
+
+const {spacing} = getTheme();
 
 export const TeamStorage = ({
   teamConfigs,
@@ -92,8 +93,8 @@ export const TeamStorage = ({
       return (
         <div>
           <div
-            className={c(FontClassNames.mediumPlus, t.pb2)}
-            style={{fontWeight: FontWeights.semibold}}
+            className={c(FontClassNames.mediumPlus)}
+            style={{fontWeight: FontWeights.semibold, paddingBottom: spacing.m}}
           >
             Team Share Storage
           </div>

src/webportal/src/app/job-submission/components/sidebar/parameters.jsx

@@ -30,31 +30,35 @@ import {Hint} from './hint';
 import {SidebarCard} from './sidebar-card';
 import {KeyValueList} from '../controls/key-value-list';
 
-export const Parameters = React.memo(({parameters, onChange, selected, onSelect}) => {
-  const [error, setError] = useState(false);
-  return (
-    <SidebarCard
-      title='Parameters'
-      selected={selected}
-      onSelect={onSelect}
-      error={error}
-    >
-      <Stack gap='m'>
-        <Hint>
-          You could reference these parameters in command by <code>{'<% $parameters.paramKey %>'}</code>
-        </Hint>
-        <div>
-          <KeyValueList
-            name='Parameter List'
-            value={parameters}
-            onChange={onChange}
-            onDuplicate={setError}
-          />
-        </div>
-      </Stack>
-    </SidebarCard>
-  );
-});
+export const Parameters = React.memo(
+  ({parameters, onChange, selected, onSelect}) => {
+    const [error, setError] = useState(false);
+    return (
+      <SidebarCard
+        title='Parameters'
+        selected={selected}
+        onSelect={onSelect}
+        error={error}
+      >
+        <Stack gap='m'>
+          <Hint>
+            You could reference these parameters in command by{' '}
+            <code>{'<% $parameters.paramKey %>'}</code>. For sensitive data, please refer to <code>{'Secrets'}</code>{' '}
+            section. For default reserved parameters, please refer to <code>{'PAI Environment Variables'}</code>{' '} section.
+          </Hint>
+          <div>
+            <KeyValueList
+              name='Parameter List'
+              value={parameters}
+              onChange={onChange}
+              onDuplicate={setError}
+            />
+          </div>
+        </Stack>
+      </SidebarCard>
+    );
+  },
+);
 
 Parameters.propTypes = {
   parameters: PropTypes.array.isRequired,