实现缓存策略的部分功能

This commit is contained in:
刘祥超
2020-10-04 14:27:05 +08:00
parent bd51284504
commit 937b07cbf6
49 changed files with 1444 additions and 189 deletions

View 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>

View File

@@ -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>

View File

@@ -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> &nbsp; <a href="" @click.prevent="updatePolicy(policy.id)">修改</a> &nbsp; <a href="" @click.prevent="deletePolicy(policy.id)">删除</a>
<a :href="'/servers/components/cache/policy?cachePolicyId=' + policy.id">详情</a> &nbsp; <a href="" @click.prevent="deletePolicy(policy.id)">删除</a>
</td>
</tr>
</table>

View File

@@ -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

View 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">可以容纳多少数量的Key0表示不限制。</p>
</td>
</tr>
<tr>
<td>描述</td>
<td>
{{cachePolicy.description}}
</td>
</tr>
</tbody>
</table>
</div>

View 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>

View 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
}
});

View 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">可以容纳多少数量的Key0表示不限制。</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>

View File

@@ -1,5 +1,5 @@
Tea.context(function () {
this.success = NotifyPopup
this.success = NotifyReloadSuccess("保存成功 ")
this.policyType = this.cachePolicy.type
})

View File

@@ -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">可以容纳多少数量的Key0表示不限制。</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>