114 lines
5.3 KiB
Plaintext
114 lines
5.3 KiB
Plaintext
<% @enable_echarts = true %>
|
|
|
|
<div id="metrics-container" class="p-6" data-metrics-url="<%= "#{@project_data[:path]}#{@pg.path}" %>">
|
|
<% if @pg.display_state != "creating" %>
|
|
<div class="mb-4 flex gap-2 justify-end">
|
|
<select
|
|
id="time-range"
|
|
class="py-1.5 md:align-top rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
|
|
name="time-range"
|
|
>
|
|
<option value="30m">Last 30 minutes</option>
|
|
<option value="1h" selected>Last 1 hour</option>
|
|
<option value="3h">Last 3 hours</option>
|
|
<option value="6h">Last 6 hours</option>
|
|
<option value="12h">Last 12 hours</option>
|
|
<option value="1d">Last 1 day</option>
|
|
<option value="2d">Last 2 days</option>
|
|
<option value="7d">Last 7 days</option>
|
|
<option value="30d">Last 30 days</option>
|
|
</select>
|
|
<%== part("components/button", attributes: {id: "refresh-button"}, text: " Refresh", type: "primary", icon: "hero-refresh") %>
|
|
</div>
|
|
<div class="grid grid-cols-1 xl:grid-cols-2 gap-4 border-t-0">
|
|
<% Metrics::POSTGRES_METRICS.each do |key, metric| %>
|
|
<div class="p-4 bg-gray-50 rounded-lg border border-gray-100">
|
|
<h4 class="text-sm font-medium text-gray-900 mb-2"><%= metric.name %></h4>
|
|
<p class="text-xs text-gray-500 mt-2"><%= metric.description %></p>
|
|
<div
|
|
class="metric-chart h-64 w-full"
|
|
id="<%= key %>-chart"
|
|
data-metric-key="<%= key %>"
|
|
data-metric-unit="<%= metric.unit %>"
|
|
>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% else %>
|
|
<div class="flex flex-col items-center justify-center h-full">
|
|
<h2 class="text-2xl font-semibold text-gray-900">No metrics available</h2>
|
|
<p class="text-gray-500 mt-2">Metrics will be available once the database is running.</p>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="md:flex md:items-center md:justify-between pb-2 lg:pb-4">
|
|
<div class="min-w-0 flex-1">
|
|
<h3 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-2xl sm:tracking-tight">
|
|
Metric Destinations
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
|
|
<table class="min-w-full divide-y divide-gray-300">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">URL</th>
|
|
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Username</th>
|
|
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Password</th>
|
|
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200 bg-white">
|
|
<% @pg.metric_destinations.each do |md| %>
|
|
<tr>
|
|
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6"><%= md.url %></td>
|
|
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6"><%= md.username %></td>
|
|
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">-</td>
|
|
<td
|
|
id="md-delete-<%=md.ubid %>"
|
|
class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"
|
|
>
|
|
<%== part("components/delete_button", url: "#{@project_data[:path]}#{@pg.path}/metric-destination/#{md.ubid}", text: "") %>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
<tr>
|
|
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
|
|
<%== part("components/form/text", name: "url", attributes: { form: "form-pg-md-create", required: true }) %>
|
|
</td>
|
|
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
|
|
<%== part("components/form/text", name: "username", attributes: { form: "form-pg-md-create", required: true }) %>
|
|
</td>
|
|
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
|
|
<%== part(
|
|
"components/form/text",
|
|
name: "metric-destination-password",
|
|
type: "password",
|
|
attributes: {
|
|
required: true,
|
|
form: "form-pg-md-create",
|
|
autocomplete: "new-password"
|
|
},
|
|
extra_class: "metric-destination-password"
|
|
) %>
|
|
</td>
|
|
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
|
|
<form
|
|
action="<%= "#{@project_data[:path]}#{@pg.path}/metric-destination" %>"
|
|
role="form"
|
|
method="POST"
|
|
id="form-pg-md-create"
|
|
>
|
|
<%== csrf_tag("#{@project_data[:path]}#{@pg.path}/metric-destination") %>
|
|
<%== part("components/form/submit_button", text: "Create", extra_class: "metric-destination-create-button") %>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|