将API设置URL从/api改为/settings/api

This commit is contained in:
刘祥超
2023-06-05 09:41:52 +08:00
parent 8c064daf3f
commit aaff8f0c4a
45 changed files with 31 additions and 31 deletions

View File

@@ -0,0 +1,8 @@
<first-menu>
<menu-item href="/settings/api">节点列表</menu-item>
<span class="item">|</span>
<menu-item :href="'/settings/api/node?nodeId=' + node.id" code="index">"{{node.name}}"详情</menu-item>
<menu-item :href="'/settings/api/node/logs?nodeId=' + node.id" code="log">运行日志</menu-item>
<menu-item :href="'/settings/api/node/install?nodeId=' + node.id" code="install">安装节点</menu-item>
<menu-item :href="'/settings/api/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,68 @@
{$layout "layout_popup"}
<h3>添加API节点</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>GRPC监听端口 *</td>
<td>
<network-addresses-box :v-name="'listensJSON'" :v-server-type="'httpWeb'" @change="changeListens" :v-from="'apiNode'"></network-addresses-box>
<p class="comment">通过GRPC访问API节点进程监听的网络端口。</p>
</td>
</tr>
<tr v-if="hasHTTPS">
<td>HTTPS证书 *</td>
<td>
<ssl-certs-box :v-protocol="'https'"></ssl-certs-box>
</td>
</tr>
<tr>
<td>GRPC 外部访问地址 *</td>
<td>
<api-node-addresses-box :v-name="'accessAddrsJSON'"></api-node-addresses-box>
<p class="comment">边缘节点和管理平台等外部节点访问API节点的网络地址需要保证其他节点能够通过此地址访问到API节点服务。<strong>访问地址里的端口号和监听端口通常一致,除非你做了端口转发。</strong></p>
</td>
</tr>
<tr>
<td colspan="2"><more-options-indicator></more-options-indicator></td>
</tr>
<tbody v-show="moreOptionsVisible">
<tr>
<td :class="{'color-border': restIsOn}">是否开启HTTP API端口</td>
<td>
<checkbox name="restIsOn" v-model="restIsOn">是否启用HTTP API</checkbox>
<p class="comment">启用后用户可以通过HTTP API调用服务接口。</p>
</td>
</tr>
<tr v-if="restIsOn">
<td class="color-border">HTTP API监听端口 *</td>
<td>
<network-addresses-box :v-name="'restListensJSON'" :v-server-type="'httpWeb'" @change="changeRestListens"></network-addresses-box>
<p class="comment">HTTP API节点进程监听的网络端口需要和当前节点的GRPC端口不同。</p>
</td>
</tr>
<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,27 @@
Tea.context(function () {
this.hasHTTPS = false
this.grpcAddrs = []
this.restAddrs = []
this.changeListens = function (addrs) {
this.grpcAddrs = addrs
this.hasHTTPS = this.grpcAddrs.$any(function (k, v) {
return v.protocol == "https"
}) || (this.restIsOn && this.restAddrs.$any(function (k, v) {
return v.protocol == "https"
}))
}
this.changeRestListens = function (addrs) {
this.restAddrs = addrs
this.hasHTTPS = this.grpcAddrs.$any(function (k, v) {
return v.protocol == "https"
}) || (this.restIsOn && this.restAddrs.$any(function (k, v) {
return v.protocol == "https"
}))
}
this.restIsOn = false
})

View File

