status.html 46.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 B Stoller's avatar
Leigh B Stoller committed
35
  <div class='col-lg-8  col-lg-offset-2
36
       col-md-8  col-md-offset-2
Leigh B Stoller's avatar
Leigh B 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 B Stoller's avatar
Leigh B 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'>
Leigh B Stoller's avatar
Leigh B Stoller committed
175
	    <a class='btn btn-info btn-xs pull-left hidden'
176
               style='margin-right: 10px;'
Leigh B Stoller's avatar
Leigh B Stoller committed
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 205 206 207 208 209
	  <% if (isadmin) { %>
	    <div class='pull-left'>
	      <button class='btn btn-xs btn-danger' disabled
		      style='margin-left: 10px;'
		      style='margin-right: 10px;'
		      id='destroy-experiment-button' type=button
		      data-toggle='popover'
		      data-content='Terminate an experiment with cause
				    and optionally freeze the user account.'>
 		Destroy</button>
210
	    </div>
211
	  <% } %>
212
	  <div class='pull-right'>
213
	    <% if (registered && !isfadmin) { %>
214 215 216 217 218 219 220 221
	      <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>
222 223 224 225 226 227 228 229
	      <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>
230
	      <% if (expinfo.profile_uuid) { %>
231
		<a class='btn btn-xs btn-primary'
232
		   href='manage_profile.php?action=copy&uuid=<%= expinfo.profile_uuid %>'
233 234 235 236 237 238 239 240 241 242 243 244
		   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,
				 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."> 
		  Copy</a>
	      <% } %>
245
	    <% } %>
246
	    <button class='btn btn-xs btn-success exp-running hidden' disabled
247
		    id='extend_button' type=button>
248 249 250 251 252 253 254 255
              <% 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>
	    <% } %>
256
	  </div>
257 258
	  <% if (isadmin) { %>
	    <div class='clearfix'></div>	  
259 260
	    <div <% if (expinfo.status == "deferred") { %>
                   class="exp-running hidden" <% } %>>
261 262 263 264 265 266 267
	      <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;'>
268 269
		  <input type="checkbox" id="lockout_checkbox" disabled
			 <% if (expinfo.lockout) { %>checked<% } %> >Lockout</label>
270 271
	      </div>
	    </div>
272 273 274 275 276 277
	    <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 
278 279 280 281 282 283 284 285
			       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."> 
286 287 288 289 290
		<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>
291
	    </div>
292 293 294 295 296 297
	    <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 
298 299
			       cannot be terminated by the user. Only an
			       admin can do it.">
300 301 302 303 304
		<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>
305
	    </div>
306 307 308 309 310 311 312 313 314 315 316 317 318
	    <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>
319
	    </div>
320 321 322 323 324 325 326 327 328 329 330
	    <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>
331
	    </div>
332
	  <% } %>
333 334 335 336 337
	</div>
      </div>
    </div>
  </div>
</div>
338 339
<!-- Add a hidden div for errors returned by the instantiation. -->
<div class='row hidden' id='error_panel'>
Leigh B Stoller's avatar
Leigh B Stoller committed
340
  <div class='col-lg-8  col-lg-offset-2
341
	      col-md-8  col-md-offset-2
Leigh B Stoller's avatar
Leigh B Stoller committed
342
	      col-sm-10 col-sm-offset-1
343
	      col-xs-12 col-xs-offset-0'>
344 345
    <div class="panel panel-danger">
      <div class="panel-heading">
346
        <center><h4 class="panel-title">Error Message</h4></center>
347
      </div>
348 349
      <div class="panel-body"><code style="white-space: pre-wrap"
				    id="error_panel_text"></code>
350
      </div>
351
      <div class="panel-footer">
352
	<div class="resource-error hidden">
353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379
	  <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
380 381
        <a href='<%= errorURL %>'>users group</a> and ask a question. Be
        sure to include the error message in your question, and the name
382 383
	of your profile and experiment:
	'<%= expinfo.profile_name %>/<%= expinfo.name %>'.
384
      </div>
385 386 387
    </div>
  </div>
</div>
388
</div>
389 390 391 392
<!-- 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 B Stoller's avatar
Leigh B Stoller committed
393
  <div class='col-lg-8  col-lg-offset-2
394
	      col-md-8  col-md-offset-2
Leigh B Stoller's avatar
Leigh B Stoller committed
395
	      col-sm-10 col-sm-offset-1
396
	      col-xs-12 col-xs-offset-0'>
397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415
    <!-- 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 B Stoller's avatar
Leigh B Stoller committed
416
  <div class='col-lg-12  col-lg-offset-0
417 418 419
	      col-md-12  col-md-offset-0
	      col-sm-12  col-sm-offset-0
	      col-xs-12  col-xs-offset-0'>
