TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
							<!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>
    <script>
        var cpuChart;
        var ramChart;

        //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;
                    }
                }
            }
        };
        
        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 chartInit(){
            cpuChart = new Chart('cpuChart', {
				type: 'line',
				data: {
					labels: [],
					datasets: [{
						backgroundColor: "rgba(241,246,250,0.4)",
						borderColor: "#4c9dcb",
						data: [],
						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: [],
						fill: 'start'
                    }]
				},
				options: ramOptions
            });

            for (var i =0; i < 60; i++){
                addData(ramChart, "",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)
            */

            $.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 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();
        }

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