<!doctype html>
<html ng-app="cluster">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" href="./img/config.png">
<!-- styles -->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="vendor/angular/angular-toastr-1.4.1.min.css">
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<link rel="stylesheet" type="text/css" media='all' href="vendor/angular/loading-bar.min.css">
<link rel="stylesheet" type="text/css" href="styles/common-style.css">
<title>新建集群</title>
</head>
<body>
<apollonav></apollonav>
<div class="container-fluid apollo-container hidden" ng-controller="ClusterController">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel">
<header class="panel-heading">
<div class="row">
<div class="col-md-6">
<h4>创建集群</h4>
</div>
<div class="col-md-6 text-right">
<a type="button" class="btn btn-info" href="/config.html?#/appid={{appId}}">返回到项目首页
</a>
</div>
</div>
</header>
<div class="panel-body">
<div class="alert alert-info no-radius" role="alert">
<strong>Tips:</strong>
<ul>
<li>通过添加集群，可以使同一份程序在不同的集群（如不同的数据中心）使用不同的配置</li>
<li>如果不同集群使用一样的配置，则没有必要创建集群</li>
<li>
Apollo默认会读取机器上/opt/settings/server.properties(linux)或C:\opt\settings\server.properties(windows)文件中的idc属性作为集群名字，
如SHAJQ（金桥数据中心）、SHAOY（欧阳数据中心)
</li>
<li>在这里创建的集群名字需要和机器上server.properties中的idc属性一致</li>
</ul>
</div>
<form class="form-horizontal" name="clusterForm" valdr-type="Cluster" ng-show="step == 1"
ng-submit="create()">
<div class="form-group">
<label class="col-sm-2 control-label">
<apollorequiredfield></apollorequiredfield>
应用AppId</label>
<div class="col-sm-6">
<label class="form-control-static" ng-bind="appId"></label>
</div>
</div>
<div class="form-group" valdr-form-group>
<label class="col-sm-2 control-label">
<apollorequiredfield></apollorequiredfield>
集群名称</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="clusterName" ng-model="clusterName">
<small>(部署集群如:SHAJQ,SHAOY 或自定义集群如:SHAJQ-xx,SHAJQ-yy)</small>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">
<apollorequiredfield></apollorequiredfield>
选择环境</label>
<div class="col-sm-5">
<table class="table table-hover" style="width: 100px">
<tbody>
<tr style="cursor: pointer" ng-repeat="env in envs"
ng-click="toggleEnvCheckedStatus(env)">
<td width="10%"><input type="checkbox" ng-checked="env.checked"
ng-click="switchChecked(env, $event)"></td>
<td width="30%" ng-bind="env.name"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary"
ng-disabled="clusterForm.$invalid || submitBtnDisabled">提交
</button>
</div>
</div>
</form>
<div class="row text-center" ng-show="step == 2">
<img src="img/sync-succ.png" style="height: 100px; width: 100px">
<h3>创建成功!</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div ng-include="'views/common/footer.html'"></div>
<!--angular-->
<script src="vendor/angular/angular.min.js"></script>
<script src="vendor/angular/angular-resource.min.js"></script>
<script src="vendor/angular/angular-toastr-1.4.1.tpls.min.js"></script>
<script src="vendor/angular/loading-bar.min.js"></script>
<!-- jquery.js -->
<script src="vendor/jquery.min.js" type="text/javascript"></script>
<script src="vendor/select2/select2.min.js" type="text/javascript"></script>
<!-- bootstrap.js -->
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!--valdr-->
<script src="vendor/valdr/valdr.min.js" type="text/javascript"></script>
<script src="vendor/valdr/valdr-message.min.js" type="text/javascript"></script>
<script type="application/javascript" src="scripts/app.js"></script>
<script type="application/javascript" src="scripts/services/AppService.js"></script>
<script type="application/javascript" src="scripts/services/EnvService.js"></script>
<script type="application/javascript" src="scripts/services/UserService.js"></script>
<script type="application/javascript" src="scripts/services/CommonService.js"></script>
<script type="application/javascript" src="scripts/services/ClusterService.js"></script>
<script type="application/javascript" src="scripts/AppUtils.js"></script>
<script type="application/javascript" src="scripts/directive/directive.js"></script>
<script type="application/javascript" src="scripts/controller/ClusterController.js"></script>
<script src="scripts/valdr.js" type="text/javascript"></script>
</body>
</html>