status.html 48.2 KB
Newer Older
1
<style>
2 3 4 5
.scrollable-panel {
	max-height:350px;
	overflow-y:scroll;
}
6 7 8 9
.fixedsize-panel {
	max-height:350px;
	height:350px;
}
10
.smalldiv {
11 12
	max-height:400px;
	height:400px;
13
}
14 15 16 17 18 19 20 21
.history-tstamp {
	min-width: 100px;
	width:100px;
	max-width: 100px;
}
pre {
	white-space: pre-wrap;
}
22
.panel-body-nopad {
23 24 25 26 27 28 29 30 31
    padding: 5px;
 }
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
    padding: 3px;
32
}
33
</style>
34
<div class='row'>
Leigh Stoller's avatar
Leigh Stoller committed
35
  <div class='col-lg-8  col-lg-offset-2
36
       col-md-8  col-md-offset-2
Leigh Stoller's avatar
Leigh Stoller committed
37
       col-sm-10 col-sm-offset-1
38
       col-xs-12 col-xs-offset-0'>
39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
    <div class='panel panel-default' id='status_panel'>
      <div class="panel-heading">
	<h5>
	  <a data-toggle="collapse" id="profile_status_toggle"
	     href="#profile_status_collapse">
	    <span id='status_message'></span>
	    <span class="glyphicon glyphicon-chevron-right pull-right"></span>
	  </a>
	</h5>
      </div>
      <div id="profile_status_collapse"
	   class="panel-collapse collapse
		  <% if (status_panel_show) { %>in<% } %>">
	<div class='panel-body'>
	  <table class='table table-condensed nospaceafter border-none'>
54 55 56 57 58 59 60 61 62 63 64 65 66 67
	  <!-- The spinner will start out invisible -->
	  <tr>
	    <td colspan=2 class='border-none'>
	      <div id='status_progress_outerdiv' class='hidden'>
		<div id='status_progress_div'
                     class='progress progress-striped active nospaceafter'>
		  <div class='progress-bar' role='progressbar'
                       id='status_progress_bar'
                       style='width: 33%;'></div>
		</div>
	      </div>
	    </td>
	  </tr>
	  <tr>
68
	    <td class='border-none'>Name:</td>
69
	    <td class='border-none'><%- expinfo.name %></td>
70 71 72 73 74 75 76
	  </tr>
	  <tr>
	    <td class='border-none'>State:</td>
	    <td class='border-none'>
              <span id='quickvm_status'>
		<font></font>
              </span>
77 78 79 80 81
	      <span class="hidden" id="ignore-failure"
		    style='margin-left: 10px;'>
		(<a id='ignore-failure-button'
		    data-target='#ignore-failure-modal'
		    data-toggle='modal'>Ignore this failure?</a>)</span>
82 83
	    </td>
	  </tr>
84
	  <% if (expinfo.profile_uuid) { %>
85 86 87
	    <tr>
	      <td class='border-none'>Profile:</td>
	      <td class='border-none'>
88 89 90
		<a target=_blank
		   href='show-profile.php?uuid=<%- expinfo.profile_uuid %>'>
		  <%- expinfo.profile_name %></a></td>
91
	    </tr>
92
	  <% } %>
93
	  <% if (expinfo.reporef) { %>
94 95 96
	    <tr>
	      <td class='border-none'>RefSpec:</td>
	      <td class='border-none'>
97 98
		<span><%= expinfo.reporef %></span>
		(<%= expinfo.repohash %>)
99 100 101
	      </td>
	    </tr>
	  <% } %>
102
	  <% if (isadmin) { %>
103 104 105 106
	    <tr>
	      <td class='border-none'>Creator:</td>
	      <td class='border-none'>
		<% if (registered) { %>
107 108
		  <a href="user-dashboard.php?user=<%- expinfo.creator %>">
		    <%- expinfo.creator %></a>
109
		<% } else { %>
110
	          <a href="mailto:<%- expinfo.creator_email %>"><%- expinfo.creator_email %></a>
111 112 113
	        <% } %>
	      </td>
	    </tr>
114
	    <% if (expinfo.project) { %>
115
	      <tr>
116
		<% if (expinfo.project == expinfo.group) { %>
117 118
		  <td class='border-none'>Project:</td>
		  <td class='border-none'>
119 120
		    <a href="show-project.php?pid=<%- expinfo.project %>">
		      <%- expinfo.project %></a></td>
121
		<% } else { %>
122 123
		    <td class='border-none'>Group:</td>
		    <td class='border-none'>
124 125
		      <a href="show-group.php?pid=<%- expinfo.project %>&gid=<%- expinfo.group %>">
			<%- expinfo.project %>:<%- expinfo.group %></a></td>
126
		<% } %>
127 128
	      </tr>
	    <% } %>
129
	  <% } %>
130 131 132 133 134 135 136 137 138 139 140 141 142 143 144
	  <% if (expinfo.status == "deferred") { %>
	    <tr class="exp-scheduled">
	      <td class='border-none'>Created:</td>
	      <td class='border-none format-date'><%- expinfo.created %></td>
	    </tr>
	    <tr class="exp-scheduled">
	      <td class='border-none'>Scheduled:</td>
	      <td class='border-none format-date'><%- expinfo.start_at %></td>
	    </tr>
	  <% } %>
	  <tr <% if (expinfo.status == "deferred") { %>
                   class="exp-running hidden" <% } %>>
	    <td class='border-none'>Started:</td>
	    <td class='border-none format-date'
		id="exp-started-date"><% if (expinfo.status != "deferred") { %><%- expinfo.started %><% } %></td>
Leigh Stoller's avatar
Leigh Stoller committed
145
	  </tr>
146 147
	  <tr>
	    <td class='border-none'>Expires:</td>
148 149
	    <td class='border-none'>
	      <span id='instance_expiration'>
150
		<span id='quickvm_expires' class='format-date'><%- expinfo.expires %></span>
151 152
		(<span id='quickvm_countdown'></span>)
	      </span>
153
	    </td>
154
	  </tr">
155
	  <tr id="maximum-extension" class="hidden">
156
	    <td class='border-none'>Extendable:</td>
157
	    <td class='border-none'>
158 159 160 161 162 163 164 165 166 167 168 169 170 171 172
	      <span id="maximum-extension-string"></span>
	      <a href='#' class='btn btn-xs'
		 data-toggle='popover'
		 data-html='true'
		 data-delay='{"hide":500}'
		 data-content="This is the maximum extension that is
			       <em>possible</em> because of future reservation
			       promises for the resources you are using. It
			       does not mean you will be granted an extension
			       till this date.">
		<span class='glyphicon glyphicon-question-sign'
		      style='margin-bottom: 4px;'></span>
	      </a>
	    </td>
	  </tr>
173 174
	  </table>
	  <div class='pull-left'>
175
	    <a class='btn btn-info btn-xs pull-left hidden'
176
               style='margin-right: 10px;'
177 178
	       id='sliverinfo_button'
               href='#'
179
	       target='_blank'
180
               type='button'>Logs</a>
181 182
	    <div id='sliverinfo_dropdown' class='hidden'>
	      <select style='margin-right: 0px;'>