@@ -0,0 +1,80 @@
{$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>GRPC监听端口</td>
<td>
<network-addresses-view :v-addresses="node.listens"></network-addresses-view>
<p class="comment">API节点进程监听的网络端口。</p>
</td>
</tr>
<tr v-if="node.hasHTTPS">
<td>HTTPS证书</td>
<td>
<div v-if="node.certs != null && node.certs.length > 0">
<ssl-certs-view :v-certs="node.certs"></ssl-certs-view>
</div>
<span v-else class="red">还没有设置证书可能会导致HTTPS相关服务不可用。</span>
</td>
</tr>
<tr>
<td>GRPC外部访问地址</td>
<td>
<network-addresses-view :v-addresses="node.accessAddrs"></network-addresses-view>
<p class="comment">通过GRPC访问API节点的网络地址。</p>
</td>
</tr>
<tr v-if="node.restIsOn">
<td>HTTP外部访问地址</td>
<td>
<network-addresses-view :v-addresses="node.restAccessAddrs"></network-addresses-view>
<p class="comment">通过HTTP访问API节点的网络地址。</p>
</td>
</tr>
<tr v-if="node.statusIsValid">
<td>CPU用量</td>
<td>{{node.status.cpuUsageText}} &nbsp; <span v-if="node.status.cpuPhysicalCount > 0" class="small grey">{{node.status.cpuPhysicalCount}}核心/{{node.status.cpuLogicalCount}}线程)</span></td>
</tr>
<tr v-if="node.statusIsValid">
<td>内存用量</td>
<td>{{node.status.memUsageText}}</td>
</tr>
<tr v-if="node.statusIsValid">
<td>版本</td>
<td>v{{node.status.buildVersion}}
&nbsp; <span class="red" v-if="newVersion.length > 0">需要升级到新版本v{{newVersion}}</span>
</td>
</tr>
<tr v-if="node.statusIsValid">
<td>主程序位置</td>
<td>{{node.status.exePath}}</td>
</tr>
<tr>
<td>主节点</td>
<td>
<span v-if="node.isPrimary" class="green">Y</span>
<span v-else class="disabled">N</span>
<p class="comment" v-if="node.isPrimary">设置为主节点后,主要的后台任务会在此节点上运行。</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,35 @@
{$layout}
{$template "menu"}
{$template "/code_editor"}
<h3>安装步骤</h3>
<ol class="ui list">
<li>按照下面的配置信息替换<code-label>configs/api.yaml</code-label>内容;如果文件不存在,请先创建</li>
<li>按照下面的配置信息替换<code-label>configs/db.yaml</code-label>内容;如果文件不存在,请先创建</li>
<li>使用<code-label>bin/edge-api start</code-label>启动节点</li>
<li>可以在<code-label>logs/run.log</code-label>中查看启动是否有异常</li>
<li>配置修改后,使用<code-label>bin/edge-api restart</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>
<source-code-box id="api-code" type="text/yaml">nodeId: "{{node.uniqueId}}"
secret: "{{node.secret}}"</source-code-box>
</td>
</tr>
<tr>
<td>configs/db.yaml<em><br/><download-link :v-element="'db-code'" :v-file="'db.yaml'">[下载]</download-link></em></td>
<td>
<span class="red" v-if="dbConfig.error.length > 0">
<span v-if="dbConfig.isNotFound">找不到数据库配置文件configs/api_db.yaml ,请重新 <a href="/settings/database">[配置数据库]</a></span>
<span v-else class="red">无法生成配置内容,错误原因:</span>
{{dbConfig.error}}
</span>
<source-code-box id="db-code" type="text/yaml">{{dbConfig.config}}</source-code-box>
</td>
</tr>
</table>

View File

@@ -0,0 +1,5 @@
pre.log-box {
margin: 0;
padding: 0;
}
/*# sourceMappingURL=logs.css.map */

View File

@@ -0,0 +1 @@
{"version":3,"sources":["logs.less"],"names":[],"mappings":"AAAA,GAAG;EACF,SAAA;EACA,UAAA","file":"logs.css"}

View File

@@ -0,0 +1,51 @@
{$layout}
{$template "menu"}
{$template "/datepicker"}
<div class="margin"></div>
<form method="get" action="/settings/api/node/logs" class="ui form" autocomplete="off">
<input type="hidden" name="nodeId" :value="nodeId"/>
<div class="ui fields inline">
<div class="ui field">
<input type="text" name="dayFrom" placeholder="开始日期" v-model="dayFrom" value="" style="width:8em" id="day-from-picker"/>
</div>
<div class="ui field">
<input type="text" name="dayTo" placeholder="结束日期" v-model="dayTo" value="" style="width:8em" id="day-to-picker"/>
</div>
<div class="ui field">
<select class="ui dropdown" name="level" v-model="level">
<option value="">[级别]</option>
<option value="error">错误</option>
<option value="warning">警告</option>
<option value="info">信息</option>
<option value="success">成功</option>
</select>
</div>
<div class="ui field">
<input type="text" name="keyword" style="width:10em" v-model="keyword" placeholder="关键词"/>
</div>
<div class="ui field">
<button type="submit" class="ui button">查询</button>
</div>
<div class="ui field" v-if="dayFrom.length > 0 || dayTo.length > 0 || keyword.length > 0 || level.length > 0">
<a :href="'/settings/api/node/logs?nodeId=' + nodeId">[清除条件]</a>
</div>
</div>
</form>
<p class="comment" v-if="logs.length == 0">暂时还没有日志。</p>
<table class="ui table selectable" v-if="logs.length > 0">
<thead>
<tr>
</tr>
</thead>
<tr v-for="log in logs">
<td>
<node-log-row :v-log="log" :v-keyword="keyword"></node-log-row>
</td>
</tr>
</table>
<div class="page" v-html="page"></div>

View File

@@ -0,0 +1,6 @@
Tea.context(function () {
this.$delay(function () {
teaweb.datepicker("day-from-picker")
teaweb.datepicker("day-to-picker")
})
})

View File

@@ -0,0 +1,4 @@
pre.log-box {
margin: 0;
padding: 0;
}

View File

