|
|
@@ -0,0 +1,283 @@
|
|
|
+{% extends "layout.html" %}
|
|
|
+{% block head %}
|
|
|
+ {{ super() }}
|
|
|
+ <style type="text/css">
|
|
|
+
|
|
|
+ @media (min-width: 768px) {
|
|
|
+ .form-horizontal .control-label {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ label>span {
|
|
|
+ color: deepskyblue;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table {
|
|
|
+ font-size: 12px;
|
|
|
+ border-width: 1px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .table > thead > tr > th,
|
|
|
+ .table > tfoot > tr > th {
|
|
|
+ color: #999999;
|
|
|
+ font-weight: normal;
|
|
|
+ border-bottom: 0 solid #e1e6eb;
|
|
|
+ background-color: #F5F6FA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table > tbody > tr > td {
|
|
|
+ color: #424547;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-bordered > tbody > tr {
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-bordered > thead > tr > th,
|
|
|
+ .table-bordered > tbody > tr > th,
|
|
|
+ .table-bordered > tfoot > tr > th,
|
|
|
+ .table-bordered > thead > tr > td,
|
|
|
+ .table-bordered > tbody > tr > td,
|
|
|
+ .table-bordered > tfoot > tr > td {
|
|
|
+ border-style: solid;
|
|
|
+ border-width: 1px 0 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn,
|
|
|
+ .form-control,
|
|
|
+ .modal-content {
|
|
|
+ border-radius: 0 !important;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
|
|
+{% endblock head %}
|
|
|
+{% block content %}
|
|
|
+
|
|
|
+<script type="text/javascript">
|
|
|
+ var resource_path = window.location.pathname;
|
|
|
+ var cur_url = resource_path;
|
|
|
+
|
|
|
+ $(document).ready(function() {
|
|
|
+ $('#add_boot_job_modal').on('show.bs.modal', function (me) {
|
|
|
+ refresh_boot_job_selectpicker($('#boot_job_selector'));
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ function refresh() {
|
|
|
+ cur_url = resource_path;
|
|
|
+ window.location.href=cur_url;
|
|
|
+ }
|
|
|
+
|
|
|
+ function refresh_boot_job_selectpicker(selectpicker) {
|
|
|
+ $.ajax({
|
|
|
+ url : '/api/boot_jobs?filter=use_for:eq:2',
|
|
|
+ type : 'GET',
|
|
|
+ contentType: "application/json; charset=utf-8",
|
|
|
+ dataType: 'json',
|
|
|
+ error : function() {
|
|
|
+ },
|
|
|
+ success : function(data, textStatus, xhr) {
|
|
|
+ selectpicker.empty();
|
|
|
+ $.each(data.data, function(k, v) {
|
|
|
+ selectpicker.append(
|
|
|
+ $('<option>', {value: v['id'], text: v['name'], 'data-subtext': v['remark']})
|
|
|
+ );
|
|
|
+ });
|
|
|
+ selectpicker.selectpicker('refresh');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function add_boot_job(id) {
|
|
|
+ $.ajax({
|
|
|
+ url : '/api/guests/_boot_jobs/{{ uuid }}/' + id,
|
|
|
+ type : 'PUT',
|
|
|
+ contentType: "application/json; charset=utf-8",
|
|
|
+ error : function() {
|
|
|
+ alter_danger('启动作业添加指令发送失败！');
|
|
|
+ },
|
|
|
+ success : function() {
|
|
|
+ alter_success('启动作业添加指令发送成功！');
|
|
|
+ refresh();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function remove(id) {
|
|
|
+ $.ajax({
|
|
|
+ url : '/api/guests/_boot_jobs/{{ uuid }}/' + id,
|
|
|
+ type : 'DELETE',
|
|
|
+ contentType: "application/json; charset=utf-8",
|
|
|
+ error : function() {
|
|
|
+ alter_danger('启动作业删除指令发送失败！');
|
|
|
+ },
|
|
|
+ success : function() {
|
|
|
+ alter_success('启动作业删除指令发送成功！');
|
|
|
+ refresh();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function delete_at(me) {
|
|
|
+ var id = $('#boot_job_id').val();
|
|
|
+ remove(id);
|
|
|
+ $('#delete_modal').modal('hide');
|
|
|
+ }
|
|
|
+
|
|
|
+ function add_boot_job_at(me) {
|
|
|
+ var id = $('#boot_job_selector').val();
|
|
|
+ add_boot_job(id);
|
|
|
+ $('#add_boot_job_modal').modal('hide');
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<div class="panel">
|
|
|
+ <div class="panel-body">
|
|
|
+ <h3 class="title-hero" style="font-size: 24px;">
|
|
|
+ 启动作业(<a href="/guest/detail/{{ guest_ret.data.uuid }}" style="color: #0275d8;">{{ guest_ret.data.label }}/{{ guest_ret.data.remark }}</a>)
|
|
|
+ </h3>
|
|
|
+ <div>
|
|
|
+ <div id="datatable-row-highlight_wrapper" class="dataTables_wrapper form-inline">
|
|
|
+ <div class="row" style="padding: 10px 10px 10px 0; width: 100%;">
|
|
|
+ <div class="col-sm-12" style="padding-right: 0;">
|
|
|
+ <h4 style="color: orange; {% if guest_boot_jobs_ret.data.ttl < 1 %}display: none;{% endif %}">下列启动作业将在
|
|
|
+ <span style="color: #b94a48; {% if guest_boot_jobs_ret.data.ttl // 60 == 0 %}display: none;{% endif %}">{{ guest_boot_jobs_ret.data.ttl // 60 }}分</span>
|
|
|
+ <span style="color: #b94a48; {% if guest_boot_jobs_ret.data.ttl % 60 == 0 %}display: none;{% endif %}">{{ guest_boot_jobs_ret.data.ttl % 60 }}秒</span>
|
|
|
+ <span>后失效</span>
|
|
|
+ </h4>
|
|
|
+ <div class="pull-right">
|
|
|
+ <button class="btn btn-default" onclick="refresh()" style="border-radius: 0;"><span class="glyph-icon icon-elusive-arrows-cw"></span></button>
|
|
|
+ <a class="btn btn-info" href="javascript:;" data-toggle="modal" data-target="#add_boot_job_modal" style="border-radius: 0; padding-left: 40px; padding-right: 40px;">添加启动作业</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <table id="boot_job_list" class="table table-bordered table-hover" cellspacing="0" width="100%" role="grid"
|
|
|
+ style="width: 100%; margin-bottom: 0; border-bottom-width: 0;">
|
|
|
+ <thead>
|
|
|
+ <tr role="row">
|
|
|
+ <th style="display: none;">ID</th>
|
|
|
+ <th width="280px;">名称</th>
|
|
|
+ <th>作用域</th>
|
|
|
+ <th width="600px;">备注</th>
|
|
|
+ <th>操作</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ {% for item in guest_boot_jobs_ret.data.boot_jobs %}
|
|
|
+ <tr role="row" class="odd">
|
|
|
+ <td style="display: none;">{{ item }}</td>
|
|
|
+ <td>
|
|
|
+ <div>
|
|
|
+ <a href="/operate_rules?boot_job_id={{ item }}"><p style="display: inline-block;">{{ boot_jobs_mapping_by_id[item | int].name }}</p></a>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ {% if boot_jobs_mapping_by_id[item | int].use_for == 0 %}
|
|
|
+ <span style="color: #8800FF;">模板</span>
|
|
|
+ {% elif boot_jobs_mapping_by_id[item | int].use_for == 1 %}
|
|
|
+ <span style="color: #3333FF;">系统</span>
|
|
|
+ {% elif boot_jobs_mapping_by_id[item | int].use_for == 2 %}
|
|
|
+ <span style="color: #00BB00;">用户</span>
|
|
|
+ {% else %}
|
|
|
+ <span style="color: #990000;">未知</span>
|
|
|
+ {% endif %}
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div>
|
|
|
+ <p style="display: inline-block;">{{ boot_jobs_mapping_by_id[item | int].remark }}</p>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="dropdown inline-block">
|
|
|
+ <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
|
|
|
+ 更多
|
|
|
+ </a>
|
|
|
+ <ul class="dropdown-menu">
|
|
|
+ <li>
|
|
|
+ <a href="javascript:;" data-toggle="modal" data-target="#delete_modal"
|
|
|
+ onclick="$('#boot_job_id').val($(this).parent().parent().parent().parent().parent().children()[0].textContent);
|
|
|
+ $('#delete_instance_desc').text($(this).parent().parent().parent().parent().parent().children()[1].textContent)">
|
|
|
+ 删除
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ {% endfor %}
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <table class="table table-bordered" style="border-top-width: 0; z-index: 99; position: sticky; bottom: 0;">
|
|
|
+ <tfoot>
|
|
|
+ <tr style="height: 70px;">
|
|
|
+ <th>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-sm-6">
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-3" style="font-size: 12px; padding-top: 5px; text-align: right;">
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-3" style="text-align: left;">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ </tfoot>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<input id="boot_job_id" title="启动作业 ID" class="form-control" name="boot_job_id" hidden>
|
|
|
+
|
|
|
+<div class="modal" id="delete_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
|
|
|
+ <div class="modal-dialog">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h4 class="modal-title">删除启动作业：</h4>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <p>你确定要删除该启动作业吗？</p>
|
|
|
+ <h3 style="color: orangered;" id="delete_instance_desc"></h3>
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <button type="button" class="btn btn-sm btn-primary" onclick="delete_at();">确定</button>
|
|
|
+ <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="modal" id="add_boot_job_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
|
|
|
+ <div class="modal-dialog modal-lg">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h4 class="modal-title">添加启动作业：</h4>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body" style="padding-top: 0; padding-bottom: 0;">
|
|
|
+ <div class="example-box-wrapper">
|
|
|
+ <form class="form-horizontal bordered-row">
|
|
|
+ <div class="form-group">
|
|
|
+ <div class="col-sm-2"></div>
|
|
|
+ <label class="col-sm-2 control-label"><span class="glyph-icon icon-list-alt"></span> 启动作业</label>
|
|
|
+ <div class="col-sm-6">
|
|
|
+ <select id="boot_job_selector" name="boot_job_selector" title="启动作业" class="selectpicker">
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <div class="col-sm-4"></div>
|
|
|
+ <div class="col-sm-6 pull-right">
|
|
|
+ <button class="btn btn-blue-alt" style="width: 180px; height: 40px; font-size: 16px;" onclick="add_boot_job_at();">添加</button>
|
|
|
+ <button class="btn btn-default" style="width: 64px; height: 40px; font-size: 16px;" data-dismiss="modal">取消</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+{% endblock content %}
|
James Iter