vmstatly/index.html at master · jsargiot/vmstatly · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>VMStatly</title>

    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>

    <link href="lib/materialize/css/materialize.min.css" rel="stylesheet" type="text/css">
    <link href="css/vmstatly.css" rel="stylesheet" type="text/css">
</head>
<body>
    <header>
        <nav class="menu">
            <h1 class="name">vmstatly</h1>
        </nav>
    </header>

    <main class="content">
        <p>Generate charts from <code>vmstat</code> output. </p>
        <p><b>How to use</b>: Save <code>vmstat</code> output on a file and drop it in the box below</p>

        <div id="drop_zone" class="card">Drop file here...</div>

        <div id="GraphsContainer" style="display:none">
                <h3>Processes</h3>
                <div id="proc-stats" class="graph"></div>
                <ul>
                    <li><b>r</b>: How many processes are waiting for CPU time.</li>
                    <li><b>b</b>: Wait Queue - Process which are waiting for I/O (disk, network, user input,etc..)</li>
                </ul>

                <h3>Memory</h3>
                <div id="mem-stats" class="graph"></div>
                <ul>
                    <li><b>free</b>: Idle Memory</li>
                    <li><b>buff</b>: Memory used as buffers, like before/after I/O operations</li>
                    <li><b>cache</b>: Memory used as cache by the Operating System</li>
                    <li>(Ignored)<b>swpd</b>: shows how many blocks are swapped out to disk (paged). Total Virtual memory usage.</li>
                </ul>

                <h3>Swap</h3>
                <div id="swap-stats" class="graph"></div>
                <ul>
                    <li><b>si</b>: How many blocks per second the operating system is swapping in. i.e Memory swapped in from the disk (Read from swap area to Memory)</li>
                    <li><b>so</b>: How many blocks per second the operating system is swaped Out. i.e Memory swapped to the disk (Written to swap area and cleared from Memory)</li>
                </ul>

                <h3>IO</h3>
                <div id="io-stats" class="graph"></div>
                <ul>
                    <li><b>bi</b>: Blocks received from block device - Read (like a hard disk)</li>
                    <li><b>bo</b>: Blocks sent to a block device - Write</li>
                </ul>

                <h3>System</h3>
                <div id="sys-stats" class="graph"></div>
                <ul>
                    <li><b>in</b>: The number of interrupts per second, including the clock.</li>
                    <li><b>cs</b>: The number of context switches per second.</li>
                </ul>

                <h3>CPU</h3>
                <div id="cpu-stats" class="graph"></div>
                <ul>
                    <li><b>us</b>: percentage of cpu used for running non-kernel code. (user time, including nice time)</li>
                    <li><b>sy</b>: percentage of cpu used for running kernel code. (system time - network, IO interrupts, etc)</li>
                    <li><b>id</b>: cpu idle time in percentage.</li>
                    <li><b>wa</b>: percentage of time spent by cpu for waiting to IO.</li>
                </ul>
        </div>

    </main>

    <footer class="page-footer">
        <div class="footer-copyright">
            <div class="container">
                <a href="https://github.com/jsargiot/vmstatly"><img src="img/github.png" /></a>
            </div>
        </div>
    </footer>

    <script src="lib/highcharts/highcharts-custom.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/highcharts/highcharts-theme.js" type="text/javascript" charset="utf-8"></script>

    <script src="js/vmstatly.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vmstatly.charts.js" type="text/javascript" charset="utf-8"></script>

    <script>
        function handleFileSelect(evt) {
            evt.stopPropagation();
            evt.preventDefault();

            var files = evt.dataTransfer.files; // FileList object.
            if (files.length > 1) {
                alert("We only support one file at a time. I'll parse just the first one. :)");
            }
            vmstatly.readFile(files[0]);
        }

        function handleDragOver(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
        }

        // Setup the drag&drop listeners.
        var dropZone = document.getElementById('drop_zone');
        dropZone.addEventListener('dragover', handleDragOver, false);
        dropZone.addEventListener('drop', handleFileSelect, false);
    </script>

</body>
</html>