420 421 422
    <div class='panel panel-default invisible' id='showtopo_container'>
      <div class='panel-body'>
	<div id='quicktabs_div'>
423
	  <ul id='quicktabs_ul' class='nav nav-tabs'>
424 425 426 427 428 429 430
	    <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>
431
            </li>
432 433 434
	    <li class='hidden'>
              <a href='#rspec' id='show_rspec_tab'
		 data-toggle='tab'>Rspec</a>
435
            </li>
436
	    <li class='hidden'>
437 438
              <a href='#manifest' id='show_manifest_tab'
		 data-toggle='tab'>Manifest</a>
439
            </li>
440 441
	    <li class="hidden" id="show_idlegraphs_li">
              <a href='#Idlegraphs' id='show_idlegraphs_tab'
Leigh B Stoller's avatar
Leigh B Stoller committed
442 443
		 data-toggle='tab'>Graphs
		<button class='close hidden'
444 445
			style="margin-top:0px;"
			type='button' id="graphs-refresh-button">
Leigh B Stoller's avatar
Leigh B Stoller committed
446 447
		  <span class='glyphicon glyphicon-repeat'></span></button>
	      </a>
448
            </li>
449 450 451 452
	    <li class="hidden" id="show_openstack_li">
              <a href='#Openstack' id='show_openstack_tab'
		 data-toggle='tab'>Openstack Data
		<button class='close hidden'
453 454
			style="margin-top:0px;"
			type='button' id="openstack-refresh-button">
455 456 457
		  <span class='glyphicon glyphicon-repeat'></span></button>
	      </a>
            </li>
458 459
	  </ul>
	  <div id='quicktabs_content' class='tab-content'>
460
            <div class='tab-pane hidden' id='topology'>
461
	      <div id='showtopo_statuspage' class='jacks'></div>
462
              <small>Click on a node for more options. 
463
                Click and drag to move things around.</small>
464
	      <% if (registered) { %>
465
		<button class='btn btn-xs btn-success pull-right' disabled
466 467 468 469
			id='refresh_button' type=button
			data-toggle='popover'
			data-delay='{"hide":1000, "show":500}'
			data-content='Ask cluster for updated node status'>
470
		  Refresh Status</button>
471
		<span>
Leigh B Stoller's avatar
Leigh B Stoller committed
472 473
		  <button class='btn btn-xs btn-success pull-right hidden'
			  disabled
474
			  data-toggle='popover'
Leigh B Stoller's avatar
Leigh B Stoller committed
475
			  data-delay='{"hide":1000, "show":500}'
476 477 478 479 480
			  data-content='Run linktest on the topology'
			  style='margin-right: 10px;'
			  id='linktest-modal-button' type=button>
		    Run Linktest</button>
		</span>
481
		<% if (1) { %>
Leigh B Stoller's avatar
Leigh B Stoller committed
482 483 484 485 486 487 488 489 490 491 492 493 494
		  <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>
		<% } %>
	      <% } %>
495
	    </div>
496
            <div class='tab-pane hidden' id='listview'>
497 498 499 500 501
	      <div id='showtopo_listview'>
		<table class='table table-striped table-hover table-condensed'
                       id='listview_table'>
                  <thead>
                    <tr>
502
                      <th>ID</th>
503
                      <th>Node</th>
504
                      <th>Type</th>
505
                      <th>Image</th>
506
                      <th>SSH command <small>
507
			(if you provided your own key)</small>
508
                      </th>
Leigh B Stoller's avatar
Leigh B Stoller committed
509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525
                      <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>
526 527 528 529 530 531 532
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
		</table>
              </div>
            </div>
533
	    <div class='tab-pane hidden' id='manifest'>
534
              <div id='manifest_textarea' style='width: 100%;'></div>
535
	    </div>
536 537 538
	    <div class='tab-pane hidden' id='rspec'>
              <div id='rspec_textarea' style='width: 100%;'></div>
	    </div>
539
	    <div class='tab-pane hidden' id='Idlegraphs'>
540
	      <div class="hidden" id="nodata">
541 542 543 544 545 546 547 548 549
		<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">
550 551 552 553 554 555 556 557 558 559
		    <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>
560 561
		    <h5>Load Average Graph</h5>
		  </div>
562 563 564 565 566
		  <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"
567 568
			   class='fixedsize-panel
				  with-3d-shadow with-transitions'>
569 570
			<svg></svg>
		      </div>
571 572 573 574 575 576 577 578
		    </div>
		  </div>
		</div>
	      </div>
	      <div class='row'>
		<div class='panel panel-default hidden'
		     id="ctrl-traffic-panel-div">
		  <div class="panel-heading">
579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604
		    <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>
605 606
		    <h5>Control Traffic Graph</h5>
		  </div>
607 608 609 610 611
		  <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"
