优化节点设置交互

This commit is contained in:
GoEdgeLab
2021-09-13 16:47:34 +08:00
parent 6dcd0a614f
commit b7a694e99d
32 changed files with 793 additions and 397 deletions

View File

@@ -5,7 +5,6 @@
v-if="!teaIsPlus">"{{node.name}}"节点详情</menu-item>
<menu-item :href="'/clusters/cluster/node/boards?clusterId=' + clusterId + '&nodeId=' + node.id" code="board" v-if="teaIsPlus">"{{node.name}}" 节点看板</menu-item>
<menu-item :href="'/clusters/cluster/node/detail?clusterId=' + clusterId + '&nodeId=' + node.id" code="node" v-if="teaIsPlus">节点详情</menu-item>
<menu-item :href="'/clusters/cluster/node/thresholds?clusterId=' + clusterId + '&nodeId=' + node.id" code="threshold" v-if="teaIsPlus">阈值设置</menu-item>
<menu-item :href="'/clusters/cluster/node/logs?clusterId=' + clusterId + '&nodeId=' + node.id" code="log">运行日志</menu-item>
<menu-item :href="'/clusters/cluster/node/install?clusterId=' + clusterId + '&nodeId=' + node.id" code="install">安装节点</menu-item>
<menu-item :href="'/clusters/cluster/node/update?clusterId=' + clusterId + '&nodeId=' + node.id" code="update">修改设置</menu-item>

View File

@@ -0,0 +1,27 @@
{$layout}
{$template "/clusters/cluster/node/node_menu"}
{$template "/left_menu_with_menu"}
<div class="right-box with-menu">
<form class="ui form" data-tea-action="$" data-tea-success="success">
<csrf-token></csrf-token>
<input type="hidden" name="nodeId" :value="node.id"/>
<table class="ui table definition selectable">
<tr>
<td class="title">缓存磁盘容量</td>
<td>
<size-capacity-box :v-value="node.maxCacheDiskCapacity" :v-name="'maxCacheDiskCapacityJSON'"></size-capacity-box>
<p class="comment">缓存能使用的磁盘的最大容量0表示不限制。</p>
</td>
</tr>
<tr>
<td>缓存内存容量</td>
<td>
<size-capacity-box :v-value="node.maxCacheMemoryCapacity" :v-name="'maxCacheMemoryCapacityJSON'"></size-capacity-box>
<p class="comment">缓存能使用的内存的最大容量0表示不限制。</p>
</td>
</tr>
</table>
<submit-btn></submit-btn>
</form>
</div>

View File

@@ -0,0 +1,3 @@
Tea.context(function () {
this.success = NotifyReloadSuccess("保存成功")
})

View File

@@ -0,0 +1,23 @@
{$layout}
{$template "/clusters/cluster/node/node_menu"}
{$template "/left_menu_with_menu"}
<div class="right-box with-menu">
<form class="ui form" data-tea-action="$" data-tea-success="success">
<csrf-token></csrf-token>
<input type="hidden" name="nodeId" :value="node.id"/>
<table class="ui table definition selectable">
<tr>
<td class="title">DNS线路</td>
<td>
<div v-if="allDNSRoutes.length > 0">
<dns-route-selector :v-all-routes="allDNSRoutes" :v-routes="dnsRoutes"></dns-route-selector>
<p class="comment">当前节点对应的DNS线路可用线路是根据集群设置的域名获取的注意DNS服务商可能对这些线路有其他限制。</p>
</div>
</td>
</tr>
</table>
<submit-btn></submit-btn>
</form>
</div>

View File

@@ -0,0 +1,3 @@
Tea.context(function () {
this.success = NotifyReloadSuccess("保存成功")
})

View File

@@ -0,0 +1,35 @@
{$layout}
{$template "/clusters/cluster/node/node_menu"}
{$template "/left_menu_with_menu"}
<div class="right-box with-menu">
<form class="ui form" data-tea-action="$" data-tea-success="success">
<csrf-token></csrf-token>
<input type="hidden" name="nodeId" :value="node.id"/>
<input type="hidden" name="loginId" :value="loginId"/>
<table class="ui table definition selectable">
<tr>
<td class="title">SSH主机地址</td>
<td>
<input type="text" name="sshHost" maxlength="64" v-model="sshHost"/>
<p class="comment">比如192.168.1.100</p>
</td>
</tr>
<tr>
<td>SSH主机端口</td>
<td>
<input type="text" name="sshPort" maxlength="5" v-model="sshPort"/>
<p class="comment">比如22。</p>
</td>
</tr>
<tr>
<td>SSH登录认证</td>
<td>
<grant-selector :v-grant="grant" :v-node-cluster-id="clusterId"></grant-selector>
</td>
</tr>
</table>
<submit-btn></submit-btn>
</form>
</div>

