Commit 5c84a686 authored by David Trudgian's avatar David Trudgian

Refactor JS files, add package.json and Gruntfile for dist build etc.

parent 014e68d9
.idea
bower_components/
node_modules/
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
copy: {
dist: {
files: [ {src: 'index.html', dest: 'dist/index.html'} ]
}
},
'useminPrepare': {
options: {
dest: 'dist'
},
html: 'index.html'
},
usemin: {
html: ['dist/index.html']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-usemin');
grunt.registerTask('default', ['useminPrepare', 'copy', 'concat', 'uglify', 'usemin']);
};
\ No newline at end of file
# ember_sbatch
This is a prototype frontend for the BioHPC portal sbatch script generator.
To work on code install npm and bower deps:
````
npm install
bower install
````
To minify, build dist:
````
grunt
````
......@@ -66,53 +66,26 @@
</div>
</div>
<!-- EMBER APP -------------------------------------------------------------->
<script type="text/x-handlebars" data-template-name="components/checkbox-select">
{{#each elements itemController="checkboxItem"}}
<label>
{{input type="checkbox" checked=selected}}
{{label}}
</label><br />
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="script-modules-modal">
{{#my-modal title='Select Environment Modules' ok='save' close='removeModal'}}
{{ model }}
{{ moduleList }}
{{checkbox-select model=content propertyPath="modules" elements=moduleList labelPath="id"}}
{{/my-modal}}
</script>
<!-- MAIN APP --------------------------------------------------------------->
<script type="text/x-handlebars" data-template-name="script">
{{ outlet "modal" }}
<div class="container">
<form class="form-horizontal">
<div class="row">
<div class="col-md-6 fullheight">
<div class="panel panel-default fullheight">
<div class="panel-heading">
<h1 class="panel-title">Job Options</h1>
</div>
<div class="panel-body">
<p>The SLURM job options specfy the name and requirements of your job. Try to be accurate
when specifying memory requirements, time requirements etc. Accurately specifying these
requirements allows the scheduler to organize jobs efficiently, decreasing the wait time
before a job runs.</p>
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">Job Name:</label>
<div class="col-sm-8">
{{ input type="text" value=jobName size="50" class="form-control"
data-toggle="tooltip" data-placement="top"
......@@ -120,16 +93,12 @@
}}
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">Modules</label>
<div class="col-sm-8">
{{#unless modules.length}}
No Modules Selected
{{/unless}}
{{#each module in modules}}
<span class="badge">{{module.id}}</span>
{{/each}}
......@@ -137,10 +106,8 @@
<button class="btn btn-block btn-xs" {{ action 'showModal' 'script-modules-modal' model }}>Select Modules</button>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">STDOUT file:</label>
<div class="col-sm-8">
{{ input type="text" value=stdout size="50" class="form-control"
data-toggle="tooltip" data-placement="top"
......@@ -151,7 +118,6 @@
</div>
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">STEDRR file:</label>
<div class="col-sm-8">
{{ input type="text" value=stderr size="50" class="form-control"
data-toggle="tooltip" data-placement="top"
......@@ -162,7 +128,6 @@
</div>
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">Parition/Queue:</label>
<div class="col-sm-8">
{{view "select"
content=partitions
......@@ -177,7 +142,6 @@
</div>
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">Number of Nodes:</label>
<div class="col-sm-8">
{{view "select"
selection=nodes
......@@ -187,7 +151,6 @@
</div>
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">Memory Limit (GB):</label>
<div class="col-sm-8">
{{view "select"
selection=memGB
......@@ -198,7 +161,6 @@
</div>
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">Email me for:</label>
<div class="col-sm-8">
{{view "select"
value=mailType
......@@ -209,117 +171,77 @@
</div>
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">Time Limit:</label>
<div class="col-sm-8">
<div class="input-group">
{{view "select" content=optionDays selection=selectedDays class="form-control"
}}
<span class="input-group-addon" id="basic-addon2">Days</span>
</div>
<div class="input-group">
{{view "select" content=optionHours selection=selectedHours class="form-control"
}}
<span class="input-group-addon" id="basic-addon2">Hours</span>
</div>
<div class="input-group">
{{view "select" content=optionMinutes selection=selectedMinutes class="form-control"
}}
<span class="input-group-addon" id="basic-addon2">Min</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 fullheight">
<div class="panel panel-default fullheight">
<div class="panel-heading">
<h1 class="panel-title">Job Commands</h1>
</div>
<div class="panel-body">
<p>The batch script contains one or more <em>groups</em> of <em>commands</em>.
If multiple commands are given in a group they will run in parallel. This allows
efficient use of the nodes, which have 32 CPU threads.
E.g. the first step in a batch script might run a pre-processing command on each of
eight files, in parallel.
</p>
{{ render "run-groups" runGroups }}
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">SLURM <em>sbatch</em> Script</h1>
</div>
<div class="panel-body">
<p>This is the script created from the options you have chosen on the form.
You can edit the script directly, but this will disable the ability to modify
it further using the form.</p>
<p>When your job is ready click the button at the bottom of this page to submit it to the
cluster. You can also copy and paste the script into a file, as a tempalte for future
use.</p>
<div class="form-group">
{{ textarea value=script rows=40 cols=80 class="form-control" }}
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block"><i
class="glyphicon glyphicon-thumbs-up"></i>
Submit Job To Cluster
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</script>
<!-- COMMAND GROUPS --------------------------------------------------------->
<script type="text/x-handlebars" data-template-name="run-groups">
<ol class="rungroup-list">
{{#each runGroup in model itemController="run-group" }}
<li>Run commands in parallel and wait until complete <a {{ action "removeRunGroup" }}><i
......@@ -329,14 +251,12 @@
</ul>
{{/each}}
</ol>
<a {{ action "addRunGroup" }}><i class="glyphicon glyphicon-plus"></i> Add a new group of commands</a>
</script>
<!-- COMMANDS INSIDE A GROUP ------------------------------------------------>
<script type="text/x-handlebars" data-template-name="run-cmds">
{{#each runCmd in model itemController="run-cmd" }}
<li>
{{ input type="text" class="cmd" size="50" value=runCmd.cmd }}
......@@ -344,10 +264,17 @@
</li>
{{/each}}
<li><a {{ action "addRunCmd" }}><i class="glyphicon glyphicon-plus"></i> Add a new command to this group</a></li>
</script>
<!-- MODULE SELECTION MODAL ------------------------------------------------->
<script type="text/x-handlebars" data-template-name="script-modules-modal">
{{#my-modal title='Select Environment Modules' ok='save' close='removeModal'}}
{{checkbox-select model=content propertyPath="modules" elements=moduleList labelPath="id"}}
{{/my-modal}}
</script>
-<!-- MODAL DIALOG COMPONENT ------------------------------------------------>
<script type="text/x-handlebars" data-template-name="components/my-modal">
<div class="modal fade">
......@@ -368,24 +295,21 @@
</div>
</script>
<!-- CHECKBOX SELECT COMPONENT ---------------------------------------------->
<script type="text/x-handlebars" data-template-name="components/checkbox-select">
{{#each elements itemController="checkboxItem"}}
<label>
{{input type="checkbox" checked=selected}}
{{label}}
</label><br />
{{/each}}
</script>
<!-- EMBER IMPORTS ----------------------------------------------------------->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/handlebars/handlebars.min.js"></script>
<script src="bower_components/ember/ember.js"></script>
<script src="bower_components/ember-data/ember-data.min.js"></script>
<script src="bower_components/ember-localstorage-adapter/localstorage_adapter.js"></script>
<script src="bower_components/ember-validations-nocli/dist/ember-validations.min.js"></script>
<script src="js/app.js"></script>
<script src="js/models/script.js"></script>
<script src="js/models/partition.js"></script>
<script src="js/models/rungroup.js"></script>
<script src="js/models/runcmd.js"></script>
<script src="js/models/module.js"></script>
<script src="js/controllers/script_controller.js"></script>
<script src="js/controllers/rungroups_controller.js"></script>
<script src="js/controllers/runcmds_controller.js"></script>
<script src="lib.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
index.hbs
\ No newline at end of file
<!doctype html>
<html lang="en" data-framework="emberjs">
<head>
<meta charset="utf-8">
<title>BioHPC SLURM Job Creator</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style>
textarea {
border: 1px solid #999999;
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
font-size: 10pt !important;
background-color: #333333 !important;
color: #eaeaea !important;
}
.fullheight {
height: 100%;
}
ol.rungroup-list {
padding-left: 1em;
}
ol.rungroup-list > li {
padding: 0.5em;
margin-bottom: 1em;
background-color: #eeeeee;
}
ul.runcmd-list {
margin-top: 0.5em;
list-style: none;
padding-left: 0.5em;
}
ul.runcmd-list > li {
margin-bottom: 0.5em;
}
input.cmd {
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
}
.input-group-addon {
min-width: 10em;
text-align: left;
}
</style>
</head>
<body>
<!-- PAGE HEADER ------------------------------------------------------------->
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>BioHPC SLURM <em>sbatch</em> script creator</h1>
</div>
</div>
</div>
<!-- MAIN APP --------------------------------------------------------------->
<script type="text/x-handlebars" data-template-name="script">
{{ outlet "modal" }}
<div class="container">
<form class="form-horizontal">
<div class="row">
<div class="col-md-6 fullheight">
<div class="panel panel-default fullheight">
<div class="panel-heading">
<h1 class="panel-title">Job Options</h1>
</div>
<div class="panel-body">
<p>The SLURM job options specfy the name and requirements of your job. Try to be accurate
when specifying memory requirements, time requirements etc. Accurately specifying these
requirements allows the scheduler to organize jobs efficiently, decreasing the wait time
before a job runs.</p>
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">Job Name:</label>
<div class="col-sm-8">
{{ input type="text" value=jobName size="50" class="form-control"
data-toggle="tooltip" data-placement="top"
title="A short name for this job, used by the queueing system."
}}
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">Modules</label>
<div class="col-sm-8">
{{#unless modules.length}}
No Modules Selected
{{/unless}}
{{#each module in modules}}
<span class="badge">{{module.id}}</span>
{{/each}}
<br/><br/>
<button class="btn btn-block btn-xs" {{ action 'showModal' 'script-modules-modal' model }}>Select Modules</button>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">STDOUT file:</label>
<div class="col-sm-8">
{{ input type="text" value=stdout size="50" class="form-control"
data-toggle="tooltip" data-placement="top"
title="File name for output from commands. %j will be replaced with the job's id
when it runs."
}}
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">STEDRR file:</label>
<div class="col-sm-8">
{{ input type="text" value=stderr size="50" class="form-control"
data-toggle="tooltip" data-placement="top"
title="File name for error output from commands. %j will be replaced with the job's
id when it runs."
}}
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">Parition/Queue:</label>
<div class="col-sm-8">
{{view "select"
content=partitions
selection=partition
optionLabelPath="content.selectOption"
optionValuePath="content.id"
prompt="Please Select a Partition" class="form-control"
data-toggle="tooltip" data-placement="top"
title="The SLURM partition or queue which the job should be submitted to."
}}
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">Number of Nodes:</label>
<div class="col-sm-8">
{{view "select"
selection=nodes
content=optionNodes
class="form-control"}}
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">Memory Limit (GB):</label>
<div class="col-sm-8">
{{view "select"
selection=memGB
content=partition.memoryOptions
prompt="Please Select a Memory Limit"
class="form-control"}}
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">Email me for:</label>
<div class="col-sm-8">
{{view "select"
value=mailType
content=optionMailTypes
optionLabelPath="content.description"
optionValuePath="content.option" class="form-control" }}
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">Time Limit:</label>
<div class="col-sm-8">
<div class="input-group">
{{view "select" content=optionDays selection=selectedDays class="form-control"
}}
<span class="input-group-addon" id="basic-addon2">Days</span>
</div>
<div class="input-group">
{{view "select" content=optionHours selection=selectedHours class="form-control"
}}
<span class="input-group-addon" id="basic-addon2">Hours</span>
</div>
<div class="input-group">
{{view "select" content=optionMinutes selection=selectedMinutes class="form-control"
}}
<span class="input-group-addon" id="basic-addon2">Min</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 fullheight">
<div class="panel panel-default fullheight">
<div class="panel-heading">
<h1 class="panel-title">Job Commands</h1>
</div>
<div class="panel-body">
<p>The batch script contains one or more <em>groups</em> of <em>commands</em>.
If multiple commands are given in a group they will run in parallel. This allows
efficient use of the nodes, which have 32 CPU threads.
E.g. the first step in a batch script might run a pre-processing command on each of
eight files, in parallel.
</p>
{{ render "run-groups" runGroups }}
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">SLURM <em>sbatch</em> Script</h1>
</div>
<div class="panel-body">
<p>This is the script created from the options you have chosen on the form.
You can edit the script directly, but this will disable the ability to modify
it further using the form.</p>
<p>When your job is ready click the button at the bottom of this page to submit it to the
cluster. You can also copy and paste the script into a file, as a tempalte for future
use.</p>
<div class="form-group">
{{ textarea value=script rows=40 cols=80 class="form-control" }}
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block"><i
class="glyphicon glyphicon-thumbs-up"></i>
Submit Job To Cluster
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</script>
<!-- COMMAND GROUPS --------------------------------------------------------->
<script type="text/x-handlebars" data-template-name="run-groups">
<ol class="rungroup-list">
{{#each runGroup in model itemController="run-group" }}
<li>Run commands in parallel and wait until complete <a {{ action "removeRunGroup" }}><i
class="glyphicon glyphicon-trash"></i></a>
<ul class="runcmd-list">
{{ render "run-cmds" runGroup.runCmds }}
</ul>
{{/each}}
</ol>
<a {{ action "addRunGroup" }}><i class="glyphicon glyphicon-plus"></i> Add a new group of commands</a>
</script>
<!-- COMMANDS INSIDE A GROUP ------------------------------------------------>
<script type="text/x-handlebars" data-template-name="run-cmds">
{{#each runCmd in model itemController="run-cmd" }}
<li>
{{ input type="text" class="cmd" size="50" value=runCmd.cmd }}
<a {{ action "removeRunCmd" }}><i class="glyphicon glyphicon-trash"></i></a>
</li>
{{/each}}
<li><a {{ action "addRunCmd" }}><i class="glyphicon glyphicon-plus"></i> Add a new command to this group</a></li>
</script>