youtube-dl/lib/system/templates/system_home.html

{% extends "base.html" %}
{% block content %}

<script type="text/javascript">
  hideMenuModule();
</script>

<div>
  <div class="row">
  <div class="col-sm-12">
  <canvas id="mycanvas" height="100vh"></canvas>
  <h3>시스템</h3>
  <hr>
  {{ macros.info_text_and_buttons('python_version', 'Python', [['globalLinkBtn', '패키지 관리', [('url','/system/tool/python')]]], info['python_version']) }}
  {{ macros.info_text('platform', 'Platform', info['platform']) }}
  {{ macros.info_text('processor', 'Processor', info['processor']) }}
  {{ macros.info_text_and_buttons('version_str', '버전',  [['globalOpenBtn', '업데이트 내역', [('url',arg['changelog'])]], ['recent_version_btn', '최신버전 확인']], info['version']) }}
  </div>
  </div> 

  <div class="d-inline-block"></div>
  
  <div class="row">
  <div class="col-sm-6">
  <h3>App 환경</h3>
  <hr>
  {{ macros.info_text_and_buttons('running_type', '실행타입', [['config_show_btn', 'Config 확인']], info['running_type'] + ' → 비동기 작업 ' + info['use_celery']) }}
  {{ macros.info_text_and_buttons('config_filepath', 'Config', [['globalEditBtn', '편집', [('file',info['config_filepath'])]]], value=info['config_filepath']) }}
  {{ macros.info_text('path_app', 'Path App', info['path_app']) }}
  {{ macros.info_text('path_data', 'Path Data', info['path_data']) }}
  {{ macros.info_text('path_working', 'Path Working', info['path_working']) }}
  {{ macros.info_text('time', '실행 시간') }}
  </div>

  <div class="col-sm-6">
  <h3>모니터링</h3>
  <hr>
  {{ macros.info_text('cpu_percent', 'CPU 사용량') }}
  {{ macros.info_text('memory', '메모리') }}
  {{ macros.info_text('disk', '디스크') }}
  </div>
  </div>

  <div class="d-inline-block"></div>

  <h3>스케쥴</h3>
  <div id="scheduler_list_div"></div>
</div>
<!--전체-->
<script src="{{ url_for('static', filename='js/chartjs-utils.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
  const Utils = ChartUtils.init()
</script>

<script src="https://cdn.jsdelivr.net/npm/luxon@3.0.4"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.2.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0"></script>
<script type="text/javascript">
  Chart.defaults.set("plugins.streaming", {
    duration: 20000,
  })

  // used for example purposes
  function getRandomIntInclusive(min, max) {
    min = Math.ceil(min)
    max = Math.floor(max)
    return Math.floor(Math.random() * (max - min + 1)) + min
  }

  $(document).ready(function () {
    var socket = io.connect(window.location.href)
    var postId = 1
    socket.on("start", function (data) {})

    socket.on("status", function (data) {
      console.log(data.system.cpu_percent)
      const now = Date.now()
      //myChart.data.labels.push("T " + postId++)
      /* */
      myChart.data.datasets[0].data.push({ x: now, y: data.system.cpu_percent.replace(/.%/g, "") })
      /* */
      myChart.update()
      make_system(data.system)
      make_scheduler_list(data.scheduler)
    })

    /*    const onRefresh = (chart) => {
        const now = Date.now()
        chart.data.datasets.forEach((dataset) => {
          dataset.data.push({
            x: now,
            y: Utils.rand(0, 100),
          })
        })
      }
  */

    var ctx_live = document.getElementById("mycanvas")
    var myChart = new Chart(ctx_live, {
      type: "line",
      data: {
        labels: [],
        datasets: [
          {
            label: "CPU",
            backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
            borderColor: Utils.CHART_COLORS.blue,
            cubicInterpolationMode: "monotone",
            data: [],
          },
        ],
      },
      options: {
        plugins: {
          // Change options for ALL axes of THIS CHART
          streaming: {
            duration: 20000,
          },
        },
        scales: {
          x: {
            type: "realtime",
            realtime: {
              duration: 60000,
              refresh: 1000,
              delay: 1000,
              //onRefresh: onRefresh,
            },
          },
          y: {
            title: {
              display: true,
              //text: "Value",
            },
          },
        },
        interaction: {
          intersect: false,
        },
      },
    })
  })

$("body").on('click', '#recent_version_btn', function(e){
  e.preventDefault();
  globalSendCommand('recent_version');
});



$("body").on('click', '#config_show_btn', function(e){
  e.preventDefault();
  globalSendCommand('get_config');
});




