killbill-aviate 2.3.0 → 2.4.0.pre.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8eda43fad137f5751fe32364907cac8c26d9627b009e67e9750415443953504b
-  data.tar.gz: 9e9a951a294c5035bc926286d6acd51ba2e02fa69664b7ec8baaf7db34d17744
+  metadata.gz: '07590f4ddf4251690f20b6c4368c673c834ff9fe7cc1caa7965375073e5be898'
+  data.tar.gz: 4ceb836ff7732f47da9c8e7f0836d9ebbdfc034f4e2b09a60556f41ad9e17889
 SHA512:
-  metadata.gz: 5a3daf086e3cb0e20ec0fa14f0a92da5c4dda5e71a50916d03ef12add66483c5a5acc0d6c87a7dde4b9e786ec1dfc7b614b884ca184f14c944fa4dedee378dd4
-  data.tar.gz: 4ca74695ff40b2660da12eb9f2498c46f301752ebe83429d1b5180499848ea40388f3fc03d8af7c1071df103ac1814df8ebe4cf0eb4ab76af69f522253968228
+  metadata.gz: e25e698e0b00458d0f9ed77f9f862ac0a26348e06cde2ebddc7ea3f9208cd4df5edf32bcf6c4832248f12dc1d93274b2126f6e790cc87b7ed8d87be7a15b52d0
+  data.tar.gz: 786a7afe69526f66db9e3b5129d362fe8a2ff755cce777d6e85e79adfeee88d63d29c2f394fdce22ea78883d20ebd7641bdd8d9946d8097b02c3aec173b8dd6d

data/app/assets/javascripts/aviate/kiddo/axes.js

@@ -0,0 +1,54 @@
+(function (Aviate, d3) {
+  Aviate.Axes = function () {
+    var self = this;
+
+    var makeXAxis = function () {
+      return d3.axisBottom(self.x).ticks(6);
+    };
+
+    var makeYAxis = function () {
+      return d3
+        .axisLeft(self.y)
+        .tickFormat(d3.format(",d"));
+    };
+
+    var xAxis = makeXAxis();
+    var yAxis = makeYAxis();
+
+    return {
+      x: xAxis,
+      y: yAxis,
+      render: function (svg) {
+        svg
+          .append("g")
+          .attr("class", "grid")
+          .attr(
+            "transform",
+            "translate(" + self.margin_left + "," + self.height + ")"
+          )
+          .call(makeXAxis().tickSize(-self.height).tickFormat(""));
+
+        svg
+          .append("g")
+          .attr("class", "grid")
+          .attr("transform", "translate(" + self.margin_left + ",0)")
+          .call(makeYAxis().tickSize(-self.width).tickFormat(""));
+
+        svg
+          .append("g")
+          .attr("class", "x axis")
+          .attr(
+            "transform",
+            "translate(" + self.margin_left + "," + self.height + ")"
+          )
+          .call(xAxis);
+
+        svg
+          .append("g")
+          .attr("class", "y axis")
+          .attr("transform", "translate(" + self.margin_left + ",0)")
+          .call(yAxis);
+      },
+    };
+  };
+})((window.Aviate = window.Aviate || {}), d3);

data/app/assets/javascripts/aviate/kiddo/charts/line_chart.js

