Auto Update navbar

app/controllers/mission_control/jobs/internal_api/navigation_controller.rb

@@ -0,0 +1,12 @@
+class MissionControl::Jobs::InternalApi::NavigationController < MissionControl::Jobs::ApplicationController
+  include ActionView::Helpers::NumberHelper
+  include MissionControl::Jobs::NavigationHelper
+
+  def index
+    @navigation_sections = navigation_sections
+
+    render partial: "layouts/mission_control/jobs/navigation_update", locals: {
+      section: params[:section].to_sym
+    }
+  end
+end

app/views/layouts/mission_control/jobs/_navigation.html.erb

@@ -1,9 +1,81 @@
-<div class="tabs is-boxed">
+<div class="tabs is-boxed" id="navigation-sections">
   <ul>
-    <% navigation_sections.each do |key, (label, url)| %>
-      <li class="<%= "is-active" if key == current_section %>">
-        <%= link_to label, url %>
-      </li>
-    <% end %>
+    <li class="is-active">
+      <a href="#">
+        <span class="is-skeleton">Loading...</span>
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        <span class="is-skeleton">Loading...</span>
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        <span class="is-skeleton">Loading...</span>
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        <span class="is-skeleton">Loading...</span>
+      </a>
+    </li>
   </ul>
 </div>
+
+<script>
+  if (typeof navigationInterval === "undefined") {
+    var navigationInterval = null;
+  }
+
+  document.addEventListener("turbo:load", () => {
+    if (!window.Navigation || typeof window.Navigation.currentSection === 'undefined') {
+      window.Navigation = {
+        currentSection: "<%= @current_section %>",
+
+        changeSection(section) {
+          this.currentSection = section;
+        }
+      };
+
+      updateNavbarData();
+      startNavigationInterval();
+    } else {
+      window.Navigation.currentSection = "<%= @current_section %>";
+    }
+  });
+
+  document.addEventListener("turbo:visit", () => {
+    clearInterval(navigationInterval);
+    startNavigationInterval();
+  });
+
+  document.addEventListener('click', function (event) {
+    if (event.target.matches('[data-action="changeNavtab"]')) {
+      const newSection = event.target.dataset.newsection;
+      updateNavbarData(newSection);
+    }
+  });
+
+  function startNavigationInterval() {
+    if (navigationInterval != null)
+      clearInterval(navigationInterval);
+
+    navigationInterval = setInterval(updateNavbarData, 2000);
+  }
+
+  function updateNavbarData(forcedSection) {
+    const urlParams = new URLSearchParams(window.location.search);
+    const newSection = forcedSection == null ? window.Navigation.currentSection : forcedSection;
+
+    fetch(`<%= internal_api_navigation_index_path %>&server_id=${urlParams.get('server_id')}&section=${newSection}`)
+      .then(response => response.text())
+      .then(html => {
+        const navigationSections = document.querySelector('#navigation-sections');
+        if (navigationSections) {
+          navigationSections.innerHTML = html;
+        }
+      })
+      .catch(error => console.error("Error fetching navigation update:", error));
+  }
+</script>

app/views/layouts/mission_control/jobs/_navigation_update.html.erb

@@ -0,0 +1,7 @@
+<ul>
+  <% @navigation_sections.each do |key, (label, url)| %>
+    <li class="<%= "is-active" if key == section %>">
+      <%= link_to label, url, data: { action: "changeNavtab", newSection: key } %>
+    </li>
+  <% end %>
+</ul>

config/routes.rb

@@ -26,6 +26,10 @@
   # Allow referencing urls without providing an application_id. It will default to the first one.
   resources :queues, only: [ :index, :show ]
 
+  namespace :internal_api do
+    resources :navigation, only: [ :index ]
+  end
+
   resources :jobs, only: :show
   resources :jobs, only: :index, path: ":status/jobs"