183
		<option value='selectme'>Logs</option>
184 185 186 187 188 189 190
	      </select>
	      <a class='btn btn-info btn-tiny'
		 style='margin-right: 10px;'
		 href='#'
		 target='_blank'
		 type='button'>Go</a>
	    </div>
191
	  </div>
192 193 194 195 196 197
	  <div class='pull-left'>
	    <a class='hidden'
               style='margin-right: 10px;'
	       id='logfile_button'
               href='#'
	       target='_blank'
198
               type='button'>Stitcher</a>
199
	  </div>
200 201 202 203 204
	  <% if (isadmin) { %>
	    <div class='pull-left'>
	      <button class='btn btn-xs btn-danger' disabled
		      style='margin-left: 10px;'
		      style='margin-right: 10px;'
205
		      id='warnkill-experiment-button' type=button
206
		      data-toggle='popover'
207
		      data-content='Warn user or terminate experiment with cause
208
				    and optionally freeze the user account.'>
Leigh Stoller's avatar
Leigh Stoller committed
209
 		Warn/Kill</button>
210
	    </div>
211
	  <% } %>
212
	  <div class='pull-right'>
Leigh Stoller's avatar
Leigh Stoller committed
213 214 215 216 217 218 219 220 221
	    <a href="#" target="_blank"
	       class='btn btn-xs btn-info hidden' 
	       style='margin-right: 10px;'
	       id='confirm-stuff-button' type=button
	       data-toggle='popover'
	       data-content='Explore performance results from a set of
			     low-level benchmarks characterizing the
			     hardware used in this experiment.'>
 	      Performance History</a>
222
	    <% if (registered && !isfadmin) { %>
223 224 225 226 227 228 229 230
	      <span>
		<button class='btn btn-xs btn-success hidden' disabled
			style='margin-right: 10px;'
			id='linktest-stop-button' type=button
			data-toggle='popover'
			data-content='Stop a running or wedged linktest'>
 		  Stop Linktest</button>
	      </span>
231 232 233 234 235 236 237 238
	      <button class='btn btn-xs btn-primary hidden' disabled
		      id='snapshot_button' type=button
		      data-toggle='popover'
	              data-delay='{"hide":1000, "show":500}'
		      data-html='true'
		      data-content="Create a disk image from one of your nodes.
				    Click for more info."> 
		Create Disk Image</button>
239
	      <% if (window.APT_OPTIONS.cancopy_profile) { %>
240
		<a class='btn btn-xs btn-primary'
241
		   href='manage_profile.php?action=copy&uuid=<%= expinfo.profile_uuid %>'
242 243 244 245 246
		   id='copy_button' type=button
		   data-toggle='popover'
	           data-delay='{"hide":1000, "show":500}'
		   data-html='true'
		   data-content="When you <em>copy</em> a profile,
247 248 249 250 251
			 you are creating a new profile that
			 uses the same source code and metadata (description,
			 instructions) as the original profile, but without
			 creating a new disk image. Instead, the new profile
			 uses whatever images the original profile uses."> 
252 253
		  Copy</a>
	      <% } %>
254
	    <% } %>
255
	    <button class='btn btn-xs btn-success exp-running hidden' disabled
256
		    id='extend_button' type=button>
257 258 259 260 261 262 263 264
              <% if (isfadmin) { %>Extension History<% } else { %>Extend<% } %>
	    </button>
	    <% if (!isfadmin) { %>
	      <button class='btn btn-xs btn-danger' disabled
		      id='terminate_button' type=button
		      data-toggle='modal' data-target='#terminate_modal'>
		Terminate</button>
	    <% } %>
265
	  </div>
266 267
	  <% if (isadmin) { %>
	    <div class='clearfix'></div>	  
268 269
	    <div <% if (expinfo.status == "deferred") { %>
                   class="exp-running hidden" <% } %>>
270 271 272 273 274 275 276
	      <div class='pull-left'
		   data-toggle='popover'
		   data-delay='{"hide":500, "show":500}'
		   data-content="When checked, only administrator can extend
				 this experiment. No free time is granted to
				 user at all."> 
		<label class="checkbox-inline" style='margin-right: 10px;'>
277 278
		  <input type="checkbox" id="lockout_checkbox" disabled
			 <% if (expinfo.lockout) { %>checked<% } %> >Lockout</label>
279 280
	      </div>
	    </div>
281 282 283 284 285 286
	    <div <% if (expinfo.status == "deferred") { %>
                   class="exp-running hidden" <% } %>>
	      <div class='pull-left'
		   data-toggle='popover'
		   data-delay='{"hide":500, "show":500}'
		   data-content="When checked, the experiment 
287 288 289 290 291 292 293 294
			       cannot be terminated by the user unless the
			       user verifies 
			       the lockdown code when clicking the Terminate
			       button. This prevents accidental termination,
			       and is automatically set whenever an experiment
			       is extended for more then two weeks.
			       Use the admin lockdown flag to fully prevent
			       termination."> 
295 296 297 298 299
		<label class="checkbox-inline" style='margin-right: 10px;'>
		  <input type="checkbox" id="user_lockdown_checkbox" disabled
			 <% if (expinfo.user_lockdown) { %>checked<% } %> >
		  User Lockdown</label>
	      </div>
300
	    </div>
301 302 303 304 305 306
	    <div <% if (expinfo.status == "deferred") { %>
                   class="exp-running hidden" <% } %>>
	      <div class='pull-left'
		   data-toggle='popover'
		   data-delay='{"hide":500, "show":500}'
		   data-content="When checked, the experiment 
307 308
			       cannot be terminated by the user. Only an
			       admin can do it.">
309 310 311 312 313
		<label class="checkbox-inline" style='margin-right: 10px;'>
		  <input type="checkbox" id="admin_lockdown_checkbox" disabled
			 <% if (expinfo.admin_lockdown) { %>checked<% } %> >
		  Admin Lockdown</label>
	      </div>
314
	    </div>
315 316 317 318 319 320 321 322 323 324 325 326 327
	    <div <% if (expinfo.status == "deferred") { %>
                   class="exp-running hidden" <% } %>>
	      <div class='pull-left'
		   data-toggle='popover'
		   data-delay='{"hide":500, "show":500}'
		   data-content="When checked, the experiment is put into
				 Quarantine (emulab panic) mode.">
		<label class="checkbox-inline" style='margin-right: 10px;'>
		  <input type="checkbox" id="quarantine_checkbox" disabled
			 <% if (expinfo.paniced) { %>checked<% } %> >
		  <span <% if (expinfo.paniced) { %>class="text-danger"<% } %> >
		    Quarantined</span></label>
	      </div>
328
	    </div>
329 330 331 332 333 334 335 336 337 338 339
	    <div <% if (expinfo.status == "deferred") { %>
                   class="exp-running hidden" <% } %>>
	      <div class='pull-left'>
		<span <% if (expinfo.admin_notes == "") { %>hidden<% } %>'
		    data-toggle='popover'
                    data-delay='{"hide":500, "show":500}'
		    data-content="This experiment has admin notes">
		  <a target="_blank"
		     href='adminextend.php?uuid=<%= uuid %>'>Admin Notes</a>
		</span>
	      </div>
340
	    </div>
341
	  <% } %>
