导入模型支持智算网络。

Signed-off-by: zouap <zouap@pcl.ac.cn>

templates/repo/grampus/trainjob/show.tmpl

@@ -1,4 +1,5 @@
 {{template "base/head" .}}
+<link rel="stylesheet" href="/self/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
 <style>
     .according-panel-heading {
         box-sizing: border-box;
@@ -194,6 +195,19 @@
         padding-left: 1rem;
         padding-top: 0.5rem;
     }
+    .menuContent{
+        position: absolute;
+        background: #ffffff;
+        left: 0;
+        right: 26px;
+        top: 36px;
+        z-index:999;
+        border: 1px solid #96c8da;
+        border-top: 0;
+        border-bottom-right-radius: 4px;
+        border-bottom-left-radius: 4px;
+        box-shadow: 0 2px 3px 0 rgb(34 36 38 / 15%);
+    }
 </style>
 <div id="mask">
     <div id="loadingPage">
@@ -234,6 +248,7 @@
                                     {{$.CsrfTokenHtml}}
                                     
                                 </div>
+                               
                                 <div class="ac-display-inblock title_text acc-margin-bottom">
 
                                     <span class="cti-mgRight-sm">
@@ -260,6 +275,16 @@
                                             class="redo icon redo-color"></i></span>
 
                                 </div>
+                                 <div style="float: right;">
+                                    {{if and ($.canDownload) (eq .Status "SUCCEEDED") ($.Permission.CanWrite $.UnitTypeModelManage) }}
+                                    <a class="ti-action-menu-item" id="{{.VersionName}}-create-model"
+                                        onclick="showcreate({{.}})">{{$.i18n.Tr "repo.modelarts.create_model"}}</a>
+                                    {{else}}
+                                    <a class="ti-action-menu-item disabled" id="{{.VersionName}}-create-model"
+                                        onclick="showcreate({{.}})">{{$.i18n.Tr "repo.modelarts.create_model"}}</a>
+                                    {{end}}
+
+                                </div>
                             </span>
                         </span>
                     </div>
@@ -510,7 +535,7 @@
         </div>
     </div>
     <!-- 创建模型 -->
