newrelic-node-examples/simple-express-app/public/index.html at b2d8c3ed44d20eb334883970f4db4ade25ad4a89 · newrelic/newrelic-node-examples · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>V8 Monitor CSV Visualization</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    body { font-family: sans-serif; margin: 2em; }
    #controls { margin-bottom: 1em; }
    canvas { max-width: 100%; }
  </style>
</head>
<body>
  <h1>V8 Monitor CSV Visualization</h1>
  <div id="controls">
    <label for="csvSelect">CSV File:</label>
    <select id="csvSelect"></select>
  </div>
  <div id="charts"></div>
  <script>
    async function fetchCsvList() {
      const res = await fetch('/csv-list');
      return await res.json();
    }

    async function fetchData(file) {
      const res = await fetch(`/data?file=${encodeURIComponent(file)}`);
      return await res.json();
    }

    function renderAllCharts(headers, data) {
      const chartsDiv = document.getElementById('charts');
      chartsDiv.innerHTML = '';
      const timestamps = data.map(row => row.timestamp);
      headers.forEach(metric => {
        if (metric === 'timestamp') return;
        const values = data.map(row => parseFloat(row[metric]));
        const container = document.createElement('div');
        container.style.marginBottom = '2em';
        const label = document.createElement('h3');
        label.textContent = metric;
        container.appendChild(label);
        const canvas = document.createElement('canvas');
        canvas.height = 80;
        container.appendChild(canvas);
        chartsDiv.appendChild(container);
        const ctx = canvas.getContext('2d');
        // Use distinct colors for percent metrics
        let color = 'blue';
        let yLabel = metric;
        if (metric.endsWith('Percent')) {
          if (metric === 'heapUsedPercent') color = 'green';
          if (metric === 'cpuUserPercent') color = 'orange';
          if (metric === 'cpuSystemPercent') color = 'red';
          yLabel = metric + ' (%)';
        }
        new Chart(ctx, {
          type: 'line',
          data: {
            labels: timestamps,
            datasets: [{
              label: metric,
              data: values,
              borderColor: color,
              fill: false,
            }],
          },
          options: {
            scales: {
              x: { display: true, title: { display: true, text: 'Timestamp' } },
              y: { display: true, title: { display: true, text: yLabel } },
            },
          },
        });
      });
    }

    async function main() {
      const csvList = await fetchCsvList();
      const csvSelect = document.getElementById('csvSelect');
      csvList.forEach(file => {
        const option = document.createElement('option');
        option.value = file;
        option.textContent = file;
        csvSelect.appendChild(option);
      });
      async function loadAndRender(file) {
        const { headers, data } = await fetchData(file);
        renderAllCharts(headers, data);
      }
      csvSelect.addEventListener('change', () => {
        loadAndRender(csvSelect.value);
      });
      if (csvList.length > 0) {
        loadAndRender(csvList[0]);
      }
    }
    main();
  </script>
</body>
</html>