342 343 344 345 346
	</div>
      </div>
    </div>
  </div>
</div>
347 348
<!-- Add a hidden div for errors returned by the instantiation. -->
<div class='row hidden' id='error_panel'>
Leigh Stoller's avatar
Leigh Stoller committed
349
  <div class='col-lg-8  col-lg-offset-2
350
	      col-md-8  col-md-offset-2
Leigh Stoller's avatar
Leigh Stoller committed
351
	      col-sm-10 col-sm-offset-1
352
	      col-xs-12 col-xs-offset-0'>
353 354
    <div class="panel panel-danger">
      <div class="panel-heading">
355
        <center><h4 class="panel-title">Error Message</h4></center>
356
      </div>
357 358
      <div class="panel-body"><code style="white-space: pre-wrap"
				    id="error_panel_text"></code>
359
      </div>
360
      <div class="panel-footer">
361
	<div class="resource-error hidden">
362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388
	  <b>More info about resource errors (not enough nodes):</b>
	  <ul>
	    <li> To see how many nodes are available right now, or
	      when nodes will be available in the future, check out
	      the <a href="resinfo.php" target="_blank">cluster status</a>
	      page.
	    </li>
	    <li> Try asking for a smaller number of nodes, or nodes of a
	      different type.
	      <% if (window.ISCLOUD) { %>
		Or try using a different cluster.
	      <% } %>
	    </li>
	    <li> Try setting the initial experiment duration to a
	      shorter amount of time. You will find this option in the
	      <em>Advanced Options</em> section of the
	      <a href="instantiate" target="_blank">Start Experiment</a>
	      page.
	    </li>
	    <li> Still cannot get enough nodes right away? Try making a
	      <a href="reserve.php" target="_blank">reservation</a>
	      for the future.
	    </li>
	  </ul>
	</div>
	Not sure how to proceed or have further questions about this
	error? Join the
389 390
        <a href='<%= errorURL %>'>users group</a> and ask a question. Be
        sure to include the error message in your question, and the name
391 392
	of your profile and experiment:
	'<%= expinfo.profile_name %>/<%= expinfo.name %>'.
393
      </div>
394 395 396
    </div>
  </div>
</div>
397
</div>
398 399 400 401
<!-- Add a div for the instructions if there are instructions. The cliet
     will actually fill in the div though, since it is markdown and that
     is more easily done on the client side for now. -->
<div class='row hidden' id='instructions_panel'>
Leigh Stoller's avatar
Leigh Stoller committed
402
  <div class='col-lg-8  col-lg-offset-2
403
	      col-md-8  col-md-offset-2
Leigh Stoller's avatar
Leigh Stoller committed
404
	      col-sm-10 col-sm-offset-1
405
	      col-xs-12 col-xs-offset-0'>
406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424
    <!-- Collapsable panel -->
    <div class="panel panel-info">
      <div class="panel-heading">
	<h5>
	  <a data-toggle="collapse" href="#instructions">Profile Instructions
	    <span class="glyphicon glyphicon-chevron-right pull-right"></span>
	  </a>
	</h5>
      </div>
      <div id="instructions" class="panel-collapse collapse">
	<div class="panel-body">
	  <div id="instructions_text"></div>
	</div>
      </div>
    </div>
  </div>
</div>
<!-- The topo diagram goes inside this div, when it becomes available. -->
<div class='row'>
Leigh Stoller's avatar
Leigh Stoller committed
425
  <div class='col-lg-12  col-lg-offset-0
426 427 428
	      col-md-12  col-md-offset-0
	      col-sm-12  col-sm-offset-0
	      col-xs-12  col-xs-offset-0'>
429 430 431
    <div class='panel panel-default invisible' id='showtopo_container'>
      <div class='panel-body'>
	<div id='quicktabs_div'>
432
	  <ul id='quicktabs_ul' class='nav nav-tabs'>
433 434 435 436 437 438 439
	    <li class='hidden'>
              <a href='#topology' id='show_topology_tab'
		 data-toggle='tab'>Topology View</a>
            </li>
	    <li class='hidden'>
              <a href='#listview' id='show_listview_tab'
		 data-toggle='tab'>List View</a>
440
            </li>
441 442 443
	    <li class='hidden'>
              <a href='#rspec' id='show_rspec_tab'
		 data-toggle='tab'>Rspec</a>
444
            </li>
445
	    <li class='hidden'>
446 447
              <a href='#manifest' id='show_manifest_tab'
		 data-toggle='tab'>Manifest</a>
448
            </li>
449 450
	    <li class="hidden" id="show_idlegraphs_li">
              <a href='#Idlegraphs' id='show_idlegraphs_tab'
Leigh Stoller's avatar
Leigh Stoller committed
451 452
		 data-toggle='tab'>Graphs
		<button class='close hidden'
453 454
			style="margin-top:0px;"
			type='button' id="graphs-refresh-button">
Leigh Stoller's avatar
Leigh Stoller committed
455 456
		  <span class='glyphicon glyphicon-repeat'></span></button>
	      </a>
457
            </li>
458 459 460 461
	    <li class="hidden" id="show_openstack_li">
              <a href='#Openstack' id='show_openstack_tab'
		 data-toggle='tab'>Openstack Data
		<button class='close hidden'
462 463
			style="margin-top:0px;"
			type='button' id="openstack-refresh-button">
464 465 466
		  <span class='glyphicon glyphicon-repeat'></span></button>
	      </a>
            </li>
467 468
	  </ul>
	  <div id='quicktabs_content' class='tab-content'>
469
            <div class='tab-pane hidden' id='topology'>
470
	      <div id='showtopo_statuspage' class='jacks'></div>
471
              <small>Click on a node for more options. 
472
                Click and drag to move things around.</small>
473
	      <% if (registered) { %>
474
		<button class='btn btn-xs btn-success pull-right' disabled
475 476 477 478
			id='refresh_button' type=button
			data-toggle='popover'
			data-delay='{"hide":1000, "show":500}'
			data-content='Ask cluster for updated node status'>
479
		  Refresh Status</button>
480
		<span>
Leigh Stoller's avatar
Leigh Stoller committed
481 482
		  <button class='btn btn-xs btn-success pull-right hidden'
			  disabled
483
			  data-toggle='popover'
Leigh Stoller's avatar
Leigh Stoller committed
484
			  data-delay='{"hide":1000, "show":500}'
485 486 487 488 489
			  data-content='Run linktest on the topology'
			  style='margin-right: 10px;'
			  id='linktest-modal-button' type=button>
		    Run Linktest</button>
		</span>
490
		<% if (1) { %>
Leigh Stoller's avatar
Leigh Stoller committed
491 492 493 494 495 496 497 498 499 500 501 502 503
		  <span>
		    <button class='btn btn-xs btn-success pull-right'
			    disabled
			    data-toggle='popover'
			    data-delay='{"hide":1000, "show":500}'
			    data-content='Reload the topology in case it has
					  changed at the cluster'
			    style='margin-right: 10px;'
			    id='reload-topology-button' type=button>
		      Reload Topo</button>
		  </span>
		<% } %>
	      <% } %>
