index.html

<style>
    .tomcat_log {
        margin: 0px;
        width: 100%;
        height: 370px;
        background-color: #424251;
        overflow: auto;
        line-height: 22px;
        color: #fff;
        padding-left: 10px;
        font-family: arial;
        margin-top: 10px;
        outline: none;
    }

    .conter_box {
        display: none;
    }
</style>
<div class="bt-form">
    <div class="bt-w-main">
        <div class="bt-w-menu">
            <p class="bgw" name="service">服务状态</p>
            <p name="mgmt">管理面板</p>
            <p name="install">安装版本</p>
        </div>
        <div class="bt-w-con pd15">
            <div class="plugin_body">
                <div class="conter_box srs_service_box" name="service">
                    <div class="soft-man-con bt-form">
                        <p class="status">当前状态：
                            <span>开启</span>
                            <span style="color: #20a53a; margin-left: 3px;"
                                  class="glyphicon glyphicon glyphicon-play"></span>
                        </p>
                        <div class="sfm-opt">
                            <button class="btn btn-default btn-sm btn_server_start" style="display: none"
                                    onclick="bt.pub.set_server_status('oryx','start')">启动
                            </button>
                            <button class="btn btn-default btn-sm btn_server_stop"
                                    onclick="bt.pub.set_server_status('oryx','stop')">停止
                            </button>
                            <button class="btn btn-default btn-sm"
                                    onclick="bt.pub.set_server_status('oryx','restart')">重启
                            </button>
                        </div>
                    </div>
                </div>
                <div class="conter_box install_version_box" name="install">
                    <div>
                        域名：<input type="text" class="txt_srs_domain"/>
                        * 通过域名访问Oryx管理后台，操作步骤请看<a href="https://ossrs.net/lts/zh-cn/faq-oryx#how-to-set-domain" target="_blank" style="color:red">这里</a>
                    </div>
                    <br/>
                    <button class="btn btn-success btn-sm va0 ml5 btn_install_srs">安装Oryx</button>
                    <textarea class="install_log tomcat_log" style="display:none"></textarea>
                    <ul class="help-info-text c7">
                        <li style="color:red">安装Oryx版本会耗时比较久，请耐心等候。</li>
                        <li style="color:red">若需要卸载Oryx，请直接删除Oryx插件。</li>
                        <li style="color:red">若需要升级Oryx，请直接卸载后重装即可。</li>
                    </ul>
                </div>
                <div class="conter_box srs_mgmt_box" name="mgmt">
                    <p><a href="#" class="btn btn-link srs_mgmt_link" target="_blank" rel="noreferrer">Oryx管理面板</a></p>
                    <p style="color:red">注意!!! 请设置域名解析或者hosts，操作步骤请看<a href="https://ossrs.net/lts/zh-cn/faq-oryx#how-to-set-domain" target="_blank" style="color:blue">这里</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
  // Request the backend api by functionName with args.
  // @param timeout The timeout in ms, default to 300s.
  async function oryx_request(functionName, args, timeout) {
    try {
      return await new Promise((resolve, reject) => {
        $.ajax({
          type: 'POST',
          url: `/plugin?action=a&s=${functionName}&name=oryx`,
          data: args,
          timeout: timeout || 300 * 1000,
          success: function (res, status, xhr) {
            if (!res?.status) {
              return reject({xhr, err: JSON.stringify(res)});
            }
            return resolve(JSON.parse(res.msg));
          },
          error: function (xhr, status, err) {
            reject({xhr, err});
          },
        });
      });
    } catch ({xhr, err}) {
      console.error(`Call ${functionName} with args=${JSON.stringify(args)} err`, status, err, xhr);
      layer.msg(`Call ${functionName} with args=${JSON.stringify(args)} err ${err}`, {icon: 2});
      throw xhr;
    }
  }

  async function install_dependence(deps) {
    const depsContent = deps.map((dep, index) => {
      return `
          <li>
            ${index + 1}: 安装${dep.title}
          </li>
    `;
    }).join('\n');

    layer.closeAll();
    return new Promise((resolve, reject) => {
      layer.open({
        icon: 0,
        closeBtn: 0,
        title: '安装Oryx',
        area: '400px',
        btn: [],
        content: `
        <p>请安装以下依赖：</p>
        <ul>${depsContent}</ul>
        <p style="color: red; font-weight: bold;">请安装完依赖后继续安装Oryx。</p>
      `,
        success: function (layero, index) {
          // Note that this is called when the window is open, not closed or finished.
          resolve();
        },
      });
    });
  }

  async function installing_dependence(deps) {
    const depsContent = deps.map((dep, index) => {
      const desc = `正在安装<a href="javascript:void(0)" class="btlink" onclick="messagebox()">${dep.title}</a>`;
      return `<li>${index + 1}: ${desc}</li>`;
    }).join('\n');

    layer.closeAll();
    return new Promise((resolve, reject) => {
      layer.open({
        icon: 0,
        closeBtn: 0,
        title: '安装Oryx',
        area: '400px',
        btn: [],
        content: `
        <p>正在安装依赖：</p>
        <ul>${depsContent}</ul>
        请安装完依赖后，再继续安装Oryx，请点<a href="javascript:void(0)" class="btlink" onclick="messagebox()">这里</a>查看安装详情。
      `,
        success: function (layero, index) {
          // Note that this is called when the window is open, not closed or finished.
          resolve();
        },
      });
    });
  }
