namespace.html 11.6 KB
Newer Older
lepdou committed
1
<!doctype html>
lepdou committed
2
<html ng-app="namespace">
lepdou committed
3 4
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
zhangle committed
5
    <link rel="icon" href="./img/config.png">
lepdou committed
6 7 8
    <!-- 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">
lepdou committed
9
    <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
lepdou committed
10 11 12 13 14 15 16
    <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>

lepdou committed
17
<apollonav></apollonav>
lepdou committed
18

lepdou committed
19
<div class="container-fluid apollo-container hidden" ng-controller="LinkNamespaceController">
lepdou committed
20 21 22 23 24

    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel">
                <header class="panel-heading">
lepdou committed
25
                    <div class="row">
26 27 28 29 30
                        <div class="col-md-6">新建Namespace
                        <small><a target="_blank" href="https://github.com/ctripcorp/apollo/wiki/Apollo%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5%E4%B9%8B%E2%80%9CNamespace%E2%80%9D">
                            (点击了解更多Namespace相关知识)
                        </a> </small>
                        </div>
lepdou committed
31
                        <div class="col-md-6 text-right">
lepdou committed
32
                            <button type="button" class="btn btn-info" ng-click="back()">返回到项目首页
33
                            </button>
lepdou committed
34 35 36
                        </div>
                    </div>

lepdou committed
37 38 39
                </header>

                <div class="panel-body">
40

lepdou committed
41
                    <div class="alert alert-info no-radius">
zhangle committed
42
                        <strong>Tips:</strong>
lepdou committed
43
                        <ul ng-show="type == 'link'">
44 45
                            <li>应用可以通过关联公共namespace来覆盖公共Namespace的配置</li>
                            <li>如果应用不需要覆盖公共Namespace的配置,那么无需关联公共Namespace</li>
zhangle committed
46
                        </ul>
47 48
                        <ul ng-show="type == 'create' && appNamespace.isPublic">
                            <li>公共的Namespace的配置能被任何项目读取</li>
zhangle committed
49
                            <li>
50
                                通过创建公共Namespace可以实现公共组件的配置,或多个应用共享同一份配置的需求
zhangle committed
51
                            </li>
52 53 54 55 56 57 58 59 60
                            <li>如果其它应用需要覆盖公共部分的配置,可以在其它应用那里关联公共Namespace,然后在关联的Namespace里面配置需要覆盖的配置即可</li>
                            <li>如果其它应用不需要覆盖公共部分的配置,那么就不需要在其它应用那里关联公共Namespace</li>
                        </ul>
                        <ul ng-show="type == 'create' && !appNamespace.isPublic">
                            <li>私有Namespace的配置只能被所属的应用获取到</li>
                            <li>
                                通过创建一个私有的Namespace可以实现分组管理配置
                            </li>
                            <li>私有Namespace的格式可以是xml、yml、yaml、json. 您可以通过Apollo-client中ConfigFile接口来获取非properties格式Namespace的内容</li>
zhangle committed
61 62
                        </ul>
                    </div>
63 64
                    <div class="row text-right" style="padding-right: 20px;">
                        <div class="btn-group btn-group-sm" role="group" aria-label="...">
65
                            <button type="button" class="btn btn-default" ng-class="{active:type=='link'}"
66
                                    ng-click="switchType('link')">关联公共Namespace
67 68
                            </button>
                            <button type="button" class="btn btn-default" ng-class="{active:type=='create'}"
69
                                    ng-click="switchType('create')">创建Namespace
70
                            </button>
71 72 73
                        </div>
                    </div>

zhangle committed
74

75 76
                    <form class="form-horizontal" name="namespaceForm" valdr-type="AppNamespace"
                          style="margin-top: 30px;" ng-show="step == 1" ng-submit="createNamespace()">
lepdou committed
77
                        <div class="form-group">
78
                            <label class="col-sm-3 control-label">AppId</label>
lepdou committed
79
                            <div class="col-sm-6" valdr-form-group>
lepdou committed
80
                                <label class="form-control-static" ng-bind="appId"></label>
lepdou committed
81 82
                            </div>
                        </div>
lepdou committed
83
                        <div class="form-horizontal" ng-show="type == 'link'">
lepdou committed
84
                            <div class="form-group">
85
                                <label class="col-sm-3 control-label">
lepdou committed
86
                                    <apollorequiredfield></apollorequiredfield>
87
                                    选择集群</label>
lepdou committed
88
                                <div class="col-sm-6" valdr-form-group>
89
                                    <apolloclusterselector apollo-app-id="appId" apollo-default-all-checked="true"
90
                                                           apollo-select="collectSelectedClusters"></apolloclusterselector>
lepdou committed
91 92 93
                                </div>
                            </div>
                        </div>
lepdou committed
94
                        <div class="form-group" ng-show="type == 'create'">
95
                            <label class="col-sm-3 control-label">
lepdou committed
96
                                <apollorequiredfield></apollorequiredfield>
97
                                名称</label>