function make_system(data) {
  str = data.version;
  if (data.version == data.recent_version) {
    str += text_color(" (최신 버전)", 'blue');
  } else {
    str += text_color(" (최신 버전 : " + data.recent_version+')', 'red');
  }
  $('#version_str').html(str);
  $('#cpu_percent').html(data.cpu_percent);

  str = '<table id="result_table" class="table table-sm" style="margin-bottom:0px"   ><thead class=""><tr> \
  <th style="width:50%;text-align:center;font-size:11px;">시작시간</th> \
  <th style="width:30%;text-align:center;font-size:11px;">경과</th> \
  <th style="width:20%;text-align:center;font-size:11px;">재시작</th> \
  </tr></thead><tbody id="list">';
  str += '<tr class="chover">';
  str += '<td scope="col" style="width:50%;text-align:center;">' + data['time'][0] + '</td>';
  str += '<td scope="col" style="width:30%;text-align:center;">' + data['time'][1] + '</td>';
  str += '<td scope="col" style="width:20%;text-align:center;">' + data['time'][2] + '</td>';
  str += '</tr></table>';
  $('#time').html(str);
  
  if (data['memory'] == 'not supported') {
    str = data['memory'];
  } else {
    str = '<table id="result_table" class="table table-sm" style="margin-bottom:0px"><thead class=""><tr> \
    <th style="width:25%;text-align:center;font-size:11px;">전체</th> \
    <th style="width:25%;text-align:center;font-size:11px;">사용량</th> \
    <th style="width:25%;text-align:center;font-size:11px;">남은량</th> \
    <th style="width:25%;text-align:center;font-size:11px;">%</th> \
    </tr></thead><tbody id="list">';
    str += '<tr class="chover">';
    str += '<td scope="col" style="text-align:center;">' + data['memory'][0] + '</td>';
    str += '<td scope="col" style="text-align:center;">' + data['memory'][1] + '</td>';
    str += '<td scope="col" style="text-align:center;">' + data['memory'][2] + '</td>';
    str += '<td scope="col" style="text-align:center;">' + data['memory'][3] + '</td>';
    str += '</tr></table>';
  }
  $('#memory').html(str);

  if (data['disk'] == 'not supported') {
    str = data['disk'];
  } else {
    str =  '<table id="result_table" class="table table-sm" style="margin-bottom:0px"><thead class=""><tr> \
    <th style="width:25%;text-align:center;font-size:11px;">전체</th> \
    <th style="width:25%;text-align:center;font-size:11px;">사용량</th> \
    <th style="width:25%;text-align:center;font-size:11px;">남은량</th> \
    <th style="width:25%;text-align:center;font-size:11px;">%</th> \
    </tr></thead><tbody id="list">';
    str += '<tr class="chover">';
    str += '<td scope="col" style="text-align:center;">' + data['disk'][0] + '</td>';
    str += '<td scope="col" style="text-align:center;">' + data['disk'][1] + '</td>';
    str += '<td scope="col" style="text-align:center;">' + data['disk'][2] + '</td>';
    str += '<td scope="col" style="text-align:center;">' + data['disk'][3] + '</td>';
    str += '</tr></table>';
    if (data['disk'][4] != '/') {
      str += '드라이브 ' + data['disk'][4];
    }
  }
  $('#disk').html(str);
}


function make_scheduler_list(data) {
  str = `
<table id="result_table" class="table table-sm ">
  <thead class="">
    <tr>
      <th rowspan='2' style="width:10%;text-align:center;vertical-align:middle;">NO</th>
      <th style="width:10%;text-align:center;vertical-align:middle;">플러그인<br>ID</th>
      <th style="width:10%;text-align:center;vertical-align:middle;">상태</th>
      <th style="width:10%;text-align:center;vertical-align:middle;">다음 실행시간</th>
      <th style="width:10%;text-align:center;vertical-align:middle;">남은 시간</th>
      <th style="width:10%;text-align:center;vertical-align:middle;">주기</th>
      <th style="width:10%;text-align:center;vertical-align:middle;">이전소요시간<br>실행횟수</th>
      <th style="width:20%;text-align:center;vertical-align:middle;">설명</th>
    </tr>
  </thead>
  <tbody id="scheduler_list">`;
    
    TD_STR = '<td scope="col" style="width:10%; text-align:center;">';
    for(var i in data) {
      if (data[i].is_running) {
        str += '<tr class="bg-dark text-white">';
      } else {
        str += '<tr>';
      }
      str += '<td scope="col" style="width:5%; text-align:center;">' + (parseInt(i)+1) + '</td>';
      str += '<td scope="col" style="width:10%; text-align:center;">' + (data[i].plugin) + '<br>' + (data[i].id) + '</td>';
      str += '<td scope="col" style="width:10%; text-align:center;">' + ((data[i].is_running) ? '실행중':'대기중') + '</td>';
      str += '<td scope="col" style="width:10%; text-align:center;">' + (data[i].next_run_time) + '</td>';
      str += '<td scope="col" style="width:10%; text-align:center;">' + (data[i].remain_time) + '</td>';

      str += '<td scope="col" style="width:10%; text-align:center;">' + (data[i].interval) + '</td>';
      str += '<td scope="col" style="width:10%; text-align:center;">' + (data[i].running_timedelta) + '<br>' + (data[i].count) +'</td>';
      str += '<td scope="col" style="width:10%; text-align:center;">' + (data[i].description) + '</td>';
      str += '</tr>';
    }
  str += `
  </tbody>
</table>`;

  $("#scheduler_list_div").html(str);
  return; 
}


</script>    
{% endblock %}