index.html 15.8 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 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 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345
<!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>

<!-- 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">
        <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>

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


 <!-- build:js lib.js -->

<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="js/controllers/script_modules_modal_controller.js"></script>
<script src="js/components/checkbox_select_component.js"></script>
<script src="js/components/my_modal_component.js"></script>

<!-- endbuild -->

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

</body>

</html>