lepdou committed
98
                            <div class="col-sm-4" valdr-form-group>
99 100 101 102 103
                                <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">
104
                                </div>
lepdou committed
105
                            </div>
106 107 108

                            <!--public namespace can only be properties -->
                            <div class="col-sm-2" ng-show="!appNamespace.isPublic">
109
                                <select class="form-control" name="format" ng-model="appNamespace.format">
lepdou committed
110 111
                                    <option value="properties">properties</option>
                                    <option value="xml">xml</option>
112 113 114
                                    <option value="json">json</option>
                                    <option value="yml">yml</option>
                                    <option value="yaml">yaml</option>
lepdou committed
115 116 117
                                </select>
                            </div>

118
                            &nbsp;&nbsp;
119 120
                            <span ng-show="appNamespace.isPublic" ng-bind="concatNamespace()"
                                  style="line-height: 34px;"></span>
lepdou committed
121
                        </div>
122
                        <div class="form-group" ng-show="type == 'create' && (pageSetting.canAppAdminCreatePrivateNamespace || hasRootPermission)">
lepdou committed
123
                            <label class="col-sm-3 control-label">
lepdou committed
124
                                <apollorequiredfield></apollorequiredfield>
lepdou committed
125
                                类型</label>
lepdou committed
126
                            <div class="col-sm-4" valdr-form-group>
lepdou committed
127
                                <label class="radio-inline">
128 129
                                    <input type="radio" name="namespaceType" value="true" ng-value="true"
                                           ng-model="appNamespace.isPublic"> public
lepdou committed
130 131
                                </label>
                                <label class="radio-inline">
132 133
                                    <input type="radio" name="namespaceType" value="false" ng-value="false"
                                           ng-model="appNamespace.isPublic"> private
lepdou committed
134 135 136
                                </label>
                            </div>
                        </div>
lepdou committed
137
                        <div class="form-group" ng-show="type == 'create'" valdr-form-group>
lepdou committed
138
                            <label class="col-sm-3 control-label">备注</label>
lepdou committed
139
                            <div class="col-sm-7" valdr-form-group>
140 141
                                <textarea class="form-control" rows="3" name="comment"
                                          ng-model="appNamespace.comment"></textarea>
lepdou committed
142 143
                            </div>
                        </div>
lepdou committed
144
                        <div class="form-group" ng-show="type == 'link'">
145
                            <label class="col-sm-3 control-label">
lepdou committed
146
                                <apollorequiredfield></apollorequiredfield>
147
                                namespace</label>
lepdou committed
148
                            <div class="col-sm-4" valdr-form-group>
149 150 151
                                <select id="namespaces">
                                    <option></option>
                                </select>
lepdou committed
152 153 154 155
                            </div>
                        </div>

                        <div class="form-group">
lepdou committed
156
                            <div class="col-sm-offset-3 col-sm-10">
157
                                <button type="submit" class="btn btn-primary"
zhangle committed
158 159
                                        ng-disabled="(type == 'create' && namespaceForm.$invalid) || submitBtnDisabled">
                                    提交
160
                                </button>
lepdou committed
161 162 163
                            </div>
                        </div>
                    </form>
lepdou committed
164 165 166 167 168

                    <div class="row text-center" ng-show="step == 2">
                        <img src="img/sync-succ.png" style="height: 100px; width: 100px">
                        <h3>创建成功!</h3>
                    </div>
lepdou committed
169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184
                </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 -->
185
<script src="vendor/jquery.min.js" type="text/javascript"></script>
lepdou committed
186

lepdou committed
187 188
<script src="vendor/select2/select2.min.js" type="text/javascript"></script>

lepdou committed
189 190 191 192

<!-- bootstrap.js -->
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

lepdou committed
193 194 195
<script src="vendor/valdr/valdr.min.js" type="text/javascript"></script>
<script src="vendor/valdr/valdr-message.min.js" type="text/javascript"></script>

lepdou committed
196 197
<script type="application/javascript" src="scripts/app.js"></script>
<script type="application/javascript" src="scripts/services/AppService.js"></script>
lepdou committed
198
<script type="application/javascript" src="scripts/services/EnvService.js"></script>
lepdou committed
199
<script type="application/javascript" src="scripts/services/UserService.js"></script>
200
<script type="application/javascript" src="scripts/services/CommonService.js"></script>
lepdou committed
201
<script type="application/javascript" src="scripts/services/NamespaceService.js"></script>
lepdou committed
202
<script type="application/javascript" src="scripts/services/PermissionService.js"></script>
lepdou committed
203 204
<script type="application/javascript" src="scripts/AppUtils.js"></script>

lepdou committed
205
<!--directive-->
lepdou committed
206
<script type="application/javascript" src="scripts/directive/directive.js"></script>
lepdou committed
207

lepdou committed
208
<script type="application/javascript" src="scripts/controller/NamespaceController.js"></script>
lepdou committed
209

lepdou committed
210
<script src="scripts/valdr.js" type="text/javascript"></script>
lepdou committed
211 212 213

</body>
</html>