504
	    </div>
505
            <div class='tab-pane hidden' id='listview'>
506 507 508 509 510
	      <div id='showtopo_listview'>
		<table class='table table-striped table-hover table-condensed'
                       id='listview_table'>
                  <thead>
                    <tr>
511
                      <th>ID</th>
512
                      <th>Node</th>
513
                      <th>Status</th>
514
                      <th>Type</th>
515
                      <th>Image</th>
516
                      <th>SSH command <small>
517
			(if you provided your own key)</small>
518
                      </th>
Leigh Stoller's avatar
Leigh Stoller committed
519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535
                      <th style='text-align: left;'>
			<div id='listview-action-menu' class='dropdown'>
			  <input type="checkbox" id="select-all">
			  <button id='action-menu-button' type='button'
				  class='btn btn-primary btn-sm dropdown-toggle'
				  data-toggle='dropdown'>
			    <span class='glyphicon glyphicon-cog'></span>
			  </button>
			  <ul class='dropdown-menu text-left' role='menu'>
			    <li><a href='#' name='reboot'>Reboot Selected</a>
			    </li>
			    <li><a href='#' name='reload'>Reload Selected</a>
			    </li>
			  </ul>
			</div>
		      </th>
		      <th style='text-align: center;'>Actions</th>
536 537 538 539 540 541 542
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
		</table>
              </div>
            </div>
543
	    <div class='tab-pane hidden' id='manifest'>
544
              <div id='manifest_textarea' style='width: 100%;'></div>
545
	    </div>
546 547 548
	    <div class='tab-pane hidden' id='rspec'>
              <div id='rspec_textarea' style='width: 100%;'></div>
	    </div>
549
	    <div class='tab-pane hidden' id='Idlegraphs'>
550
	      <div class="hidden" id="nodata">
551 552 553 554 555 556 557 558 559
		<br>
		<center>
		  There is insufficient data to graph, please check back later.
		</center>
	      </div>
	      <div class='row'>
		<div class='panel panel-default hidden'
		     id="loadavg-panel-div">
		  <div class="panel-heading">
560 561 562 563 564 565 566 567 568 569
		    <div class="maxavg-toggles pull-right">
		      <label class="radio-inline">
			<input type="radio" name="loadav-radio"
			       checked="checked" value="max"> Max
		      </label>
		      <label class="radio-inline">
			<input type="radio" name="loadav-radio"
			       value="avg"> Avg
		      </label>
		    </div>
570 571
		    <h5>Load Average Graph</h5>
		  </div>
572 573 574 575 576
		  <div class='panel-body panel-body-nopad'>
		    <!-- The col setting gives us a "relative" position div -->
		    <div class='col-xs-12 col-xs-offset-0'
			 style="padding:0px;">
		      <div id="loadavg-chart"
577 578
			   class='fixedsize-panel
				  with-3d-shadow with-transitions'>
579 580
			<svg></svg>
		      </div>
581 582 583 584 585 586 587 588
		    </div>
		  </div>
		</div>
	      </div>
	      <div class='row'>
		<div class='panel panel-default hidden'
		     id="ctrl-traffic-panel-div">
		  <div class="panel-heading">
589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614
		    <div class="maxavg-toggles pull-right">
		      <label class="radio-inline">
			<input type="radio" name="ctrl-radio"
			       checked="checked" value="max"> Max
		      </label>
		      <label class="radio-inline">
			<input type="radio" name="ctrl-radio"
			       value="avg"> Avg
		      </label>
		    </div>
		    <div class="txrx-toggles pull-right"
		         style="margin-right: 15px;">
		      <label class="radio-inline">
			<input type="radio" name="ctrl-radio-txrx"
			       value="rx"> RX
		      </label>
		      <label class="radio-inline">
			<input type="radio" name="ctrl-radio-txrx"
			       value="tx"> TX
		      </label>
		      <label class="radio-inline">
			<input type="radio" name="ctrl-radio-txrx"
			       checked="checked"
			       value="sum"> Sum
		      </label>
		    </div>
615 616
		    <h5>Control Traffic Graph</h5>
		  </div>
617 618 619 620 621
		  <div class='panel-body panel-body-nopad'>
		    <!-- The col setting gives us a "relative" position div -->
		    <div class='col-xs-12 col-xs-offset-0'
			 style="padding:0px;">
		      <div id="ctrl-traffic-chart"
622
class='fixedsize-panel with-3d-shadow with-transitions'>
623 624
			<svg></svg>
		      </div>
625 626 627 628 629 630 631 632
		    </div>
		  </div>
		</div>
	      </div>
	      <div class='row'>
		<div class='panel panel-default hidden'
		     id="expt-traffic-panel-div">
		  <div class="panel-heading">
633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656
		    <div class="maxavg-toggles pull-right">
		      <label class="radio-inline">
			<input type="radio" name="expt-radio"
			       checked="checked" value="max"> Max</label>
			<label class="radio-inline">
			  <input type="radio" name="expt-radio"
				 value="avg"> Avg</label>
		    </div>
		    <div class="txrx-toggles pull-right"
		         style="margin-right: 15px;">
		      <label class="radio-inline">
			<input type="radio" name="expt-radio-txrx"
			       value="rx"> RX
		      </label>
		      <label class="radio-inline">
			<input type="radio" name="expt-radio-txrx"
			       value="tx"> TX
		      </label>
		      <label class="radio-inline">
			<input type="radio" name="expt-radio-txrx"
			       checked="checked"
			       value="sum"> Sum
		      </label>
		    </div>
657 658
		    <h5>Experiment Traffic Graph</h5>
		  </div>
659 660 661 662 663
		  <div class='panel-body panel-body-nopad'>
		    <!-- The col setting gives us a "relative" position div -->
		    <div class='col-xs-12 col-xs-offset-0'
			 style="padding:0px;">
		      <div id="expt-traffic-chart"
664
class='fixedsize-panel with-3d-shadow with-transitions'>
665 666
			<svg></svg>
		      </div>
667 668 669 670 671
		    </div>
		  </div>
		</div>
	      </div>
	    </div>
672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730
	    <div class='tab-pane hidden' id='Openstack'>
	      <div class="hidden" id="nodata">
		<br>
		<center>
		  There is no Openstack data (yet), please check back later.
		</center>
	      </div>
	      <div id="openstack-div" class="hidden">
		<ul id='chart-tabs' class='nav nav-tabs'>
		  <li class="active">
		    <a href='#jsondata' data-toggle='tab'>Raw Data</a>
		  </li>
		  <li>
		    <a href='#activity' id="activity-tab"
		       data-toggle='tab'>Activity</a>
		  </li>
		</ul>
		<div id='chart-contents' class='tab-content'>
		  <div class='tab-pane active' id='jsondata'></div>
		  <div class='tab-pane' id='activity'>
		    <div class='smalldiv with-3d-shadow with-transitions'>
		      <svg></svg>
		    </div>
		  </div>
		  <div class='tab-pane hidden' id='template'>
		    <div class='panel panel-default cpu'>
		      <div class="panel-heading">
			<h5>CPU Utilization</h5>
		      </div>
		      <div class='panel-body panel-body-nopad'>
			<div class='smalldiv with-3d-shadow with-transitions'>
			  <svg></svg>
			</div>
		      </div>
		    </div>
		    <div class='panel panel-default netout'>
		      <div class="panel-heading">
			<h5>Outgoing Traffic</h5>
		      </div>
		      <div class='panel-body panel-body-nopad'>
			<div class='smalldiv with-3d-shadow with-transitions'>
			  <svg></svg>
			</div>
		      </div>
		    </div>
		    <div class='panel panel-default netin'>
		      <div class="panel-heading">
			<h5>Incoming Traffic</h5>
		      </div>
		      <div class='panel-body panel-body-nopad'>
			<div class='smalldiv with-3d-shadow with-transitions'>
			  <svg></svg>
			</div>
		      </div>
		    </div>
		  </div>
		</div>
	      </div>
	    </div>
