builder_apm 0.2.0

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

@@ -0,0 +1,79 @@
+<script>
+$(document).ready(function() {
+    fetchDataAndUpdateStorage(function(updatedData) {
+      renderTable(updatedData);
+    });
+
+    setInterval(function() {
+      var autoUpdate = $('#autoUpdate').is(':checked');
+      if (autoUpdate) {
+        fetchDataAndUpdateStorage(function(updatedData) {
+            renderTable(updatedData);
+        });
+      }
+    }, 5000);
+    
+    addSortingClick();
+  });
+  
+  function renderTable(data, target = null) {
+    data = detectNPlusOne(data);
+    data = sortDataBy(current_sort_field, data);
+  
+    // Get a reference to the table body
+    var tableBody = target || $('table tbody');
+  
+    // Clear the table body
+    tableBody.empty();
+  
+    // Create new table rows for each data item
+    data.forEach(function(item) {
+      var row = $('<tr>');
+  
+      $('<td>').text(new Date(item['start_time']).toLocaleString()).appendTo(row);
+      $('<td>').text(item['controller'] + '#' + item['action']).appendTo(row);
+      $('<td>').text(item['status']).appendTo(row);
+      $('<td>').append(renderDuration(item['duration'])).appendTo(row);
+      $('<td>').append(renderDuration(item['db_runtime'])).appendTo(row);
+      $('<td>').append(renderDuration(item['view_runtime'])).appendTo(row);
+      // Action column
+      var actionTd = $('<td>');
+      var actionButton = $('<button>').text('Details');
+      actionButton.on('click', function() {
+        // Replace 'your-details-url' with the actual URL where the details are to be fetched.
+        // It's assumed the ID is required as a URL parameter, modify as per your requirements.
+        window.location.href = '<%= request_details_path %>?request_id=' + item['request_id'];
+      });
+      actionButton.appendTo(actionTd);
+      actionTd.appendTo(row);
+
+      // Append the row to the table body
+      tableBody.append(row);
+    });
+  }
+  
+  function renderDuration(duration) {
+    var durationClass;
+        if (duration > 0 && duration < 500) {
+            durationClass = "duration-circle green-circle";
+        } else if (duration >= 500 && duration < 1000) {
+            durationClass = "duration-circle amber-circle";
+        } else if (duration >= 1000){
+            durationClass = "duration-circle red-circle";
+        }
+
+        var formattedDuration = duration == null || duration == 0 ? 'n/a' : parseFloat(parseFloat(duration).toFixed(3)) + 'ms';
+
+        // Create the duration span with the circle and the duration value
+        return $("<span>").addClass("duration").append(
+            $("<span>").addClass(durationClass),
+            `${formattedDuration}`
+        );
+  }
+
+function detectNPlusOne(requests) {
+    tagQueriesWithNPlusOne(requests);
+    return getNPlusOneRequests(requests);
+}
+
+  </script>

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