@@ -0,0 +1,138 @@
+(function (Aviate, d3) {
+  Aviate.LineChart = function () {
+    var self = this;
+
+    this.x = d3.scaleTime().range([0, this.width]);
+    this.y = d3.scaleLinear().range([this.height, 0]);
+
+    var valueline = d3
+      .line()
+      .x(function (d) {
+        return self.x(d.x);
+      })
+      .y(function (d) {
+        return self.y(d.y);
+      })
+      .curve(d3.curveStepAfter);
+
+    var axes = Aviate.Axes.apply(this);
+    var helper = new Aviate.Helper();
+
+    var colors = [
+      "#2196F3", // blue
+      "#E53935", // red
+      "#43A047", // green
+      "#FB8C00", // orange
+      "#8E24AA", // purple
+      "#00ACC1", // cyan
+      "#F4511E", // deep orange
+      "#6D4C41", // brown
+    ];
+    self.color = d3.scaleOrdinal().range(colors);
+
+    return {
+      render: function (svg, json) {
+        var datasets = json.data;
+
+        datasets.forEach(function (dataset) {
+          dataset.values.forEach(function (d) {
+            d.date = typeof d.x === "string" ? d.x.split("T")[0] : d.x;
+            d.x = helper.parseDate(d.date);
+            d.y = +d.y;
+          });
+        });
+
+        // Scale the range of the data before rendering axes
+        var allValues = datasets.reduce(function (result, element) {
+          return result.concat(element.values);
+        }, []);
+
+        var x_domain = d3.extent(allValues, function (d) {
+          return d.x;
+        });
+        self.x.domain(x_domain);
+
+        var y_domain = d3.extent(allValues, function (d) {
+          return d.y;
+        });
+        self.y.domain(y_domain);
+
+        // Render axes
+        axes.render(svg);
+
+        self.color.domain(datasets.map(function (dataset) {
+          return dataset.name;
+        }));
+
+        // Create legend container to the right of the chart area
+        var legendContainer = svg
+          .append("g")
+          .attr("class", "chart-legend")
+          .attr("transform", "translate(" + (self.width + self.margin_left + 15) + ", 10)");
+
+        // Calculate latest values for legend
+        var legendData = datasets.map(function (dataset) {
+          var latestValue = dataset.values[dataset.values.length - 1];
+          return {
+            name: dataset.name,
+            value: latestValue ? latestValue.y : 0,
+            color: self.color(dataset.name),
+          };
+        });
+
+        var legendItems = legendContainer
+          .selectAll(".legend-item")
+          .data(legendData)
+          .enter()
+          .append("g")
+          .attr("class", "legend-item");
+
+        var yOffset = 0;
+        legendItems.each(function (d) {
+          var legendItem = d3.select(this);
+
+          legendItem
+            .append("circle")
+            .attr("cx", 6)
+            .attr("cy", yOffset)
+            .attr("r", 6)
+            .style("fill", d.color);
+
+          var labelText = d.name + ": " + helper.formatValue(d.value);
+          legendItem
+            .append("text")
+            .attr("x", 18)
+            .attr("y", yOffset)
+            .attr("dy", "0.35em")
+            .style("font-size", "0.875rem")
+            .style("font-weight", "500")
+            .style("fill", "#6B7280")
+            .text(labelText);
+
+          yOffset += 22;
+        });
+
+        // Render data lines (stepped)
+        datasets.forEach(function (dataset) {
+          var data = dataset.values,
+            name = dataset.name;
+
+          svg
+            .append("path")
+            .attr("class", "line")
+            .attr("d", valueline(data))
+            .attr("transform", "translate(" + self.margin_left + ",0)")
+            .style("stroke", function () {
+              return self.color(name);
+            })
+            .style("stroke-width", "0.125rem")
+            .style("fill", "none")
+            .style("opacity", 0.9);
+        });
+
+        self.datasets = datasets;
+        Aviate.Utils.MouseOver.apply(self).render(svg, self.x, self.y);
+      },
+    };
+  };
+})((window.Aviate = window.Aviate || {}), d3);

data/app/assets/javascripts/aviate/kiddo/charts/utils/mouse_over.js

