Dashboard search

[milosgajdos]

Not sure where I could submit a feature request, but it would be awesome if GDash had a search for dashboards. We have quite a few dashboards and it gets a bit annoying to search for them manually :)

[keymon]

It would be great. Maybe we could use pure javascript to implement that. Maybe we can add a class to the dashboard links in the menus. The javascript could search for matching text in this items and open the link selected.

Can anybody with a web-development background help here?

[bitflingr]

I have a forked version where i have added search for 'machines'. The search bar was in the top nav and was using bootstrap typeahead. Ill see if i can easily port that over to this repo this weekend.

[bitflingr]

I have a commit that adds search, its in https://github.com/bitflingr/gdash/commit/ca1733bac684bfc90c87b23084491320742a890d if you would like to review it. Ill make a pull request then. It will search for graphs based on name and submits it to new /search endpoint. It will then redirect to that dashboard. It also handles if it could not find the dashboard and throw a 'pretty' error.

[keymon]

That is so cool! I love it :+1:

I would suggest some improvements:

• Can the browser history be disabled? Because when I try to search, my old searches history appears overlying the suggestions. I attach an screenshot.
• Is it possible to trigger the search just as soon as you press "enter" or select one of the suggestions

[keymon]

I found a problem when you got several dashboards with the same name in different categories. Several different suggestions with that name appear, and when you search it, it does not anything (white page).

One solution could be show the suggestions as: category/dashboard_name

• dev/core
• qa/core
• live/core

Then, you can call the endpoint as http://localhost:3000/search?category=dev&dashboard=core

Apart of that, great job, a very nice feature.

[bitflingr]

Hey @keymon I was not able to reproduce the browser autocomplete but i just added autocomplete="off" to the input tag which should fix the first issue you brought up. As for hitting enter, that seems to work if you hit enter when you 'arrow' through the list and hit enter again to search. however if you click on the list it will fill the text field and i think you lose focus which is why when hitting enter it does not submit the search. Ill try and fix that but will tackle the 'same dash name' first.

[keymon]

Yes, the autocomplete="off" actually does the trick. I found problems using the arrows in firefox, I sent a PR to fix it.

Pressing enter twice is Ok.

This changes does the trick of focusing after clicking.

diff --git a/public/js/bootstrap-typeahead.js b/public/js/bootstrap-typeahead.js
index 1298c4d..2f973ca 100644
--- a/public/js/bootstrap-typeahead.js
+++ b/public/js/bootstrap-typeahead.js
@@ -237,6 +237,7 @@
       e.stopPropagation()
       e.preventDefault()
       this.select()
+      this.$element.focus()
     }

   , mouseenter: function (e) {

[bitflingr]

Ah, yes that fixes it but I went and downloaded the latest of bootstrap-typeahead which had that fix as well. I figured it would be alright since we were not using typeahead till now. Im wondering if we should update the rest of the js?

[bitflingr]

Also I came to find that Typeahead does not really support a way to update more than one field and im not a proficient js guy but I found someone who extended bootstrap typeahead and would fit perfectly with what we wanted to do. http://redlab.github.com/bootstrap-ext/typeaheadmap.html. I'm going to try and plug this in. Let me know what you think.

[keymon]

Actually I think that is better keep only one search dialog, but include the category in the name of the dashboard. Like here:

I tried to implement the idea in my branch, https://github.com/keymon/gdash/tree/wip_search. I also added the functionality of returning several dashboard if the match. Right now, the search looks for equality on the name, but we implement partial searches easily.

[bitflingr]

Oh i was thinking of having the second input be hidden. but we can do this too. We just pull in the logic of parsing the 'type/dashboard' in the search controller. I was just thinking that with the second hidden input we would have better control of weird searches coming through. Ill pull your merge in and add the parsing in the search later today. Ill open another issue about updating bootstrap and jquery as well.

[falkenbt]

can we close this issue?