builder_apm 0.2.0

data/app/views/builder_apm/css/_main.html.erb

@@ -0,0 +1,268 @@
+<style>
+body {
+    font-family: Arial, sans-serif;
+    display:none;
+  }
+
+  #header {
+    background-color: #4CAF50;
+    color: white;
+    text-align: center;
+    padding: 10px;
+    margin-bottom: 20px;
+  }
+
+  #navbar {
+    background-color: #333;
+    overflow: hidden;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  #navbar ul {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+  }
+
+  #navbar li {
+    float: left;
+    display:block;
+  }
+
+  #navbar li a {
+    display: block;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+  }
+
+  #navbar li a:hover {
+    background-color: #ddd;
+    color: black;
+  }
+
+  #navbar li a.active {
+    background-color: #4CAF50;
+    color: white;
+  }
+#navbar li a,
+#navbar .nav-button {
+    display: block;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    background-color: #333;
+    border: none; /* Removes the default button border */
+    cursor: pointer; /* Makes the button cursor appear as a hand */
+    font-size: 1em; /* Adjust to match your anchors */
+    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
+}
+
+th.sortable {
+    cursor: pointer; /* Makes the button cursor appear as a hand */
+}
+#navbar #dark-mode-toggle {
+  float:right;
+}
+
+#navbar li a:hover,
+#navbar .nav-button:hover {
+    background-color: #ddd;
+    color: black;
+}
+
+#navbar li a.active,
+#navbar .nav-button.active {
+    background-color: #4CAF50;
+    color: white;
+}
+
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    margin-top: 20px;
+  }
+  th, td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+  }
+  tr:nth-child(even) {
+    background-color: #f2f2f2;
+  }
+  th {
+    background-color: #4CAF50;
+    color: white;
+    padding-top: 12px;
+    padding-bottom: 12px;
+  }
+
+  #gannt_div {
+    overflow:display;
+    height:2000px;
+    width:100%;
+  }
+#details_div .bounding-box {
+    border: 1px solid #333;
+    margin: 2px -1px 3px 0px;
+    padding: 10px 0 10px 10px;
+    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
+    border-radius: 5px;
+}
+
+#details_div div.has-children {
+    cursor: pointer;
+    color: #444;
+    font-weight: bold;
+}
+
+#details_div span {
+  display: inline-block;
+}
+
+#details_div div {
+    padding:5px 0 5px 5px;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #333;
+    background-color: #f9f9f9;
+}
+
+#details_div .sql-event {
+    background-color: #e1f5fe;
+    color: #01579b;
+}
+
+#details_div .children {
+    display:none;
+    margin-top: 10px;
+    border-left: 1px solid #ccc;
+    padding-left: 10px;
+}
+
+#details_div .has_children {
+    border: 1px solid #aaa;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    margin-right: 10px;
+}
+
+#details_div .date {
+    color: #607d8b;
+    margin-right: 10px;
+    width: 135px;
+    text-align: right;
+}
+
+#details_div .duration {
+    color: #009688;
+    margin-right: 10px;
+    width: 100px;
+}
+
+#details_div .description, 
+#details_div .sql {
+    color: #3f51b5;
+    margin-right: 10px;
+}
+
+#details_div .method_line, 
+#details_div .trigger_line {
+    color: #8d6e63;
+    margin-right: 10px;
+    width: 100%;
+}
+
+#details_div .cached, 
+#details_div .record_count, 
+#details_div .params {
+    color: #3f51b5;
+    margin-right: 10px;
+    width: 100px;
+} 
+
+#details_div .minor_call {
+  display:none;
+  background: #e5efe5;
+} 
+
+#details_div .params {
+    width: auto;
+}
+#details_div .error_status {
+  border: 1px solid red;
+  padding: 10px;
+  margin-bottom: 10px;
+  background-color: rgb(255, 238, 238);
+}
+
+.duration-circle {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    border: 1px solid #333;
+    margin-right: 5px;
+}
+
+.green-circle {
+    background-color: #0f0;
+    border-color:#0c0;
+}
+
+.amber-circle {
+    background-color: #ff0;
+    border-color:#cc0;
+}
+
+.red-circle {
+    background-color: #f00;
+    border-color:#c00;
+}
+
+.image-container {
+  position: absolute;
+  width: 600px; /* Change to the width of your image */
+  height: 600px; /* Change to the height of your image */
+  overflow: hidden;
+  left:50%;
+  margin-left:-300px;
+
+}
+
+.image-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: radial-gradient(ellipse at center, rgba(255,255,255,0) 57%, rgba(255,255,255,1) 71%);
+}
+
+.image-container img {
+  width: 100%;
+  height: 100%;
+}
+
+#error_table td p {
+  font-size: 10px;
+  margin:2px;
+}
+
+@keyframes blink {
+  0% {opacity: 1;}
+  50% {opacity: 0;}
+  100% {opacity: 1;}
+}
+
+#details_div .n_plus_one {
+    color: #ff6347;
+}
+  </style>

