graphql 2.4.15 → 2.4.16

data/lib/graphql/dashboard/statics/dashboard.js

@@ -52,18 +52,77 @@ async function openOnPerfetto(operationName, tracePath) {
   }, 100)
 }
 
-async function deleteTrace(tracePath, event) {
+function getCsrfToken() {
+  return document.querySelector("meta[name='csrf-token']").content
+}
+
+function deleteTrace(tracePath) {
   if (confirm("Are you sure you want to permanently delete this trace?")) {
-    var response = await fetch(tracePath, { method: "DELETE", headers: {
-      "X-CSRF-Token": document.querySelector("meta[name='csrf-token']").content
-    } })
-    if (response.ok) {
-      var row = event.target.closest("tr")
-      row.remove()
-    } else {
-      console.error("Delete request failed for", tracePath, response)
+    fetch(tracePath, { method: "DELETE", headers: {
+      "X-CSRF-Token": getCsrfToken()
+    } }).then(function(_response) {
+      window.location.reload()
+    })
+  }
+}
+
+function deleteAllTraces(path) {
+  if (confirm("Are you sure you want to permanently delete ALL traces?")) {
+    fetch(path, { method: "DELETE", headers: {
+      "X-CSRF-Token": getCsrfToken()
+    } }).then(function(_response) {
+      window.location.reload()
+    })
+  }
+}
+
+function deleteAllSubscriptions(path) {
+  if (confirm("This will:\n\n- Remove all subscriptions from the database\n- Stop updates to all current subscribers\n\nAre you sure?")) {
+    fetch(path, { method: "POST", headers: {
+      "X-CSRF-Token": getCsrfToken()
+    } }).then(function(_response) {
+      window.location.reload()
+    })
+  }
+}
+
+function sendArchive(clientName) {
+  var values = []
+  document.querySelectorAll(".archive-check:checked").forEach(function(el) {
+    values.push(el.value)
+  })
+  if (values.length == 0) {
+    return
+  }
+  var mode = window.location.pathname.includes("/archived") ? "/unarchive" : "/archive"
+  if (mode == "/archive") {
+    if (!confirm("Are you sure you want to archive these operations? They won't be usable by clients while archived.")) {
+      return
+    }
+  } else {
+    if (!confirm("Are you sure you want to reactivate these operations? They'll be available to clients again.")) {
+      return
+    }
+  }
+  var url = window.location.pathname.replace("/archived", "")
+  url += mode
+  var data
+
+  if (clientName) {
+    data = {
+      operation_aliases: values
+    }
+  } else {
+    data = {
+      digests: values
     }
   }
+  fetch(url, { method: "POST", body: JSON.stringify(data), headers: {
+    "X-CSRF-Token": getCsrfToken(),
+    "Content-Type": "application/json",
+  }}).then(function(_response) {
+    window.location.reload()
+  })
 }
 
 document.addEventListener("click", function(event) {
@@ -72,7 +131,13 @@ document.addEventListener("click", function(event) {
     openOnPerfetto(dataset.perfettoOpen, dataset.perfettoPath)
   } else if (dataset.perfettoDelete) {
     deleteTrace(dataset.perfettoDelete, event)
+  } else if (dataset.perfettoDeleteAll) {
+    deleteAllTraces(dataset.perfettoDeleteAll)
+  } else if (dataset.subscriptionsDeleteAll) {
+    deleteAllSubscriptions(dataset.subscriptionsDeleteAll)
   } else if (event.target.id == "themeToggle") {
     toggleTheme()
+  } else if (dataset.archiveClient || dataset.archiveAll) {
+    sendArchive(dataset.archiveClient)
   }
 })

data/lib/graphql/dashboard/subscriptions.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+module Graphql
+  class Dashboard < Rails::Engine
+    module Subscriptions
+      class BaseController < Graphql::Dashboard::ApplicationController
+        include Installable
+
+        def feature_installed?
+          schema_class.subscriptions.is_a?(GraphQL::Pro::Subscriptions)
+        end
+
+        INSTALLABLE_COMPONENT_HEADER_HTML = "GraphQL-Pro Subscriptions aren't installed on this schema yet.".html_safe
+        INSTALLABLE_COMPONENT_MESSAGE_HTML = <<-HTML.html_safe
+          Deliver live updates over
+          <a href="https://graphql-ruby.org/subscriptions/pusher_implementation.html">Pusher</a> or
+          <a href="https://graphql-ruby.org/subscriptions/ably_implementation.html"> Ably</a>
+          with GraphQL-Pro's subscription integrations.
+        HTML
+      end
+
+      class TopicsController < BaseController
+        def show
+          topic_name = params[:name]
+          all_subscription_ids = []
+          schema_class.subscriptions.each_subscription_id(topic_name) do |sid|
+            all_subscription_ids << sid
+          end
+
+          page = params[:page]&.to_i || 1
+          limit = params[:per_page]&.to_i || 20
+          offset = limit * (page - 1)
+          subscription_ids = all_subscription_ids[offset, limit]
+          subs = schema_class.subscriptions.read_subscriptions(subscription_ids)
+          show_broadcast_subscribers_count = schema_class.subscriptions.show_broadcast_subscribers_count?
+          subs.each do |sub|
+            sub[:is_broadcast] = is_broadcast = schema_class.subscriptions.broadcast_subscription_id?(sub[:id])
+            if is_broadcast && show_broadcast_subscribers_count
+              sub[:subscribers_count] = sub_count =schema_class.subscriptions.count_broadcast_subscribed(sub[:id])
+              sub[:still_subscribed] = sub_count > 0
+            else
+              sub[:still_subscribed] = schema_class.subscriptions.still_subscribed?(sub[:id])
+              sub[:subscribers_count] = nil
+            end
+          end
+
+          @topic_last_triggered_at = schema_class.subscriptions.topic_last_triggered_at(topic_name)
+          @subscriptions = subs
+          @subscriptions_count = all_subscription_ids.size
+          @show_broadcast_subscribers_count = show_broadcast_subscribers_count
+          @has_next_page = all_subscription_ids.size > offset + limit ? page + 1 : false
+        end
+
+        def index
+          page = params[:page]&.to_i || 1
+          per_page = params[:per_page]&.to_i || 20
+          offset = per_page * (page - 1)
+          limit = per_page
+          topics, all_topics_count, has_next_page = schema_class.subscriptions.topics(offset: offset, limit: limit)
+
+          @topics = topics
+          @all_topics_count = all_topics_count
+          @has_next_page = has_next_page
+          @page = page
+        end
+      end
+
+      class SubscriptionsController < BaseController
+        def show
+          subscription_id = params[:id]
+          subscriptions = schema_class.subscriptions
+          query_data = subscriptions.read_subscription(subscription_id)
+          is_broadcast = subscriptions.broadcast_subscription_id?(subscription_id)
+
+          if is_broadcast && subscriptions.show_broadcast_subscribers_count?
+            subscribers_count = subscriptions.count_broadcast_subscribed(subscription_id)
+            is_still_subscribed = subscribers_count > 0
+          else
+            subscribers_count = nil
+            is_still_subscribed = subscriptions.still_subscribed?(subscription_id)
+          end
+
+          @query_data = query_data
+          @still_subscribed = is_still_subscribed
+          @is_broadcast = is_broadcast
+          @subscribers_count = subscribers_count
+        end
+
+        def clear_all
+          schema_class.subscriptions.clear
+          flash[:success] = "All subscription data cleared."
+          head :no_content
+        end
+      end
+    end
+  end
+end

data/lib/graphql/dashboard/views/graphql/dashboard/detailed_traces/traces/index.html.erb

@@ -0,0 +1,45 @@
+<% content_for(:title, "Profiles") %>
+<div class="row justify-content-between mt-3">
+  <div class="col-auto">
+    <h3>Detailed Profiles</h3>
+  </div>
+  <div class="col-auto">
+    <%= button_tag "Delete All Traces", class: "btn btn-sm btn-outline-danger", data: { perfetto_delete_all: graphql_dashboard.delete_all_detailed_traces_traces_path } %>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col">
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th>Operation</th>
+          <th>Duration (ms) </th>
+          <th>Timestamp</th>
+          <th>Open in Perfetto UI</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% if @traces.empty? %>
+          <tr>
+            <td colspan="4" class="text-center">
+              <em>No traces saved yet. Read about saving traces <%= link_to "in the docs", "https://graphql-ruby.org/queries/tracing#detailed-profiles" %>.</em>
+            </td>
+          </tr>
+        <% end %>
+        <% @traces.each do |trace| %>
+          <tr>
+            <td><%= trace.operation_name %></td>
+            <td><%= trace.duration_ms.round(2) %></td>
+            <td><%= Time.at(trace.begin_ms / 1000.0).strftime("%Y-%m-%d %H:%M:%S.%L") %></td>
+            <td><%= link_to "View ↗", "#", data: { perfetto_open: trace.operation_name, perfetto_path: graphql_dashboard.detailed_traces_trace_path(trace.id) } %></td>
+            <td><%= link_to "Delete", "#", data: { perfetto_delete: graphql_dashboard.detailed_traces_trace_path(trace.id) }, class: "text-danger" %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+    <% if @last && @traces.size >= @last %>
+      <%= link_to("Previous >", graphql_dashboard.detailed_traces_traces_path(last: @last, before: @traces.last.begin_ms), class: "btn btn-outline-primary") %>
+    <% end %>
+  </div>
+</div>

data/lib/graphql/dashboard/views/graphql/dashboard/limiters/limiters/show.html.erb

@@ -0,0 +1,62 @@
+<% content_for(:title, @title) %>
+<% if @install_path %>
+  <div class="row mt-3">
+    <div class="col">
+      <h3><%= @title %></h3>
+      <p>It looks like this limiter isn't installed yet. <a href="<%= @install_path %>">Install it now</a>.</p>
+    </div>
+  </div>
+<% else %>
+  <div class="row mt-3 justify-content-between">
+    <div class="col-auto">
+      <h3><%= @title %></h3>
+    </div>
+    <div class="col-auto">
+      <div class="btn-group">
+        <%= link_to("This Hour", graphql_dashboard.limiters_limiter_path(params[:name], chart: "hour"), class: "btn btn-sm btn-outline-primary #{@chart_mode == "hour" ? "active" : "inactive"}", params: { chart: "hour" }) %>
+        <%= link_to("Today", graphql_dashboard.limiters_limiter_path(params[:name], chart: "day"), class: "btn btn-sm btn-outline-primary #{@chart_mode == "day" ? "active" : "inactive"}", params: { chart: "day" }) %>
+        <%= link_to("This Month", graphql_dashboard.limiters_limiter_path(params[:name], chart: "month"), class: "btn btn-sm btn-outline-primary #{@chart_mode == "month" ? "active" : "inactive"}", params: { chart: "month" }) %>
+      </div>
+    </div>
+    <div class="col-auto">
+      <%= form_tag graphql_dashboard.limiters_limiter_path(params[:name], chart: @chart_mode), method: "patch"  do %>
+        <%= submit_tag "#{@current_soft ? "Disable" : "Enable"} Soft Limiting", class: "btn btn-sm btn-outline-warning" %>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col ms-4">
+      <div id="limiter-histogram">
+        <table class="charts-css column multiple stacked show-labels hide-data show-primary-axis">
+          <thead>
+            <th>Date</th>
+            <th scope="col">Limited Requests</th>
+            <th scope="col">Unlimited Requests</th>
+          </thead>
+          <tbody>
+            <% @histogram.columns.each_with_index do |col, col_idx| %>
+              <tr>
+                <th scope="row" class="text-end"><%= col.label %></th>
+                <% col.values.each_with_index do |value, val_idx| %>
+                  <td id="data-<%= col_idx %>-<%= val_idx %>">
+                    <span class="data"><%= value.formatted_value %></span>
+                    <span class="tooltip"><%= value.label %>: <%= value.formatted_value %><br><%= col.label %></span>
+                  </td>
+                <% end %>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <%= content_tag "style", nonce: @csp_nonce do %>
+    <% @histogram.columns.each_with_index do |col, col_idx| %>
+      <% col_max = @histogram.max_column_value.to_f %>
+      <% col.values.each_with_index do |val, val_idx| %>
+        #data-<%= col_idx %>-<%= val_idx %> { --size: <%= val.value / col_max %>}
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/lib/graphql/dashboard/views/graphql/dashboard/not_installed.html.erb

@@ -0,0 +1,18 @@
+<% content_for(:title, "Operation Store") %>
+
+<div class="row">
+  <div class="col-md col-lg-8 mx-auto pt-4">
+    <div class="card mt-4">
+      <div class="card-body">
+        <div class="card-title">
+          <h2>
+            <%= @component_header_html %>
+          </h2>
+        </div>
+        <p class="card-text">
+          <%= @component_message_html %>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/graphql/dashboard/views/graphql/dashboard/operation_store/clients/_form.html.erb

@@ -0,0 +1,23 @@
+<%= form_tag((@client.persisted? ? graphql_dashboard.operation_store_client_path(name: @client.name) : graphql_dashboard.operation_store_clients_path), method: (@client.persisted? ? "patch" : "post")) do %>
+  <div class="row">
+    <label class="col-2 col-form-label">Name</label>
+    <div class="col">
+      <%= text_field_tag "client[name]", @client.name, class: "form-control", disabled: @client.persisted? %>
+      <div class="form-text">a unique identifier for this owner of persisted operations</div>
+    </div>
+  </div>
+  <div class="row">
+    <label class="col-2 col-form-label">Secret</label>
+    <div class="col">
+      <%= textarea_tag "client[secret]", @client.secret, class: "form-control" %>
+      <div class="form-text">authentication credential for <code>sync</code> transactions</div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-auto">
+      <%= submit_tag "Save", class: "btn btn-outline-primary" %>
+    </div>
+    <div class="col-auto">
+      <%= link_to "Back", graphql_dashboard.operation_store_clients_path, class: "btn btn-outline-secondary" %>
+    </div>
+<% end %>

data/lib/graphql/dashboard/views/graphql/dashboard/operation_store/clients/edit.html.erb

@@ -0,0 +1,21 @@
+<% content_for(:title, "Edit #{@client.name}") %>
+<div class="row">
+  <div class="col">
+    <h1>Edit <%= @client.name %></h1>
+  </div>
+<div>
+<%= render partial: "graphql/dashboard/operation_store/clients/form" %>
+
+<hr class="mt-5"/>
+<div class="row mt-5">
+  <div class="col">
+    <div class="alert alert-danger">
+      <h4>Delete <%= @client.name %></h4>
+      <p>If you delete this client, it will no longer be able to use stored operations.</p>
+      <p>There is no way to undo this action.</p>
+      <%= form_tag(graphql_dashboard.operation_store_client_path(name: @client.name), method: "delete") do %>
+        <%= submit_tag "Permanently Delete #{@client.name.inspect}", class: "btn btn-outline-danger" %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/lib/graphql/dashboard/views/graphql/dashboard/operation_store/clients/index.html.erb

@@ -0,0 +1,69 @@
+<% content_for(:title, "Clients") %>
+<div class="row mt-3 justify-content-between">
+  <div class="col-4">
+    <h3>
+      <%= pluralize(@clients_page.total_count, "Client") %>
+    </h3>
+  </div>
+  <div class="col-auto">
+    <%= link_to("New Client", graphql_dashboard.new_operation_store_client_path, class: "btn btn-outline-primary") %>
+  </div>
+</div>
+
+<table class="table table-striped">
+  <thead>
+    <tr>
+      <th><%= link_to("Name", graphql_dashboard.operation_store_clients_path, params: { order_by: "name", order_dir: ((@order_by == "name" && @order_dir != :desc) ? "desc" : "asc" )}) %></th>
+      <th>Operations</th>
+      <th>Created At</th>
+      <th>Last Updated</th>
+      <th><%= link_to("Last Used At",  graphql_dashboard.operation_store_clients_path, params: { order_by: "last_used_at", order_dir: ((@order_by == "last_used_at" && @order_dir != :desc) ? "desc": "asc")}) %></th>
+    </tr>
+  </thead>
+  <tbody>
+    <% if @clients_page.total_count == 0 %>
+      <tr>
+        <td colspan="5" class="text-center">
+          <em>To get started, create a <%= link_to "new client", graphql_dashboard.new_operation_store_client_path %>, then <%= link_to "sync operations", "https://graphql-ruby.org/operation_store/client_workflow.html" %> to your schema.</em>
+        </td>
+      </tr>
+    <% else %>
+      <% @clients_page.items.each do |client| %>
+        <tr>
+          <td><%= link_to(client.name, graphql_dashboard.edit_operation_store_client_path(name: client.name)) %></td>
+          <td>
+            <%= link_to(graphql_dashboard.operation_store_client_operations_path(client_name: client.name)) do %>
+              <%= client.operations_count %><% if client.archived_operations_count > 0 %> <span class="muted">(<%=client.archived_operations_count%> archived)</span><% end %>
+            <% end %>
+          </td>
+          <td><%= client.created_at %></td>
+          <td>
+            <% if client.operations_count == 0 %>
+              &mdash;
+            <% else %>
+              <%= client.last_synced_at %>
+            <% end %>
+          </td>
+          <td><%= client.last_used_at || "—" %></td>
+        </tr>
+      <% end %>
+    <% end %>
+  </tbody>
+</table>
+
+<div class="row">
+  <div class="col-auto">
+    <% if @clients_page.prev_page %>
+      <%= link_to("« prev", graphql_dashboard.operation_store_clients_path(per_page: params[:per_page], page: @clients_page.prev_page), class: "btn btn-outline-secondary") %>
+    <% else %>
+      <button class="btn btn-outline-secondary" disabled>« prev</button>
+    <% end %>
+  </div>
+  <div class="col-auto">
+    <% if @clients_page.next_page %>
+      <%= link_to("next »", graphql_dashboard.operation_store_clients_path(per_page: params[:per_page], page: @clients_page.next_page), class: "btn btn-outline-secondary") %>
+    <% else %>
+      <button class="btn btn-outline-secondary" disabled>next »</button>
+    <% end %>
+  </div>
+</div>

data/lib/graphql/dashboard/views/graphql/dashboard/operation_store/clients/new.html.erb

@@ -0,0 +1,7 @@
+<% content_for(:title, "New Client") %>
+<div class="row">
+  <div class="col">
+    <h1>New Client</h1>
+  </div>
+<div>
+<%= render partial: "graphql/dashboard/operation_store/clients/form" %>

data/lib/graphql/dashboard/views/graphql/dashboard/operation_store/index_entries/index.html.erb

@@ -0,0 +1,39 @@
+<% content_for(:title, "Index#{@search_term ? " - #{@search_term}" : ""}") %>
+<div class="row mt-2">
+  <h3>Schema Index</h3>
+  <div class="col">
+    <p style="margin-left: 15px;">
+      <%= pluralize(@index_entries_page.total_count, @search_term ? "result" : "entry") %>
+    </p>
+  </div>
+  <div class="col">
+    <form method="GET" action="<%= graphql_dashboard.operation_store_index_entries_path %>" style="margin-left: auto; margin-top:-5px;">
+      <div class="input-group">
+        <%= text_field_tag "q", @search_term, class: "form-control", placeholder: "Find types, fields, arguments, or enum values" %>
+        <input type="submit" value="Search" class="btn btn-outline-primary btn-sm"/>
+      </div>
+    </form>
+  </div>
+</div>
+<table class="table">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th># Usages</th>
+      <th>Last Used At</th>
+    </tr>
+  </thead>
+  <tbody>
+    <% @index_entries_page.items.each do |entry| %>
+      <tr>
+        <td><%= link_to(entry.name, graphql_dashboard.operation_store_index_entry_path(name: entry.name)) %></td>
+        <td><%= entry.references_count %><% if entry.archived_references_count.nil? %><span class="muted">(missing data - call `YourSchema.operation_store.reindex` to repair index)</span><% elsif entry.archived_references_count > 0 %> <span class="muted">(<%= entry.archived_references_count %> archived)</span><% end %></td>
+        <td><%= entry.last_used_at %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
+
+<%=
+# render_partial("_pagination")
+%>

data/lib/graphql/dashboard/views/graphql/dashboard/operation_store/index_entries/show.html.erb

@@ -0,0 +1,32 @@
+<% name = @chain.pop %>
+<% content_for(:title, "Index - #{@entry.name}") %>
+<div class="row mt-2">
+  <div class="col">
+    <%= link_to("Index", graphql_dashboard.operation_store_index_entries_path) %>
+    <% @chain.each do |c| %>
+      > <%= link_to(c.split(".").last, graphql_dashboard.operation_store_index_entry_path(name: c)) %>
+    <% end %>
+    > <%= name.split(".").last %>
+  </div>
+</div>
+<div class="row mt-2">
+  <div class="col">
+    <h3><%= name %></h3>
+    <p>
+      Used By:
+      <% if @operations.any? %>
+        <ul>
+          <% @operations.each do |operation| %>
+            <li>
+              <%= link_to(operation.name, graphql_dashboard.operation_store_operation_path(digest: operation.digest)) %><% if operation.is_archived %> <span class="muted">(archived)</span><% end %>
+            </li>
+          <% end %>
+        </ul>
+      <% else %>
+        <i>none</i>
+      <% end %>
+    </p>
+
+    <p>Last used at: <%= @entry.last_used_at || "—" %></p>
+  </div>
+</div>

data/lib/graphql/dashboard/views/graphql/dashboard/operation_store/operations/index.html.erb

@@ -0,0 +1,81 @@
+<div class="row mt-2">
+  <% if @client_operations %>
+    <%= content_for(:title, "#{params[:client_name]} Operations") %>
+    <div class="col">
+      <h3><%= params[:client_name] %></h3>
+      <ul class="nav nav-tabs">
+        <li class="nav-item">
+          <%= link_to "#{@unarchived_operations_count} Active", graphql_dashboard.operation_store_client_operations_path(client_name: params[:client_name]), class: "nav-link #{@is_archived ? "" : "active"}" %>
+        </li>
+        <li class="nav-item">
+          <%= link_to "#{@archived_operations_count} Archived", graphql_dashboard.archived_operation_store_client_operations_path(client_name: params[:client_name]), class: "nav-link #{@is_archived ? "active" : ""}" %>
+        </li>
+      </ul>
+    </div>
+  <% else %>
+    <%= content_for(:title, "Operations") %>
+    <div class="col">
+      <ul class="nav nav-tabs">
+        <li class="nav-item">
+          <%= link_to "#{@unarchived_operations_count} Active", graphql_dashboard.operation_store_operations_path, class: "nav-link #{@is_archived ? "" : "active"}" %>
+        </li>
+        <li class="nav-item">
+          <%= link_to "#{@archived_operations_count} Archived", graphql_dashboard.archived_operation_store_operations_path, class: "nav-link #{@is_archived ? "active" : ""}" %>
+        </li>
+      </ul>
+    </div>
+  <% end %>
+</div>
+
+<div class="row">
+  <div class="col">
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th><%= link_to "Name", graphql_dashboard.operation_store_operations_path({ order_by: "name", order_dir: params[:order_dir] == "asc" ? "desc" : "asc" }) %></th>
+          <% if @client_operations %>
+            <th>Alias</th>
+          <% else %>
+            <th># Clients</th>
+          <% end %>
+          <th>Digest</th>
+          <th><%= link_to "Last Used At", graphql_dashboard.operation_store_operations_path({ order_by: "last_used_at", order_dir: params[:order_dir] == "asc" ? "desc" : "asc" }) %></th>
+          <th>
+            <button class="btn btn-sm btn-outline-primary" data-archive-client="<%= params[:client_name] %>" data-archive-all="<%= params[:client_name] ? nil : "true" %>">
+              <%= @is_archived ? "Unarchive" : "Archive" %>
+            </button>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <% if @operations_page.total_count == 0 %>
+          <tr>
+            <td colspan="5" class="text-center">
+              <% if @is_archived %>
+                <em><%= link_to "Archived operations", "https://graphql-ruby.org/operation_store/server_management.html#archiving-and-deleting-data" %> will appear here.</em>
+              <% else %>
+                <em>Add your first stored operations with <%= link_to "sync", "https://graphql-ruby.org/operation_store/client_workflow.html" %>.</em>
+              <% end %>
+            </td>
+          </tr>
+        <% else %>
+          <% @operations_page.items.each do |operation| %>
+            <tr>
+              <td><%= link_to(operation.name, graphql_dashboard.operation_store_operation_path(digest: operation.digest)) %></td>
+              <% if @client_operations %>
+                <td><code><%= operation.operation_alias %></code></td>
+              <% else %>
+                <td><%= operation.clients_count %></td>
+              <% end %>
+              <td><code><%= operation.digest %></code></td>
+              <td><%= operation.last_used_at %></td>
+              <td>
+                <%= check_box_tag("value", (@client_operations ? operation.operation_alias : operation.digest), class: "archive-check form-check-input") %>
+              </td>
+            </tr>
+          <% end %>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</div>