Use extras to save team-storage selection (#3814)

Use extras to save team-storage selection When clone job, the team storage will be selected base on previous job. If from old job format or create new job, default team storage will be mounted
microsoft · Nov 11, 2019 · 379a462 · 379a462
1 parent 649200b
commit 379a462
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 18 deletions.
diff --git a/src/webportal/src/app/job-submission/components/data/data-component.jsx b/src/webportal/src/app/job-submission/components/data/data-component.jsx
@@ -19,6 +19,7 @@ import config from '../../../config/webportal.config';
 import { JobData } from '../../models/data/job-data';
 import { Hint } from '../sidebar/hint';
 import { PROTOCOL_TOOLTIPS } from '../../utils/constants';
+import { isNil } from 'lodash';
 
 function reducer(state, action) {
   let jobData;
@@ -65,8 +66,9 @@ export const DataComponent = React.memo(props => {
     port,
     apiPath,
   );
-  const { onChange } = props;
+  const { onChange, storageConfigs } = props;
   const [teamConfigs, setTeamConfigs] = useState();
+  const [teamServers, setTeamServers] = useState();
   const [defaultTeamConfigs, setDefaultTeamConfigs] = useState();
   const [dataError, setDataError] = useState({
     customContainerPathError: false,
@@ -83,15 +85,11 @@ export const DataComponent = React.memo(props => {
     listUserStorageConfigs(user)
       .then(configNames => {
         fetchStorageConfigs(configNames).then(configs => {
-          const defaultConfigs = [];
           let serverNames = new Set();
 
           for (const config of configs) {
             if (config.mountInfos === undefined) continue;
 
-            if (config.default === true) {
-              defaultConfigs.push(config);
-            }
             for (const mountInfo of config.mountInfos) {
               serverNames = new Set([...serverNames, mountInfo.server]);
             }
@@ -108,26 +106,43 @@ export const DataComponent = React.memo(props => {
               };
               servers.push(server);
             }
-
-            const mountDirectories = new MountDirectories(
-              user,
-              props.jobName,
-              defaultConfigs,
-              servers,
-            );
-
+            setTeamServers(servers);
             setTeamConfigs(configs);
-            setDefaultTeamConfigs(defaultConfigs);
-            onMountDirChange(mountDirectories);
           });
         });
       })
       .catch(e => {
         setDefaultTeamConfigs(null);
+        setTeamServers(null);
         setTeamConfigs(null);
       });
   }, []);
 
+  useEffect(() => {
+    if (isNil(teamConfigs)) return;
+
+    const user = cookies.get('user');
+
+    let defaultConfigs;
+    if (storageConfigs === undefined) {
+      defaultConfigs = teamConfigs.filter(config => config.default === true);
+    } else {
+      defaultConfigs = teamConfigs.filter(
+        config => storageConfigs.indexOf(config.name) > -1,
+      );
+    }
+
+    const mountDirectories = new MountDirectories(
+      user,
+      props.jobName,
+      defaultConfigs,
+      teamServers,
+    );
+
+    setDefaultTeamConfigs(defaultConfigs);
+    onMountDirChange(mountDirectories);
+  }, [storageConfigs, teamConfigs]);
+
   const _onDataListChange = useCallback(
     dataList => {
       dispatch({ type: 'dataList', value: dataList, onChange: onChange });
@@ -192,4 +207,5 @@ DataComponent.propTypes = {
   onSelect: PropTypes.func,
   jobName: PropTypes.string,
   onChange: PropTypes.func.isRequired,
+  storageConfigs: PropTypes.array,
 };
diff --git a/src/webportal/src/app/job-submission/components/data/team-storage.jsx b/src/webportal/src/app/job-submission/components/data/team-storage.jsx
@@ -69,6 +69,13 @@ export const TeamStorage = ({
     });
   });
 
+  useEffect(() => {
+    const names = defaultTeamConfigs.map(element => {
+      return element.name;
+    });
+    setSelectedConfigNames(names);
+  }, [defaultTeamConfigs]);
+
   const [teamDetail, setTeamDetail] = useState({ isOpen: false });
   const openTeamDetail = config => {
     setTeamDetail({ isOpen: true, config: config, servers: mountDirs.servers });
@@ -100,7 +107,7 @@ export const TeamStorage = ({
           <Checkbox
             key={item.name}
             label={item.name}
-            defaultChecked={
+            checked={
               selectedConfigNames.length > 0 &&
               selectedConfigNames.includes(item.name)
             }

diff --git a/src/webportal/src/app/job-submission/job-submission-page.jsx b/src/webportal/src/app/job-submission/job-submission-page.jsx
@@ -57,7 +57,7 @@ import {
 } from './utils/utils';
 import { SpinnerLoading } from '../components/loading';
 import config from '../config/webportal.config';
-import { PAI_PLUGIN } from './utils/constants';
+import { PAI_PLUGIN, PAI_STORAGE } from './utils/constants';
 
 const SIDEBAR_PARAM = 'param';
 const SIDEBAR_SECRET = 'secret';
@@ -121,6 +121,7 @@ export const JobSubmissionPage = ({
 
   // Context variables
   const [vcNames, setVcNames] = useState([]);
+  const [storageConfigs, setStorageConfigs] = useState(undefined);
   const [errorMessages, setErrorMessages] = useState({});
 
   const setJobTaskRoles = useCallback(
@@ -305,8 +306,10 @@ export const JobSubmissionPage = ({
         updatedExtras[PAI_PLUGIN] = updatedPlugin;
         setExtras(updatedExtras);
       }
+
+      setStorageConfigs(get(extras, PAI_STORAGE));
     }
-  }, []);
+  }, [extras]);
 
   useEffect(() => {
     const taskRolesManager = new TaskRolesManager(jobTaskRoles);
@@ -427,6 +430,7 @@ export const JobSubmissionPage = ({
                     onSelect={selectData}
                     jobName={jobInformation.name}
                     onChange={setJobData}
+                    storageConfigs={storageConfigs}
                   />
                   <ToolComponent
                     selected={selected === SIDEBAR_TOOL}

diff --git a/src/webportal/src/app/job-submission/utils/constants.js b/src/webportal/src/app/job-submission/utils/constants.js
@@ -155,6 +155,8 @@ export const DEFAULT_DOCKER_URI = 'openpai/tensorflow-py36-cu90';
 // For PAI runtime only
 export const PAI_PLUGIN = 'com.microsoft.pai.runtimeplugin';
 
+export const PAI_STORAGE = 'pai.storage';
+
 export const SSH_KEY_BITS = 1024;
 
 export const USERSSH_TYPE_OPTIONS = [

diff --git a/src/webportal/src/app/job-submission/utils/utils.js b/src/webportal/src/app/job-submission/utils/utils.js
@@ -12,6 +12,7 @@ import {
   TENSORBOARD_CMD_END,
   TENSORBOARD_LOG_PATH,
   AUTO_GENERATE_NOTIFY,
+  PAI_STORAGE,
 } from './constants';
 
 const HIDE_SECRET = '******';
@@ -192,6 +193,16 @@ export async function populateProtocolWithDataCli(user, protocol, jobData) {
     protocol.name || '',
   );
   addPreCommandsToProtocolTaskRoles(protocol, preCommands);
+
+  if (protocol.extras) {
+    if (isEmpty(jobData.mountDirs.selectedConfigs)) {
+      protocol.extras[PAI_STORAGE] = [];
+    } else {
+      protocol.extras[PAI_STORAGE] = jobData.mountDirs.selectedConfigs.map(
+        config => config.name,
+      );
+    }
+  }
 }
 
 function removeTagSection(commands, beginTag, endTag) {