aiforge/templates/repo/grampus/trainjob/show.tmpl

{{template "base/head" .}}
<style>
    .according-panel-heading {
        box-sizing: border-box;
        padding: 8px 16px;
        color: #252b3a;
        background-color: #f2f5fc;
        line-height: 1.5;
        cursor: pointer;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }

    .accordion-panel-title {
        margin-top: 0;
        margin-bottom: 0;
        color: #252b3a;
    }

    .accordion-panel-title-content {
        vertical-align: middle;
        display: inline-block;
        width: calc(100% - 32px);
        cursor: default;
    }

    .acc-margin-bottom {
        margin-bottom: 5px;
    }

    .title_text {
        font-size: 12px;
    }

    .ac-display-inblock {
        display: inline-block;
    }

    .cti-mgRight-sm {
        margin-right: 8px;
    }

    .ac-text-normal {
        font-size: 14px;
        color: #575d6c;
    }

    .uc-accordionTitle-black {
        color: #333;
    }

    .accordion-border {
        border: 1px solid #cce2ff;
    }

    .padding0 {
        padding: 0 !important;
    }

    .content-pad {
        padding: 15px 35px;
    }

    .content-margin {
        margin: 10px 5px;
    }

    .tab_2_content {
        min-height: 360px;
        margin-left: 10px;
    }

    .ac-grid {
        display: block;
        *zoom: 1;
    }

    .ac-grid-col {
        float: left;
        width: 100%;
    }

    .ac-grid-col2 .ac-grid-col {
        width: 50%;
    }

    .ti-form {
        text-align: left;
        max-width: 100%;
        vertical-align: middle;
    }

    .ti-form>tbody {
        font-size: 12px;
    }

    .ti-form>tbody,
    .ti-form>tbody>tr {
        vertical-align: inherit;
    }

    .ti-text-form-label {

        padding-bottom: 20px;
        padding-right: 20px;
        color: #8a8e99;
        font-size: 12px;
        white-space: nowrap !important;
        width: 80px;
        line-height: 30px;
    }

    .ti-text-form-content {
        line-height: 30px;
        padding-bottom: 20px;
    }

    .ti-form>tbody>tr>td {
        vertical-align: top;
        white-space: normal;
    }

    td,
    th {
        padding: 0;
    }

    .ac-grid-col .text-span {
        width: 450px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .redo-color {
        color: #3291F8;
    }

    .ti-action-menu-item:not(:last-child) {
        margin-right: 10px;
        padding-right: 11px;
        text-decoration: none !important;
        color: #526ecc;
        cursor: pointer;
        display: inline-block;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
        position: relative;
    }

    .ti-action-menu-item:not(:last-child):after {
        content: "";
        display: inline-block;
        position: absolute;
        height: 12px;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        -o-transform: translateY(-6px);
        transform: translateY(-6px);
        border-right: 1px solid #dfe1e6;
    }

    .text-width80 {
        width: 100px;
        line-height: 30px;
    }

    .border-according {
        border: 1px solid #dfe1e6;
    }

    .disabled {
        cursor: default;
        pointer-events: none;
        color: rgba(0, 0, 0, .6) !important;
        opacity: .45 !important;
    }

    .pad20 {

        border: 0px !important;
    }

    .model_file_bread {
        margin-bottom: -0.5rem !important;
        padding-left: 1rem;
        padding-top: 0.5rem;
    }
</style>
<div id="mask">
    <div id="loadingPage">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
    </div>
</div>
<div class="repository">
    {{template "repo/header" .}}
    <div class="ui container">
        <h4 class="ui header" id="vertical-segment">
            <div class="ui breadcrumb">
                <a class="section" href="{{.RepoLink}}/debugjob?debugListType=all">
                    {{.i18n.Tr "repo.cloudbrain"}}
                </a>
                <div class="divider"> / </div>
                <a class="section" href="{{$.RepoLink}}/modelarts/train-job">
                    {{$.i18n.Tr "repo.modelarts.train_job"}}
                </a>
                <div class="divider"> / </div>
                <div class="active section">{{.displayJobName}}</div>
            </div>
        </h4>
        {{range $k ,$v := .version_list_task}}
        <div class="ui accordion border-according" id="accordion{{.VersionName}}"
            data-repopath="{{$.RepoRelPath}}/modelarts/train-job" data-jobid="{{.JobID}}"
            data-version="{{.VersionName}}">
            <div class="{{if eq $k 0}}active{{end}} title padding0">
                <div class="according-panel-heading">
                    <div class="accordion-panel-title">
                        <i class="dropdown icon"></i>
                        <span class="accordion-panel-title-content">
                            <span>
                                <div style="float: right;">
                                    {{$.CsrfTokenHtml}}
                                    
                                </div>
                                <div class="ac-display-inblock title_text acc-margin-bottom">

                                    <span class="cti-mgRight-sm">
                                        {{if not (eq .StartTime 0)}}
                                        {{TimeSinceUnix1 .StartTime}}
                                        {{else}}
                                        {{TimeSinceUnix1 .CreatedUnix}}
                                        {{end}}</span>
                                    <span class="cti-mgRight-sm">
                                        {{$.i18n.Tr "repo.modelarts.current_version"}}：{{.VersionName}}</span>
                                    <span class="cti-mgRight-sm">
                                        {{$.i18n.Tr "repo.modelarts.parent_version"}}：{{.PreVersionName}}</span>
                                    <span class="cti-mgRight-sm">{{$.i18n.Tr "repo.modelarts.status"}}：
                                        <span id="{{.VersionName}}-status-span"><i id="icon"
                                                style="vertical-align: middle;" class="{{.Status}}"></i><span id="text"
                                                style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span>
                                    </span>
                                    <span
                                        class="cti-mgRight-sm">{{$.i18n.Tr "repo.modelarts.train_job.dura_time"}}：</span>
                                    <span class="cti-mgRight-sm uc-accordionTitle-black"
                                        id="{{.VersionName}}-duration-span">{{.TrainJobDuration}}</span>
                                    <span data-tooltip="刷新" style="cursor: pointer;" data-inverted=""
                                        onclick="refreshStatus({{.VersionName}})"><i
                                            class="redo icon redo-color"></i></span>

                                </div>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="{{if eq $k 0}}active{{end}} content">
                <div class="content-pad">
                    <div class="ui pointing secondary menu" style="border-bottom: 1px solid rgba(34,36,38,.15);">

                        <a class="active item"
                            data-tab="first{{$k}}">{{$.i18n.Tr "repo.modelarts.train_job.config"}}</a>
                        <a class="item" data-tab="second{{$k}}"
                            onclick="loadLog({{.VersionName}})">{{$.i18n.Tr "repo.modelarts.log"}}</a>
                        <a class="item" data-tab="third{{$k}}"
                            onclick="loadModelFile({{.VersionName}},'','','init')">{{$.i18n.Tr "repo.model_download"}}</a>
                    </div>
                    <div class="ui tab active" data-tab="first{{$k}}">
                        <div style="padding-top: 10px;">
                            <div class="tab_2_content">
                                <div class="ac-grid ac-grid-col2">
                                    <div class="ac-grid-col">
                                        <table class="ti-form">
                                            <tbody class="ti-text-form">
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.cloudbrain_task"}}
                                                    </td>
                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.DisplayJobName}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.status"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w" id="{{.VersionName}}-status">
                                                            {{.Status}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.run_version"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.VersionName}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.start_time"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            <span style="font-size: 12px;" class="">
                                                                {{if not (eq .StartTime 0)}}
                                                                {{TimeSinceUnix1 .StartTime}}
                                                                {{else}}
                                                                {{TimeSinceUnix1 .CreatedUnix}}
                                                                {{end}}</span>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.dura_time"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w"
                                                            id="{{.VersionName}}-duration">
                                                            {{.TrainJobDuration}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.standard"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.FlavorName}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.compute_node"}}
                                                    </td>
                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.WorkServerNumber}}
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="ac-grid-col">
                                        <table class="ti-form">
                                            <tbody class="ti-text-form">
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.AI_driver"}}
                                                    </td>
                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.EngineName}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.code_version"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.BranchName}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.start_file"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.BootFile}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.train_dataset"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.DatasetName}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.run_parameter"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w" title="{{.Parameters}}">
                                                            {{.Parameters}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.grampus.train_job.ai_center"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w" id="{{.VersionName}}-ai_center">
                                                            {{$.ai_center}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.description"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w"
                                                            title="{{.Description}}">
                                                            {{.Description}}
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="ui tab" data-tab="second{{$k}}">
                        <div style="position: relative;">
                            <div class="ui message message{{.VersionName}}" style="display: none;">
                                <div id="header"></div>
                            </div>
                            <div class="ui attached  log" id="log{{.VersionName}}"
                                style="height: 300px !important; overflow: auto;">
                                <input type="hidden" name="end_line" value>
                                <input type="hidden" name="start_line" value>
                                <pre id="log_file{{.VersionName}}"></pre>
                            </div>

                        </div>

                    </div>
                    <div class="ui tab" data-tab="third{{$k}}">
                        <input type="hidden" name="model{{.VersionName}}" value="-1">
                        <input type="hidden" name="modelback{{.VersionName}}" value="-1">
                        <div class='ui breadcrumb model_file_bread' id='file_breadcrumb{{.VersionName}}'>
                            <div class="active section">{{.VersionName}}</div>
                            <div class="divider"> / </div>

                        </div>
                        <div id="dir_list{{.VersionName}}">

                        </div>
                    </div>

                </div>
            </div>
        </div>
        {{end}} {{template "base/paginate" .}}
    </div>
    <!-- 确认模态框 -->
    <div id="deletemodel">
        <div class="ui basic modal">
            <div class="ui icon header">
                <i class="trash icon"></i> {{.i18n.Tr "cloudbrain.delete_task"}}
            </div>

            <div class="content">
                <p>{{.i18n.Tr "cloudbrain.task_delete_confirm"}}</p>
            </div>
            <div class="actions">
                <div class="ui red basic inverted cancel button">
                    <i class="remove icon"></i> {{.i18n.Tr "cloudbrain.operate_cancel"}}
                </div>
                <div class="ui green basic inverted ok button">
                    <i class="checkmark icon"></i> {{.i18n.Tr "cloudbrain.operate_confirm"}}
                </div>
            </div>
        </div>
    </div>
    <!-- 创建模型 -->
    <div id="newmodel">
        <div class="ui modal second">
            <div class="header" style="padding: 1rem;background-color: rgba(240, 240, 240, 100);">
                <h4 id="model_header">导入新模型</h4>
            </div>
            <div class="content content-padding">
                <form id="formId" method="POST" class="ui form">
                    <div class="ui error message">
                    </div>
                    {{$.CsrfTokenHtml}}
                    <input type="hidden" name="trainTaskCreate" value="true">

                    <div class="two inline fields ">
                        <div class="required ten wide field">
                            <label style="margin-left: -23px;">选择训练任务</label>
                            <input type="hidden" class="width83" id="JobId" name="JobId" readonly required>
                            <input class="width83" id="JobName" readonly required>

                        </div>
                        <div class="required six widde field">
                            <label>版本</label>
                            <input class="width70" id="VersionName" name="VersionName" readonly required>
                        </div>
                    </div>

                    <div class="required inline field" id="modelname">
                        <label>模型名称</label>
                        <input style="width: 45%;" id="name" name="Name" required maxlength="25"
                            onkeyup="this.value=this.value.replace(/[, ]/g,'')">
                    </div>
                    <div class="required inline field" id="verionname">
                        <label>模型版本</label>
                        <input style="width: 45%;" id="version" name="Version" value="" readonly required
                            maxlength="255">
                    </div>
                    <div class="inline field">
                        <label>模型标签</label>
                        <input style="width: 83%;margin-left: 7px;" id="label" name="Label" maxlength="255"
                            placeholder='{{.i18n.Tr "repo.modelarts.train_job.label_place"}}'>
                    </div>
                    <div class="inline field">
                        <label for="description">模型描述</label>
                        <textarea style="width: 83%;margin-left: 7px;" id="Description" name="Description" rows="3"
                            maxlength="255" placeholder='{{.i18n.Tr "repo.modelarts.train_job.new_place"}}'
                            onchange="this.value=this.value.substring(0, 255)"
                            onkeydown="this.value=this.value.substring(0, 255)"
                            onkeyup="this.value=this.value.substring(0, 256)"></textarea>
                    </div>

                    <div class="inline field" style="margin-left: 75px;">
                        <button onclick="createModel()" type="button" class="ui create_train_job green button"
                            style="position: absolute;">
                            {{.i18n.Tr "repo.model.manage.sava_model"}}
                        </button>
                    </div>
                </form>
                <div class="actions" style="display: inline-block;margin-left: 180px;">
                    <button class="ui button cancel">{{.i18n.Tr "repo.cloudbrain.cancel"}}</button>
                </div>
            </div>


        </div>
    </div>
</div>
{{template "base/footer" .}}

<script>
    $('.menu .item').tab()
    $(document).ready(function () {
        $('.ui.accordion').accordion({ selector: { trigger: '.icon' } });
    });
    $(document).ready(function () {
        $('.secondary.menu .item').tab();
    });

    let userName
    let repoPath
    let jobID
    let downlaodFlag = {{ $.canDownload }}
    $(document).ready(function () {
        let url = window.location.href;
        let urlArr = url.split('/')
        userName = urlArr.slice(-5)[0]
        repoPath = urlArr.slice(-4)[0]
        jobID = urlArr.slice(-1)[0]
    })
    function stopBubbling(e) {
        e = window.event || e;
        if (e.stopPropagation) {
            e.stopPropagation();      //阻止事件 冒泡传播
        } else {
            e.cancelBubble = true;   //ie兼容
        }
    }

    function showcreate(obj) {
        $('.ui.modal.second')
            .modal({
                centered: false,
                onShow: function () {
                    $('input[name="Version"]').addClass('model_disabled')
                    // $('input[name="JobId"]').text(obj.JobName)
                    $('#JobName').val(obj.DisplayJobName).addClass('model_disabled')
                    $('input[name="JobId"]').val(obj.JobID)
                    $('input[name="VersionName"]').val(obj.VersionName).addClass('model_disabled')
                    $('.ui.dimmer').css({ "background-color": "rgb(136, 136, 136,0.7)" })
                    createModelName()
                },
                onHide: function () {
                    document.getElementById("formId").reset();
                    $('.ui.dimmer').css({ "background-color": "" })
                    $('.ui.error.message').text()
                    $('.ui.error.message').css('display', 'none')
                }
            })
            .modal('show')
    }
    function createModel() {
        let url_href = `/${userName}/${repoPath}/modelmanage/create_new_model`
        let data = $("#formId").serialize()
        $("#mask").css({ "display": "block", "z-index": "9999" })
        $.ajax({
            url: url_href,
            type: 'POST',
            data: data,
            success: function (res) {
                location.href = `/${userName}/${repoPath}/modelmanage/show_model`
                $('.ui.modal.second').modal('hide')
            },
            error: function (xhr) {
                // 隐藏 loading
                // 只有请求不正常（状态码不为200）才会执行
                $('.ui.error.message').text(xhr.responseText)
                $('.ui.error.message').css('display', 'block')
            },
            complete: function (xhr) {
                $("#mask").css({ "display": "none", "z-index": "1" })
            }
        })

    }
    function createModelName() {
        let repoName = location.pathname.split('/')[2]
        let modelName = repoName + '_model_' + Math.random().toString(36).substr(2, 4)
        $('#name').val(modelName)
        $('#version').val("0.0.1")
    }
    function renderSize(value) {
        if (null == value || value == '') {
            return "0 Bytes";
        }
        var unitArr = new Array("Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");
        var index = 0;
        var srcsize = parseFloat(value);
        index = Math.floor(Math.log(srcsize) / Math.log(1024));
        var size = srcsize / Math.pow(1024, index);
        size = size.toFixed(0);//保留的小数位数
        return size + unitArr[index];
    }
    function refreshStatus(version_name) {
        $.get(`/api/v1/repos/${userName}/${repoPath}/grampus/train-job/${jobID}?version_name=${version_name}`, (data) => {
            // header status and duration
            $(`#${version_name}-duration-span`).text(data.JobDuration)
            $(`#${version_name}-status-span span`).text(data.JobStatus)
            $(`#${version_name}-status-span i`).attr("class", data.JobStatus)
            // detail status and duration
            $('#' + version_name + '-duration').text(data.JobDuration)
            $('#' + version_name + '-status').text(data.JobStatus)
            $('#' + version_name + '-ai_center').text(data.AiCenter)
            loadLog(version_name)


        }).fail(function (err) {
            console.log(err);
        });
        stopBubbling(arguments.callee.caller.arguments[0])
    }
    function deleteVersion(version_name) {
        stopBubbling(arguments.callee.caller.arguments[0])
        let flag = 1;
        $('.ui.basic.modal').modal({
            onDeny: function () {
                flag = false
            },
            onApprove: function () {
                $.post(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/del_version`, { version_name: version_name }, (data) => {
                    if (data.VersionListCount === 0) {
                        location.href = `/${userName}/${repoPath}/modelarts/train-job`
                    } else {
                        $('#accordion' + version_name).remove()
                    }

                }).fail(function (err) {
                    console.log(err);
                });
                flag = true
            },
            onHidden: function () {
                if (flag == false) {
                    $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
                }
            }
        })
            .modal('show')

    }
    function stopVersion(version_name) {
        stopBubbling(arguments.callee.caller.arguments[0])
        $.post(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/stop_version`, { version_name: version_name }, (data) => {
            if (data.StatusOK === 0) {
                $('#' + version_name + '-stop').addClass('disabled')
                refreshStatus(version_name)
            }
        }).fail(function (err) {
            console.log(err);
        });
    }
    function loadLog(version_name) {
        document.getElementById("mask").style.display = "block"
        $.get(`/api/v1/repos/${userName}/${repoPath}/grampus/train-job/${jobID}/log?version_name=${version_name}&lines=50&order=asc`, (data) => {
            $('input[name=end_line]').val(data.EndLine)
            $('input[name=start_line]').val(data.StartLine)
            $(`#log_file${version_name}`).text(data.Content)
            document.getElementById("mask").style.display = "none"
        }).fail(function (err) {
            document.getElementById("mask").style.display = "none"
            console.log(err);
        });
    }
    function loadModelFile(version_name, parents, filename, init) {
        parents = parents || ''
        filename = filename || ''
        init = init || ''
        $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/model_list?version_name=${version_name}&parentDir=${parents}`, (data) => {
            $(`#dir_list${version_name}`).empty()
            renderDir(data, version_name)
            if (init === "init") {
                $(`input[name=model${version_name}]`).val("")
                $(`input[name=modelback${version_name}]`).val(version_name)
                $(`#file_breadcrumb${version_name}`).empty()
                let htmlBread = ""
                htmlBread += `<div class='active section'>${version_name}</div>`
                htmlBread += "<div class='divider'> / </div>"
                $(`#file_breadcrumb${version_name}`).append(htmlBread)
            } else {
                renderBrend(version_name, parents, filename, init)
            }
        }).fail(function (err) {
            console.log(err, version_name);
        });

    }
    function renderBrend(version_name, parents, filename, init) {
        if (init == "folder") {
            let htmlBrend = ""
            let sectionName = $(`#file_breadcrumb${version_name} .active.section`).text()
            let parents1 = $(`input[name=model${version_name}]`).val()
            let filename1 = $(`input[name=modelback${version_name}]`).val()
            if (parents1 === "") {
                $(`#file_breadcrumb${version_name} .active.section`).replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}','','init')">${sectionName}</a>`)
            } else {
                $(`#file_breadcrumb${version_name} .active.section`).replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}','${filename1}')">${sectionName}</a>`)
            }

            htmlBrend += `<div class='active section'>${filename}</div>`
            htmlBrend += "<div class='divider'> / </div>"
            $(`#file_breadcrumb${version_name}`).append(htmlBrend)
            $(`input[name=model${version_name}]`).val(parents)
            $(`input[name=modelback${version_name}]`).val(filename)
        } else {
            $(`input[name=model${version_name}]`).val(parents)
            $(`input[name=modelback${version_name}]`).val(filename)
            $(`#file_breadcrumb${version_name} a.section:contains(${filename})`).nextAll().remove()
            $(`#file_breadcrumb${version_name} a.section:contains(${filename})`).replaceWith(`<div class='active section'>${filename}</div>`)
            $(`#file_breadcrumb${version_name} div.section:contains(${filename})`).append("<div class='divider'> / </div>")
        }

    }
    function renderDir(data, version_name) {
        let html = ""
        html += "<div class='ui grid' style='margin:0;'>"
        html += "<div class='row' style='padding: 0;'>"
        html += "<div class='ui sixteen wide column' style='padding:1rem;'>"
        html += "<div class='dir list'>"
        html += "<table id='repo-files-table' class='ui single line table pad20'>"
        html += '<tbody>'
        // html += "</tbody>"
        for (let i = 0; i < data.Dirs.length; i++) {
            let dirs_size = renderSize(data.Dirs[i].Size)
            html += "<tr>"
            html += "<td class='name six wid'>"
            html += "<span class='truncate'>"
            html += "<span class='octicon octicon-file-directory'>"
            html += "</span>"
            if (data.Dirs[i].IsDir) {
                html += `<a  onclick="loadModelFile('${version_name}','${data.Dirs[i].ParenDir}','${data.Dirs[i].FileName}','folder')">`
                html += "<span class='fitted'><i class='folder icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>"
            } else {
                if (downlaodFlag) {
                    html += `<a href="${location.href}/model_download?version_name=${version_name}&file_name=${data.Dirs[i].FileName}&parent_dir=${data.Dirs[i].ParenDir}">`
                }
                else {
                    html += `<a class="disabled">`
                }
                html += "<span class='fitted'><i class='file icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>"
            }
            html += '</a>'
            html += "</span>"
            html += "</td>"
            html += "<td class='message seven wide'>"
            if (data.Dirs[i].IsDir) {
                html += "<span class='truncate has-emoji'></span>"
            } else {
                html += "<span class='truncate has-emoji'>" + `${dirs_size}` + "</span>"
            }

            html += "</td>"

            html += "<td class='text right age three wide'>"
            html += "<span class='truncate has-emoji'>" + data.Dirs[i].ModTime + "</span>"
            html += "</td>"
            html += "</tr>"

        }
        html += "</tbody>"
        html += "</table>"
        html += "</div>"
        html += "</div>"
        html += "</div>"
        html += "</div>"
        $(`#dir_list${version_name}`).append(html)
    }
    function debounce(fn, delay) {
        let timer;
        return (...args) => {
            // 判断定时器是否存在，清除定时器
            if (timer) {
                clearTimeout(timer);
            }

            // 重新调用setTimeout
            timer = setTimeout(() => {
                fn.apply(this, args);
            }, delay);
        };
    }
    const fn = debounce(logScroll, 500)
    function logScroll(version_name) {
        let container = document.querySelector(`#log${version_name}`)
        let scrollTop = container.scrollTop
        let scrollHeight = container.scrollHeight
        let clientHeight = container.clientHeight
        let scrollLeft = container.scrollLeft
        if (((parseInt(scrollTop) + clientHeight == scrollHeight || parseInt(scrollTop) + clientHeight + 1 == scrollHeight || parseInt(scrollTop) + clientHeight - 1 == scrollHeight)) && parseInt(scrollTop) !== 0 && scrollLeft == 0) {
            let end_line = $(`#log${version_name} input[name=end_line]`).val()
            $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${end_line}&lines=50&order=desc`, (data) => {
                if (data.Lines == 0) {
                    $(`.message${version_name} #header`).text('您已翻阅至日志底部')
                    $(`.message${version_name}`).css('display', 'block')
                    setTimeout(function () {
                        $(`.message${version_name}`).css('display', 'none')
                    }, 1000)
                } else {
                    if (end_line === data.EndLine) {
                        return
                    }
                    else {
                        $(`#log${version_name} input[name=end_line]`).val(data.EndLine)
                        $(`#log${version_name}`).append('<pre>' + data.Content)
                    }

                }
            }).fail(function (err) {
                console.log(err);
            });
        }
        if ([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].includes(scrollTop) && scrollLeft == 0) {
            let start_line = $(`#log${version_name} input[name=start_line]`).val()
            $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${start_line}&lines=50&order=asc`, (data) => {
                if (data.Lines == 0) {
                    $(`.message${version_name} #header`).text('您已翻阅至日志顶部')
                    $(`.message${version_name}`).css('display', 'block')
                    setTimeout(function () {
                        $(`.message${version_name}`).css('display', 'none')
                    }, 1000)
                } else {
                    $(`#log${version_name} input[name=start_line]`).val(data.StartLine)   //如果变动就改变所对应的值
                    $(`#log${version_name}`).prepend('<pre>' + data.Content)
                }
            }).fail(function (err) {
                console.log(err);
            });
        }
    }
    function scrollAnimation(dom, currentY, targetY, currentX) {
        let needScrollTop = targetY - currentY;
        let _currentY = currentY;
        setTimeout(() => {
            // 一次调用滑动帧数，每次调用会不一样
            //取总距离的十分之一
            const dist = Math.ceil(needScrollTop / 10);
            _currentY += dist;
            //移动一个十分之一
            dom.scrollTo(currentX || 0, _currentY, 'smooth');
            // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
            if (needScrollTop > 10 || needScrollTop < -10) {
                scrollAnimation(dom, _currentY, targetY)
            } else {
                dom.scrollTo(0, targetY, 'smooth')
            }
        }, 1)
    }

    $('.log_top').click(function () {
        // let logContentDom = document.querySelector('.log')
        // if(!logContentDom)
        //     return
        // let version_name = $('.log_top').data('version')
        let version_name = $(this).data('version')
        let logContentDom = document.querySelector(`#log${version_name}`)

        $(`#log_file${version_name}`).siblings('pre').remove()
        $.get(`/api/v1/repos/${userName}/${repoPath}/grampus/train-job/${jobID}/log?version_name=${version_name}&base_line=&lines=50&order=asc`, (data) => {

            $(`#log${version_name} input[name=end_line]`).val(data.EndLine)   //如果变动就改变所对应的值
            $(`#log${version_name} input[name=start_line]`).val(data.StartLine)
            $(`#log${version_name}`).prepend('<pre>' + data.Content)
            $(`.message${version_name} #header`).text('您已翻阅至日志顶部')
            $(`.message${version_name}`).css('display', 'block')
            setTimeout(function () {
                $(`.message${version_name}`).css('display', 'none')
            }, 1000)
            scrollAnimation(logContentDom, logContentDom.scrollTop, 0);
        })

    })
    $('.log_bottom').click(function (e) {
        let version_name = $(this).data('version')
        let logContentDom = document.querySelector(`#log${version_name}`)
        $(`#log_file${version_name}`).siblings('pre').remove()
        $.get(`/api/v1/repos/${userName}/${repoPath}/grampus/train-job/${jobID}/log?version_name=${version_name}&base_line=&lines=50&order=desc`, (data) => {

            $(`#log${version_name} input[name=end_line]`).val(data.EndLine)   //如果变动就改变所对应的值
            $(`#log${version_name} input[name=start_line]`).val(data.StartLine)
            $(`#log${version_name}`).append('<pre>' + data.Content)
            $.get(`/api/v1/repos/${userName}/${repoPath}/grampus/train-job/${jobID}/log?version_name=${version_name}&base_line=${data.EndLine}&lines=50&order=desc`, (data) => {
                if (data.Lines == 0) {
                    $(`.message${version_name} #header`).text('您已翻阅至日志底部')
                    $(`.message${version_name}`).css('display', 'block')
                    setTimeout(function () {
                        $(`.message${version_name}`).css('display', 'none')
                    }, 1000)
                } else {
                    if (end_line === data.EndLine) {
                        return
                    }
                    else {
                        $(`#log${version_name} input[name=end_line]`).val(data.EndLine)
                        $(`#log${version_name}`).append('<pre>' + data.Content)
                    }

                }
            }).fail(function (err) {
                console.log(err);
            });
            scrollAnimation(logContentDom, logContentDom.scrollTop + 1, logContentDom.scrollHeight - logContentDom.clientHeight);
        })
    })
</script>