731 732 733 734 735 736 737 738
	  </div>
	</div>
      </div>
    </div>
  </div>
</div>
<div>
  <!-- place to hang the modals for now -->
739
  <div id='snapshot_modal' class='modal fade'>
740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758
    <div class='modal-dialog'>
      <div class='modal-content'>
	<div class='modal-header'>
          <h3 class="text-center" style="margin: 0;">
	    Create a Disk Image</h3>
	</div>
	<div class='modal-body'>
	  <div class="fhide step1" data-step="1">
	    <center>
	      You are about to create a disk image from the contents of
	      the primary partition on
	      <span class="one-node text-info hidden">
		<span class="node_id"></span>.
	      </span>
	      <span class="choose-node hidden">
		<select>
		  <option value=''>Please Select a Node</option>
		</select>
	      </span>
Leigh Stoller's avatar
Leigh Stoller committed
759 760
	      <div class="text-danger hidden
			  snapshot-error choose-node-error"></div>
761 762
	    </center>
	  </div>
763 764 765 766
	  <% var imageonly = 0;
	     if (window.APT_OPTIONS.isscript ||
	         (!window.APT_OPTIONS.canclone_profile &&
	          !window.APT_OPTIONS.canupdate_profile)) { imageonly = 1; } %>
767
	  <div class="fhide step2" data-step="2">
768 769 770
	    <% if (! imageonly) { %>
	    <div id="snapshot-radios"
		 style="text-align: center; margin-top: 10px;">
771 772 773 774
	      <div id="snapshot-radio-title">
		<b>What would you like to do with this image?</b>
		<br>
	      </div>
775
	      <div id="snapshot-help-popover-div"></div>
776
	      <div style="display: inline-block; text-align: left">
777
		<div class="radio" id="update-profile-radio">
778 779 780 781
		  <label>
		    <input type="radio" name="whattodo"
			   id="update-profile" value="update-profile" checked>
		    Update the current profile to use it.
782
		    <a href='#' class='btn btn-xs snapshot-help-button'>
783
		      <span class='glyphicon glyphicon-question-sign'
784
			    data-which="update-profile"
785 786 787 788
			    style='margin-bottom: 4px;'></span>
		    </a>
		  </label>
		</div>
789
		<div class="radio" id="copy-profile-radio">
790 791 792 793 794
		  <label>
		    <input type="radio" name="whattodo"
			   id="copy-profile" value="copy-profile">
		    Make a copy of the current profile, updated to use the new
		    image. 
795
		    <a href='#' class='btn btn-xs snapshot-help-button'>
796
		      <span class='glyphicon glyphicon-question-sign'
797
			    data-which="copy-profile"
798 799 800 801
			    style='margin-bottom: 4px;'></span>
		    </a>
		  </label>
		</div>
802
		<div class="radio" id="image-only-radio">
803 804 805 806 807
		  <label>
		    <input type="radio" name="whattodo"
			   id="image-only" value="image-only">
		    Just create a disk image, I will decide what to do with it
		    later.
808 809 810 811 812
		    <a href='#' class='btn btn-xs snapshot-help-button'>
		      <span class='glyphicon glyphicon-question-sign'
			    data-which="image-only"
			    style='margin-bottom: 4px;'></span>
		    </a>
813 814 815 816
		  </label>
		</div>
	      </div>
	    </div>
817 818 819 820 821 822
	    <% } %>
	    <div id='snapshot-name-div'
		 <% if (imageonly) { %>
		 style="margin-top: 10px;"
		 <% } %>
		 class='hidden'>
823 824
	      <center class="image-only hidden">
		<b>Please tell us what name to use for your new image</b>
825 826 827 828 829 830 831
		<% if (imageonly) { %>
		  <a href='#' class='btn btn-xs snapshot-help-button'>
		    <span class='glyphicon glyphicon-question-sign'
			  data-which="image-only"
			  style='margin-bottom: 4px;'></span>
		  </a>
		<% } %>
832
	      </center>
833
	      <center class="copy-profile hidden">
834
		<b>Please tell us what name to use for your new profile</b>
835 836 837
	      </center>
	      <center>
		<input placeholder="alphanumeric please" type="text">
838
	      </center>
Leigh Stoller's avatar
Leigh Stoller committed
839
	      <div class="text-danger hidden snapshot-error name-error"
840 841
		   style="text-align: center;">
	      </div>
Leigh Stoller's avatar
Leigh Stoller committed
842
	      <div class="text-danger hidden snapshot-error inuse-error"
843 844 845
		   style="text-align: center;">
	      </div>
	    </div>
846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863
	  </div>
	  <center id='snapshot-description-div'
		  style="margin-top: 10px;">
	    <b>Please briefly describe your image:</b>
	    <br>
	    <textarea style="width: 85%;"
		      placeholder="Optional, but very handy when looking at a list of all your images."
		      rows=2 type='textarea'></textarea>		
	    <div class="text-danger hidden
			snapshot-error description-error"
		 style="text-align: center;">
	  </center>
	  <div id="snapshot-options"
	       style="text-align: center; margin-top: 10px;">
	    <div style="display: inline-block; text-align: left">
	      <ul class="list-unstyled">	    
	      <li id='snapshot-wholedisk-div'
		  class="hidden">
Leigh Stoller's avatar
Leigh Stoller committed
864 865
		<input type=checkbox
		       id='snapshot-wholedisk' value=yes>
866
		<b>Create a whole disk image?</b>
Leigh Stoller's avatar
Leigh Stoller committed
867 868 869 870 871 872 873 874 875 876 877 878 879 880
		<a href='#' class='btn btn-xs'
		   data-toggle='popover'
		   data-html='true'
		   data-delay='{"hide":500}'
		   data-content="Check this box if you need to capture more
				 then just the primary partition of your disk.
				 For example, you created a file system on
				 parition two, and want to include that in
				 your new disk image. 
				 <b><em>Do not check this box if you do not
				 need to do this or 
				 do not know what this means!</em></b>">
		  <span class='glyphicon glyphicon-question-sign'
			style='margin-bottom: 4px;'></span>
