From e8bddccec4272140099873211fd294e1479192d1 Mon Sep 17 00:00:00 2001
From: chenshihai <chenshh@pcl.ac.cn>
Date: Mon, 10 Oct 2022 15:46:49 +0800
Subject: [PATCH] update modelsafety

---
 templates/repo/modelsafety/new.tmpl  |   4 +-
 templates/repo/modelsafety/show.tmpl | 219 +++++++++++++----------------------
 2 files changed, 82 insertions(+), 141 deletions(-)

diff --git a/templates/repo/modelsafety/new.tmpl b/templates/repo/modelsafety/new.tmpl
index 9653034bb..6d9b3e0c0 100644
--- a/templates/repo/modelsafety/new.tmpl
+++ b/templates/repo/modelsafety/new.tmpl
@@ -71,7 +71,7 @@
                             href="{{.Link}}">模型安全评测</a>
                     </div>
                 </div>
-                <div class="required unite min_title inline field">
+                <!-- <div class="required unite min_title inline field">
                     <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "cloudbrain.resource_cluster"}}</label>
                     <div class="ui blue mini menu compact selectcloudbrain">
                         <a class="item {{if not $Grampus}}active{{end}}" href="{{.RepoLink}}/modelsafety/create_gpu">
@@ -83,7 +83,7 @@
                              {{.i18n.Tr "cloudbrain.resource_cluster_c2net"}}(Beta)
                         </a>
                     </div>
-                </div>
+                </div> -->
                 <div class="inline min_title required field">
                     <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "cloudbrain.compute_resource"}}</label>
                     <div class="ui blue mini menu compact selectcloudbrain">
diff --git a/templates/repo/modelsafety/show.tmpl b/templates/repo/modelsafety/show.tmpl
index 46fe2e225..961c7f2a7 100644
--- a/templates/repo/modelsafety/show.tmpl
+++ b/templates/repo/modelsafety/show.tmpl
@@ -220,7 +220,7 @@
                 <div class="active section" vfield="DisplayJobName"></div>
             </div>
         </h4>
-        <div class="ui accordion border-according" id="accordion" data-repopath="{{$.RepoRelPath}}/cloudbrain" data-jobid="" vdatajobid="ID" data-version="">
+        <div class="ui accordion border-according" id="accordion" data-repopath="{{$.RepoRelPath}}/modelsafety" data-jobid="" vdatajobid="ID" data-version="">
             <input type="hidden" id="jobId_input" name="jobId_input" value="" vvalue="JobID">
             <div class="active title padding0">
                 <div class="according-panel-heading">
@@ -251,7 +251,7 @@
                     <div class="ui pointing secondary menu" style="border-bottom: 1px solid rgba(34,36,38,.15);">
                         <a class="active item" data-tab="first0">{{$.i18n.Tr "repo.modelarts.train_job.config"}}</a>            
                         <a class="item log_bottom" data-tab="second0" data-version="">{{$.i18n.Tr "repo.modelarts.log"}}</a>
-                        <a class="item log_bottom" data-tab="third0" data-version="">评测结果</a>
+                        <a class="item" data-tab="third0" data-version="">评测结果</a>
                     </div>
                     <div class="ui tab active" data-tab="first0">
                         <div style="padding-top: 10px;">
@@ -446,7 +446,7 @@
                                                     {{$.i18n.Tr "repo.modelarts.train_job.start_file"}}
                                                   </td>
                                                   <td class="ti-text-form-content">
-                                                    <div class="text-span text-span-w v-field" vfield="BootFile"></div>
+                                                    <div class="text-span text-span-w" vfield="BootFile"></div>
                                                   </td>
                                                 </tr>
                                                 <tr class="ti-no-ng-animate">
@@ -454,7 +454,7 @@
                                                     评测指标                                                     
                                                   </td>
                                                   <td class="ti-text-form-content">
-                                                    <div class="text-span text-span-w v-field">--</div>
+                                                    <div class="text-span text-span-w" vfield="LabelName"></div>
                                                   </td>
                                                 </tr>
                                             </tbody>
@@ -469,7 +469,7 @@
                         <div>
                           <a id="-log-down"
                               class='{{if $.canDownload}}ti-download-file{{else}}disabled{{end}}'
-                              href="/api/v1/repos/{{$.RepoRelPath}}/cloudbrain/{{.ID}}/download_log_file">
+                              href="/api/v1/repos/{{$.RepoRelPath}}">
                               <i class="ri-download-cloud-2-line"></i>
                               <span style="margin-left: 0.3rem;">{{$.i18n.Tr "repo.modelarts.download_log"}}</span>
                           </a>
@@ -513,9 +513,14 @@
                         .__res_title_icon {
                           height: 48px;
                           width: 48px;
-                          background-color: rgb(105, 192, 255);
                           margin-right: 8px;
                         }
