[用户节点]可以管理用户节点

This commit is contained in:
刘祥超
2020-12-14 21:24:21 +08:00
parent 4955a86792
commit ac6c4bf751
39 changed files with 1205 additions and 19 deletions

View File

@@ -0,0 +1,35 @@
{$layout}
<first-menu>
<a href="" class="item" @click.prevent="createNode()">[添加节点]</a>
</first-menu>
<p class="comment" v-if="nodes.length == 0">暂时还没有节点。</p>
<table class="ui table selectable celled" v-if="nodes.length > 0">
<thead>
<tr>
<th>节点名称</th>
<th>访问地址</th>
<th class="center width10">状态</th>
<th class="two op">操作</th>
</tr>
</thead>
<tr v-for="node in nodes">
<td>{{node.name}}</td>
<td>
<div v-if="node.accessAddrs != null && node.accessAddrs.length > 0">
<span class="ui label tiny basic" v-for="addr in node.accessAddrs">{{addr}}</span>
</div>
</td>
<td class="center">
<label-on :v-is-on="node.isOn"></label-on>
</td>
<td>
<a :href="'/settings/userNodes/node?nodeId=' + node.id">详情</a> &nbsp;
<a href="" @click.prevent="deleteNode(node.id)">删除</a>
</td>
</tr>
</table>
<div class="page" v-html="page"></div>

View File

@@ -0,0 +1,26 @@
Tea.context(function () {
// 创建节点
this.createNode = function () {
teaweb.popup("/settings/userNodes/node/createPopup", {
width: "50em",
height: "30em",
callback: function () {
teaweb.success("保存成功", function () {
teaweb.reload()
})
}
})
}
// 删除节点
this.deleteNode = function (nodeId) {
let that = this
teaweb.confirm("确定要删除此节点吗?", function () {
that.$post("/settings/userNodes/delete")
.params({
nodeId: nodeId
})
.refresh()
})
}
})

View File

@@ -0,0 +1,7 @@
<first-menu>
<menu-item href="/settings/userNodes">节点列表</menu-item>
<span class="item">|</span>
<menu-item :href="'/settings/userNodes/node?nodeId=' + node.id" code="index">"{{node.name}}"详情</menu-item>
<menu-item :href="'/settings/userNodes/node/install?nodeId=' + node.id" code="install">安装节点</menu-item>
<menu-item :href="'/settings/userNodes/node/update?nodeId=' + node.id" code="update">修改节点</menu-item>
</first-menu>

View File

@@ -0,0 +1,24 @@
{$layout "layout_popup"}
<h3>添加访问地址</h3>
<form class="ui form" method="post" data-tea-action="$" data-tea-success="success">
<table class="ui table definition selectable">
<tr>
<td>网络协议</td>
<td>
<select class="ui dropdown auto-width" name="protocol">
<option value="http">HTTP</option>
<option value="https">HTTPS</option>
</select>
</td>
</tr>
<tr>
<td class="title">访问地址</td>
<td>
<input type="text" name="addr" maxlength="100" ref="focus"/>
<p class="comment">可以是"IP:端口"或者"域名:端口"。</p>
</td>
</tr>
</table>
<submit-btn></submit-btn>
</form>

View File

@@ -0,0 +1,55 @@
{$layout "layout_popup"}
<h3>添加用户节点</h3>
<form class="ui form" method="post" data-tea-action="$" data-tea-success="success">
<table class="ui table selectable definition">
<tr>
<td class="title">节点名称 *</td>
<td>
<input type="text" name="name" maxlength="100" ref="focus"/>
</td>
</tr>
<tr>
<td>进程监听端口 *</td>
<td>
<network-addresses-box :v-name="'listensJSON'" :v-server-type="'httpWeb'" @change="changeListens"></network-addresses-box>
<p class="comment">用户节点进程监听的网络端口。</p>
</td>
</tr>
<tr v-if="hasHTTPS">
<td>HTTPS证书 *</td>
<td>
<ssl-certs-box :v-protocol="'https'"></ssl-certs-box>
</td>
</tr>
<tr>
<td>外部访问地址 *</td>
<td>
<api-node-addresses-box :v-name="'accessAddrsJSON'"></api-node-addresses-box>
<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>
<textarea name="description" maxlength="200" rows="3"></textarea>
</td>
</tr>
<tr>
<td>是否启用</td>
<td>
<div class="ui checkbox">
<input type="checkbox" name="isOn" value="1" checked="checked"/>
<label></label>
</div>
</td>
</tr>
</tbody>
</table>
<submit-btn></submit-btn>
</form>

View File

@@ -0,0 +1,8 @@
Tea.context(function () {
this.hasHTTPS = false
this.changeListens = function (addrs) {
this.hasHTTPS = addrs.$any(function (k, v) {
return v.protocol == "https"
})
}
})

View File

