notebook/app/views/api/application_integrations/show.html.erb

<h5>
  <%= link_to api_applications_path, class: 'grey-text tooltipped', style: 'position: relative; top: 4px;', data: {
        position: 'bottom',
        enterDelay: '500',
        tooltip: "Back to your application list"
      } do %>
    <i class="material-icons">arrow_back</i>
  <% end %>
  Your applications
</h5>

<div class="row">
  <div class="col s12">
    <div class="card">
      <div class="card-content">
        <div class="card-title">
          <span class="badge orange white-text">live</span>
          <span class="orange-text">
            <i class="material-icons left">extension</i>
            <%= @application_integration.name %>
          </span>
          <small>(App ID: <%= @application_integration.id %>)</small>
        </div>
        <br />
        <div class="row">
          <div class="col s12 m6">
            <% [:description].each do |field| %>
              <div class="grey-text uppercase">
                <%= field.to_s.humanize %>
              </div>
              <div>
                <%= simple_format @application_integration.send(field) %>
              </div>
              <br />
            <% end %>
            <div class="grey-text uppercase">
              Organization
            </div>
            <div>
              <%= link_to @application_integration.organization_name, @application_integration.organization_url %>
            </div>
            <br />
            <% [:website_url, :privacy_policy_url, :authorization_callback_url, :event_ping_url].each do |field| %>
              <div class="grey-text uppercase"><%= field.to_s.humanize %></div>
              <div>
                <%= link_to @application_integration.send(field), @application_integration.send(field) %>
              </div>
              <br />
            <% end %>
          </div>
          <div class="col s12 m6">
            <div class="grey-text uppercase">
              Application Token
            </div>
            <pre class="black white-text" style="padding: 1em"><%= @application_integration.application_token || 'No token set' %></pre>
            <div class="red-text">
              Do <strong>NOT</strong> share this with others you do not trust or make client-side requests that expose this token. This token may be used to make API
              calls on your application's behalf and unauthorized use puts you at risk of strangers using up your API quota. 
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col s12 m6 l4">
    <div class="grey-text uppercase">Billing plan</div>
    <% if current_user.on_premium_plan? %>
      <div class="card-panel green lighten-3 black-text">
        You're on a Premium plan. All endpoints are available.
      </div>
    <% else %>
      <div class="card-panel red lighten-3">
        You are not currently on a Premium plan. API requests that require a Premium plan will succeed for users that have Premium, but fail for other users.
        <%= link_to 'Upgrade to a Premium plan', '#' %> to ensure your API requests succeed for all users!
      </div>
    <% end %>
  </div>
  <div class="col s12 m6 l4">
    <div class="grey-text uppercase">API quota</div>
    <div class="card-panel yellow lighten-4 black-text">
      <div>
        <strong><%= @application_integration.current_quota_usage_percentage %>% used in this billing period</strong>
      </div>
      <div class="progress tooltipped green lighten-5" data-tooltip="<%= @application_integration.current_quota_usage_percentage %>% of requests used">
        <div class="determinate green" style="width: <%= @application_integration.current_quota_usage_percentage %>%"></div>
      </div>
      <p>
        You've used <%= number_with_delimiter @application_integration.api_requests.successful.count %> of your alotted 10,000 calls this month.
        <%= link_to 'Upgrade to Premium', '#' %> to ensure you don't experience any disruptions when hitting your limit.
      </p>
    </div>
  </div>
  <div class="col s12 m6 l4">
    <div class="grey-text uppercase">Errors</div>
    <div class="card-panel <%= @application_integration.error_rate_color %> lighten-4 black-text">
      <div><strong><%= (@application_integration.request_error_rate * 100).round(2) %>% error rate</strong></div>
      <div class="progress red lighten-5">
        <div class="determinate red" style="width: <%= (@application_integration.request_error_rate * 100).round(2) %>%"></div>
      </div>
      <!-- Browse recent errors -->
      <!-- Set up error callback URL -->
    </div>
  </div>
</div>