Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix issue of template save and delete not working with azure blob and optimize the user experience of template #655

Merged
merged 3 commits into from
Nov 13, 2019
Merged

Fix issue of template save and delete not working with azure blob and optimize the user experience of template #655

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
68dd103
Fix issue of template save and delete not working with azure blob and…
Nov 13, 2019
8049d0d
Optimize the user experience of template operation
Nov 13, 2019
4a3e927
change the label for building with
Nov 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/dashboard/src/pages/Jobs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -593,7 +593,7 @@ const Jobs: React.FC = (props: any) => {
padding:'3',
},render: rowData => <Link className={classes.linkStyle} to={`/job/${selectedTeam}/${rowData.cluster}/${rowData.jobId}`}>{rowData.jobId}</Link> },
{title: 'Job Name', field: 'jobName',cellStyle: {
textAlign:'center',
textAlign:'left',
flexDirection: 'row',
padding:'0',
}},
Expand Down Expand Up @@ -1247,7 +1247,7 @@ const Jobs: React.FC = (props: any) => {
padding:'3',
},field: 'jobId', render: rowData => <Link className={classes.linkStyle} to={`/job/${selectedTeam}/${rowData.cluster}/${rowData.jobId}/${selectedTeam}`}>{rowData.jobId}</Link> },
{ title: 'Job Name',cellStyle: {
textAlign:'center',
textAlign:'left',
flexDirection: 'row',
padding:'0',
},field: 'jobName'},
Expand Down
2 changes: 1 addition & 1 deletion src/dashboard/src/pages/SignIn/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const SignIn: React.FC<RouteComponentProps> = ({ history }) => {
<Typography variant="body2">
{"Built with "}
<span role="img" aria-label="heart">❤️</span>
{" by ..."}
{" by Bing DLTS"}
</Typography>
</Grid>
</Grid>
Expand Down
128 changes: 119 additions & 9 deletions src/dashboard/src/pages/Submission/Training.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ import {
SUCCESSFULTEMPLATEDELETE, SUCCESSFULTEMPLATEDSAVE
} from "../../Constants/WarnConstants";
import {DLTSSnackbar} from "../CommonComponents/DLTSSnackbar";
import _ from "lodash";

interface EnvironmentVariable {
name: string;
Expand Down Expand Up @@ -194,6 +195,34 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
const onAdvancedClick = () => {
setAdvanced(!advanced);
}
const [accountName, setAccountName] = React.useState("");
const [accountKey, setAccountKey] = React.useState("");
const [containerName, setContainerName] = React.useState("");
const [mountPath, setMountPath] = React.useState("");
const onAccountNameChange = React.useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
setAccountName(event.target.value);
},
[setAccountName]
)
const onAccountKeyChange = React.useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
setAccountKey(event.target.value);
},
[setAccountKey]
)
const onContainerNameChange = React.useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
setContainerName(event.target.value);
},
[setContainerName]
)
const onMountPathChange = React.useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
setMountPath(event.target.value);
},
[setMountPath]
)