@@ -0,0 +1,82 @@
+<script>
+
+$(document).ready(function() {
+    fetchDataAndUpdateStorage(function(updatedData) {
+      // Render the table with the updated data
+      renderTable(updatedData);
+    });
+
+
+    setInterval(function() {
+      var autoUpdate = $('#autoUpdate').is(':checked');
+      if (autoUpdate) {
+        fetchDataAndUpdateStorage(function(updatedData) {
+          // Render the table with the updated data
+          renderTable(updatedData);
+        });
+      }
+    }, 5000);
+    
+    addSortingClick();
+  });
+  
+  
+  function renderTable(data, target = null) {
+    data = sortDataBy(current_sort_field, data);
+  
+    // Get a reference to the table body
+    var tableBody = target || $('table tbody');
+  
+    // Clear the table body
+    tableBody.empty();
+  
+    // Create new table rows for each data item
+    data.forEach(function(item) {
+      var row = $('<tr>');
+  
+      $('<td>').text(new Date(item['start_time']).toLocaleString()).appendTo(row);
+      $('<td>').text(item['controller'] + '#' + item['action']).appendTo(row);
+      $('<td>').text(item['status']).appendTo(row);
+      $('<td>').append(renderDuration(item['real_duration_time'])).appendTo(row);
+      $('<td>').append(renderDuration(item['calc_db_runtime'])).appendTo(row);
+      $('<td>').append(renderDuration(item['view_runtime'])).appendTo(row);
+      // Action column
+      var actionTd = $('<td>');
+
+      if(item.stack && item.stack.length > 0) {
+
+        var actionButton = $('<button>').text('Details');
+        actionButton.on('click', function() {
+          // Replace 'your-details-url' with the actual URL where the details are to be fetched.
+          // It's assumed the ID is required as a URL parameter, modify as per your requirements.
+          window.location.href = '<%= request_details_path %>?request_id=' + item['request_id'];
+        });
+        actionButton.appendTo(actionTd);
+      }
+      actionTd.appendTo(row);
+
+      // Append the row to the table body
+      tableBody.append(row);
+    });
+  }
+  
+  function renderDuration(duration) {
+    var durationClass;
+        if (duration > 0 && duration < 500) {
+            durationClass = "duration-circle green-circle";
+        } else if (duration >= 500 && duration < 1000) {
+            durationClass = "duration-circle amber-circle";
+        } else if (duration >= 1000){
+            durationClass = "duration-circle red-circle";
+        }
+
+        var formattedDuration = duration == null || duration == 0 ? 'n/a' : parseFloat(parseFloat(duration).toFixed(3)) + 'ms';
+
+        // Create the duration span with the circle and the duration value
+        return $("<span>").addClass("duration").append(
+            $("<span>").addClass(durationClass),
+            `${formattedDuration}`
+        );
+  }
+
+  </script>

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

@@ -0,0 +1,77 @@
+<script>
+$(document).ready(function() {
+    fetchDataAndUpdateStorage(function(updatedData) {
+      renderTable(updatedData);
+    });
+
+    setInterval(function() {
+      var autoUpdate = $('#autoUpdate').is(':checked');
+      if (autoUpdate) {
+        fetchDataAndUpdateStorage(function(updatedData) {
+            renderTable(updatedData);
+        });
+      }
+    }, 5000);
+    
+    addSortingClick();
+  });
+  
+  function renderTable(data, target = null) {
+    data = aggregateRequests(data);
+    data = sortDataBy(current_sort_field, data);
+  
+    // Get a reference to the table body
+    var tableBody = target || $('table tbody');
+  
+    // Clear the table body
+    tableBody.empty();
+  
+    // Create new table rows for each data item
+    data.forEach(function(item) {
+      var row = $('<tr>');
+
+      $('<td>').text(item['controller']).appendTo(row);
+      $('<td>').text(item['path']).appendTo(row);
+      $('<td>').text(item['count']).appendTo(row);
+      $('<td>').append(renderDuration(item['averageDuration'])).appendTo(row);
+      $('<td>').append(renderDuration(item['averageDbRuntime'])).appendTo(row);
+      $('<td>').append(renderDuration(item['averageViewRuntime'])).appendTo(row);
+      $('<td>').append(renderDuration(item['slowestDuration'])).appendTo(row);
+      $('<td>').append(renderDuration(item['slowestDbRuntime'])).appendTo(row);
+      $('<td>').append(renderDuration(item['slowestViewRuntime'])).appendTo(row);
+      // // Action column
+      // var actionTd = $('<td>');
+      // var actionButton = $('<button>').text('Details');
+      // actionButton.on('click', function() {
+      //   // Replace 'your-details-url' with the actual URL where the details are to be fetched.
+      //   // It's assumed the ID is required as a URL parameter, modify as per your requirements.
+      //   window.location.href = '<%= request_details_path %>?request_id=' + item['request_id'];
+      // });
+      // actionButton.appendTo(actionTd);
+      // actionTd.appendTo(row);
+
+      // Append the row to the table body
+      tableBody.append(row);
+    });
+  }
+  
+  function renderDuration(duration) {
+    var durationClass;
+        if (duration > 0 && duration < 500) {
+            durationClass = "duration-circle green-circle";
+        } else if (duration >= 500 && duration < 1000) {
+            durationClass = "duration-circle amber-circle";
+        } else if (duration >= 1000){
+            durationClass = "duration-circle red-circle";
+        }
+
+        var formattedDuration = duration == null || duration == 0 ? 'n/a' : parseFloat(parseFloat(duration).toFixed(3)) + 'ms';
+
+        // Create the duration span with the circle and the duration value
+        return $("<span>").addClass("duration").append(
+            $("<span>").addClass(durationClass),
+            `${formattedDuration}`
+        );
+  }
+
+  </script>

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