612
class='fixedsize-panel with-3d-shadow with-transitions'>
613 614
			<svg></svg>
		      </div>
615 616 617 618 619 620 621 622
		    </div>
		  </div>
		</div>
	      </div>
	      <div class='row'>
		<div class='panel panel-default hidden'
		     id="expt-traffic-panel-div">
		  <div class="panel-heading">
623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646
		    <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>
647 648
		    <h5>Experiment Traffic Graph</h5>
		  </div>
649 650 651 652 653
		  <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"
654
class='fixedsize-panel with-3d-shadow with-transitions'>
655 656
			<svg></svg>
		      </div>
657 658 659 660 661
		    </div>
		  </div>
		</div>
	      </div>
	    </div>
662 663 664 665 666 667 668 669 670 671 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
	    <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>
721 722 723 724 725 726 727 728
	  </div>
	</div>
      </div>
    </div>
  </div>
</div>
<div>
  <!-- place to hang the modals for now -->
729
  <div id='snapshot_modal' class='modal fade'>
730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748
    <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 B Stoller's avatar
Leigh B Stoller committed
749 750
	      <div class="text-danger hidden
			  snapshot-error choose-node-error"></div>
751 752 753
	    </center>
	    <div style="text-align: center;">
	      <div id='snapshot_update_prepare_div'
Leigh B Stoller's avatar
Leigh B Stoller committed
754
		   style="display: inline-block; width: 80%; margin-top: 10px;">
755
		<b>Did you add any accounts or groups to your node?</b>
Leigh B Stoller's avatar
Leigh B Stoller committed
756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774
		<input type=checkbox
		       id='snapshot_update_prepare' value=yes>
		<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>
		</a>
775
	      </div>
776 777 778
	    </div>
	  </div>
	  <div class="fhide step2" data-step="2">
Leigh B Stoller's avatar
Leigh B Stoller committed
779
	    <div style="text-align: center; margin-top: 10px;">
780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812
	      <div id="snapshot-radio-title">
		<b>What would you like to do with this image?</b>
		<br>
	      </div>
	      <div id="clone-help-popover-div"></div>
	      <div style="display: inline-block; text-align: left">
		<div class="radio">
		  <label>
		    <input type="radio" name="whattodo"
			   id="update-profile" value="update-profile" checked>
		    Update the current profile to use it.
		    <a href='#' class='btn btn-xs' id='snapshot-help-button'>
		      <span class='glyphicon glyphicon-question-sign'
			    style='margin-bottom: 4px;'></span>
		    </a>
		  </label>
		</div>
		<div class="radio">
		  <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. 
		    <a href='#' class='btn btn-xs clone-help-button'>
		      <span class='glyphicon glyphicon-question-sign'
			    style='margin-bottom: 4px;'></span>
		    </a>
		  </label>
		</div>
		<div class="radio">
		  <label>
		    <input type="radio" name="whattodo"
			   id="new-profile" value="new-profile">
Leigh B Stoller's avatar
Leigh B Stoller committed
813
		    Create a brand new (empty) profile, using the new image.
814 815 816 817 818 819 820 821 822 823 824 825 826 827
		    <a href='#' class='btn btn-xs clone-help-button'>
		      <span class='glyphicon glyphicon-question-sign'
			    style='margin-bottom: 4px;'></span>
		    </a>
		  </label>
		</div>
		<div class="radio">
		  <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.
		  </label>
		</div>
Leigh B Stoller's avatar
Leigh B Stoller committed
828 829 830 831 832 833 834 835 836 837 838 839 840
		<div id='snapshot-description-div'>
		  <center>
		    <b>Please briefly describe your image:</b>
		    <br>
		  </center>
		  <textarea style="width: 100%;"
			    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;">
		  </div>
		</div>
841 842 843 844 845 846 847 848 849 850 851 852 853 854 855
	      </div>
	    </div>
	    <div id='snapshot-name-div' class='hidden'>
	      <center class="image-only hidden">
		<b>Please tell us what name to use for your new image</b>
		<br>
		<input class="image-name"
		       placeholder="alphanumeric please" type="text">
	      </center>
	      <center class="new-profile hidden">
		<b>Please tell us what name to use for your new profile</b>
		<br>
		<input class="profile-name"
		       placeholder="alphanumeric please" type="text">
	      </center>
Leigh B Stoller's avatar
Leigh B Stoller committed
856
	      <div class="text-danger hidden snapshot-error name-error"
857 858
		   style="text-align: center;">
	      </div>
Leigh B Stoller's avatar
Leigh B Stoller committed
859
	      <div class="text-danger hidden snapshot-error inuse-error"
860 861 862
		   style="text-align: center;">
	      </div>
	    </div>