const [workPath, setWorkPath] = React.useState("");
const onWorkPathChange = React.useCallback(
Expand Down Expand Up @@ -278,7 +307,7 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
// const onDatabaseClick = React.useCallback(() => {
// setDatabase(true);
// }, []);
const onDatabaseClick = () => {
const onTemplateClick = () => {
setDatabase(!database);
}

Expand Down Expand Up @@ -316,6 +345,14 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
}, [gpuModel, selectedTeam, name, image, command, type, gpus, gpusPerNode]);
const onSaveTemplateClick = async () => {
try {
let plugins: any = {};
plugins['blobfuse'] = [];
let blobfuseObj: any = new Object();
blobfuseObj['accountName'] = accountName || '';
blobfuseObj['accountKey'] = accountKey || '';
blobfuseObj['containerName'] = containerName || '';
blobfuseObj['mountPath'] = mountPath || '';
plugins['blobfuse'].push(blobfuseObj);
const template = {
name,
type,
Expand All @@ -333,10 +370,12 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
ssh,
ipython,
tensorboard,
plugins
};
const url = `/teams/${selectedTeam}/templates/${saveTemplateName}?database=${saveTemplateDatabase}`;
await saveTemplate(url, template);
setSaveTemplate(true)
window.location.reload()
} catch (error) {
alert('Failed to save the template, check console (F12) for technical details.')
console.error(error);
Expand All @@ -345,6 +384,14 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
const [showDeleteTemplate, setShowDeleteTemplate] = useState(false)
const onDeleteTemplateClick = async () => {
try {
let plugins: any = {};
plugins['blobfuse'] = [];
let blobfuseObj: any = new Object();
blobfuseObj['accountName'] = accountName || '';
blobfuseObj['accountKey'] = accountKey || '';
blobfuseObj['containerName'] = containerName || '';
blobfuseObj['mountPath'] = mountPath || '';
plugins['blobfuse'].push(blobfuseObj);
const template = {
name,
type,
Expand All @@ -362,10 +409,12 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
ssh,
ipython,
tensorboard,
plugins,
};
const url = `/teams/${selectedTeam}/templates/${saveTemplateName}?database=${saveTemplateDatabase}`;
await deleteTemplate(url);
setShowDeleteTemplate(true)
window.location.reload()
} catch (error) {
alert('Failed to delete the template, check console (F12) for technical details.')
console.error(error);
Expand Down Expand Up @@ -410,6 +459,7 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
ssh,
ipython,
tensorboard,
plugins
} = JSON.parse(event.target.value as string);
console.log('jobpath', jobPath)
if (name !== undefined) setName(name);
Expand All @@ -428,6 +478,13 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
if (ssh !== undefined) setSsh(ssh);
if (ipython !== undefined) setIpython(ipython);
if (tensorboard !== undefined) setTensorboard(tensorboard);
if (plugins !== undefined && plugins.hasOwnProperty("blobfuse") && Array.isArray(plugins['blobfuse'])) {
let blobfuseObj = plugins['blobfuse'][0];
setAccountName(blobfuseObj['accountName']);
setAccountKey(blobfuseObj['accountKey']);
setContainerName(blobfuseObj['containerName']);
setMountPath(blobfuseObj['mountPath']);
}
}
},
[]
Expand Down Expand Up @@ -467,6 +524,14 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
const onSubmit = (event: React.FormEvent) => {
event.preventDefault();
if (!submittable) return;
let plugins: any = {};
plugins['blobfuse'] = [];
let blobfuseObj: any = new Object();
blobfuseObj['accountName'] = accountName || '';
blobfuseObj['accountKey'] = accountKey || '';
blobfuseObj['containerName'] = containerName || '';
blobfuseObj['mountPath'] = mountPath || '';
plugins['blobfuse'].push(blobfuseObj);

const job: any = {
userName: email,
Expand All @@ -487,10 +552,10 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
jobPath: jobPath || '',
enablejobpath: enableJobPath,
env: environmentVariables,
hostNetwork : type === 'PSDistJob' ? true : false,
isPrivileged : type === 'PSDistJob' ? true : false,
hostNetwork : type === 'PSDistJob',
isPrivileged : type === 'PSDistJob',
plugins: plugins,
};

let totalGpus = gpus;
if (type === 'PSDistJob') {
job.numps = 1;
Expand Down Expand Up @@ -842,6 +907,53 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
</CardContent>
<Collapse in={advanced}>
<Divider/>
<CardContent>
<Typography component="div" variant="h6" >Azure Blob</Typography>
<Typography component="div" variant="caption" color={"textSecondary"}>Fill in all fields for Azure blob to take effect.</Typography>
<Grid
container
wrap="wrap"
spacing={1}
align-items-xs-baseline
>
<Grid item xs={12}>
<TextField
value={accountName}
onChange={onAccountNameChange}
label="Account Name"
fullWidth
variant="filled"
/>
</Grid>
<Grid item xs={12}>
<TextField
value={accountKey}
onChange={onAccountKeyChange}
label="Account Key"
fullWidth
variant="filled"
/>
</Grid>
<Grid item xs={12}>
<TextField
value={containerName}
onChange={onContainerNameChange}
label="Container Name"
fullWidth
variant="filled"
/>
</Grid>
<Grid item xs={12}>
<TextField
value={mountPath}
onChange={onMountPathChange}
label="Mount Path"
fullWidth
variant="filled"
/>
</Grid>
</Grid>
</CardContent>
<CardContent>
<Typography component="span" variant="h6">Mount Directories</Typography>
<Table size="small">
Expand Down Expand Up @@ -872,8 +984,6 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
onChange={onEnableWorkPathChange}
/>
</TableCell>
<TableCell align="center">
</TableCell>
</TableRow>
<TableRow>
<TableCell>/data</TableCell>
Expand Down Expand Up @@ -976,7 +1086,7 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
<Collapse in={database}>
<Divider/>
<CardContent>
<Typography component="span" variant="h6">Database Management</Typography>
<Typography component="span" variant="h6">Template Management</Typography>
<Grid container wrap="wrap" spacing={1}>
<Grid item xs={12} sm={6}>
<TextField
Expand All @@ -989,7 +1099,7 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
</Grid>
<Grid item xs>
<TextField
label="Database"
label="Scope"
select
fullWidth
variant="filled"
Expand All @@ -1010,7 +1120,7 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
<Grid item xs={12} container justify="space-between">
<Grid item xs container>
<Button type="button" color="secondary" onClick={onAdvancedClick}>Advanced</Button>
<Button type="button" color="secondary" onClick={onDatabaseClick}>Database</Button>
<Button type="button" color="secondary" onClick={onTemplateClick}>Template</Button>
</Grid>
<Button type="submit" color="primary" variant="contained" disabled={!submittable || enableSubmit || postJobLoading || postEndpointsLoading || open }>Submit</Button>
</Grid>
Expand Down