881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901
		</a></li>
	      <li id='snapshot_update_prepare_option'>
		<input type=checkbox
		       id='snapshot_update_prepare' value=yes>
		<b>Did you add any accounts or groups to your node?</b>
		<a href='#' class='btn btn-xs'
		   data-toggle='popover'
		   data-html='true'
		   data-delay='{"hide":500}'
		   data-content="Check this box if you installed any software
				 that added new
				 users or groups. For example, if you installed
				 <tt>mysql</tt>, a new <tt>mysqld</tt> user was
				 added, and you want to make sure that this
				 user account is retained in the new image.
				 If you are not sure, please
				 <em><b>ask us first</b></em> since
				 checking this box needlessly can have
				 negative side effects.">
		  <span class='glyphicon glyphicon-question-sign'
			style='margin-bottom: 4px;'></span>
Leigh Stoller's avatar
Leigh Stoller committed
902
		</a>
903 904
	      </li>
	      </ul>
905 906
	    </div>
	  </div>
907 908 909 910 911 912 913 914
	  <p style="padding-top: 10px;">
	    <b>WARNING:</b>
	    <em>The contents of your home directory is <b>NOT</b> saved</em>.
	    You  should install your software and data files in standard
	    locations like <tt>/usr/local</tt> or <tt>/opt</tt>. The reason
	    for this is so that dependencies on specific user home directories
	    do not become embedded in your images.
	  </p>
Leigh Stoller's avatar
Leigh Stoller committed
915 916 917
	  <div class="text-danger hidden snapshot-error general-error"
	       style="white-space: pre-wrap;
		      padding: 0px 50px 0px 50px;"></div>
918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941
	</div>
	<div class="pull-right" style="margin-bottom: 10px;">
          <button style='margin-right: 10px;'
                  class='btn btn-danger btn-sm' 
                  data-dismiss='modal' aria-hidden='true'>
	    Cancel</button>
          <button class='btn btn-success btn-sm'; type='button'
		  style='margin-right: 15px;'
		  id='snapshot_confirm'>
	    Continue</button>
	</div>
	<br>
	<div class="modal-footer-steps hidden">
	  <button type="button" class="btn btn-default js-btn-step pull-left"
		  data-orientation="cancel" data-dismiss="modal"></button>
	  <button type="button" class="btn btn-warning js-btn-step"
		  data-orientation="previous"></button>
	  <button type="button" class="btn btn-success js-btn-step"
		  data-orientation="next"></button>
	</div>
      </div>
    </div>
  </div>
  <div id='snapshot_modal_old' class='modal fade'>
942 943 944 945 946 947
    <div class='modal-dialog'>
      <div class='modal-content'>
	<div class='modal-header'>
          <center><h3>Confirm to Snapshot</h3>
	</div>
	<div class='modal-body'>
Leigh Stoller's avatar
Leigh Stoller committed
948 949 950 951 952 953 954 955 956 957
	  <div id='snapshot_update_profile_div' class='hidden'>
	    <center>
	      <b>Update Profile?</b>
	      <br>
	      <input type=checkbox
		     id='snapshot_update_profile' checked value=yes>
	    </center>
	    Check this box if you want us to update your profile to use the
	    new disk image. All nodes running the same image will be
	    updated. If you uncheck the box, you will need to modify the
958 959
	    profile source code yourself (you will receive email with the
	    name/url of the new image).
960 961 962
	    <br>
	    <br>
	  </div>
963 964 965 966 967 968 969 970 971 972 973 974
	  <div id='snapshot_update_script_div' class='hidden'>
	    <center>
	      <b>Please Note!</b>
	    </center>
	    Since your profile is a <em>geni-lib python</em> script, you
	    will need to update the images inside the script yourself, we
	    cannot do this for you.
	    At the end of the snapshot, we will tell you the new image name
	    so you can edit your script. 
	    <br>
	    <br>
	  </div>
975 976 977 978 979 980 981 982 983 984 985
	  <div id='snapshot_update_prepare_div'>
	    <center>
	      <b>Did you add any accounts or groups to your image?</b>
	      <br>
	      <input type=checkbox
		     id='snapshot_update_prepare' value=yes>
	    </center>
	    Check this box if you installed any software that added new
	    users or groups. If you are not sure, ask us first since
	    checking this box needlessly can have negative side effects. 
	    <br>
Leigh Stoller's avatar
Leigh Stoller committed
986
	  </div>
987
	  <div id='snapshot-wholedisk-div' class='hidden'>
988 989 990
	    <br>
	    <center>
	      Whole disk image?<br>
991
	      <input type=checkbox id='snapshot-wholedisk' value=yes>
992 993 994 995
	    </center>
	    Check this box if you need to capture the entire disk; you only
	    need to do this if you put data into one of the unused
	    partitions on the local disk. <b><em>Do not check this box if you
996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007
	      do not know what this means!</em></b>
	  </div>
	  <div id='nameyourimage_div' class='hidden'>
	    <br>
	    <center>
	      <b>Name your image?</b><br>
	      <input id="nameyourimage_name"
		     placeholder="alphanumeric only" type="text">
	    </center>
	    Do you want to choose the name of your image yourself? We
	    do not recommend it, but you can if you want. Alphanumeric
	    only please.
1008
	  </div>
1009
	  <br>
Leigh Stoller's avatar
Leigh Stoller committed
1010 1011 1012 1013 1014 1015 1016 1017 1018
	  <center>
            <button style='margin-right: 20px;'
                    class='btn btn-primary btn-sm' 
                    data-dismiss='modal' aria-hidden='true'>
	      Cancel</button>
            <button class='btn btn-danger btn-sm'; type='button'
		    id='snapshot_confirm'>
	      Confirm</button>
	  </center>
1019 1020 1021 1022
	</div>
      </div>
    </div>
  </div>
1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048
  <div id='deletenode_modal' class='modal fade'>
    <div class='modal-dialog'>
      <div class='modal-content'>
	<div class='modal-header'>
          <center><h3>Confirm to Delete Nodes</h3>
	</div>
	<div class='modal-body'>
          <p>
	    Are you <b>sure</b> you want to delete nodes from your
            experiment?  This operation cannot be stopped once it is
            started!

	  </p>
	  <center>
            <button style='margin-right: 20px;'
                    class='btn btn-primary btn-sm' 
                    data-dismiss='modal' aria-hidden='true'>
	      Cancel</button>
            <button class='btn btn-danger btn-sm'; type='button'
		    id='deletenode_confirm'>
	      Confirm</button>
	  </center>
	</div>
      </div>
    </div>
  </div>
1049
  <div id="context-menu">
1050 1051 1052 1053 1054 1055 1056 1057 1058
    <ul class="dropdown-menu" role="menu"
	style='cursor: pointer; cursor: hand'>
      <li id="shell"><a name="shell">Shell</a></li>
      <li id="console"><a name="console">Console</a></li>
      <li id="consolelog"><a name="consolelog">Console Log</a></li>
      <li id="reboot"><a name="reboot">Reboot</a></li>
      <li id="reload"><a name="reload">Reload</a></li>
      <li id="delete"><a name="delete">Delete Node</a></li>
    </ul>
1059
  </div>
1060 1061
  <div id="context"></div>
  <div id="context-menus"></div>