Leigh B Stoller's avatar
Leigh B Stoller committed
863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883
	    <div style="text-align: center;">
	      <div id='snapshot-wholedisk-div' class="hidden"
		   style="display: inline-block; width: 80%; margin-top: 10px;">
		<b>Create a whole disk image?</b>
		<input type=checkbox
		       id='snapshot-wholedisk' value=yes>
		<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>
		</a>
884 885 886
	      </div>
	    </div>
	  </div>
887 888 889 890 891 892 893 894
	  <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 B Stoller's avatar
Leigh B Stoller committed
895 896 897
	  <div class="text-danger hidden snapshot-error general-error"
	       style="white-space: pre-wrap;
		      padding: 0px 50px 0px 50px;"></div>
898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921
	</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'>
922 923 924 925 926 927
    <div class='modal-dialog'>
      <div class='modal-content'>
	<div class='modal-header'>
          <center><h3>Confirm to Snapshot</h3>
	</div>
	<div class='modal-body'>
Leigh B Stoller's avatar
Leigh B Stoller committed
928 929 930 931 932 933 934 935 936 937
	  <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
938 939
	    profile source code yourself (you will receive email with the
	    name/url of the new image).
940 941 942
	    <br>
	    <br>
	  </div>
943 944 945 946 947 948 949 950 951 952 953 954
	  <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>
955 956 957 958 959 960 961 962 963 964 965
	  <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 B Stoller's avatar
Leigh B Stoller committed
966
	  </div>
967
	  <div id='snapshot-wholedisk-div' class='hidden'>
968 969 970
	    <br>
	    <center>
	      Whole disk image?<br>
971
	      <input type=checkbox id='snapshot-wholedisk' value=yes>
972 973 974 975
	    </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
976 977 978 979 980 981 982 983 984 985 986 987
	      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.
988
	  </div>
989
	  <br>
Leigh B Stoller's avatar
Leigh B Stoller committed
990 991 992 993 994 995 996 997 998
	  <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>
999 1000 1001 1002
	</div>
      </div>
    </div>
  </div>
Leigh B Stoller's avatar
Leigh B Stoller committed
1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028
  <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>
1029
  <div id="context-menu">
1030 1031 1032 1033 1034 1035 1036 1037 1038
    <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>
1039
  </div>
1040 1041
  <div id="context"></div>
  <div id="context-menus"></div>
Leigh B Stoller's avatar
Leigh B Stoller committed
1042 1043 1044 1045 1046 1047 1048
  <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
1049
	    <span id='console_password_clientid'></span></h4></center>
Leigh B Stoller's avatar
Leigh B Stoller committed
1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068
	</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>
1069 1070 1071 1072
  <div id='confirm_reload_modal' class='modal fade'>
    <div class='modal-dialog'>
      <div class='modal-content'>
	<div class='modal-body'>
1073
          <center><h3>Confirm Node <span id="confirm-which"></span></h3>
1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085
            <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>
1086 1087 1088 1089 1090 1091 1092
  <!-- 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>
1093
	  <h5>Extension History</h5>
1094
	</div>
1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114
	<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") { %>
1115 1116
		    <td><%- extension.wantedstring %></td>
		    <td><%- extension.grantedstring %></td>
1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129
		  <% } 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>
1130 1131 1132 1133
	</div>
      </div>
    </div>
  </div>
1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159
  <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>
1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175
  <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>
1176 1177
	    <em>Reminder:</em> You will need to run <tt>imagerelease</tt> on 
	    the cluster (command line).
1178 1179 1180 1181 1182 1183
	  </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'
1184
		    id='confirm-update-systemimage'>Continue</button>
1185 1186 1187 1188 1189
	  </center>
	</div>
      </div>
    </div>
  </div>
1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222
  <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>
1223
  <div class="hidden" id="clone-help-div">
1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 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
	  the new profile.
	</p>
	<p>
	  You can also create a new disk image, but start with an empty
	  (blank profile), and use the new image for the nodes in whatever
	  topology you create.
	</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>
1254 1255 1256 1257 1258
    </div>
  </div>
  <div class="hidden" id="snapshot-help-div">
    <div class="panel panel-info">
      <div class="panel-body">
1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280
	<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
	  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>
1281 1282 1283
      </div>
    </div>
  </div>    
1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310
  <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>
1311 1312 1313 1314 1315 1316 1317
  <!-- 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>
1318
          <center><h4>Oops, no extensions are permitted!</h4></center>
1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331
	</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
1332
	    <a href="mailto:<%- window.SUPPORT %>?subject=Experiment%20<%- expinfo.project %>/<%- expinfo.name %>"
1333 1334 1335 1336 1337 1338 1339
	       target="_blank">
	      support staff</a> for more information.
	  </p>
	</div>
      </div>
    </div>
  </div>
1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359
  <!-- 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
1360
	    <a href="mailto:<%- window.SUPPORT %>?subject=Experiment%20<%- expinfo.project %>/<%- expinfo.name %>"