TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484
							<!DOCTYPE html>
<head>
    <title>Task Manager</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
    <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
    <script type="text/javascript" src="../../script/jquery.min.js"></script>
    <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
    <script type="text/javascript" src="../../script/ao_module.js"></script>
    <script type="text/javascript" src="../info/js/chart/Chart.min.js"></script>
</head>

<body>
    <br>
    <div class="ui container">
        <div id="cpuChartContainer" style="position: relative;">
            <h2 class="ui header">
                CPU
                <div class="sub header">CPU Usage (%) in the previous 60 seconds</div>
            </h2>
            <p id="CPUname" style="position: absolute; top: 1em; right: 0.3em; font-size: 16px;">Generic Processor</p>
            <canvas id="cpuChart" width="1200" height="300"></canvas>
            <div class="ui stackable grid">
                <div class="four wide column">
                    <div class="ui header" >
                        <span id="cpuUsage">0%</span>
                         <div class="sub header">Usage</div>
                     </div>
                </div>
                <div class="four wide column">
                    <div class="ui header" >
                        <span id="cpufreq">Loading</span>
                        <div class="sub header">Frequency</div>
                     </div>
                </div>
            </div>
           
        </div>
        <br>
        <div id="ramChartContainer" style="position: relative;">
            <h2 class="ui header">
                Memory
                <div class="sub header">RAM Usage</div>
            </h2>
            <p id="RAMInfo" style="position: absolute; top: 1em; right: 0.3em; font-size: 16px;"></p>
            <canvas id="ramChart" width="1200" height="300"></canvas>
            <br>
            <div class="ui stackable grid">
                <div class="four wide column">
                    <div class="ui header" >
                        <span id="ramUsed">Loading</span>
                        <div class="sub header">Used</div>
                    </div>
                </div>
                <div class="four wide column">
                    <div class="ui header" >
                        <span id="ramUsedPercentage">Loading</span>
                        <div class="sub header">Used (%)</div>
                    </div>
                </div>
                <div class="four wide column">
                    <div class="ui header">
                        <span id="ramTotal">Loading</span>
                        <div class="sub header">Total</div>
                    </div>
                </div>
            </div>
           
           
        </div>
        <div id="netChartContainer" style="position: relative; margin-top: 1.2em;">
            <h2 class="ui header">
                Network
                <div class="sub header">Network usage in the previous 60 seconds</div>
            </h2>
            <p id="netGraphScale" style="position: absolute; top: 1em; right: 0.3em; font-size: 16px;">n/a</p>
            <canvas id="netChart" width="1200" height="300"></canvas>
            <div class="ui stackable grid">
                <div class="four wide column">
                    <div class="ui header" >
                        <span id="rx">0</span>
                         <div class="sub header">Received</div>
                     </div>
                </div>
                <div class="four wide column">
                    <div class="ui header" >
                        <span id="tx">0</span>
                        <div class="sub header">Transmitted</div>
                     </div>
                </div>
            </div>
           
        </div>
    </div>
    <script>
        var cpuChart;
        var ramChart;
        var netChart;
        var previousNetData = [0, 0];

        //Override Chart.js v3 poor API designs
        Chart.defaults.plugins.tooltip.enabled = false;
        Chart.defaults.plugins.legend.display = false;

        var options = {
            maintainAspectRatio: true,
            responsive: true,
			spanGaps: false,
			elements: {
				line: {
					tension: 0.000001
				}
			},
			plugins: {
				filler: {
					propagate: false
				},
			},
			scales: {
				x: {
                    grid: {
                        color:  "rgba(83, 160, 205, 0.2)"
                    }
                },
                y: {
                    min: 0,
                    max: 100,
                    grid: {
                        color:  "rgba(83, 160, 205, 0.2)"
                    }
                }
            },
            legend: {
                display: false,
            },
            tooltips: {
                callbacks: {
                    label: function(tooltipItem) {
                            return tooltipItem.yLabel;
                    }
                }
            }
        };

        var ramOptions = {
            maintainAspectRatio: true,
            responsive: true,
			spanGaps: false,
			elements: {
				line: {
					tension: 0.000001
				}
			},
			plugins: {
				filler: {
					propagate: false
				},
			},
			scales: {
				x: {
                    grid: {
                        color:  "rgba(156, 55, 185, 0.2)"
                    }
                },
                y: {
                    min: 0,
                    max: 100,
                    grid: {
                        color:  "rgba(156, 55, 185, 0.2)"
                    }
                }
            },
            legend: {
                display: false,
            },
            tooltips: {
                callbacks: {
                    label: function(tooltipItem) {
                            return tooltipItem.yLabel;
                    }
                }
            }
        };

        var netOptions = {
            maintainAspectRatio: true,
            responsive: true,
			spanGaps: false,
			elements: {
				line: {
					tension: 0.000001
				}
			},
			plugins: {
				filler: {
					propagate: false
				},
			},
			scales: {
				x: {
                    grid: {
                        color:  "rgba(167, 79, 1, 0.2)"
                    }
                },
                y: {
                    min: Math.min.apply(this, getMergedRxTxDataset()),
                    max: Math.max.apply(this, getMergedRxTxDataset()) + 5,
                    grid: {
                        color:  "rgba(167, 79, 1, 0.2)"
                    }
                }
            },
            legend: {
                display: false,
            },
            tooltips: {
                callbacks: {
                    label: function(tooltipItem) {
                            return tooltipItem.yLabel;
                    }
                }
            }
        };
        
        initInfo();
        chartInit();

        //Special code to handle embedding into the System Setting embedded windows
        var insideIframe = false;
        if (parent.managerInIframe !== undefined && parent.managerInIframe == true){
            $(window).on("click", function(e){
                parent.ao_module_focus();
            });
        }

        function initInfo(){
            $.get("../../system/info/getCPUinfo", function(data){
                var data = JSON.parse(data);
                console.log(data);
                $("#CPUname").text(data.Model);
                if (parseFloat(data.Freq) > 1000){
                    $("#cpufreq").text((data.Freq/1000).toFixed(2) + " Ghz");
                }else{
                    $("#cpufreq").text(data.Freq + " Mhz");
                }
                
            });

            $.get("../../system/info/getRAMinfo", function(data){
                //Return ram in byte
                var ramsize = bytesToSize(data);
                $("#RAMInfo").text(ramsize);
            })
        }

        function bytesToSize(bytes) {
            var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
            if (bytes == 0) return '0 Byte';
            var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
            return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
        }

        function bitToSize(bytes) {
            var sizes = ['b', 'Kb', 'Mb', 'Gb', 'Tb'];
            if (bytes == 0) return '0 b';
            var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1000)));
            return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
        }


        function chartInit(){
            cpuChart = new Chart('cpuChart', {
				type: 'line',
				data: {
					labels: [],
					datasets: [{
						backgroundColor: "rgba(241,246,250,0.4)",
						borderColor: "#4c9dcb",
						data: [],
                        radius: 0,
                        borderWidth: 2,
						fill: 'start'
                    }]
				},
				options: options
            });
            
            //Push 60 empty data into the chart
            for (var i =0; i < 60; i++){
                addData(cpuChart, "",0)
            }

            //Create RAM Chart
            ramChart = new Chart('ramChart', {
				type: 'line',
				data: {
					labels: [],
					datasets: [{
						backgroundColor: "rgba(244,242,244,0.4)",
						borderColor: "#9528b4",
						data: [],
                        radius: 0,
                        borderWidth: 2,
						fill: 'start'
                    }]
				},
				options: ramOptions
            });

            for (var i =0; i < 60; i++){
                addData(ramChart, "",0)
            }

            //Create Network Chart
            netChart = new Chart('netChart', {
				type: 'line',
				data: {
					labels: [],
					datasets: [{
						backgroundColor: "rgba(252,243,235,0.4)",
						borderColor: "#a74f01",
						data: [],
                        radius: 0,
                        borderWidth: 2,
						fill: 'start'
                    },
                    {
						backgroundColor: "rgba(252,243,235,0.2)",
						borderColor: "#a74f01",
                        borderDash: [5, 5],
						data: [],
                        radius: 0,
                        borderWidth: 2,
						fill: 'start'
                        
                    }]
				},
				options: netOptions
            });

            for (var i =0; i < 60; i++){
                addNetData(netChart, "", 0, 0)
            }
            
        }

        resizeCharts();
        $(window).on("resize", function(){
            resizeCharts();
        })

        function resizeCharts(){
            $("#cpuChart").width($("#cpuChartContainer").width());
            $("#ramChart").width($("#ramChartContainer").width());
        }

        updateData();
        function updateData(){
            //Testing use 
            /*
            setInterval(function(){
                addAndShiftChartDate(cpuChart, "", Math.floor(Math.random() * 50) + 20)
                addAndShiftChartDate(ramChart, "", Math.floor(Math.random() * 10) + 30)
            }, 1000)
            */

             //Calculate the bandwidth diff
            $.get("../../system/network/getNICUsage", function(data){
                if (data.error !== undefined){
                    //Error
                    console.log(data.error);
                    $("#netGraphScale").text(data.error);
                    return;
                }
                if (previousNetData[0] == 0 && previousNetData[1] == 0){
                    //Not initiated. Set base and wait for next iteration
                    previousNetData = [data.RX, data.TX];
                }else{
                    var rxd = data.RX - previousNetData[0];
                    var txd = data.TX - previousNetData[1];
                    previousNetData = [data.RX, data.TX];
                    addAndShiftNetworkDate(netChart, "", rxd/1024, txd/1024);

                    $("#rx").text(bitToSize(rxd)+"/s");
                    $("#tx").text(bitToSize(txd)+"/s");

                    //Get the max value of the diagram, round it to the cloest 10x
                    var chartMaxValue = Math.max.apply(this, getMergedRxTxDataset())
                    var logVal = Math.log(chartMaxValue) / Math.log(1024);
                    
                    //Round and display the network speed as cloest 100 value
                    function roundNearest100(num, logVal) {
                        return Math.round(num / 100) * 100 * Math.pow(10, logVal);
                    }

                    var scale = roundNearest100(chartMaxValue, logVal);
                    $("#netGraphScale").text(scale);
                }
            })

            $.get("../../system/info/getUsageInfo", function(data){
                //Update graph
                addAndShiftChartDate(cpuChart, "", data.CPU);
                addAndShiftChartDate(ramChart, "", data.RamUsage);

                //Update values
                $("#cpuUsage").text(data.CPU.toFixed(1) + "%");
                $("#ramUsedPercentage").text(data.RamUsage.toFixed(1) + "%")
                $("#ramUsed").text(data.UsedRAM);
                $("#ramTotal").text(data.TotalRam);

                setTimeout(function(){
                    updateData();
                }, 1000);
            });

        }

        function addNetData(chart, label, rx, tx) {
            chart.data.labels.push(label);
            chart.data.datasets[0].data.push(rx);
            chart.data.datasets[1].data.push(tx);
            chart.update();
        }

        function addData(chart, label, data) {
            chart.data.labels.push(label);
            chart.data.datasets.forEach((dataset) => {
                dataset.data.push(data);
            });
            chart.update();
        }

        function addAndShiftChartDate(chart, label, newdata) {
            chart.data.labels.splice(0, 1); // remove first label
            chart.data.datasets.forEach(function(dataset) {
                dataset.data.splice(0, 1); // remove first data point
            });

            chart.update();

            // Add new data
            chart.data.labels.push(label); // add new label at end
            chart.data.datasets.forEach(function(dataset, index) {
                dataset.data.push(newdata); // add new data at end
            });

            chart.update();
        }

        function addAndShiftNetworkDate(chart, label, rxd, txd) {
            chart.data.labels.splice(0, 1); // remove first label
            chart.data.datasets.forEach(function(dataset) {
                dataset.data.splice(0, 1); // remove first data point
            });

            chart.update();

            // Add new data
            chart.data.labels.push(label); // add new label at end
            chart.data.datasets[0].data.push(rxd);
            chart.data.datasets[1].data.push(txd);
            
            
            //Update the sacle as well
            netChart.options.scales.y.min = Math.min.apply(this, getMergedRxTxDataset());
            netChart.options.scales.y.max = Math.max.apply(this, getMergedRxTxDataset()) *1.2;

            chart.update();
        }

        function getMergedRxTxDataset(){
            if (netChart == undefined){
                return [0, 100];
            }
            var newArr = [];
            newArr = newArr.concat(netChart.data.datasets[0].data,netChart.data.datasets[1].data);
            return newArr;
        }

    </script>
</body>
</html>