...
|
...
|
@@ -35,136 +35,161 @@ |
|
|
float: right;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.config-panel .server-port {
|
|
|
width: 100px;
|
|
|
}
|
|
|
|
|
|
.config-panel .form-inline {
|
|
|
padding: 20px 0;
|
|
|
border-bottom: 1px solid #d9edf7;
|
|
|
}
|
|
|
</style>
|
|
|
<div class="degrade-page">
|
|
|
<div class="panel panel-info">
|
|
|
<div class="panel-heading">zookeeper server</div>
|
|
|
<div class="panel-heading">zookeeper configure</div>
|
|
|
<div class="panel-body">
|
|
|
<div class="form-inline">
|
|
|
<div class="current-server{{#unless ip}} hide{{/unless}}">
|
|
|
当前server地址:
|
|
|
<span id="server-in-use" class="server-in-use" data-ip="{{ip}}" data-port="{{port}}">{{ip}}:{{port}}</span>
|
|
|
<span id="server-modify-btn" class="ip-port-modify-btn">修改</span>
|
|
|
</div>
|
|
|
<div class="server-editor{{#if ip}} hide{{/if}}">
|
|
|
<div class="form-group">
|
|
|
<label for="server-ip">Server IP</label>
|
|
|
<input id="server-ip" class="form-control" type="text" placeholder="input server ip" value="{{ip}}">
|
|
|
<div class="row">
|
|
|
<div class="col-md-6 config-panel" data-type="qcloud">
|
|
|
<div class="panel panel-success">
|
|
|
<div class="panel-heading">
|
|
|
腾讯云
|
|
|
<span class="refresh">
|
|
|
<i class="glyphicon glyphicon-refresh"></i>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="panel-body">
|
|
|
{{# qCloudConfig}}
|
|
|
<div class="form-inline">
|
|
|
<div class="current-server{{#unless ip}} hide{{/unless}}">
|
|
|
当前server地址:
|
|
|
<span class="server-in-use" data-ip="{{ip}}" data-port="{{port}}">{{ip}}:{{port}}</span>
|
|
|
<span class="ip-port-modify-btn">修改</span>
|
|
|
</div>
|
|
|
<div class="server-editor{{#if ip}} hide{{/if}}">
|
|
|
<div class="form-group">
|
|
|
<label>Server IP</label>
|
|
|
<input class="form-control server-ip" type="text" value="{{ip}}">
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="server-port">Server Port</label>
|
|
|
<input class="form-control server-port" type="text" value="{{port}}">
|
|
|
</div>
|
|
|
<span class="btn btn-default server-sure">保存</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
{{/ qCloudConfig}}
|
|
|
|
|
|
<div class="panel-body list-container">
|
|
|
Waitting for connecting to server...
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="server-port">Server Port</label>
|
|
|
<input id="server-port" class="form-control" type="text" placeholder="input server port" value="{{port}}">
|
|
|
</div>
|
|
|
<div class="col-md-6 config-panel" data-type="aws">
|
|
|
<div class="panel panel-warning">
|
|
|
<div class="panel-heading">
|
|
|
AWS
|
|
|
<span class="refresh">
|
|
|
<i class="glyphicon glyphicon-refresh"></i>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="panel-body">
|
|
|
{{# awsConfig}}
|
|
|
<div class="form-inline">
|
|
|
<div class="current-server{{#unless ip}} hide{{/unless}}">
|
|
|
当前server地址:
|
|
|
<span class="server-in-use" data-ip="{{ip}}" data-port="{{port}}">{{ip}}:{{port}}</span>
|
|
|
<span class="ip-port-modify-btn">修改</span>
|
|
|
</div>
|
|
|
<div class="server-editor{{#if ip}} hide{{/if}}">
|
|
|
<div class="form-group">
|
|
|
<label>Server IP</label>
|
|
|
<input class="form-control server-ip" type="text" value="{{ip}}">
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label>Server Port</label>
|
|
|
<input class="form-control server-port" type="text" value="{{port}}">
|
|
|
</div>
|
|
|
<span class="btn btn-default server-sure">保存</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
{{/ awsConfig}}
|
|
|
|
|
|
<div class="panel-body list-container">
|
|
|
Waitting for connecting to server...
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<span id="server-sure" class="btn btn-default">保存</span>
|
|
|
<span id="err-tip" class="err-tip hide">
|
|
|
<i class="glyphicon glyphicon-remove-sign"></i>
|
|
|
小哥,填错了吧
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="panel panel-danger">
|
|
|
<div class="panel-heading">
|
|
|
degrade point
|
|
|
<span id="refresh-connection" class="refresh">
|
|
|
<i class="glyphicon glyphicon-refresh"></i>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div id="list-container" class="panel-body">
|
|
|
Waitting for connecting to server...
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
$(function() {
|
|
|
var $ip = $('#server-ip');
|
|
|
var $port = $('#server-port');
|
|
|
var $tip = $('#err-tip');
|
|
|
|
|
|
var $listContainer = $('#list-container');
|
|
|
|
|
|
function validateIP(ip) {
|
|
|
if (ip === 'localhost' ||
|
|
|
/^(\d)+\.(\d)+\.(\d)+\.(\d)+$/.test(ip))
|
|
|
{
|
|
|
$ip.closest('.form-group').removeClass('has-error');
|
|
|
return true;
|
|
|
}
|
|
|
|
|
|
$ip.closest('.form-group').addClass('has-error');
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
function validatePort(port) {
|
|
|
if (/^[1-9]\d*$/.test(port) && +port >= 1 && +port <= 65535) {
|
|
|
$port.closest('.form-group').removeClass('has-error');
|
|
|
return true;
|
|
|
}
|
|
|
|
|
|
$port.closest('.form-group').addClass('has-error');
|
|
|
return false;
|
|
|
}
|
|
|
$('.ip-port-modify-btn').click(function() {
|
|
|
var $form = $(this).closest('.form-inline');
|
|
|
|
|
|
$('#server-modify-btn').click(function() {
|
|
|
$('.server-editor').removeClass('hide');
|
|
|
$('.current-server').addClass('hide');
|
|
|
$('.server-editor', $form).removeClass('hide');
|
|
|
$('.current-server', $form).addClass('hide');
|
|
|
});
|
|
|
|
|
|
// server
|
|
|
$('#server-sure').click(function() {
|
|
|
var ip = $.trim($ip.val());
|
|
|
var port = $.trim($port.val());
|
|
|
$('.server-sure').click(function() {
|
|
|
var $panel = $(this).closest('.config-panel');
|
|
|
|
|
|
if (!validateIP(ip) || !validatePort(port)) {
|
|
|
$tip.removeClass('hide');
|
|
|
return;
|
|
|
}
|
|
|
var $ip = $('.server-ip', $panel);
|
|
|
var $port = $('.server-port', $panel);
|
|
|
|
|
|
$tip.addClass('hide');
|
|
|
var ip = $.trim($ip.val());
|
|
|
var port = $.trim($port.val());
|
|
|
|
|
|
$.ajax({
|
|
|
type: 'POST',
|
|
|
url: '/degrade/server',
|
|
|
data: {
|
|
|
ip: ip,
|
|
|
port: port
|
|
|
port: port,
|
|
|
type: $panel.data('type')
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
if (data.code === 200) {
|
|
|
//$.pjax.reload('#pjax-container');
|
|
|
$('.server-editor').addClass('hide');
|
|
|
$('.current-server').removeClass('hide');
|
|
|
$('.server-editor', $panel).addClass('hide');
|
|
|
$('.current-server', $panel).removeClass('hide');
|
|
|
|
|
|
$('#server-in-use').text(ip + ':' + port).data('ip', ip).data('port', port);
|
|
|
$('.server-in-use', $panel).text(ip + ':' + port).data('ip', ip).data('port', port);
|
|
|
|
|
|
$('#list-container').html('waiting for connecting server...');
|
|
|
$('.list-container', $panel).html('waiting for connecting server...');
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
$listContainer.on('click', '#degrade-tab li', function() {
|
|
|
$('.list-container').on('click', '.degrade-tab li', function() {
|
|
|
var $this = $(this);
|
|
|
var $panel = $this.closest('.config-panel');
|
|
|
|
|
|
if ($this.hasClass('active')) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
$('li', $('#degrade-tab')).toggleClass('active');
|
|
|
$this.parent().children('li').toggleClass('active');
|
|
|
|
|
|
var index = $this.index();
|
|
|
|
|
|
if (index === 0) {
|
|
|
|
|
|
//PC active
|
|
|
$('.pc-degrade').removeClass('hide');
|
|
|
$('.wap-degrade').addClass('hide');
|
|
|
$('.pc-degrade', $panel).removeClass('hide');
|
|
|
$('.wap-degrade', $panel).addClass('hide');
|
|
|
} else {
|
|
|
|
|
|
// wap active
|
|
|
$('.wap-degrade').removeClass('hide');
|
|
|
$('.pc-degrade').addClass('hide');
|
|
|
$('.wap-degrade', $panel).removeClass('hide');
|
|
|
$('.pc-degrade', $panel).addClass('hide');
|
|
|
}
|
|
|
}).on('change', '.degrade-content input[type="checkbox"]', function() {
|
|
|
var $checkbox = $(this),
|
...
|
...
|
@@ -180,19 +205,26 @@ |
|
|
checked: checked,
|
|
|
id: id
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
if (data.code !== 200) {
|
|
|
$checkbox.prop('checked', !checked);
|
|
|
alert(data.message);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
$('#refresh-connection').click(function() {
|
|
|
$('.refresh').click(function() {
|
|
|
var $panel = $(this).closest('.config-panel');
|
|
|
|
|
|
$.ajax({
|
|
|
type: 'GET',
|
|
|
url: '/degrade/connect',
|
|
|
data: {
|
|
|
ip: $('#server-in-use').data('ip'),
|
|
|
port: $('#server-in-use').data('port')
|
|
|
ip: $('.server-in-use', $panel).data('ip'),
|
|
|
port: $('.server-in-use', $panel).data('port')
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
$('#list-container').html(data);
|
|
|
$('.list-container', $panel).html(data);
|
|
|
});
|
|
|
})
|
|
|
})
|
...
|
...
|
|