solid_apm 0.6.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d90f515a42a990a08a88c44bb8146dfe87176c81ad8584bcf7e4a29083316c2e
-  data.tar.gz: a92fd226a1a96882700cea025afa4ba1d8d2356cce2dd621701149e612e9fe2c
+  metadata.gz: 2980cc185b4e779e37f5a2b1ef323f3bddc9453076725d992a3d7641e54ae370
+  data.tar.gz: 9ef8518d90d7351f17001d428c79dba5c7ebecd890c642f47ae2fd1e744f5591
 SHA512:
-  metadata.gz: 3d0af12fc21edcb8117da1f466b440c0241ccb6995f174abf50e09e77e7fa8a32a36b1c0aa2559d55af6238dce318101bd42e38f06536f28d75499c8bdbc0a11
-  data.tar.gz: 5b0829667356213cda1c572c8386f902b2054143bf66b2252f2e047d9590345acaea13c4902b7dee3c04b42e6dbe73f2449d7a30197afdf5a3989628d3d1ef8b
+  metadata.gz: b9af1a90d9603e05b5436bdcb420c31dfe7156d4768f261772a6e602f160385a6c7af60e8b08bb2050df4151a27703858c184bf271bfeac69d05de5b6efa344f
+  data.tar.gz: 48fb657be11a65ae888235a88ac8794a1ecdf8ea4863d5c7cdb1c3e292cabb04917b1b109d1c157099550a53931d1272fa0362ffbddb433fb8e4f839ce8cf93c

data/Rakefile

@@ -1,6 +1,6 @@
 require "bundler/setup"
 
-APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+APP_RAKEFILE = File.expand_path("spec/dummy/Rakefile", __dir__)
 load "rails/tasks/engine.rake"
 
 load "rails/tasks/statistics.rake"

data/app/assets/javascripts/solid_apm/application.js

@@ -8,4 +8,3 @@ window.Stimulus = Application.start();
 
 // require "./controllers/spans-chart_controller"
 // import "./controllers/spans-chart_controller.js"
-// import "./controllers/transaction-chart_controller"

data/app/controllers/solid_apm/transactions_controller.rb

@@ -3,22 +3,41 @@
 module SolidApm
   class TransactionsController < ApplicationController
     TransactionAggregation = Struct.new(:name, :tmp, :latency, :percentile_95, :impact)
+    private_constant :TransactionAggregation
 
     def index
-      @aggregated_transactions = Transaction.where(created_at: from_to_range).group_by(&:name)
-      @aggregated_transactions.transform_values! do |transactions|
-        latency = transactions.map(&:duration).sum / transactions.size
-        tmp = transactions.size.to_f / ((from_to_range.end - from_to_range.begin) / 60).to_i
+      if from_to_range.end < from_to_range.begin
+        flash[:error] = 'Invalid time range'
+        redirect_to transactions_path
+        return
+      end
+
+      @transactions_scope = Transaction.where(timestamp: from_to_range)
+      if params[:name].present?
+        @transactions_scope = @transactions_scope.where(name: params[:name])
+      end
+      transaction_names = @transactions_scope.distinct.pluck(:name)
+      latency_95p = @transactions_scope.group(:name).percentile(:duration, 0.95)
+      latency_median = @transactions_scope.group(:name).median(:duration)
+      tmp_dict = @transactions_scope.group(:name).group_by_minute(:timestamp, series: false).count.each_with_object({}) do |(k, v), h|
+        current_value = h[k.first] ||= 0
+        h[k.first] = v if v > current_value
+      end
+
+      @aggregated_transactions = transaction_names.each_with_object({}) do |transaction_name, h|
+        latency = latency_median[transaction_name]
+        tmp = tmp_dict[transaction_name]
         impact = latency * tmp
