实现缓存策略的部分功能
This commit is contained in:
56
web/public/js/components/api-node/api-node-addresses-box.js
Normal file
56
web/public/js/components/api-node/api-node-addresses-box.js
Normal file
@@ -0,0 +1,56 @@
|
||||
Vue.component("api-node-addresses-box", {
|
||||
props: ["v-addrs", "v-name"],
|
||||
data: function () {
|
||||
let addrs = this.vAddrs
|
||||
if (addrs == null) {
|
||||
addrs = []
|
||||
}
|
||||
return {
|
||||
addrs: addrs
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 添加IP地址
|
||||
addAddr: function () {
|
||||
let that = this;
|
||||
teaweb.popup("/api/node/createAddrPopup", {
|
||||
height: "16em",
|
||||
callback: function (resp) {
|
||||
that.addrs.push(resp.data.addr);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 修改地址
|
||||
updateAddr: function (index, addr) {
|
||||
let that = this;
|
||||
window.UPDATING_ADDR = addr
|
||||
teaweb.popup("/api/node/updateAddrPopup?addressId=", {
|
||||
callback: function (resp) {
|
||||
Vue.set(that.addrs, index, resp.data.addr);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 删除IP地址
|
||||
removeAddr: function (index) {
|
||||
this.addrs.$remove(index);
|
||||
}
|
||||
},
|
||||
template: `<div>
|
||||
<input type="hidden" :name="vName" :value="JSON.stringify(addrs)"/>
|
||||
<div v-if="addrs.length > 0">
|
||||
<div>
|
||||
<div v-for="(addr, index) in addrs" class="ui label small">
|
||||
{{addr.protocol}}://{{addr.host}}:{{addr.portRange}}</span>
|
||||
<a href="" title="修改" @click.prevent="updateAddr(index, addr)"><i class="icon pencil small"></i></a>
|
||||
<a href="" title="删除" @click.prevent="removeAddr(index)"><i class="icon remove"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="ui button small" type="button" @click.prevent="addAddr()">+</button>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
@@ -1,5 +1,5 @@
|
||||
Vue.component("network-addresses-box", {
|
||||
props: ["v-server-type", "v-addresses", "v-protocol"],
|
||||
props: ["v-server-type", "v-addresses", "v-protocol", "v-name"],
|
||||
data: function () {
|
||||
let addresses = this.vAddresses
|
||||
if (addresses == null) {
|
||||
@@ -9,9 +9,16 @@ Vue.component("network-addresses-box", {
|
||||
if (protocol == null) {
|
||||
protocol = ""
|
||||
}
|
||||
|
||||
let name = this.vName
|
||||
if (name == null) {
|
||||
name = "addresses"
|
||||
}
|
||||
|
||||
return {
|
||||
addresses: addresses,
|
||||
protocol: protocol
|
||||
protocol: protocol,
|
||||
name: name
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -24,22 +31,28 @@ Vue.component("network-addresses-box", {
|
||||
let that = this
|
||||
teaweb.popup("/servers/addPortPopup?serverType=" + this.vServerType + "&protocol=" + this.protocol, {
|
||||
callback: function (resp) {
|
||||
var addr = resp.data.address;
|
||||
that.addresses.push(addr);
|
||||
var addr = resp.data.address
|
||||
that.addresses.push(addr)
|
||||
if (["https", "https4", "https6"].$contains(addr.protocol)) {
|
||||
this.tlsProtocolName = "HTTPS";
|
||||
this.tlsProtocolName = "HTTPS"
|
||||
} else if (["tls", "tls4", "tls6"].$contains(addr.protocol)) {
|
||||
this.tlsProtocolName = "TLS";
|
||||
this.tlsProtocolName = "TLS"
|
||||
}
|
||||
|
||||
// 发送事件
|
||||
that.$emit("change", that.addresses)
|
||||
}
|
||||
})
|
||||
},
|
||||
removeAddr: function (index) {
|
||||
this.addresses.$remove(index);
|
||||
|
||||
// 发送事件
|
||||
this.$emit("change", this.addresses)
|
||||
}
|
||||
},
|
||||
template: `<div>
|
||||
<input type="hidden" name="addresses" :value="JSON.stringify(addresses)"/>
|
||||
<input type="hidden" :name="name" :value="JSON.stringify(addresses)"/>
|
||||
<div v-if="addresses.length > 0">
|
||||
<div class="ui label small" v-for="(addr, index) in addresses">
|
||||
{{addr.protocol}}://<span v-if="addr.host.length > 0">{{addr.host}}</span><span v-if="addr.host.length == 0">*</span>:{{addr.portRange}}
|
||||
|
||||
7
web/public/js/components/common/size-capacity-view.js
Normal file
7
web/public/js/components/common/size-capacity-view.js
Normal file
@@ -0,0 +1,7 @@
|
||||
Vue.component("size-capacity-view", {
|
||||
props:["v-default-text", "v-value"],
|
||||
template: `<div>
|
||||
<span v-if="vValue != null && vValue.count > 0">{{vValue.count}}{{vValue.unit.toUpperCase()}}</span>
|
||||
<span v-else>{{vDefaultText}}</span>
|
||||
</div>`
|
||||
})
|
||||
71
web/public/js/components/server/ssl-certs-box.js
Normal file
71
web/public/js/components/server/ssl-certs-box.js
Normal file
@@ -0,0 +1,71 @@
|
||||
Vue.component("ssl-certs-box", {
|
||||
props: ["v-certs", "v-protocol"],
|
||||
data: function () {
|
||||
let certs = this.vCerts
|
||||
if (certs == null) {
|
||||
certs = []
|
||||
}
|
||||
return {
|
||||
certs: certs
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
certIds: function () {
|
||||
return this.certs.map(function (v) {
|
||||
return v.id
|
||||
})
|
||||
},
|
||||
// 删除证书
|
||||
removeCert: function (index) {
|
||||
let that = this
|
||||
teaweb.confirm("确定删除此证书吗?证书数据仍然保留,只是当前服务不再使用此证书。", function () {
|
||||
that.certs.$remove(index)
|
||||
})
|
||||
},
|
||||
|
||||
// 选择证书
|
||||
selectCert: function () {
|
||||
let that = this
|
||||
teaweb.popup("/servers/components/ssl/selectPopup", {
|
||||
width: "50em",
|
||||
height: "30em",
|
||||
callback: function (resp) {
|
||||
that.certs.push(resp.data.cert)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 上传证书
|
||||
uploadCert: function () {
|
||||
let that = this
|
||||
teaweb.popup("/servers/components/ssl/uploadPopup", {
|
||||
height: "28em",
|
||||
callback: function (resp) {
|
||||
teaweb.success("上传成功", function () {
|
||||
that.certs.push(resp.data.cert)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 格式化时间
|
||||
formatTime: function (timestamp) {
|
||||
return new Date(timestamp * 1000).format("Y-m-d")
|
||||
}
|
||||
},
|
||||
template: `<div>
|
||||
<input type="hidden" name="certIdsJSON" :value="JSON.stringify(certIds())"/>
|
||||
<div v-if="certs != null && certs.length > 0">
|
||||
<div class="ui label small" v-for="(cert, index) in certs">
|
||||
{{cert.name}} / {{cert.dnsNames}} / 有效至{{formatTime(cert.timeEndAt)}} <a href="" title="删除" @click.prevent="removeCert()"><i class="icon remove"></i></a>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span class="red">选择或上传证书后<span v-if="vProtocol == 'https'">HTTPS</span><span v-if="vProtocol == 'tls'">TLS</span>服务才能生效。</span>
|
||||
<div class="ui divider"></div>
|
||||
</div>
|
||||
<button class="ui button tiny" type="button" @click.prevent="selectCert()">选择已有证书</button>
|
||||
<button class="ui button tiny" type="button" @click.prevent="uploadCert()">上传新证书</button>
|
||||
</div>`
|
||||
})
|
||||
@@ -8,15 +8,21 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th>节点名称</th>
|
||||
<th>主机地址</th>
|
||||
<th>端口</th>
|
||||
<th>访问地址</th>
|
||||
<th class="two wide">状态</th>
|
||||
<th class="two op">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="node in nodes">
|
||||
<td>{{node.name}}</td>
|
||||
<td>{{node.host}}</td>
|
||||
<td>{{node.port}}</td>
|
||||
<td>
|
||||
<div v-if="node.accessAddrs != null && node.accessAddrs.length > 0">
|
||||
<span class="ui label tiny" v-for="addr in node.accessAddrs">{{addr}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<label-on :v-is-on="node.isOn"></label-on>
|
||||
</td>
|
||||
<td>
|
||||
<a :href="'/api/node/settings?nodeId=' + node.id">设置</a>
|
||||
</td>
|
||||
|
||||
@@ -10,17 +10,23 @@
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>主机地址 *</td>
|
||||
<td>进程监听端口 *</td>
|
||||
<td>
|
||||
<input type="text" name="host" maxlength="100"/>
|
||||
<p class="comment">IP地址或者域名。</p>
|
||||
<network-addresses-box :v-name="'listensJSON'" :v-server-type="'httpWeb'" @change="changeListens"></network-addresses-box>
|
||||
<p class="comment">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>端口 *</td>
|
||||
<td>外部访问地址 *</td>
|
||||
<td>
|
||||
<input type="text" name="port" maxlength="5" style="width:6em"/>
|
||||
<p class="comment">1-65535之间。</p>
|
||||
<api-node-addresses-box :v-name="'accessAddrsJSON'"></api-node-addresses-box>
|
||||
<p class="comment">外部访问API节点的网络地址。</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -34,6 +40,15 @@
|
||||
<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>
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifySuccess("保存成功", "/api")
|
||||
|
||||
this.hasHTTPS = false
|
||||
this.changeListens = function (addrs) {
|
||||
this.hasHTTPS = addrs.$any(function (k, v) {
|
||||
return v.protocol == "https"
|
||||
})
|
||||
}
|
||||
})
|
||||
24
web/views/@default/api/node/createAddrPopup.html
Normal file
24
web/views/@default/api/node/createAddrPopup.html
Normal file
@@ -0,0 +1,24 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>添加访问地址</h3>
|
||||
<form 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">
|
||||
<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>
|
||||
@@ -1,5 +1,3 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyPopup
|
||||
|
||||
this.policyType = this.cachePolicy.type
|
||||
})
|
||||
@@ -4,6 +4,7 @@
|
||||
<div class="right-box">
|
||||
<form 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>
|
||||
@@ -12,17 +13,23 @@
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>主机地址 *</td>
|
||||
<td>进程监听端口 *</td>
|
||||
<td>
|
||||
<input type="text" name="host" maxlength="100" v-model="node.host"/>
|
||||
<p class="comment">IP地址或者域名。</p>
|
||||
<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>外部访问地址 *</td>
|
||||
<td>
|
||||
<input type="text" name="port" maxlength="5" style="width:6em" v-model="node.port"/>
|
||||
<p class="comment">1-65535之间。</p>
|
||||
<api-node-addresses-box :v-name="'accessAddrsJSON'" :v-addrs="node.accessAddrs"></api-node-addresses-box>
|
||||
<p class="comment">外部访问API节点的网络地址。</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -30,12 +37,21 @@
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@@ -1,3 +1,12 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifySuccess("保存成功", "/api/node/settings?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"
|
||||
})
|
||||
}
|
||||
})
|
||||
24
web/views/@default/api/node/updateAddrPopup.html
Normal file
24
web/views/@default/api/node/updateAddrPopup.html
Normal file
@@ -0,0 +1,24 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>修改访问地址</h3>
|
||||
<form 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>
|
||||
6
web/views/@default/api/node/updateAddrPopup.js
Normal file
6
web/views/@default/api/node/updateAddrPopup.js
Normal file
@@ -0,0 +1,6 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyPopup
|
||||
let addr = window.parent.UPDATING_ADDR
|
||||
this.protocol = addr.protocol
|
||||
this.addr = addr.host + ":" + addr.portRange
|
||||
})
|
||||
11
web/views/@default/servers/components/cache/@policy_menu.html
vendored
Normal file
11
web/views/@default/servers/components/cache/@policy_menu.html
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
<second-menu>
|
||||
<menu-item href="/servers/components/cache">列表</menu-item>
|
||||
<span class="item">|</span>
|
||||
<menu-item :href="'/servers/components/cache/policy?cachePolicyId=' + cachePolicyId" code="index">{{cachePolicyName}}</menu-item>
|
||||
<menu-item :href="'/servers/components/cache/test?cachePolicyId=' + cachePolicyId" code="test">测试</menu-item>
|
||||
<menu-item :href="'/servers/components/cache/stat?cachePolicyId=' + cachePolicyId" code="stat">统计</menu-item>
|
||||
<menu-item :href="'/servers/components/cache/clean?cachePolicyId=' + cachePolicyId" code="clean">清理</menu-item>
|
||||
<menu-item :href="'/servers/components/cache/purge?cachePolicyId=' + cachePolicyId" code="purge">删除</menu-item>
|
||||
<menu-item :href="'/servers/components/cache/preheat?cachePolicyId=' + cachePolicyId" code="preheat">预热</menu-item>
|
||||
<menu-item :href="'/servers/components/cache/update?cachePolicyId=' + cachePolicyId" code="update">修改</menu-item>
|
||||
</second-menu>
|
||||
@@ -9,7 +9,7 @@
|
||||
<td><input type="text" name="name" maxlength="100" ref="focus"/> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>缓存类型 *</td>
|
||||
<td class="color-border">缓存类型 *</td>
|
||||
<td>
|
||||
<select class="ui dropdown auto-width" name="type" v-model="policyType">
|
||||
<option v-for="type in types" :value="type.type">{{type.name}}</option>
|
||||
@@ -19,7 +19,7 @@
|
||||
<!-- 文件缓存选项 -->
|
||||
<tbody v-if="policyType == 'file'">
|
||||
<tr>
|
||||
<td>缓存目录 *</td>
|
||||
<td class="color-border">缓存目录 *</td>
|
||||
<td>
|
||||
<input type="text" name="fileDir" maxlength="500"/>
|
||||
<p class="comment">存放文件缓存的目录,通常填写绝对路径。</p>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<th>容量</th>
|
||||
<th>引用服务</th>
|
||||
<th>状态</th>
|
||||
<th class="three op">操作</th>
|
||||
<th class="two op">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="(policy, index) in cachePolicies">
|
||||
@@ -30,7 +30,7 @@
|
||||
<td>{{infos[index].countServers}}</td>
|
||||
<td><label-on :v-is-on="policy.isOn"></label-on></td>
|
||||
<td>
|
||||
<a :href="'/servers/components/cache/policy?cachePolicyId=' + policy.id">详情</a> <a href="" @click.prevent="updatePolicy(policy.id)">修改</a> <a href="" @click.prevent="deletePolicy(policy.id)">删除</a>
|
||||
<a :href="'/servers/components/cache/policy?cachePolicyId=' + policy.id">详情</a> <a href="" @click.prevent="deletePolicy(policy.id)">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
@@ -11,18 +11,6 @@ Tea.context(function () {
|
||||
})
|
||||
}
|
||||
|
||||
// 修改策略
|
||||
this.updatePolicy = function (policyId) {
|
||||
teaweb.popup("/servers/components/cache/updatePopup?cachePolicyId=" + policyId, {
|
||||
height: "27em",
|
||||
callback: function () {
|
||||
teaweb.success("保存成功", function () {
|
||||
window.location.reload()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 删除策略
|
||||
this.deletePolicy = function (policyId) {
|
||||
let that = this
|
||||
|
||||
69
web/views/@default/servers/components/cache/policy.html
vendored
Normal file
69
web/views/@default/servers/components/cache/policy.html
vendored
Normal file
@@ -0,0 +1,69 @@
|
||||
{$layout}
|
||||
{$template "/left_menu"}
|
||||
|
||||
<div class="right-box">
|
||||
{$template "policy_menu"}
|
||||
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">策略名称</td>
|
||||
<td>{{cachePolicy.name}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>状态</td>
|
||||
<td><label-on :v-is-on="cachePolicy.isOn"></label-on></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="color-border">缓存类型</td>
|
||||
<td>
|
||||
{{typeName}}<span class="small">({{cachePolicy.type}})</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- 文件缓存选项 -->
|
||||
<tbody v-if="cachePolicy.type == 'file'">
|
||||
<tr>
|
||||
<td class="color-border">缓存目录</td>
|
||||
<td>
|
||||
{{cachePolicy.options.dir}}
|
||||
<p class="comment">存放文件缓存的目录,通常填写绝对路径。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>缓存最大容量</td>
|
||||
<td>
|
||||
<size-capacity-view :v-value="cachePolicy.capacity" :v-default-text="'不限'"></size-capacity-view>
|
||||
<p class="comment">允许缓存的最大内容长度,如果为0表示没有限制。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>最大内容长度</td>
|
||||
<td>
|
||||
<size-capacity-view :v-value="cachePolicy.maxSize" :v-default-text="'不限'"></size-capacity-view>
|
||||
<p class="comment">允许缓存的最大内容长度,如果为0表示没有限制。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>容纳Key数量</td>
|
||||
<td>
|
||||
<span v-if="cachePolicy.maxKeys > 0">{{cachePolicy.maxKeys}}</span>
|
||||
<span v-else>不限</span>
|
||||
<p class="comment">可以容纳多少数量的Key,0表示不限制。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>描述</td>
|
||||
<td>
|
||||
{{cachePolicy.description}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
73
web/views/@default/servers/components/cache/test.html
vendored
Normal file
73
web/views/@default/servers/components/cache/test.html
vendored
Normal file
@@ -0,0 +1,73 @@
|
||||
{$layout}
|
||||
{$template "/left_menu"}
|
||||
|
||||
<div class="right-box">
|
||||
{$template "policy_menu"}
|
||||
|
||||
<h3>选择集群</h3>
|
||||
<select class="ui dropdown auto-width" v-model="clusterId">
|
||||
<option v-for="cluster in clusters" :value="cluster.id">{{cluster.name}}</option>
|
||||
</select>
|
||||
|
||||
<div class="ui divider"></div>
|
||||
|
||||
<h3>测试写入</h3>
|
||||
<form class="ui form" data-tea-action=".testWrite" data-tea-before="beforeWrite" data-tea-done="doneWrite" data-tea-success="successWrite" data-tea-fail="failWrite">
|
||||
<input type="hidden" name="clusterId" :value="clusterId"/>
|
||||
<input type="hidden" name="cachePolicyId" :value="cachePolicyId"/>
|
||||
<table class="ui table selectable definition">
|
||||
<tr>
|
||||
<td class="title">Key</td>
|
||||
<td>
|
||||
<input type="text" name="key" value="my-key"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Value</td>
|
||||
<td>
|
||||
<textarea name="value" rows="3">my-value</textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>操作结果</td>
|
||||
<td>
|
||||
<div v-if="isRequestingWrite">数据发送中...</div>
|
||||
<span class="red" v-if="!isRequestingWrite && !writeOk && writeMessage.length > 0">失败:{{writeMessage}}</span>
|
||||
<div v-if="!isRequestingWrite && writeOk">
|
||||
<span v-if="writeResults.length == 0" class="red">此集群下没有任何可用的节点。</span>
|
||||
<div class="ui label tiny" v-for="result in writeResults" :class="{green:result.isOk, red:!result.isOk}" style="margin-bottom:0.5em">节点{{result.nodeName}}:{{result.message}}</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<submit-btn v-if="!isRequestingWrite">提交</submit-btn>
|
||||
</form>
|
||||
|
||||
<div class="ui divider"></div>
|
||||
|
||||
<h3>测试读取</h3>
|
||||
<form class="ui form" data-tea-action=".testRead" data-tea-before="beforeRead" data-tea-done="doneRead" data-tea-success="successRead" data-tea-fail="failRead">
|
||||
<input type="hidden" name="clusterId" :value="clusterId"/>
|
||||
<input type="hidden" name="cachePolicyId" :value="cachePolicyId"/>
|
||||
<table class="ui table selectable definition">
|
||||
<tr>
|
||||
<td class="title">Key</td>
|
||||
<td>
|
||||
<input type="text" name="key" value="my-key"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>操作结果</td>
|
||||
<td>
|
||||
<div v-if="isRequestingRead">数据发送中...</div>
|
||||
<span class="red" v-if="!isRequestingRead && !readOk && readMessage.length > 0">失败:{{readMessage}}</span>
|
||||
<div v-if="!isRequestingRead && readOk">
|
||||
<span v-if="readResults.length == 0" class="red">此集群下没有任何可用的节点。</span>
|
||||
<div class="ui label tiny" v-for="result in readResults" :class="{green:result.isOk, red:!result.isOk}" style="margin-bottom: 0.5em">节点{{result.nodeName}}:{{result.message}}</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<submit-btn v-if="!isRequestingRead">提交</submit-btn>
|
||||
</form>
|
||||
</div>
|
||||
63
web/views/@default/servers/components/cache/test.js
vendored
Normal file
63
web/views/@default/servers/components/cache/test.js
vendored
Normal file
@@ -0,0 +1,63 @@
|
||||
Tea.context(function () {
|
||||
if (this.clusters.length > 0) {
|
||||
this.clusterId = this.clusters[0].id
|
||||
} else {
|
||||
this.clusterId = 0
|
||||
}
|
||||
|
||||
this.isRequestingWrite = false
|
||||
this.writeOk = false
|
||||
this.writeMessage = ""
|
||||
this.writeIsAllOk = false
|
||||
this.writeResults = []
|
||||
|
||||
this.beforeWrite = function () {
|
||||
this.isRequestingWrite = true
|
||||
this.writeOk = false
|
||||
this.writeMessage = ""
|
||||
this.writeResult = {}
|
||||
}
|
||||
|
||||
this.failWrite = function (resp) {
|
||||
this.writeOk = false
|
||||
this.writeMessage = resp.message
|
||||
}
|
||||
|
||||
this.successWrite = function (resp) {
|
||||
this.writeOk = true
|
||||
this.writeIsAllOk = resp.data.isAllOk
|
||||
this.writeResults = resp.data.results
|
||||
}
|
||||
|
||||
this.doneWrite = function () {
|
||||
this.isRequestingWrite = false
|
||||
}
|
||||
|
||||
this.isRequestingRead = false
|
||||
this.readOk = false
|
||||
this.readMessage = ""
|
||||
this.readIsAllOk = false
|
||||
this.readResults = []
|
||||
|
||||
this.beforeRead = function () {
|
||||
this.isRequestingRead = true
|
||||
this.readOk = false
|
||||
this.readMessage = ""
|
||||
this.readResult = {}
|
||||
}
|
||||
|
||||
this.failRead = function (resp) {
|
||||
this.readOk = false
|
||||
this.readMessage = resp.message
|
||||
};
|
||||
|
||||
this.successRead = function (resp) {
|
||||
this.readOk = true;
|
||||
this.readIsAllOk = resp.data.isAllOk
|
||||
this.readResults = resp.data.results
|
||||
}
|
||||
|
||||
this.doneRead = function () {
|
||||
this.isRequestingRead = false
|
||||
}
|
||||
});
|
||||
79
web/views/@default/servers/components/cache/update.html
vendored
Normal file
79
web/views/@default/servers/components/cache/update.html
vendored
Normal file
@@ -0,0 +1,79 @@
|
||||
{$layout}
|
||||
{$template "/left_menu"}
|
||||
|
||||
<div class="right-box">
|
||||
{$template "policy_menu"}
|
||||
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="cachePolicyId" :value="cachePolicy.id"/>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">策略名称 *</td>
|
||||
<td><input type="text" name="name" maxlength="100" ref="focus" v-model="cachePolicy.name"/> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="color-border">缓存类型 *</td>
|
||||
<td>
|
||||
<select class="ui dropdown auto-width" name="type" v-model="policyType">
|
||||
<option v-for="type in types" :value="type.type">{{type.name}}</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- 文件缓存选项 -->
|
||||
<tbody v-if="policyType == 'file'">
|
||||
<tr>
|
||||
<td class="color-border">缓存目录 *</td>
|
||||
<td>
|
||||
<input type="text" name="fileDir" maxlength="500" v-model="cachePolicy.options.dir"/>
|
||||
<p class="comment">存放文件缓存的目录,通常填写绝对路径。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>缓存最大容量</td>
|
||||
<td>
|
||||
<size-capacity-box :v-name="'capacityJSON'" :v-value="cachePolicy.capacity" :v-count="0" :v-unit="'gb'"></size-capacity-box>
|
||||
<p class="comment">允许缓存的最大内容长度,如果为0表示没有限制。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>最大内容长度</td>
|
||||
<td>
|
||||
<size-capacity-box :v-value="cachePolicy.maxSize" :v-name="'maxSizeJSON'" :v-count="32" :v-unit="'mb'"></size-capacity-box>
|
||||
<p class="comment">允许缓存的最大内容长度,如果为0表示没有限制。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>容纳Key数量</td>
|
||||
<td>
|
||||
<input type="text" name="maxKeys" maxlength="10" style="width:10em" v-model="cachePolicy.maxKeys"/>
|
||||
<p class="comment">可以容纳多少数量的Key,0表示不限制。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>描述</td>
|
||||
<td>
|
||||
<textarea maxlength="200" name="description" rows="3" v-model="cachePolicy.description"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>是否启用</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="isOn" value="1" v-model="cachePolicy.isOn"/>
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
</div>
|
||||
5
web/views/@default/servers/components/cache/update.js
vendored
Normal file
5
web/views/@default/servers/components/cache/update.js
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyReloadSuccess("保存成功 ")
|
||||
|
||||
this.policyType = this.cachePolicy.type
|
||||
})
|
||||
@@ -1,76 +0,0 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>修改缓存策略</h3>
|
||||
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="cachePolicyId" :value="cachePolicy.id"/>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">策略名称 *</td>
|
||||
<td><input type="text" name="name" maxlength="100" ref="focus" v-model="cachePolicy.name"/> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>缓存类型 *</td>
|
||||
<td>
|
||||
<select class="ui dropdown auto-width" name="type" v-model="policyType">
|
||||
<option v-for="type in types" :value="type.type">{{type.name}}</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- 文件缓存选项 -->
|
||||
<tbody v-if="policyType == 'file'">
|
||||
<tr>
|
||||
<td>缓存目录 *</td>
|
||||
<td>
|
||||
<input type="text" name="fileDir" maxlength="500" v-model="cachePolicy.options.dir"/>
|
||||
<p class="comment">存放文件缓存的目录,通常填写绝对路径。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>缓存最大容量</td>
|
||||
<td>
|
||||
<size-capacity-box :v-name="'capacityJSON'" :v-value="cachePolicy.capacity" :v-count="0" :v-unit="'gb'"></size-capacity-box>
|
||||
<p class="comment">允许缓存的最大内容长度,如果为0表示没有限制。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>最大内容长度</td>
|
||||
<td>
|
||||
<size-capacity-box :v-value="cachePolicy.maxSize" :v-name="'maxSizeJSON'" :v-count="32" :v-unit="'mb'"></size-capacity-box>
|
||||
<p class="comment">允许缓存的最大内容长度,如果为0表示没有限制。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>容纳Key数量</td>
|
||||
<td>
|
||||
<input type="text" name="maxKeys" maxlength="10" style="width:10em" v-model="cachePolicy.maxKeys"/>
|
||||
<p class="comment">可以容纳多少数量的Key,0表示不限制。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>描述</td>
|
||||
<td>
|
||||
<textarea maxlength="200" name="description" rows="3" v-model="cachePolicy.description"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>是否启用</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="isOn" value="1" v-model="cachePolicy.isOn"/>
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
Reference in New Issue
Block a user