<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="css/bundle.min.css">
    <script src="js/bundle.min.js"></script>

    <link rel="apple-touch-icon" sizes="180x180" href="favicon-180-i.png">
    <link rel="icon" type="image/png" sizes="512x512" href="favicon-512.png">
    <link rel="icon" type="image/png" sizes="192x192" href="favicon-192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16.png">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="manifest" href="web-app.manifest">
    <link rel="mask-icon" href="favicon-monochrome.svg" color="#000000">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-config" content="browser-config.xml"/>
    <meta name="theme-color" content="#ffffff">

    <title>M Prober v{{version}}</title>
</head>
<body>

{{#if authKey}}
    <input id="auth-key" type="hidden" value="{{authKey}}">
{{/if}}

<input id="time-interval" type="hidden" value="{{timeInterval}}">

<div class="d-flex mt-5 pt-2" id="wrapper">
    <div class="position-fixed bg-light border-right" id="sidebar-wrapper">
        <div class="list-group list-group-flush">
            <a href="javascript:void(0)" class="list-group-item list-group-item-action bg-light" @click="toLinuxInformation">Linux Information</a>
            <a href="javascript:void(0)" class="list-group-item list-group-item-action bg-light" @click="toLoadAverage">Load Average</a>
            <a href="javascript:void(0)" class="list-group-item list-group-item-action bg-light" @click="toCPUs">CPUs</a>
            <a href="javascript:void(0)" class="list-group-item list-group-item-action bg-light" @click="toMemory">Memory</a>
            <a href="javascript:void(0)" class="list-group-item list-group-item-action bg-light" @click="toNetworks">Networks</a>
            <a href="javascript:void(0)" class="list-group-item list-group-item-action bg-light" @click="toVolumes">Volumes</a>
        </div>
    </div>

    <div class="sidebar-wrapper">
        <div class="list-group"></div>
    </div>

    <div id="page-content-wrapper">
        <nav id="nav" class="fixed-top navbar navbar-expand-lg navbar-light bg-light border-bottom">
            <button class="btn btn-light" id="menu-toggle"><i class="fas fa-tags"></i></button>
            <span class="ml-auto">M Prober v{{version}}</span>
            <button class="btn btn-light ml-auto float-right" id="menu-github"><i class="fas fa-bug"></i></button>
        </nav>

        <div id="monitor" class="container-fluid pb-3">
            <div class="text-right">
                <small><i>Last Update Time: \{{last_update_time}}</i></small>
            </div>

            <div id="linux-information" class="card mt-1">
                <div class="card-header">
                    Linux Information
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="col-md-6 mb-3">
                            <label for="kernel-version">Kernel Version:</label>
                            <input id="kernel-version" class="form-control" :class="{'bg-white': kernel !== ''}" type="text" readonly v-model="kernel"/>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="hostname">Hostname:</label>
                            <input id="hostname" class="form-control" :class="{'bg-white': hostname !== ''}" type="text" readonly v-model="hostname"/>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-6 mb-3">
                            <label for="rtc-time">RTC time:</label>
                            <input id="rtc-time" class="form-control" :class="{'bg-white': rtc_time !== ''}" type="text" readonly v-model="rtc_time"/>
                        </div>
                        <div class="col-md-6">
                            <label for="uptime">Uptime:</label>
                            <input id="uptime" class="form-control" :class="{'bg-white': uptime.text !== ''}" type="text" readonly v-model="uptime.text"/>
                        </div>
                    </div>
                </div>
            </div>

            <div id="load-average" class="card mt-3">
                <div class="card-header">
                    Load Average
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="col-12 mb-3" v-if="logical_cores > 1">
                            There are <code>\{{logical_cores}}</code> logical CPU cores.
                        </div>
                        <div class="col-12 mb-3" v-else-if="logical_cores === 1">
                            There is only one logical CPU core.
                        </div>
                        <div class="col-12 mb-3" v-else>
                            <img src="images/preload.svg" alt="Detecting..."/>
                        </div>
                        <div class="col-12">
                            <div class="row mb-2">
                                <div class="col-12 col-md-2 col-lg-2 col-xl-1"><label class="text-info font-weight-bold">One</label></div>
                                <div class="col-6 col-sm-7 col-md-6 col-lg-7 col-xl-8">
                                    <div class="progress" style="height: 1.4rem;">
                                        <div class="progress-bar progress-bar-animated" :class="{'bg-success': load_average_scale.one >= 50 && load_average_scale.one < 70, 'bg-warning': load_average_scale.one >= 70 && load_average_scale.one < 90, 'bg-danger': load_average_scale.one >= 90}" role="progressbar" :aria-valuenow="Math.min(load_average_scale.one, 100)" aria-valuemin="0" :aria-valuemax="100" :style="{width:  Math.min(load_average_scale.one, 100).toFixed(2) + '%'}"></div>
                                    </div>
                                </div>
                                <div class="col-6 col-sm-5 col-md-4 col-lg-3 col-xl-3">\{{load_average.one.toFixed(2)}} (\{{load_average_scale.one.toFixed(2)}}%)</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-12 col-md-2 col-lg-2 col-xl-1"><label class="text-info font-weight-bold">Five</label></div>
                                <div class="col-6 col-sm-7 col-md-6 col-lg-7 col-xl-8">
                                    <div class="progress" style="height: 1.4rem;">
                                        <div class="progress-bar progress-bar-animated" :class="{'bg-success': load_average_scale.five >= 50 && load_average_scale.five < 70, 'bg-warning': load_average_scale.five >= 70 && load_average_scale.five < 90, 'bg-danger': load_average_scale.five >= 90}" role="progressbar" :aria-valuenow="Math.min(load_average_scale.five, 100)" aria-valuemin="0" :aria-valuemax="100" :style="{width:  Math.min(load_average_scale.five, 100).toFixed(2) + '%'}"></div>
                                    </div>
                                </div>
                                <div class="col-6 col-sm-5 col-md-4 col-lg-3 col-xl-3">\{{load_average.five.toFixed(2)}} (\{{load_average_scale.five.toFixed(2)}}%)</div>
                            </div>
                            <div class="row">
                                <div class="col-12 col-md-2 col-lg-2 col-xl-1"><label class="text-info font-weight-bold">Fifteen</label></div>
                                <div class="col-6 col-sm-7 col-md-6 col-lg-7 col-xl-8">
                                    <div class="progress" style="height: 1.4rem;">
                                        <div class="progress-bar progress-bar-animated" :class="{'bg-success': load_average_scale.fifteen >= 50 && load_average_scale.fifteen < 70, 'bg-warning': load_average_scale.fifteen >= 70 && load_average_scale.fifteen < 90, 'bg-danger': load_average_scale.fifteen >= 90}" role="progressbar" :aria-valuenow="Math.min(load_average_scale.fifteen, 100)" aria-valuemin="0" :aria-valuemax="100" :style="{width:  Math.min(load_average_scale.fifteen, 100).toFixed(2) + '%'}"></div>
                                    </div>
                                </div>
                                <div class="col-6 col-sm-5 col-md-4 col-lg-3 col-xl-3">\{{load_average.fifteen.toFixed(2)}} (\{{load_average_scale.fifteen.toFixed(2)}}%)</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="cpus" class="card mt-3">
                <div class="card-header">
                    CPUs
                </div>
                <div class="card-body">
                    <div class="col-12 mb-3">
                        <div class="row">
                            <div class="col-12 col-md-1 col-lg-1"><label class="text-info font-weight-bold">CPU</label></div>
                            <div class="col-8 col-md-8 col-lg-9">
                                <div class="progress" style="height: 1.4rem;">
                                    <div class="progress-bar progress-bar-animated" :class="{'bg-success': cpu >= 50 && cpu < 70, 'bg-warning': cpu >= 70 && cpu < 90, 'bg-danger': cpu >= 90}" role="progressbar" :aria-valuenow="cpu" aria-valuemin="0" :aria-valuemax="100" :style="{width:  cpu.toFixed(2) + '%'}"></div>
                                </div>
                            </div>
                            <div class="col-4 col-md-3 col-lg-2">\{{cpu.toFixed(2)}}%</div>
                        </div>
                    </div>
                    <div class="col-12" v-if="cpus.length > 0">
                        <div id="accordion">
                            <div class="card" v-for="(cpu, index) in cpus">
                                <div class="card-header" :id="'cpu-' + index + 'heading'">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link" data-toggle="collapse" :data-target="'#cpu-' + index + 'collapse'" aria-expanded="true" :aria-controls="'cpu-' + index + 'collapse'">
                                            \{{cpu.model_name}} <b class="text-nowrap">\{{cpu.cores}}C/\{{cpu.threads}}T \{{cpu.mhz[0].text}}</b>
                                        </button>
                                    </h5>
                                </div>

                                <div :id="'cpu-' + index + 'collapse'" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                                    <div class="card-body pb-2">
                                        <div class="row mb-2" v-for="(cpu_stat, index) in cpu.cpus_stat">
                                            <div class="col-12 col-md-2 col-lg-1 col-xl-1"><label class="text-info font-weight-bold">CPU\{{index}}</label></div>
                                            <div class="col-4 col-sm-6 col-md-4 col-lg-6 col-xl-7">
                                                <div class="progress" style="height: 1.4rem;">
                                                    <div class="progress-bar progress-bar-animated" :class="{'bg-success': cpu_stat >= 50 && cpu_stat < 70, 'bg-warning': cpu_stat >= 70 && cpu_stat < 90, 'bg-danger': cpu_stat >= 90}" role="progressbar" :aria-valuenow="cpu" aria-valuemin="0" :aria-valuemax="100" :style="{width:  cpu_stat.toFixed(2) + '%'}"></div>
                                                </div>
                                            </div>
                                            <div class="col-8 col-sm-6 col-md-6 col-lg-5 col-xl-4">\{{cpu_stat.toFixed(2)}}% (\{{cpu.mhz[index + 1].text}})</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12" v-else>
                        <img src="images/preload.svg" alt="Detecting..."/>
                    </div>
                </div>
            </div>

            <div id="memory" class="card mt-3">
                <div class="card-header">
                    Memory
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="col-12">
                            <div class="row mb-2">
                                <div class="col-12 col-md-1 col-lg-1 col-xl-1"><label class="text-info font-weight-bold">Mem</label></div>
                                <div class="col-2 col-sm-5 col-md-3 col-lg-5 col-xl-6">
                                    <div class="progress" style="height: 1.4rem;">
                                        <div class="progress-bar progress-bar-animated" :class="{'bg-success': memory_scale.used >= 50 && memory_scale.used < 70, 'bg-warning': memory_scale.used >= 70 && memory_scale.used < 90, 'bg-danger': memory_scale.used >= 90}" role="progressbar" :aria-valuenow="memory_scale.used" aria-valuemin="0" :aria-valuemax="100" :style="{width:  memory_scale.used.toFixed(2) + '%'}"></div>
                                        <div class="progress-bar progress-bar-animated bg-secondary" role="progressbar" :aria-valuenow="memory_scale.buffer_cache" aria-valuemin="0" aria-valuemax="100" :style="{width:  memory_scale.buffer_cache.toFixed(2) + '%'}"></div>
                                    </div>
                                </div>
                                <div class="col-10 col-sm-7 col-md-8 col-lg-6 col-xl-5">
                                    \{{memory.used.text}} / \{{memory.total.text}} (\{{memory_scale.used.toFixed(2)}}%)
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-12 col-md-1 col-lg-1 col-xl-1"><label class="text-info font-weight-bold">Swap</label></div>
                                <div class="col-2 col-sm-5 col-md-3 col-lg-5 col-xl-6">
                                    <div class="progress" style="height: 1.4rem;">
                                        <div class="progress-bar progress-bar-animated" :class="{'bg-success': swap_scale.used >= 50 && swap_scale.used < 70, 'bg-warning': swap_scale.used >= 70 && swap_scale.used < 90, 'bg-danger': swap_scale.used >= 90}" role="progressbar" :aria-valuenow="swap_scale.used" aria-valuemin="0" :aria-valuemax="100" :style="{width:  swap_scale.used.toFixed(2) + '%'}"></div>
                                        <div class="progress-bar progress-bar-animated bg-secondary" role="progressbar" :aria-valuenow="swap_scale.cache" aria-valuemin="0" aria-valuemax="100" :style="{width:  swap_scale.cache.toFixed(2) + '%'}"></div>
                                    </div>
                                </div>
                                <div class="col-10 col-sm-7 col-md-8 col-lg-6 col-xl-5">
                                    \{{swap.used.text}} / \{{swap.total.text}} (\{{swap_scale.used.toFixed(2)}}%)
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="networks" class="card mt-3">
                <div class="card-header">
                    Networks
                </div>
                <div class="table-responsive" v-if="network.length > 0">
                    <table class="table table-borderless table-hover-light text-nowrap m-0">
                        <thead>
                        <tr>
                            <th scope="col"></th>
                            <th scope="col">Upload Rate</th>
                            <th scope="col">Uploaded Data</th>
                            <th scope="col">Download Rate</th>
                            <th scope="col">Downloaded Data</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="network in network">
                            <th scope="row" class="text-info">\{{network.interface}}</th>
                            <td>\{{network.upload_rate.text}}</td>
                            <td>\{{network.upload_total.text}}</td>
                            <td>\{{network.download_rate.text}}</td>
                            <td>\{{network.download_total.text}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="card-body" v-else>
                    <img src="images/preload.svg" alt="Detecting..."/>
                </div>
            </div>

            <div id="volumes" class="card mt-3">
                <div class="card-header">
                    Volumes
                </div>
                <div class="table-responsive" v-if="volumes.length > 0">
                    <table class="table table-borderless table-hover-light text-nowrap m-0">
                        <thead>
                        <tr>
                            <th scope="col"></th>
                            <th scope="col">Reading Rate</th>
                            <th scope="col">Read Data</th>
                            <th scope="col">Writing Rate</th>
                            <th scope="col">Written Data</th>
                            <th scope="col">Mount Points</th>
                        </tr>
                        </thead>
                        <tbody>
                        <template v-for="volume in volumes">
                            <tr>
                                <th scope="row" class="text-info">\{{volume.device}}</th>
                                <td>\{{volume.read_rate.text}}</td>
                                <td>\{{volume.read_total.text}}</td>
                                <td>\{{volume.write_rate.text}}</td>
                                <td>\{{volume.write_total.text}}</td>
                                <td>
                                    <template v-if="volume.mount_points.length > 0">
                                        \{{volume.mount_points[0]}}
                                    </template>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td colspan="2">
                                    <div class="progress" style="height: 1.4rem;">
                                        <div class="progress-bar progress-bar-animated" :class="{'bg-success': volume.scale >= 50 && volume.scale < 70, 'bg-warning': volume.scale >= 70 && volume.scale < 90, 'bg-danger': volume.scale >= 90}" role="progressbar" :aria-valuenow="volume.scale" aria-valuemin="0" :aria-valuemax="100" :style="{width:  volume.scale.toFixed(2) + '%'}"></div>
                                    </div>
                                </td>
                                <td colspan="2">
                                    \{{volume.used.text}} / \{{volume.size.text}} (\{{volume.scale.toFixed(2)}}%)
                                </td>
                                <td>
                                    <template v-if="volume.mount_points.length > 1">
                                        \{{volume.mount_points[1]}}
                                    </template>
                                </td>
                            </tr>
                            <template v-if="volume.mount_points.length > 2">
                                <tr v-for="i in [...Array(volume.mount_points.length - 2).keys()]">
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>\{{volume.mount_points[i + 2]}}</td>
                                </tr>
                            </template>
                        </template>
                        </tbody>
                    </table>
                </div>
                <div class="card-body" v-else>
                    <img src="images/preload.svg" alt="Detecting..."/>
                </div>
            </div>

            <div class="text-right">
                <small><i>Last Update Time: \{{last_update_time}}</i></small>
            </div>
        </div>
    </div>
</div>

<section>
    <div id="alertModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="alertModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div id="alertModalLabel" class="h5 nocontent modal-title"></div>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body text-justify"></div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal"></button>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    monitor_init();
</script>
</body>