@@ -0,0 +1,149 @@
+(function (Aviate, d3) {
+  Aviate.Utils = Aviate.Utils || {};
+
+  Aviate.Utils.MouseOver = function () {
+    var self = this;
+    var helper = new Aviate.Helper();
+
+    return {
+      render: function (svg) {
+        var focus = svg
+          .append("g")
+          .attr("class", "focus")
+          .style("display", "none");
+
+        // Vertical line
+        focus
+          .append("line")
+          .attr("class", "mouse-line")
+          .attr("y1", 0)
+          .attr("y2", self.height)
+          .style("stroke", "#999")
+          .style("stroke-dasharray", "3,3")
+          .style("opacity", 0.5);
+
+        // Circles for each series
+        self.datasets.forEach(function () {
+          focus
+            .append("circle")
+            .attr("r", 4)
+            .style("fill", "none")
+            .style("stroke-width", 2);
+        });
+
+        // Tooltip
+        var tooltip = d3
+          .select("body")
+          .append("div")
+          .attr("class", "chart-tooltip")
+          .style("position", "absolute")
+          .style("background", "white")
+          .style("border", "1px solid #ddd")
+          .style("border-radius", "4px")
+          .style("padding", "8px 12px")
+          .style("font-size", "0.8125rem")
+          .style("pointer-events", "none")
+          .style("opacity", 0)
+          .style("z-index", 1000)
+          .style("box-shadow", "0 2px 8px rgba(0,0,0,0.1)");
+
+        // Overlay rect to capture mouse
+        svg
+          .append("rect")
+          .attr("class", "overlay")
+          .attr("width", self.width)
+          .attr("height", self.height)
+          .attr("transform", "translate(" + self.margin_left + ",0)")
+          .style("fill", "none")
+          .style("pointer-events", "all")
+          .on("mouseover", function () {
+            focus.style("display", null);
+            tooltip.style("opacity", 1);
+          })
+          .on("mouseout", function () {
+            focus.style("display", "none");
+            tooltip.style("opacity", 0);
+          })
+          .on("mousemove", function () {
+            var mouseX = d3.pointer(event, this)[0];
+            var x0 = self.x.invert(mouseX);
+
+            // Find closest data point for each dataset
+            var tooltipRows = [];
+            var closestDate = null;
+            self.datasets.forEach(function (dataset, i) {
+              var data = dataset.values;
+              var idx = helper.bisectDate(data, x0, 1);
+              var d0 = data[idx - 1];
+              var d1 = data[idx];
+              if (!d0 && !d1) return;
+              var d = d0 && d1
+                ? x0 - d0.x > d1.x - x0 ? d1 : d0
+                : d0 || d1;
+
+              tooltipRows.push({
+                name: dataset.name,
+                value: d.y,
+                color: self.color(dataset.name),
+              });
+
+              // Use the matched data point's own date (a "%Y-%m-%d" string) for the
+              // tooltip header, not the raw mouse position - self.x/self.y are pixel
+              // scales, not formatters, and re-scaling x0 through them produced a
+              // meaningless pixel offset instead of a date.
+              if (closestDate === null) {
+                closestDate = d.date;
+              }
+
+              focus
+                .selectAll("circle")
+                .filter(function (_, j) { return j === i; })
+                .attr("cx", self.x(d.x) + self.margin_left)
+                .attr("cy", self.y(d.y));
+            });
+
+            // Update vertical line
+            focus
+              .select(".mouse-line")
+              .attr("x1", self.x(x0) + self.margin_left)
+              .attr("x2", self.x(x0) + self.margin_left);
+
+            // Sort by value descending for tooltip
+            tooltipRows.sort(function (a, b) { return b.value - a.value; });
+
+            var dateStr = helper.formatDate(closestDate);
+            var rowsHtml = tooltipRows.map(function (row) {
+              return (
+                '<div style="display:flex;align-items:center;gap:6px;margin:2px 0;">' +
+                '<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:' + row.color + ';flex-shrink:0;"></span>' +
+                '<span>' + row.name + ":</span>" +
+                '<span style="font-weight:600;">' + helper.formatValue(row.value) + "</span>" +
+                "</div>"
+              );
+            });
+
+            tooltip
+              .html(
+                '<div style="font-weight:600;margin-bottom:4px;">' + dateStr + "</div>" +
+                rowsHtml.join("")
+              );
+
+            // Position tooltip, flip to left when near right edge
+            var tooltipNode = tooltip.node();
+            var tooltipWidth = tooltipNode ? tooltipNode.getBoundingClientRect().width : 200;
+            var chartRect = svg.node().getBoundingClientRect();
+            var mousePageX = d3.pointer(event, document.body)[0];
+            var leftPos = mousePageX + 15;
+
+            if (leftPos + tooltipWidth > window.innerWidth - 20) {
+              leftPos = mousePageX - tooltipWidth - 15;
+            }
+
+            tooltip
+              .style("left", leftPos + "px")
+              .style("top", chartRect.top + "px");
+          });
+      },
+    };
+  };
+})((window.Aviate = window.Aviate || {}), d3);

data/app/assets/javascripts/aviate/kiddo/helper.js

