show.html.erb in mission_control-servers-0.2.0

- old
+ new
@@ -40,54 +40,71 @@
 
     </span>
   </div>
 </div>
 
-<% @services.each do |hostname, services| %>
-  <div class="py-4 sm:py-8">
-    <div class="mx-auto max-w-7xl px-6 lg:px-8">
-      <div class="mx-auto max-w-2xl lg:max-w-none">
-        <div class="text-center">
-          <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"><%= hostname %></h2>
-        </div>
-        <dl class="mt-8 grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
-          <%= turbo_frame_tag dom_id(@project, [hostname, :cpu_usage].join('-')),
-            src: project_dashboards_cpu_usage_path(project_id: @project.token, hostname: hostname),
-            "data-controller": "refresh",
-            "data-refresh-src-value": project_dashboards_cpu_usage_path(project_id: @project.token, hostname: hostname),
-            "data-refresh-interval-value": 30000 %>
+<%= tag.div data: { controller: "tabs", "tabs-refresh-interval-value": (params[:interval].to_i * 1000 || 10_000 ) } do %>
+  <div class="mt-3">
+    <div class="">
+      <!-- Current: "text-gray-900", Default: "text-gray-500 hover:text-gray-700" -->
+      <nav class="isolate flex divide-x divide-gray-200 dark:divide-gray-500 rounded-lg shadow" aria-label="Tabs">
+        <% @services.each_with_index do |(hostname, services), index| %>
+          <% first_tab_class = index.zero? ? "rounded-l-lg" : "" %>
+          <% last_tab_class = index == @services.length - 1 ? "rounded-r-lg" : "" %>
+          <%= tag.a "#",
+            "data-action": "click->tabs#changeTab",
+            "data-target": hostname,
+            "data-tabs-target": "link",
+            class: "tab-link flex items-center justify-center #{first_tab_class} #{last_tab_class}" do %>
+            <%= hostname %>
+          <% end %>
+        <% end %>
+      </nav>
+    </div>
+  </div>
 
-          <%= turbo_frame_tag dom_id(@project, [hostname, :memory_usage].join('-')),
-            src: project_dashboards_memory_usage_path(project_id: @project.token, hostname: hostname),
-            "data-controller": "refresh",
-            "data-refresh-src-value": project_dashboards_memory_usage_path(project_id: @project.token, hostname: hostname),
-            "data-refresh-interval-value": 30000 %>
+  <% @services.each do |hostname, services| %>
+    <%= tag.div id: [hostname, "tab-content"].join("-"), class: "py-4 sm:py-8 tab-content", "data-target": hostname, "data-tabs-target": "content" do %>
+      <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="mx-auto max-w-2xl lg:max-w-none">
+          <dl class="grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
+            <%= turbo_frame_tag dom_id(@project, [hostname, :cpu_usage].join('-')),
+              src: project_dashboards_cpu_usage_path(project_id: @project.token, hostname: hostname),
+              "data-controller": "refresh",
+              "data-refresh-src-value": project_dashboards_cpu_usage_path(project_id: @project.token, hostname: hostname),
+              "data-refresh-interval-value": 30000 %>
 
-          <%= turbo_frame_tag dom_id(@project, [hostname, :disk_free].join('-')),
-            src: project_dashboards_disk_free_path(project_id: @project.token, hostname: hostname),
-            "data-controller": "refresh",
-            "data-refresh-src-value": project_dashboards_disk_free_path(project_id: @project.token, hostname: hostname),
-            "data-refresh-interval-value": 60000 %>
+            <%= turbo_frame_tag dom_id(@project, [hostname, :memory_usage].join('-')),
+              src: project_dashboards_memory_usage_path(project_id: @project.token, hostname: hostname),
+              "data-controller": "refresh",
+              "data-refresh-src-value": project_dashboards_memory_usage_path(project_id: @project.token, hostname: hostname),
+              "data-refresh-interval-value": 30000 %>
 
-          <%= turbo_frame_tag dom_id(@project, [hostname, :last_seen].join('-')),
-            src: project_dashboards_last_seen_path(project_id: @project.token, hostname: hostname),
-            "data-controller": "refresh",
-            "data-refresh-src-value": project_dashboards_last_seen_path(project_id: @project.token, hostname: hostname),
-            "data-refresh-interval-value": 60000 %>
-        </dl>
-        <dl class="mt-8 grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-1 lg:grid-cols-2">
-          <%= turbo_frame_tag dom_id(@project, [hostname, :cpu_history].join('-')),
-            src: project_dashboards_cpu_history_path(project_id: @project.token, hostname: hostname),
-            "data-controller": "refresh",
-            "data-refresh-src-value": project_dashboards_cpu_history_path(project_id: @project.token, hostname: hostname),
-            "data-refresh-interval-value": 60000 %>
-          <%= turbo_frame_tag dom_id(@project, [hostname, :memory_history].join('-')),
-            src: project_dashboards_memory_history_path(project_id: @project.token, hostname: hostname),
-            "data-controller": "refresh",
-            "data-refresh-src-value": project_dashboards_memory_history_path(project_id: @project.token, hostname: hostname),
-            "data-refresh-interval-value": 60000 %>
-        </dl>
+            <%= turbo_frame_tag dom_id(@project, [hostname, :disk_free].join('-')),
+              src: project_dashboards_disk_free_path(project_id: @project.token, hostname: hostname),
+              "data-controller": "refresh",
+              "data-refresh-src-value": project_dashboards_disk_free_path(project_id: @project.token, hostname: hostname),
+              "data-refresh-interval-value": 60000 %>
+
+            <%= turbo_frame_tag dom_id(@project, [hostname, :last_seen].join('-')),
+              src: project_dashboards_last_seen_path(project_id: @project.token, hostname: hostname),
+              "data-controller": "refresh",
+              "data-refresh-src-value": project_dashboards_last_seen_path(project_id: @project.token, hostname: hostname),
+              "data-refresh-interval-value": 60000 %>
+          </dl>
+          <dl class="mt-8 grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-1 lg:grid-cols-2">
+            <%= turbo_frame_tag dom_id(@project, [hostname, :cpu_history].join('-')),
+              src: project_dashboards_cpu_history_path(project_id: @project.token, hostname: hostname),
+              "data-controller": "refresh",
+              "data-refresh-src-value": project_dashboards_cpu_history_path(project_id: @project.token, hostname: hostname),
+              "data-refresh-interval-value": 60000 %>
+            <%= turbo_frame_tag dom_id(@project, [hostname, :memory_history].join('-')),
+              src: project_dashboards_memory_history_path(project_id: @project.token, hostname: hostname),
+              "data-controller": "refresh",
+              "data-refresh-src-value": project_dashboards_memory_history_path(project_id: @project.token, hostname: hostname),
+              "data-refresh-interval-value": 60000 %>
+          </dl>
+        </div>
       </div>
-    </div>
-  </div>
+    <% end %>
+  <% end %>
 <% end %>
-