ubicloud/views/postgres/charts.erb

<% @enable_echarts = true %>

<div id="metrics-container" class="p-6" data-metrics-url="<%= path(@pg) %>">
  <% 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: "#{path(@pg)}/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: "#{path(@pg)}/metric-destination", role: :form, method: :post, id: "form-pg-md-create") do %>
              <%== part("components/form/submit_button", text: "Create", extra_class: "metric-destination-create-button") %>
            <% end %>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>