-    <div id="newmodel">
+     <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>
@@ -522,17 +547,11 @@
                     {{$.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 class="required inline field">
+                        <label>训练任务</label>
+                        <input type="hidden"  class="width83" id="JobId" name="JobId" readonly required>
+                        <input type="hidden" id="VersionName" name="VersionName" value="V0001">
+                        <input style="width: 45%;" id="JobName" readonly required>
                     </div>
 
                     <div class="required inline field" id="modelname">
@@ -542,8 +561,35 @@
                     </div>
                     <div class="required inline field" id="verionname">
                         <label>模型版本</label>
-                        <input style="width: 45%;" id="version" name="Version" value="" readonly required
-                            maxlength="255">
+                        <input style="width: 45%;" id="version" name="Version" value="" readonly required maxlength="255">
+                    </div>
+                    <div class="unite min_title inline field required">
+                        <label>模型框架</label>
+                        <div class="ui dropdown selection search width70" id="choice_Engine">
+                            <input type="hidden" id="Engine" name="Engine" required>
+                            <div class="default text">选择模型框架</div>
+                            <i class="dropdown icon"></i>
+                            <div class="menu" id="job-Engine">
+                                <option class="active item" data-value="0">Pytorch</option>
+                                <option class="item" data-value="1">TensorFlow</option>
+                                <option class="item" data-value="4">PaddlePaddle</option>
+                                <option class="item" data-value="5">OneFlow</option>
+                                <option class="item" data-value="6">MXNet</option>
+                                <option class="item" data-value="3">Other</option>
+                            </div>
+                        </div>
+
+                    </div>
+                    <div class="unite min_title inline fields required">
+                        <div class="field required">
+                            <label for="modelSelectedFile">模型文件</label>
+                        </div>
+                        <div class="thirteen wide field" style="position:relative">
+                            <input id="modelSelectedFile" type="text"  readonly required onclick="showMenu();"  name="modelSelectedFile" >
+                            <div id="menuContent" class="menuContent" style="display:none;">
+                                <ul id="treeDemo" class="ztree"></ul>
+                            </div>
+                        </div>
                     </div>
                     <div class="inline field">
                         <label>模型标签</label>
@@ -574,39 +620,135 @@
 
         </div>
     </div>
+
 </div>
 {{template "base/footer" .}}
+<script type="text/javascript" src="/self/ztree/js/jquery.ztree.core.js"></script>
+<script type="text/javascript" src="/self/ztree/js/jquery.ztree.excheck.js"></script>
 
 <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兼容
-        }
+   var setting = {
+			check: {
+				enable: true,
+				chkboxType: {"Y":"ps", "N":"ps"}
+			},
+			view: {
+				dblClickExpand: false
+			},
+			callback: {
+				beforeClick: beforeClick,
+				onCheck: onCheck
+			}
+	};
+
+	function beforeClick(treeId, treeNode) {
+			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
+			zTree.checkNode(treeNode, !treeNode.checked, null, true);
+			return false;
+	}
+		
+	function onCheck(e, treeId, treeNode) {
+			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
+			nodes = zTree.getCheckedNodes(true),
+			v = "";
+			for (var i=0, l=nodes.length; i<l; i++) {
+                if(nodes[i].isParent){
+                   continue;
+                }
+                var pathNodes = nodes[i].getPath();
+                var path ="";
+                for(var j=0;j<pathNodes.length;j++){
+                    if(j ==0){
+                        path +=  pathNodes[j].name;
+                    }else{
+                        path += "/" + pathNodes[j].name;
+                    }
+                }
+				v += path + ";";
+			}
+			if (v.length > 0 ) v = v.substring(0, v.length-1);
+			var cityObj = $("#modelSelectedFile");
+			cityObj.attr("value", v);
+	}
+       
+	function showMenu() {
+			var cityObj = $("#modelSelectedFile");
+			var cityOffset = $("#modelSelectedFile").offset();
+			//$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
+            $("#menuContent").slideDown("fast");
+			$("body").bind("mousedown", onBodyDown);
+	}
+	function hideMenu() {
+			$("#menuContent").fadeOut("fast");
+			$("body").unbind("mousedown", onBodyDown);
+	}
+	function onBodyDown(event) {
+			if (!(event.target.id == "menuBtn" || event.target.id == "modelSelectedFile" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
+				hideMenu();
+			}
+	}
+
+    function loadSelectedModelFile(trainJob){
+            console.log("trainJob=" + trainJob);
+            $('#choice_file').dropdown('clear')
+            $("#model-file").empty()
+            if(trainJob ==null || trainJob ==""){
+                console.log("trainJob is null");
+            }else{
+                let type = trainJob.Type;
+                if(type == 2){
+                    if(trainJob.ComputeResource=="NPU"){
+                        type=1;
+                    }else{
+                        type=0;
+                    }
+                }
+                $.get(`/${userName}/${repoPath}/modelmanage/query_train_model?jobName=${trainJob.JobName}&type=${type}&VersionName=${trainJob.VersionName}`, (data) => {
+                    const n_length = data.length
+                    let file_html=''
+                    let firstFileName =''
+                    var zNodes=[];
+                    var nodesMap={};
+                    for (let i=0;i<n_length;i++){
+                        parentNodeMap = nodesMap;
+                        var fileSplits = data[i].FileName.split("/");
+                        for(let j=0;j < fileSplits.length;j++){
+                            if(fileSplits[j] == ""){
+                                break;
+                            }
+                            if(parentNodeMap[fileSplits[j]] == null){
+                                parentNodeMap[fileSplits[j]] = {};
+                            }
+                            parentNodeMap = parentNodeMap[fileSplits[j]]
+                        }
+                    }
+                    convertToNode(zNodes,nodesMap);
+                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
+                })
+            }
     }
 
-    function showcreate(obj) {
+    function convertToNode(nodeList,nodesMap){
+            var keyList = Object.keys(nodesMap);
+            keyList.sort(function(a,b){
+	            return a-b;
+            });
+            var isFirst = true;
+            for(var i=0; i<keyList.length;i++){
+                var node = {};
+                node["name"] = keyList[i];
+                nodeList.push(node);
+                if(nodesMap[keyList[i]] != null && Object.keys(nodesMap[keyList[i]]).length >0){
+                    node["children"]=[];
+                    if(isFirst){
+                        node["open"] = true;
+                        isFirst= false;
+                    }
+                    convertToNode(node["children"],nodesMap[keyList[i]]);
+                }
+            }
+    }
+   function showcreate(obj) {
         $('.ui.modal.second')
             .modal({
                 centered: false,
@@ -615,11 +757,18 @@
                     // $('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')
+                    $('input[name="VersionName"]').val("V0001")
+                   
+                    $('#choice_Engine .default.text').text("Pytorch");
+                    $('#choice_Engine input[name="Engine"]').val(0)
+                   
                     $('.ui.dimmer').css({ "background-color": "rgb(136, 136, 136,0.7)" })
-                    createModelName()
+                    createModelName();
+                    loadSelectedModelFile(obj);
                 },
                 onHide: function () {
+                    var cityObj = $("#modelSelectedFile");
+			        cityObj.attr("value", "");
                     document.getElementById("formId").reset();
                     $('.ui.dimmer').css({ "background-color": "" })
                     $('.ui.error.message').text()
@@ -637,6 +786,8 @@
             type: 'POST',
             data: data,
             success: function (res) {
+                $('input[name="Engine_name"]').val("");
+                $('input[name="Engine"]').val("");
                 location.href = `/${userName}/${repoPath}/modelmanage/show_model`
                 $('.ui.modal.second').modal('hide')
             },
@@ -658,6 +809,36 @@
         $('#name').val(modelName)
         $('#version').val("0.0.1")
     }
+
+    $('.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 renderSize(value) {
         if (null == value || value == '') {
             return "0 Bytes";