@@ -0,0 +1,204 @@
+<script>
+var request_id = '<%= @request_id %>';
+var current_index = 0;
+
+$(document).ready(function() {
+    prepPage();
+    loadLocalData(function(){
+        var request = loadRequest(request_id);
+        tagQueriesWithNPlusOne(request);
+        const preparedData = flattenData(request.stack);
+
+        $("#details_div").empty()
+        if(request.exception_message) {
+            $("#details_div").append(errorDetails(request));
+        }
+        $("#details_div").append(renderDetails(preparedData));
+
+        // if(request.has_n_plus_one){
+        //     // Find all div elements with 'possible_n_plus_one' class
+        //     $('div.possible_n_plus_one').each(function() {
+        //         // Traverse up the parent hierarchy
+        //         $(this).parents().each(function() {
+        //             // If the parent has the 'has_children' class, trigger a click event
+        //                 $(this).show();
+        //         });
+        //     });
+        // }
+    });
+});
+
+function prepPage(){
+    $("#details_div").text("Loading Request Now...");
+    $("#options").empty();
+
+    // Create a new checkbox
+    var checkbox = $('<input />', {
+        type: 'checkbox',
+        id: 'chkShowMinorCalls',
+        value: 'showMinorCalls'
+    }).on('change', function() {
+        // Show/hide '.minor_call' elements based on checkbox status
+        if(this.checked) {
+            $('.minor_call').show();
+        } else {
+            $('.minor_call').hide();
+        }
+    });
+
+    // Create a label for the checkbox
+    var label = $('<label />', {
+        'for': 'chkShowMinorCalls',
+        text: 'Show Calls with less than 0.1ms duration',
+    });
+
+    // Append the checkbox and label to the div
+    $("#options").append(checkbox).append(label);
+}
+
+function flattenData(stackData, level = 0) {
+    var result = [];
+  
+    stackData.forEach(function(stackItem, level) {
+        var start = new Date(stackItem.start_time);
+        var end = new Date(stackItem.end_time);
+        
+        if(stackItem.sql) {
+            result.push({
+                start: start, 
+                duration: stackItem.duration, 
+                sql: stackItem.sql, 
+                cached: stackItem.cached, 
+                record_count: stackItem.record_count, 
+                triggering_line: stackItem.triggering_line, 
+                params: stackItem.params,
+                level: level,
+                possibleNPlusOne: stackItem.possibleNPlusOne
+            });
+        } else {
+            var children = [];
+            if (stackItem.sql_events && stackItem.sql_events.length > 0) {
+                children = children.concat(flattenData(stackItem.sql_events, level+1));
+            }
+
+            if (stackItem.children && stackItem.children.length > 0) {
+                children = children.concat(flattenData(stackItem.children, level+1));
+            }
+            result.push({
+                start: start, 
+                duration: stackItem.duration, 
+                method: stackItem.method, 
+                method_line: stackItem.method_line, 
+                triggering_line: stackItem.triggering_line, 
+                children: children,
+                level
+            });
+        }
+    });
+
+    // sort by start_time
+    result.sort((a, b) => a.start - b.start);
+
+    return result;
+}
+function getDurationClass(duration) {
+    if (duration < 500) {
+        return "green-circle";
+    } else if (duration >= 500 && duration < 1000) {
+        return "amber-circle";
+    } else {
+        return "red-circle";
+    }
+}
+
+function getFormattedDate(date) {
+    return `${date.toLocaleDateString('en-GB')} ${date.toLocaleTimeString('en-GB', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })}`;
+}
+
+function renderDetails(stackData, level = 0) {
+    return stackData.map((item, index) => {
+        var itemDiv = $("<div>").addClass('bounding-box');
+
+        var formattedDate = getFormattedDate(item.start);
+        var formattedDuration = parseFloat(parseFloat(item.duration).toFixed(3)) + 'ms';
+        var durationClass = getDurationClass(item.duration);
+
+        var durationSpan = $("<span>").addClass("duration").append(
+            $("<span>").addClass("duration-circle " + durationClass),
+            `${formattedDuration}`
+        );
+
+        if (item.method) { // If it's a method.
+            if(item.duration < 0.1 && level > 0){
+                itemDiv.addClass('minor_call');
+            }
+            itemDiv.addClass("method")
+                   .append($('<span>').addClass('date').text(formattedDate), durationSpan,
+                            $('<span>').addClass('description').text(item.method),
+                            $('<span>').addClass('method_line').text(item.method_line),
+                            $('<span>').addClass('trigger_line').text(item.triggering_line));
+            
+            if(item.children && item.children.length > 0) {
+                itemDiv.prepend($("<span>").addClass('has_children').text("+"))
+                       .append(
+                          $("<div>").addClass("children")
+                          .append(renderDetails(item.children, level +1))
+                          .hide()  // Hide the children initially
+                        );
+            }
+        } else { // If it's an SQL event.
+            itemDiv.addClass("sql-event")
+                   .append($('<span>').addClass('date').text(formattedDate), durationSpan,
+                            $('<span>').addClass('record_count').text(item.record_count + ' Results'),
+                            $('<span>').addClass('cached').text(item.cached ? 'Cached' : ''),
+                            $('<span>').addClass('n_plus_one').text(item.possibleNPlusOne ? 'Possible N+1' : ''),
+                            $('<span>').addClass('trigger_line').text(item.triggering_line),
+                            $('<span>').addClass('sql').text(item.sql));
+            
+            if(item.possibleNPlusOne) {
+                itemDiv.addClass('possible_n_plus_one');
+            }
+            if(item.params && item.params.length > 0) {
+                itemDiv.append($('<span>').addClass('params').text('Params: ' + item.params));
+            }
+        }
+        return itemDiv;
+    });
+}
+
+$(document).on('click', '.bounding-box', function(e) {
+    e.stopPropagation();
+    var toggleElement = $(this).find(".has_children:first");
+    if (toggleElement.length > 0) {
+        if (toggleElement.text() === "+") {
+            toggleElement.text("-");
+        } else {
+            toggleElement.text("+");
+        }
+        $(this).find(".children:first").slideToggle();
+    }
+});
+
+
+function errorDetails(request) {
+    // Create a container for the error details
+    var errorContainer = $('<div>').addClass('error_status');
+
+    // Create and append elements for the exception class and message
+    var exceptionClassElement = $('<h2>').text(request.exception_class).css('margin', '0');
+    var exceptionMessageElement = $('<p>').text(request.exception_message);
+    errorContainer.append(exceptionClassElement, exceptionMessageElement);
+
+    // Create and append an element for the backtrace
+    var backtraceElement = $('<ol>');
+    request.exception_backtrace.forEach(function(line) {
+        var lineElement = $('<li>').text(line);
+        backtraceElement.append(lineElement);
+    });
+    errorContainer.append(backtraceElement);
+
+    // Append the error details container to the body of the page
+    return errorContainer;
+}
+
+</script>

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