data/app/views/builder_apm/dashboard/index.html.erb

@@ -0,0 +1,10 @@
+<%= render 'builder_apm/shared/header' %>
+  
+  <div id="request_count_chart" style="height:400px;"></div>
+  <div id="avg_duration_chart" style="width:100%; height:400px;"></div>
+  
+<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+
+<%= render 'builder_apm/js/dashboard' %>
+
+<%= render 'builder_apm/shared/footer' %>

data/app/views/builder_apm/error_requests/index.html.erb

@@ -0,0 +1,23 @@
+<%= render 'builder_apm/shared/header' %>
+
+<table id="error_table">
+    <thead>
+        <tr>
+            <th class="sortable" data-field="start_time">Time</th>
+            <th class="sortable" data-field="controller">Controller#Action</th>
+            <th class="sortable" data-field="status">Status</th>
+            <th class="sortable" data-field="exception_class">Error Class</th>
+            <th class="sortable" data-field="exception_message">Error Message</th>
+            <th class="sortable" data-field="exception_backtrace">Trace</th>
+        </tr>
+    </thead>
+    <tbody>
+        <!-- Table content will be populated here by JavaScript -->
+    </tbody>
+</table>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css" /> 
+<%= render 'builder_apm/js/error_requests' %>
+
+<%= render 'builder_apm/shared/footer' %>

data/app/views/builder_apm/js/_compress.html.erb

@@ -0,0 +1,93 @@
+<script>
+
+var compression_mode = 1;
+var my_lzma = LZMA; /// lzma_worker.js creates a global LZMA object. We store it as a new variable just to match simple_demo.html.
+
+function convert_bytes_to_hex(byte_arr) {
+  var hex_str = "",
+      i,
+      len,
+      tmp_hex;
+  
+  len = byte_arr.length;
+  
+  for (i = 0; i < len; ++i) {
+    if (byte_arr[i] < 0) {
+      byte_arr[i] = byte_arr[i] + 256;
+    }
+    if (byte_arr[i] === undefined) {
+      alert("Boom " + i);
+      byte_arr[i] = 0;
+    }
+    tmp_hex = byte_arr[i].toString(16);
+    
+    // Add leading zero.
+    if (tmp_hex.length == 1) tmp_hex = "0" + tmp_hex;
+    
+    hex_str += tmp_hex;
+  }
+  
+  return hex_str.trim();
+}
+
+function convert_hex_to_bytes(hex_str) {
+  var count = 0,
+      hex_arr,
+      hex_data = [],
+      hex_len,
+      i;
+  
+  if (hex_str.trim() == "") return [];
+  
+  /// Check for invalid hex characters.
+  if (/[^0-9a-fA-F\s]/.test(hex_str)) {
+    return false;
+  }
+  
+  hex_arr = hex_str.split(/([0-9a-fA-F]{2})/g);
+  hex_len = hex_arr.length;
+  
+  for (i = 0; i < hex_len; ++i) {
+    if (hex_arr[i].trim() == "") {
+      continue;
+    }
+    hex_data[count++] = parseInt(hex_arr[i], 16);
+  }
+  
+  return hex_data;
+}
+
+function compress(data, completeCallback){
+
+	my_lzma.compress(data, compression_mode, function on_compress_complete(result, error) {
+        if(result != null) {
+            result = convert_bytes_to_hex(result);
+        }
+        completeCallback(result, error);
+    }, function on_compress_progress_update(percent) {
+        console.log("Compressing: " + (percent * 100) + "%");
+    });    
+
+}
+
+function decompress(data, completeCallback) {
+    var data = convert_hex_to_bytes(data);
+
+    my_lzma.decompress(data, completeCallback, 
+    function on_decompress_progress_update(percent) {
+      /// Decompressing progress code goes here.
+      console.log("Decompressing: " + (percent * 100) + "%");
+    });
+}
+
+function getSizeOfLocalStorageKey(key) {
+    const value = localStorage.getItem(key);
+    if(value) {
+        // Each character takes 2 bytes when stored in local storage
+        return ((value.length * 2) / 1024 / 1024) + 'MB';  // return size in MB
+    } else {
+        return 0;
+    }
+}
+
+</script>