@@ -0,0 +1,44 @@
{$layout}
{$template "menu"}
<table class="ui table selectable definition">
<tr>
<td class="title">节点名称</td>
<td>
{{node.name}}
</td>
</tr>
<tr>
<td>状态</td>
<td>
<label-on :v-is-on="node.isOn"></label-on>
</td>
</tr>
<tr>
<td>进程监听端口</td>
<td>
<network-addresses-view :v-addresses="node.listens"></network-addresses-view>
<p class="comment">用户节点进程监听的网络端口。</p>
</td>
</tr>
<tr v-if="node.hasHTTPS">
<td>HTTPS证书</td>
<td>
<ssl-certs-view :v-certs="node.certs"></ssl-certs-view>
</td>
</tr>
<tr>
<td>外部访问地址</td>
<td>
<network-addresses-view :v-addresses="node.accessAddrs"></network-addresses-view>
<p class="comment">可以公开访问的网络地址。</p>
</td>
</tr>
<tr>
<td>描述</td>
<td>
<span v-if="node.description.length > 0">{{node.description}}</span>
<span v-else class="disabled">暂时还没有描述。</span>
</td>
</tr>
</table>

View File

@@ -0,0 +1,23 @@
{$layout}
{$template "menu"}
<h3>安装步骤</h3>
<ol class="ui list">
<li>按照下面的配置信息替换<code-label>configs/api.yaml</code-label>内容</li>
<li>使用<code-label>bin/edge-user start</code-label>启动节点</li>
<li>可以在<code-label>logs/run.log</code-label>中查看启动是否有异常</li>
</ol>
<div class="ui divider"></div>
<h3>配置信息</h3>
<table class="ui table definition selectable">
<tr>
<td class="title">configs/api.yaml<em><br/><download-link :v-element="'api-code'" :v-file="'api.yaml'">[下载]</download-link></em></td>
<td>
<pre id="api-code">rpc:
endpoints: [ {{apiEndpoints}} ]
nodeId: "{{node.uniqueId}}"
secret: "{{node.secret}}"</pre>
</td>
</tr>
</table>

View File

@@ -0,0 +1,58 @@
{$layout}
{$template "menu"}
<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="sslPolicyId" :value="node.sslPolicyId"/>
<table class="ui table selectable definition">
<tr>
<td class="title">节点名称 *</td>
<td>
<input type="text" name="name" maxlength="100" ref="focus" v-model="node.name"/>
</td>
</tr>
<tr>
<td>进程监听端口 *</td>
<td>
<network-addresses-box :v-name="'listensJSON'" :v-server-type="'httpWeb'" :v-addresses="node.listens" @change="changeListens"></network-addresses-box>
<p class="comment">API节点进程监听的网络端口。</p>
</td>
</tr>
<tr v-if="hasHTTPS">
<td>HTTPS证书 *</td>
<td>
<ssl-certs-box :v-certs="node.certs" :v-protocol="'https'"></ssl-certs-box>
</td>
</tr>
<tr>
<td>外部访问地址 *</td>
<td>
<api-node-addresses-box :v-name="'accessAddrsJSON'" :v-addrs="node.accessAddrs"></api-node-addresses-box>
<p class="comment">边缘节点和管理平台等外部节点访问API节点的网络地址。</p>
</td>
</tr>
<tr>
<td colspan="2"><more-options-indicator></more-options-indicator></td>
</tr>
<tbody v-show="moreOptionsVisible">
<tr>
<td>描述</td>
<td>
<textarea name="description" maxlength="200" rows="3" v-model="node.description"></textarea>
</td>
</tr>
<tr>
<td>是否启用</td>
<td>
<div class="ui checkbox">
<input type="checkbox" name="isOn" value="1" v-model="node.isOn"/>
<label></label>
</div>
</td>
</tr>
</tbody>
</table>
<submit-btn></submit-btn>
</form>

View File

@@ -0,0 +1,12 @@
Tea.context(function () {
this.success = NotifySuccess("保存成功", "/settings/userNodes/node?nodeId=" + this.node.id)
this.hasHTTPS = this.node.listens.$any(function (k, v) {
return v.protocol == "https"
})
this.changeListens = function (addrs) {
this.hasHTTPS = addrs.$any(function (k, v) {
return v.protocol == "https"
})
}
})

View File

@@ -0,0 +1,24 @@
{$layout "layout_popup"}
<h3>修改访问地址</h3>
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
<table class="ui table definition selectable">
<tr>
<td>网络协议</td>
<td>
<select class="ui dropdown auto-width" name="protocol" v-model="protocol">
<option value="http">HTTP</option>
<option value="https">HTTPS</option>
</select>
</td>
</tr>
<tr>
<td class="title">访问地址</td>
<td>
<input type="text" name="addr" maxlength="100" ref="focus" v-model="addr"/>
<p class="comment">可以是"IP:端口"或者"域名:端口"。</p>
</td>
</tr>
</table>
<submit-btn></submit-btn>
</form>

View File

@@ -0,0 +1,5 @@
Tea.context(function () {
let addr = window.parent.UPDATING_ADDR
this.protocol = addr.protocol
this.addr = addr.host + ":" + addr.portRange
})