@@ -0,0 +1,52 @@
+(function (Aviate, d3) {
+  Aviate.Helper = function () {
+    var formatValue = function (d) {
+      return d % 1 === 0 ? d3.format(",d")(d) : d3.format(",.2f")(d);
+    };
+    var formatCurrency = function (d) {
+      return "$" + formatValue(d);
+    };
+
+    var humanizeSegment = function (segment) {
+      segment = String(segment || "")
+        .replace(/[_-]+/g, " ")
+        .replace(/\s+/g, " ")
+        .trim();
+
+      if (!segment) {
+        return "";
+      }
+
+      return segment
+        .split(" ")
+        .map(function (word) {
+          if (/^\d+(\.\d+)?$/.test(word)) {
+            return word;
+          }
+          if (/^[A-Z]{2,3}$/.test(word)) {
+            return word;
+          }
+
+          return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+        })
+        .join(" ");
+    };
+
+    var parseDateFn = d3.timeParse("%Y-%m-%d");
+    var formatDateFn = d3.timeFormat("%b %d, %Y");
+    var formatDate = function (dateStr) {
+      var parsed = parseDateFn(dateStr);
+      return parsed ? formatDateFn(parsed) : dateStr;
+    };
+
+    return {
+      parseDate: parseDateFn,
+      bisectDate: d3.bisector(function (d) {
+        return d.x;
+      }).left,
+      formatCurrency: formatCurrency,
+      formatValue: formatValue,
+      formatDate: formatDate,
+    };
+  };
+})((window.Aviate = window.Aviate || {}), d3);

data/app/assets/javascripts/aviate/kiddo/renderer.js

@@ -0,0 +1,36 @@
+(function (Aviate, d3) {
+  Aviate.Renderer = function (selector) {
+    this.element = d3.select(selector);
+
+    var settings = Aviate.Settings.apply(this);
+
+    var svg = this.element
+      .append("svg")
+      .attr("width", settings.raw_width)
+      .attr("height", settings.raw_height)
+      .attr("style", "overflow: visible")
+      .append("g")
+      .attr(
+        "transform",
+        "translate(" + settings.margin_left + "," + settings.margin_top + ")"
+      );
+
+    return {
+      lineChart: function (data) {
+        var chart = Aviate.LineChart.apply(settings);
+        chart.render(svg, data);
+      },
+
+      noData: function () {
+        svg
+          .append("text")
+          .attr("class", "chart-info")
+          .attr(
+            "transform",
+            "translate(" + settings.width / 2 + "," + settings.height / 2 + ")"
+          )
+          .text("No data to display.");
+      },
+    };
+  };
+})((window.Aviate = window.Aviate || {}), d3);

data/app/assets/javascripts/aviate/kiddo/settings.js

@@ -0,0 +1,24 @@
+(function (Aviate, d3) {
+  Aviate.Settings = function () {
+    var margin_top = 30,
+      margin_bottom = 40,
+      margin_left = 50,
+      margin_right = 150,
+      raw_width = parseInt(
+        this.element.node().getBoundingClientRect().width,
+        10
+      ),
+      raw_height = 500;
+
+    return {
+      margin_top: margin_top,
+      margin_bottom: margin_bottom,
+      margin_left: margin_left,
+      margin_right: margin_right,
+      raw_width: raw_width,
+      raw_height: raw_height,
+      width: raw_width - margin_left - margin_right,
+      height: raw_height - margin_top - margin_bottom,
+    };
+  };
+})((window.Aviate = window.Aviate || {}), d3);

data/app/assets/javascripts/aviate_application.js

@@ -8,5 +8,6 @@
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
 //
+//= require d3
 //= require aviate/aviate
 //= require assets/common

data/app/assets/stylesheets/aviate/usage.css

@@ -0,0 +1,12 @@
+.usage-index .usage-header {
+  padding: 0 0 1rem;
+  border-bottom: 0.0625rem solid #e9eaeb;
+}
+
+.usage-index .usage-header h2 {
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  color: #414651;
+  margin-bottom: 0.5rem;
+}

data/app/controllers/aviate/usage_controller.rb