data/app/views/builder_apm/js/_dashboard.html.erb

@@ -0,0 +1,199 @@
+<script>
+var aggregationInterval = 1;  // Change this to modify the interval
+// Load the Google Charts library
+google.charts.load('current', {packages: ['corechart', 'line']});
+google.charts.setOnLoadCallback(drawCharts);
+
+function drawCharts() {
+  prepareChartData(aggregationInterval);
+  setInterval(function() {
+    var autoUpdate = $("#autoUpdate").prop('checked');
+    if (autoUpdate) {
+      prepareChartData(aggregationInterval);
+    }
+  }, 5000);
+}
+function prepareChartData(aggregationInterval) {
+  fetchDataAndUpdateStorage(function(updatedData) {
+
+    // Continue with data aggregation and charting...
+    // Aggregate data into specified interval
+    var aggregatedData = {};
+    updatedData.forEach(function(item) {
+      // Round start_time down to nearest interval
+      var time = new Date(item['start_time']);
+      time.setSeconds(0, 0);
+      time.setMinutes(Math.floor(time.getMinutes() / aggregationInterval) * aggregationInterval, 0, 0);
+
+      var timeKey = time.getTime();
+
+      // Initialize data for this interval if it doesn't already exist
+      if (!aggregatedData[timeKey]) {
+        aggregatedData[timeKey] = {
+          count: 0,
+          totalDuration: 0,
+          totalDbRuntime: 0,
+          totalViewRuntime: 0,
+          totalOther: 0,
+          // durations: []
+        };
+      }
+
+      // Add current request data to interval totals
+      aggregatedData[timeKey]['count'] += 1;
+      aggregatedData[timeKey]['totalDuration'] += (item['real_duration_time']);
+      aggregatedData[timeKey]['totalDbRuntime'] += item['calc_db_runtime'];
+      aggregatedData[timeKey]['totalViewRuntime'] += item['view_runtime'];
+      aggregatedData[timeKey]['totalOther'] += item['real_duration_time'] - item['calc_db_runtime'] - item['view_runtime'];
+      // aggregatedData[timeKey]['durations'].push(item['duration']);
+      // aggregatedData[timeKey]['totalDbRuntime'] += item['real_duration_time']*0.35;
+      // aggregatedData[timeKey]['totalViewRuntime'] += item['real_duration_time']*0.45;
+      // aggregatedData[timeKey]['totalOther'] += item['real_duration_time']*0.2;
+    });
+
+
+    // Create a list of all possible time intervals
+    let keys = Object.keys(aggregatedData).sort();
+    let firstTime = keys[0] * 1;
+    let lastTime = keys[keys.length - 1] * 1;
+
+    var timeIntervals = [];
+    for (var time = firstTime; time < lastTime; time += (60 * aggregationInterval * 1000)) {
+      timeIntervals.push(time);
+    }
+
+    // Fill in missing data points with zeroes
+    timeIntervals.forEach(function(timeKey) {
+      if (!aggregatedData[timeKey]) {
+        aggregatedData[timeKey] = {
+          count: 0,
+          totalDuration: 0,
+          totalDbRuntime: 0,
+          totalViewRuntime: 0,
+          totalOther: 0
+          // durations: []
+        };
+      }
+    });
+
+    // Convert aggregated data into Dygraphs-friendly format
+    var requestCountData = [];
+    var avgDurationData = [];
+    timeIntervals.forEach(function(timeKey) {
+      var time = new Date(timeKey);
+      var data = aggregatedData[timeKey];
+
+      requestCountData.push([
+        time, 
+        data['count'], 
+        data['count'] === 0 ? 0 : (data['totalDuration'] / data['count'])
+      ]);
+      avgDurationData.push([
+        time,
+        // data['count'] === 0 ? 0 : data['totalDuration'] / data['count'],
+        data['count'] === 0 ? 0 : data['totalDbRuntime'] / data['count'],
+        data['count'] === 0 ? 0 : data['totalViewRuntime'] / data['count'],
+        data['count'] === 0 ? 0 : data['totalOther'] / data['count'],
+        // percentile(data['durations'], 0.95)
+      ]);
+    });
+
+    // Render charts
+    renderRequestCountChart(requestCountData, aggregationInterval);
+    renderAvgDurationChart(avgDurationData, aggregationInterval);
+  });
+}
+
+function percentile(arr, p) {
+  if (arr.length === 0) return 0;
+  if (p <= 0) return arr[0];
+  if (p >= 1) return arr[arr.length - 1];
+
+  arr.sort(function (a, b) { return a - b; });
+  var index = arr.length * p;
+  var lower = Math.floor(index);
+  var upper = lower + 1;
+  var weight = index % 1;
+
+  if (upper >= arr.length) return arr[lower];
+  return arr[lower] * (1 - weight) + arr[upper] * weight;
+}
+
+function renderRequestCountChart(data, aggregationInterval) {
+  var dataTable = new google.visualization.DataTable();
+  dataTable.addColumn('datetime', 'Time');
+  dataTable.addColumn('number', 'Requests');
+  dataTable.addColumn('number', 'Avg. Duration');
+
+  data.forEach(function(row) {
+    dataTable.addRow(row);
+  });
+
+  var options = {
+    title: 'Number of requests over time',
+    hAxis: {
+      title: 'Time'
+    },
+    series: {
+      0: { targetAxisIndex: 0 },
+      1: { targetAxisIndex: 1 }
+    },
+    vAxes: {
+      0: { title: 'Requests' },
+      1: { title: 'Duration (ms)' }
+    },
+    height: 400,
+    explorer: { 
+        actions: ['dragToZoom', 'rightClickToReset'],
+        axis: 'horizontal',
+        keepInBounds: true,
+        maxZoomIn: 4.0
+}
+  };
+
+  var chart = new google.visualization.LineChart(document.getElementById('request_count_chart'));
+  chart.draw(dataTable, options);
+}
+
+
+function renderAvgDurationChart(data, aggregationInterval) {
+  var dataTable = new google.visualization.DataTable();
+  dataTable.addColumn('datetime', 'Time');
+  // dataTable.addColumn('number', 'Duration');
+  dataTable.addColumn('number', 'DB Runtime');
+  dataTable.addColumn('number', 'View Runtime');
+  dataTable.addColumn('number', 'Contoller Time');
+
+  data.forEach(function(row) {
+    dataTable.addRow(row);
+  });
+
+  var options = {
+    title: 'Average durations over time',
+    hAxis: {
+      title: 'Time'
+    },
+    vAxis: {
+      title: 'Duration (ms)'
+    },
+    isStacked: true,
+    height: 400,
+    explorer: { 
+        actions: ['dragToZoom', 'rightClickToReset'],
+        axis: 'horizontal',
+        keepInBounds: true,
+        maxZoomIn: 4.0
+}
+  };
+
+  var chart = new google.visualization.AreaChart(document.getElementById('avg_duration_chart'));
+  chart.draw(dataTable, options);
+
+  google.visualization.events.addListener(chart, 'onmouseover', function(e) {
+    console.log('A table row was selected');
+  });
+
+}
+
+
+</script>