param-flow-rule-dialog.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. <div>
  2. <span class="brand" style="font-weight:bold;">{{paramFlowRuleDialog.title}}</span>
  3. <div class="card" style="margin-top: 20px;margin-bottom: 10px;">
  4. <div class="panel-body">
  5. <div class="clearfix">
  6. <form role="form" class="form-horizontal">
  7. <div class="form-group">
  8. <label class="col-sm-2 control-label">资源名</label>
  9. <div class="col-sm-9">
  10. <input type="text" ng-if="paramFlowRuleDialog.type == 'edit'" class="form-control" placeholder="资源名" ng-model='currentRule.rule.resource' disabled="" />
  11. <input type="text" ng-if="paramFlowRuleDialog.type == 'add'" class="form-control highlight-border" placeholder="资源名" ng-model='currentRule.rule.resource' required />
  12. </div>
  13. </div>
  14. <div class="form-group">
  15. <label class="col-sm-2 control-label">限流模式</label>
  16. <p class="col-sm-9 control-label" style="text-align: left; font-weight: normal;">QPS 模式</p>
  17. </div>
  18. <div class="form-group">
  19. <label class="col-sm-2 control-label">参数索引</label>
  20. <div class="col-sm-9">
  21. <input type="number" class="form-control highlight-border" ng-model='currentRule.rule.paramIdx' placeholder='请填入传入的热点参数的索引(从 0 开始)' />
  22. </div>
  23. </div>
  24. <div class="form-group">
  25. <div ng-if="!currentRule.rule.clusterMode">
  26. <label class="col-sm-2 control-label">单机阈值</label>
  27. <div class="col-sm-3">
  28. <input type="number" class="form-control highlight-border" ng-model='currentRule.rule.count' placeholder='单机阈值' />
  29. </div>
  30. <label class="col-sm-3 control-label" title="统计窗口时间长度,单位为 s">统计窗口时长</label>
  31. <div class="input-group col-sm-3">
  32. <input type="number" class="form-control highlight-border"
  33. ng-model='currentRule.rule.durationInSec' min="1"
  34. placeholder='请填入统计窗口时长(单位为 秒)' />
  35. <span class="input-group-addon">秒</span>
  36. </div>
  37. </div>
  38. <div ng-if="currentRule.rule.clusterMode && currentRule.rule.clusterConfig.thresholdType == 0">
  39. <label class="col-sm-2 control-label">均摊阈值</label>
  40. <div class="col-sm-9">
  41. <input type="number" class="form-control highlight-border" ng-model='currentRule.rule.count' placeholder='集群均摊阈值' />
  42. </div>
  43. </div>
  44. <div ng-if="currentRule.rule.clusterMode && currentRule.rule.clusterConfig.thresholdType == 1">
  45. <label class="col-sm-2 control-label">集群阈值</label>
  46. <div class="col-sm-9">
  47. <input type="number" class="form-control highlight-border" ng-model='currentRule.rule.count' placeholder='集群总体阈值' />
  48. </div>
  49. </div>
  50. </div>
  51. <div class="form-group">
  52. <label class="col-sm-2 control-label">是否集群</label>
  53. <div class="col-sm-2">
  54. <input type="checkbox" name="clusterMode" ng-model="currentRule.rule.clusterMode">
  55. </div>
  56. <div ng-if="currentRule.rule.clusterMode">
  57. <label class="col-sm-3 control-label">集群阈值模式</label>
  58. <div class="col-sm-4">
  59. <div class="form-control highlight-border" align="center">
  60. <input type="radio" name="clusterThresholdType" value="0" ng-model='currentRule.rule.clusterConfig.thresholdType' />&nbsp;单机均摊&nbsp;&nbsp;
  61. <input type="radio" name="clusterThresholdType" value="1" ng-model='currentRule.rule.clusterConfig.thresholdType' />&nbsp;总体阈值
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. <div class="form-group" ng-if="currentRule.rule.clusterMode">
  67. <label class="col-sm-2 control-label">失败退化</label>
  68. <div class="col-sm-8">
  69. <div class="checkbox-inline">
  70. <input type="checkbox" name="fallbackToLocalWhenFail"
  71. ng-model="currentRule.rule.clusterConfig.fallbackToLocalWhenFail">
  72. <i class="glyphicon glyphicon-info-sign"></i>&nbsp;若选择,则 Token Server 不可用时将退化到单机限流
  73. </div>
  74. </div>
  75. </div>
  76. <!-- exclusion item part start -->
  77. <div ng-if="!paramFlowRuleDialog.showAdvanceButton">
  78. <hr />
  79. <div class="form-group">
  80. <div class="form-group" style="text-align: center">
  81. <label class="control-label">参数例外项</label>
  82. </div>
  83. <div class="form-group">
  84. <label class="col-sm-2 control-label">参数类型</label>
  85. <div class="col-md-9">
  86. <select ng-model="curExItem.classType" ng-options="classType for classType in paramItemClassTypeList" class="form-control" placeholder="请选择参数类型">
  87. </select>
  88. </div>
  89. </div>
  90. <div class="form-group">
  91. <label class="col-sm-2 control-label">参数值</label>
  92. <div class="col-md-3">
  93. <input ng-model="curExItem.object" type="text" class="form-control" placeholder="例外项参数值">
  94. </div>
  95. <label class="col-sm-2 control-label">限流阈值</label>
  96. <div class="col-md-3">
  97. <input type="number" ng-model="curExItem.count" class="form-control" placeholder="限流阈值">
  98. </div>
  99. <div class="col-md-2">
  100. <button type="button" class="btn btn-success"
  101. ng-disabled="notValidParamItem(curExItem)"
  102. ng-click="addParamItem()">
  103. <span class="fa fa-plus">&nbsp;添加</span>
  104. </button>
  105. </div>
  106. </div>
  107. <div>
  108. <div class="col-md-12">
  109. <table class="table table-condensed table-hover">
  110. <thead>
  111. <th>参数值</th>
  112. <th>参数类型</th>
  113. <th>限流阈值</th>
  114. <th>操作</th>
  115. </thead>
  116. <tbody>
  117. <tr ng-repeat="paramItem in currentRule.rule.paramFlowItemList">
  118. <td><input ng-model="paramItem.object" type="text" class="form-control" placeholder="例外项参数"></td>
  119. <td>
  120. <p>{{paramItem.classType}}</p>
  121. </td>
  122. <td>
  123. <input type="number" ng-model="paramItem.count" class="form-control" placeholder="限流阈值">
  124. </td>
  125. <td>
  126. <button type="button" class="btn btn-danger"
  127. ng-click="removeParamItem(paramItem.object, paramItem.classType)"><span
  128. class="fa fa-trash-o">&nbsp;删除</span></button>
  129. </td>
  130. </tr>
  131. </tbody>
  132. </table>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. <!-- exclusion item part end -->
  138. <div class="form-group text-center" ng-if="paramFlowRuleDialog.supportAdvanced">
  139. <a ng-click="onOpenAdvanceClick()" ng-if="paramFlowRuleDialog.showAdvanceButton" style="cursor: pointer;">高级选项</a>
  140. <a ng-click="onCloseAdvanceClick()" ng-if="!paramFlowRuleDialog.showAdvanceButton" style="cursor: pointer;">关闭高级选项</a>
  141. </div>
  142. </form>
  143. </div>
  144. <div class="separator"></div>
  145. <div clss="row" style="margin-top: 20px;">
  146. <button class="btn btn-outline-danger" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="closeThisDialog()">取消</button>
  147. <button class="btn btn-outline-success" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="saveRule()">{{paramFlowRuleDialog.confirmBtnText}}</button>
  148. <button ng-if="paramFlowRuleDialog.saveAndContinueBtnText" class="btn btn-default" style="float:right; height: 30px;font-size: 12px;"
  149. ng-click="saveRuleAndContinue()">{{paramFlowRuleDialog.saveAndContinueBtnText}}</button>
  150. </div>
  151. </div>
  152. </div>
  153. </div>