<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/FiniqAppMasterPage.Master" CodeBehind="SystemPerformance.aspx.vb" Inherits="FinIQWebApp.SystemPerformance" %>


<asp:Content ID="styles" ContentPlaceHolderID="headScrtipsStyles" runat="server">
    <link rel="stylesheet" href="Styles/SystemPerformanceStyle.css" />
</asp:Content>
<asp:Content ID="layout" ContentPlaceHolderID="MainContent" runat="server">

    <!-- <router-outlet></router-outlet> -->

    <div class="main-container">
        <%--<div class="side-bar">
            <div class="tabs">
                <div class="tab active">System Performance</div>
                <div class="tab">SQL Performance</div>
            </div>
        </div>--%>
        <div class="dashboard-container">
            <div class="system-information-container">
                <div class="operating-system-information">
                    <div class="data-wrapper">
                        <div class="data-value title os-details">
                            <span class="inline-label">Operating System:</span>
                        </div>
                    </div>
                </div>
                <div class="system-information-wrapper">
                    <div class="processor-information">
                        <div class="global-processor-details">
                            <div class="data-value title processor-name-wrapper">
                                <span class="inline-label">Processor:</span>
                            </div>
                            <div class="data-wrapper">
                                <div class="data-label">Cores</div>
                                <div class="data-value processor-cores-count"></div>
                            </div>
                            <div class="data-wrapper">
                                <div class="data-label">Logical Processors</div>
                                <div class="data-value processor-logical-count"></div>
                            </div>
                            <div class="data-wrapper">
                                <div class="data-label">Processes</div>
                                <div class="data-value overall-process-count"></div>
                            </div>
                            <div class="data-wrapper">
                                <div class="data-label">Threads</div>
                                <div class="data-value overall-threads-count"></div>
                            </div>
                            <div class="data-wrapper">
                                <div class="data-label">Handles</div>
                                <div class="data-value overall-handles-count"></div>
                            </div>
                        </div>
                        <div class="chart-wrapper global-cpu-usage-chart">
                            <canvas id="systemCPUChart"></canvas>
                        </div>
                    </div>
                    <div class="ram-information">
                        <div class="global-ram-details">
                            <div class="data-value title total-physical-memory">
                                <span class="inline-label">Total Memory:</span>
                            </div>
                            <div class="data-wrapper">
                                <div class="data-label">In Use</div>
                                <div class="data-value in-use-memory"></div>
                            </div>
                            <div class="data-wrapper">
                                <div class="data-label">Available</div>
                                <div class="data-value available-memory"></div>
                            </div>
                            <div class="data-wrapper">
                                <div class="data-label">Commited</div>
                                <div class="data-value commited-memory"></div>
                            </div>
                            <div class="data-wrapper">
                                <div class="data-label">Commit Limit</div>
                                <div class="data-value commit-limit"></div>
                            </div>
                            <div class="data-wrapper">
                                <div class="data-label">Paged</div>
                                <div class="data-value paged-memory"></div>
                            </div>
                            <div class="data-wrapper">
                                <div class="data-label">Non Paged</div>
                                <div class="data-value non-paged-memory"></div>
                            </div>
                        </div>
                        <div class="chart-wrapper global-ram-usage-chart">
                            <canvas id="systemRAMChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="network-ports-information-container">
                <div class="section-title tcp-information-title">
                    TCP Ports Information
                </div>
                <div class="tcp-ports-information">
                    <div class="tcp-v4-wrapper">
                        <div class="open-tcp-v4-ports data-value">
                            <span class="inline-label">Open TCP V4 Connections: </span>
                        </div>
                    </div>
                    <div class="tcp-v6-wrapper">
                        <div class="open-tcp-v6-ports data-value">
                            <span class="inline-label">Open TCP V6 Connections: </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="process-information-container">
                <div class="section-title process-information-title">
                    Process Information
                </div>
                <div class="process-information-wrapper">
                    <div class="process-list-container">
                        <div class="data-wrapper">
                            <div class="data-label">Active Processes</div>
                            <div class="data-label">(select process to view details)</div>
                            <ul class="process-list">
                            </ul>
                        </div>
                    </div>
                    <div class="selected-process-information-wrapper">
                        <div class="data-value title process-name">
                            <span class="inline-label">Showing information of:</span>
                        </div>
                        <div class="data-value sub-process-wrapper">
                            <span class="inline-label">Sub Process:</span>
                            <select class="ddl ddl-sub-process">
                            </select>
                        </div>
                        <div class="selected-process-details-wrapper">
                            <div class="selected-process-basic-details">
                                <div class="data-wrapper">
                                    <div class="data-label">Process Id</div>
                                    <div class="data-value sub-process-id">
                                    </div>
                                </div>
                                <div class="data-wrapper selected-process-window-title">
                                    <div class="data-label">Name</div>
                                    <div class="data-value sub-process-window-title">
                                    </div>
                                </div>
                            </div>
                            <div class="section-title">CPU Utilization Details</div>
                            <div class="selected-process-cpu-details">
                                <div class="data-wrapper">
                                    <div class="data-label">CPU Usage</div>
                                    <div class="data-value sub-process-cpu"></div>
                                </div>
                                <div class="data-wrapper">
                                    <div class="data-label">Thread Count</div>
                                    <div class="data-value sub-process-threads"></div>
                                </div>
                                <div class="data-wrapper">
                                    <div class="data-label">Handle Count</div>
                                    <div class="data-value sub-process-handles"></div>
                                </div>
                            </div>
                            <div class="section-title">Memory Utilization Details</div>
                            <div class="selected-process-ram-details-wrapper">
                                <div class="data-wrapper">
                                    <table class="selected-process-ram-details-table" cellspacing="0px">
                                        <thead>
                                            <tr>
                                                <th>Memory in Use</th>
                                                <th>Working Set</th>
                                                <th>Paged Memory</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="memory-in-use"></td>
                                                <td class="memory-working-set"></td>
                                                <td class="memory-paged"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="data-wrapper">
                                    <table class="selected-process-ram-details-table" cellspacing="0px">
                                        <thead>
                                            <tr>
                                                <th>Min Working Set</th>
                                                <th>Max Working Set</th>
                                                <th>Non-Paged Memory</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="memory-min-working-set"></td>
                                                <td class="memory-max-working-set"></td>
                                                <td class="memory-non-paged"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="data-wrapper">
                                    <table class="selected-process-ram-details-table" cellspacing="0px">
                                        <thead>
                                            <tr>
                                                <th>Paged System Memory</th>
                                                <th>Peak Paged Memory</th>
                                                <th>Peak Virtual Memory</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="memory-paged-system"></td>
                                                <td class="memory-peak-paged"></td>
                                                <td class="memory-peak-virtual"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="data-wrapper">
                                    <table class="selected-process-ram-details-table" cellspacing="0px">
                                        <thead>
                                            <tr>
                                                <th>Peak Working Size</th>
                                                <th>Virtual Memory Size</th>
                                                <th>Private Working Set</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="memory-peak-working"></td>
                                                <td class="memory-virtual"></td>
                                                <td class="memory-private-working"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="selected-process-charts-wrapper">
                            <div class="section-title">Usage from all Threads</div>
                            <div class="process-cpu-chart-wrapper data-wrapper">
                                <div class="data-label">CPU Usage</div>
                                <div class="process-chart-wrapper process-cpu-usage-chart">
                                    <canvas id="processCPUChart"></canvas>
                                </div>
                            </div>
                            <div class="process-ram-chart-wrapper data-wrapper">
                                <div class="data-label">RAM Usage</div>
                                <div class="process-chart-wrapper process-cpu-usage-chart">
                                    <canvas id="processRAMChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js" type="text/javascript"></script>
    <script src="Scripts/chartjs-plugin-streaming.min.js"  type="text/javascript"></script>
    <%--<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@latest/dist/chartjs-plugin-streaming.min.js" type="text/javascript"></script>--%>
    <script src="Scripts/charts.js"></script>

    <script>
        var systemCPUTimer = 10000;
        var systemRAMTimer = 10000;
        var processInfoTimer = 30000;
        var tcpTimer = 30000;
        var runningProcessTimer = 120000;

        var processName = "w3wp";
        var subProcesses = [];
        var subProcessIndex = 0;
        var subProcessId = "";

        var lastTime = "0"
        var lastTotalProcessorTime = "0"
        var processCPUUsageRaw = 0;
        var processRAMUsageRaw = 0;
        var processCPUUsage = "0%";
        var processRAMUsage = "0Mb";

        var systemCPUUsageRaw = 0;
        var systemCPUUsage = "0%"
        var systemRAMUsageRaw = 0;
        var systemRAMUsage = "0MB"

        var logicalCores = 1;

        $(function () {

            fetchOSInfo();
            fetchProcessorInfo();
            fetchSystemProcessInfo();
            fetchSystemRAMInfo();
            fetchProcessDetails();
            fetchTCPPorts();
            fetchRunningProcesses();

            var systemProcessInfo = setInterval(() => {
                fetchSystemProcessInfo();
            }, systemCPUTimer);

            var systemRAMInfo = setInterval(() => {
                fetchSystemRAMInfo();
            }, systemRAMTimer);

            var processDetails = setInterval(() => {
                fetchProcessDetails();
            }, processInfoTimer);

            var tcpPorts = setInterval(() => {
                fetchTCPPorts();
            }, tcpTimer);

            var runningprocesses = setInterval(() => {
                fetchRunningProcesses();
            }, runningProcessTimer);
        });

        function fetchOSInfo() {
            try {
                $.ajax({
                    async: true,
                    type: "POST",
                    url: "SystemPerformance.aspx/getOSInfo",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccessOSInfo,
                    failure: function (response) {
                        console.log(response.d);
                    }
                });
            } catch (ex) {
                console.error(ex);
            }
        }

        function OnSuccessOSInfo(response) {
            //console.log(response.d);
            var res = response.d;
            var manufacturer = res.Manufacturer;
            var name = res.Name.toString().split('|')[0];
            var version = res.Version;
            var finalName = manufacturer + ' - ' + name + ' (build ' + version + ')';
            document.getElementsByClassName("os-details")[0].innerHTML += finalName;
        }

        function fetchProcessorInfo() {
            try {
                $.ajax({
                    async: true,
                    type: "POST",
                    url: "SystemPerformance.aspx/getProcessorInfo",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccessProcessorInfo,
                    failure: function (response) {
                        console.log(response.d);
                    }
                });
            } catch (ex) {
                console.error(ex);
            }
        }

        function OnSuccessProcessorInfo(response) {
            //console.log(response.d);
            var res = response.d;
            var name = res.Name;
            var cores = res.Cores;
            var logical = res.LogicalProcessors;
            document.getElementsByClassName("processor-name-wrapper")[0].innerHTML += name;
            document.getElementsByClassName("processor-cores-count")[0].innerText += cores;
            document.getElementsByClassName("processor-logical-count")[0].innerText += logical;
            logicalCores = logical;
        }

        function fetchSystemProcessInfo() {
            $.ajax({
                async: true,
                type: "POST",
                url: "SystemPerformance.aspx/getSystemProcessInfo",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessSystemProcessInfo,
                failure: function (response) {
                    console.log(response.d);
                }
            });
        }

        function OnSuccessSystemProcessInfo(response) {
           // console.log(response.d);
            //console.log("----------");
            const res = response.d;

            systemCPUUsageRaw = res.CPUUsageRaw;
            //console.log(systemCPUUsageRaw);
            //console.log("******");
            systemCPUUsage = res.CPUUsage;
            var processes = res.Processes;
            var handles = res.HandleCount;
            var threads = res.ThreadCount;
            document.getElementsByClassName("overall-process-count")[0].innerHTML = processes;
            document.getElementsByClassName("overall-threads-count")[0].innerText = threads;
            document.getElementsByClassName("overall-handles-count")[0].innerText = handles;
            //console.log(systemCPUUsage, systemCPUUsageRaw)
        }

        function fetchSystemRAMInfo() {
            $.ajax({
                async: true,
                type: "POST",
                url: "SystemPerformance.aspx/getSystemRAMInfo",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessSystemRAMInfo,
                failure: function (response) {
                    console.log(response.d);
                }
            });
        }

        function OnSuccessSystemRAMInfo(response) {
            //console.log(response.d);
            var res = response.d;
            systemRAMUsage = res.MemoryInUsePerc;
            //console.log(res);
            systemRAMUsageRaw = res.MemoryInUseRaw;
            var totalMemory = res.TotalPhysicalMemory;
            var inUse = res.MemoryInUse;
            var available = res.AvailableBytes;
            var commited = res.CommitedBytes;
            var comitLimit = res.CommitLimit;
            var paged = res.PoolPagedBytes;
            var nonPaged = res.PoolNonPagedBytes;
            var speed = res.Speed;
            document.getElementsByClassName("total-physical-memory")[0].innerHTML = '<span class="inline-label">Total Memory:</span>' + totalMemory;// + " @ " + speed;
            document.getElementsByClassName("in-use-memory")[0].innerText = inUse;
            document.getElementsByClassName("available-memory")[0].innerText = available;
            document.getElementsByClassName("commited-memory")[0].innerText = commited;
            document.getElementsByClassName("commit-limit")[0].innerText = comitLimit;
            document.getElementsByClassName("paged-memory")[0].innerText = paged;
            document.getElementsByClassName("non-paged-memory")[0].innerText = nonPaged;
        }

        function fetchRunningProcesses() {
            $.ajax({
                async: true,
                type: "POST",
                url: "SystemPerformance.aspx/getAllRunningProcesses",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessRunningProcesses,
                failure: function (response) {
                    console.log(response.d);
                }
            });
        }

        function OnSuccessRunningProcesses(response) {
            var res = response.d;
            //console.log(res)
            list = document.getElementsByClassName("process-list")[0];
            list.innerHTML = "";
            res.forEach(p => {
                list.innerHTML += '<li id="' + p + '" class="process-list-item">' + p + '</li>'
            });
            if (processName == "") {
                processName = "w3wp";
            }
            lastTime = "0";
            lastTotalProcessorTime = "0";

            if (subProcessId === "") {

            }

            /*for (var i = 0; i < res.length; i++) {
                list.innerHTML += '<li class="process-list-item">' + res[i] + '</li>'
            } */
        }

        $('.process-list').on('click', 'li', function (event) {
            processName = $(this)[0].innerText;
            lastTime = "0";
            lastTotalProcessorTime = "0";

            subProcessIndex = 0;
            subProcessId = "";
            subProcesses.length = 0;

            var ddlSP = document.getElementsByClassName("ddl-sub-process")[0]
            ddlSP.innerHTML = "";
            processDetailsNotAvailable();
            fetchProcessDetails();
        })

        function fetchProcessDetails() {
            //console.log(processName);
            $.ajax({
                async: true,
                type: "POST",
                url: "SystemPerformance.aspx/getProcessDetails",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                //data: '{processName: "' + processName + '", valLastTime: "' + lastTime + '", valLastTotalProcessorTime: "' + lastTotalProcessorTime + '"}',
                data: '{processName: "' + processName + '", logicalCores: ' + parseInt(logicalCores, 10) + '}',
                success: OnSuccessProcessDetails,
                failure: function (response) {
                    console.log(response.d);
                }
            });
        }

        function OnSuccessProcessDetails(response) {
           // console.log(response.d);
            const res = response.d;
            subProcesses = res.ProcessDetails;
            if (subProcesses) {
                if (subProcesses.length) {

                    var ddlSP = document.getElementsByClassName("ddl-sub-process")[0]
                    ddlSP.innerHTML = "";
                    let index = 0;
                    for (let i = 0; i < subProcesses.length; i++) {
                        let sp = subProcesses[i];
                        ddlSP.innerHTML += '<option value="' + index + '">' + sp.ProcessId + '</option>';
                        index++;
                    };

                    subProcessId = subProcesses[subProcessIndex].ProcessId;
                    setProcesDetails();

                    lastTime = res.ProcessDetails[subProcessIndex].IndividualCPUInfo.LastTime;
                    lastTotalProcessorTime = res.ProcessDetails[subProcessIndex].IndividualCPUInfo.LastTotalProcessorTime;
                    processCPUUsageRaw = res.TotalCPUUsageRaw;
                    processRAMUsageRaw = (res.TotalRamUsageRaw / 1024) / 1024;
                    processCPUUsage = res.TotalCPUUsage;
                    processRAMUsage = res.TotalRamUsage;

                    document.getElementsByClassName('memory-in-use')[0].innerText = res.TotalRamUsage;
                } else {
                    lastTime = "0";
                    lastTotalProcessorTime = "0";
                    processDetailsNotAvailable();
                }
            } else {
                processDetailsNotAvailable();
            }
            //console.log(processName, processCPUUsage, processRAMUsage);
        }

        $('.ddl-sub-process').on('change', function (event) {
            //console.log($(this)[0], event.target);
            subProcessIndex = $('.ddl-sub-process').find(":selected")[0].value;
            subProcessId = $('.ddl-sub-process').find(":selected")[0].innerText;
            //console.log(subProcessId, subProcessIndex);
            setProcesDetails();
        })

        function setProcesDetails() {
            var selectedSubProcess = subProcesses[subProcessIndex];

            document.getElementsByClassName("process-name")[0].innerHTML =
                '<span class="inline-label">Showing information of:</span>' + processName;

            document.getElementsByClassName('sub-process-id')[0].innerText = selectedSubProcess.ProcessId;
            document.getElementsByClassName('sub-process-window-title')[0].innerText = selectedSubProcess.IndividualCPUInfo.MainWindowTitle;
            document.getElementsByClassName('sub-process-cpu')[0].innerText = selectedSubProcess.IndividualCPUInfo.CPUUtilization;
            document.getElementsByClassName('sub-process-threads')[0].innerText = selectedSubProcess.IndividualCPUInfo.ThreadCount;
            document.getElementsByClassName('sub-process-handles')[0].innerText = selectedSubProcess.IndividualCPUInfo.HandleCount;

            document.getElementsByClassName('memory-working-set')[0].innerText = selectedSubProcess.IndividualRAMInfo.WorkingSet
            document.getElementsByClassName('memory-paged')[0].innerText = selectedSubProcess.IndividualRAMInfo.PagedMemorySize

            document.getElementsByClassName('memory-min-working-set')[0].innerText = selectedSubProcess.IndividualRAMInfo.MinWorkingSet
            document.getElementsByClassName('memory-max-working-set')[0].innerText = selectedSubProcess.IndividualRAMInfo.MaxWorkingSet
            document.getElementsByClassName('memory-non-paged')[0].innerText = selectedSubProcess.IndividualRAMInfo.NonPagedMemorySize

            document.getElementsByClassName('memory-paged-system')[0].innerText = selectedSubProcess.IndividualRAMInfo.PagedSystemMemorySize
            document.getElementsByClassName('memory-peak-paged')[0].innerText = selectedSubProcess.IndividualRAMInfo.PeakPagedMemorySize
            document.getElementsByClassName('memory-peak-virtual')[0].innerText = selectedSubProcess.IndividualRAMInfo.PeakVirtualMemorySize

            document.getElementsByClassName('memory-peak-working')[0].innerText = selectedSubProcess.IndividualRAMInfo.PeakWorkingSize
            document.getElementsByClassName('memory-virtual')[0].innerText = selectedSubProcess.IndividualRAMInfo.VirtualMemorySize
            document.getElementsByClassName('memory-private-working')[0].innerText = selectedSubProcess.IndividualRAMInfo.PrivateWorkingSet
        }

        function processDetailsNotAvailable() {
            var selectedSubProcess = subProcesses[subProcessIndex];
            if (!selectedSubProcess) {
                document.getElementsByClassName('sub-process-id')[0].innerText = "";
                document.getElementsByClassName('sub-process-window-title')[0].innerText = "";
                document.getElementsByClassName('sub-process-cpu')[0].innerText = "";
                document.getElementsByClassName('sub-process-threads')[0].innerText = "";
                document.getElementsByClassName('sub-process-handles')[0].innerText = "";

                document.getElementsByClassName('memory-in-use')[0].innerText = "";
                document.getElementsByClassName('memory-working-set')[0].innerText = "";
                document.getElementsByClassName('memory-paged')[0].innerText = "";

                document.getElementsByClassName('memory-min-working-set')[0].innerText = "";
                document.getElementsByClassName('memory-max-working-set')[0].innerText = "";
                document.getElementsByClassName('memory-non-paged')[0].innerText = "";

                document.getElementsByClassName('memory-paged-system')[0].innerText = "";
                document.getElementsByClassName('memory-peak-paged')[0].innerText = "";
                document.getElementsByClassName('memory-peak-virtual')[0].innerText = "";

                document.getElementsByClassName('memory-peak-working')[0].innerText = "";
                document.getElementsByClassName('memory-virtual')[0].innerText = "";
                document.getElementsByClassName('memory-private-working')[0].innerText = "";
            }
        }

        function fetchTCPPorts() {
            $.ajax({
                async: true,
                type: "POST",
                url: "SystemPerformance.aspx/getActiveTCPConnections",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessTCPPorts,
                failure: function (response) {
                    console.log(response.d);
                }
            });
        }

        function OnSuccessTCPPorts(response) {
            //console.log(response.d);
            var res = response.d;
            var tcpV4Ports = res.OpenTCPv4Ports
            var tcpV6Ports = res.OpenTCPv6Ports
            document.getElementsByClassName("open-tcp-v4-ports")[0].innerHTML = '<span class="inline-label">Open TCP V4 Ports: </span>' + tcpV4Ports;
            document.getElementsByClassName("open-tcp-v6-ports")[0].innerHTML = '<span class="inline-label">Open TCP V6 Ports: </span>' + tcpV6Ports;
        }
    </script>
    <script>
        var ctxCPU = document.getElementById("systemCPUChart").getContext("2d");
        //console.log("in error funtion");
        var cpuChart = new Chart(ctxCPU, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: "System CPU % Utilization",
                    backgroundColor: "rgba(95,186,88,0.7)",
                    borderColot: "rgba(95,186,88,1)",
                    pointBackgroundColor: "rgba(0,0,0,0)",
                    pointBorderColor: "rgba(0,0,0,0)",
                    pointHoverBackgroundColor: "rgba(95,186,88,1)",
                    pointHoverBorderColor: "rgba(95,186,88,1)",
                    data: []
                }]
            },
            options: {
                elements: {
                    line: {
                        tension: 0.05
                    }
                },
                scales: {
                    xAxes: [{
                        type: 'realtime'
                        //realtime: {
                        //    delay: 2000,
                        //    duration: systemCPUTimer,
                        //    refresh: 1000,
                        //    ttl: undefined,
                        //    pause: false,
                        //    onRefresh: function (cpuChart) {
                        //        console.log("&&&&&&&&&&&&&&&&&&&");
                        //        console.log(systemCPUUsage,"************");
                        //        cpuChart.data.labels.push(Date.now());
                        //        cpuChart.data.datasets[0].data.push(systemCPUUsageRaw);
                        //        cpuChart.data.datasets[0].label = "Overall CPU % Utilization (" + systemCPUUsage + ")";
                        //    }
                        //}
                    }],
                    yAxes: [{
                        display: true,
                        ticks: {
                            beginAtZero: true,
                            steps: 10,
                            stepValue: 10,
                            max: 100
                        }
                    }]
                },
                plugins: {
                    streaming: {
                        duration: systemCPUTimer,
                        refresh: 1000,
                        delay: 2000,
                        onRefresh: function (cpuChart) {
                            cpuChart.data.labels.push(Date.now());
                            cpuChart.data.datasets[0].data.push(systemCPUUsageRaw);
                            cpuChart.data.datasets[0].label = "Overall CPU % Utilization (" + systemCPUUsage + ")";
                        }
                    }
                }
            }
        });
        //console.log(systemRAMUsageRaw);
        //console.log("******");
        var ctxRAM = document.getElementById("systemRAMChart").getContext("2d");
        var ramChart = new Chart(ctxRAM, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: "Overall RAM % Utilization",
                    backgroundColor: "rgba(95,186,88,0.7)",
                    borderColor: "rgba(95,186,88,1)",
                    pointBackgroundColor: "rgba(0,0,0,0)",
                    pointBorderColor: "rgba(0,0,0,0)",
                    pointHoverBackgroundColor: "rgba(95,186,88,1)",
                    pointHoverBorderColor: "rgba(95,186,88,1)",
                    data: []
                }]
            },
            options: {
                elements: {
                    line: {
                        tension: 0.05
                    }
                },
                scales: {
                    xAxes: [{
                        type: 'realtime'
                        //realtime: {
                        //    delay: 2000,
                        //    duration: systemRAMTimer,
                        //    refresh: 1000,
                        //    ttl: undefined,
                        //    pause: false,
                        //    onRefresh: function (ramChart) {
                        //        //console.log(systemRAMUsageRaw);
                        //        ramChart.data.labels.push(Date.now());
                        //        ramChart.data.datasets[0].data.push(systemRAMUsageRaw);
                        //        ramChart.data.datasets[0].label = "Overall RAM % Utilization (" + systemRAMUsage + ")";
                        //    }
                        //}
                    }],
                    yAxes: [{
                        display: true,
                        ticks: {
                            beginAtZero: true,
                            steps: 10,
                            stepValue: 10,
                            max: 100
                        }
                    }]
                },
                plugins: {
                    streaming: {
                        duration: systemRAMTimer,
                        refresh: 1000,
                        delay: 2000,
                        onRefresh: function (ramChart) {
                                //console.log(systemRAMUsageRaw);
                                ramChart.data.labels.push(Date.now());
                                ramChart.data.datasets[0].data.push(systemRAMUsageRaw);
                                ramChart.data.datasets[0].label = "Overall RAM % Utilization (" + systemRAMUsage + ")";
                            }
                    }
                }
            }
        });

        var ctxProcessCPU = document.getElementById("processCPUChart").getContext("2d");
        var processCPUChart = new Chart(ctxProcessCPU, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: "Process CPU % Utilization",
                    backgroundColor: "rgba(95,186,88,0.7)",
                    borderColot: "rgba(95,186,88,1)",
                    pointBackgroundColor: "rgba(0,0,0,0)",
                    pointBorderColor: "rgba(0,0,0,0)",
                    pointHoverBackgroundColor: "rgba(95,186,88,1)",
                    pointHoverBorderColor: "rgba(95,186,88,1)",
                    data: []
                }]
            },
            options: {
                elements: {
                    line: {
                        tension: 0.05
                    }
                },
                scales: {
                    xAxes: [{
                        type: 'realtime',
                        //realtime: {
                        //    delay: 2000,
                        //    duration: processInfoTimer,
                        //    refresh: 1000,
                        //    ttl: undefined,
                        //    pause: false,
                        //    onRefresh: function (processCPUChart) {
                        //        //console.log(processCPUUsage);
                        //        processCPUChart.data.labels.push(Date.now());
                        //        processCPUChart.data.datasets[0].data.push(processCPUUsageRaw >= 0 ? processCPUUsageRaw : 0);
                        //        processCPUChart.data.datasets[0].label = "Process CPU % Utilization (" + processCPUUsage + ")";
                        //    }
                        //}
                    }],
                    yAxes: [{
                        display: true,
                        ticks: {
                            beginAtZero: true,
                            steps: 10,
                            stepValue: 10,
                            max: 100
                        }
                    }]
                },
                plugins: {
                    streaming: {
                        duration: processInfoTimer,
                        refresh: 1000,
                        delay: 2000,
                        onRefresh: function (processCPUChart) {
                                //console.log(processCPUUsage);
                                processCPUChart.data.labels.push(Date.now());
                                processCPUChart.data.datasets[0].data.push(processCPUUsageRaw >= 0 ? processCPUUsageRaw : 0);
                                processCPUChart.data.datasets[0].label = "Process CPU % Utilization (" + processCPUUsage + ")";
                            }

                    }
                }
            }
        });

        var ctxProcessRAM = document.getElementById("processRAMChart").getContext("2d");
        var processRAMChart = new Chart(ctxProcessRAM, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: "Process RAM % Utilization",
                    backgroundColor: "rgba(95,186,88,0.7)",
                    borderColot: "rgba(95,186,88,1)",
                    pointBackgroundColor: "rgba(0,0,0,0)",
                    pointBorderColor: "rgba(0,0,0,0)",
                    pointHoverBackgroundColor: "rgba(95,186,88,1)",
                    pointHoverBorderColor: "rgba(95,186,88,1)",
                    data: []
                }]
            },
            options: {
                elements: {
                    line: {
                        tension: 0.05
                    }
                },
                scales: {
                    xAxes: [{
                        type: 'realtime'
                        //realtime: {
                        //    delay: 2000,
                        //    duration: processInfoTimer,
                        //    refresh: 1000,
                        //    ttl: undefined,
                        //    pause: false,
                        //    onRefresh: function (processRAMChart) {
                        //        //console.log(processRAMUsage);
                        //        processRAMChart.data.labels.push(Date.now());
                        //        processRAMChart.data.datasets[0].data.push(processRAMUsageRaw);
                        //        processRAMChart.data.datasets[0].label = "Process RAM Utilization (" + processRAMUsage + ")";
                        //    }
                        //}
                    }],
                    yAxes: [{
                        display: true,
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                plugins: {
                    streaming: {
                        delay: 2000,
                        duration: processInfoTimer,
                        refresh: 1000,
                        onRefresh: function (processRAMChart) {
                            //console.log(processRAMUsage);
                            processRAMChart.data.labels.push(Date.now());
                            processRAMChart.data.datasets[0].data.push(processRAMUsageRaw);
                            processRAMChart.data.datasets[0].label = "Process RAM Utilization (" + processRAMUsage + ")";
                        }
                    }
                }
            }
        });
    </script>
</asp:Content>
<%--<asp:Content ID="Content4" ContentPlaceHolderID="Footer" runat="server">
</asp:Content>--%>
