aiforge/web_src/js/features/cloudrbanin.js

export default async function initCloudrain() {
  let debug_button = $(".cloudbrain_debug").data("debug");
  let debug_again_button = $(".cloudbrain_debug").data("debug-again");
  let timeid = window.setInterval(loadJobStatus, 15000);
  let timeidShow = window.setInterval(loadShowJobStatus, 15000);
  $(document).ready(loadJobStatus);
  $(document).ready(loadShowJobStatus);
  function loadJobStatus() {
    $(".job-status").each((index, job) => {
      const ID = job.dataset.jobid;
      const repoPath = job.dataset.repopath;
      // const computeResource = job.dataset.resource
      const versionname = job.dataset.version;
      const status_text = $(`#${ID}-text`).text();
      const finalState = [
        "STOPPED",
        "CREATE_FAILED",
        "UNAVAILABLE",
        "DELETED",
        "RESIZE_FAILED",
        "SUCCEEDED",
        "IMAGE_FAILED",
        "SUBMIT_FAILED",
        "DELETE_FAILED",
        "KILLED",
        "COMPLETED",
        "FAILED",
        "CANCELED",
        "LOST",
        "START_FAILED",
        "SUBMIT_MODEL_FAILED",
        "DEPLOY_SERVICE_FAILED",
        "CHECK_FAILED",
      ];
      if (finalState.includes(status_text)) {
        return;
      }
      // const diffResource = computeResource == "NPU" ? 'modelarts/notebook' : 'cloudbrain'
      $.get(
        `/api/v1/repos/${repoPath}/${ID}?version_name=${versionname}`,
        (data) => {
          const ID = data.ID || data.JobID;
          const status = data.JobStatus;
          const duration = data.JobDuration;
          $("#duration-" + ID).text(duration);
          if (status != status_text) {
            $("#" + ID + "-icon")
              .removeClass()
              .addClass(status);
            $("#" + ID + "-text").text(status);
            finalState.includes(status) &&
              $("#" + ID + "-stop")
                .removeClass("blue")
                .addClass("disabled");
          }
          if (status === "RUNNING") {
            $("#ai-debug-" + ID)
              .removeClass("disabled")
              .addClass("blue")
              .text(debug_button)
              .css("margin", "0 1rem");
            $("#model-image-" + ID)
              .removeClass("disabled")
              .addClass("blue");
          }
          if (status !== "RUNNING") {
            // $('#model-debug-'+ID).removeClass('blue')
            // $('#model-debug-'+ID).addClass('disabled')
            $("#model-image-" + ID)
              .removeClass("blue")
              .addClass("disabled");
          }
          if (
            ["CREATING", "STOPPING", "WAITING", "STARTING"].includes(status)
          ) {
            $("#ai-debug-" + ID)
              .removeClass("blue")
              .addClass("disabled");
          }
          if (
            [
              "STOPPED",
              "FAILED",
              "START_FAILED",
              "CREATE_FAILED",
              "SUCCEEDED",
            ].includes(status)
          ) {
            $("#ai-debug-" + ID)
              .removeClass("disabled")
              .addClass("blue")
              .text(debug_again_button)
              .css("margin", "0");
          }
          if (["RUNNING", "WAITING"].includes(status)) {
            $("#ai-stop-" + ID)
              .removeClass("disabled")
              .addClass("blue");
          }
          if (
            [
              "CREATING",
              "STOPPING",
              "STARTING",
              "STOPPED",
              "FAILED",
              "START_FAILED",
              "SUCCEEDED",
              "COMPLETED",
              "CREATE_FAILED",
            ].includes(status)
          ) {
            $("#ai-stop-" + ID)
              .removeClass("blue")
              .addClass("disabled");
          }

          if (
            [
              "STOPPED",
              "FAILED",
              "START_FAILED",
              "KILLED",
              "COMPLETED",
              "SUCCEEDED",
              "CREATE_FAILED"
            ].includes(status)
          ) {
            $("#ai-delete-" + ID)
              .removeClass("disabled")
              .addClass("blue");
          } else {
            $("#ai-delete-" + ID)
              .removeClass("blue")
              .addClass("disabled");
          }
        }
      ).fail(function (err) {
        console.log(err);
      });
    });
  }

  function loadShowJobStatus() {
    $(".ui.accordion.border-according").each((index, job) => {
      const jobID = job.dataset.jobid;
      const repoPath = job.dataset.repopath;
      const versionname = job.dataset.version;
      // ['IMAGE_FAILED','SUBMIT_FAILED','DELETE_FAILED','KILLED','COMPLETED','FAILED','CANCELED','LOST','START_FAILED']
      // if (job.textContent.trim() == 'IMAGE_FAILED' || job.textContent.trim() == 'SUBMIT_FAILED' || job.textContent.trim() == 'DELETE_FAILED'
      //     || job.textContent.trim() == 'KILLED' || job.textContent.trim() == 'COMPLETED' || job.textContent.trim() == 'FAILED'
      //     || job.textContent.trim() == 'CANCELED' || job.textContent.trim() == 'LOST') {
      //     return
      // }
      let status = $(`#${versionname}-status-span`).text();

      if (
        [
          "IMAGE_FAILED",
          "SUBMIT_FAILED",
          "DELETE_FAILED",
          "KILLED",
          "COMPLETED",
          "FAILED",
          "CANCELED",
          "LOST",
          "START_FAILED",
          "SUCCEEDED",
          "STOPPED",
          "CREATE_FAILED",
        ].includes(status)
      ) {
        return;
      }
      let stopArray = [
        "KILLED",
        "FAILED",
        "START_FAILED",
        "KILLING",
        "COMPLETED",
        "SUCCEEDED",
        "CREATE_FAILED",
        "STOPPED",
      ];
      $.get(
        `/api/v1/repos/${repoPath}/${jobID}?version_name=${versionname}`,
        (data) => {
          $(`#${versionname}-duration-span`).text(data.JobDuration);
          $(`#${versionname}-status-span span`).text(data.JobStatus);
          $(`#${versionname}-status-span i`).attr("class", data.JobStatus);
          // detail status and duration
          $("#" + versionname + "-duration").text(data.JobDuration);
          $("#" + versionname + "-status").text(data.JobStatus);
          if (stopArray.includes(data.JobStatus)) {
            $("#" + versionname + "-stop").addClass("disabled");
          }
          if (data.JobStatus === "COMPLETED") {
            $("#" + versionname + "-create-model")
              .removeClass("disabled")
              .addClass("blue");
          }
        }
      ).fail(function (err) {
        console.log(err);
      });
    });
  }

  function assertDelete(obj, versionName, repoPath) {
    if (obj.style.color == "rgb(204, 204, 204)") {
      return;
    } else {
      const delId = obj.parentNode.id;
      let flag = 1;
      $(".ui.basic.modal")
        .modal({
          onDeny: function () {
            flag = false;
          },
          onApprove: function () {
            if (!versionName) {
              document.getElementById(delId).submit();
            } else {
              deleteVersion(versionName, repoPath);
            }
            flag = true;
          },
          onHidden: function () {
            if (flag == false) {
              $(".alert")
                .html("您已取消操作")
                .removeClass("alert-success")
                .addClass("alert-danger")
                .show()
                .delay(1500)
                .fadeOut();
            }
          },
        })
        .modal("show");
    }
  }
  function deleteVersion(versionName, repoPath) {
    const url = `/api/v1/repos/${repoPath}`;
    $.post(url, { version_name: versionName }, (data) => {
      if (data.StatusOK === 0 || data.Code === 0) {
        location.reload();
      }
    }).fail(function (err) {
      console.log(err);
    });
  }
  $(".ui.basic.ai_delete").click(function () {
    const repoPath = this.dataset.repopath;
    const versionName = this.dataset.version;
    if (repoPath && versionName) {
      assertDelete(this, versionName, repoPath);
    } else {
      assertDelete(this);
    }
  });
  function stopDebug(ID, stopUrl) {
    $.ajax({
      type: "POST",
      url: stopUrl,
      data: $("#stopForm-" + ID).serialize(),
      success: function (res) {
        if (res.result_code === "0") {
          $("#" + ID + "-icon")
            .removeClass()
            .addClass(res.status);
          $("#" + ID + "-text").text(res.status);
          if (res.status === "STOPPED") {
            $("#ai-debug-" + ID)
              .removeClass("disabled")
              .addClass("blue")
              .text(debug_again_button)
              .css("margin", "0");
            $("#ai-image-" + ID)
              .removeClass("blue")
              .addClass("disabled");
            $("#ai-model-debug-" + ID)
              .removeClass("blue")
              .addClass("disabled");
            $("#ai-delete-" + ID)
              .removeClass("disabled")
              .addClass("blue");
            $("#ai-stop-" + ID)
              .removeClass("blue")
              .addClass("disabled");
          } else {
            $("#ai-debug-" + ID)
              .removeClass("blue")
              .addClass("disabled");
            $("#ai-stop-" + ID)
              .removeClass("blue")
              .addClass("disabled");
          }
        } else {
          $(".alert")
            .html(res.error_msg)
            .removeClass("alert-success")
            .addClass("alert-danger")
            .show()
            .delay(2000)
            .fadeOut();
        }
      },
      error: function (res) {
        console.log(res);
      },
    });
  }
  $(".ui.basic.ai_stop").click(function () {
    const ID = this.dataset.jobid;
    const repoPath = this.dataset.repopath;
    stopDebug(ID, repoPath);
  });

  function stopVersion(version_name, ID, repoPath) {
    const url = `/api/v1/repos/${repoPath}/${ID}/stop_version`;
    $.post(url, { version_name: version_name }, (data) => {
      if (data.StatusOK === 0) {
        $("#ai-stop-" + ID).removeClass("blue");
        $("#ai-stop-" + ID).addClass("disabled");
        refreshStatus(version_name, ID, repoPath);
      }
    }).fail(function (err) {
      console.log(err);
    });
  }

  $(".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();
  });

  $("#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);
    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);
    });
  }
  function refreshStatus(version_name, ID, repoPath) {
    const url = `/api/v1/repos/${repoPath}/${ID}/?version_name${version_name}`;
    $.get(url, (data) => {
      $(`#${ID}-icon`).attr("class", data.JobStatus);
      // detail status and duration
      $(`#${ID}-text`).text(data.JobStatus);
      if (
        [
          "STOPPED",
          "FAILED",
          "START_FAILED",
          "KILLED",
          "COMPLETED",
          "SUCCEEDED",
          "CREATE_FAILED",
        ].includes(data.JobStatus)
      ) {
        $("#ai-delete-" + ID)
          .removeClass("disabled")
          .addClass("blue");
      }
    }).fail(function (err) {
      console.log(err);
    });
  }
  $(".ui.basic.ai_stop_version").click(function () {
    const ID = this.dataset.jobid;
    const repoPath = this.dataset.repopath;
    const versionName = this.dataset.version;
    stopVersion(versionName, ID, repoPath);
  });
  function getModelInfo(repoPath, modelName, versionName, jobName) {
    $.get(
      `${repoPath}/modelmanage/show_model_info_api?name=${modelName}`,
      (data) => {
        if (data.length === 0) {
          $(`#${jobName}`).popup("toggle");
        } else {
          let versionData = data.filter((item) => {
            return item.Version === versionName;
          });
          if (versionData.length == 0) {
            $(`#${jobName}`).popup("toggle");
          } else {
            location.href = `${repoPath}/modelmanage/show_model_info?name=${modelName}`;
          }
        }
      }
    );
  }
  $(".goto_modelmanage").click(function () {
    const repoPath = this.dataset.repopath;
    const modelName = this.dataset.modelname;
    const versionName = this.dataset.version;
    const jobName = this.dataset.jobname;
    getModelInfo(repoPath, modelName, versionName, jobName);
  });
  function debugAgain(ID, debugUrl, redirect_to) {
    if ($("#" + ID + "-text").text() === "RUNNING") {
      window.open(debugUrl + "debug");
    } else {
      $.ajax({
        type: "POST",
        url: debugUrl + "restart?redirect_to=" + redirect_to,
        data: $("#debugAgainForm-" + ID).serialize(),
        success: function (res) {
          if (res["WechatRedirectUrl"]) {
            window.location.href = res["WechatRedirectUrl"];
          } else if (res.result_code === "0") {
            if (res.id !== ID) {
              location.reload();
            } else {
              $("#" + ID + "-icon")
                .removeClass()
                .addClass(res.status);
              $("#" + ID + "-text").text(res.status);
              $("#ai-debug-" + ID)
                .removeClass("blue")
                .addClass("disabled");
              $("#ai-delete-" + ID)
                .removeClass("blue")
                .addClass("disabled");
              $("#ai-debug-" + ID)
                .text(debug_button)
                .css("margin", "0 1rem");
            }
          } else {
            $(".alert")
              .html(res.error_msg)
              .removeClass("alert-success")
              .addClass("alert-danger")
              .show()
              .delay(2000)
              .fadeOut();
          }
        },
        error: function (res) {
          console.log(res);
        },
      });
    }
  }
  $(".ui.basic.ai_debug").click(function () {
    const ID = this.dataset.jobid;
    const repoPath = this.dataset.repopath;
    const redirect_to = this.dataset.linkpath;
    debugAgain(ID, repoPath, redirect_to);
  });

  function setWaitNums() {
    if ($(".cloudbrain-type").length === 0 && $(".gpu-type").length === 0) {
      return;
    }
    if (
      $(".cloudbrain-type").length !== 0 &&
      !$(".cloudbrain-type").data("queue")
    ) {
      return;
    }
    let waitNums = $(".cloudbrain-type").data("queue").split("map")[1];
    let test = new Map();
    let waitNumsArray = waitNums.split(" ");
    waitNumsArray.forEach((element, index) => {
      if (index === 0) {
        test.set(element.slice(1, -2), parseInt(element.slice(-1)));
      } else if (index === waitNumsArray.length - 1) {
        test.set(element.slice(0, -3), parseInt(element.slice(-2, -1)));
      } else {
        test.set(element.slice(0, -2), parseInt(element.slice(-1)));
      }
    });
    $(".ui.search.dropdown.gpu-type").dropdown({
      onChange: function (value, text, $selectedItem) {
        let gpuTypeNums = test.get(value);
        let gpuTypeNumString =
          $(".cloudbrain-type").data("queue-start") +
          " " +
          gpuTypeNums +
          " " +
          $(".cloudbrain-type").data("queue-end");
        $("#gpu-nums").text(gpuTypeNumString);
      },
    });
  }
  setWaitNums();
}