@@ -0,0 +1,224 @@
+# frozen_string_literal: true
+
+require 'date'
+
+module Aviate
+  class UsageController < Aviate::EngineController
+    before_action :aviate_authentication
+
+    def index
+      cached_options = options_for_klient
+      @account_id = params.require(:account_id)
+      @account = Kaui::Account.find_by_id(@account_id, false, false, cached_options)
+
+      bundles = @account.bundles(cached_options)
+      @subscriptions = []
+      bundles.each do |bundle|
+        (bundle.subscriptions || []).each do |sub|
+          @subscriptions << sub if sub.billing_end_date.blank?
+        end
+      end
+    end
+
+    def show
+      cached_options = options_for_klient
+      subscription_id = params.require(:id)
+
+      @subscription = Kaui::Subscription.find_by_id(subscription_id, 'NONE', cached_options)
+      @account_id = @subscription.account_id
+      @account = Kaui::Account.find_by_id(@account_id, false, false, cached_options)
+
+      start_date, end_date = billing_period(@subscription)
+      @period_start = format_date(start_date)
+      @period_end = format_date(end_date)
+      @period_closed = end_date < Time.zone.today
+
+      # Step 3: Retrieve unit types from catalog
+      unit_types = fetch_unit_types(@subscription, start_date, cached_options)
+
+      # Step 4: Fetch daily usage time-series in parallel
+      samples_by_unit = fetch_all_samples(subscription_id, unit_types, start_date, end_date, cached_options)
+
+      # Step 5: Build cumulative series per unit type
+      @chart_data = build_chart_data(samples_by_unit, unit_types)
+
+      # Step 6: Fetch invoice dry run for accrued cost
+      @accrued_cost = fetch_accrued_cost(@account_id, cached_options)
+
+      # Step 7: Fetch wallet balance
+      @wallet_balance = fetch_wallet_balance(@account_id, cached_options)
+
+      # Build chart JSON for the view
+      @chart_json = build_chart_json(@chart_data)
+    end
+
+    private
+
+    def billing_period(subscription)
+      start_date = parse_kb_date(subscription.charged_through_date)
+      end_date = compute_next_bcd(start_date, subscription.bill_cycle_day_local)
+      [start_date, end_date]
+    end
+
+    def parse_kb_date(date_str)
+      return Time.zone.today if date_str.blank?
+
+      Date.parse(date_str.to_s)
+    rescue ArgumentError
+      Time.zone.today
+    end
+
+    def compute_next_bcd(start_date, bill_cycle_day_local)
+      return start_date + 30 if bill_cycle_day_local.blank?
+
+      bcd = bill_cycle_day_local.to_i
+      bcd = 28 if bcd > 28
+      bcd = 1 if bcd < 1
+
+      if start_date.day < bcd
+        next_date = Date.new(start_date.year, start_date.month, bcd)
+      else
+        next_month = start_date.next_month
+        last_day = [bcd, Date.new(next_month.year, next_month.month, -1).day].min
+        next_date = Date.new(next_month.year, next_month.month, last_day)
+      end
+
+      next_date
+    rescue ArgumentError
+      start_date + 30
+    end
+
+    def fetch_unit_types(subscription, start_date, cached_options)
+      # NOTE: KillBillClient::Model::Catalog.get_catalog_phase parses the response as a
+      # Catalog object by default, but the API actually returns a Phase-shaped payload
+      # (it has no `usages` accessor otherwise) - request it as a Phase explicitly.
+      phase = KillBillClient::Model::Phase.get(
+        "#{KillBillClient::Model::Catalog::KILLBILL_API_CATALOG_PREFIX}/phase",
+        {
+          subscriptionId: subscription.subscription_id,
+          requestedDate: start_date.to_s
+        },
+        cached_options
+      )
+
+      return [] if phase.nil? || phase.usages.blank?
+
+      unit_types = []
+      Array(phase.usages).each do |usage|
+        usage_hash = usage.respond_to?(:to_hash) ? usage.to_hash : usage
+        tiers = usage_hash['tiers'] || usage_hash[:tiers] || []
+        Array(tiers).each do |tier|
+          tier_hash = tier.respond_to?(:to_hash) ? tier.to_hash : tier
+          blocks = tier_hash['blocks'] || tier_hash[:blocks] || []
+          Array(blocks).each do |block|
+            block_hash = block.respond_to?(:to_hash) ? block.to_hash : block
+            unit = block_hash['unit'] || block_hash[:unit]
+            unit_types << unit if unit.present?
+          end
+        end
+      end
+
+      unit_types.uniq.compact
+    rescue StandardError => e
+      Rails.logger.warn("Failed to fetch catalog phase: #{e.message}")
+      []
+    end
+
+    def fetch_all_samples(subscription_id, unit_types, start_date, end_date, cached_options)
+      samples_by_unit = {}
+      from = start_date.to_s
+      to = end_date.to_s
+
+      return samples_by_unit if unit_types.empty?
+
+      # rubocop:disable ThreadSafety/NewThread -- fetching samples for each unit type in parallel is intentional
+      threads = unit_types.map do |unit_type|
+        Thread.new do
+          samples = Killbill::Aviate::AviateClient.host_samples(
+            subscription_id, unit_type, from, to, cached_options
+          )
+          [unit_type, samples]
+        rescue StandardError => e
+          Rails.logger.warn("host_samples failed for #{unit_type}: #{e.message}")
+          [unit_type, []]
+        end
+      end
+      # rubocop:enable ThreadSafety/NewThread
+
+      threads.each do |t|
+        unit_type, samples = t.value
+        samples_by_unit[unit_type] = samples
+      end
+
+      samples_by_unit
+    end
+
+    def build_chart_data(samples_by_unit, unit_types)
+      return {} if samples_by_unit.empty?
+
+      chart_data = {}
+      unit_types.each do |unit_type|
+        samples = samples_by_unit[unit_type] || []
+        next if samples.empty?
+
+        cumulative = 0
+        values = samples.map do |s|
+          cumulative += s[:value]
+          { 'x' => s[:date]&.split('T')&.first || s[:date], 'y' => cumulative }
+        end
+
+        chart_data[unit_type] = values
+      end
+
+      chart_data
+    end
+
+    def build_chart_json(chart_data)
+      return nil if chart_data.empty?
+
+      series = chart_data.map do |unit_type, values|
+        { 'name' => unit_type, 'values' => values }
+      end
+
+      { 'type' => 'TIMELINE', 'data' => series }.to_json
+    end
+
+    def fetch_accrued_cost(account_id, cached_options)
+      # Use the UPCOMING_INVOICE dry-run type (matches Kaui's own next_invoice_date action) so
+      # that in-arrear usage recorded so far in the still-open period is reflected. A plain
+      # TARGET_DATE dry-run with no date returns 204/nil here, since there's no invoicing
+      # event actually scheduled for "now" mid-period.
+      invoice = KillBillClient::Model::Invoice.trigger_invoice_dry_run(
+        account_id,
+        nil,
+        true,
+        [],
+        current_user&.kb_username,
+        nil,
+        nil,
+        cached_options
+      )
+
+      return nil if invoice.nil? || invoice.amount.nil?
+
+      invoice.amount
+    rescue StandardError => e
+      Rails.logger.warn("Invoice dry run failed: #{e.message}")
+      nil
+    end
+
+    def fetch_wallet_balance(account_id, cached_options)
+      wallets = Killbill::Aviate::AviateClient.retrieve_wallets(account_id, cached_options)
+      return nil if wallets.blank?
+
+      wallets.sum { |w| (w['balance'] || 0).to_f }
+    rescue StandardError => e
+      Rails.logger.warn("Wallet balance fetch failed: #{e.message}")
+      nil
+    end
+
+    def format_date(date)
+      date.strftime('%b %d, %Y')
+    end
+  end
+end

