mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2026-04-09 00:45:30 +08:00
阶段性提交
This commit is contained in:
GoEdgeLab
84
web/public/js/components/server/origin-list-box.js
Normal file
84
web/public/js/components/server/origin-list-box.js
Normal file
@@ -0,0 +1,84 @@
|
||||
Vue.component("origin-list-box", {
|
||||
props: ["v-primary-origins", "v-backup-origins", "v-server-type", "v-params"],
|
||||
data: function () {
|
||||
return {
|
||||
primaryOrigins: this.vPrimaryOrigins,
|
||||
backupOrigins: this.vBackupOrigins
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createPrimaryOrigin: function () {
|
||||
teaweb.popup("/servers/server/settings/origins/addPopup?originType=primary&" + this.vParams, {
|
||||
callback: function (resp) {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
},
|
||||
createBackupOrigin: function () {
|
||||
teaweb.popup("/servers/server/settings/origins/addPopup?originType=backup&" + this.vParams, {
|
||||
callback: function (resp) {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
},
|
||||
updateOrigin: function (originId, originType) {
|
||||
teaweb.popup("/servers/server/settings/origins/updatePopup?originType=" + originType + "&" + this.vParams + "&originId=" + originId, {
|
||||
callback: function (resp) {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
},
|
||||
deleteOrigin: function (originId, originType) {
|
||||
let that = this
|
||||
teaweb.confirm("确定要删除此源站吗？", function () {
|
||||
Tea.action("/servers/server/settings/origins/delete?" + that.vParams + "&originId=" + originId + "&originType=" + originType)
|
||||
.post()
|
||||
.success(function () {
|
||||
window.location.reload()
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
template: `<div>
|
||||
<h3>主要源站 <a href="" @click.prevent="createPrimaryOrigin()">[添加主要源站]</a> </h3>
|
||||
<p class="comment" v-if="primaryOrigins.length == 0">暂时还没有优先源站。</p>
|
||||
<origin-list-table v-if="primaryOrigins.length > 0" :v-origins="vPrimaryOrigins" :v-origin-type="'primary'" @deleteOrigin="deleteOrigin" @updateOrigin="updateOrigin"></origin-list-table>
|
||||
|
||||
<h3>备用源站 <a href="" @click.prevent="createBackupOrigin()">[添加备用源站]</a></h3>
|
||||
<p class="comment" v-if="backupOrigins.length == 0" :v-origins="primaryOrigins">暂时还没有备用源站。</p>
|
||||
<origin-list-table v-if="backupOrigins.length > 0" :v-origins="backupOrigins" :v-origin-type="'backup'" @deleteOrigin="deleteOrigin" @updateOrigin="updateOrigin"></origin-list-table>
|
||||
</div>`
|
||||
})
|
||||
|
||||
Vue.component("origin-list-table", {
|
||||
props: ["v-origins", "v-origin-type"],
|
||||
data: function () {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
deleteOrigin: function (originId) {
|
||||
this.$emit("deleteOrigin", originId, this.vOriginType)
|
||||
},
|
||||
updateOrigin: function (originId) {
|
||||
this.$emit("updateOrigin", originId, this.vOriginType)
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<table class="ui table selectable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>源站地址</th>
|
||||
<th>权重</th>
|
||||
<th class="two op">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="origin in vOrigins">
|
||||
<td>{{origin.addr}}</td>
|
||||
<td>{{origin.weight}}</td>
|
||||
<td>
|
||||
<a href="" @click.prevent="updateOrigin(origin.id)">修改</a>
|
||||
<a href="" @click.prevent="deleteOrigin(origin.id)">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>`
|
||||
})
|
||||
@@ -0,0 +1,34 @@
|
||||
Vue.component("origin-scheduling-view-box", {
|
||||
props: ["v-scheduling", "v-params"],
|
||||
data: function () {
|
||||
let scheduling = this.vScheduling
|
||||
if (scheduling == null) {
|
||||
scheduling = {}
|
||||
}
|
||||
return {
|
||||
scheduling: scheduling
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
update: function () {
|
||||
teaweb.popup("/servers/server/settings/reverseProxy/updateSchedulingPopup?" + this.vParams, {
|
||||
height: "21em",
|
||||
callback: function () {
|
||||
window.location.reload()
|
||||
},
|
||||
})
|
||||
}
|
||||
},
|
||||
template: `<div>
|
||||
<div class="margin"></div>
|
||||
<table class="ui table selectable definition">
|
||||
<tr>
|
||||
<td class="title">当前正在使用的算法</td>
|
||||
<td>
|
||||
{{scheduling.name}} <a href="" @click.prevent="update()"><span>[修改]</span></a>
|
||||
<p class="comment">{{scheduling.description}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>`
|
||||
})
|
||||
@@ -8,7 +8,7 @@
|
||||
<td>源站协议</td>
|
||||
<td>
|
||||
<!-- HTTP -->
|
||||
<select class="ui dropdown auto-width" name="protocol" v-if="serverType == 'httpProxy'">
|
||||
<select class="ui dropdown auto-width" name="protocol" v-if="serverType == 'httpProxy' || serverType == 'httpWeb'">
|
||||
<option value="http">HTTP</option>
|
||||
<option value="https">HTTPS</option>
|
||||
</select>
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
</tbody>
|
||||
|
||||
<!-- 域名 -->
|
||||
<tr>
|
||||
<tr v-if="serverType == 'httpProxy' || serverType == 'httpWeb'">
|
||||
<td>绑定域名</td>
|
||||
<td>
|
||||
<input type="hidden" name="serverNames" :value="JSON.stringify(serverNames)"/>
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>添加源站地址</h3>
|
||||
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="reverseProxyId" :value="reverseProxyId"/>
|
||||
<input type="hidden" name="originType" :value="originType"/>
|
||||
<table class="ui table selectable definition">
|
||||
<tr>
|
||||
<td>源站协议</td>
|
||||
<td>
|
||||
<!-- HTTP -->
|
||||
<select class="ui dropdown auto-width" name="protocol" v-if="serverType == 'httpProxy' || serverType == 'httpWeb'">
|
||||
<option value="http">HTTP</option>
|
||||
<option value="https">HTTPS</option>
|
||||
</select>
|
||||
|
||||
<!-- TCP -->
|
||||
<select class="ui dropdown auto-width" name="protocol" v-if="serverType == 'tcpProxy'">
|
||||
<option value="tcp">TCP</option>
|
||||
<option value="tls">TLS</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">源站地址</td>
|
||||
<td>
|
||||
<input type="text" name="addr" ref="focus"/>
|
||||
<p class="comment">源站服务器地址，通常是一个IP（或域名）加端口<span v-if="serverType == 'httpProxy'">，不需要加 http:// 或 https://</span>。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,3 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyPopup;
|
||||
});
|
||||
@@ -0,0 +1,36 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>添加源站地址</h3>
|
||||
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="reverseProxyId" :value="reverseProxyId"/>
|
||||
<input type="hidden" name="originType" :value="originType"/>
|
||||
<input type="hidden" name="originId" :value="originId"/>
|
||||
|
||||
<table class="ui table selectable definition">
|
||||
<tr>
|
||||
<td>源站协议</td>
|
||||
<td>
|
||||
<!-- HTTP -->
|
||||
<select class="ui dropdown auto-width" name="protocol" v-model="origin.protocol" v-if="serverType == 'httpProxy' || serverType == 'httpWeb'">
|
||||
<option value="http">HTTP</option>
|
||||
<option value="https">HTTPS</option>
|
||||
</select>
|
||||
|
||||
<!-- TCP -->
|
||||
<select class="ui dropdown auto-width" name="protocol" v-model="origin.protocol" v-if="serverType == 'tcpProxy'">
|
||||
<option value="tcp">TCP</option>
|
||||
<option value="tls">TLS</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">源站地址</td>
|
||||
<td>
|
||||
<input type="text" name="addr" ref="focus" v-model="origin.addr"/>
|
||||
<p class="comment">源站服务器地址，通常是一个IP（或域名）加端口<span v-if="serverType == 'httpProxy'">，不需要加 http:// 或 https://</span>。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,3 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyPopup;
|
||||
});
|
||||
@@ -0,0 +1,4 @@
|
||||
<first-menu>
|
||||
<menu-item :href="'/servers/server/settings/reverseProxy?serverId=' + serverId" code="index">源站列表</menu-item>
|
||||
<menu-item :href="'/servers/server/settings/reverseProxy/scheduling?serverId=' + serverId" code="scheduling">调度算法</menu-item>
|
||||
</first-menu>
|
||||
@@ -1,7 +1,8 @@
|
||||
{$layout}
|
||||
|
||||
{$template "/left_menu"}
|
||||
|
||||
<div class="right-box">
|
||||
<p class="ui message">此功能暂未开放，敬请期待。</p>
|
||||
{$template "menu"}
|
||||
|
||||
<origin-list-box :v-primary-origins="primaryOrigins" :v-backup-origins="backupOrigins" :v-server-type="serverType" :v-params="'type=server&serverId=' + serverId + '&reverseProxyId=' + reverseProxyId"></origin-list-box>
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
{$layout}
|
||||
{$template "/left_menu"}
|
||||
|
||||
<div class="right-box">
|
||||
{$template "menu"}
|
||||
|
||||
<origin-scheduling-view-box :v-scheduling="scheduling" :v-params="'type=server&serverId=' + serverId + '&reverseProxyId=' + reverseProxyId"></origin-scheduling-view-box>
|
||||
</div>
|
||||
@@ -0,0 +1,60 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>修改调度算法</h3>
|
||||
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="dataType" :value="dataType"/>
|
||||
<input type="hidden" name="serverId" :value="serverId"/>
|
||||
<input type="hidden" name="reverseProxyId" :value="reverseProxyId"/>
|
||||
|
||||
<table class="ui table selectable definition">
|
||||
<tr>
|
||||
<td class="title">选择调度算法</td>
|
||||
<td>
|
||||
<select class="ui dropdown auto-width" name="type" v-model="selectedType"
|
||||
@change="changeSchedulingType()">
|
||||
<option v-for="schedulingType in schedulingTypes"
|
||||
:value="schedulingType.code">{{schedulingType.name}}</option>
|
||||
</select>
|
||||
<p class="comment">{{schedulingTypeDescription}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="selectedType == 'hash'">
|
||||
<td>
|
||||
Key
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" name="hashKey" v-model="hashKey" maxlength="500"/>
|
||||
<p class="comment">用来计算Hash的字符串，其中可以使用变量。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="selectedType == 'hash'">
|
||||
<td>常用变量</td>
|
||||
<td>
|
||||
<select class="ui dropdown" style="width:12em" v-model="hashVar" @change="changeHashVar()">
|
||||
<option></option>
|
||||
<option value="${remoteAddr}">客户端IP</option>
|
||||
<option value="${host}${requestURI}">请求URL</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="selectedType == 'sticky'">
|
||||
<td>参数类型</td>
|
||||
<td>
|
||||
<select class="ui dropdown" style="width:12em" name="stickyType" v-model="stickyType">
|
||||
<option value="cookie">Cookie</option>
|
||||
<option value="header">HTTP Header</option>
|
||||
<option value="argument">URL参数</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="selectedType == 'sticky'">
|
||||
<td>参数名</td>
|
||||
<td>
|
||||
<input type="text" name="stickyParam" v-model="stickyParam" maxlength="50"/>
|
||||
<p class="comment">记录或指定后端服务器的参数名，只能是英文字母和数字的组合，不允许有下划线（因为在HTTP Header中下划线是不标准的）</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,39 @@
|
||||
Tea.context(function () {
|
||||
var that = this;
|
||||
|
||||
this.success = NotifyPopup
|
||||
|
||||
this.selectedType = this.scheduling.code;
|
||||
this.schedulingTypeDescription = null;
|
||||
|
||||
this.changeSchedulingType = function () {
|
||||
this.schedulingTypeDescription = this.schedulingTypes.$find(function (k, v) {
|
||||
return v.code == that.selectedType;
|
||||
}).description;
|
||||
};
|
||||
this.changeSchedulingType();
|
||||
|
||||
// hash
|
||||
this.hashKey = "";
|
||||
this.hashVar = "";
|
||||
if (this.scheduling.code == "hash") {
|
||||
this.hashKey = this.scheduling.options.key;
|
||||
} else {
|
||||
this.hashKey = "${remoteAddr}";
|
||||
}
|
||||
|
||||
this.changeHashVar = function () {
|
||||
if (this.hashVar.length > 0) {
|
||||
this.hashKey = this.hashVar;
|
||||
}
|
||||
};
|
||||
|
||||
// sticky
|
||||
if (this.scheduling.code == "sticky") {
|
||||
this.stickyType = this.scheduling.options.type;
|
||||
this.stickyParam = this.scheduling.options.param;
|
||||
} else {
|
||||
this.stickyType = "cookie";
|
||||
this.stickyParam = "Origin";
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user