aiforge/web_src/js/features/cloudbrainShow.js

export default async function initCloudrainSow() {
  function debounce(fn, delay) {
    let timer;
    return (...args) => {
      // 判断定时器是否存在，清除定时器
      if (timer) {
        clearTimeout(timer);
      }

      // 重新调用setTimeout
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    };
  }

  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) &&
      scrollLeft === 0
    ) {
      let end_line = $(`#log${version_name} input[name=end_line]`).val();
      $.get(
        `/api/v1/repos/${userName}/${repoPath}/modelarts/inference-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 (scrollTop == 0 && scrollLeft == 0) {
      let start_line = $(`#log${version_name} input[name=start_line]`).val();
      $.get(
        `/api/v1/repos/${userName}/${repoPath}/modelarts/inference-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);
      });
    }
  }
  const fn = debounce(logScroll, 500);
  $(".log-scroll").scroll(function () {
    let version_name = $(this).data("version");
    fn(version_name);
  });
  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}/modelarts/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}/modelarts/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}/modelarts/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
        );
      }
    );
  });

  //
  $(".content-pad").on("click", ".load-model-file", function () {
    let downloadFlag = $(this).data("download-flag") || "";
    let gpuFlag = $(this).data("gpu-flag") || "";
    let version_name = $(this).data("version");
    let parents = $(this).data("parents") || "";
    let filename = $(this).data("filename") || "";
    let init = $(this).data("init") || "";
    let path = $(this).data("path");
    let url = `/api/v1/repos${path}?version_name=${version_name}&parentDir=${parents}`;
    $.get(url, (data) => {
      $(`#dir_list${version_name}`).empty();
      renderDir(path, data, version_name, downloadFlag, gpuFlag);
      if (init === "init") {
        $(`input[name=model${version_name}]`).val("");
        $(`input[name=modelback${version_name}]`).val(version_name);
        $(`#file_breadcrumb${version_name}`).empty();
        let htmlBread = "";
        if (version_name) {
          htmlBread += `<div class='active section'>${version_name}</div>`;
        } else {
          htmlBread += `<div class='active section'>result</div>`;
        }
        htmlBread += "<div class='divider'> / </div>";
        $(`#file_breadcrumb${version_name}`).append(htmlBread);
      } else {
        renderBrend(path, version_name, parents, filename, init);
      }
    }).fail(function (err) {
      console.log(err, version_name);
    });
  });
  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 renderBrend(path, 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 load-model-file' data-path='${path}' data-version='${version_name}' data-parents='${parents1}' data-filename='' data-init='init'>${sectionName}</a>`
        );
      } else {
        $(`#file_breadcrumb${version_name} .active.section`).replaceWith(
          `<a class='section load-model-file' data-path='${path}' data-version='${version_name}' data-parents='${parents1}' data-filename='${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(path, data, version_name, downloadFlag, gpuFlag) {
    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  class='load-model-file' data-path='${path}' data-version='${version_name}' data-parents='${data.Dirs[i].ParenDir}' data-filename='${data.Dirs[i].FileName}' data-init='folder'>`;
        html +=
          "<span class='fitted'><i class='folder icon' width='16' height='16' aria-hidden='true'></i>" +
          data.Dirs[i].FileName +
          "</span>";
      } else {
        if (downloadFlag) {
          if (gpuFlag) {
            if (path.includes("model_list")) {
              html += `<a href="${location.href}/download_model?version_name=${version_name}&fileName=${data.Dirs[i].FileName}&parentDir=${data.Dirs[i].ParenDir}&jobName=${data.task.JobName}">`;
            } else {
              html += `<a href="${location.href}/result_download?version_name=${version_name}&fileName=${data.Dirs[i].FileName}&parentDir=${data.Dirs[i].ParenDir}&jobName=${data.task.JobName}">`;
            }
          } else {
            if (path.includes("model_list")) {
              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 href="${location.href}/result_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);
  }
}