<!DOCTYPE html>
|
<html>
|
<head>
|
<div th:replace="common/header.html"></div>
|
|
</head>
|
<body th:class="${application.sidebarCollapse}">
|
<div th:replace="common/chart.html"></div>
|
|
<div class="wrapper">
|
|
<div th:replace="common/navbar.html"></div>
|
|
<div th:replace="common/aside.html"></div>
|
|
<!-- Content Wrapper. Contains page content -->
|
<div class="content-wrapper" style="font-size:0.90rem">
|
<!-- Content Header (Page header) -->
|
<section class="content-header">
|
<div class="container-fluid">
|
<div class="row mb-2">
|
<div class="col-sm-6">
|
<h1></h1>
|
</div>
|
<div class="col-sm-6">
|
<ol class="breadcrumb float-sm-right">
|
<li class="breadcrumb-item active"></li>
|
</ol>
|
</div>
|
</div>
|
</div><!-- /.container-fluid -->
|
</section>
|
|
<!-- Main content -->
|
<section class="content">
|
<div class="container-fluid">
|
<div class="row">
|
|
<div class="col-md-10">
|
<div class="card card-primary">
|
<div class="card-header">
|
<h3 class="card-title">添加DOCKER监控</h3>
|
<div class=" float-sm-right">
|
<a href="javascript:history.back()">返回</a>
|
</div>
|
</div>
|
<!-- /.card-header -->
|
<!-- form start -->
|
<form role="form" id="form1" th:action="@{'/dockerInfo/save'}">
|
<input type="hidden" name="id" th:value="${dockerInfo.id}"/>
|
<div class="card-body">
|
<div class="form-group">
|
<label><font color="red">*</font>监控主机<span class="text-muted">（添加docker后，agent需要3分钟来同步到信息，之后正常监控）</span></label>
|
<select name="hostname" id="hostname" class="validate[required] form-control select2" style="width: 100%;">
|
<option value="">请选择</option>
|
<th:block th:each="item,iterStat : ${systemInfoList}">
|
<th:block th:if="${item.remark} == null or ${item.remark} == ''">
|
<option data-select2-id="" th:value="${item.hostname}" th:attr="data-select2-id=${item.hostname}" th:text="${item.hostname}">Alabama</option>
|
</th:block>
|
<th:block th:if="${item.remark} != null and ${item.remark} != ''">
|
<option data-select2-id="" th:value="${item.hostname}" th:attr="data-select2-id=${item.hostname}" th:text="${item.hostname}+'('+${item.remark}+')'">Alabama</option>
|
</th:block>
|
</th:block>
|
</select>
|
</div>
|
<div class="form-group">
|
<label><font color="red">*</font>获取DOCKER方法</label>
|
<select class="validate[required] form-control" onchange="jinchengfangfa()" name="appType" id="appType">
|
<option value="">请选择</option>
|
<option value="1">CONTAINER ID</option>
|
<option value="2">CONTAINER NAME</option>
|
</select>
|
</div>
|
<div class="form-group">
|
<label><font color="red">*</font><span id="jinchengfangfa">CONTAINER ID </span><span id="jinchengfangfaSuffix" class="text-muted">（请输入docker容器的完整ID，查看命令：docker ps --no-trunc）</span></label>
|
<input type="text" autocomplete="off" th:value="${dockerInfo.dockerId}" class="validate[required,maxSize[200]] form-control" name="dockerId" id="dockerId" placeholder="请输入docker容器的完整CONTAINER ID">
|
</div>
|
<div class="form-group">
|
<label><font color="red">*</font>DOCKER名称</label>
|
<input type="text" autocomplete="off" th:value="${dockerInfo.dockerName}" class="validate[required,maxSize[200]] form-control" name="dockerName" id="dockerName" placeholder="请输入自定义名称，如ERP系统">
|
</div>
|
<div id="dataFormList" class="form-group clearfix"></div>
|
<th:block th:if="${#strings.isEmpty(dockerInfo.id)}" >
|
<div class="form-group row">
|
<div class="col-12"><button type="button" onclick="addDataForm()" class="btn btn-primary btn-sm float-right"><i class="fa fa-plus-circle"></i> 添加一行</button> </div>
|
</div>
|
<input type="hidden" name="dataFromIndex" id="dataFromIndex"/>
|
</th:block>
|
<div class="form-group clearfix">
|
<label><font color="red">*</font>监控状态</label></br>
|
<th:block th:if="${#strings.isEmpty(dockerInfo.active)}" >
|
<div class="icheck-primary d-inline">
|
<input type="radio" id="radioPrimary1" name="active" value="1" checked>
|
<label for="radioPrimary1"> 启用监控 </label>
|
</div>
|
<div class="icheck-danger d-inline">
|
<input type="radio" id="radioPrimary3" value="2" name="active" >
|
<label for="radioPrimary3">停止监控</label>
|
</div>
|
</th:block>
|
<th:block th:if="${dockerInfo.active == '1'}">
|
<div class="icheck-primary d-inline">
|
<input type="radio" id="radioPrimary1" name="active" value="1" checked>
|
<label for="radioPrimary1"> 启用监控 </label>
|
</div>
|
<div class="icheck-danger d-inline">
|
<input type="radio" id="radioPrimary3" name="active" value="2">
|
<label for="radioPrimary3">停止监控</label>
|
</div>
|
</th:block>
|
<th:block th:if="${dockerInfo.active == '2'}">
|
<div class="icheck-primary d-inline">
|
<input type="radio" id="radioPrimary1" name="active" value="1">
|
<label for="radioPrimary1"> 启用监控 </label>
|
</div>
|
<div class="icheck-danger d-inline">
|
<input type="radio" id="radioPrimary3" name="active" value="2" checked>
|
<label for="radioPrimary3">停止监控</label>
|
</div>
|
</th:block>
|
</div>
|
|
</div>
|
<!-- /.card-body -->
|
|
<div class="card-footer">
|
<button type="submit" class="btn btn-primary btn-sm" style="margin-right:10px;">保 存</button>
|
<button type="button" th:onclick="goback()" class="btn bg-gradient-danger btn-sm">返 回</button>
|
</div>
|
|
</form>
|
<!-- /.card-body -->
|
</div>
|
<!-- /.card -->
|
|
|
</div>
|
|
</div>
|
</div>
|
</section>
|
</div>
|
|
|
<div th:replace="common/footer.html"></div>
|
|
</div>
|
<!-- ./wrapper -->
|
|
<!-- 动态添加一行数据 -->
|
<div id="dataHideContent" style="display: none">
|
<div id="dataFrom_{num}" class="card card-primary card-outline">
|
<div class="card-body">
|
<div class="form-group">
|
<label><font color="red">*</font><span>CONTAINER ID </span><span class="text-muted">（请输入docker容器的完整ID，查看命令：docker ps --no-trunc）</span></label>
|
<input type="text" autocomplete="off" class="validate[required,maxSize[200]] form-control" name="dockerId_{num}" id="dockerId_{num}" placeholder="">
|
</div>
|
<div class="form-group">
|
<label><font color="red">*</font>DOCKER名称</label>
|
<input type="text" autocomplete="off" class="validate[required,maxSize[200]] form-control" name="dockerName_{num}" id="dockerName_{num}" placeholder="请输入自定义名称，如ERP系统">
|
</div>
|
<div class="form-group row">
|
<div class="col-12"><button type="button" onclick="removeDiv('dataFrom_{num}')" class="btn bg-gradient-danger btn-sm float-right"><i class="far fa-trash-alt"></i> 删除</button></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<link rel="stylesheet" th:href="@{'/static/js/jQuery/validationEngine.jquery.css'}" type="text/css"/>
|
<script th:src="@{'/static/js/jQuery/jquery.validationEngine-zh_CN.js'}" type="text/javascript" charset="utf-8"></script>
|
<script th:src="@{'/static/js/jQuery/jquery.validationEngine.js'}" type="text/javascript" charset="utf-8"></script>
|
<script th:src="@{'/static/js/docker.js?v=3.3.8'}"></script>
|
<script th:inline="javascript">
|
$(document).ready(function(){
|
$("#form1").validationEngine();
|
//Initialize Select2 Elements
|
$('.select2').select2()
|
//Initialize Select2 Elements
|
$('.select2bs4').select2({
|
theme: 'bootstrap4'
|
})
|
|
$("#hostname").val([[${dockerInfo.hostname}]]).select2();
|
$("#appType").val([[${dockerInfo.appType}]]);
|
jinchengfangfaHuixian();
|
});
|
|
function jinchengfangfaHuixian() {
|
var fangfa = $("#appType").val();
|
if(fangfa=='1'){
|
$("#jinchengfangfa").html("CONTAINER ID");
|
$("#jinchengfangfaSuffix").html("（请输入docker容器的完整ID，查看命令：docker ps --no-trunc）");
|
}
|
if(fangfa=='2'){
|
$("#jinchengfangfa").html("CONTAINER NAME");
|
$("#jinchengfangfaSuffix").html("（请输入docker容器的NAME，如tomcat，查看命令：docker ps --no-trunc）");
|
}
|
}
|
|
function jinchengfangfa() {
|
var fangfa = $("#appType").val();
|
if(fangfa=='1'){
|
$("#jinchengfangfa").html("CONTAINER ID");
|
$("#dockerId").attr("placeholder","请输入docker容器的完整CONTAINER ID，如：6d9e50b1e80277f8da8dcad9a08571d823148ec1a9e14d207e8b062543e93c13");
|
$("#jinchengfangfaSuffix").html("（请输入docker容器的完整ID，查看命令：docker ps --no-trunc）");
|
}
|
if(fangfa=='2'){
|
$("#jinchengfangfa").html("CONTAINER NAME");
|
$("#dockerId").attr("placeholder","请输入docker容器的NAME，如：tomcat8");
|
$("#jinchengfangfaSuffix").html("（请输入docker容器的NAME，查看命令：docker ps --no-trunc）");
|
}
|
appType = fangfa;
|
}
|
|
function goback() {
|
history.back();
|
}
|
</script>
|
</body>
|
</html>
|
