Giter Club home page Giter Club logo

Comments (12)

keymon avatar keymon commented on July 22, 2024

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?

from gdash.

bitflingr avatar bitflingr commented on July 22, 2024

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.

from gdash.

bitflingr avatar bitflingr commented on July 22, 2024

I have a commit that adds search, its in bitflingr@ca1733b 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.

from gdash.

keymon avatar keymon commented on July 22, 2024

That is so cool! I love it 👍

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.
    double_selection
  • Is it possible to trigger the search just as soon as you press "enter" or select one of the suggestions

from gdash.

keymon avatar keymon commented on July 22, 2024

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.

from gdash.

bitflingr avatar bitflingr commented on July 22, 2024

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.

from gdash.

keymon avatar keymon commented on July 22, 2024

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) {

from gdash.

bitflingr avatar bitflingr commented on July 22, 2024

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?

from gdash.

bitflingr avatar bitflingr commented on July 22, 2024

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.

from gdash.

keymon avatar keymon commented on July 22, 2024

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

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.

from gdash.

bitflingr avatar bitflingr commented on July 22, 2024

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.

from gdash.

falkenbt avatar falkenbt commented on July 22, 2024

can we close this issue?

from gdash.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.