-        percentile_95 = transactions[transactions.size * 0.95].duration
-        TransactionAggregation.new(
-          transactions.first.name,
+        h[transaction_name] = TransactionAggregation.new(
+          transaction_name,
           tmp,
           latency,
-          percentile_95,
+          latency_95p[transaction_name],
           impact
         )
       end
+
+      return if @aggregated_transactions.empty?
       # Find the maximum and minimum impact values
       max_impact = @aggregated_transactions.values.max_by(&:impact).impact
       min_impact = @aggregated_transactions.values.min_by(&:impact).impact
@@ -30,32 +49,15 @@ module SolidApm
         aggregation.impact = normalized_impact.to_i || 0
       end
       @aggregated_transactions = @aggregated_transactions.sort_by { |_, v| -v.impact }.to_h
-    end
 
-    def show_by_name
-      @transactions = Transaction.where(name: params[:name]).order(timestamp: :desc).limit(20)
-    end
-
-    def show
-      @transaction = Transaction.find(params[:id])
+      scope = @transactions_scope.group_by_second(:timestamp, n: n_intervals_seconds(from_to_range))
+      @throughput_data = scope.count
+      @latency_data = scope.median(:duration).transform_values(&:to_i)
     end
 
     def spans
-      @transaction = Transaction.find(params[:id])
-      @spans = @transaction.spans
-      render json: @spans
-    end
-
-    def count_time_aggregations
-      scope = Transaction.all.order(timestamp: :desc)
-                 .where(created_at: from_to_range)
-
-
-      if params[:name].present?
-        scope = scope.where(name: params[:name])
-      end
-
-      render json: aggregate(scope.select(:id, :created_at).find_each, from_to_range, intervals_count: 20).transform_values!(&:count)
+      @transaction = Transaction.find_by!(uuid: params[:uuid])
+      @transaction.spans.to_a
     end
 
     private
@@ -64,10 +66,19 @@ module SolidApm
       params[:from_value] ||= 60
       params[:from_unit] ||= 'minutes'
       from = params[:from_value].to_i.public_send(params[:from_unit].to_sym).ago
-      to = Time.current
+      params[:to_value] ||= 1
+      params[:to_unit] ||= 'seconds'
+      to = params[:to_value].to_i.public_send(params[:to_unit].to_sym).ago
       (from..to)
     end
 
+    def n_intervals_seconds(range, intervals_count: 30)
+      start_time = range.begin
+      end_time = range.end
+      time_range_in_seconds = (end_time - start_time).to_i
+      (time_range_in_seconds / intervals_count.to_f).round
+    end
+
     def aggregate(items, range, intervals_count: 20)
       start_time = range.begin
       end_time = range.end

data/app/helpers/solid_apm/application_helper.rb

@@ -1,4 +1,33 @@
 module SolidApm
   module ApplicationHelper
+    def area_chart_options
+      {
+        module: true,
+        chart: {
+          type: 'area', height: '200', background: '0', foreColor: '#ffffff55', zoom: {
+            enabled: false,
+          }, toolbar: {
+            show: false,
+          }
+        },
+        xaxis: {
+        type: 'datetime',
+        tooltip: {
+          enabled: false
+
+        }
+      },
+        stroke: {
+        curve: 'smooth'
+      }, theme: {
+        mode: 'dark',
+      }, grid: {
+        show: true, borderColor: '#ffffff55',
+      }, dataLabels: {
+        enabled: false
+      },
+       tooltip: {x: {formatter: {function: {args: "val", body: "return new Date(val).toLocaleString()"}} }}
+      }
+    end
   end
 end

data/app/models/solid_apm/span_subscriber/action_dispatch.rb

@@ -8,13 +8,14 @@ module SolidApm
         super do |name, start, finish, id, payload|
           transaction = SpanSubscriber::Base.transaction
           transaction.name = "#{payload[:request].controller_class}##{payload[:request].path_parameters[:action]}"
+          transaction.timestamp = start
           transaction.end_time = finish
-          transaction.duration = ((transaction.end_time.to_f - transaction.timestamp.to_f) * 1000).round(6)
+          transaction.duration = ((finish.to_f - start.to_f) * 1000).round(6)
           transaction.metadata = {
             params: payload[:request].params.except(:controller, :action),
             context: SpanSubscriber::Base.context
           }
-          SpanSubscriber::Base.context = nil
+          SpanSubscriber::Base.context = {}
         end
       end
 

data/app/models/solid_apm/span_subscriber/active_record_sql.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 module SolidApm
-module SpanSubscriber
-  class ActiveRecordSql < Base
-    PATTERN = "sql.active_record"
+  module SpanSubscriber
+    class ActiveRecordSql < Base
+      PATTERN = "sql.active_record"
 
-    def summary(payload)
-      payload[:sql]
+      def summary(payload)
+        payload[:sql]
+      end
     end
   end
 end
-end

data/app/views/layouts/solid_apm/application.html.erb

@@ -5,18 +5,23 @@
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
 
-  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@4.4.0"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.1/css/bulma.min.css">
   <%= stylesheet_link_tag    "solid_apm/application", media: "all" %>
   <%= javascript_include_tag "solid_apm/application", "data-turoblinks-track": "reload", type: "module" %>
-  <%= javascript_include_tag "solid_apm/controllers/transaction-chart_controller", "data-turoblinks-track": "reload", type: "module" %>
-  <%= javascript_include_tag "solid_apm/controllers/spans-chart_controller", "data-turoblinks-track": "reload", type: "module" %>
 </head>
 
-<body style="overflow: scroll">
+<body>
   <section class="section">
     <%= yield %>
   </section>
+
+  <% if flash[:error] %>
+    <div class="notification is-danger mb-1" style="width: 20em; position: absolute; bottom: 1em; right: 1em;">
+      <button class="delete"></button>
+      <%= flash[:error] %>
+    </div>
+  <% end %>
 </body>
 
 </html>

data/app/views/solid_apm/application/_time_range_form.html.erb

@@ -0,0 +1,34 @@
+<%= form_with path: transactions_path, method: :get do |f| %>
+  <div class="is-flex is-flex-direction-row is-justify-content-center is-align-items-center" style="gap: 1em">
+    <%= f.number_field :from_value, value: params[:from_value] || 60, min: 1, class: 'input', style: 'width: 6em' %>
+    <div class="select">
+      <%= f.select :from_unit, {
+        "minutes" => "minutes",
+        "hours" => "hours",
+        "days" => "days",
+        "weeks" => "weeks",
+        "months" => "months",
+        "years" => "years"
+      }, {selected: params[:from_unit] || 'minutes' } %>
+    </div>
+    <b>→</b>
+    <%= f.number_field :to_value, value: params[:to_value] || 1, min: 1, class: 'input', style: 'width: 6em' %>
+    <div class="select">
+      <%= f.select :to_unit, {
+        "seconds" => "seconds",
+        "minutes" => "minutes",
+        "hours" => "hours",
+        "days" => "days",
+        "weeks" => "weeks",
+        "months" => "months",
+        "years" => "years"
+      }, {selected: params[:to_unit] || 'seconds' } %>
+    </div>
+
+    <% if params[:name] %>
+      <%= f.hidden_field :name, value: params[:name] %>
+    <% end %>
+
+    <%= f.submit 'Apply', class: 'button' %>
+  </div>
+<% end %>

data/app/views/solid_apm/transactions/_charts.html.erb

@@ -0,0 +1,10 @@
+<div class="columns pt-2" style="height: 16em">
+  <div class="column">
+    <h2 class="ml-4">Throughput</h2>
+    <%= area_chart({ name: 'tmp', data: @throughput_data }, area_chart_options.merge(colors: ['#43BCCD'])) %>
+  </div>
+  <div class="column">
+    <h2 class="ml-4">Latency</h2>
+    <%= area_chart({ name: 'ms', data: @latency_data }, area_chart_options.merge(colors: ['#13d8aa'])) %>
+  </div>
+</div>

data/app/views/solid_apm/transactions/index.html.erb

@@ -1,26 +1,15 @@
-<h1 class="title">Transactions</h1>
-
-<%= form_with path: transactions_path, method: :get do |f| %>
-  <div class="is-flex is-flex-direction-row is-justify-content-center is-align-items-center" style="gap: 1em">
-    <%= f.label 'From' %>
-    <%= f.number_field :from_value, value: params[:from_value] || 60, min: 1, class: 'input', style: 'width: 6em' %>
-    <div class="select">
-      <%= f.select :from_unit, {
-        "minutes" => "minutes",
-        "hours" => "hours",
-        "days" => "days",
-        "weeks" => "weeks",
-        "months" => "months",
-        "years" => "years"
-      }, {selected: params[:from_unit] || 'minutes' } %>
-    </div>
-    <span class="has-text-white-ter">ago</span>
-    <b>→</b>
-    <span class="has-text-white-ter">now</span>
-    <%= f.submit 'Apply', class: 'button' %>
-  </div>
+<% if params[:name] %>
+  <h1 class="title"><%= link_to '⬅ ', transactions_path(
+    from_value: params[:from_value],
+    from_unit: params[:from_unit],
+    to_value: params[:to_value],
+    to_unit: params[:to_unit]) %><%= params[:name] %></h1>
+<% else %>
+  <h1 class="title">Solid APM</h1>
 <% end %>
-<div data-controller="transaction-chart"></div>
+
+<%= render 'time_range_form' %>
+<%= render 'charts' %>
 
 <table class="table is-fullwidth">
   <thead>
@@ -35,7 +24,12 @@
 
   <% @aggregated_transactions.each do |name, aggregation| %>
     <tr>
-      <td><%= link_to name, transaction_by_name_path(name) %></td>
+      <td><%= link_to name, transactions_path(
+        from_value: params[:from_value],
+        from_unit: params[:from_unit],
+        to_value: params[:to_value],
+        to_unit: params[:to_unit],
+        name: name) %>
       <td><%= aggregation.latency.round(2) %> ms</td>
       <td><%= aggregation.tmp.round(2) %></td>
       <td><%= aggregation.percentile_95.round(2) %> ms</td>
@@ -45,3 +39,28 @@
     </tr>
   <% end %>
 </table>
+
+<% if params[:name] %>
+  <table class="table is-fullwidth is-hoverable">
+    <thead>
+      <tr>
+        <th scope="col">Name</th>
+        <th scope="col">Timestamp</th>
+        <th scope="col">Type</th>
+        <th scope="col">Duration</th>
+        <th scope="col">Metadata</th>
+      </tr>
+    </thead>
+    <tbody>
+    <% @transactions_scope.order(timestamp: :desc).each do |transaction| %>
+      <tr>
+        <td><%= link_to transaction.name, transaction_spans_path(uuid: transaction.uuid) %></td>
+        <td><%= transaction.timestamp %></td>
+        <td><%= transaction.type %></td>
+        <td><%= transaction.duration.round(2) %></td>
+        <td><%= transaction.metadata %></td>
+      </tr>
+    <% end %>
+    </tbody>
+  </table>
+<% end %>

data/app/views/solid_apm/transactions/spans.html.erb

@@ -0,0 +1,34 @@
+<h1 class="title"><%= link_to '⬅ ', request.referer %><%= @transaction.name %></h1>
+<h2 class="title is-6"><span class="has-text-grey">Trace ID:</span> <%= @transaction.uuid %></h2>
+<h2 class="title is-6"><span class="has-text-grey">Timestamp:</span> <%= @transaction.timestamp %></h2>
+<h2 class="title is-6"><span class="has-text-grey">Duration:</span> <%= @transaction.duration.round(2) %> ms</h2>
+<h2 class="title is-6"><span class="has-text-grey">Metadata:</span> <%= @transaction.metadata %></h2>
+
+<h2 class="title is-4 mt-6">Spans</h2>
+
+<% min_start_time = @transaction.spans.minimum(:timestamp) %>
+<% max_end_time = @transaction.spans.maximum(:end_time) %>
+<% total_duration = max_end_time - min_start_time %>
+
+<div class="is-fullwidth">
+  <% @transaction.spans.each do |span| %>
+    <% left_percent = ((span.timestamp - min_start_time).to_f / total_duration * 100) %>
+    <% width_percent = [((span.end_time - span.timestamp).to_f / total_duration * 100), 0.1].max %>
+    <% right_percent = (100 - left_percent - width_percent) %>
+
+    <div style="display: flex; height: 1.5em;">
+      <div style="flex: <%= left_percent %>"></div>
+      <div style="flex: <%= width_percent %>; display: flex; align-items: center; justify-content: center; border-radius: 5px" class="has-background-primary-15">
+      </div>
+      <div style="flex: <%= right_percent %>;"></div>
+    </div>
+    <div style="margin-left: <%= left_percent %>%" class="mt-1 mb-2">
+      <p>
+        <span class="has-text-grey-lighter	"><%= span.name %></span><span class="has-text-grey pl-2"><%= span.duration.round(2) %>ms</span>
+      </p>
+      <p>
+        <%= span.summary %>
+      </p>
+    </div>
+  <% end %>
+  </div>

data/config/routes.rb

@@ -2,10 +2,5 @@ SolidApm::Engine.routes.draw do
   root 'transactions#index'
 
   get 'transactions', to: 'transactions#index'
-  get 'transactions/count_time_aggregations',
-      default: { format: 'json' }
-
-  get 'transactions/:id', to: 'transactions#show', as: 'transaction', constraints: { id: /\d+/ }
-  get 'transactions/:name', to: 'transactions#show_by_name', as: 'transaction_by_name'
-  get 'transactions/:id/spans', to: 'transactions#spans', as: 'transaction_spans'
+  get 'transactions/:uuid/spans', to: 'transactions#spans', as: 'transaction_spans'
 end

data/lib/solid_apm/middleware.rb

@@ -43,7 +43,6 @@ module SolidApm
       now = Time.zone.now
       SpanSubscriber::Base.transaction = Transaction.new(
         uuid: SecureRandom.uuid,
-        timestamp: now,
         unix_minute: (now.to_f / 60).to_i,
         type: 'request'
       )

data/lib/solid_apm/version.rb

@@ -1,3 +1,3 @@
 module SolidApm
-  VERSION = "0.6.0"
+  VERSION = "0.7.0"
 end

data/lib/solid_apm.rb

@@ -1,3 +1,8 @@
+require 'English' # For apexcharts Regex
+require 'groupdate'
+require 'active_median'
+require 'apexcharts'
+
 require "solid_apm/version"
 require "solid_apm/engine"
 

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: solid_apm
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.7.0
 platform: ruby
 authors:
 - Jean-Francis Bastien
 bindir: bin
 cert_chain: []
-date: 2025-01-17 00:00:00.000000000 Z
+date: 2025-02-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -65,6 +65,48 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '7.1'
+- !ruby/object:Gem::Dependency
+  name: apexcharts
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: groupdate
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: active_median
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: SolidApm allow you to monitor your application without any external service.
 email:
 - bhacaz@gmail.com
@@ -77,8 +119,6 @@ files:
 - Rakefile
 - app/assets/config/solid_apm_manifest.js
 - app/assets/javascripts/solid_apm/application.js
-- app/assets/javascripts/solid_apm/controllers/spans-chart_controller.js
-- app/assets/javascripts/solid_apm/controllers/transaction-chart_controller.js
 - app/assets/stylesheets/solid_apm/application.css
 - app/controllers/solid_apm/application_controller.rb
 - app/controllers/solid_apm/transactions_controller.rb
@@ -95,10 +135,11 @@ files:
 - app/models/solid_apm/transaction.rb
 - app/views/javascripts/_javascripts.html.erb
 - app/views/layouts/solid_apm/application.html.erb
+- app/views/solid_apm/application/_time_range_form.html.erb
 - app/views/solid_apm/spans/index.html.erb
+- app/views/solid_apm/transactions/_charts.html.erb
 - app/views/solid_apm/transactions/index.html.erb
-- app/views/solid_apm/transactions/show.html.erb
-- app/views/solid_apm/transactions/show_by_name.html.erb
+- app/views/solid_apm/transactions/spans.html.erb
 - config/routes.rb
 - db/migrate/20240608015633_create_solid_apm_transactions.rb
 - db/migrate/20240608021940_create_solid_apm_spans.rb

data/app/assets/javascripts/solid_apm/controllers/spans-chart_controller.js

@@ -1,97 +0,0 @@
-import {
-  Controller,
-} from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
-
-// Connects to data-controller="spans-charts"
-window.Stimulus.register('spans-chart',
-  class extends Controller {
-  static values = { id: String }
-
-  connect() {
-    console.log("Connected")
-    const options = {
-      series: [
-        {
-          data: []
-        }
-      ],
-      chart: {
-        type: "rangeBar",
-        height: "250em",
-      },
-      plotOptions: {
-        bar: {
-          horizontal: true
-        }
-      },
-      xaxis: {
-        type: "datetime",
-        labels: {
-          show: false
-        }
-      },
-      tooltip: {
-        custom: function ({y1, y2,dataPointIndex, seriesIndex, w}) {
-        // custom: function (opts) {
-        //   console.log(opts)
-          // console.log(value)
-          return (
-            '<div class="apexcharts-tooltip-title has-text-black" style="max-width: 40em; text-wrap: balance;">' +
-            w.globals.initialSeries[seriesIndex].data[dataPointIndex].duration + "ms" +
-            "<br>" +
-            w.globals.initialSeries[seriesIndex].data[dataPointIndex].name +
-            "<br>" +
-            w.globals.initialSeries[seriesIndex].data[dataPointIndex].summary +
-            '</div>'
-          )
-        }
-      },
-      yaxis: {
-        labels: {
-          formatter: function (value, opts) {
-            if (opts === undefined) {
-              return value[1] - value[0] + "ms"
-            }
-            if (opts.dataPointIndex >= 0) {
-              return opts.w.globals.initialSeries[opts.seriesIndex].data[opts.dataPointIndex].name
-            }
-            return value
-          }
-        }
-      },
-    }
-
-    fetch(this.idValue + "/spans.json")
-      .then(response => response.json())
-      .then(data => {
-        options.series[0].data = data.map(d => {
-          let startTime = new Date(d.timestamp).getTime()
-          let endTime = new Date(d.end_time).getTime()
-          if (endTime - startTime < 1) {
-            endTime = startTime + 1
-          }
-          return {
-            x: d.uuid,
-            y: [startTime, endTime],
-            name: d.name,
-            summary: d.summary || d.name,
-            duration: this.round(d.duration, 2)
-          }
-        })
-        this.chart = new ApexCharts(this.element, options)
-        this.chart.render()
-      })
-  }
-
-  disconnect() {
-    if (this.chart) {
-      this.chart.destroy()
-      this.chart = null
-    }
-  }
-
-  round(num, decimalPlaces = 0) {
-    num = Math.round(num + "e" + decimalPlaces);
-    return Number(num + "e" + -decimalPlaces);
-  }
-})

data/app/assets/javascripts/solid_apm/controllers/transaction-chart_controller.js

@@ -1,76 +0,0 @@
-import {
-  Controller,
-} from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
-// unload chart https://github.com/Deanout/weight_tracker/blob/d4123acb952d91fcc9bedb96bbd786088a71482a/app/javascript/controllers/weights_controller.js#L4
-// tooltip: {
-//   y: {
-//     formatter: function (value, {series, seriesIndex, dataPointIndex, w}) {
-//       return w.globals.initialSeries[seriesIndex].data[dataPointIndex].name + "\n" + value + "ms"
-//     }
-//   }
-// }
-
-// Connects to data-controller="transaction-chart"
-window.Stimulus.register('transaction-chart',
-  class extends Controller {
-    static values = { name: String }
-
-    connect() {
-    var options = {
-      chart: {
-        type: 'bar',
-        height: '200em'
-      },
-      series: [{
-        name: 'tpm',
-      }],
-      xaxis: {
-        type: 'datetime'
-      },
-      dataLabels: {
-        enabled: false
-      },
-      tooltip: {
-        x: {
-          formatter: function (value) {
-            return new Date(value).toLocaleString()
-          }
-        }
-      }
-    }
-
-    let path = "count_time_aggregations?";
-    if (this.nameValue) {
-      path = path + "name=" + encodeURIComponent(this.nameValue);
-    }
-
-    const fromValue = document.querySelector('input[name="from_value"]')
-    const fromUnit = document.querySelector('select[name="from_unit"]');
-    if (fromValue && fromUnit) {
-      path = path + "&from_value=" + fromValue.value + "&from_unit=" + fromUnit.value;
-    }
-
-    const base = window.location.pathname.split('/transactions')[0];
-    path = base + "/transactions/" + path;
-    path = path.replace("//", "/");
-    fetch(path)
-      .then(response => response.json())
-      .then(data => {
-        const transformedData = []
-        for (let [key, value] of Object.entries(data)) {
-          transformedData.push({x: key, y: value})
-        }
-        options.series[0].data = transformedData
-        this.chart = new ApexCharts(this.element, options)
-        this.chart.render()
-      })
-  }
-
-  // Unloads the chart before loading new data.
-  disconnect() {
-    if (this.chart) {
-      this.chart.destroy();
-      this.chart = null;
-    }
-  }
-})

data/app/views/solid_apm/transactions/show.html.erb

@@ -1,9 +0,0 @@
-
-<h1 class="title"><%= @transaction.name %></h1>
-<h2 class="title is-6"><span class="has-text-grey-dark">Trace ID:</span> <%= @transaction.uuid %></h2>
-<h2 class="title is-6"><span class="has-text-grey-dark">Timestamp:</span> <%= @transaction.timestamp %></h2>
-<h2 class="title is-6"><span class="has-text-grey-dark">Duration:</span> <%= @transaction.duration %> ms</h2>
-<h2 class="title is-6"><span class="has-text-grey-dark">Unix minute:</span> <%= @transaction.unix_minute %></h2>
-<h2 class="title is-6"><span class="has-text-grey-dark">Metadata:</span> <%= @transaction.metadata %></h2>
-
-<%= render template: 'solid_apm/spans/index', collection: @transaction.spans, locals: { spans: @transaction.spans } %>

data/app/views/solid_apm/transactions/show_by_name.html.erb

@@ -1,27 +0,0 @@
-<h1 class="title is-3"><%= params[:name] %></h1>
-<div data-controller="transaction-chart" data-transaction-chart-name-value="<%= params[:name] %>"></div>
-
-<table class="table">
-  <thead>
-  <tr>
-    <% SolidApm::Transaction.attribute_names.each do |attribute| %>
-      <% next if attribute.to_s.end_with?('_at') %>
-      <th scope="col"><%= attribute.humanize %></th>
-    <% end %>
-  </tr>
-  </thead>
-  <tbody>
-  <% @transactions.each do |transaction| %>
-    <tr>
-      <% transaction.attributes.each do |attribute| %>
-        <% next if attribute[0].to_s.end_with?('_at') %>
-        <% if attribute[0] == 'uuid' %>
-          <td><%= link_to attribute[1], transaction_path(transaction) %></td>
-        <% else %>
-          <td><%= attribute[1] %></td>
-        <% end %>
-      <% end %>
-    </tr>
-  <% end %>
-  </tbody>
-</table>