From 8f3f5bd392e500663f8503745ba9995b206a8b4c Mon Sep 17 00:00:00 2001
From: zhoupzh <zhoupzh@pcl.ac.cn>
Date: Fri, 8 Jul 2022 17:37:34 +0800
Subject: [PATCH] fix issue

---
 templates/repo/cloudbrain/inference/show.tmpl |   6 +-
 templates/repo/cloudbrain/trainjob/show.tmpl  | 735 ++++++++++++++++++++++++++
 2 files changed, 738 insertions(+), 3 deletions(-)
 create mode 100644 templates/repo/cloudbrain/trainjob/show.tmpl

diff --git a/templates/repo/cloudbrain/inference/show.tmpl b/templates/repo/cloudbrain/inference/show.tmpl
index 45d38c2eb..6bf003db4 100644
--- a/templates/repo/cloudbrain/inference/show.tmpl
+++ b/templates/repo/cloudbrain/inference/show.tmpl
@@ -308,11 +308,11 @@
                                         <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"}}
+                                                {{$.i18n.Tr "repo.modelarts.train_job.resource_type"}}
                                             </td>
                                             <td class="ti-text-form-content">
                                                 <div class="text-span text-span-w">
-                                                {{.EngineName}}
+                                                    {{$.resource_type}}
                                                 </div>
                                             </td>
 
@@ -456,7 +456,7 @@
 
                                                 <td class="ti-text-form-content">
                                                     <div class="text-span text-span-w">
-                                                        {{.FlavorName}}
+                                                        {{$.i18n.Tr "cloudbrain.gpu_num"}}：{{$.GpuNum}}，{{$.i18n.Tr "cloudbrain.cpu_num"}}：{{$.CpuNum}}，{{$.i18n.Tr "cloudbrain.memory"}}(MB)：{{$.MemMiB}}，{{$.i18n.Tr "cloudbrain.shared_memory"}}(MB)：{{$.ShareMemMiB}}
                                                     </div>
                                                 </td>
                                             </tr>
