Sentinel/sentinel-dashboard/src/main/webapp/resources/app/views/dialog/param-flow-rule-dialog.html

<div>
	<span class="brand" style="font-weight:bold;">{{paramFlowRuleDialog.title}}</span>
	<div class="card" style="margin-top: 20px;margin-bottom: 10px;">
		<div class="panel-body">
			<div class="clearfix">
				<form role="form" class="form-horizontal">
					<div class="form-group">
						<label class="col-sm-2 control-label">资源名</label>
						<div class="col-sm-9">
							<input type="text" ng-if="paramFlowRuleDialog.type == 'edit'" class="form-control" placeholder="资源名" ng-model='currentRule.rule.resource' disabled="" />
							<input type="text" ng-if="paramFlowRuleDialog.type == 'add'" class="form-control highlight-border" placeholder="资源名" ng-model='currentRule.rule.resource' required />
						</div>
                    </div>
                    
                    <div class="form-group">
						<label class="col-sm-2 control-label">限流模式</label>
						<p class="col-sm-9 control-label" style="text-align: left; font-weight: normal;">QPS 模式</p>
					</div>

					<div class="form-group">
						<label class="col-sm-2 control-label">参数索引</label>
						<div class="col-sm-9">
							<input type="number" class="form-control highlight-border" ng-model='currentRule.rule.paramIdx' placeholder='请填入传入的热点参数的索引（从 0 开始）' />
						</div>
                    </div>
                    
                    <div class="form-group">
						<div ng-if="!currentRule.rule.clusterMode">
							<label class="col-sm-2 control-label">单机阈值</label>
							<div class="col-sm-3">
								<input type="number" class="form-control highlight-border" ng-model='currentRule.rule.count' placeholder='单机阈值' />
							</div>
							<label class="col-sm-3 control-label" title="统计窗口时间长度，单位为 s">统计窗口时长</label>
							<div class="input-group col-sm-3">
								<input type="number" class="form-control highlight-border"
									   ng-model='currentRule.rule.durationInSec' min="1"
									   placeholder='请填入统计窗口时长（单位为 秒）' />
								<span class="input-group-addon">秒</span>
							</div>
						</div>
						<div ng-if="currentRule.rule.clusterMode && currentRule.rule.clusterConfig.thresholdType == 0">
							<label class="col-sm-2 control-label">均摊阈值</label>
							<div class="col-sm-9">
								<input type="number" class="form-control highlight-border" ng-model='currentRule.rule.count' placeholder='集群均摊阈值' />
							</div>
						</div>
						<div ng-if="currentRule.rule.clusterMode && currentRule.rule.clusterConfig.thresholdType == 1">
							<label class="col-sm-2 control-label">集群阈值</label>
							<div class="col-sm-9">
								<input type="number" class="form-control highlight-border" ng-model='currentRule.rule.count' placeholder='集群总体阈值' />
							</div>
						</div>
                    </div>

					<div class="form-group">
						<label class="col-sm-2 control-label">是否集群</label>
						<div class="col-sm-2">
							<input type="checkbox" name="clusterMode" ng-model="currentRule.rule.clusterMode">
						</div>
						<div ng-if="currentRule.rule.clusterMode">
							<label class="col-sm-3 control-label">集群阈值模式</label>
							<div class="col-sm-4">
								<div class="form-control highlight-border" align="center">
									<input type="radio" name="clusterThresholdType" value="0" ng-model='currentRule.rule.clusterConfig.thresholdType' />&nbsp;单机均摊&nbsp;&nbsp;
									<input type="radio" name="clusterThresholdType" value="1" ng-model='currentRule.rule.clusterConfig.thresholdType' />&nbsp;总体阈值
								</div>
							</div>
						</div>
					</div>

					<div class="form-group" ng-if="currentRule.rule.clusterMode">
						<label class="col-sm-2 control-label">失败退化</label>
						<div class="col-sm-8">
							<div class="checkbox-inline">
								<input type="checkbox" name="fallbackToLocalWhenFail"
									   ng-model="currentRule.rule.clusterConfig.fallbackToLocalWhenFail">
								<i class="glyphicon glyphicon-info-sign"></i>&nbsp;若选择，则 Token Server 不可用时将退化到单机限流
							</div>
						</div>
					</div>

                    <!-- exclusion item part start -->
					<div ng-if="!paramFlowRuleDialog.showAdvanceButton">
						<hr />
						<div class="form-group">
							<div class="form-group" style="text-align: center">
								<label class="control-label">参数例外项</label>
							</div>

							<div class="form-group">
								<label class="col-sm-2 control-label">参数类型</label>
								<div class="col-md-9">
									<select ng-model="curExItem.classType" ng-options="classType for classType in paramItemClassTypeList" class="form-control" placeholder="请选择参数类型">
									</select>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-2 control-label">参数值</label>
								<div class="col-md-3">
									<input ng-model="curExItem.object" type="text" class="form-control" placeholder="例外项参数值">
								</div>

								<label class="col-sm-2 control-label">限流阈值</label>
								<div class="col-md-3">
									<input type="number" ng-model="curExItem.count" class="form-control" placeholder="限流阈值">
								</div>

								<div class="col-md-2">
									<button type="button" class="btn btn-success"
											ng-disabled="notValidParamItem(curExItem)"
											ng-click="addParamItem()">
										<span class="fa fa-plus">&nbsp;添加</span>
									</button>
								</div>
							</div>

							<div>
								<div class="col-md-12">
									<table class="table table-condensed table-hover">
										<thead>
										<th>参数值</th>
										<th>参数类型</th>
										<th>限流阈值</th>
										<th>操作</th>
										</thead>
										<tbody>
										<tr ng-repeat="paramItem in currentRule.rule.paramFlowItemList">
											<td><input ng-model="paramItem.object" type="text" class="form-control" placeholder="例外项参数"></td>
											<td>
												<p>{{paramItem.classType}}</p>
											</td>
											<td>
												<input type="number" ng-model="paramItem.count" class="form-control" placeholder="限流阈值">
											</td>
											<td>
												<button type="button" class="btn btn-danger"
														ng-click="removeParamItem(paramItem.object, paramItem.classType)"><span
														class="fa fa-trash-o">&nbsp;删除</span></button>
											</td>
										</tr>
										</tbody>
									</table>
								</div>
							</div>

						</div>
					</div>

					<!-- exclusion item part end -->
					<div class="form-group text-center" ng-if="paramFlowRuleDialog.supportAdvanced">
						<a ng-click="onOpenAdvanceClick()" ng-if="paramFlowRuleDialog.showAdvanceButton" style="cursor: pointer;">高级选项</a>
						<a ng-click="onCloseAdvanceClick()" ng-if="!paramFlowRuleDialog.showAdvanceButton" style="cursor: pointer;">关闭高级选项</a>
					</div>
				</form>
			</div>
			<div class="separator"></div>
			<div clss="row" style="margin-top: 20px;">
				<button class="btn btn-outline-danger" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="closeThisDialog()">取消</button>
				<button class="btn btn-outline-success" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="saveRule()">{{paramFlowRuleDialog.confirmBtnText}}</button>
				<button ng-if="paramFlowRuleDialog.saveAndContinueBtnText" class="btn btn-default" style="float:right; height: 30px;font-size: 12px;"
				 ng-click="saveRuleAndContinue()">{{paramFlowRuleDialog.saveAndContinueBtnText}}</button>
			</div>
		</div>
	</div>
</div>