data/app/views/aviate/usage/index.html.erb

@@ -0,0 +1,70 @@
+<div class="kaui-container usage-index">
+  <%= render "kaui/components/breadcrumb/breadcrumb" %>
+  <div class="d-flex" style="gap: 4rem;">
+    <%= render :template => 'kaui/layouts/kaui_account_sidebar' %>
+    <div class="usage-content" style="max-width: 67.5rem; width: 100%;">
+      <div class="usage-header mb-4">
+        <h2>Usage</h2>
+        <p class="text-muted">Select a subscription to view its metered usage.</p>
+      </div>
+
+      <% if @subscriptions.empty? %>
+        <div class="text-center py-5 text-muted">
+          <p>No active subscriptions found for this account.</p>
+        </div>
+      <% else %>
+        <table id="usage-table" class="usage-table">
+          <thead>
+            <tr>
+              <th>Subscription</th>
+              <th>Plan</th>
+              <th>Product</th>
+              <th>Start Date</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <% @subscriptions.each do |sub| %>
+              <tr>
+                <td>
+                  <span class="object-id-popover" data-id="<%= sub.subscription_id %>">
+                    <%= truncate(sub.subscription_id, length: 12) %>
+                  </span>
+                </td>
+                <td><%= sub.plan_name || '—' %></td>
+                <td><%= sub.product_name || '—' %></td>
+                <td><%= sub.start_date.present? ? Date.parse(sub.start_date.to_s).strftime('%b %d, %Y') : '—' %></td>
+                <td class="text-end">
+                  <%= render "kaui/components/button/button", {
+                    label: "View Usage",
+                    variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                    type: "button",
+                    html_class: "kaui-button custom-hover",
+                    html_options: {
+                      onclick: "window.location.href='#{aviate_engine.usage_subscription_path(id: sub.subscription_id)}'"
+                    }
+                  } %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<% unless @subscriptions.empty? %>
+  <%= javascript_tag do %>
+
+  $(document).ready(function() {
+    var table = $('#usage-table').DataTable({
+      "processing": false,
+      "info": false,
+      "paging": false,
+      "searching": false,
+      "ordering": false
+    });
+  });
+  <% end %>
+<% end %>