@@ -0,0 +1,74 @@
+<script>
+$(document).ready(function() {
+    fetchDataAndUpdateStorage(function(updatedData) {
+      renderTable(updatedData);
+    });
+
+    setInterval(function() {
+      var autoUpdate = $('#autoUpdate').is(':checked');
+      if (autoUpdate) {
+        fetchDataAndUpdateStorage(function(updatedData) {
+        renderTable(updatedData);
+        });
+      }
+    }, 5000);
+    
+    addSortingClick();
+  });
+  
+  function renderTable(data, target = null) {
+    data = data.filter(item => item.duration > 1500);
+    data = sortDataBy(current_sort_field, data);
+  
+    // Get a reference to the table body
+    var tableBody = target || $('table tbody');
+  
+    // Clear the table body
+    tableBody.empty();
+  
+    // Create new table rows for each data item
+    data.forEach(function(item) {
+      var row = $('<tr>');
+  
+      $('<td>').text(new Date(item['start_time']).toLocaleString()).appendTo(row);
+      $('<td>').text(item['controller'] + '#' + item['action']).appendTo(row);
+      $('<td>').text(item['status']).appendTo(row);
+      $('<td>').append(renderDuration(item['duration'])).appendTo(row);
+      $('<td>').append(renderDuration(item['db_runtime'])).appendTo(row);
+      $('<td>').append(renderDuration(item['view_runtime'])).appendTo(row);
+      // Action column
+      var actionTd = $('<td>');
+      var actionButton = $('<button>').text('Details');
+      actionButton.on('click', function() {
+        // Replace 'your-details-url' with the actual URL where the details are to be fetched.
+        // It's assumed the ID is required as a URL parameter, modify as per your requirements.
+        window.location.href = '<%= request_details_path %>?request_id=' + item['request_id'];
+      });
+      actionButton.appendTo(actionTd);
+      actionTd.appendTo(row);
+
+      // Append the row to the table body
+      tableBody.append(row);
+    });
+  }
+  
+  function renderDuration(duration) {
+    var durationClass;
+        if (duration > 0 && duration < 500) {
+            durationClass = "duration-circle green-circle";
+        } else if (duration >= 500 && duration < 1000) {
+            durationClass = "duration-circle amber-circle";
+        } else if (duration >= 1000){
+            durationClass = "duration-circle red-circle";
+        }
+
+        var formattedDuration = duration == null || duration == 0 ? 'n/a' : parseFloat(parseFloat(duration).toFixed(3)) + 'ms';
+
+        // Create the duration span with the circle and the duration value
+        return $("<span>").addClass("duration").append(
+            $("<span>").addClass(durationClass),
+            `${formattedDuration}`
+        );
+  }
+
+  </script>

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

