index.html 14.7 KB
Newer Older
David Trudgian's avatar
David Trudgian committed
1 2 3 4 5 6
<!doctype html>
<html lang="en" data-framework="emberjs">
<head>
    <meta charset="utf-8">
    <title>BioHPC SLURM Job Creator</title>

David Trudgian's avatar
David Trudgian committed
7 8 9
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

David Trudgian's avatar
David Trudgian committed
10 11 12 13
    <style>
        textarea {
            border: 1px solid #999999;
            font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
14
            font-size: 10pt !important;
David Trudgian's avatar
David Trudgian committed
15 16
            background-color: #333333 !important;
            color: #eaeaea !important;
David Trudgian's avatar
David Trudgian committed
17 18
        }

19
        .fullheight {
David Trudgian's avatar
David Trudgian committed
20 21
            height: 100%;
        }
22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

        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;
        }

47 48 49 50 51
        .input-group-addon {
            min-width: 10em;
            text-align: left;
        }

David Trudgian's avatar
David Trudgian committed
52
    </style>
David Trudgian's avatar
David Trudgian committed
53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69


</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>


70
<!-- MAIN APP  --------------------------------------------------------------->
71

72
<script type="text/x-handlebars" data-template-name="script">
73
    {{ outlet "modal" }}
David Trudgian's avatar
David Trudgian committed
74
    <div class="container">
David Trudgian's avatar
David Trudgian committed
75 76 77 78 79 80 81 82
        <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">
83 84 85 86
                            <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>
David Trudgian's avatar
David Trudgian committed
87 88 89 90 91 92 93 94 95
                            <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>
96 97 98 99 100 101 102 103 104 105 106 107 108
                            <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>
David Trudgian's avatar
David Trudgian committed
109 110 111 112 113
                            <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"
114 115
                                    title="File name for output from commands. %j will be replaced with the job's id
                                    when it runs."
David Trudgian's avatar
David Trudgian committed
116 117 118 119 120 121 122 123
                                    }}
                                </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"
124 125
                                    title="File name for error output from commands. %j will be replaced with the job's
                                    id when it runs."
David Trudgian's avatar
David Trudgian committed
126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174
                                    }}
                                </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">
175 176 177 178 179 180 181 182 183 184 185 186 187 188 189
                                    <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>
David Trudgian's avatar
David Trudgian committed
190 191 192
                                </div>
                            </div>
                        </div>
David Trudgian's avatar
David Trudgian committed
193
                    </div>
David Trudgian's avatar
David Trudgian committed
194 195 196 197 198 199 200
                </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">
201 202 203 204 205
                            <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.
David Trudgian's avatar
David Trudgian committed
206
                            </p>
207
                            {{ render "run-groups" runGroups }}
David Trudgian's avatar
David Trudgian committed
208
                        </div>
David Trudgian's avatar
David Trudgian committed
209
                    </div>
David Trudgian's avatar
David Trudgian committed
210 211 212 213 214 215 216
                </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>
David Trudgian's avatar
David Trudgian committed
217
                        </div>
David Trudgian's avatar
David Trudgian committed
218 219
                        <div class="panel-body">
                            <p>This is the script created from the options you have chosen on the form.
220
                                You can edit the script directly, but this will disable the ability to modify
David Trudgian's avatar
David Trudgian committed
221
                                it further using the form.</p>
222 223 224
                            <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>
David Trudgian's avatar
David Trudgian committed
225 226 227 228
                            <div class="form-group">
                                {{ textarea value=script rows=40 cols=80 class="form-control" }}
                            </div>
                            <div class="form-group">
229 230 231 232
                                <button type="submit" class="btn btn-primary btn-lg btn-block"><i
                                        class="glyphicon glyphicon-thumbs-up"></i>
                                    Submit Job To Cluster
                                </button>
David Trudgian's avatar
David Trudgian committed
233 234 235 236
                            </div>
                        </div>
                    </div>
                </div>
David Trudgian's avatar
David Trudgian committed
237
            </div>
David Trudgian's avatar
David Trudgian committed
238
        </form>
David Trudgian's avatar
David Trudgian committed
239
    </div>
240 241
</script>

242
<!-- COMMAND GROUPS  --------------------------------------------------------->
243 244 245 246

<script type="text/x-handlebars" data-template-name="run-groups">
    <ol class="rungroup-list">
        {{#each runGroup in model itemController="run-group" }}
247 248 249 250
        <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 }}
251 252 253 254
            </ul>
        {{/each}}
    </ol>
    <a {{ action "addRunGroup" }}><i class="glyphicon glyphicon-plus"></i> Add a new group of commands</a>
David Trudgian's avatar
David Trudgian committed
255 256
</script>

257
<!-- COMMANDS INSIDE A GROUP  ------------------------------------------------>
258 259 260 261 262 263 264 265 266

<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>
267
</script>
268

269
<!-- MODULE SELECTION MODAL  ------------------------------------------------->
270

271 272 273 274
<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}}
275 276
</script>

277
-<!-- MODAL DIALOG COMPONENT  ------------------------------------------------>
278

279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297
<script type="text/x-handlebars" data-template-name="components/my-modal">
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">{{title}}</h4>
                </div>
                <div class="modal-body">
                    {{yield}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" {{action 'ok'}}>OK
                    </button>
                </div>
            </div>
        </div>
    </div>
</script>

298 299 300 301 302 303 304 305 306 307 308
<!-- 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>

David Trudgian's avatar
David Trudgian committed
309 310
<!-- EMBER IMPORTS ----------------------------------------------------------->

311 312

 <script src="lib.js"></script>
David Trudgian's avatar
David Trudgian committed
313 314 315 316 317 318 319 320 321 322 323

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

</body>

</html>