data/app/views/aviate/usage/show.html.erb

@@ -0,0 +1,92 @@
+<div class="kaui-container usage-show">
+  <%= render "kaui/components/breadcrumb/breadcrumb" %>
+  <div class="d-flex" style="gap: 4rem;">
+    <%= render :template => 'kaui/layouts/kaui_account_sidebar' %>
+    <div class="usage-content" style="max-width: 67.5rem; width: 100%;">
+      <div class="usage-header mb-4">
+        <h2>Usage</h2>
+        <p class="text-muted">
+          Subscription: <strong><%= @subscription.plan_name || @subscription.product_name %></strong>
+          &mdash; <%= @period_start %> to <%= @period_end %>
+        </p>
+      </div>
+
+      <% if @chart_json.present? || @accrued_cost.present? || @wallet_balance.present? %>
+        <div class="usage-stats d-flex gap-4 mb-4">
+          <% if @chart_data.any? %>
+            <% @chart_data.each do |unit_type, values| %>
+              <div class="stat-card card p-3">
+                <div class="stat-label text-muted small">Units Consumed (<%= unit_type %>)</div>
+                <div class="stat-value h4"><%= values.last&.dig('y') || 0 %></div>
+              </div>
+            <% end %>
+          <% end %>
+
+          <% if @accrued_cost.present? %>
+            <div class="stat-card card p-3">
+              <div class="stat-label text-muted small"><%= @period_closed ? 'Invoice Amount' : 'Accrued Cost (today)' %></div>
+              <div class="stat-value h4"><%= number_to_currency(@accrued_cost) %></div>
+            </div>
+          <% end %>
+
+          <% if @wallet_balance.present? %>
+            <div class="stat-card card p-3">
+              <div class="stat-label text-muted small">Wallet Balance</div>
+              <div class="stat-value h4"><%= number_to_currency(@wallet_balance) %></div>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+
+      <div class="chart-container card p-3">
+        <% if @chart_json.present? %>
+          <div id="loading-spinner" class="text-center py-5">
+            <div class="spinner-border" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+          </div>
+          <div id="aviateUsageChartAnchor"
+               data-chart-json='<%= raw @chart_json %>'
+               style="width: 100%;">
+          </div>
+        <% else %>
+          <div class="text-center py-5 text-muted">
+            <% if @chart_data.empty? %>
+              <p>No usage data available for this period.</p>
+            <% else %>
+              <p>Unable to render chart.</p>
+            <% end %>
+            <% if @accrued_cost.nil? && @wallet_balance.nil? %>
+              <p>No usage, cost, or wallet data available.</p>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<% if @chart_json.present? %>
+  <%= javascript_include_tag 'aviate_application' %>
+
+  <%= javascript_tag do %>
+    $(document).ready(function() {
+      if ($("#aviateUsageChartAnchor").length === 0) return;
+
+      var chartJson = $("#aviateUsageChartAnchor").data("chart-json");
+      if (!chartJson || !chartJson.data || chartJson.data.length === 0) {
+        $("#loading-spinner").remove();
+        return;
+      }
+
+      try {
+        var renderer = new Aviate.Renderer("#aviateUsageChartAnchor");
+        renderer.lineChart(chartJson);
+      } catch (ex) {
+        console.error("Chart render error:", ex);
+      } finally {
+        $("#loading-spinner").remove();
+      }
+    });
+  <% end %>
+<% end %>

