crafty-4/app/frontend/templates/panel/server_metrics.html

{% extends ../base.html %}

{% block meta %}
{% end %}

{% block title %}Crafty Controller - {{ translate('serverDetails', 'serverDetails', data['lang']) }}{% end %}

{% block content %}

<div class="content-wrapper">

  <!-- Page Title Header Starts-->
  <div class="row page-title-header">
    <div class="col-12">
      <div class="page-header">
        <h4 class="page-title">
          {{ translate('serverDetails', 'serverDetails', data['lang']) }} - {{
          data['server_stats']['server_id']['server_name'] }}
          <br />
          <small>UUID: {{ data['server_stats']['server_id']['server_uuid'] }}</small>
        </h4>
      </div>
    </div>

  </div>
  <!-- Page Title Header Ends-->

  {% include "parts/details_stats.html %}

  <div class="row">

    <div class="col-sm-12 grid-margin">
      <div class="card">
        <div class="card-body  pt-0">
          <span class="d-none d-sm-block">
            {% include "parts/server_controls_list.html %}
          </span>
          <span class="d-block d-sm-none">
            {% include "parts/m_server_controls_list.html %}
          </span>
          <div class="col-2">
            <div class="form-group">
              <label for="days">Metric Period</label>
              <select required class="form-control form-control-lg select-css" id="days" name="days">
                {% for value in data['options'] %}
                <option value="{{value}}">{{value}} Day(s)</option>
                {% end %}
              </select>
            </div>
          </div>
          <button style="float: right; visibility: hidden;" class="btn btn-outline-success reset-button"
            id="reset-button"><i class="fas fa-undo"></i>&nbsp;{{ translate('serverMetrics', 'resetZoom', data['lang'])
            }}</button>
          {% if data['user_data']['hints'] %}
          <span data-html="true" class="hints text-center" title="<i class='fa fa-info-circle'></i> " ,
            data-content="{{
            translate('serverMetrics', 'zoomHint1' , data['lang'])}} <br> <br> {{ translate('serverMetrics', 'zoomHint2', data['lang'])}}" , data-placement="top"></span>
          {% end %}
          <div class="chart-wrapper">
            <canvas id="lineChart"></canvas>
          </div>

        </div>
      </div>
    </div>
  </div>



</div>
<style>
  .chart-wrapper {
    height: 65vh;
  }

  .popover-body {
    color: white !important;
    ;
  }
</style>
<script type="text/javascript">
  const serverId = new URLSearchParams(document.location.search).get('id')
  var zoomed = false;
  //line
  var ctxL = document.getElementById("lineChart").getContext('2d');
  const players = []
  const dates = []
  const ram = []
  const cpu = []
  {% for item in data['history_stats'] %}
  {% if 'minecraft-java' in data['server_stats']['server_type'] %}
  players.push("{{ item.online }}");
  {% end %}
  dates.push("{{ item.created.strftime('%Y/%m/%d, %H:%M:%S') }}");
  ram.push("{{ item.mem_percent }}")
  cpu.push("{{ item.cpu }}")
  {% end %}
  var hist_chart = new Chart(ctxL, {
    type: 'line',
    data: {
      labels: dates,
      datasets: [{
        label: "Players",
        data: players,
        borderColor: [
          'rgba(136, 98, 224, .5)',
        ],
        borderWidth: 2,
        lineTension: 0,
      },
      {
        label: "MEM",
        data: ram,
        borderColor: [
          'rgba(33, 150, 243, .5)',
        ],
        borderWidth: 2,
        lineTension: 0,
      },
      {
        label: "CPU",
        data: cpu,
        borderColor: [
          'rgba(255, 175, 0, .5)',
        ],
        borderWidth: 2,
        lineTension: 0,
      },
      ]
    },
    options: {
      maintainAspectRatio: false,
      plugins: {
        zoom: {
          zoom: {
            onZoom({ hist_chart }) {
              console.log("zooming");
              document.getElementById("reset-button").style.visibility = "visible";
              zoomed = true;
            },
            wheel: {
              enabled: true,
              modifierKey: 'shift',
            },
            drag: {
              enabled: true,
              modifierKey: "shift"
            },
            pinch: {
              enabled: true
            },
            mode: 'x',
          },
          pan: {
            enabled: true,
            mode: "x",
            threshhold: 1,
          }
        },
      },
      fill: false,
      lineTension: 5,
      responsive: true,
      scales: {
        y: {
          min: 0,
        },
        x: {
          position: 'right',
          min: dates.length - 200,
        }
      }
    }
  });
  $(window).ready(function () {
    $('#days').on("change", function () {
      let days = $('#days').find(":selected").val();
      window.location.href = "/panel/server_detail?id=" + serverId + "&days=" + days + "&subpage=metrics"
    });
    $('body').click(function () {
      $('.hints').popover("hide");
    });
  });
  $(document).ready(function () {
    if ($(window).width() > 1000) {
      $('[data-toggle="popover"]').popover();
      $('.hints').popover("show");
    }
    webSocket.on('update_server_details', function (data) {
      dates.push(data.created);
      players.push(data.online);
      cpu.push(data.cpu)
      ram.push(data.mem_percent)
      data = {
        labels: dates,
        datasets: [{
          label: "Players",
          data: players,
          borderColor: [
            'rgba(136, 98, 224, .5)',
          ],
          borderWidth: 2,
          lineTension: 0,
        },
        {
          label: "MEM",
          data: ram,
          borderColor: [
            'rgba(33, 150, 243, .5)',
          ],
          borderWidth: 2,
          lineTension: 0,
        },
        {
          label: "CPU",
          data: cpu,
          borderColor: [
            'rgba(255, 175, 0, .5)',
          ],
          borderWidth: 2,
          lineTension: 0,
        },
        ]
      }
      if (!zoomed) {
        hist_chart.options.scales.x.min = dates.length - 200;
      }
      hist_chart.update(data)
    });

    $(".reset-button").click(function () {
      console.log("resetting zoom");
      zoomed = false;
      hist_chart.resetZoom();
      document.getElementById("reset-button").style.visibility = "hidden";
    });
  });
</script>

{% end %}