Authored by jack

upload aws ebs

package com.ui.model.req;
import lombok.Data;
/**
* Created by yoho on 2016/8/31.
*/
@Data
public class AwsEbsTask {
String volumeId;
String taskName;
String sanpShotDesc;
String taskType;
String taskExp;
}
... ...
package com.ui.ctrl;
import com.ui.http.HttpRestClient;
import com.ui.model.BaseResponse;
import com.ui.model.req.AwsEbsTask;
import com.ui.model.req.NginxSyncTask;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
/**
* Created by yoho on 2016/8/23.
*/
@RestController
@RequestMapping(value = "/aws")
public class EbsManagerCtrl {
@Autowired
HttpRestClient httpRestClient;
@RequestMapping("/toEbsManager")
public ModelAndView toNginxView() {
return new ModelAndView("aws/ebsManager");
}
@RequestMapping(value = "/volume/check")
public BaseResponse checkVolume(AwsEbsTask task) {
BaseResponse response = httpRestClient.defaultPost("/aws/volume/check", task, BaseResponse.class);
return response;
}
@RequestMapping(value = "/task/create")
public BaseResponse createTask(AwsEbsTask task) {
BaseResponse response = httpRestClient.defaultPost("/aws/task/create", task, BaseResponse.class);
return response;
}
@RequestMapping(value = "/task/query")
public BaseResponse modifyTask(AwsEbsTask task) {
BaseResponse response = httpRestClient.defaultPost("/aws/task/query", task, BaseResponse.class);
return response;
}
@RequestMapping(value = "/task/all")
public BaseResponse queryAllTask() {
BaseResponse response = httpRestClient.defaultGet("/aws/task/all",BaseResponse.class);
return response;
}
@RequestMapping(value="/task/delete")
public BaseResponse deleteTask(AwsEbsTask task)
{
BaseResponse response = httpRestClient.defaultPost("/aws/task/delete", task, BaseResponse.class);
return response;
}
@RequestMapping(value="/task/stop")
public BaseResponse stopTask(AwsEbsTask task)
{
BaseResponse response = httpRestClient.defaultPost("/aws/task/stop", task, BaseResponse.class);
return response;
}
@RequestMapping(value="/task/start")
public BaseResponse startTask(AwsEbsTask task)
{
BaseResponse response = httpRestClient.defaultPost("/aws/task/start", task, BaseResponse.class);
return response;
}
@RequestMapping(value = "/snapshot/check")
public BaseResponse checkSnapShot(AwsEbsTask task)
{
BaseResponse response = httpRestClient.defaultPost("/aws/snapshot/check", task, BaseResponse.class);
return response;
}
}
... ...
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css"/>
<link rel="stylesheet" href="<%=basePath %>css/unicorn.main.css"/>
<link rel="stylesheet" href="<%=basePath %>css/unicorn.grey.css"/>
<link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css"/>
<link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css"/>
<link rel="stylesheet" href="<%=basePath %>css/uniform.css"/>
<link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
<script src="<%=basePath %>js/excanvas.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/jquery-ui.custom.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>/js/bootstrap.min.js"></script>
<script src="<%=basePath %>/js/unicorn.js"></script>
<script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/moment-with-locales.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.pagination.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.table.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.dialog.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.panel.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.alerts.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/layer/layer.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.select.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/jstree/jstree.min.js"></script>
<script src="<%=basePath %>js/jquery.toaster.js"></script>
<script>
var contextPath = '<%=basePath %>';
</script>
<title>YOHO!运维</title>
</head>
<body>
<!-- 头部 -->
<div id="head">
</div>
<!-- 右侧具体内容 -->
<div id="content">
<div id="breadcrumb">
<a href="#" title="Go to Home" class="tip-bottom"><i
class="icon-home"></i> Home</a> <a href="#" class="current">ebs管理</a>
</div>
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<h5>任务操作</h5>
</div>
<div class="widget-content nopadding">
<div class="widget-title" style="height: 53px;">
<div class="form-inline">
<a href="#" id="toAddTask" class="btn btn-success"
style="margin-top: 12px;margin-left: 12px;" onclick="editTask(0)">添加任务</a>
</div>
</div>
</div>
<div id="taskTable">
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
style="height: 500px;overflow :auto">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<form id="taskForm" class="form-horizontal">
<input type="hidden" name="id">
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>Volume ID:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="volumeId" name="volumeId"
placeholder="操作卷ID" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>任务名称:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="taskName" name="taskName"
placeholder="镜像描述" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>SnapShot描述:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="description" name="description"
placeholder="镜像描述" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" style=""> <span style="color:red">*</span>任务类型:</label>
<div class="col-sm-8">
<select id="taskTypeSelect" name="taskTypeSelect" class="form-control"
style="width: 300px">
<option value="0">ONCE</option>
<option value="1">INTERVAL</option>
<option value="2">CRON</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>执行表达式:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="expression" name="expression"
placeholder="根据任务类型,填写cron表达式或者间隔时间" size="40"/>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
<button type="button" id="checkVolume" class="btn btn-info"
onclick="checkVolume()">校验
</button>
<button type="button" class="btn btn-success" value="Validate" onclick="saveTask()">提交</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true"
style="height: 500px;overflow :auto">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel1"></h4>
</div>
<div class="modal-body">
<form id="volumeForm" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Volume ID:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="v_id" name="v_id"
size="40" readonly="readonly"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Volume Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="v_name" name="v_name"
size="40" readonly="readonly"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Volume Size:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="v_size" name="v_size"
size="40" readonly="readonly"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Volume CTime:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="v_cTime" name="v_cTime"
size="40" readonly="readonly"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Volume State:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="v_state" name="v_state"
size="40" readonly="readonly"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Volume Device:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="v_device" name="v_device"
size="40" readonly="readonly"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Instance ID:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="i_id" name="i_id"
size="40" readonly="readonly"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Instance Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="i_name" name="i_name"
size="40" readonly="readonly"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Instance State:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="i_state" name="i_state"
size="40" readonly="readonly"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Instance Address:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="i_address" name="i_address"
size="40" readonly="readonly"/>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true"
style="height: 500px;overflow :auto">
<div class="modal-dialog" style="width: 1000px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel2"></h4>
</div>
<div class="modal-body">
<div id="snapshotTable">
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</div>
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script>
$("#li_aws_ebs").addClass("active");
</script>
<script type="text/javascript">
$(function () {
$("#taskTable").table({
url: contextPath + "aws/task/all",
striped: true,
panelClass: "panel-success",
pagination: true,
pageSize: 10,
loadFilter: function (data) {
console.log(data.data)
return defaultLoadFilter(data);
},
columns: [{
title: "名称",
field: "taskName"
}, {
title: "类型",
formatter: function (value, rowData, rowIndex) {
if (0 == rowData.taskType) {
return "ONCE";
}
else {
if (1 == rowData.taskType) {
return "INTERVAL";
}
else {
return "CRON";
}
}
}
}, {
title: "状态",
field: "taskState"
}, {
title: "创建时间",
field: "taskCtime"
}, {
title: "操作",
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
//暂停
var stopBtn = $("<button data-target='#updateModal' data-toggle='modal'>").addClass("btn btn-xs btn-warning").html("停").appendTo(div);
stopBtn.click(function () {
stopTask(rowData);
});
div.append("&nbsp;");
div.append("&nbsp;");
div.append("&nbsp;");
//启动
var startBtn = $("<button data-target='#deleteModal' data-toggle='modal'>").addClass("btn btn-xs btn-success").html("启").appendTo(div);
startBtn.click(function () {
startTask(rowData);
}
);
div.append("&nbsp;");
div.append("&nbsp;");
div.append("&nbsp;");
//修改
var editBtn = $("<button data-target='#deleteModal' data-toggle='modal'>").addClass("btn btn-xs btn-info").html("改").appendTo(div);
editBtn.click(function () {
editTask(rowData);
}
);
div.append("&nbsp;");
div.append("&nbsp;");
div.append("&nbsp;");
//删除
var delBtn = $("<button data-target='#deleteModal' data-toggle='modal'>").addClass("btn btn-xs btn-danger").html("删").appendTo(div);
delBtn.click(function () {
delTask(rowData);
}
);
return div;
}
}, {
//运行详情
title: "运行详情",
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
//查看volume——instance信息
var shotTaskInfoBtn = $("<button data-target='#updateModal' data-toggle='modal'>").addClass("btn btn-xs btn-primary").html("INFO").appendTo(div);
shotTaskInfoBtn.click(function () {
showVInstanceInfo(rowData);
});
div.append("&nbsp;");
div.append("&nbsp;");
div.append("&nbsp;");
//查看snapshot信息
var delBtn = $("<button data-target='#deleteModal' data-toggle='modal'>").addClass("btn btn-xs btn-primary").html("SnapShots").appendTo(div);
delBtn.click(function () {
showSnapShot(rowData);
}
);
return div;
}
}],
/* data: data*/
});
});
//打开新增或修改页面
function editTask(data) {
$("#taskForm #messageAlert").hide();
if (data == 0) {//新增页面
$("input[name='id']").val(0);
var input = document.getElementById("volumeId");
input.disabled = false;
$("input[name='volumeId']").val("");
var input = document.getElementById("taskName");
input.disabled = false;
$("input[name='taskName']").val("");
$("input[name='description']").val("");
$("input[name='expression']").val("");
$("#myModalLabel").text("新增任务");
} else {
$.ajax({
url: contextPath + "aws/task/query",
type: 'post',
async: false,
data: {
taskName: data.taskName
},
dataType: "json",
success: function (data) {
if (data.code == 200) {
var taskModel = data.data;
console.log(taskModel)
$("input[name='volumeId']").val(taskModel.volumeId);
var input = document.getElementById("volumeId");
input.disabled = true;
$("input[name='taskName']").val(taskModel.taskName);
var input = document.getElementById("taskName");
input.disabled = true;
$("input[name='description']").val(taskModel.sanpShotDesc);
$("select[name='taskTypeSelect']").val(taskModel.taskType);
$("input[name='expression']").val(taskModel.taskExp);
}
}
});
$("#myModalLabel").text("修改任务");
}
$("#myModal").modal('show');
}
function delTask(rowData) {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
title: "你确定删除吗",
backdrop: "static",
content: "你确定要删除该任务吗?",
buttons: [{
text: "否",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}, {
text: "是",
className: "btn-success",
onclick: function () {
$(dialog).dialog("hide");
$.ajax({
url: contextPath + "aws/task/delete",
type: 'post',
async: false,
data: {
taskName: rowData.taskName
},
dataType: "json",
success: function (data) {
if (!data || data.code != 200) {
localAlert('删除失败', data.message);
}
$("#taskTable").table("load");
}
});
}
}]
});
}
function stopTask(rowData) {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
title: "你确定暂停吗",
backdrop: "static",
content: "你确定要暂停该任务吗?",
buttons: [{
text: "否",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}, {
text: "是",
className: "btn-success",
onclick: function () {
$(dialog).dialog("hide");
$.ajax({
url: contextPath + "aws/task/stop",
type: 'post',
async: false,
data: {
taskName: rowData.taskName
},
dataType: "json",
success: function (data) {
if (!data || data.code != 200) {
localAlert('删除失败', data.message);
}
$("#taskTable").table("load");
}
});
}
}]
});
}
function startTask(rowData) {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
title: "你确定启动吗",
backdrop: "static",
content: "你确定要启动该任务吗?",
buttons: [{
text: "否",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}, {
text: "是",
className: "btn-success",
onclick: function () {
$(dialog).dialog("hide");
$.ajax({
url: contextPath + "aws/task/start",
type: 'post',
async: false,
data: {
taskName: rowData.taskName
},
dataType: "json",
success: function (data) {
if (!data || data.code != 200) {
localAlert('删除失败', data.message);
}
$("#taskTable").table("load");
}
});
}
}]
});
}
function saveTask() {
var v_id = $("input[name='volumeId']").val();
var t_name = $("input[name='taskName']").val();
var description = $("input[name='description']").val();
var t_type = $("select[name='taskTypeSelect']").val();
var t_expression = $("input[name='expression']").val();
if (v_id == null || v_id == "") {
localAlert('请求错误', "请输入volumeId");
return;
}
if (t_name == null || t_name == "") {
localAlert('请求错误', "请输入任务名称");
return;
}
if (t_expression == null || t_expression == "") {
localAlert('请求错误', "请输入任务执行表达式");
return;
}
$.ajax({
url: contextPath + 'aws/task/create',
type: 'POST',
dataType: 'json',
data: {
volumeId: v_id,
taskName: t_name,
sanpShotDesc: description,
taskType: t_type,
taskExp: t_expression
},
success: function (data) {
if (!data || data.code != 200) {
localAlert('请求错误', data.message);
return;
} else {
$("#myModal").modal('hide');
$("#taskTable").table("load");
}
},
error: function (data) {
localAlert('系统异常', data.message);
}
});
}
function checkVolume() {
var id = $("input[name='volumeId']").val();
if ("" === id) {
localAlert("WARN", "请填写相关volume ID....");
return;
}
$.ajax({
url: getUrlBasePath() + "/aws/volume/check",
type: "post",
dataType: "json",
data: {
volumeId: id
},
success: function (response) {
var data = response.data;
showVolumeInfo(data);
},
error: function (e) {
localAlert("ERROR", "未找到相关volume,请确认ID是否正确")
ableSelect();
}
});
}
function showVolumeInfo(data) {
$("input[name='v_id']").val(data.m_volume.id);
$("input[name='v_name']").val(data.m_volume.name);
$("input[name='v_size']").val(data.m_volume.size + "GB");
$("input[name='v_cTime']").val(data.m_volume.createTime);
$("input[name='v_state']").val(data.m_volume.state);
$("input[name='v_device']").val(data.m_volume.device);
$("input[name='i_id']").val(data.m_instance.id);
$("input[name='i_state']").val(data.m_instance.state);
$("input[name='i_address']").val(data.m_instance.address);
$("input[name='i_name']").val(data.m_instance.name);
$("#myModalLabel1").text("volume info");
$("#myModal1").modal('show');
}
function showVInstanceInfo(rowData) {
console.log(rowData)
var id = rowData.volumeId;
console.log("id: " + id);
$.ajax({
url: getUrlBasePath() + "/aws/volume/check",
type: "post",
dataType: "json",
data: {
volumeId: id
},
success: function (response) {
var data = response.data;
showVolumeInfo(data);
},
error: function (e) {
localAlert("ERROR", "未找到相关volume,请确认ID是否正确")
ableSelect();
}
});
}
function showSnapShot(rowData) {
$("#snapshotTable").table({
url: contextPath + "aws/snapshot/check",
queryParams: {
volumeId: rowData.volumeId
}, //调用url传递的参数
method: "POST",
striped: true,
panelClass: "panel-success",
loadFilter: function (data) {
console.log(data.data);
return defaultLoadFilter(data);
},
columns: [{
title: "ID",
field: "snapshotId"
}, {
title: "状态",
field: "state"
}, {
title: "开始时间",
field: "startTime"
}, {
title: "进度",
field: "progress"
}, {
title: "描述",
field: "description"
}],
/* data: data*/
});
$("#myModalLabel2").text("snapshot info");
$("#myModal2").modal('show');
}
</script>
</body>
</html>
... ...
... ... @@ -23,6 +23,7 @@ innerHTML += "<li id='li_nginxview'><a id='li_nginxview_a' href=''><i class='ico
innerHTML += "<li id='li_nginxSync'><a id='li_nginxSync_a' href=''><i class='icon icon-th'></i> <span>Nginx配置同步</span></a></li>";
innerHTML += "<li id='li_dns_monitor'><a id='li_dns_monitor_a' href=''><i class='icon icon-th'></i> <span>DNS反劫持监控</span></a></li>";
innerHTML += "<li id='li_dns_monitor'><a id='li_degrade_info_a' href=''><i class='icon icon-th'></i> <span>降级服务配置</span></a></li>";
innerHTML += "<li id='li_aws_ebs'><a id='li_aws_ebs_a' href=''><i class='icon icon-th'></i> <span>AWS_EBS 管理</span></a></li>";
/*Hystrix*/
innerHTML += "<li class='submenu' id='li_hystrix'><a id='a_hystrix' href='#'><i class='icon icon-th-list'></i> <span>Hystrix</span><span class='label'>2</span></a>";
... ... @@ -87,6 +88,7 @@ document.getElementById("li_nginxSync_a").setAttribute("href", path + "/nginxSyn
document.getElementById("li_om_a").setAttribute("href", path + "/project/toOm");
document.getElementById("li_node_a").setAttribute("href", path + "/project/toNode");
document.getElementById("li_degrade_info_a").setAttribute("href", path + "/degrade/info");
document.getElementById("li_aws_ebs_a").setAttribute("href", path + "/aws/toEbsManager");
function getUrlBasePath() {
... ...