@@ -0,0 +1,21 @@
+<%= render 'builder_apm/shared/header' %>
+
+<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="real_duration_time">Duration (ms)</th>
+            <th class="sortable" data-field="calc_db_runtime">DB Runtime (ms)</th>
+            <th class="sortable" data-field="view_runtime">View Runtime (ms)</th>
+        </tr>
+    </thead>
+    <tbody>
+        <!-- Table content will be populated here by JavaScript -->
+    </tbody>
+</table>
+
+<%= render 'builder_apm/js/n_plus_one' %>
+
+<%= render 'builder_apm/shared/footer' %>

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

@@ -0,0 +1,21 @@
+<%= render 'builder_apm/shared/header' %>
+
+<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="real_duration_time">Duration (ms)</th>
+        <th class="sortable" data-field="calc_db_runtime">DB Runtime (ms)</th>
+        <th class="sortable" data-field="view_runtime">View Runtime (ms)</th>
+        </tr>
+    </thead>
+    <tbody>
+        <!-- Table content will be populated here by JavaScript -->
+    </tbody>
+</table>
+
+<%= render 'builder_apm/js/recent_requests' %>
+
+<%= render 'builder_apm/shared/footer' %>

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

@@ -0,0 +1,24 @@
+<%= render 'builder_apm/shared/header' %>
+
+<table>
+    <thead>
+        <tr>
+        <th class="sortable" data-field="controller">Controller#Action</th>
+        <th class="sortable" data-field="path">Url</th>
+        <th class="sortable" data-field="count">Requests</th>
+        <th class="sortable" data-field="averageDuration">Avg Duration (ms)</th>
+        <th class="sortable" data-field="averageDbRuntime">Avg DB Runtime (ms)</th>
+        <th class="sortable" data-field="averageViewRuntime">Avg View Runtime (ms)</th>
+        <th class="sortable" data-field="slowestDuration">Slowest Duration (ms)</th>
+        <th class="sortable" data-field="slowestDbRuntime">Slowest DB Runtime (ms)</th>
+        <th class="sortable" data-field="slowestViewRuntime">Slowest View Runtime (ms)</th>
+        </tr>
+    </thead>
+    <tbody>
+        <!-- Table content will be populated here by JavaScript -->
+    </tbody>
+</table>
+
+<%= render 'builder_apm/js/request_analysis' %>
+
+<%= render 'builder_apm/shared/footer' %>

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

