ssss

vmlist.html

{% extends "base.html" %}
{% block head %}
    {{ super() }}
{% endblock %}
{% block nav %}{{super()}}{%endblock%}
{% block content %}
            <legend class="">稳定版虚拟机列表</legend>
    <div class="span8"> 
      <div>
          {% with messages = get_flashed_messages() %}
          {% if messages %}
          <div class="alert">
            <ul class=flashes>
              {% for message in messages %}
            <li>{{ message }}</li>
            {% endfor %}
            </ul>
          </div>
            {% endif %}
            {% endwith %}
            <form class="form-search inline pull-right" action={{url_for(".searchvms")}} method="GET">
                <input type="text" class="input-medium search-query" name="keyword" placeholder="IP,主机名">
                <input type="hidden"  name="page" value=1>
                <button type="submit" class="btn">Search</button>
            </form>
            <br>
        <table class="table table-bordered  table-striped">
          <tr class="info">
            <th>虚拟机IP</th>
            <th>主机名</th>
            <th>状态</th>
            <th>宿主机IP</th>
            <th>配置</th>
            <th>项目</th>
            <th>使用人</th>
            <th>操作</th>
          </tr>
          {% for v in vms.items %}
          <tr>
            <td><a href="/vm/{{ v.uuid}}/details">{{ v.ip }}</a></td>
            <td>{{ v.host }}</td>
            {% if v.status == "1" %}
              <td><span class="label label-success active" id="state_{{ v.uuid }}">正在运行</span></td>
            {% elif v.status == "5" %}
              <td><span class="label label-important shutoff" id="state_{{ v.uuid }}">电源关闭</span></td>
            {% elif v.status == "3" %}
              <td><span class="label label-info paused paused" id="state_{{ v.uuid }}">暂停</span></td>            
            {% else %}
              <td><span class="label label-warning" id="state_{{ v.uuid }}">其他</span></td>
            {% endif %}
            <td>{{ v.spice_host }}</td>
            <td>{{ v.vcpus }}CPU{{ v.mem/1024 }}G</td>
            <td>{{ v.user.depart.depname }}</td>
            <td>{{ v.user.nickname }}</td>
            <td>
              <div class="btn-toolbar" style="margin: 0;">
              <div class="btn-group">
                <button class="btn btn-small btn-info" uuid="{{ v.uuid }}" onclick=action("{{ url_for(".vmaction",uuid=v.uuid,action="reboot")}}",this)>
               重新启动
                </button>
                <button class="btn btn-small btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  {% if v.status == "1" %}
                    <li><a uuid={{ v.uuid }} onclick=action("{{ url_for(".vmaction",uuid=v.uuid,action="suspend")}}",this) href="#">关机</a></li>
                  {% else %}
                    <li><a uuid={{ v.uuid }} onclick=action("{{ url_for(".vmaction",uuid=v.uuid,action="resume")}}",this) href="#">开机</a></li>
                  {% endif %}
                  <li><a href="{{ url_for(".vmedit",uuid=v.uuid)}}">编辑</a></li>
                  <li><a href="{{ url_for(".vmdetails",uuid=v.uuid)}}">详情</a></li>
                  <li ><a  uuid={{ v.uuid }} onclick=action("{{ url_for(".vmaction",uuid=v.uuid,action="delete")}}",this) href="#">销毁</a></li>
                  <!--<li><a href="#">部署应用</a></li>-->
                </ul>
              </div><!-- /btn-group -->
            </td>
          </tr>
        {% endfor %}
        </table>
        </div>
        <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">操作确认</h3>
            </div>
            <div class="modal-body">
                <p>注意：操作不可恢复</p>
            </div>
            <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
            <button class="btn btn-primary" id="queren">确认</button>
            </div>
        </div>
         <div class="pagination">
         <ul>
        <li>{% if vms.has_prev %}<a href="{{ url_for('.vmlist', page = vms.prev_num) }}"><< 上一页</a>{% else %}<span><< 上一页</span>{% endif %}</li>
          {%- for page in vms.iter_pages(left_edge=2, left_current=10, right_current=10, right_edge=2) %}
            {% if page %}
              {% if page != vms.page %}
                <li><a href="{{ url_for('.vmlist', page=page) }}">{{ page }}</a></li>
              {% else %}
                <li class="active"><span>{{ page }}</span></li>
              {% endif %}
            {% else %}
                <li><span class="ellipsis">…</span></li>
            {% endif %}
            </li>
          {%- endfor %}
        <li>{% if vms.has_next %}<a href="{{ url_for('.vmlist', page = vms.next_num) }}"> 下一页>></a></li>{% else %}<li><span>下一页>></span>{% endif %}</li>
        </ul>
      </div>
    </div>
          <div class="span3 well">
            <span class="label label-important"><strong>注意事项：</strong></span>
                <ol>
                  <li>资源有限虚拟机使用完毕，请及时释放</li>
                  <li>请勿修改虚拟机IP地址</li>
                  <li>虚拟机配置了时间同步，如不需要，请在cron内注释掉</li>
                </ol>
                <span class="label label-warning"><strong>申请地址：</strong></span><br>
                <ol>
                <li><a href="{{ url_for('.vmreq') }}">稳定版申请</a></li>
                </ol>
          <span class="label label-info"><strong>如有问题请联系管理员，谢谢!</strong></span>
          </div>
{% endblock %}
{% block footer %}{% endblock%}
{% block js%}
  {{ super() }}
<script type="text/javascript">
    $(document).ready(function(){
      $(".nav li:eq(0)").addClass("active");    
    });
    function action(url,obj){
      var uuid=$(obj).attr("uuid");
      $("#myModal").modal('show');
      var queren=$("#queren");
      queren.attr("value",url);
      queren.attr("title",uuid);
      }
    $("#queren").click(function(){
        $.post(this.value);
        var uid=this.title
        var status=setInterval(function(){
        $.get("/vm/state/"+uid,function(data){
        var state_dom=$("#state_"+uid)
        if(data="active")
          {state_dom.text("正在运行");state_dom.removeClass("label-important");state_dom.addClass("label-success");clearInterval(status);location.reload();}
        else if(data!="active")
          {state_dom.text("系统关闭");state_dom.removeClass("label-success");state_dom.addClass("label-important");clearInterval(status);}
        })
    },50);
    $("#myModal").modal('hide');})
</script>
{% endblock %}

demo