@@ -0,0 +1,80 @@
{$layout}
{$template "menu"}
<div class="ui warning message"><i class="icon warning circle"></i>如果你修改了GRPC访问地址包含端口可能需要手工修改其他节点的配置信息。</div>
<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>GRPC监听端口 *</td>
<td>
<network-addresses-box :v-name="'listensJSON'" :v-server-type="'httpWeb'" :v-addresses="node.listens" @change="changeListens" :v-from="'apiNode'"></network-addresses-box>
<p class="comment">通过GRPC访问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>GRPC访问地址 *</td>
<td>
<api-node-addresses-box :v-name="'accessAddrsJSON'" :v-addrs="node.accessAddrs"></api-node-addresses-box>
<p class="comment">边缘节点和管理平台等外部节点访问API节点的网络地址需要保证其他节点能够通过此地址访问到API节点服务。<strong>访问地址里的端口号和监听端口通常一致,除非你做了端口转发。</strong></p>
</td>
</tr>
<tr>
<td colspan="2"><more-options-indicator></more-options-indicator></td>
</tr>
<tbody v-show="moreOptionsVisible">
<tr>
<td :class="{'color-border': node.restIsOn}">是否开启HTTP API端口</td>
<td>
<checkbox name="restIsOn" v-model="node.restIsOn">是否启用HTTP API</checkbox>
<p class="comment">启用后用户可以通过HTTP API调用服务接口。</p>
</td>
</tr>
<tr v-if="node.restIsOn">
<td class="color-border">HTTP API监听端口 *</td>
<td>
<network-addresses-box :v-name="'restListensJSON'" :v-server-type="'httpWeb'" @change="changeRestListens" :v-addresses="node.restListens"></network-addresses-box>
<p class="comment">HTTP API节点进程监听的网络端口需要和当前节点的GRPC端口不同。</p>
</td>
</tr>
<tr>
<td>描述</td>
<td>
<textarea name="description" maxlength="200" rows="3" v-model="node.description"></textarea>
</td>
</tr>
<tr>
<td>主节点</td>
<td>
<checkbox name="isPrimary" v-model="node.isPrimary"></checkbox>
<p class="comment">设置为主节点后,主要的后台任务会在此节点上运行。</p>
</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,31 @@
Tea.context(function () {
this.success = NotifySuccess("保存成功", "/settings/api/node?nodeId=" + this.node.id)
this.hasHTTPS = this.node.listens.$any(function (k, v) {
return v.protocol == "https"
}) || (this.node.restIsOn && this.node.restListens.$any(function (k, v) {
return v.protocol == "https"
}))
this.grpcAddrs = []
this.restAddrs = []
this.changeListens = function (addrs) {
this.grpcAddrs = addrs
this.hasHTTPS = this.grpcAddrs.$any(function (k, v) {
return v.protocol == "https"
}) || (this.node.restIsOn && this.restAddrs.$any(function (k, v) {
return v.protocol == "https"
}))
}
this.changeRestListens = function (addrs) {
this.restAddrs = addrs
this.hasHTTPS = this.grpcAddrs.$any(function (k, v) {
return v.protocol == "https"
}) || (this.node.restIsOn && this.restAddrs.$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.quoteIP() + ":" + addr.portRange
})

View File

@@ -0,0 +1,35 @@
{$layout "layout_popup"}
<h3>远程升级</h3>
<form class="ui form" data-tea-action="$" data-tea-success="success" data-tea-timeout="3600" data-tea-before="before" data-tea-done="done">
<csrf-token></csrf-token>
<input type="hidden" name="nodeId" :value="nodeId"/>
<table class="ui table definition selectable">
<tr v-show="nodeName.length > 0">
<td class="title">API节点</td>
<td>{{nodeName}}</td>
</tr>
<tr v-show="currentVersion.length > 0">
<td>当前版本</td>
<td>v{{currentVersion}}</td>
</tr>
<tr v-show="latestVersion.length > 0">
<td>目标版本</td>
<td>v{{latestVersion}}</td>
</tr>
<tr>
<td class="title">升级结果</td>
<td>
<span v-if="currentVersion == latestVersion" class="green">已经升级到最新版本</span>
<span :class="{red: !resultIsOk}" v-if="currentVersion != latestVersion">
<span v-if="!isRequesting">{{result}}</span>
<span v-if="isRequesting">升级中...</span>
</span>
</td>
</tr>
</table>
<submit-btn v-show="canUpgrade && !isRequesting && !isUpgrading">开始升级</submit-btn>
</form>

View File

@@ -0,0 +1,39 @@
Tea.context(function () {
this.$delay(function () {
this.checkLoop()
})
this.success = function () {
}
this.isRequesting = false
this.before = function () {
this.isRequesting = true
}
this.done = function () {
this.isRequesting = false
}
this.checkLoop = function () {
if (this.currentVersion == this.latestVersion) {
return
}
this.$post(".upgradeCheck")
.params({
nodeId: this.nodeId
})
.success(function (resp) {
if (resp.data.isOk) {
teaweb.reload()
}
})
.done(function () {
this.$delay(function () {
this.checkLoop()
}, 3000)
})
}
})