@@ -0,0 +1,7 @@
+<%= render 'builder_apm/shared/header' %>
+  
+<div id="details_div"></div>
+
+<%= render 'builder_apm/js/request_details' %>
+
+<%= render 'builder_apm/shared/footer' %>

data/app/views/builder_apm/shared/_footer.html.erb

@@ -0,0 +1,3 @@
+
+</body>
+</html>

data/app/views/builder_apm/shared/_header.html.erb

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>BuilderApm Dashboard</title>
+  <%= render 'builder_apm/css/main' %>
+  <%= render 'builder_apm/css/dark' %>
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <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/data_fetcher' %>
+  <script>
+$(document).ready(function() {
+
+    // Check for saved 'darkMode' in localStorage
+    if (localStorage.getItem('darkMode') === 'true') {
+        $('body').addClass('dark');
+    }
+
+    $('#clearData').on('click', function() {
+      localStorage.removeItem('builder_apm_requests');
+      localStorage.removeItem('builder_apm_cursor');
+      alert('Local Data Cleared');
+    });
+    $('#darkModeToggle').on('click', function() {
+        $('body').toggleClass('dark');
+
+        // Save the current mode in localStorage
+        if ($('body').hasClass('dark')) {
+            localStorage.setItem('darkMode', 'true');
+        } else {
+            localStorage.setItem('darkMode', 'false');
+        }
+    });
+    $('body').show();
+});
+  </script>
+</head>
+<body>
+  <h1 id="header">BuilderApm Dashboard</h1>
+  <nav id="navbar">
+    <ul>
+      <li><%= link_to 'Dashboard', dashboard_path, class: ("active" if current_page?(dashboard_path)) %></li>
+      <li><%= link_to 'Request Analysis', request_analysis_path, class: ("active" if current_page?(request_analysis_path)) %></li>
+      <li><%= link_to '500 Errors', errors_500_path, class: ("active" if current_page?(errors_500_path)) %></li>
+      <li><%= link_to 'Recent Requests', recent_requests_path, class: ("active" if current_page?(recent_requests_path)) %></li>
+      <li><%= link_to 'Slow Requests', slow_requests_path, class: ("active" if current_page?(slow_requests_path)) %></li>
+      <li><%= link_to 'N+1', n_plus_one_path, class: ("active" if current_page?(n_plus_one_path)) %></li>
+      <li id="dark-mode-toggle"><button id="darkModeToggle" class="nav-button">Toggle Dark Mode</button></li>
+      <li id="dark-mode-toggle"><button id="clearData" class="nav-button">Clear Data</button></li>
+    </ul>
+  </nav>
+  <div id="options">
+    <input type="checkbox" id="autoUpdate" name="autoUpdate">
+    <label for="autoUpdate">Auto-Update</label>
+  </div>