+                        .bNIWIE.fill:not([stroke]) {
+                          fill: rgb(105, 192, 255);
+                        }
+                        .bNIWIE.fill:not([fill]) {
+                            fill: rgb(105, 192, 255);
+                        }
                         .__res_title_txt {                      
                           font-family: SourceHanSansSC;
                           font-size: 14px;
@@ -548,11 +553,19 @@
                           border-bottom-left-radius: .28571429rem;
                           border-bottom-right-radius: .28571429rem;
                         }
+                        .__res_no_data {
+                          height: 200px;
+                          display: flex;
+                          justify-content: center;
+                          align-items: center;
+                        }
                       </style>
                       <div style="display:none;">
                         {{template "repo/modelsafety/indicators_descr".}}
                       </div>
-                      <div class="__res_container"></div>
+                      <div class="__res_container">
+                        <div class="__res_no_data">无数据</div>
+                      </div>
                     </div>
                 </div>
             </div>
@@ -599,8 +612,7 @@
     SPEC && $('td.ti-text-form-content.resorce_type div').text(getListValueWithKey(ACC_CARD_TYPE, SPEC.AccCardType));
 })();
 </script>
-<script>
-  // 配置信息页签
+<script>  
   ;(function() {
     function paddingZeros(str, len) {
       str = str.toString();
@@ -609,35 +621,11 @@
       }
       return str;
     }
+
     function timeFormat(date) {
       return `${date.getFullYear()}-${paddingZeros(date.getMonth() + 1, 2)}-${paddingZeros(date.getDate(), 2)} ${paddingZeros(date.getHours(), 2)}:${paddingZeros(date.getMinutes(), 2)}:${paddingZeros(date.getSeconds(), 2)}`;
     }
-    $.ajax({
-      url: window.location.href.replace('/show', ''),
-      type: "get",
-      data: {},
-      contentType: "application/json; charset=utf-8",
-      success(res) {
-        for (var key in res) {
-          $(`[vfield="${key}"]`).text(res[key]);
-          $(`[vclass="${key}"]`).addClass(res[key]);
-          $(`[vtime="${key}"]`).text(res[key] ? timeFormat(new Date(res[key] * 1000)) : '--');          
-          $(`[vtitle="${key}"]`).attr('title', res[key]);
-          $(`[vdataset0="${key}"]`).text(res[key] ? res[key].toString().split(';')[0] : '');
-          $(`[vdataset1="${key}"]`).text(res[key] ? res[key].toString().split(';')[1] : '');
-          $(`[vdataclipboardtext="${key}"]`).attr('data-clipboard-text', res[key]);
-          $(`[vvalue="${key}"]`).val(res[key]);
-          $(`[vdatajobid="${key}"]`).attr('data-jobid', res[key]);
-        }
-      },
-      error(err) {
-        console.log(err);
-      },
-    });
-  })();
 
