前端页面
This commit is contained in:
robin
@@ -1,8 +1,4 @@
|
||||
<second-menu>
|
||||
<menu-item :href="'/httpdns/clusters/cluster?clusterId=' + cluster.id">{{cluster.name}}</menu-item>
|
||||
<second-menu>
|
||||
<a class="item" :href="'/httpdns/clusters/cluster?clusterId=' + cluster.id">{{cluster.name}}</a>
|
||||
<span class="item disabled" style="padding-left: 0; padding-right: 0">»</span>
|
||||
<menu-item :href="'/httpdns/clusters/cluster?clusterId=' + cluster.id" code="index">节点列表</menu-item>
|
||||
<menu-item :href="'/httpdns/clusters/createNode?clusterId=' + cluster.id" code="createNode">创建节点</menu-item>
|
||||
<menu-item :href="'/httpdns/clusters/cluster/settings?clusterId=' + cluster.id" code="settings">集群设置</menu-item>
|
||||
<menu-item :href="'/httpdns/clusters/delete?clusterId=' + cluster.id" code="delete">删除集群</menu-item>
|
||||
</second-menu>
|
||||
</second-menu>
|
||||
@@ -1,10 +1,11 @@
|
||||
{$layout}
|
||||
{$template "cluster_menu"}
|
||||
<div class="ui margin"></div>
|
||||
|
||||
<div class="right-menu">
|
||||
<a :href="'/httpdns/clusters/createNode?clusterId=' + clusterId" class="item">[创建节点]</a>
|
||||
</div>
|
||||
<second-menu>
|
||||
<a class="item" :href="'/httpdns/clusters/cluster?clusterId=' + cluster.id">{{cluster.name}}</a>
|
||||
<span class="item disabled" style="padding-left: 0; padding-right: 0">»</span>
|
||||
<div class="item"><strong>节点列表</strong></div>
|
||||
<a class="item" :href="'/httpdns/clusters/createNode?clusterId=' + clusterId">创建节点</a>
|
||||
</second-menu>
|
||||
|
||||
<form class="ui form" action="/httpdns/clusters/cluster">
|
||||
<input type="hidden" name="clusterId" :value="clusterId" />
|
||||
@@ -43,6 +44,9 @@
|
||||
<tr>
|
||||
<th>节点名称</th>
|
||||
<th>IP地址</th>
|
||||
<th class="center">CPU</th>
|
||||
<th class="center">内存</th>
|
||||
<th class="center">负载</th>
|
||||
<th class="width-5 center">状态</th>
|
||||
<th class="two op">操作</th>
|
||||
</tr>
|
||||
@@ -64,11 +68,21 @@
|
||||
<div class="ui label tiny basic">{{addr.ip}}
|
||||
<span class="small" v-if="addr.name.length > 0">（{{addr.name}}）</span>
|
||||
<span class="small red" v-if="!addr.canAccess" title="不公开访问">[内]</span>
|
||||
<span class="small red" v-if="!addr.isOn">[下线]</span>
|
||||
<span class="small red" v-if="!addr.isUp" title="健康检查失败">[宕机]</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="center">
|
||||
<span v-if="node.status != null && node.status.isActive">{{node.status.cpuUsageText}}</span>
|
||||
<span v-else class="disabled">-</span>
|
||||
</td>
|
||||
<td class="center">
|
||||
<span v-if="node.status != null && node.status.isActive">{{node.status.memUsageText}}</span>
|
||||
<span v-else class="disabled">-</span>
|
||||
</td>
|
||||
<td class="center">
|
||||
<span v-if="node.status != null && node.status.isActive && node.status.load1m > 0">{{node.status.load1m}}</span>
|
||||
<span v-else class="disabled">-</span>
|
||||
</td>
|
||||
<td class="center">
|
||||
<div v-if="!node.isUp">
|
||||
<span class="red">宕机</span>
|
||||
@@ -88,4 +102,4 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="page" v-html="page"></div>
|
||||
<div class="page" v-html="page"></div>
|
||||
|
||||
@@ -1,31 +1,57 @@
|
||||
{$layout}
|
||||
{$template "cluster_menu"}
|
||||
<div class="ui margin"></div>
|
||||
|
||||
<h3 class="ui header">集群设置</h3>
|
||||
<p><strong>{{cluster.name}}</strong></p>
|
||||
{$var "header"}
|
||||
<script src="/servers/certs/datajs" type="text/javascript"></script>
|
||||
<script src="/js/sortable.min.js" type="text/javascript"></script>
|
||||
{$end}
|
||||
|
||||
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="clusterId" :value="cluster.id" />
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">集群名称 *</td>
|
||||
<td>
|
||||
<input type="text" name="name" maxlength="50" ref="focus" v-model="cluster.name" />
|
||||
<p class="comment">用于区分不同环境的解析节点池。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>集群服务域名 *</td>
|
||||
<td>
|
||||
<input type="text" name="gatewayDomain" maxlength="255" v-model="settings.gatewayDomain" placeholder="例如 gw-hz.httpdns.example.com" />
|
||||
<p class="comment">该集群下应用用于 SDK 接入的 HTTPDNS 服务域名。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<second-menu>
|
||||
<a class="item" :href="'/httpdns/clusters/cluster?clusterId=' + cluster.id">{{cluster.name}}</a>
|
||||
<span class="item disabled" style="padding-left: 0; padding-right: 0">»</span>
|
||||
<div class="item"><strong>集群设置</strong></div>
|
||||
</second-menu>
|
||||
|
||||
|
||||
{$template "/left_menu_with_menu"}
|
||||
|
||||
<div class="right-box with-menu">
|
||||
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="clusterId" :value="cluster.id" />
|
||||
|
||||
<table class="ui table definition selectable" v-show="activeSection == 'basic'">
|
||||
<tr>
|
||||
<td class="title">集群名称 *</td>
|
||||
<td>
|
||||
<input type="text" name="name" maxlength="50" ref="focus" v-model="cluster.name" />
|
||||
<p class="comment">用于在系统内部标识该 HTTPDNS 集群。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>服务域名 *</td>
|
||||
<td>
|
||||
<input type="text" name="gatewayDomain" maxlength="255" v-model="settings.gatewayDomain"
|
||||
placeholder="例如 gw-hz.httpdns.example.com" />
|
||||
<p class="comment">当前集群对外提供 HTTPDNS 服务的接入域名。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>节点安装根目录</td>
|
||||
<td>
|
||||
<input type="text" name="installDir" maxlength="100" v-model="settings.installDir" />
|
||||
<p class="comment">边缘节点安装 HTTPDNS 服务的默认所在目录，此目录将被用于下发配置。通常保持默认即可。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认解析 TTL</td>
|
||||
<td>
|
||||
<div class="ui input right labeled">
|
||||
<input type="text" name="cacheTtl" maxlength="5" v-model="settings.cacheTtl"
|
||||
style="width: 6em" />
|
||||
<span class="ui label">秒</span>
|
||||
</div>
|
||||
<p class="comment">SDK 向 HTTPDNS 请求域名解析时，返回的默认缓存有效期 (TTL)。SDK 超时后将重新发起请求。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>降级超时容忍度</td>
|
||||
<td>
|
||||
@@ -34,38 +60,46 @@
|
||||
style="width: 6em" />
|
||||
<span class="ui label">毫秒</span>
|
||||
</div>
|
||||
<p class="comment">HTTPDNS 网关请求源站超时多长时间后，强制降级返回缓存兜底IP（保障 P99 响应延迟）。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>本地内存缓存</td>
|
||||
<td>
|
||||
<div class="ui input right labeled">
|
||||
<input type="text" name="cacheTtl" maxlength="5" v-model="settings.cacheTtl"
|
||||
style="width: 6em" />
|
||||
<span class="ui label">秒</span>
|
||||
</div>
|
||||
<p class="comment">在网关节点内存中缓存解析结果的时长，缓解峰值查询压力。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>节点安装根目录</td>
|
||||
<td>
|
||||
<input type="text" name="installDir" maxlength="100" v-model="settings.installDir" />
|
||||
<p class="comment">此集群下新加网关节点的主程序默认部署路径。</p>
|
||||
<p class="comment">HTTPDNS 节点在回源查询其它 DNS 时的最大等待时间。超出此时间将触发服务降级逻辑（返回上一有效缓存或错误）。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>启用当前集群</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="isOn" value="1" v-model="settings.isOn" />
|
||||
<input type="checkbox" name="isOn" value="1" v-model="settings.isOn"
|
||||
@change="syncDefaultCluster" />
|
||||
<label></label>
|
||||
</div>
|
||||
<p class="comment">如果取消启用，此集群下的所有 HTTPDNS 网关节点将停止处理解析请求。</p>
|
||||
<p class="comment">如果取消启用，整个集群的 HTTPDNS 解析服务将停止。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
<tr>
|
||||
<td>默认集群</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="isDefaultCluster" value="1" v-model="settings.isDefaultCluster" />
|
||||
<label>设置为默认部署集群</label>
|
||||
</div>
|
||||
<p class="comment">全局设置。如果应用未单独指定集群，将默认分配和部署到该集群中。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table class="ui table selectable definition" v-show="activeSection == 'tls'">
|
||||
<tr>
|
||||
<td class="title">绑定端口 *</td>
|
||||
<td>
|
||||
<network-addresses-box :v-url="'/httpdns/addPortPopup'" :v-addresses="tlsConfig.listen"
|
||||
:v-protocol="'tls'" :v-support-range="true"></network-addresses-box>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- SSL配置 -->
|
||||
<ssl-config-box v-show="activeSection == 'tls'" :v-ssl-policy="tlsConfig.sslPolicy"
|
||||
:v-protocol="'tls'"></ssl-config-box>
|
||||
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
</div>
|
||||
@@ -1,3 +1,11 @@
|
||||
Tea.context(function () {
|
||||
Tea.context(function () {
|
||||
this.success = NotifyReloadSuccess("保存成功");
|
||||
|
||||
this.activeSection = this.activeSection || "basic";
|
||||
this.tlsAdvancedVisible = false;
|
||||
|
||||
if (!this.settings) {
|
||||
this.settings = {};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
{$layout}
|
||||
{$template "cluster_menu"}
|
||||
|
||||
<second-menu>
|
||||
<a class="item" :href="'/httpdns/clusters/cluster?clusterId=' + cluster.id">{{cluster.name}}</a>
|
||||
<span class="item disabled" style="padding-left: 0; padding-right: 0">»</span>
|
||||
<div class="item"><strong>创建节点</strong></div>
|
||||
</second-menu>
|
||||
|
||||
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="clusterId" :value="clusterId" />
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
{$layout}
|
||||
{$template "cluster_menu"}
|
||||
<div class="ui margin"></div>
|
||||
|
||||
<second-menu>
|
||||
<a class="item" :href="'/httpdns/clusters/cluster?clusterId=' + cluster.id">{{cluster.name}}</a>
|
||||
<span class="item disabled" style="padding-left: 0; padding-right: 0">»</span>
|
||||
<div class="item"><strong>删除集群</strong></div>
|
||||
</second-menu>
|
||||
|
||||
<div class="buttons-box">
|
||||
<button class="ui button red" type="button" @click.prevent="deleteCluster(cluster.id)">删除当前集群</button>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
{$layout}
|
||||
{$template "menu"}
|
||||
|
||||
<div class="ui margin"></div>
|
||||
|
||||
<div>
|
||||
<div v-if="hasErrorLogs" class="ui icon message small error">
|
||||
<i class="icon warning circle"></i>
|
||||
@@ -66,3 +68,4 @@
|
||||
|
||||
<div class="page" v-html="page"></div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user