View File

@@ -0,0 +1,30 @@
Tea.context(function () {
this.success = NotifyReloadSuccess("保存成功")
// 认证相关
this.grant = null
this.sshHost = ""
this.sshPort = ""
this.loginId = 0
if (this.node.login != null) {
this.loginId = this.node.login.id
if (this.node.login.params != null) {
this.sshHost = this.node.login.params.host
if (this.node.login.params.port > 0) {
this.sshPort = this.node.login.params.port
}
}
if (this.node.login.grant != null && typeof this.node.login.grant.id != "undefined") {
this.grant = {
id: this.node.login.grant.id,
name: this.node.login.grant.name,
method: this.node.login.grant.method,
methodName: this.node.login.grant.methodName,
username: this.node.login.grant.username
}
}
}
})

View File

@@ -0,0 +1,20 @@
{$layout}
{$template "/clusters/cluster/node/node_menu"}
{$template "/left_menu_with_menu"}
<div class="right-box with-menu">
<form class="ui form" data-tea-success="success" data-tea-action="$">
<input type="hidden" name="nodeId" :value="node.id"/>
<csrf-token></csrf-token>
<table class="ui table definition selectable">
<tr>
<td class="title">CPU线程数</td>
<td>
<input type="text" name="maxCPU" v-model="node.maxCPU" style="width:5em" maxlength="5em"/>
<p class="comment">当前节点可以使用的最多的CPU线程数如果为0表示可以使用全部CPU。</p>
</td>
</tr>
</table>
<submit-btn></submit-btn>
</form>
</div>

View File

@@ -0,0 +1,3 @@
Tea.context(function () {
this.success = NotifyReloadSuccess("保存成功")
})

View File

@@ -0,0 +1,41 @@
{$layout}
{$template "/clusters/cluster/node/node_menu"}
{$template "/left_menu_with_menu"}
<div class="right-box with-menu">
<div>
<second-menu>
<menu-item @click.prevent="createThreshold">添加阈值</menu-item>
</second-menu>
</div>
<p class="comment" v-if="thresholds.length == 0">暂时还没有设置阈值。</p>
<table class="ui table selectable celled" v-if="thresholds.length > 0">
<thead>
<tr>
<th>监控项</th>
<th>参数</th>
<th>操作符</th>
<th>对比值</th>
<th>统计时间段</th>
<th class="two wide">状态</th>
<th class="two op">操作</th>
</tr>
</thead>
<tr v-for="threshold in thresholds">
<td>{{threshold.itemName}}</td>
<td>{{threshold.paramName}}</td>
<td>{{threshold.operatorName}}</td>
<td>{{threshold.value}}</td>
<td>{{threshold.duration}}{{threshold.durationUnitName}}</td>
<td>
<label-on :v-is-on="threshold.isOn"></label-on>
</td>
<td>
<a href="" @click.prevent="updateThreshold(threshold.id)">修改</a> &nbsp;
<a href="" @click.prevent="deleteThreshold(threshold.id)">删除</a>
</td>
</tr>
</table>
</div>

View File

