mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2025-11-10 17:30:29 +08:00
优化节点设置交互
This commit is contained in:
刘祥超
@@ -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>
|
||||
|
||||
27
web/views/@default/clusters/cluster/node/settings/cache/index.html
vendored
Normal file
27
web/views/@default/clusters/cluster/node/settings/cache/index.html
vendored
Normal 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>
|
||||
3
web/views/@default/clusters/cluster/node/settings/cache/index.js
vendored
Normal file
3
web/views/@default/clusters/cluster/node/settings/cache/index.js
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyReloadSuccess("保存成功")
|
||||
})
|
||||
@@ -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>
|
||||
@@ -0,0 +1,3 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyReloadSuccess("保存成功")
|
||||
})
|
||||
@@ -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>
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -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>
|
||||
@@ -0,0 +1,3 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyReloadSuccess("保存成功")
|
||||
})
|
||||
@@ -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>
|
||||
<a href="" @click.prevent="deleteThreshold(threshold.id)">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@@ -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
|
||||
})
|
||||
@@ -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>
|
||||
<a href="" @click.prevent="deleteThreshold(threshold.id)">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -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> <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>
|
||||
@@ -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
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user