openpanel/templates/admini/user/history_usage.html

<!-- history_usage.html -->
{% extends 'base.html' %}

{% block content %}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>


<div class="row">
{% if charts_mode == 'one' %}
<div class="">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header"><h6>{{ _('Historical CPU and Memory Usage:') }}</h6></div>
            <div class="card-body">
<canvas id="combinedChart"></canvas>
            </div>
        </div>
    </div>
</div>
{% elif charts_mode == 'two' %}
<div class="row" style="padding: 0px!important; margin: 0px!important;">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header"><h6>{{ _('Historical CPU Usage:') }}</h6></div>
            <div class="card-body">
                <canvas id="cpuChart"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header"><h6>{{ _('Historical Memory Usage:') }}</h6></div>
            <div class="card-body">
<canvas id="ramChart"></canvas>
            </div>
        </div>
    </div>
</div>
{% else %}

{% endif %}

<div class="d-flex align-items-center justify-content-between mb-4">
    <h5 class="section-title mb-0">
        {% if show_all %}
            Showing 1 - {{ total_lines }} of {{ total_lines }} items        
        {% else %}
            Showing {{ items_per_page * (current_page - 1) + 1 }} - {% if items_per_page * current_page > total_lines %}{{ total_lines }}{% else %}{{ items_per_page * current_page }}{% endif %} out of {{ total_lines }} items
        {% endif %}
    </h5>
    <div class="form-check form-switch">
        
        
        <input class="form-check-input" type="checkbox" role="switch" id="showAllCheckboxOnHistoryPage" {% if show_all %}checked{% endif %}>
        <label class="form-check-label text-secondary fs-sm" for="showAllCheckboxOnHistoryPage">
            {{ _('Show all data') }}
        </label>
    </div>

</div>


    <div class="container">
        <table class="table" id="usage">
            <thead>
                <tr>
                    <th><i class="bi bi-calendar-month"></i> {{ _("Date") }}</th>
                    <th><i class="bi bi-cpu"> </i>{{ _("CPU &#37;") }}</th>
                    <th><i class="bi bi-memory"></i> {{ _("Memory &#37;") }}</th>
                    <th><i class="bi bi-ethernet"></i> {{ _("Net I/O") }}</th>
                    <th><i class="bi bi-device-ssd"></i> {{ _("Block I/O") }}</th>
                </tr>
            </thead>
            <tbody>
                {% for entry in usage_data %}
                    <tr>
                        <td>{{ entry.timestamp }}</td>
                        <td>{{ entry.cpu_percent | round(2) }}</td>
                        <td>{{ entry.mem_percent | round(2) }}</td>
                        <td>{{ entry.net_io }}</td>
                        <td>{{ entry.block_io }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <nav aria-label="Usage history Navigation">
        <ul class="pagination justify-content-center">
          {% if show_all %}
            <!-- No pagination controls when searching, uses show_all toggle by default -->
          {% else %}
            <li class="page-item{% if current_page == 1 %} disabled{% endif %}">
              <a class="page-link" href="{{ url_for('usage_history', page=1) }}">First</a>
            </li>
            {% if current_page > 3 %}
              <li class="page-item disabled"><a class="page-link" href="#">...</a></li>
            {% endif %}
            {% if current_page <= 3 %}
              {% for p in range(1, total_pages + 1) %}
                {% if p == current_page %}
                  <li class="page-item active"><a class="page-link" href="#">{{ p }}</a></li>
                {% elif p <= 5 %}
                  <li class="page-item"><a class="page-link" href="{{ url_for('usage_history', page=p) }}">{{ p }}</a></li>
                {% elif p == 6 %}
                  <li class="page-item disabled"><a class="page-link" href="#">...</a></li>
                {% endif %}
              {% endfor %}
            {% else %}
              <li class="page-item">
                <a class="page-link" href="{{ url_for('usage_history', page=current_page - 2) }}">{{ current_page - 2 }}</a>
              </li>
              <li class="page-item{% if current_page == current_page - 2 %} active{% endif %}">
                <a class="page-link" href="{{ url_for('usage_history', page=current_page - 1) }}">{{ current_page - 1 }}</a>
              </li>
              <li class="page-item active"><a class="page-link" href="#">{{ current_page }}</a></li>
              {% for p in range(current_page + 1, current_page + 3) %}
                {% if p <= total_pages %}
                  <li class="page-item"><a class="page-link" href="{{ url_for('usage_history', page=p) }}">{{ p }}</a></li>
                {% endif %}
              {% endfor %}
              {% if current_page + 3 < total_pages %}
                <li class="page-item disabled"><a class="page-link" href="#">...</a></li>
              {% endif %}
            {% endif %}
            <li class="page-item{% if current_page == total_pages %} disabled{% endif %}">
              <a class="page-link" href="{{ url_for('usage_history', page=total_pages) }}">Last</a>
            </li>
          {% endif %}
        </ul>
    </nav>



<script>
    // Script to handle toggling the "Show all activity" checkbox
    const showAllCheckboxOnHistoryPage = document.getElementById('showAllCheckboxOnHistoryPage');

        showAllCheckboxOnHistoryPage.addEventListener('change', () => {
        const urlSearchParams = new URLSearchParams(window.location.search);
        if (showAllCheckboxOnHistoryPage.checked) {
            urlSearchParams.set('show_all', 'true');
            urlSearchParams.delete('page');// Remove the show_all parameter

        } 
        else {
            urlSearchParams.delete('show_all');// Remove the show_all parameter
        }
        // Update the URL with the new query parameters
        window.location.search = urlSearchParams.toString();
    });

    // Get the table rows and initialize arrays for data
    const usageTable = document.getElementById('usage');
    const tableRows = usageTable.querySelectorAll('tbody tr');
    const timestamps = [];
    const cpuData = [];
    const ramData = [];

    // Extract data from table rows
    tableRows.forEach(row => {
        const cells = row.querySelectorAll('td');
        timestamps.push(cells[0].textContent);
        cpuData.push(parseFloat(cells[1].textContent));
        ramData.push(parseFloat(cells[2].textContent));
    });

    // Reverse the arrays
    timestamps.reverse();
    cpuData.reverse();
    ramData.reverse();

</script>    

{% if charts_mode == 'one' %}
<script>
// Create combined chart
const combinedChartCtx = document.getElementById('combinedChart').getContext('2d');
new Chart(combinedChartCtx, {
    type: 'line',
    data: {
        labels: timestamps,
        datasets: [
            {
                label: 'CPU %',
                data: cpuData,
                borderColor: 'rgba(75, 192, 192, 1)',
                fill: false,
            },
            {
                label: 'Memory %',
                data: ramData,
                borderColor: 'rgba(255, 99, 132, 1)',
                fill: false,
            },
        ],
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
    },
});
</script>
{% elif charts_mode == 'two' %}
<script>
    // Create CPU chart
    const cpuChartCtx = document.getElementById('cpuChart').getContext('2d');
    new Chart(cpuChartCtx, {
        type: 'line',
        data: {
            labels: timestamps,
            datasets: [{
                label: 'CPU %',
                data: cpuData,
                borderColor: 'rgba(75, 192, 192, 1)',
                fill: false
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
        }
    });

    // Create RAM chart
    const ramChartCtx = document.getElementById('ramChart').getContext('2d');
    new Chart(ramChartCtx, {
        type: 'line',
        data: {
            labels: timestamps,
            datasets: [{
                label: 'Memory %',
                data: ramData,
                borderColor: 'rgba(255, 99, 132, 1)',
                fill: false
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
        }
    });
</script>
{% endif %}


</div>
{% endblock %}