status.html 6.24 KB
Newer Older
1 2 3
<div class='row'>
  <div class='col-lg-6  col-lg-offset-3
       col-md-8  col-md-offset-2
4
       col-sm-8  col-sm-offset-2
5
       col-xs-12 col-xs-offset-0'>
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
    <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'>
21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
	  <!-- 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>
	    <td class='border-none'>URN:</td>
	    <td class='border-none'><%- sliceURN %></td>
	  </tr>
	  <tr>
	    <td class='border-none'>State:</td>
	    <td class='border-none'>
              <span id='quickvm_status'>
		<font></font>
              </span>
	    </td>
	  </tr>
	  <tr>
	    <td class='border-none'>Profile:</td>
	    <td class='border-none'><%- profileName %></td>
	  </tr>
	  <tr>
	    <td class='border-none'>Expires:</td>
52
	    <td class='border-none' id='instance_expiration'>
53 54 55 56
              <span id='quickvm_expires'><%- sliceExpiresText %></span>
	      (<span id='quickvm_countdown'></span>)
	    </td>
	  </tr>
57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
	  </table>
	  <!--
	  <div class='pull-left'>
	    <span class='glyphicon glyphicon-question-sign'
		  style='font-size:24px'></span>
	  </div>
	  -->
	  <div class='pull-right'>
	    <% if (registered) { %>
	    <button class='btn btn-xs btn-primary hidden' disabled
		    id='clone_button' type=button>
              Clone</button>
	    <button class='btn btn-xs btn-primary hidden' disabled
		    id='snapshot_button' type=button
		    data-toggle='modal' data-target='#snapshot_modal'>
              Snapshot</button>
	    <% } %>
	    <button class='btn btn-xs btn-success' disabled
		    id='extend_button' type=button>
              Extend</button>
	    <button class='btn btn-xs btn-danger' disabled
		    id='terminate_button' type=button
		    data-toggle='modal' data-target='#terminate_modal'>
              Terminate</button>
	  </div>
82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133
	</div>
      </div>
    </div>
  </div>
</div>
<!-- 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'>
  <div class='col-lg-6  col-lg-offset-3
       col-md-8  col-md-offset-2
       col-sm-8  col-sm-offset-2
       col-xs-12 col-xs-offset-0'>
    <!-- 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'>
  <div class='col-lg-10  col-lg-offset-1
       col-md-10  col-md-offset-1
       col-sm-10  col-sm-offset-1
       col-xs-12 col-xs-offset-0'>
    <div class='panel panel-default invisible' id='showtopo_container'>
      <div class='panel-body'>
	<div id='quicktabs_div'>
	  <ul id='quicktabs' class='nav nav-tabs'>
	    <li class='active'>
              <a href='#profile' data-toggle='tab'>Topology View</a>
            </li>
	    <li>
              <a href='#listview' data-toggle='tab'>List View</a>
            </li>
	    <li>
              <a href='#manifest' data-toggle='tab'>Manifest</a>
            </li>
	  </ul>
	  <div id='quicktabs_content' class='tab-content'>
            <div class='tab-pane active' id='profile'>
134
	      <div id='showtopo_statuspage' class='jacks'></div>
135 136 137 138 139 140 141 142 143 144 145 146 147 148
              <small>Click on a node to open a shell on that node. 
                Click and drag to move things around.</small>
	    </div>
            <div class='tab-pane' id='listview'>
	      <div id='showtopo_listview'>
		<table class='table table-striped table-hover table-condensed'
                       id='listview_table'>
                  <thead>
                    <tr>
                      <th>Node</th>
                      <th>Shell (in-browser)</th>
                      <th>SSH command <small>
			  (if you provided your own key)</small>
                      </th>
149
                      <th>Console</th>
150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
		</table>
              </div>
            </div>
	    <div class='tab-pane' id='manifest'>
              <textarea id='manifest_textarea' style='width: 100%;'
                        type='textarea'></textarea>
	    </div>
	  </div>
	</div>
      </div>
    </div>
  </div>
</div>
<div>
  <!-- place to hang the modals for now -->
169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187
  <div id='snapshot_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><h3>Confirm to Snapshot</h3>
	</div>
	<div class='modal-body'>
	  Performing a snapshot will create a new disk image and
	  modify the profile. This is okay, but please confirm.
	  <br>
	  <br>
          <button class='btn btn-danger btn-sm align-center' type='button'
		  id='snapshot_confirm'>Confirm</button></center>
	</div>
      </div>
    </div>
  </div>
188 189 190 191 192
  <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>
193
  <div id='imaging_div'></div>
194
  <div id='oneonly_div'></div>
195
  <div id='approval_div'></div>
196
</div>