1062 1063 1064 1065 1066 1067 1068
  <div id='console_password_modal' class='modal fade'>
    <div class='modal-dialog'>
      <div class='modal-content'>
	<div class='modal-header'>
          <button type='button' class='close' data-dismiss='modal'
                  aria-hidden='true'>&times;</button>
          <center><h4>Console Password for
1069
	    <span id='console_password_clientid'></span></h4></center>
1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088
	</div>
	<div class='modal-body'>
	  <form class="form-horizontal">
	    <div class="row">
	      <div class="col-sm-4 col-sm-offset-4">
		<div class="form-group">
		  <input onClick="this.select();"
			 id='console_password_input'
			 class='form-control'
			 readonly
			 value='#'>
		</div>
	      </div>
	    </div>
	  </form>
	</div>
      </div>
    </div>
  </div>
1089 1090 1091 1092
  <div id='confirm_reload_modal' class='modal fade'>
    <div class='modal-dialog'>
      <div class='modal-content'>
	<div class='modal-body'>
1093
          <center><h3>Confirm Node <span id="confirm-which"></span></h3>
1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105
            <button type='button' style='margin-right: 20px;'
                    class='btn btn-primary btn-sm' 
                    data-dismiss='modal' aria-hidden='true'>
	      Cancel</button>
            <button class='btn btn-danger btn-sm'
		    id='confirm_reload_button'>
	      Confirm</button>
	  </center>
	</div>
      </div>
    </div>
  </div>
1106 1107 1108 1109 1110 1111 1112
  <!-- This is the extend history modal for foreign admins -->
  <div id='extend_history_modal' class='modal fade'>
    <div class='modal-dialog'>
      <div class='modal-content'>
	<div class='modal-header'>
          <button type='button' class='close' data-dismiss='modal'
                  aria-hidden='true'>&times;</button>
1113
	  <h5>Extension History</h5>
1114
	</div>
1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134
	<div class='modal-body scrollable-panel'>
	  <table class="table table-condensed">
	    <thead>
	      <tr>
		<th>Date</th>
		<th>Action</th>
		<th>Wanted</th>
		<th>Granted</th>
	      </tr>
	    </thead>
	    <tbody>
	      <%  _.each(extensions, function(extension, idx) { %>
		<tr>
		  <td rowspan="2" class="history-tstamp">
		    <%- extension.tstamp %></td>
		  <td>
		    <% if (extension.action == "request" && extension.admin == "1") { %>
		      admin<% } else { %><%- extension.action %><% } %>
		  </td>
		  <% if (extension.action == "request") { %>
1135 1136
		    <td><%- extension.wantedstring %></td>
		    <td><%- extension.grantedstring %></td>
1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149
		  <% } else { %>
		    <td>n/a</td>
		    <td>n/a</td>
 	          <% } %>
		</tr>
		<tr>
		  <td colspan="3">
		    <pre class="history-reason"><%- extension.reason %></pre>
		  </td>
		</tr>
  	      <% }); %>
	    </tbody>
	  </table>
1150 1151 1152 1153
	</div>
      </div>
    </div>
  </div>
1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179
  <div id='extension-denied-modal' class='modal fade'>
    <div class='modal-dialog'>
      <div class='modal-content'>
	<div class='modal-header'>
          <center><h3>Your recent extension request was denied!</h3></center>
	</div>
	<div class='modal-body'>
	  <div class="well" id="extension-denied-modal-reason"></div>
	  <p>
	    We sent you an email notification, but just in case you
	    did not receive it, we are letting you know again. 
	    Clicking Dismiss will hide this message. You may also request
	    another extension if you have more information to add, or to plead
	    your case. 
	  </p>
	  <div>
	    <center>
              <button class='btn btn-primary btn-sm'
		      id='extension-denied-modal-dismiss'>
		Dismiss</button>
	    </center>
	  </div>
	</div>
      </div>
    </div>
  </div>
1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195
  <div id='confirm-update-systemimage-modal' class='modal fade'
       data-keyboard='false' data-backdrop='static'>
    <div class='modal-dialog'>
      <div class='modal-content'>
	<div class='modal-body'>
          <button type='button' class='close' data-dismiss='modal'
                  aria-hidden='true'>&times;</button>
          <center>
	    <h4>You are about to create or update a System Image!</h4>
	  </center>
	  <p>
	    Taking this disk snapshot might result in creating a new
	    system image or updating an existing system image. Are you
	    sure you want to do this?
	  </p>
	  <p>
1196 1197
	    <em>Reminder:</em> You will need to run <tt>imagerelease</tt> on 
	    the cluster (command line).
1198 1199 1200 1201 1202 1203
	  </p>
	  <center>
            <button type='button' style='margin-right: 20px;'
                    class='btn btn-primary btn-sm'
		    id='cancel-update-systemimage'>Cancel</button>
            <button class='btn btn-danger btn-sm'
1204
		    id='confirm-update-systemimage'>Continue</button>
1205 1206 1207 1208 1209
	  </center>
	</div>
      </div>
    </div>
  </div>
1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242
  <div id='ssh-failed-modal' class='modal fade'>
    <div class='modal-dialog'>
      <div class='modal-content'>
	<div class='modal-header'>
          <center><h4>SSH Failure!</h3></center>
	</div>
	<div class='modal-body'>
	  There was an error trying to set up your SSH shell.
	  Typically this is because the local server is using a self
	  signed certificate and your browser is unhappy about it. The
	  easiest thing to do is click on the link below, accept the
	  certificate (however your browser does that), and then try
	  again. 
	  <br>
	  <div>
	    <center>
	      Click to 
	      <a href="" target="_blank" id="accept-certificate">
		accept certificate</a>
	    </center>
	  </div>
	  <br>
	  <div>
	    <center>
              <button class='btn btn-primary btn-sm'
		      data-dismiss='modal'>
		Dismiss</button>
	    </center>
	  </div>
	</div>
      </div>
    </div>
  </div>
1243
  <div class="hidden" id="clone-help-div">
1244 1245 1246 1247 1248 1249 1250 1251 1252 1253
    <!-- This is the Clone help box -->
    <div id="clone-help-panel" class="panel panel-info">
      <div class="panel-body">
	<button type='button' class='close clone-popover-close'>
          &times;</button>
	<br>
	<p>
	  You can quickly convert a running experiment into
	  a <em>new</em> profile, capturing the disk contents of your
	  node and saving it away for later use by experiments based on
1254 1255 1256
	  the new profile. The new profile is a copy of the current profile,
	  but with the node you selected to image, updated to boot the
	  new image.
1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270
	</p>
	<p>
	  The node in your experiment will be shutdown, and a disk image
	  of the <b>primary</b> partition captured. You will be able to
	  track the progress of the image capture as it proceeds. 
	</p>
	<p>
	  <em>The contents of your home directory is <b>NOT</b> saved</em>. You
	  should install your software and data files in standard locations like
	  <tt>/usr/local</tt> or <tt>/opt</tt>. The reason for this is so
	  that dependencies on specific user home directories do not
	  become embedded in your images.
	</p>
      </div>
1271 1272 1273 1274 1275
    </div>
  </div>
  <div class="hidden" id="snapshot-help-div">
    <div class="panel panel-info">
      <div class="panel-body">