-  // 评测结果页签
-  ;(function() {
     function initTable(tableEl, data) {
       tableEl.empty();
       tableEl.append(`
@@ -719,7 +707,9 @@
         var descr = $(`[indicator="${indicator}"]`).text();
         var resItemContainer = $(`<div class="__res_item">
           <div class="__res_title">
-            <div class="__res_title_icon"></div>
+            <div class="__res_title_icon">
+              <svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 bNIWIE svg-icon-path-icon fill" viewBox="0 0 32 32" width="48" height="48"><defs data-reactroot=""></defs><g><path d="M8.155 26.783c-3.342-2.449-5.488-6.36-5.488-10.771 0-0.004 0-0.008 0-0.012v0.001c0-7.364 5.969-13.333 13.333-13.333s13.333 5.969 13.333 13.333c0 0.003 0 0.007 0 0.011 0 4.412-2.146 8.323-5.451 10.745l-0.037 0.026-1.353-2.319c2.549-1.969 4.175-5.026 4.175-8.464 0-5.891-4.776-10.667-10.667-10.667s-10.667 4.776-10.667 10.667c0 3.437 1.626 6.494 4.15 8.445l0.025 0.018-1.353 2.319zM10.867 22.136c-1.758-1.477-2.867-3.677-2.867-6.136 0-4.418 3.582-8 8-8s8 3.582 8 8c0 2.459-1.109 4.658-2.854 6.126l-0.012 0.010-1.373-2.355c0.972-0.966 1.573-2.304 1.573-3.782 0-2.946-2.388-5.333-5.333-5.333s-5.333 2.388-5.333 5.333c0 1.478 0.601 2.816 1.573 3.782l0 0-1.373 2.355zM14.667 17.333h2.667v12h-2.667v-12z"></path></g></svg>
+            </div>
             <div class="__res_title_txt">
               <div class="__res_title_txt1">${indicator}-${item.name}</div>
               <div class="__res_title_txt2">${descr}</div>
@@ -734,78 +724,7 @@
       }
     };
 
-    function initData() {
-      var data = {
-        "eType": "static",
-        "name": "fgsm_cifar10_1000",
-        "params": [
-          [
-            "0.1"
-          ],
-          [
-            "0.15"
-          ],
-          [
-            "0.2"
-          ],
-          [
-            "0.25"
-          ],
-          [
-            "0.3"
-          ],
-          [
-            "0.35"
-          ],
-          [
-            "0.4"
-          ]
-        ],
-        "untargetted": {
-          "ACC": [
-            0.169,
-            0.128,
-            0.122,
-            0.115,
-            0.113,
-            0.104,
-            0.1
-          ],
-          "ASS": [
-            0.6525109174194562,
-            0.5128998893711293,
-            0.4012456987633366,
-            0.31603768362214135,
-            0.2522637372349447,
-            0.20173695879100786,
-            0.15927145111766017
-          ]
-        },
-        "targetted": {
-          "ACC": {
-            "targets": [
-              0.127,
-              0.129,
-              0.125,
-              0.131,
-              0.127,
-              0.125,
-              0.115
-            ]
-          },
-          "ASS": {
-            "targets": [
-              0.6529545699941741,
-              0.5101767310061309,
-              0.3905316332202089,
-              0.30660659401929724,
-              0.24579538237865656,
-              0.19831695120705345,
-              0.15426212417026997
-            ]
-          }
-        }
-      };     
+    function initResTab(data) {         
       var name = data.name;
       var params = data.params;
       var indicators = Object.keys(data.targetted);
@@ -824,42 +743,64 @@
       initResItems(list);
     }
 
-    $('.pointing.secondary.menu .item').tab({
-        onVisible: function(tabPath) {
-          if (tabPath === 'third0') {
-            initData();
+    var resultData;
+    function initData() {
+      $.ajax({
+        url: window.location.href.replace('/show', ''),
+        type: "get",
+        data: {},
+        contentType: "application/json; charset=utf-8",
+        success(res) {
+          for (var key in res) {
+            $(`[vfield="${key}"]`).text(res[key]);
+            $(`[vclass="${key}"]`).addClass(res[key]);
+            $(`[vtime="${key}"]`).text(res[key] ? timeFormat(new Date(res[key] * 1000)) : '--');          
+            $(`[vtitle="${key}"]`).attr('title', res[key]);
+            $(`[vdataset0="${key}"]`).text(res[key] ? res[key].toString().split(';')[0] : '');
+            $(`[vdataset1="${key}"]`).text(res[key] ? res[key].toString().split(';')[1] : '');
+            $(`[vdataclipboardtext="${key}"]`).attr('data-clipboard-text', res[key]);
+            $(`[vvalue="${key}"]`).val(res[key]);
+            $(`[vdatajobid="${key}"]`).attr('data-jobid', res[key]);
+          }
+          if (res.Spec) {
+            var SPEC = res.Spec;
+            var showPoint = false;
+            var specStr = window.renderSpecStr(SPEC, showPoint, {
+              gpu_memory: {{$.i18n.Tr "cloudbrain.gpu_memory"}},
+              free: {{$.i18n.Tr "cloudbrain.free"}},
+              point_hr: {{$.i18n.Tr "cloudbrain.point_hr"}},
+              memory: {{$.i18n.Tr "cloudbrain.memory"}},
+              shared_memory: {{$.i18n.Tr "cloudbrain.shared_memory"}},
+            });
+            $('td.ti-text-form-content.spec div').text(specStr);
+            SPEC && $('td.ti-text-form-content.resorce_type div').text(getListValueWithKey(ACC_CARD_TYPE, SPEC.AccCardType));
           }
+          if (res.ResultJson) {
+            resultData = JSON.parse(res.ResultJson);
+          }
+        },
+        error(err) {
+          console.log(err);
         },
       });
-  })();
-</script>
-<script>
+    }
+
+    initData();
+    
     $(document).ready(function () {
       $('.ui.accordion').accordion({ selector: { trigger: '.icon' } });          
     });
 
-    let userName
-    let repoPath
-    let jobName
-    $(document).ready(function () {
-        let url = window.location.href;
-        let urlArr = url.split('/')
-        userName = urlArr.slice(-5)[0]
-        repoPath = urlArr.slice(-4)[0]
-        jobName = urlArr.slice(-1)[0]
-    })
-
-    function loadLog(version_name) {
-      console.log('loadLog');
-        document.getElementById("mask").style.display = "block"
-        $.get(`/api/v1/repos/${userName}/${repoPath}/cloudbrain/${jobName}/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"
-        });
-    }    
-</script>
\ No newline at end of file
+    $('.pointing.secondary.menu .item').tab({
+      onVisible: function(tabPath) {
+        if (tabPath === 'first0') {
+          initData();
+        }
+        if (tabPath === 'third0') {
+          resultData && initResTab(resultData);
+        }
+      },
+    });
+
+  })();
+</script>