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, repoPath, ID) {
    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/${repoPath}/${ID}/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/${repoPath}/${ID}/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");
    let ID = $(`#accordion${version_name}`).data("jobid");
    let repoPath = $(`#accordion${version_name}`).data("repopath");
    fn(version_name, repoPath, ID);
  });
  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}`);
    let ID = $(`#accordion${version_name}`).data("jobid");
    let repoPath = $(`#accordion${version_name}`).data("repopath");
    $(`#log_file${version_name}`).siblings("pre").remove();
    $(`#log${version_name} .ui.inverted.active.dimmer`).css("display", "block");
    $.get(
      `/api/v1/repos/${repoPath}/${ID}/log?version_name=${version_name}&base_line=&lines=50&order=asc`,
      (data) => {
        $(".ui.inverted.active.dimmer").css("display", "none");
        $(`#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);
      }
    ).fail((err) => {
      $(`#log${version_name} .ui.inverted.active.dimmer`).css(
        "display",
        "none"
      );
      throw err;
    });
  });
  $(".log_bottom").click(function (e) {
    let version_name = $(this).data("version");
    let logContentDom = document.querySelector(`#log${version_name}`);
    let ID = $(`#accordion${version_name}`).data("jobid");
    let repoPath = $(`#accordion${version_name}`).data("repopath");
    $(`#log_file${version_name}`).siblings("pre").remove();
    let end_line = $(`#log${version_name} input[name=end_line]`).val();
    $(`#log${version_name} .ui.inverted.active.dimmer`).css("display", "block");
    $.get(
      `/api/v1/repos/${repoPath}/${ID}/log?version_name=${version_name}&base_line=&lines=50&order=desc`,
      (data) => {
        $(`#log${version_name} .ui.inverted.active.dimmer`).css(
          "display",
          "none"
        );
        if (!data.CanLogDownload) {
          $(`#${version_name}-log-down`)
            .removeClass("ti-download-file")
            .addClass("disabled");
        } else {
          $(`#${version_name}-log-down`)
            .addClass("ti-download-file")
            .removeClass("disabled");
        }
        $(`#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/${repoPath}/${ID}/log?version_name=${version_name}&base_line=${data.EndLine}&lines=50&order=desc`,
          (data) => {
            $(".ui.inverted.active.dimmer").css("display", "none");
            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 || end_line === "") {
                return;
              } else {
                $(`#log${version_name} input[name=end_line]`).val(data.EndLine);
                $(`#log${version_name}`).append("<pre>" + data.Content);
              }
            }
          }
        ).fail(function (err) {
          $(`#log${version_name} .ui.inverted.active.dimmer`).css(
            "display",
            "none"
          );
          console.log(err);
        });
        scrollAnimation(
          logContentDom,
          logContentDom.scrollTop + 1,
          logContentDom.scrollHeight - logContentDom.clientHeight
        );
      }
    ).fail((err) => {
      $(`#log${version_name} .ui.inverted.active.dimmer`).css(
        "display",
        "none"
      );
      throw err;
    });
  });

  function loadLog(version_name) {
    document.getElementById("mask").style.display = "block";
    $.get(
      `/api/v1/repos/${userName}/${repoPath}/grampus/train-job/${jobID}/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) {
      document.getElementById("mask").style.display = "none";
      console.log(err);
    });
  }
  $(".refresh-status").click(function (e) {
    let version_name = $(this).data("version");
    let ID = $(`#accordion${version_name}`).data("jobid");
    let repoPath = $(`#accordion${version_name}`).data("repopath");
    refreshStatusShow(version_name, ID, repoPath);
    $(`.log-info-${version_name} .log_bottom`).trigger("click");
    e.stopPropagation();
  });
  $(".stop-show-version").click(function (e) {
    const ID = this.dataset.jobid;
    const repoPath = this.dataset.repopath;
    const version_name = this.dataset.version;
    const url = `/api/v1/repos/${repoPath}/${ID}/stop_version`;
    $.post(url, { version_name: version_name }, (data) => {
      if (data.StatusOK === 0) {
        $(`#${version_name}-stop`).removeClass("blue");
        $(`#${version_name}-stop`).addClass("disabled");
        refreshStatusShow(version_name, ID, repoPath);
      }
    }).fail(function (err) {
      console.log(err);
    });
    e.stopPropagation();
  });
  $(".delete-show-version").click(function (e) {
    const ID = this.dataset.jobid;
    const repoPath = this.dataset.repopath;
    const version_name = this.dataset.version;
    const url = `/api/v1/repos/${repoPath}/${ID}/del_version`;
    $(".ui.basic.modal")
      .modal({
        onApprove: function () {
          $.post(url, { version_name: version_name }, (data) => {
            console.log(data);
            if (data.StatusOK === 0) {
              if (data.VersionListCount === 0) {
                location.href = `/${repoPath}`;
              } else {
                $("#accordion" + version_name).remove();
              }
              refreshStatusShow(version_name, ID, repoPath);
            } else {
              return;
            }
          }).fail(function (err) {
            console.log(err);
          });
        },
      })
      .modal("show");

    e.stopPropagation();
  });
  function refreshStatusShow(version_name, ID, repoPath) {
    $.get(
      `/api/v1/repos/${repoPath}/${ID}?version_name=${version_name}`,
      (data) => {
        //accroding下的状态
        $(`#${version_name}-status-span span`).text(data.JobStatus);
        //accroding下的状态图标
        $(`#${version_name}-status-span i`).attr("class", data.JobStatus);
        //accroding下的运行时长
        $(`#${version_name}-duration-span`).text(data.JobDuration);
        //配置信息详情页的状态
        $(`#${version_name}-status`).text(data.JobStatus);
        //配置信息详情页的状态
        $(`#${version_name}-duration`).text(data.JobDuration);
      }
    ).fail(function (err) {
      console.log(err);
    });
  }
  //
  $(".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();
      if (data.Dirs) {
        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,
          downloadFlag,
          gpuFlag
        );
      }
    }).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,
    downloadFlag,
    gpuFlag
  ) {
    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-download-flag='${downloadFlag}' data-gpu-flag='${gpuFlag}' 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-download-flag='${downloadFlag}' data-gpu-flag='${gpuFlag}' 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);

      let selectEle = $(`#file_breadcrumb${version_name} a.section`).filter(
        (index, item) => {
          return item.text == filename;
        }
      );
      selectEle.nextAll().remove();
      selectEle.after("<div class='divider'> / </div>");
      selectEle.replaceWith(`<div class='active section'>${filename}</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-download-flag='${downloadFlag}' data-gpu-flag='${gpuFlag}' 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='message1 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);
  }

  let nameMap, nameList;
  let RepoLink = $(".cloudbrain-type").data("repo-link");
  let type = $(".cloudbrain-type").data("cloudbrain-type");
  let flagModel = $(".cloudbrain-type").data("flag-model");
  // 获取模型列表和模型名称对应的模型版本
  $(document).ready(function () {
    if (!flagModel) return;
    else {
      $.get(
        `${RepoLink}/modelmanage/query_model_for_predict?type=${type}`,
        (data) => {
          nameMap = data.nameMap;
          nameList = data.nameList;
          let html = `<div class="item"></div>`;
          nameList.forEach((element) => {
            html += `<div class="item" data-value=${element}>${element}</div>`;
          });
          if (nameList.length !== 0) {
            $("#model_name").append(html);
          }
          let faildModelName = $('input[name="model_name"]').val();
          let faildModelVersion = $('input[name="model_version"]').val();
          let dataID;

          // 新建错误的表单返回初始化
          if (faildModelName && nameList.includes(faildModelName)) {
            $("#select_model").dropdown("set text", faildModelName);
            $("#select_model").dropdown("set value", faildModelName);
            nameMap[faildModelName].forEach((element) => {
              if (element.Version === faildModelVersion) {
                dataID = element.ID;
              }
            });
            initModelVerison(faildModelName, nameMap, faildModelVersion);
            initModelckpt(dataID);
          }
        }
      );
    }

    $("#select_model").dropdown({
      onChange: function (value, text, $selectedItem) {
        $("#model_name_version").empty();
        if (value) {
          let html = "";
          nameMap[value].forEach((element) => {
            let { TrainTaskInfo } = element;
            TrainTaskInfo = JSON.parse(TrainTaskInfo);
            html += `<div class="item" data-label="${element.Label}" data-id="${element.ID}" data-value="${element.Path}">${element.Version}</div>`;
          });
          $("#model_name_version").append(html);
          const initVersionText = $(
            "#model_name_version div.item:first-child"
          ).text();
          const initVersionValue = $(
            "#model_name_version div.item:first-child"
          ).data("value");

          $("#select_model_version").dropdown("set text", initVersionText);
          $("#select_model_version").dropdown(
            "set value",
            initVersionValue,
            initVersionText,
            $("#model_name_version div.item:first-child")
          );
        } else {
          $("#select_model_version").dropdown("set text", "");
          $("#select_model_version").dropdown("set value", "");
          $("#select_model_checkpoint").dropdown("set text", "");
          $("#select_model_checkpoint").dropdown("set value", "");
        }
      },
    });

    $("#select_model_version").dropdown({
      onChange: function (value, text, $selectedItem) {
        if (!value) return;
        const dataID =
          $selectedItem && $selectedItem[0].getAttribute("data-id");
        $("input#ai_model_version").val(text);
        $("#select_model_checkpoint").dropdown("set text", "");
        $("#select_model_checkpoint").addClass("loading");

        $("#model_checkpoint").empty();
        let html = "";
        loadCheckpointList(dataID).then((res) => {
          res.forEach((element) => {
            const ckptSuffix = element.FileName.split(".");
            const loadCheckpointFile = [
              "ckpt",
              "pb",
              "h5",
              "json",
              "pkl",
              "pth",
              "t7",
              "pdparams",
              "onnx",
              "pbtxt",
              "keras",
              "mlmodel",
              "cfg",
              "pt",
            ];
            if (
              !element.IsDir &&
              loadCheckpointFile.includes(ckptSuffix[ckptSuffix.length - 1])
            ) {
              html += `<div class="item" data-value=${element.FileName}>${element.FileName}</div>`;
            }
          });
          $("#model_checkpoint").append(html);
          $("#select_model_checkpoint").removeClass("loading");
          const initVersionText = $(
            "#model_checkpoint div.item:first-child"
          ).text();
          const initVersionValue = $(
            "#model_checkpoint div.item:first-child"
          ).data("value");

          $("#select_model_checkpoint").dropdown("set text", initVersionText);
          $("#select_model_checkpoint").dropdown(
            "set value",
            initVersionValue,
            initVersionText,
            $("#model_name_version div.item:first-child")
          );
        });
      },
    });
  });
  function initModelVerison(value, nameMap, faildModelVersion) {
    let faildTrainUrl = $('input[name="pre_train_model_url"]').val();
    let html = "";
    nameMap[value].forEach((element) => {
      let { TrainTaskInfo } = element;
      TrainTaskInfo = JSON.parse(TrainTaskInfo);
      html += `<div class="item" data-label="${element.Label}" data-id="${element.ID}" data-value="${element.Path}">${element.Version}</div>`;
    });
    $("#model_name_version").append(html);
    $("#select_model_version").dropdown("set text", faildModelVersion);
    $("#select_model_version").dropdown("set value", faildTrainUrl);
  }
  function initModelckpt(dataID) {
    let faildCkptName = $('input[name="ckpt_name"]').val();
    $("#select_model_checkpoint").addClass("loading");
    $("#model_checkpoint").empty();
    let html = "";
    loadCheckpointList(dataID).then((res) => {
      res.forEach((element) => {
        const ckptSuffix = element.FileName.split(".");
        const loadCheckpointFile = [
          "ckpt",
          "pb",
          "h5",
          "json",
          "pkl",
          "pth",
          "t7",
          "pdparams",
          "onnx",
          "pbtxt",
          "keras",
          "mlmodel",
          "cfg",
          "pt",
        ];
        if (
          !element.IsDir &&
          loadCheckpointFile.includes(ckptSuffix[ckptSuffix.length - 1])
        ) {
          html += `<div class="item" data-value=${element.FileName}>${element.FileName}</div>`;
        }
      });
      $("#model_checkpoint").append(html);
      $("#select_model_checkpoint").removeClass("loading");
      $("#select_model_checkpoint").dropdown("set text", faildCkptName);
      $("#select_model_checkpoint").dropdown("set value", faildCkptName);
    });
  }
  function loadCheckpointList(value) {
    return new Promise((resolve, reject) => {
      $.get(
        `${RepoLink}/modelmanage/query_modelfile_for_predict`,
        { ID: value },
        (data) => {
          resolve(data);
        }
      );
    });
  }
}