@@ -27,7 +27,7 @@ Tea.context(function () {
this.deleteThreshold = function (thresholdId) {
let that = this
teaweb.confirm("确定要删除这个阈值吗?", function () {
that.$post(".delete")
that.$post("/clusters/cluster/settings/thresholds/delete")
.params({
thresholdId: thresholdId
})

View File

@@ -1,37 +0,0 @@
{$layout}
{$template "../node_menu"}
<div style="margin-top: -1em">
<second-menu>
<menu-item @click.prevent="createThreshold">添加阈值</menu-item>
</second-menu>
</div>
<p class="comment" v-if="thresholds.length == 0">暂时还没有设置阈值。</p>
<table class="ui table selectable celled" v-if="thresholds.length > 0">
<thead>
<tr>
<th>监控项</th>
<th>参数</th>
<th>操作符</th>
<th>对比值</th>
<th>统计时间段</th>
<th class="two wide">状态</th>
<th class="two op">操作</th>
</tr>
</thead>
<tr v-for="threshold in thresholds">
<td>{{threshold.itemName}}</td>
<td>{{threshold.paramName}}</td>
<td>{{threshold.operatorName}}</td>
<td>{{threshold.value}}</td>
<td>{{threshold.duration}}{{threshold.durationUnitName}}</td>
<td>
<label-on :v-is-on="threshold.isOn"></label-on>
</td>
<td>
<a href="" @click.prevent="updateThreshold(threshold.id)">修改</a> &nbsp;
<a href="" @click.prevent="deleteThreshold(threshold.id)">删除</a>
</td>
</tr>
</table>

View File

@@ -1,108 +1,65 @@
{$layout}
{$template "node_menu"}
<h3>修改节点</h3>
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
<input type="hidden" name="nodeId" :value="node.id"/>
<input type="hidden" name="loginId" :value="loginId"/>
<table class="ui table definition selectable">
<tr>
<td class="title">节点名称 *</td>
<td>
<input type="text" name="name" maxlength="50" ref="focus" v-model="node.name"/>
</td>
</tr>
<tr>
<td>所属集群</td>
<td>
<node-clusters-selector :v-primary-cluster="node.primaryCluster" :v-secondary-clusters="node.secondaryClusters" @change="changeClusters"></node-clusters-selector>
</td>
</tr>
<tr>
<td>IP地址 *</td>
<td>
<node-ip-addresses-box :v-ip-addresses="ipAddresses"></node-ip-addresses-box>
<p class="comment">用于访问节点和域名解析等。</p>
</td>
</tr>
<tr v-if="allDNSRoutes.length > 0">
<td>DNS线路</td>
<td>
<dns-route-selector :v-all-routes="allDNSRoutes" :v-routes="dnsRoutes"></dns-route-selector>
<p class="comment">当前节点对应的DNS线路可用线路是根据集群设置的域名获取的注意DNS服务商可能对这些线路有其他限制。</p>
</td>
</tr>
<tr>
<td>所属区域</td>
<td>
<node-region-selector :v-region="node.region"></node-region-selector>
<p class="comment">设置区域后才能根据区域进行流量统计和计费。</p>
</td>
</tr>
<tr>
<td>所属分组</td>
<td>
<node-group-selector :v-cluster-id="clusterId" :v-group="node.group"></node-group-selector>
<p class="comment">仅用来筛选服务。</p>
</td>
</tr>
<tr>
<td colspan="2"><more-options-indicator></more-options-indicator></td>
</tr>
<tbody v-show="moreOptionsVisible">
{$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="nodeId" :value="node.id"/>
<table class="ui table definition selectable">
<tr>
<td>SSH主机地址</td>
<td class="title">节点名称 *</td>
<td>
<input type="text" name="sshHost" maxlength="64" v-model="sshHost"/>
<p class="comment">比如192.168.1.100</p>
<input type="text" name="name" maxlength="50" ref="focus" v-model="node.name"/>
</td>
</tr>
<tr>
<td>SSH主机端口</td>
<td>所属集群</td>
<td>
<input type="text" name="sshPort" maxlength="5" v-model="sshPort"/>
<p class="comment">比如22。</p>
</td>
</tr>
<tr>
<td>SSH登录认证</td>
<td>
<grant-selector :v-grant="grant" :v-node-cluster-id="clusterId"></grant-selector>
</td>
</tr>
<tr>
<td>CPU线程数</td>
<td>
<input type="text" name="maxCPU" v-model="node.maxCPU" style="width:5em" maxlength="5em"/>
<p class="comment">当前节点可以使用的最多的CPU线程数如果为0表示可以使用全部CPU。</p>
</td>
</tr>
<tr>
<td>缓存磁盘容量</td>
<td>
<size-capacity-box :v-value="node.maxCacheDiskCapacity" :v-name="'maxCacheDiskCapacityJSON'"></size-capacity-box>
<p class="comment">缓存能使用的磁盘的最大容量0表示不限制。</p>
</td>
</tr>
<tr>
<td>缓存内存容量</td>
<td>
<size-capacity-box :v-value="node.maxCacheMemoryCapacity" :v-name="'maxCacheMemoryCapacityJSON'"></size-capacity-box>
<p class="comment">缓存能使用的内存的最大容量0表示不限制。</p>
</td>
</tr>
<tr>
<td>是否启用</td>
<td>
<div class="ui checkbox">
<input type="checkbox" name="isOn" value="1" v-model="node.isOn"/>
<label></label>
<span v-if="node.primaryCluster != null" class="ui label basic small">{{node.primaryCluster.name}}</span>
<span v-if="node.secondaryClusters.length > 0" v-for="cluster in node.secondaryClusters" class="ui label basic small grey">{{cluster.name}}</span> &nbsp; <a href="" @click.prevent="updateClusters">[修改]</a>
<div v-show="showClustersBox">
<node-clusters-selector :v-primary-cluster="node.primaryCluster" :v-secondary-clusters="node.secondaryClusters" @change="changeClusters"></node-clusters-selector>
</div>
<p class="comment">如果不启用此节点,此节点上的所有服务将不能访问。</p>
</td>
</tr>
</tbody>
</table>
<submit-btn></submit-btn>
</form>
<tr>
<td>IP地址 *</td>
<td>
<node-ip-addresses-box :v-ip-addresses="ipAddresses"></node-ip-addresses-box>
<p class="comment">用于访问节点和域名解析等。</p>
</td>
</tr>
<tr>
<td>所属区域</td>
<td>
<node-region-selector :v-region="node.region"></node-region-selector>
<p class="comment">设置区域后才能根据区域进行流量统计和计费。</p>
</td>
</tr>
<tr>
<td>所属分组</td>
<td>
<node-group-selector :v-cluster-id="clusterId" :v-group="node.group"></node-group-selector>
<p class="comment">仅用来筛选服务。</p>
</td>
</tr>
<tr>
<td colspan="2"><more-options-indicator></more-options-indicator></td>
</tr>
<tbody v-show="moreOptionsVisible">
<tr>
<td>是否启用</td>
<td>
<div class="ui checkbox">
<input type="checkbox" name="isOn" value="1" v-model="node.isOn"/>
<label></label>
</div>
<p class="comment">如果不启用此节点,此节点上的所有服务将不能访问。</p>
</td>
</tr>
</tbody>
</table>
<submit-btn></submit-btn>
</form>
</div>

View File

@@ -14,34 +14,16 @@ Tea.context(function () {
// IP地址相关
this.ipAddresses = this.node.ipAddresses
// 认证相关
this.grant = null
this.sshHost = ""
this.sshPort = ""
this.loginId = 0
if (this.node.login != null) {
this.loginId = this.node.login.id
if (this.node.login.params != null) {
this.sshHost = this.node.login.params.host
if (this.node.login.params.port > 0) {
this.sshPort = this.node.login.params.port
}
}
if (this.node.login.grant != null && typeof this.node.login.grant.id != "undefined") {
this.grant = {
id: this.node.login.grant.id,
name: this.node.login.grant.name,
method: this.node.login.grant.method,
methodName: this.node.login.grant.methodName,
username: this.node.login.grant.username
}
}
}
this.changeClusters = function (info) {
this.clusterId = info.clusterId
}
/**
* 集群相关
*/
this.showClustersBox = false
this.updateClusters = function () {
this.showClustersBox = !this.showClustersBox
}
})

View File

@@ -22,7 +22,7 @@
<tr v-for="threshold in thresholds">
<td>{{threshold.itemName}}
<div v-if="threshold.node != null" style="margin-top: 0.3em">
<a :href="'/clusters/cluster/node/thresholds?clusterId=' + clusterId + '&nodeId=' + threshold.node.id" class="ui label basic tiny" title="节点专属阈值设置"><span class="small">节点:{{threshold.node.name}}</span></a>
<a :href="'/clusters/cluster/node/settings/thresholds?clusterId=' + clusterId + '&nodeId=' + threshold.node.id" class="ui label basic tiny" title="节点专属阈值设置"><span class="small">节点:{{threshold.node.name}}</span></a>
</div>
</td>
<td>{{threshold.paramName}}</td>