<!doctype html>
<html ng-app="namespace">
<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>新建Namespace</title>
</head>
<body>
<apollonav></apollonav>
<div class="container-fluid apollo-container hidden" ng-controller="LinkNamespaceController">
<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">新建Namespace</div>
<div class="col-md-6 text-right">
<button type="button" class="btn btn-info" ng-click="back()">返回到项目首页
</button>
</div>
</div>
</header>
<div class="panel-body">
<div class="alert alert-info no-radius">
<strong>Tips:</strong>
<ul ng-show="type == 'link'">
<li>公共namespace所属的应用通过关联公共namespace来配置公共部分的配置</li>
<li>其它应用可以通过关联公共namespace来覆盖公共部分的配置</li>
<li>如果其它应用不需要覆盖公共部分的配置，那么无需关联公共namespace</li>
</ul>
<ul ng-show="type == 'create'">
<li>
通过创建一个公共的namespace可以实现公共组件的配置，或多个应用共享同一份配置的需求
</li>
<li>创建完公共的namespace且关联到当前应用后，就可以配置公共部分的配置了</li>
<li>如果其它应用需要覆盖公共部分的配置，可以在其它应用那里关联公共的namespace，然后在关联的namespace里面配置需要覆盖的配置即可</li>
<li>如果其它应用不需要覆盖公共部分的配置，那么就不需要在其它应用那里关联公共的namespace</li>
</ul>
</div>
<div class="row text-right" style="padding-right: 20px;">
<div class="btn-group btn-group-sm" role="group" aria-label="...">
<button type="button" class="btn btn-default" ng-class="{active:type=='link'}"
ng-click="switchType('link')">关联已存在的Namespace
</button>
<button type="button" class="btn btn-default" ng-class="{active:type=='create'}"
ng-click="switchType('create')">创建新的Namespace
</button>
</div>
</div>
<form class="form-horizontal" name="namespaceForm" valdr-type="AppNamespace"
style="margin-top: 30px;" ng-show="step == 1" ng-submit="createNamespace()">
<div class="form-group">
<label class="col-sm-3 control-label">应用ID</label>
<div class="col-sm-6" valdr-form-group>
<label class="form-control-static" ng-bind="appId"></label>
</div>
</div>
<div class="form-horizontal" ng-show="type == 'link'">
<div class="form-group">
<label class="col-sm-3 control-label">
<apollorequiredfield></apollorequiredfield>
选择集群</label>
<div class="col-sm-6" valdr-form-group>
<apolloclusterselector apollo-app-id="appId" apollo-default-all-checked="true"
apollo-select="collectSelectedClusters"></apolloclusterselector>
</div>
</div>
</div>
<div class="form-group" ng-show="type == 'create'">
<label class="col-sm-3 control-label">
<apollorequiredfield></apollorequiredfield>
名称</label>
<div class="col-sm-4" valdr-form-group>
<div ng-class="{'input-group':appNamespace.isPublic}">
<span class="input-group-addon" ng-show="appNamespace.isPublic"
ng-bind="appBaseInfo.namespacePrefix"></span>
<input type="text" name="namespaceName" class="form-control"
ng-model="appNamespace.name">
</div>
</div>
<div class="col-sm-2" ng-if="hasRootPermission">
<select class="form-control" name="format" ng-model="appNamespace.format">
<option value="properties">properties</option>
<option value="xml">xml</option>
<option value="json">json</option>
<option value="yml">yml</option>
<option value="yaml">yaml</option>
</select>
</div>
<span ng-show="appNamespace.isPublic" ng-bind="concatNamespace()"
style="line-height: 34px;"></span>
</div>
<div class="form-group" ng-show="type == 'create' && hasRootPermission">
<label class="col-sm-3 control-label">
<apollorequiredfield></apollorequiredfield>
类型</label>
<div class="col-sm-4" valdr-form-group>
<label class="radio-inline">
<input type="radio" name="namespaceType" value="true" ng-value="true"
ng-model="appNamespace.isPublic"> public
</label>
<label class="radio-inline">
<input type="radio" name="namespaceType" value="false" ng-value="false"
ng-model="appNamespace.isPublic"> private
</label>
</div>
</div>
<div class="form-group" ng-show="type == 'create'" valdr-form-group>
<label class="col-sm-3 control-label">备注</label>
<div class="col-sm-7" valdr-form-group>
<textarea class="form-control" rows="3" name="comment"
ng-model="appNamespace.comment"></textarea>
</div>
</div>
<div class="form-group" ng-show="type == 'link'">
<label class="col-sm-3 control-label">
<apollorequiredfield></apollorequiredfield>
namespace</label>
<div class="col-sm-4" valdr-form-group>
<select id="namespaces">
<option></option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-10">
<button type="submit" class="btn btn-primary"
ng-disabled="(type == 'create' && namespaceForm.$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>
<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/NamespaceService.js"></script>
<script type="application/javascript" src="scripts/services/PermissionService.js"></script>
<script type="application/javascript" src="scripts/AppUtils.js"></script>
<!--directive-->
<script type="application/javascript" src="scripts/directive/directive.js"></script>
<script type="application/javascript" src="scripts/controller/NamespaceController.js"></script>
<script src="scripts/valdr.js" type="text/javascript"></script>
</body>
</html>