<%= script_tag "javascripts/chart.min.js" %>
<%= script_tag "javascripts/chartjs-plugin-annotation.min.js" %>
<%= script_tag "javascripts/chartjs-adapter-date-fns.min.js" %>
<%= script_tag "javascripts/base-charts.js" %>

<section>
  <header>
    <h1>
      <%= t('Metrics') %>
      <a target="blank" href="https://sidekiq.org/wiki/Metrics"><span class="info-circle" title="<%= t("ClickToLearnMore") %>">?</span></a>
    </h1>

    <%= erb :_metrics_period_select, locals: { periods: @periods, period: @period, path: "#{root_path}metrics" } %>
  </header>

  <%
    table_limit = 20
    chart_limit = 5
    job_results = @query_result.job_results.sort_by { |(kls, jr)| jr.totals["s"] }.reverse.first(table_limit)
    visible_kls = job_results.first(chart_limit).map(&:first)
  %>

  <% if job_results.any? %>
    <canvas id="job-metrics-overview-chart">
      <%= to_json({
        series: job_results.map { |(kls, jr)| [kls, jr.dig("series", "s")] }.to_h,
        marks: @query_result.marks.map { |m| [m.bucket, m.label] },
        starts_at: @query_result.starts_at.iso8601,
        ends_at: @query_result.ends_at.iso8601,
        visibleKls: visible_kls,
        yLabel: t('TotalExecutionTime'),
        units: t('Seconds').downcase,
        markLabel: t('Deploy'),
      }) %>
    </canvas>
  <% end %>

  <div class="table_container">
    <table>
      <thead>
        <tr>
          <th><%= t('Name') %></th>
          <th><%= t('Success') %></th>
          <th><%= t('Failure') %></th>
          <th><%= t('TotalExecutionTime') %> (<%= t('Seconds') %>)</th>
          <th><%= t('AvgExecutionTime') %> (<%= t('Seconds') %>)</th>
        </tr>
      </thead>
      <tbody>
        <% if job_results.any? %>
          <% job_results.each_with_index do |(kls, jr), i| %>
            <tr>
              <td>
                <div class="metrics-swatch-wrapper">
                  <% id = "metrics-swatch-#{kls}" %>
                  <input
                    type="checkbox"
                    id="<%= id %>"
                    class="metrics-swatch"
                    value="<%= kls %>"
                    <% if visible_kls.include?(kls) %>
                    checked
                    <% end %>>
                  <code><a href="<%= root_path %>metrics/<%= kls %>?period=<%= @period %>"><%= kls %></a></code>
                </div>
              </td>
              <td class="num"><%= number_with_delimiter(jr.dig("totals", "p") - jr.dig("totals", "f")) %></td>
              <td class="num"><%= number_with_delimiter(jr.dig("totals", "f")) %></td>
              <td class="num"><%= number_with_delimiter(jr.dig("totals", "s"), precision: 2) %></td>
              <td class="num"><%= number_with_delimiter(jr.total_avg("s"), precision: 2) %></td>
            </tr>
          <% end %>
        <% else %>
          <tr><td colspan="5"><%= t("NoDataFound") %></td></tr>
        <% end %>
      </tbody>
    </table>
  </div>

  <% if job_results.any? %>
    <p><small>Data from <%= @query_result.starts_at %> to <%= @query_result.ends_at %>.<% if @period == "1h" %> Auto-refreshing every 60 seconds.<% end %></small></p>
  <% end %>
</section>

<%= script_tag "javascripts/metrics.js" %>
