{% extends "index/baseTemp.html" %}

{% block title %}
<title>计算监控</title>
{% endblock %}

{% block blink %}
<link rel="stylesheet" href="{{ pathPrefix }}/plugins/jstree/themes/simple/style.css" />
<link rel="stylesheet" href="{{ pathPrefix }}/plugins/bootstraptable/bootstrap-table.css">
<link rel="stylesheet" href="{{ pathPrefix }}/css/appCenter/jobMonitor/jobMonitor.css">
{% endblock %}

{% block bscript %}
<script src="{{ pathPrefix }}/plugins/jstree/jstree.min.js" type="text/javascript"></script>
<script src="{{ pathPrefix }}/plugins/bootstraptable/bootstrap-table.js"></script>
<script src="{{ pathPrefix }}/plugins/bootstraptable/bootstrap-table-zh-CN.js"></script>
<script src="{{ pathPrefix }}/js/appCenter/jobMonitor/jobMonitor.js"></script>
{% endblock %}

{% block contentbody %}
<!-- 此处为内容区域 -->
<div class="job_content">
    <div class="content_box">
        <div id="toolbar">
            <h5>计算列表</h5>
        </div>
        <table id="job_table"></table>
    </div>
</div>
{% endblock %}

{% block modal %}
<!-- Task任务列表 -->
<div class="modal fade" id="task_list_dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Task任务列表</h4>
            </div>
            <div class="modal-body">
                <table id="task_table"></table>
            </div>
        </div>
    </div>
</div>

<!-- 删除任务记录 -->
<div class="modal fade" id="remove_job_model"  tabindex="-1">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">操作提醒</h4>
            </div>
            <div class="modal-body">
                <p class="tips">您确定要删除,或者停止该条任务吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="del_model_confirm" data-dismiss="modal">
                    <i class="fa fa-trash-o fa-fw"></i> 删除
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 日志 -->
<div class="modal fade" id="log_dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <pre>日志</pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-small btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 任务详情 -->
<div class="modal fade" id="info_dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#basic_info" aria-controls="basic_info" data-toggle="tab">任务详情</a></li>
                    <li><a href="#argus_info" aria-controls="argus_info" data-toggle="tab">输入参数</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="basic_info">
                        <div class="row">
                            <div class="col-sm-6">
                                <label class="col-sm-3">作业名称：</label>
                                <span class="col-sm-9 job_name">-</span>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-sm-3">作业ID :</label>
                                <span class="col-sm-9 job_id">-</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <label class="col-sm-3">运行状态：</label>
                                <span class="col-sm-9 job_status">-</span>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-sm-3">算法名称 :</label>
                                <span class="col-sm-9 job_algo">-</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <label class="col-sm-3">开始时间 :</label>
                                <span class="col-sm-9 job_starttime">-</span>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-sm-3">结束时间 : </label>
                                <span class="col-sm-9 job_finishtime">-</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <label class="col-sm-3">所属作业 :</label>
                                <span class="col-sm-9 job_parent">-</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <label class="col-sm-3">命名空间 :</label>
                                <span class="col-sm-9 job_namespace">-</span>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-sm-3">镜像名称 :</label>
                                <span class="col-sm-9 job_image">-</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-9">
                                <label class="col-sm-2">Pod名称 :</label>
                                <span class="col-sm-10 job_pod">-</span>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="argus_info">
                        <pre class="argus">无信息</pre>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-small btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}