fix issue

templates/repo/modelarts/trainjob/show.tmpl

@@ -305,6 +305,7 @@
                             data-tab="first{{$k}}">{{$.i18n.Tr "repo.modelarts.train_job.config"}}</a>
                         <a class="item log_bottom" data-tab="second{{$k}}"
                             data-version="{{.VersionName}}">{{$.i18n.Tr "repo.modelarts.log"}}</a>
+                        <a class="item metric_chart" data-tab="four{{$k}}" data-version="{{.VersionName}}">资源占用情况</a>
                         <a class="item" data-tab="third{{$k}}"
                             onclick="loadModelFile({{.VersionName}},'','','init')">{{$.i18n.Tr "repo.model_download"}}</a>
                     </div>
@@ -501,6 +502,13 @@
                         </div>
 
                     </div>
+                    <div class="ui tab" data-tab="four{{$k}}" style="position: relative;">
+                        <i class="ri-refresh-line metric_chart"
+                            style="position: absolute;right: 25%;color:#3291f8;z-index:99;cursor: pointer;"
+                            data-version="{{.VersionName}}"></i>
+                        <div id="metric-{{.VersionName}}" style="height: 260px;width: 870px;">
+                        </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">

web_src/js/index.js

@@ -5070,3 +5070,100 @@ function initcreateRepo() {
 }
 
 initcreateRepo()
+
+
+function initChartsNpu() {
+  const url = window.location.href
+  const urlArr = url.split('/')
+  let userName = urlArr.slice(-5)[0]
+  let repoPath = urlArr.slice(-4)[0]
+  let jobID = urlArr.slice(-1)[0]
+
+
+  let options = {
+    legend: {
+      data: []
+    },
+    grid: {
+      top: '30%',
+      bottom: '2%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgb(51, 56, 84)',
+      borderColor: 'rgb(51, 51, 51)',
+      borderWidth: 0,
+      textStyle: {
+        color: '#fff'
+      },
+      axisPointer: {
+        type: 'line'
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: [],
+      boundaryGap: false,
+      axisLabel: {
+        interval: 'auto'
+      },
+      name: '时间(min)'
+    },
+    yAxis: {
+      min: 0,
+      max: 100,
+      show: true,
+      name: '占有率(%)',
+      axisLine: {
+        show: true
+      },
+      axisTick: { show: true }
+    },
+
+    series: []
+  };
+  $('.metric_chart').click(function (e) {
+    let versionName = $(this).data('version')
+    console.log("11111", versionName)
+    let myCharts = echarts.init(document.getElementById(`metric-${versionName}`))
+    $.get(`${window.config.AppSubUrl}/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/metric_statistics?version_name=${versionName}&statistic_type=each`, (res) => {
+      let filterDta = res.MetricsInfo.filter((item) => {
+
+        return !(['recvBytesRate', 'diskWriteRate', 'sendBytesRate', 'diskReadRate'].includes(item.metric))
+      })
+      let legenData = filterDta.map((item) => {
+        return item.metric
+      })
+      let seriesData = filterDta.map((item) => {
+        let seriesOption = {
+          name: item.metric,
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 10,
+          smooth: true,
+          showSymbol: false,
+          lineStyle: {
+            width: 2,
+            shadowColor: 'rgba(0,0,0,0.3)',
+            shadowBlur: 10,
+            shadowOffsetY: 8
+          },
+          data: item.value
+        }
+        return seriesOption
+      })
+      let xLength = res.MetricsInfo[0].value.length
+      console.log(legenData)
+      options.xAxis.data = Array.from({ length: xLength }, (_, index) => index + 1)
+      options.legend.data = legenData
+      options.series = seriesData
+      options && myCharts.setOption(options);
+
+    })
+    options && myCharts.setOption(options);
+
+  })
+}
+
+initChartsNpu()