1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288
	<button type='button' class='close snapshot-popover-close'>
          &times;</button>
	<br>
	<p>
	  Create a disk image, saving it away for future experiments
	  based on the same profile. This is a complete disk copy of the
	  <b>primary</b> partition on your node, everything is saved.
	  The next user to instantiate this profile will use this new
	  disk image.
	</p>
	<p>
	  After you click to confirm, the node in your experiment will
	  be shutdown, and a disk image captured. You will be able to
1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321
	  track the progress of the image capture as it proceeds.
	</p>
	<p>
	  When the imaging process is complete, we will update your
	  profile, changing the node you are imaging, to boot the new
	  image next time you start an experiment.
	</p>
	<p>
	  <em>The contents of your home directory is <b>NOT</b> saved</em>. You
	  should install your software and data files in standard locations like
	  <tt>/usr/local</tt> or <tt>/opt</tt>. The reason for this is so
	  that dependencies on specific user home directories do not
	  become embedded in your images.
	</p>
      </div>
    </div>
  </div>    
  <div class="hidden" id="imageonly-help-div">
    <div class="panel panel-info">
      <div class="panel-body">
	<button type='button' class='close'>
          &times;</button>
	<br>
	<p>
	  Create a disk image from the node selected, you can decide
	  later what profile(s) to use it in. This is a complete disk
	  copy of the <b>primary</b> partition on your node, everything
	  is saved. When the imaging process is complete we will tell
	  you the <em>URN</em> of your new image, to use in your profiles.
	</p>
	<p>
	  After you click to confirm, the node in your experiment will
	  be shutdown, and a disk image captured. You will be able to
1322 1323 1324 1325 1326 1327 1328 1329 1330
	  track the progress of the image capture as it proceeds.
	</p>
	<p>
	  <em>The contents of your home directory is <b>NOT</b> saved</em>. You
	  should install your software and data files in standard locations like
	  <tt>/usr/local</tt> or <tt>/opt</tt>. The reason for this is so
	  that dependencies on specific user home directories do not
	  become embedded in your images.
	</p>
1331 1332 1333
      </div>
    </div>
  </div>    
1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360
  <div id='lockdown-refused' class='modal fade'>
    <div class='modal-dialog'>
      <div class='modal-content'>
	<div class="modal-header text-center">
	  <h4>Lockdown Refused</h4>
	</div>
	<div class='modal-body'>
	  <p>
	    The lockdown request has been refused by one of the backend
	    clusters because it would throw the reservation system into chaos:
	  </p>
	  <div>
	    <pre></pre>
	  </div>
	  If you want to force this lockdown, click below.
	  <center>
            <button type='button' style='margin-right: 20px;'
		    data-dismiss='modal'
                    class='btn btn-primary btn-sm'
		    id='cancel-lockdown'>Cancel</button>
            <button class='btn btn-danger btn-sm'
		    id='force-lockdown'>Lockdown</button>
	  </center>
	</div>
      </div>
    </div>
  </div>
1361 1362 1363 1364 1365 1366 1367
  <!-- This is the no extensions allowed modal -->
  <div id='no-extensions-modal' class='modal fade'>
    <div class='modal-dialog'>
      <div class='modal-content'>
	<div class='modal-header'>
          <button type='button' class="close"
                  data-dismiss='modal' aria-hidden='true'>&times;</button>
1368
          <center><h4>Oops, no extensions are permitted!</h4></center>
1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381
	</div>
	<div class='modal-body'>
	  <p>
	    Extension requests for this experiment have been disabled
	    by an administrator.
	  </p>
	  <div id="extensions-disabled-reason" class="hidden">
	    <p>
	      The reason is: <span class="reason"></span>
	    </p>
	  </div>
	  <p>
	    Please contact the
1382
	    <a href="mailto:<%- window.SUPPORT %>?subject=Experiment%20<%- expinfo.project %>/<%- expinfo.name %>"
1383 1384 1385 1386 1387 1388 1389
	       target="_blank">
	      support staff</a> for more information.
	  </p>
	</div>
      </div>
    </div>
  </div>
1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409
  <!-- This is the no extension was granted modal -->
  <div id='no-extension-granted-modal' class='modal fade'>
    <div class='modal-dialog'>
      <div class='modal-content'>
	<div class='modal-header'>
          <button type='button' class="close"
                  data-dismiss='modal' aria-hidden='true'>&times;</button>
          <center><h4>Oops, no extension was granted!</h4></center>
	</div>
	<div class='modal-body'>
	  <p>
	    No extension was granted for your experiment!
	  </p>
	  <div class="reason-div hidden">
	    <p>
	      The reason is: <span class="reason"></span>
	    </p>
	  </div>
	  <p>
	    Please contact the
1410
	    <a href="mailto:<%- window.SUPPORT %>?subject=Experiment%20<%- expinfo.project %>/<%- expinfo.name %>"
1411 1412 1413 1414 1415 1416 1417
	       target="_blank">
	      support staff</a> for more information.
	  </p>
	</div>
      </div>
    </div>
  </div>
1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447
  <!-- Ignore failures modal-->
  <div id='ignore-failure-modal' class='modal fade'>
    <div class='modal-dialog'>
      <div class='modal-content'>
	<div class='modal-header'>
          <button type='button' class="close"
                  data-dismiss='modal' aria-hidden='true'>&times;</button>
          <center><h4>Ignore this failure?</h4></center>
	</div>
	<div class='modal-body'>
	  <p>
	    A failed experiment is typically reaped by the system
	    within a short amount of time, to release the resources so
	    they are available for other users and experiments. If you
	    want to ignore this failure and keep your experiment,
	    click on the ignore button below and your experiment will
	    be moved from the <em>failed</em> state to the <em>ready</em>
	    state.
	  </p>
	  <p>
	    There are many reasons for a failed experiment, some of
	    which can be repaired or even ignored. For example, if
	    some of your nodes fail to boot you can often log in on
	    the console and fix the problem and then reboot. Another
	    example is if your experiment can tolerate a few failed
	    nodes and you want to continue your experiment.
	  </p>
	  <p>
	    Other errors cannot be easily fixed, for example failed
   	    hardware or a bad cable that causes your network to fail.
1448 1449
   	    You cannot those failures of course since your experiment
   	    cannot be productively used.
1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463
	  </p>
	  <center>
            <button type='button' style='margin-right: 20px;'
		    data-dismiss='modal'
                    class='btn btn-primary btn-sm'>
	      Cancel</button>
            <button class='btn btn-danger btn-sm'
		    id='ignore-failure-confirm'>
	      Ignore Failure</button>
	  </center>
	</div>
      </div>
    </div>
  </div>
1464 1465 1466 1467 1468
  <div id='waitwait_div'></div>
  <div id='terminate_div'></div>
  <div id='oops_div'></div>
  <div id='register_div'></div>
  <div id='extend_div'></div>
1469
  <div id='imaging_div'></div>
1470
  <div id='oneonly_div'></div>
1471
  <div id='approval_div'></div>
1472
  <div id='linktest_div'></div>
1473
  <div id='destroy_div'></div>
1474
</div>
1475