autoscaling.jsp 9.96 KB
<%--
  CreateUser: craig.qin
  CreateDate: 2017/4/13
--%>
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap.min.css"/>
    <link rel="stylesheet" href="<%=basePath%>css/unicorn.main.css"/>
    <link rel="stylesheet" href="<%=basePath%>css/unicorn.grey.css"/>
    <link rel="stylesheet" href="<%=basePath%>css/jquery-ui.css"/>
    <link rel="stylesheet"
          href="<%=basePath%>css/bootstrap-responsive.min.css"/>
    <link rel="stylesheet" href="<%=basePath%>css/uniform.css"/>
    <link rel="stylesheet" href="<%=basePath%>css/select2.css"/>
    <link rel="stylesheet" href="<%=basePath%>css/font-awesome.min.css"/>
    <script src="<%=basePath%>js/excanvas.min.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath%>js/jquery-1.12.0.min.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath%>js/jquery-ui.custom.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath%>/js/bootstrap.min.js"></script>
    <script src="<%=basePath%>/js/unicorn.js"></script>
    <script
            src="<%=basePath%>js/bootstrap-plugin/datetimepicker/moment-with-locales.js"
            charset="UTF-8" type="text/javascript"></script>
    <script
            src="<%=basePath%>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js"
            charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath%>js/global.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.pagination.js"
            charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.table.js"
            charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.dialog.js"
            charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.form.js"
            charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.panel.js"
            charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.alerts.js"
            charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.accordion.js"
            charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.breadcrumb.js"
            charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.validate.js"
            charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.form.js"
            charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath%>js/layer/layer.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.select.js"
            charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath%>js/jstree/jstree.min.js"></script>
    <script src="<%=basePath%>js/jquery.toaster.js"></script>
    <script>
        var contextPath = '<%=basePath%>';
    </script>
    <title>YOHO!运维</title>
</head>
<body>
<!-- 头部 -->
<div id="head"></div>
<!-- 右侧具体内容 -->
<div id="content">
    <div id="breadcrumb">
        <a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i>首页</a> <a href="#" class="current">伸缩组管理</a>
    </div>
    <div class="container-fluid">
        <div class="widget-box">
            <div class="widget-title" style="height: 35px;">
                <div>
                    <div class="form-inline" role="form" id="inBoxQueryDiv"
                         style="margin-left: 15px;float: left;">
                        <div class="input-group" style="float: left;">
                            <span class="input-group-addon">云类型:</span>
                            <select id="cloudType" name="cloudType" class="form-control" onchange="changeByCloudType()">
                                <option value="1">AWS</option>
                                <option value="2" selected = "selected">QCLOUD</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="widget-content">
                <div id="autoscalingTable" style="overflow-y: auto; overflow-x: hidden; max-height: 800px"></div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" style="margin:0 auto;margin-top:20px;width: 600px" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 100%">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel"></h4>
                </div>
                <div class="modal-body">
                    <form id="hostGroupForm" class="form-horizontal">
                        <div class="form-group">
                            <label style="vertical-align: middle" class="col-sm-2 control-label">免于缩减的实例数:</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" readonly="readonly" id="protectedFromCount" name="protectedFromCount" size="40" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">最少实例数:</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="minSize" name="minSize" size="40"
                                       onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">最多实例数:</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="maxSize" name="maxSize" size="40"
                                       onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">期望容量:</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="desiredCapacity" name="desiredCapacity" size="40"
                                       onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">项目默认分支:</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="branch" name="branch" size="40" value="master" />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-success" value="Validate" onclick="changeOk()">提交</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>

    <div class="modal fade" id="myModalMessage" tabindex="-1" role="dialog" style="margin:0 auto;margin-top:20px;width: 480px" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 480px">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalMessageLabel"></h4>
                </div>
                <div class="modal-body" style="width: 480px">
                    <form id="messagehostGroupForm" class="">
                        <div class="form-group" style="margin-top: -10px">
                            <textarea id="resultScalingMessage" style="text-align: left; background-color: black; color: white;height:360px;width: 445px;"
                                      readonly="readonly"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer" style="width: 480px">
                    <button type="button" class="btn btn-danger" id="closeButton" disabled="disabled"  data-dismiss="modal">关闭</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>

</div>

<script src="<%=basePath%>script/common/genarate_left_panel.js"></script>
<script src="<%=basePath%>script/autoscaling/autoscaling_new.js?v=4"></script>
<script>
    $("#li_manager").addClass("active open");
    $("#li_autoscaling").addClass("active");
</script>
</body>
</html>