data/config/routes.rb

@@ -17,5 +17,8 @@ Aviate::Engine.routes.draw do
         post :top_off_config
       end
     end
+    resources :usage, only: [:index]
   end
+
+  get 'subscriptions/:id/usage', to: 'usage#show', as: :usage_subscription
 end

data/lib/aviate/client.rb

@@ -79,6 +79,21 @@ module Killbill
           JSON.parse(e.message)
         end
 
+        def host_samples(subscription_id, sample_kind, from_date, to_date, options = nil)
+          path = "#{KILLBILL_AVIATE_PREFIX}/health/host_samples"
+          query_params = {
+            from: from_date,
+            to: to_date,
+            category_and_sample_kind: "#{subscription_id},#{sample_kind}"
+          }
+
+          request_options = build_request_options(options)
+          response = KillBillClient::API.get path, query_params, request_options
+          parse_csv_response(response.body)
+        rescue KillBillClient::API::ResponseError
+          []
+        end
+
         def authenticate(email, password, options = nil)
           path = "#{KILLBILL_AVIATE_PREFIX}/auth"
           auth = Base64.strict_encode64("#{email}:#{password}")
@@ -102,6 +117,21 @@ module Killbill
 
         private
 
+        def parse_csv_response(body)
+          return [] if body.nil? || body.strip.empty?
+
+          require 'csv'
+          rows = CSV.parse(body, headers: true)
+          rows.map do |row|
+            {
+              date: row['timestamp']&.strip,
+              value: row['value']&.strip&.to_f
+            }
+          end
+        rescue CSV::MalformedCSVError
+          []
+        end
+
         def build_request_options(options)
           return {} if options.nil?
 

data/lib/aviate/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Aviate
-  VERSION = '2.3.0'
+  VERSION = '2.4.0.pre.1'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: killbill-aviate
 version: !ruby/object:Gem::Version
-  version: 2.3.0
+  version: 2.4.0.pre.1
 platform: ruby
 authors:
 - Kill Bill core team
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-07-15 00:00:00.000000000 Z
+date: 2026-07-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: killbill-assets-ui
@@ -77,17 +77,27 @@ files:
 - Rakefile
 - app/assets/config/aviate_manifest.js
 - app/assets/javascripts/aviate/aviate.js
+- app/assets/javascripts/aviate/kiddo/axes.js
+- app/assets/javascripts/aviate/kiddo/charts/line_chart.js
+- app/assets/javascripts/aviate/kiddo/charts/utils/mouse_over.js
+- app/assets/javascripts/aviate/kiddo/helper.js
+- app/assets/javascripts/aviate/kiddo/renderer.js
+- app/assets/javascripts/aviate/kiddo/settings.js
 - app/assets/javascripts/aviate_application.js
 - app/assets/stylesheets/aviate/aviate.css
+- app/assets/stylesheets/aviate/usage.css
 - app/assets/stylesheets/aviate_application.css
 - app/controllers/aviate/configuration_controller.rb
 - app/controllers/aviate/engine_controller.rb
+- app/controllers/aviate/usage_controller.rb
 - app/controllers/aviate/wallets_controller.rb
 - app/helpers/aviate/application_helper.rb
 - app/services/aviate/wallet.rb
 - app/services/aviate/wallet_api.rb
 - app/views/aviate/configuration/index.html.erb
 - app/views/aviate/layouts/aviate_application.html.erb
+- app/views/aviate/usage/index.html.erb
+- app/views/aviate/usage/show.html.erb
 - app/views/aviate/wallets/_form.html.erb
 - app/views/aviate/wallets/index.html.erb
 - app/views/aviate/wallets/new.html.erb
@@ -114,9 +124,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.4.10
 signing_key: