优化数据库节点管理

This commit is contained in:
刘祥超
2021-08-30 10:56:03 +08:00
parent 0790403923
commit 4dc54f95b6
22 changed files with 397 additions and 47 deletions

View File

@@ -0,0 +1,8 @@
<first-menu>
<menu-item href="/db">所有节点</menu-item>
<span class="item disabled">|</span>
<menu-item :href="'/db/node?nodeId=' + node.id" code="node">"{{node.name}}"详情</menu-item>
<menu-item :href="'/db/clean?nodeId=' + node.id" code="clean">清理</menu-item>
<menu-item :href="'/db/logs?nodeId=' + node.id" code="log">运行日志</menu-item>
<menu-item :href="'/db/update?nodeId=' + node.id" code="update">修改</menu-item>
</first-menu>

View File

@@ -1,4 +1,5 @@
{$layout "layout_popup"}
{$layout}
{$template "menu"}
<div class="ui message" v-if="isLoading">正在加载中...</div>

View File

@@ -12,15 +12,20 @@
<th>节点名称</th>
<th>连接地址</th>
<th>数据库名</th>
<th>数据库版本</th>
<th>用量</th>
<th class="center width10">状态</th>
<th class="three op">操作</th>
<th class="two op">操作</th>
</tr>
</thead>
<tr v-for="node in nodes">
<td>{{node.name}}</td>
<td><a :href="'/db/node?nodeId=' + node.id">{{node.name}}</a></td>
<td>{{node.host}}:{{node.port}}</td>
<td>{{node.database}}</td>
<td>
<span v-if="node.status.version.length > 0">v{{node.status.version}}</span>
<span class="disabled" v-else>-</span>
</td>
<td>
<span v-if="node.status.isOk">{{node.status.size}}</span>
<span v-else class="disabled">-</span>
@@ -35,8 +40,7 @@
</span>
</td>
<td>
<a href="" @click.prevent="cleanNode(node.id)" v-if="node.isOn && node.status.isOk">清理</a><span v-else class="disabled">清理 </span> &nbsp;
<a href="" @click.prevent="updateNode(node.id)">修改</a> &nbsp;
<a :href="'/db/node?nodeId=' + node.id">详情</a>
<a href="" @click.prevent="deleteNode(node.id)">删除</a>
</td>
</tr>

View File

@@ -11,18 +11,6 @@ Tea.context(function () {
})
}
// 修改节点
this.updateNode = function (nodeId) {
teaweb.popup("/db/updatePopup?nodeId=" + nodeId, {
height: "30em",
callback: function () {
teaweb.success("保存成功", function () {
window.location.reload()
})
}
})
}
// 删除节点
this.deleteNode = function (nodeId) {
let that = this
@@ -34,15 +22,7 @@ Tea.context(function () {
.refresh()
})
}
// 清理节点
this.cleanNode = function (nodeId) {
teaweb.popup("/db/cleanPopup?nodeId=" + nodeId, {
width: "44em",
height: "26em"
})
}
// 显示错误信息
this.showError = function (err) {
teaweb.popupTip("<span style=\"color:#db2828\">错误信息:" + err + "</span>")

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="/db/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="'/db/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,68 @@
{$layout}
{$template "menu"}
<table class="ui table definition selectable">
<tr>
<td class="title">节点名称</td>
<td>
{{node.name}}
</td>
</tr>
<tr>
<td>状态</td>
<td>
<label-on :v-is-on="node.isOn"></label-on>
<div v-if="status != null" style="margin-top: 0.8em">
<div v-if="status.isOk">
<p class="comment">
<span v-if="status.version.length > 0">版本: v{{status.version}} /</span>
<span v-if="status.isOk">用量:{{status.size}}</span>
<span v-else class="disabled">-</span>
</p>
</div>
<div v-else>
<span class="red">连接错误:{{status.error}}</span>
</div>
</div>
</td>
</tr>
<tr>
<td>主机地址<em>Host</em></td>
<td>
{{node.host}}
</td>
</tr>
<tr>
<td>数据库端口<em>Port</em></td>
<td>
{{node.port}}
</td>
</tr>
<tr>
<td>数据库名称<em>Database</em></td>
<td>
{{node.database}}
</td>
</tr>
<tr>
<td>用户名<em>Username</em></td>
<td>
{{node.username}}
</td>
</tr>
<tr>
<td>密码<em>Password</em></td>
<td>
<span v-if="node.password.length > 0">{{node.password}}</span>
<span v-else class="disabled">-</span>
</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,16 @@
Tea.context(function () {
this.$delay(function () {
this.loadStatus(this.node.id)
})
this.status = null
this.loadStatus = function (nodeId) {
this.$post(".status")
.params({
nodeId: nodeId
})
.success(function (resp) {
this.status = resp.data.status
})
}
})

View File

@@ -1,6 +1,5 @@
{$layout "layout_popup"}
<h3>修改节点</h3>
{$layout}
{$template "menu"}
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
<input type="hidden" name="nodeId" :value="node.id"/>

View File

@@ -0,0 +1,3 @@
Tea.context(function () {
this.success = NotifySuccess("保存成功", "/db/node?nodeId=" + this.node.id)
})