flow-rule-dialog.html 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <div>
  2. <span class="brand" style="font-weight:bold;">{{gatewayFlowRuleDialog.title}}</span>
  3. <div class="card" style="margin-top: 20px;margin-bottom: 10px;">
  4. <div class="panel-body">
  5. <div class="row">
  6. <form role="form" class="form-horizontal">
  7. <div class="form-group">
  8. <label class="col-sm-2 control-label">API 类型</label>
  9. <div class="col-sm-9">
  10. <div class="form-control highlight-border" align="center">
  11. <input type="radio" ng-if="gatewayFlowRuleDialog.type == 'edit'" value="0" checked ng-model='currentRule.resourceMode'
  12. disabled="" title="Route ID" /><span ng-if="gatewayFlowRuleDialog.type == 'edit'">&nbsp;Route ID&nbsp;&nbsp;</span>
  13. <input type="radio" ng-if="gatewayFlowRuleDialog.type == 'add'" value="0" checked ng-model='currentRule.resourceMode'
  14. title="Route ID" ng-click="useRouteID()"/><span ng-if="gatewayFlowRuleDialog.type == 'add'">&nbsp;Route ID&nbsp;&nbsp;</span>
  15. <input type="radio" ng-if="gatewayFlowRuleDialog.type == 'edit'" value="1" ng-model='currentRule.resourceMode'
  16. disabled="" title="API分组" /><span ng-if="gatewayFlowRuleDialog.type == 'edit'">&nbsp;API 分组&nbsp&nbsp;</span>
  17. <input type="radio" ng-if="gatewayFlowRuleDialog.type == 'add'" value="1" ng-model='currentRule.resourceMode'
  18. title="API分组" ng-click="useCustormAPI()"/><span ng-if="gatewayFlowRuleDialog.type == 'add'">&nbsp;API 分组&nbsp&nbsp;</span>
  19. </div>
  20. </div>
  21. </div>
  22. <div class="form-group">
  23. <label class="col-sm-2 control-label">API 名称</label>
  24. <div class="col-sm-9">
  25. <input type="text" ng-if="currentRule.resourceMode == 0 && gatewayFlowRuleDialog.type == 'edit'" class="form-control" placeholder="请输入 Route ID" ng-model='currentRule.resource'
  26. disabled="" />
  27. <input type="text" ng-if="currentRule.resourceMode == 0 && gatewayFlowRuleDialog.type == 'add'" class="form-control highlight-border" placeholder="请输入 Route ID" ng-model='currentRule.resource' />
  28. <select ng-if="currentRule.resourceMode == 1 && gatewayFlowRuleDialog.type == 'edit'" ng-model="currentRule.resource" ng-init="selectedName = currentRule.resource"
  29. disabled="" ng-options="name for name in apiNames" class="form-control">
  30. </select>
  31. <select ng-if="currentRule.resourceMode == 1 && gatewayFlowRuleDialog.type == 'add'" ng-model="currentRule.resource" ng-init="currentRule.resource"
  32. ng-options="name for name in apiNames" class="form-control">
  33. </select>
  34. </div>
  35. </div>
  36. <div class="form-group">
  37. <label class="col-sm-2 control-label">针对请求属性</label>
  38. <div class="col-sm-2">
  39. <label class="checkbox-inline">
  40. <input type="checkbox" ng-if="currentRule.paramItem != null" checked ng-click="notUseParamItem()" />
  41. <input type="checkbox" ng-if="currentRule.paramItem == null" ng-click="useParamItem()" />
  42. </label>
  43. </div>
  44. </div>
  45. <div class="form-group" ng-if="currentRule.paramItem != null">
  46. <label class="col-sm-2 control-label">参数属性</label>
  47. <div class="col-sm-9">
  48. <div class="form-control highlight-border" align="center">
  49. <input type="radio" name="parseStrategy" value="0" checked ng-model='currentRule.paramItem.parseStrategy' title="Client IP" />&nbsp;Client IP&nbsp;&nbsp;
  50. <input type="radio" name="parseStrategy" value="1" ng-model='currentRule.paramItem.parseStrategy' title="Remote Host" />&nbsp;Remote Host&nbsp;&nbsp;
  51. <input type="radio" name="parseStrategy" value="2" ng-model='currentRule.paramItem.parseStrategy' title="Header" />&nbsp;Header&nbsp;&nbsp;
  52. <input type="radio" name="parseStrategy" value="3" ng-model='currentRule.paramItem.parseStrategy' title="URL 参数" />&nbsp;URL 参数&nbsp;&nbsp;
  53. <input type="radio" name="parseStrategy" value="4" ng-model='currentRule.paramItem.parseStrategy' title="Cookie" />&nbsp;Cookie&nbsp;&nbsp;
  54. </div>
  55. </div>
  56. </div>
  57. <div class="form-group" ng-if="currentRule.paramItem != null && (currentRule.paramItem.parseStrategy == 2 || currentRule.paramItem.parseStrategy == 3 || currentRule.paramItem.parseStrategy == 4)">
  58. <label class="col-sm-2 control-label">
  59. <span ng-if="currentRule.paramItem.parseStrategy==2">Header 名称</span>
  60. <span ng-if="currentRule.paramItem.parseStrategy==3">URL 参数名称</span>
  61. <span ng-if="currentRule.paramItem.parseStrategy==4">Cookie 名称</span>
  62. </label>
  63. <div class="col-sm-9">
  64. <input type="text" name="fieldName" class="form-control highlight-border" placeholder="请输入" ng-model='currentRule.paramItem.fieldName' />
  65. </div>
  66. </div>
  67. <div class="form-group" ng-if="currentRule.paramItem != null">
  68. <label class="col-sm-2 control-label">属性值匹配</label>
  69. <div class="col-sm-2">
  70. <label class="checkbox-inline">
  71. <input type="checkbox" ng-if="currentRule.paramItem.pattern != null" checked ng-click="notUseParamItemVal()"/>
  72. <input type="checkbox" ng-if="currentRule.paramItem.pattern == null" ng-click="useParamItemVal()"/>
  73. </label>
  74. </div>
  75. </div>
  76. <div class="form-group" ng-if="currentRule.paramItem.pattern != null">
  77. <label class="col-sm-2 control-label">匹配模式</label>
  78. <div class="col-sm-4 control-label">
  79. <div class="form-control highlight-border" align="center">
  80. <input type="radio" value="0" checked ng-model="currentRule.paramItem.matchStrategy" title="精确" />&nbsp;精确&nbsp;&nbsp;
  81. <input type="radio" value="3" ng-model="currentRule.paramItem.matchStrategy" title="子串" />&nbsp;子串&nbsp;&nbsp;
  82. <input type="radio" value="2" ng-model="currentRule.paramItem.matchStrategy" title="正则" />&nbsp;正则&nbsp;&nbsp;
  83. </div>
  84. </div>
  85. <label class="col-sm-2 control-label">匹配串</label>
  86. <div class="col-sm-3 control-label">
  87. <input type='text' ng-model="currentRule.paramItem.pattern" class="form-control highlight-border" placeholder="匹配串" />
  88. </div>
  89. </div>
  90. <div class="form-group">
  91. <label class="col-sm-2 control-label">阈值类型</label>
  92. <div class="col-sm-9">
  93. <div class="form-control highlight-border" align="center">
  94. <input type="radio" name="grade" value="1" checked ng-model="currentRule.grade" title="QPS" />&nbsp;QPS&nbsp;&nbsp;
  95. <input type="radio" name="grade" value="0" ng-model="currentRule.grade" title="线程数" />&nbsp;线程数&nbsp;&nbsp;
  96. </div>
  97. </div>
  98. </div>
  99. <div class="form-group">
  100. <div>
  101. <label class="col-sm-2 control-label">
  102. <span ng-if="currentRule.grade==1">QPS 阈值</span>
  103. <span ng-if="currentRule.grade==0">线程数</span>
  104. </label>
  105. <div class="col-sm-3">
  106. <input type='number' min="0" class="form-control highlight-border" ng-model='currentRule.count' placeholder="阈值" />
  107. </div>
  108. </div>
  109. </div>
  110. <div class="form-group" ng-if="currentRule.grade==1">
  111. <div>
  112. <label class="col-sm-2 control-label">间隔</label>
  113. <div class="col-sm-3">
  114. <input type='number' id="txtInterval" min="1" class="form-control highlight-border" ng-model='currentRule.interval' placeholder="统计窗口时间长度" />
  115. </div>
  116. <div class="col-sm-2">
  117. <select ng-model="currentRule.intervalUnit" ng-init="currentRule.intervalUnit"
  118. ng-options="intervalUnit.val as intervalUnit.desc for intervalUnit in intervalUnits" class="form-control" ng-click="changeIntervalUnit()">
  119. </select>
  120. </div>
  121. </div>
  122. </div>
  123. <div class="form-group" ng-if="currentRule.grade==1">
  124. <label class="col-sm-2 control-label">流控方式</label>
  125. <div class="col-sm-9">
  126. <div class="form-control highlight-border" align="center">
  127. <input type="radio" name="controlBehavior" value="0" checked ng-model='currentRule.controlBehavior' title="快速失败" />&nbsp;快速失败&nbsp;&nbsp;
  128. <input type="radio" name="controlBehavior" value="2" ng-model='currentRule.controlBehavior' title="匀速排队" />&nbsp;匀速排队&nbsp&nbsp;
  129. </div>
  130. </div>
  131. </div>
  132. <div class="form-group" ng-if="currentRule.grade==1 && currentRule.controlBehavior==0">
  133. <div>
  134. <label class="col-sm-2 control-label">Burst size</label>
  135. <div class="col-sm-3">
  136. <input type='number' min="0" class="form-control highlight-border" ng-model='currentRule.burst' placeholder="突发请求额外允许数" />
  137. </div>
  138. </div>
  139. </div>
  140. <div class="form-group" ng-if="currentRule.grade==1 && currentRule.controlBehavior==2">
  141. <div>
  142. <label class="col-sm-2 control-label">超时时间</label>
  143. <div class="col-sm-3">
  144. <input type='number' min="0" class="form-control highlight-border" ng-model='currentRule.maxQueueingTimeoutMs' placeholder="排队等待时间(ms)" />
  145. </div>
  146. </div>
  147. </div>
  148. </form>
  149. </div>
  150. <div class="separator"></div>
  151. <div clss="row" style="margin-top: 20px;">
  152. <button class="btn btn-outline-danger" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="closeThisDialog()">取消</button>
  153. <button class="btn btn-outline-success" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="saveRule()">{{gatewayFlowRuleDialog.confirmBtnText}}</button>
  154. <button ng-if="gatewayFlowRuleDialog.saveAndContinueBtnText" class="btn btn-default" style="float:right; height: 30px;font-size: 12px;"
  155. ng-click="saveRuleAndContinue()">{{gatewayFlowRuleDialog.saveAndContinueBtnText}}</button>
  156. </div>
  157. </div>
  158. </div>
  159. </div>