@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="card my-4">
        <div class="card-body">
            <h2>Server Status</h2>

            <p>MARK version {{ $status["version"] }}</p>

            <p>Load: {{ $status["load"] }} ({{ $status["processors"] }} processors)</p>
            <p>
                Memory:
                {{ $status["memory.used"] }}MB
                ({{ $status["memory.total"] }}MB available)
            </p>

            <p>Running: {{ $status["running"] }}</p>

            <div class='my-4'>
                @if ($status["running"])
                <a href="{{ route('pause') }}" class="btn btn-warning">
                    <i class="fas fa-pause"></i> Pause
                </a>
                @else
                <a href="{{ route('resume') }}" class="btn btn-success">
                    <i class="fas fa-play"></i> Resume
                </a>
                @endif
                <a href="{{ route('reload') }}" class="btn btn-success">
                    <i class="fas fa-sync"></i> Reload
                </a>
            </div>

            <canvas id="chart-history-memory" class='my-4'></canvas>
        </div>
    </div>

    <div class="card my-4">
        <div class="card-body">
            <h2>Executor Status</h2>

            <p>Executed jobs: {{ $status["executor.jobs.executed"] ?? '' }}</p>
            <p>Running jobs: {{ $status["executor.jobs.running"] ?? '' }}</p>
            <p>Waiting jobs: {{ $status["executor.jobs.waiting"] ?? '' }}</p>


            <p>Job wait time: {{ $status["executor.jobs.waittime"] ?? '' }}ms</p>
            <p>Job execution time: {{ $status["executor.jobs.executetime"] ?? '' }}ms</p>

            <p>Total nodes: {{ $status["executor.nodes"] ?? '' }}</p>
            <p>Parallelism: {{ $status["executor.parallelism"] ?? '' }}</p>

            <canvas id="chart-history-job-executetime" class='my-4'></canvas>
        </div>
    </div>



    <div class="card my-4">
        <div class="card-body">
            <h2>Database Status</h2>

            <canvas id="chart-history-db" class='my-4'></canvas>

            <table class='table table-striped'>
                <tr>
                    <th></th>
                    <th>Entries</th>
                    <th>Size (MB)</th>
                    <th></th>
                </tr>

                <tr>
                    <th>Data records</th>
                    <td>{{ $status["db.data.count"] }}</td>
                    <td>{{ $status["db.data.size"] }}</td>
                    <td class="text-right">
                        <a href="{{ action('MarkController@lastData') }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-search"></i> Inspect
                        </a>
                    </td>
                </tr>

                <tr>
                    <th>Evidence</th>
                    <td>{{ $status["db.evidence.count"] }}</td>
                    <td>{{ $status["db.evidence.size"] }}</td>
                    <td class="text-right">
                        <a href="{{ action('MarkController@lastEvidences') }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-search"></i> Inspect
                        </a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

<script type="text/javascript">
    window.addEventListener('load', function() {

        // ------ load and memory
        ctx = document.getElementById('chart-history-memory').getContext('2d');
        new Chart(ctx, {
            type: 'line',

            data: {
                datasets: [{
                    borderColor: colors.blue,
                    backgroundColor: transparent,
                    data: @json($history_memory),
                    label: 'Memory usage',
                    yAxisID: 'memory',
                },
                {
                    borderColor: colors.orange,
                    backgroundColor: transparent,
                    data: @json($history_load),
                    label: 'Load',
                    yAxisID: 'load',
                }]
            },

            options: {
                aspectRatio: 5,
                legend: {
                    display: true
                },
                elements: {
                    line: {
                        tension: 0 // disables bezier curves
                    }
                },
                scales: {
                    xAxes: [{
                        type: 'time',
                        display: true,
                        scaleLabel: {
                                display: true,
                                labelString: 'Time'
                        }
                    }],
                    yAxes: [{
                        id: 'memory',
                        ticks: {
                            beginAtZero:true
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Used memory [MB]'
                        }
                    },
                        {
                        id: 'load',
                        ticks: {
                            beginAtZero:true
                        },
                        position: 'right',
                        scaleLabel: {
                            display: true,
                            labelString: 'Load'
                        }
                    }]
                },
                annotation: {
                    annotations: [
                        {
                            label: {
                                content: 'Available memory',
                                backgroundColor: colors.blue,
                                yAdjust: 20,
                                xAdjust: -50,
                                enabled: true,
                            },
                            drawTime: 'afterDraw',
                            type: 'line',
                            mode: 'horizontal',
                            scaleID: 'memory',
                            value: {{ $status["memory.total"] }},
                            borderColor: colors.blue,
                            borderWidth: 2
                        },
                        {
                            label: {
                                content: 'CPUs',
                                backgroundColor: colors.orange,
                                yAdjust: 20,
                                xAdjust: 50,
                                enabled: true,
                            },
                            drawTime: 'afterDraw',
                            type: 'line',
                            mode: 'horizontal',
                            scaleID: 'load',
                            value: {{ $status["processors"] }},
                            borderColor: colors.orange,
                            borderWidth: 2
                        }
                    ]
                }
            }
        });

        // ------ jobs execution
        var ctx = document.getElementById('chart-history-job-executetime').getContext('2d');
        new Chart(ctx, {
            type: 'line',

            data: {
                datasets: [{
                    borderColor: colors.blue,
                    backgroundColor: transparent,
                    data: @json($history_jobs_execution_rate),
                    label: 'Jobs executed per minute'},
                ]
            },

            options: {
                aspectRatio: 5,
                legend: {
                    display: true,
                },
                elements: {
                    line: {
                        tension: 0 // disables bezier curves
                    }
                },
                scales: {
                    xAxes: [{
                        type: 'time',
                        display: true,
                        scaleLabel: {
                                display: true,
                                labelString: 'Time'
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        },
                        scaleLabel: {
                            display: true,
                            labelString: '[jobs/min]'
                        }
                    }]
                }
            }
        });

        // ----------- db
        var db_records_rate = @json($history_db_records_rate);
        var db_evidences_rate = @json($history_db_evidences_rate);

        var ctx = document.getElementById('chart-history-db').getContext('2d');
        new Chart(ctx, {
            type: 'line',

            data: {
                datasets: [{
                    borderColor: colors.blue,
                    backgroundColor: transparent,
                    data: db_records_rate,
                    label: 'Ingested data records'},
                    {
                    borderColor: colors.green,
                    backgroundColor: transparent,
                    data: db_evidences_rate,
                    label: 'Produced evidences'},
                ]
            },

            options: {
                aspectRatio: 5,
                legend: {
                    display: true,
                },
                elements: {
                    line: {
                        tension: 0 // disables bezier curves
                    }
                },
                scales: {
                    xAxes: [{
                        type: 'time',
                        display: true,
                        scaleLabel: {
                                display: true,
                                labelString: 'Time'
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        },
                        scaleLabel: {
                            display: true,
                            labelString: '[entries/min]'
                        }
                    }]
                }
            }
        });

    });
</script>

<div class="text-muted bottom-right">
    Reload in <span id="reload-countdown">60</span> seconds
</div>

<script type="text/javascript">
    var reload_countdown = 60;
    setInterval(function() {
        reload_countdown -= 1;
        $('#reload-countdown').text(reload_countdown);

        if (reload_countdown === 0) {
            console.log('reload...');
            location.reload();
        }
    }, 1000);
</script>
@endsection