TRKJ/EdgeAdmin
2
0
Fork 0
mirror of https://github.com/TeaOSLab/EdgeAdmin.git synced 2025-11-07 15:20:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化创建网站服务界面

Browse Source
This commit is contained in:
GoEdgeLab
2023-03-21 16:56:45 +08:00
parent ff9f9181b6
commit 0d84be3f63
9 changed files with 233 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
internal/web/actions/default/servers/create.go
View File

@@ -36,24 +36,6 @@ func (this *CreateAction) RunGet(params struct{}) {
} }
this.Data["countAuditing"] = countAuditingResp.Count this.Data["countAuditing"] = countAuditingResp.Count
// 所有集群
resp, err := this.RPC().NodeClusterRPC().FindAllEnabledNodeClusters(this.AdminContext(), &pb.FindAllEnabledNodeClustersRequest{})
if err != nil {
this.ErrorPage(err)
}
if err != nil {
this.ErrorPage(err)
return
}
clusterMaps := []maps.Map{}
for _, cluster := range resp.NodeClusters {
clusterMaps = append(clusterMaps, maps.Map{
"id": cluster.Id,
"name": cluster.Name,
})
}
this.Data["clusters"] = clusterMaps
// 服务类型 // 服务类型
this.Data["serverTypes"] = serverconfigs.AllServerTypes() this.Data["serverTypes"] = serverconfigs.AllServerTypes()
@@ -95,10 +77,6 @@ func (this *CreateAction) RunPost(params struct {
Must *actions.Must Must *actions.Must
}) { }) {
params.Must.
Field("name", params.Name).
Require("请输入服务名称")
var clusterId = params.ClusterId var clusterId = params.ClusterId
// 用户 // 用户
@@ -129,7 +107,7 @@ func (this *CreateAction) RunPost(params struct {
switch params.ServerType { switch params.ServerType {
case serverconfigs.ServerTypeHTTPProxy, serverconfigs.ServerTypeHTTPWeb: case serverconfigs.ServerTypeHTTPProxy, serverconfigs.ServerTypeHTTPWeb:
listen := []*serverconfigs.NetworkAddressConfig{} var listen = []*serverconfigs.NetworkAddressConfig{}
err := json.Unmarshal([]byte(params.Addresses), &listen) err := json.Unmarshal([]byte(params.Addresses), &listen)
if err != nil { if err != nil {
this.Fail("端口地址解析失败：" + err.Error()) this.Fail("端口地址解析失败：" + err.Error())
@@ -166,7 +144,7 @@ func (this *CreateAction) RunPost(params struct {
this.Fail("DEMO模式下不能创建TCP反向代理") this.Fail("DEMO模式下不能创建TCP反向代理")
} }
listen := []*serverconfigs.NetworkAddressConfig{} var listen = []*serverconfigs.NetworkAddressConfig{}
err := json.Unmarshal([]byte(params.Addresses), &listen) err := json.Unmarshal([]byte(params.Addresses), &listen)
if err != nil { if err != nil {
this.Fail("端口地址解析失败：" + err.Error()) this.Fail("端口地址解析失败：" + err.Error())
@@ -197,13 +175,17 @@ func (this *CreateAction) RunPost(params struct {
tlsConfig.AddListen(addr) tlsConfig.AddListen(addr)
} }
} }
if len(params.Name) == 0 {
params.Name = "TCP负载均衡"
}
case serverconfigs.ServerTypeUDPProxy: case serverconfigs.ServerTypeUDPProxy:
// 在DEMO模式下不能创建 // 在DEMO模式下不能创建
if teaconst.IsDemoMode { if teaconst.IsDemoMode {
this.Fail("DEMO模式下不能创建UDP反向代理") this.Fail("DEMO模式下不能创建UDP反向代理")
} }
listen := []*serverconfigs.NetworkAddressConfig{} var listen = []*serverconfigs.NetworkAddressConfig{}
err := json.Unmarshal([]byte(params.Addresses), &listen) err := json.Unmarshal([]byte(params.Addresses), &listen)
if err != nil { if err != nil {
this.Fail("端口地址解析失败：" + err.Error()) this.Fail("端口地址解析失败：" + err.Error())
@@ -225,6 +207,10 @@ func (this *CreateAction) RunPost(params struct {
udpConfig.AddListen(addr) udpConfig.AddListen(addr)
} }
} }
if len(params.Name) == 0 {
params.Name = "UDP负载均衡"
}
default: default:
this.Fail("请选择正确的服务类型") this.Fail("请选择正确的服务类型")
} }
@@ -282,8 +268,13 @@ func (this *CreateAction) RunPost(params struct {
} }
// 检查域名是否已经存在 // 检查域名是否已经存在
allServerNames := serverconfigs.PlainServerNames(serverNames) var allServerNames = serverconfigs.PlainServerNames(serverNames)
if len(allServerNames) > 0 { if len(allServerNames) > 0 {
// 指定默认名称
if len(params.Name) == 0 {
params.Name = allServerNames[0]
}
dupResp, err := this.RPC().ServerRPC().CheckServerNameDuplicationInNodeCluster(this.AdminContext(), &pb.CheckServerNameDuplicationInNodeClusterRequest{ dupResp, err := this.RPC().ServerRPC().CheckServerNameDuplicationInNodeCluster(this.AdminContext(), &pb.CheckServerNameDuplicationInNodeClusterRequest{
ServerNames: allServerNames, ServerNames: allServerNames,
NodeClusterId: clusterId, NodeClusterId: clusterId,

21
web/public/js/components/common/network-addresses-box.js
View File

@@ -24,7 +24,8 @@ Vue.component("network-addresses-box", {
addresses: addresses, addresses: addresses,
protocol: protocol, protocol: protocol,
name: name, name: name,
from: from from: from,
isEditing: false
} }
}, },
watch: { watch: {
@@ -39,6 +40,8 @@ Vue.component("network-addresses-box", {
}, },
methods: { methods: {
addAddr: function () { addAddr: function () {
this.isEditing = true
let that = this let that = this
window.UPDATING_ADDR = null window.UPDATING_ADDR = null
@@ -106,17 +109,31 @@ Vue.component("network-addresses-box", {
}, },
supportRange: function () { supportRange: function () {
return this.vSupportRange || (this.vServerType == "tcpProxy" || this.vServerType == "udpProxy") return this.vSupportRange || (this.vServerType == "tcpProxy" || this.vServerType == "udpProxy")
},
edit: function () {
this.isEditing = true
} }
}, },
template: `<div> template: `<div>
<input type="hidden" :name="name" :value="JSON.stringify(addresses)"/> <input type="hidden" :name="name" :value="JSON.stringify(addresses)"/>
<div v-show="!isEditing">
<div v-if="addresses.length > 0">
<div class="ui label small basic" v-for="(addr, index) in addresses">
{{addr.protocol}}://<span v-if="addr.host.length > 0">{{addr.host.quoteIP()}}</span><span v-if="addr.host.length == 0">*</span>:<span v-if="addr.portRange.indexOf('-')<0">{{addr.portRange}}</span><span v-else style="font-style: italic">{{addr.portRange}}</span>
</div>
&nbsp; &nbsp; <a href="" @click.prevent="edit" style="font-size: 0.9em">[修改]</a>
</div>
</div>
<div v-show="isEditing || addresses.length == 0">
<div v-if="addresses.length > 0"> <div v-if="addresses.length > 0">
<div class="ui label small basic" v-for="(addr, index) in addresses"> <div class="ui label small basic" v-for="(addr, index) in addresses">
{{addr.protocol}}://<span v-if="addr.host.length > 0">{{addr.host.quoteIP()}}</span><span v-if="addr.host.length == 0">*</span>:<span v-if="addr.portRange.indexOf('-')<0">{{addr.portRange}}</span><span v-else style="font-style: italic">{{addr.portRange}}</span> {{addr.protocol}}://<span v-if="addr.host.length > 0">{{addr.host.quoteIP()}}</span><span v-if="addr.host.length == 0">*</span>:<span v-if="addr.portRange.indexOf('-')<0">{{addr.portRange}}</span><span v-else style="font-style: italic">{{addr.portRange}}</span>
<a href="" @click.prevent="updateAddr(index, addr)" title="修改"><i class="icon pencil small"></i></a> <a href="" @click.prevent="updateAddr(index, addr)" title="修改"><i class="icon pencil small"></i></a>
<a href="" @click.prevent="removeAddr(index)" title="删除"><i class="icon remove"></i></a> </div> <a href="" @click.prevent="removeAddr(index)" title="删除"><i class="icon remove"></i></a>
</div>
<div class="ui divider"></div> <div class="ui divider"></div>
</div> </div>
<a href="" @click.prevent="addAddr()">[添加端口绑定]</a> <a href="" @click.prevent="addAddr()">[添加端口绑定]</a>
</div>
</div>` </div>`
}) })

16
web/views/@default/servers/addOriginPopup.html
View File

@@ -5,7 +5,7 @@
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success"> <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
<table class="ui table selectable definition"> <table class="ui table selectable definition">
<tr> <tr>
<td>源站协议</td> <td>源站协议 *</td>
<td> <td>
<!-- HTTP --> <!-- HTTP -->
<select class="ui dropdown auto-width" name="protocol" v-if="serverType == 'httpProxy' || serverType == 'httpWeb'" @change="changeProtocol" v-model="protocol"> <select class="ui dropdown auto-width" name="protocol" v-if="serverType == 'httpProxy' || serverType == 'httpWeb'" @change="changeProtocol" v-model="protocol">
@@ -32,6 +32,13 @@
<p class="comment"><span class="red" v-if="addrError.length > 0">{{addrError}}</span>源站服务器地址，通常是一个IP（或域名）加端口<span v-if="serverType == 'httpProxy'">，不需要加 http:// 或 https://</span>。</p> <p class="comment"><span class="red" v-if="addrError.length > 0">{{addrError}}</span>源站服务器地址，通常是一个IP（或域名）加端口<span v-if="serverType == 'httpProxy'">，不需要加 http:// 或 https://</span>。</p>
</td> </td>
</tr> </tr>
<tr v-if="isHTTP || protocol == 'tls'">
<td>回源主机名</td>
<td>
<input type="text" name="host" placeholder="比如example.com" maxlength="100"/>
<p class="comment">请求源站时的Host字段值，用于修改源站接收到的域名<span v-if="isHTTP">，支持请求变量</span>。</p>
</td>
</tr>
<tr> <tr>
<td colspan="2"><more-options-indicator></more-options-indicator></td> <td colspan="2"><more-options-indicator></more-options-indicator></td>
</tr> </tr>
@@ -42,13 +49,6 @@
<ssl-certs-box :v-single-mode="true" :v-view-size="'mini'" :v-description="'可以选择连接源站使用的证书。'"></ssl-certs-box> <ssl-certs-box :v-single-mode="true" :v-view-size="'mini'" :v-description="'可以选择连接源站使用的证书。'"></ssl-certs-box>
</td> </td>
</tr> </tr>
<tr v-if="isHTTP || protocol == 'tls'">
<td>回源主机名</td>
<td>
<input type="text" name="host" placeholder="比如example.com" maxlength="100"/>
<p class="comment">请求源站时的Host，用于修改源站接收到的域名<span v-if="isHTTP">，自定义Host内容中支持请求变量</span>。</p>
</td>
</tr>
<tr v-if="isHTTP"> <tr v-if="isHTTP">
<td>专属域名</td> <td>专属域名</td>
<td> <td>

21
web/views/@default/servers/create.css
View File

@@ -1,4 +1,25 @@
.label em { .label em {
font-style: italic !important; font-style: italic !important;
} }
.checkboxes .checkbox {
float: left;
margin-bottom: 1em;
margin-right: 1em;
}
@media screen and (min-width: 1024px) {
.tables-box {
width: 1024px;
}
.tables-box .table-box {
width: 48%;
float: left;
}
.tables-box .table-box.right {
margin-left: 1em;
opacity: 0.3;
}
.tables-box .table-box.right:hover {
opacity: 1;
}
}
/*# sourceMappingURL=create.css.map */ /*# sourceMappingURL=create.css.map */

2
web/views/@default/servers/create.css.map
View File

@@ -1 +1 @@
{"version":3,"sources":["create.less"],"names":[],"mappings":"AAAA,MAAO;EACN,6BAAA","file":"create.css"} {"version":3,"sources":["create.less"],"names":[],"mappings":"AAAA,MAAO;EACN,6BAAA;;AAGD,WACC;EACC,WAAA;EACA,kBAAA;EACA,iBAAA;;AAIF,mBAAsC;EACrC;IACC,aAAA;;EADD,WAGC;IACC,UAAA;IACA,WAAA;;EALF,WAQC,WAAU;IACT,gBAAA;IACA,YAAA;;EAVF,WAaC,WAAU,MAAM;IACf,UAAA","file":"create.css"}

105
web/views/@default/servers/create.html
View File

@@ -4,14 +4,9 @@
<div class="margin"></div> <div class="margin"></div>
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success" data-tea-fail="fail"> <form method="post" class="ui form" data-tea-action="$" data-tea-success="success" data-tea-fail="fail">
<div class="tables-box">
<div class="table-box">
<table class="ui table selectable definition"> <table class="ui table selectable definition">
<tr>
<td class="title">服务名称 *</td>
<td>
<input type="text" name="name" maxlength="60" ref="focus"/>
<p class="comment">可以是网站用途或者域名等。</p>
</td>
</tr>
<tr v-show="hasUsers"> <tr v-show="hasUsers">
<td>所属用户<optional-label></optional-label></td> <td>所属用户<optional-label></optional-label></td>
<td> <td>
@@ -32,9 +27,7 @@
<td>部署的集群 *</td> <td>部署的集群 *</td>
<td> <td>
<div v-if="userId == 0"> <div v-if="userId == 0">
<select class="ui dropdown auto-width" name="clusterId"> <node-cluster-combo-box></node-cluster-combo-box>
<option v-for="cluster in clusters" :value="cluster.id">{{cluster.name}}</option>
</select>
<p class="comment">当前服务将会部署到所选集群的节点上。</p> <p class="comment">当前服务将会部署到所选集群的节点上。</p>
</div> </div>
<div v-else>跟随用户设置。</div> <div v-else>跟随用户设置。</div>
@@ -50,22 +43,6 @@
</td> </td>
</tr> </tr>
<tr>
<td>服务类型 *</td>
<td>
<select class="ui dropdown auto-width" name="serverType" v-model="serverType" @change="changeServerType()">
<option v-for="s in serverTypes" :value="s.code">{{s.name}}</option>
</select>
<p class="comment" v-for="s in serverTypes" v-if="s.code == serverType">{{s.description}}</p>
</td>
</tr>
<tr>
<td>绑定端口 *</td>
<td>
<network-addresses-box :v-server-type="serverType" :v-addresses="defaultAddresses"></network-addresses-box>
</td>
</tr>
<!-- 证书 --> <!-- 证书 -->
<tbody v-if="tlsProtocolName.length > 0"> <tbody v-if="tlsProtocolName.length > 0">
<tr> <tr>
@@ -82,7 +59,7 @@
<td> <td>
<input type="hidden" name="origins" :value="JSON.stringify(origins)"/> <input type="hidden" name="origins" :value="JSON.stringify(origins)"/>
<div v-if="origins.length > 0"> <div v-if="origins.length > 0">
<div v-for="(origin, index) in origins" class="ui label small"> <div v-for="(origin, index) in origins" class="ui label small basic">
{{origin.addr.protocol}}://{{origin.addr.host}}:{{origin.addr.portRange}} {{origin.addr.protocol}}://{{origin.addr.host}}:{{origin.addr.portRange}}
<a href="" title="删除" @click.prevent="removeOrigin(index)"><i class="icon remove"></i></a> <a href="" title="删除" @click.prevent="removeOrigin(index)"><i class="icon remove"></i></a>
</div> </div>
@@ -100,42 +77,58 @@
</td> </td>
</tr> </tr>
<tr>
<td>绑定端口 *</td>
<td>
<network-addresses-box :v-server-type="serverType" :v-addresses="defaultAddresses"></network-addresses-box>
</td>
</tr>
</table>
</div>
<div class="table-box right">
<h3>次要信息</h3>
<table class="ui table selectable definition">
<tr>
<td class="title">服务类型</td>
<td>
<select class="ui dropdown auto-width" name="serverType" v-model="serverType" @change="changeServerType()">
<option v-for="s in serverTypes" :value="s.code">{{s.name}}</option>
</select>
<p class="comment" v-for="s in serverTypes" v-if="s.code == serverType">{{s.description}}</p>
</td>
</tr>
<tr>
<td class="title">服务名称</td>
<td>
<input type="text" name="name" maxlength="60"/>
<p class="comment">可以是网站用途或者域名等。</p>
</td>
</tr>
<tr v-if="serverType == 'httpProxy' || serverType == 'httpWeb'">
<td>默认开启配置</td>
<td>
<div class="checkboxes">
<checkbox checked="checked" name="accessLogIsOn">访问日志</checkbox>
<checkbox checked="checked" name="websocketIsOn">Websocket</checkbox>
<checkbox checked="checked" name="cacheIsOn">缓存</checkbox>
<checkbox name="wafIsOn">WAF</checkbox>
<checkbox name="remoteAddrIsOn">从上级代理中读取IP <tip-icon content="用来支持读取上级代理传递的X-Real-IP、X-Forwarded-For等信息。如果用户需要通过别的代理服务才能访问到这个网站服务，才需要选中。"></tip-icon> </checkbox>
<checkbox checked="checked" name="statIsOn">统计 <tip-icon content="开启统计后，会统计访客区域、操作系统、浏览器等信息。"></tip-icon> </checkbox>
</div>
</td>
</tr>
<tr> <tr>
<td>选择分组<optional-label></optional-label></td> <td>选择分组<optional-label></optional-label></td>
<td> <td>
<server-group-selector></server-group-selector> <server-group-selector></server-group-selector>
</td> </td>
</tr> </tr>
<tr v-if="serverType == 'httpProxy' || serverType == 'httpWeb'">
<td>默认开启配置</td>
<td>
<checkbox checked="checked" name="accessLogIsOn">访问日志</checkbox>
&nbsp; &nbsp;
<checkbox checked="checked" name="websocketIsOn">Websocket</checkbox>
&nbsp; &nbsp;
<checkbox checked="checked" name="cacheIsOn">缓存</checkbox>
&nbsp; &nbsp;
<checkbox name="wafIsOn">WAF</checkbox>
&nbsp; &nbsp;
<checkbox name="remoteAddrIsOn">从上级代理中读取IP <tip-icon content="用来支持读取上级代理传递的X-Real-IP、X-Forwarded-For等信息。如果用户需要通过别的代理服务才能访问到这个网站服务，才需要选中。"></tip-icon> </checkbox>
&nbsp; &nbsp;
<checkbox checked="checked" name="statIsOn">统计 <tip-icon content="开启统计后，会统计访客区域、操作系统、浏览器等信息。"></tip-icon> </checkbox>
</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" rows="3"></textarea>
</td>
</tr>
</tbody>
</table> </table>
</div>
<div class="clear"></div>
</div>
<div class="margin clear"></div>
<submit-btn></submit-btn> <submit-btn></submit-btn>
</form> </form>

28
web/views/@default/servers/create.less
View File

@@ -1,3 +1,31 @@
.label em { .label em {
font-style: italic !important; font-style: italic !important;
} }
.checkboxes {
.checkbox {
float: left;
margin-bottom: 1em;
margin-right: 1em;
}
}
@media screen and (min-width: 1024px) {
.tables-box {
width: 1024px;
.table-box {
width: 48%;
float: left;
}
.table-box.right {
margin-left: 1em;
opacity: 0.3;
}
.table-box.right:hover {
opacity: 1.0;
}
}
}

14
web/views/@default/servers/server/settings/origins/addPopup.html
View File

@@ -35,6 +35,13 @@
源站服务器地址，通常是一个IP（或域名）加端口<span v-if="serverType == 'httpProxy'">，不需要加 http:// 或 https://</span>。</p> 源站服务器地址，通常是一个IP（或域名）加端口<span v-if="serverType == 'httpProxy'">，不需要加 http:// 或 https://</span>。</p>
</td> </td>
</tr> </tr>
<tr v-if="isHTTP || protocol == 'tls'">
<td>回源主机名</td>
<td>
<input type="text" name="host" placeholder="比如example.com" maxlength="100"/>
<p class="comment">请求源站时的Host字段值，用于修改源站接收到的域名<span v-if="isHTTP">，支持请求变量</span>。</p>
</td>
</tr>
<tr> <tr>
<td colspan="2"><more-options-indicator></more-options-indicator></td> <td colspan="2"><more-options-indicator></more-options-indicator></td>
</tr> </tr>
@@ -45,13 +52,6 @@
<ssl-certs-box :v-single-mode="true" :v-view-size="'mini'" :v-description="'可以选择连接源站使用的证书。'"></ssl-certs-box> <ssl-certs-box :v-single-mode="true" :v-view-size="'mini'" :v-description="'可以选择连接源站使用的证书。'"></ssl-certs-box>
</td> </td>
</tr> </tr>
<tr v-if="isHTTP || protocol == 'tls'">
<td>回源主机名</td>
<td>
<input type="text" name="host" placeholder="比如example.com" maxlength="100"/>
<p class="comment">请求源站时的Host，用于修改源站接收到的域名<span v-if="isHTTP">，自定义Host内容中支持请求变量</span>。</p>
</td>
</tr>
<tr v-show="protocol != 'udp'"> <tr v-show="protocol != 'udp'">
<td>专属域名</td> <td>专属域名</td>
<td> <td>

14
web/views/@default/servers/server/settings/origins/updatePopup.html
View File

@@ -36,6 +36,13 @@
<p class="comment"><span class="red" v-if="addrError.length > 0">{{addrError}}</span>源站服务器地址，通常是一个IP（或域名）加端口<span v-if="serverType == 'httpProxy'">，不需要加 http:// 或 https://</span>。</p> <p class="comment"><span class="red" v-if="addrError.length > 0">{{addrError}}</span>源站服务器地址，通常是一个IP（或域名）加端口<span v-if="serverType == 'httpProxy'">，不需要加 http:// 或 https://</span>。</p>
</td> </td>
</tr> </tr>
<tr v-if="isHTTP || origin.protocol == 'tls'">
<td>回源主机名</td>
<td>
<input type="text" name="host" v-model="origin.host" placeholder="比如example.com" maxlength="100"/>
<p class="comment">请求源站时的Host字段值，用于修改源站接收到的域名<span v-if="isHTTP">，支持请求变量</span>。</p>
</td>
</tr>
<tr> <tr>
<td colspan="2"><more-options-indicator></more-options-indicator></td> <td colspan="2"><more-options-indicator></more-options-indicator></td>
</tr> </tr>
@@ -46,13 +53,6 @@
<ssl-certs-box :v-single-mode="true" :v-cert="origin.cert" :v-view-size="'mini'" :v-description="'可以选择连接源站使用的证书。'"></ssl-certs-box> <ssl-certs-box :v-single-mode="true" :v-cert="origin.cert" :v-view-size="'mini'" :v-description="'可以选择连接源站使用的证书。'"></ssl-certs-box>
</td> </td>
</tr> </tr>
<tr v-if="isHTTP || origin.protocol == 'tls'">
<td>回源主机名</td>
<td>
<input type="text" name="host" v-model="origin.host" placeholder="比如example.com" maxlength="100"/>
<p class="comment">请求源站时的Host，用于修改源站接收到的域名<span v-if="isHTTP">，自定义Host内容中支持请求变量</span>。</p>
</td>
</tr>
<tr v-show="origin.protocol != 'udp'"> <tr v-show="origin.protocol != 'udp'">
<td>专属域名</td> <td>专属域名</td>
<td> <td>