function userSearchControll() {
  if ($("#userCloud").length === 0) {
    return;
  }
  const params = new URLSearchParams(window.location.search);
  let jobType;
  if ($(".cloudbrain_debug").length === 1) {
    if (!params.get("jobType")) {
      jobType = $(".cloudbrain_debug").data("allTask");
    } else {
      if (params.get("jobType") === "DEBUG") {
        jobType = $(".cloudbrain_debug").data("debug-task");
      } else if (params.get("jobType") === "TRAIN") {
        jobType = $(".cloudbrain_debug").data("train-task");
      } else if (params.get("jobType") === "INFERENCE") {
        jobType = $(".cloudbrain_debug").data("inference-task");
      } else {
        jobType = $(".cloudbrain_debug").data("benchmark-task");
      }
    }
  }
  let listType = !params.get("listType")
    ? $(".cloudbrain_debug").data("all-compute")
    : params.get("listType");
  let jobStatus = !params.get("jobStatus")
    ? $(".cloudbrain_debug").data("all-status")
    : params.get("jobStatus").toUpperCase();
  const dropdownValueArray = [jobType, listType, jobStatus];
  $("#userCloud .default.text ").each(function (index, e) {
    $(e).text(dropdownValueArray[index]);
  });
}

function AdaminSearchControll() {
  if ($("#adminCloud").length === 0) {
    return;
  }
  const params = new URLSearchParams(window.location.search);
  let jobType = !params.get("jobType")
    ? $(".cloudbrain_debug").data("all-task")
    : params.get("jobType");
  let listType = !params.get("listType")
    ? $(".cloudbrain_debug").data("all-compute")
    : params.get("listType");
  let jobStatus = !params.get("jobStatus")
    ? $(".cloudbrain_debug").data("all-status")
    : params.get("jobStatus").toUpperCase();
  const dropdownValueArray = [jobType, listType, jobStatus];
  $("#adminCloud .default.text ").each(function (index, e) {
    $(e).text(dropdownValueArray[index]);
  });
}
userSearchControll();
AdaminSearchControll();