Add quick navigation box for Agents

app/assets/javascripts/application.js.coffee.erb

@@ -54,7 +54,30 @@ $(document).ready ->
   if $(".flash").length
     setTimeout((-> $(".flash").slideUp(-> $(".flash").remove())), 5000)
 
-  # Agent Show
+  # Agent Navigation
+  $agentNavigate = $('#agent-navigate')
+  $agentNavigate.typeahead(
+    minLength: 0,
+    items: 15,
+    source: agentNames
+  ).on("change", (e) ->
+    if agentPaths[$agentNavigate.val()]
+      $('#agent-navigate').closest(".navbar-search").find(".spinner").show();
+      window.location = agentPaths[$agentNavigate.val()]
+  ).on("focus", (e) ->
+    $agentNavigate.val ''
+  ).on("blur", (e) ->
+    $agentNavigate.val ''
+  )
+
+  # Pressing '/' selects the search box.
+  $("body").on "keypress", (e) ->
+    if e.keyCode == 47 # The '/' key
+      if e.target.nodeName == "BODY"
+        e.preventDefault()
+        $agentNavigate.focus()
+
+# Agent Show
   fetchLogs = (e) ->
     agentId = $(e.target).closest("[data-agent-id]").data("agent-id")
     e.preventDefault()
@@ -85,7 +108,7 @@ $(document).ready ->
 
   $("#agent_type").on "change", ->
     if window.jsonEditor?
-      $(".spinner").fadeIn();
+      $("#agent-spinner").fadeIn();
       $("#agent_source_ids").select2("val", {});
       $(".event-descriptions").html("").hide()
       $.getJSON "/agents/type_details", { type: $(@).val() }, (json) =>
@@ -104,7 +127,7 @@ $(document).ready ->
         window.jsonEditor.json = json.options
         window.jsonEditor.rebuild()
 
-        $(".spinner").stop(true, true).fadeOut();
+        $("#agent-spinner").stop(true, true).fadeOut();
 
   $("#agent_type").change() if $("#agent_type").length
 

app/assets/stylesheets/application.css.scss.erb

@@ -51,10 +51,6 @@ table.events {
   margin-left: 0 !important;
 }
 
-#job-indicator, #event-indicator {
-  display: none;
-}
-
 img.odin {
   position: relative;
   top: -32px;
@@ -86,14 +82,25 @@ img.spinner {
   overflow: hidden;
 }
 
+// Navbar
+
+#job-indicator, #event-indicator {
+  display: none;
+}
+
+.navbar-search > .spinner {
+  position: absolute;
+  top: -1px;
+  right: 1px;
+}
+
 // Flash
 
 .flash {
   position: fixed;
-  width: 500px;
+  width: 210px;
   z-index: 99999;
-  top: 1px;
-  margin-left: 250px;
+  right: 20px;
 
   .alert {
   }

app/views/agents/edit.html.erb

@@ -4,7 +4,7 @@
       <div class="page-header">
         <h2>
           Editing your <%= @agent.short_type %>
-          <%= image_tag "spinner-arrows.gif", :class => "spinner" %>
+          <%= image_tag "spinner-arrows.gif", :class => "spinner", :id => 'agent-spinner' %>
         </h2>
       </div>
 

app/views/agents/new.html.erb

@@ -4,7 +4,7 @@
       <div class="page-header">
         <h2>
           Create a new Agent
-          <%= image_tag "spinner-arrows.gif", :class => "spinner" %>
+          <%= image_tag "spinner-arrows.gif", :class => "spinner", :id => 'agent-spinner' %>
         </h2>
       </div>
 

app/views/layouts/_navigation.html.erb

@@ -9,11 +9,18 @@
 
 <ul class="nav pull-right">
   <% if user_signed_in? %>
+
+    <form class="navbar-search pull-left">
+      <input type="text" class="search-query" id='agent-navigate' autocomplete="off" placeholder="Search">
+      <%= image_tag "spinner-arrows.gif", :class => "spinner" %>
+    </form>
+
     <li id='job-indicator'>
       <a href="/delayed_job">
         <span class="badge"><i class="icon-refresh icon-white"></i> <span class='number'>0</span></span>
       </a>
     </li>
+
     <li id='event-indicator'>
       <a href="#">
         <span class="badge"><i class="icon-random icon-white"></i> <span class='number'>0</span> new events</span>
@@ -45,3 +52,4 @@
     </ul>
   </li>
 </ul>
+

app/views/layouts/application.html.erb

@@ -32,5 +32,15 @@
         </div>
       </div>
     </div>
+
+    <script>
+      var agentPaths = <%= Utils.jsonify(current_user.agents.inject({}) {|m, a| m[a.name] = agent_path(a) unless a.new_record?; m }) %>;
+      agentPaths["All Agents Index"] = <%= Utils.jsonify agents_path %>;
+      agentPaths["New Agent"] = <%= Utils.jsonify new_agent_path %>;
+      agentPaths["Account"] = <%= Utils.jsonify edit_user_registration_path %>;
+      agentPaths["Events Index"] = <%= Utils.jsonify events_path %>;
+      var agentNames = [];
+      $.each(agentPaths, function(name, v) { agentNames.push(name); });
+    </script>
   </body>
 </html>

lib/utils.rb

@@ -51,4 +51,8 @@ module Utils
       result
     end
   end
+
+  def self.jsonify(thing)
+    thing.to_json.gsub('</', '<\/').html_safe
+  end
 end