diff --git a/templates/repo/cloudbrain/trainjob/show.tmpl b/templates/repo/cloudbrain/trainjob/show.tmpl
new file mode 100644
index 000000000..05d678016
--- /dev/null
+++ b/templates/repo/cloudbrain/trainjob/show.tmpl
@@ -0,0 +1,735 @@
+{{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;
+    }
+
+    .info_text {
+        padding-bottom: 20px;
+        padding-right: 20px;
+        font-size: 12px;
+    }
+
+    .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}}/cloudbrain" data-jobid="{{.ID}}" data-version="{{.VersionName}}">
+            <input type="hidden" id="jobId_input" name="jobId_input" value="{{.JobID}}">
+            <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 class="ac-display-inblock title_text acc-margin-bottom">
+                                    <span class="cti-mgRight-sm">{{TimeSinceUnix1 .CreatedUnix}}</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">{{$.duration}}</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="javascript:parseInfo()">{{$.i18n.Tr "repo.cloudbrain.runinfo"}}</a>
+                        <a class="item" data-tab="third{{$k}}"
+                            onclick="loadLog({{.VersionName}})">{{$.i18n.Tr "repo.modelarts.log"}}</a>
+                        <a class="item" data-tab="four{{$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.train_job.start_time"}}
+                                                    </td>
+
+                                                    <td class="ti-text-form-content">
+                                                        <div class="text-span text-span-w">
+                                                            <span style="font-size: 12px;"
+                                                                class="">{{TimeSinceUnix1 .CreatedUnix}}</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">
+                                                            {{$.duration}}
+                                                        </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.resource_type"}}
+                                                    </td>
+
+                                                    <td class="ti-text-form-content">
+                                                        <div class="text-span text-span-w">
+                                                            {{$.resource_type}}
+                                                        </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">
+                                                            {{$.i18n.Tr "cloudbrain.gpu_num"}}：{{$.GpuNum}}，{{$.i18n.Tr "cloudbrain.cpu_num"}}：{{$.CpuNum}}，{{$.i18n.Tr "cloudbrain.memory"}}(MB)：{{$.MemMiB}}，{{$.i18n.Tr "cloudbrain.shared_memory"}}(MB)：{{$.ShareMemMiB}}
+                                                        </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 "cloudbrain.mirror"}}
+                                                    </td>
+
+                                                    <td class="ti-text-form-content">
+                                                        <div class="text-span text-span-w" id="{{.VersionName}}-mirror">
+                                                            {{.Image}}
+                                                        </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.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>
+                            <div class="ui message message{{.VersionName}}" style="display: none;">
+                                <div id="header"></div>
+                            </div>
+                            <div class="ui attached  log" id="log{{.VersionName}}"
+                                style="height: 390px !important; overflow: auto;">
+                                <input type="hidden" id="json_value" value="{{$.result.JobStatus.AppExitDiagnostics}}">
+                                <input type="hidden" id="ExitDiagnostics" value="{{$.ExitDiagnostics}}">
+                                <span id="info_display" class="info_text">
+
+                                </span>
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                    <div class="ui tab" data-tab="third{{$k}}">
+                        <div>
+                            <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="four{{$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 style="display:flex;align-items: center;justify-content: end;color: #f2711c;">
+                            <i class="ri-error-warning-line" style="margin-right:0.5rem;"></i>
+                            <span>{{$.i18n.Tr "repo.file_limit_100"}}</span>
+                        </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> 删除任务
+            </div>
+
+            <div class="content">
+                <p>你确认删除该任务么？此任务一旦删除不可恢复。</p>
+            </div>
+            <div class="actions">
+                <div class="ui red basic inverted cancel button">
+                    <i class="remove icon"></i> 取消操作
+                </div>
+                <div class="ui green basic inverted ok button">
+                    <i class="checkmark icon"></i> 确定操作
+                </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 }}
+    let taskID = {{ $.task.ID }}
+    let realJobName = {{ $.task.JobName }}
+    $(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 loadLog(version_name) {
+        document.getElementById("mask").style.display = "block"
+        $.get(`/api/v1/repos/${userName}/${repoPath}/cloudbrain/${taskID}/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) {
+            console.log(err);
+            document.getElementById("mask").style.display = "none"
+        });
+    }
+    function loadModelFile(version_name, parents, filename, init) {
+        parents = parents || ''
+        filename = filename || ''
+        init = init || ''
+        console.log("start")
+        $.get(`/api/v1/repos/${userName}/${repoPath}/cloudbrain/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}/download_model?version_name=${version_name}&fileName=${data.Dirs[i].FileName}&parentDir=${data.Dirs[i].ParenDir}&jobName=${realJobName}">`
+                }
+                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 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}/cloudbrain/${taskID}?version_name=${versionname}`, (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)
+            loadLog(version_name)
+
+
+        }).fail(function (err) {
+            console.log(err);
+        });
+        stopBubbling(arguments.callee.caller.arguments[0])
+    }
+
+    function parseInfo() {
+        let jsonValue = document.getElementById("json_value").value;
+        let jsonObj = JSON.parse(jsonValue);
+        let podRoleName = jsonObj["podRoleName"];
+        let html = "";
+        if (podRoleName != null) {
+            let task0 = podRoleName["task1-0"];
+            let podEvents = jsonObj["podEvents"];
+            let podEventArray = podEvents[task0];
+            if (podEventArray != null) {
+                for (var i = 0; i < podEventArray.length; i++) {
+                    if (podEventArray[i]["reason"] != "") {
+                        html += "<p><b>[" + podEventArray[i]["reason"] + "]</b></p>";
+                        html += "<p>" + podEventArray[i]["message"] + "</p>";
+                        html += "<p>" + podEventArray[i]["action"] + "</p>";
+                    }
+                }
+            }
+            let extras = jsonObj["extras"];
+            if (extras != null) {
+                for (var i = 0; i < extras.length; i++) {
+                    if (extras[i]["reason"] != "") {
+                        html += "<p><b>[" + extras[i]["reason"] + "]</b></p>";
+                        html += "<p>" + extras[i]["message"] + "</p>";
+                        html += "<p>" + extras[i]["action"] + "</p>";
+                    }
+                }
+            }
+        }
+
+        let string = document.getElementById("ExitDiagnostics").value;
+        string = string.replace(/\r\n/g, "<br>")
+        string = string.replace(/\n/g, "<br>");
+        string = string.replace(/(\r\n)|(\n)/g, '<br>');
+
+        if (string != "") {
+            html += "<p><b>[ExitDiagnostics]</b></p>";
+            html += "<p>" + string + "</p>";
+        }
+
+        document.getElementById("info_display").innerHTML = html;
+    }
+
+</script>
\ No newline at end of file