</script>
<script type="text/javascript">
  async function oryx_init() {
    $(".bt-w-menu p").click(function () {
      oryx_dispatch($(this));
    });

    $('.btn_install_srs').click(function () {
      oryx_try_install();
    });

    const services = await oryx_request('serviceStatus');
    if (services?.site_domain) {
      $('.txt_srs_domain').val(services?.site_domain);
    }

    console.log(`services is ${JSON.stringify(services)}`);
    if (!services?.srs_ready || services?.srs_error) {
      $(".bt-w-menu p[name='install']").addClass('bgw').siblings().removeClass('bgw');
      $('.install_version_box').show().siblings().hide();
      await oryx_setup_install_view();
    } else {
      await oryx_dispatch($("p[name='mgmt']"));
    }

    const pid = await oryx_request('querySrs');
    console.log(`srs is ${JSON.stringify(services)}`);
    if (pid?.running) {
      await do_oryx_install();
    }
  }

  async function oryx_refresh_logs() {
    const pid = await oryx_request('querySrs');
    if (pid.tail) {
      const elem = $('.install_log').val($('.install_log').val() + pid.tail).show();
      elem.get(0).scrollTop = elem.get(0)?.scrollHeight;
    }
  }

  async function oryx_dispatch(self) {
    const menuName = self.attr('name');

    const services = await oryx_request('serviceStatus');
    if (!services?.srs_ready || services?.srs_error) {
      if (menuName !== 'install') layer.msg('请先安装Oryx', {icon: 7});
      return console.log(`service not ready ${JSON.stringify(services)}`);
    }

    self.addClass('bgw').siblings().removeClass('bgw');
    $(`.conter_box[name=${menuName}]`).show().siblings().hide();

    if (menuName === 'service') {
      await oryx_setup_service_view();
    } else if (menuName === 'mgmt') {
      await oryx_setup_mgmt_view();
    } else if (menuName === 'install') {
      await oryx_setup_install_view();
    }
  }

  async function oryx_setup_install_view() {
    const pid = await oryx_request('querySrs');
    console.log(`installing pid is ${JSON.stringify(pid)}`);
    if (pid?.srs || pid?.running) {
      $('.btn_install_srs').html(pid?.srs ? '安装完成' : '正在安装').attr({'disabled': 'disabled'}).show();
      if (pid?.srs) {
        $('.install_log').hide();
      } else {
        $('.install_log').show();
      }
      return;
    }

    $('.btn_install_srs').html(pid?.r0 ? '重新安装Oryx' : '安装Oryx').removeAttr('disabled').show();
    if (pid.tail) {
      const elem = $('.install_log').val($('.install_log').val() + pid.tail).show();
      elem.get(0).scrollTop = elem.get(0)?.scrollHeight;
    }
  }

  async function oryx_setup_service_view() {
    const r0 = await oryx_request('querySrsService');
    console.log(`srs service is ${JSON.stringify(r0)}`);

    const status = !!(r0?.active);
    $('.srs_service_box .status .glyphicon').removeClass(status ? 'glyphicon-pause' : 'glyphicon-play')
      .addClass(status ? 'glyphicon-play' : 'glyphicon-pause').css('color', (status ? '#20a53a' : 'red'))
    $(!status ? '.btn_server_start' : '.btn_server_stop').show();
    $(status ? '.btn_server_start' : '.btn_server_stop').hide();
    $('.srs_service_box .status span:eq(0)').html(status ? '开启' : '停止');
  }

  async function oryx_setup_mgmt_view() {
    const r0 = await oryx_request('serviceStatus');

    // Always use HTTP, because HTTPS might not be available.
    //const url = `${l.protocol}//${r0.site_domain}/mgmt/`;
    const url = `http://${r0.site_domain}/mgmt/`;

    $('.srs_mgmt_link').attr('href', url);
  }

  async function oryx_try_install() {
    const domain = $('.txt_srs_domain').val();
    if (!domain) {
      alert('请填写域名');
      throw 'no domain';
    }

    const domainRegex = /^(?=.{1,253})(?:(?!-)[A-Za-z0-9-]{1,63}(?<!-)\.?)+[A-Za-z]{2,6}$/;
    if (!domainRegex.test(domain)) {
      alert('请填写正确格式的域名');
      throw 'invalid domain format';
    }

    $('.btn_install_srs').html('准备安装').attr({'disabled': 'disabled'});
    try {
      await oryx_install();
    } catch (e) {
      $('.btn_install_srs').html('错误重试').removeAttr('disabled').show();
      // If install failed, refresh and show the latest logs.
      oryx_refresh_logs();
      throw e;
    };

    const services = await oryx_request('serviceStatus');

    // Allow user to install SRS, if not installed, or failed.
    // It already refreshed the logs, so we don't do it when failed.
    if (!services?.srs_ready || services?.srs_error) {
      await do_oryx_install();
    }
  }

  async function oryx_install() {
    if ($('.install_log').empty()) {
      $('.install_log').show().val('Installing...\n');
    }

    let tips = layer.msg('检测服务状态', {icon: 16});
    const services = await oryx_request('serviceStatus');
    console.log(`services status is ${JSON.stringify(services)}`);
    layer.close(tips);

    // If BT or aaPanel not ready to install SRS, should wait.
    if (services?.plugin_ready !== 'ok') {
      const msg = `正在安装SRS插件，请稍后再试`;
      layer.msg(msg, {icon: 2});
      throw msg;
    }

    // Request to install depends services.
    const deps = [
      ...(services?.nginx ? [] : [{id: 'nginx', title: 'NGINX', call: 'bt.soft.install'}]),
    ];
    // If no docker manager plugin, or docker service, install the plugin.
    // If there is a docker installed, we only need to start it, don't require the docker plugin.
    if (!services?.docker_manager && !services?.docker_installed) {
      deps.push({id: 'docker', title: 'Docker', call: 'bt.soft.install'});
    }

    const tasks = await oryx_request('installTasks');
    const notInstalledDeps = deps.filter(dep => {
      if (tasks.filter(task => {
        return task?.name?.indexOf(`[${dep.id}-`) >= 0 ? task : null;
      }).length > 0) {
        return null;
      }
      return dep;
    });
    if (notInstalledDeps.length) {
      return await install_dependence(notInstalledDeps);
    }
    if (deps.length) {
      return await installing_dependence(deps);
    }

    // Try to install docker service.
    if (!services?.docker_installed) {
      layer.msg('安装Docker服务', {icon: 1});
      await oryx_request('installService', {service: 'docker'});
      await new Promise(resolve => setTimeout(resolve, 1000));
    }

    // Try to start docker service.
    if (!services?.docker_running) {
      layer.msg('启动Docker服务', {icon: 1});
      await oryx_request('restartService', {service: 'docker'});
      await new Promise(resolve => setTimeout(resolve, 1000));
    }

    // Try to create site for Oryx.
    if (!services?.site_created) {
      const domain = $('.txt_srs_domain').val();
      layer.msg(`创建Oryx站点: ${domain}`, {icon: 1});
      const site = await oryx_request('createSrsSite', {domain: domain});
      console.log(`Create site ${JSON.stringify(site)}`);
      await new Promise(resolve => setTimeout(resolve, 1000));
    }

    // Setup the website. Note that it depends on http configuration files.
    if (!services?.site_setup) {
      layer.msg('设置Oryx站点', {icon: 1});
      const data = await oryx_request('setupSrsSite');
      console.log('setup site', data);
      await new Promise(resolve => setTimeout(resolve, 1000));
    }

    // Setup the firewall.
    if (!services?.firewall_ready) {
      layer.msg('设置防火墙', {icon: 1});
      const data = await oryx_request('setupFirewall');
      console.log('setup firewall', data);
      await new Promise(resolve => setTimeout(resolve, 1000));
    }
  }

  async function do_oryx_install() {
    const installing = async (resolve, reject) => {
      $('.btn_install_srs').html('正在安装').attr({'disabled': 'disabled'});
      let pos = 1;
      for (; ;) {
        try {
          const pid = await oryx_request('installSrs', {start: pos, end: pos + 100});
          console.log(`installing pid is ${JSON.stringify(pid)}`);

          if (pid.tail) {
            const elem = $('.install_log').val($('.install_log').val() + pid.tail);
            if (elem.get(0)?.scrollHeight) elem.get(0).scrollTop = elem.get(0).scrollHeight;
          }

          pos += pid.tail ? (pid.tail.match(/\n/g)?.length || 0) : 0;
          if (pid.srs) return resolve();

          if (pid.r0) {
            layer.msg('安装Oryx失败', {icon: 2});
            return reject(pid);
          }

          await new Promise(r0 => setTimeout(r0, 3000));
        } catch (e) {
          return reject(e);
        }
      }
    };

    const pid = await oryx_request('querySrs');
    console.log(`installing pid is ${JSON.stringify(pid)}`);

    if (pid.r0) {
      await oryx_request('cleanupIntall');
    }

    await new Promise((resolve, reject) => {
      installing(resolve, reject);
    });

    layer.msg('Oryx启动中，请稍后......', {icon: 1});
    $('.btn_install_srs').html('正在启动').attr({'disabled': 'disabled'});
    await new Promise(resolve => setTimeout(resolve, 30000));

    layer.msg('Oryx安装成功', {icon: 1});
    $('.btn_install_srs').html('安装完成').attr({'disabled': 'disabled'});

    await new Promise(resolve => setTimeout(resolve, 1500));
    await oryx_dispatch($("p[name='mgmt']"));
  }

  $(function () {
    oryx_init();
  });
</script>