Skip to content
This repository has been archived by the owner on Jan 15, 2019. It is now read-only.

[dev.icinga.com #1657] add livesearch to 'show hosts' #661

Closed
icinga-migration opened this issue Jun 15, 2011 · 41 comments
Closed

[dev.icinga.com #1657] add livesearch to 'show hosts' #661

icinga-migration opened this issue Jun 15, 2011 · 41 comments
Labels
Classic UI enhancement
Milestone
1.10

Comments

@icinga-migration
Copy link

This issue has been migrated from Redmine: https://dev.icinga.com/issues/1657

Created by mfriedrich on 2011-06-15 21:19:29 +00:00

Assignee: ricardo
Status: Resolved (closed on 2013-10-15 20:00:28 +00:00)
Target Version: 1.10
Last Update: 2014-12-08 09:32:34 +00:00 (in Redmine)

would be cool for icinga classicui, and can happen with those many proof of concepts we already did. once and for all, this shouldn't happen based on the status.dat (but could be enabled throughout a cfg.cfg option - this might cause problems with heavy ajax polling and diskreads!) but use something like a core api using query filters to get the host list out of memory instead of parsing a file over and over.

Attachments

Changesets

2013-09-23 20:23:09 +00:00 by kepi 027b596c61553e46e48b192e537529c4a44b82f2

classic-ui: added livesearch to menu

* added live search support for search in menu
* added jquery ui dependences (autocomplete, menu, position)

refs: #1657

Signed-off-by: Ricardo Bartels <ricardo@bitchbrothers.com>

2013-09-25 19:06:34 +00:00 by ricardo 9ed61e9fed3161a082132e3b51a4aaca501c336e

classic-ui: changed some values for live search #1657

* opening a host from search leads to status.cgi
* now you need enter at least 3 characters until search
requests status.cgi

refs: #1657

2013-09-26 11:48:12 +00:00 by ricardo eba45779460295ddccf561d56d81d51220e77d36

classic-ui: add special json ruslt for live search #1657

* new cgi_param "livesearchdata" should only used internally
* new function "show_live_search_data()"

To continue we need the changes from feature/add_partial_servicegroups-2740

refs: #1657

2013-09-26 14:24:30 +00:00 by ricardo 79e1aee7878fa40876e07de2f517ffa6c85979bd

classic-ui: live search request in status.cgi now complete #1657

* added hostgroups and servicegroups to output
* now all host get displayed properly

refs: #1657

2013-09-30 16:47:28 +00:00 by kepi c769d44f34f1cf7a581bef8f6c5c3d00904a0558

classic-ui: changes to livesearch

* live search now cache results from server
* search is done locally if there is cached result for
  start of term
* cache is expiring after 90 seconds
* adjust size of search window to fit frame

refs: #1657

Signed-off-by: Ricardo Bartels <ricardo@bitchbrothers.com>

2013-10-03 23:49:07 +00:00 by ricardo 5d000896d4bec0d518c32776c06b16083d506584

classic-ui: live search - little adaptations #1657

* shadow around the result list removed
* colon after category name removed
* focus to input box added. When clicked into imput box
  result list opens automatically

refs: #1657

2013-10-07 11:00:06 +00:00 by kepi 93af651

classic-ui: added livesearch to menu

* added live search support for search in menu
* added jquery ui dependences (autocomplete, menu, position)

refs: #1657

Signed-off-by: Ricardo Bartels <ricardo@bitchbrothers.com>

2013-10-07 11:00:07 +00:00 by ricardo 33246d4

classic-ui: changed some values for live search #1657

* opening a host from search leads to status.cgi
* now you need enter at least 3 characters until search
requests status.cgi

refs: #1657

2013-10-07 11:00:07 +00:00 by ricardo e9db519

classic-ui: add special json ruslt for live search #1657

* new cgi_param "livesearchdata" should only used internally
* new function "show_live_search_data()"

To continue we need the changes from feature/add_partial_servicegroups-2740

refs: #1657

2013-10-07 11:00:07 +00:00 by ricardo a0e24b2

classic-ui: live search request in status.cgi now complete #1657

* added hostgroups and servicegroups to output
* now all host get displayed properly

refs: #1657

2013-10-07 11:00:07 +00:00 by kepi 0a4bad0

classic-ui: changes to livesearch

* live search now cache results from server
* search is done locally if there is cached result for
  start of term
* cache is expiring after 90 seconds
* adjust size of search window to fit frame

refs: #1657

Signed-off-by: Ricardo Bartels <ricardo@bitchbrothers.com>

2013-10-07 11:00:50 +00:00 by ricardo cbdfd2c

classic-ui: live search - little adaptations #1657

* shadow around the result list removed
* colon after category name removed
* focus to input box added. When clicked into imput box
  result list opens automatically

refs: #1657

2013-10-07 23:52:52 +00:00 by ricardo d1333be

classic-ui: live search style adaptions #1657

* status style changed
* url getting properly encoded now

refs: #1657

2013-10-18 05:51:45 +00:00 by ricardo 6400160

classic-ui: changed delay for live search #1657

Set the delay to 700ms. Otherwise it would start
searching before finished typing.

refs: #1657

2013-10-18 05:55:16 +00:00 by ricardo cc6f77e

Merge branch 'feature/add-livesearch-to-menu-1657' into next

fixes: #1657

Relations:
@icinga-migration
Copy link
Author

Updated by mfriedrich on 2011-06-15 21:21:19 +00:00

http://andreaslagerkvist.com/jquery/live-search/

and/or how thruk does it, but add also state coloring in the background.

@icinga-migration
Copy link
Author

Updated by mfriedrich on 2011-11-04 08:12:06 +00:00

  • Target Version changed from 1.6 to 1.7

do some hacking together on osmc and see what might be doable.

@icinga-migration
Copy link
Author

Updated by 6uellerBpanda on 2011-12-02 08:37:17 +00:00

if possible also show servicegroup,service,.. categorized. like in icinga-web.

@icinga-migration
Copy link
Author

Updated by mfriedrich on 2012-04-03 14:03:43 +00:00

  • Target Version changed from 1.7 to 1.8

i don't think this can be done now. re-change if you think otherwise.

@icinga-migration
Copy link
Author

Updated by mfriedrich on 2012-05-05 11:46:02 +00:00

  • Status changed from New to Feedback
  • Priority changed from Normal to Low
  • Target Version deleted 1.8

@icinga-migration
Copy link
Author

Updated by ricardo on 2012-08-27 21:10:36 +00:00

  • File added classic_ui_search_draft.gif

Well. Still no code until now. But at least a design draft

JSON data:

{
   "search_result":{
      "host":[
         {
            "host_name":"host_a",
            "status":"UP"
         },
         {
            "host_name":"host_b",
            "status":"DOWN"
         }
      ],
      "service":[
         {
            "host_name":"host_a",
            "service_description":"HTTP",
            "status":"OK"
         },
         {
            "host_name":"host_a",
            "service_description":"FTP",
            "status":"WARNING"
         },
         {
            "host_name":"host_b",
            "service_description":"HTTP",
            "status":"OK"
         },
         {
            "host_name":"host_b",
            "service_description":"IMAP",
            "status":"UNKNOWN"
         }
      ],
      "hostgroup":[
         {
            "name":"host_group_a"
         },
         {
            "name":"host_group_b"
         }
      ],
      "servicegroup":[
         {
            "name":"service_group_a"
         },
         {
            "name":"service_group_b"
         }
      ]
   }
}

Search Box examples (examples!!!):
classic_ui_search_draft.gif

Caching:
The menu.html could request all searchable data every $TIMEOUT (default 60) seconds and store it in the browser memory as JSON array. When the users starts searching, the user is always requesting local data.

Behaviour:

  • type + Enter = current behaviour
  • type + selecting certain result = brings you directly to host/service/hostgroup/servicegroup
  • This can be done in jQuery or jQuery UI.
  • No discussion about the design for now (at least not until functionality is implemented)
  • search_result data names can be shortened to save memory/bandwidth
  • config vars could be added to JSON (timeout, min characters, ...)

Feel free to implement it, you will be my personal hero. And as I assume of every other Icinga user using Classic-UI.

Cheers Ricardo

@icinga-migration
Copy link
Author

Updated by mfriedrich on 2012-10-24 17:52:31 +00:00

  • Target Version set to 1.10

when #3391 is in the making, this would be possible, but still, icinga2 will be a requirement.

@icinga-migration
Copy link
Author

Updated by ricardo on 2013-02-20 23:31:45 +00:00

this might get somewhere soon. Let's see.

@icinga-migration
Copy link
Author

Updated by mfriedrich on 2013-07-20 12:37:46 +00:00

  • Target Version changed from 1.10 to 1.11

@icinga-migration
Copy link
Author

Updated by kepi on 2013-09-22 13:47:41 +00:00

  • File added 0001-classic-ui-added-livesearch-to-menu.patch
  • File added livesearch.png

Here is patch against 'next' git branch with live search feature added.

I didn't compile it - test needed. I may miss something as I created this on our server and put to git after that.

Also I never worked with makefiles before so please fix my changes if needed. There is autocomplete.js.in file in html/js directory which uses cgiurl 'makro' which need to be substituted.

Anyway live search working as supposed on our installation so please try and come back with suggestions.

ricardo - cache is not implemented for now. I think it needs to be implemented on API's side to work as supposed.

I tried to use slightly different approach than in draft. As "host / service" is really long. Hosts are simply list as first and then there is group of found services for every host.

Sorry this take so long.

livesearch.png

@icinga-migration
Copy link
Author

Updated by ricardo on 2013-09-25 19:44:12 +00:00

  • Category set to 52

Hi Kepi,

thanks so much for your patch. It worked instantly.

it lives for now in "feature/add-livesearch-to-menu-1657"

Next steps to do are:

  • add special JSON output for search including hostgroups and servicegroups
  • poll data every x seconds into local object
  • do the search locally and present the results
  • adjust the result list so that it doesn't glitch to the border on the right side

Cheers
Ricardo

@icinga-migration
Copy link
Author

Updated by kepi on 2013-09-25 20:03:54 +00:00

As for JSON output, you will prepare some special CGI or do you count with using more api views for now?

I'm still not sure about polling all data and local search. In fact you will drain much more resources with unnecessary polls - depending on use case. I.e. in my case I'm using search for about 5 % of my icinga uses. Most of time I'm using only TAC view. For me it will mean constant polling of API for no reason.

By the way, I'm using search feature of json API now. Isn't it much faster and "cheaper" to use it this way instead of fetching all server and service data constantly?

Local search can be done without any problem.

Fixing right side problem should be easy too.

Feel free to assign issue to me as long as we will decide about polling feature.

@icinga-migration
Copy link
Author

Updated by ricardo on 2013-09-26 14:41:07 +00:00

in current "feature/add-livesearch-to-menu-1657" I added a special request param "livesearchdata". This returns JSON data to use only in live search.

Initially I wanted to avoid that status.cgi gets request with every letter you type in. Because requesting status.cgi in big environments is very expensive.

And as you said, caching the data locally and polling it every x seconds, sucks as well.

How about this:

  • status.cgi will be requested only if the user typed at least 3 characters (as it is already in autocomplete.js)
  • if the user keeps typing, the filtering will be done locally in the browser and the result will be updated
  • if the user gets "below" 3 characters the request has to be done again.

This way we most likely request status.cgi only once during search and user experience is the same.

Now hostgroups and servicegroups get returned as well. Can we add them to the result list as well?

Thanks

Ricardo

@icinga-migration
Copy link
Author

Updated by kepi on 2013-09-26 14:45:56 +00:00

Can you upload me some json example so I can try? I don't have any icinga test machine now so it will be faster for me this way.

Your suggestion is good. It will be little harder to implement but more nice to servers.

@icinga-migration
Copy link
Author

Updated by ricardo on 2013-09-26 17:33:00 +00:00

  • File added livesearchdata.json

Of course.

I added "livesearchdata.json"

@icinga-migration
Copy link
Author

Updated by mfriedrich on 2013-09-26 17:42:05 +00:00

  • Assigned to set to ricardo

assigning to ricardo for now, i'm filtering for unassigned issues too.

@icinga-migration
Copy link
Author

Updated by kepi on 2013-09-27 09:17:41 +00:00

Please assign to me as I'm not able to do it myself.

@icinga-migration
Copy link
Author

Updated by ricardo on 2013-09-27 17:44:57 +00:00

It's not possible. I can't select your name as Assignee.

@icinga-migration
Copy link
Author

Updated by mfriedrich on 2013-09-27 17:49:13 +00:00

redmine only allows to assign issues to roles with a defined state (i.e. an icinga padawan, or a developer). or the original author of the ticket (i.e. to ask for further input).

as remarked via mail to ricardo, it would be reasonable to get you into the padawan program, but that's ricardo's decision being responsible here.

@icinga-migration
Copy link
Author

Updated by kepi on 2013-09-29 19:51:45 +00:00

  • File added 0002-classic-ui-changes-to-livesearch.patch

@dnsmichi: no need for now in this case. I don't have much time for hacking icinga unfortunately :)

@ricardo: patch against feature/add-livesearch-to-menu-1657 is attached.

It simply query server for first term entered (longer than 3 characters as you changed) and cache this result. When new term is entered, first 3 characters are compared to cache and if match is found, search is done locally.

I also set expire for cache to 90 seconds (you can easily change value to whatever suits you best on line 9).

Hostgroups and servergroups are included as well.

I also found that you made some typo in url (in part prepare hosts data). There was status.cgi instead of extinfo, so I corrected thas to correct value. At least I suppose whole purpose of this search is to jump quickly to host detail.

Width of query window is now smaller so it don't overlap.

As before, I test it only locally so please test.

@icinga-migration
Copy link
Author

Updated by ricardo on 2013-10-02 00:53:05 +00:00

  • File added livesearch_0.2.png

Thank you so much Kepi. This is getting very close to what I imagined.

submitted an update to "feature/add-livesearch-to-menu-1657"

  • The link for the hosts to status.cgi is correct. In 90% of the cases you search a host to you want to know how the services are doing.
  • The search results for live search and using "search_string" in status.cgi are now the same.
  • all the other information are in the commit message.

do you like the changes? Any more ideas/suggestions?

@dnsmichi: could this still make it into 1.10?

@everybody: TEST IT and tell me what you think.

thanks again.

Cheers
Ricardo

livesearch_0.2.png

@icinga-migration
Copy link
Author

Updated by kepi on 2013-10-02 08:01:49 +00:00

I agree that in most cases you want to know how services are doing but you can see it directly in live search. This is why I supposed it is better to go to detail directly. Anyway now I'm in doubt and you are probably right :) so keep it the way you change it.

Looking forward to see this on our servers :)

@icinga-migration
Copy link
Author

Updated by mfriedrich on 2013-10-02 11:14:59 +00:00

i did not have the time to test the branch yet.

feature freeze is tomorrow.

let the team decide, write to the team list (with some additional screenshots in action).

@icinga-migration
Copy link
Author

Updated by mfriedrich on 2013-10-02 23:34:00 +00:00

  • i don't understand the color schema - why is it green/purple/red? which pattern matches here?

  • further, the surrounding shadow is very irritating - keep it more simple. i.e. make categories bold or italic.

  • remove the colon after the attributes.

  • if i remove the cursor, and then click again into the search bar (having 4 characters entered there), the livesearch expects me to add or delete something. i would expect that (char >= 3 && mouse event) also triggers the popup.

other than that, it's pretty fast :)

@icinga-migration
Copy link
Author

Updated by elagon on 2013-10-03 08:56:25 +00:00

I think colors reflects statuses :)
I like to have the font a little bigger, may be the same as of the rest of the page
The shadow distracts a little, like Michael said, I would prefer a simpler view
I'm having a similar issue, when i press the super key the result box disappear and the only way to have it back is to delete a char and type i back

@icinga-migration
Copy link
Author

Updated by kepi on 2013-10-03 08:59:22 +00:00

About last issue: I think this behavior is pretty normal. You can trigger the popup again with down arrow.

@icinga-migration
Copy link
Author

Updated by ricardo on 2013-10-03 11:34:44 +00:00

dnsmichi wrote:

  • i don't understand the color schema - why is it green/purple/red? which pattern matches here?

it's the status of the object (OK/DOWN/CRITICAL/...) with the color schema of tac header

  • further, the surrounding shadow is very irritating - keep it more simple. i.e. make categories bold or italic.

The shadow is irritating? I thought it is better to distinguish it from the rest of the menu behind it. Didn't want to make it bold or italic to prevent a line break if it's not necessary.

  • remove the colon after the attributes.

Yup, no problem.

  • if i remove the cursor, and then click again into the search bar (having 4 characters entered there), the livesearch expects me to add or delete something. i would expect that (char >= 3 && mouse event) also triggers the popup.

will arrow down work for you? Otherwise you have to click somewhere else in menu to lose focus on the search box and to make the results disappear.

@icinga-migration
Copy link
Author

Updated by ricardo on 2013-10-04 00:24:15 +00:00

  • Target Version changed from 1.11 to 1.10

in current "feature/add-livesearch-to-menu-1657"

  • removed shadow
  • removed colons
  • added focus on search box. If search box gets focus, autocomplete opes automatically

how about this?

Cheers
Ricardo

@icinga-migration
Copy link
Author

Updated by mfriedrich on 2013-10-04 14:51:48 +00:00

ricardo wrote:

dnsmichi wrote:
> - i don't understand the color schema - why is it green/purple/red? which pattern matches here?

it's the status of the object (OK/DOWN/CRITICAL/...) with the color schema of tac header

ah ok, my bad. i'm not really bringing the color into relation with a status, but that's obviously just my "i click on the total problems url in tac header only" behaviour.

good idea.

> - further, the surrounding shadow is very irritating - keep it more simple. i.e. make categories bold or italic.

The shadow is irritating? I thought it is better to distinguish it from the rest of the menu behind it. Didn't want to make it bold or italic to prevent a line break if it's not necessary.

not sure about that. the borders of the result dropdown could be made more emphasized, because you're right, the background contrast is awful with that mix of black/white/grey colors.

> - remove the colon after the attributes.

Yup, no problem.

> - if i remove the cursor, and then click again into the search bar (having 4 characters entered there), the livesearch expects me to add or delete something. i would expect that (char >= 3 && mouse event) also triggers the popup.

will arrow down work for you? Otherwise you have to click somewhere else in menu to lose focus on the search box and to make the results disappear.

mouse event is perfectly fine like it behaves now:

  • click somewhere else, livesearch disappears
  • click into search form, livesearch appears and you can change the value string by typing

i'd say this is pretty awesome for now :)

any special changes to the filestructure, i.e. new folders for javascript files? packagers might wanna know.

@icinga-migration
Copy link
Author

Updated by mfriedrich on 2013-10-04 14:51:57 +00:00

  • Priority changed from Low to Normal

@icinga-migration
Copy link
Author

Updated by kepi on 2013-10-04 18:58:16 +00:00

  • File added menu-cleaner.png

> The shadow is irritating? I thought it is better to distinguish it from the rest of the menu behind it. Didn't want to make it bold or italic to prevent a line break if it's not necessary.

not sure about that. the borders of the result dropdown could be made more emphasized, because you're right, the background contrast is awful with that mix of black/white/grey colors.

I think maybe this could look more clean if you set white background and add something like color border to left side instead of full color background, something like this (only quick mockup):

menu-cleaner.png

@icinga-migration
Copy link
Author

Updated by mfriedrich on 2013-10-04 20:16:46 +00:00

+1 for the removed background colors and only adding them on the left side. looks much more clean and focused.

not sure about the header sections though - maybe that's too much the same of the original layout and may confuse users in their way of clicking or looking for information.

@icinga-migration
Copy link
Author

Updated by kepi on 2013-10-04 20:37:02 +00:00

I was focusing only on normal lines, not headers. As I said, only quick mockup. Simply white background with bold font should be enough or something like that.

@icinga-migration
Copy link
Author

Updated by ricardo on 2013-10-05 09:39:16 +00:00

any special changes to the filestructure, i.e. new folders for javascript files? packagers might wanna know.

no, only new files which are by default included in the jquery-ui package

I really like Kepis approach. looks much more eye friendly.

Unfortunately I don't have time to add this the next few days. Damn.

@icinga-migration
Copy link
Author

Updated by mfriedrich on 2013-10-06 12:48:51 +00:00

since you're really wanting it in 1.10 you still got time for beautification (i guess that's how it's called) til beta time in ~1,5 weeks. feature freeze is only meant to take a cut and do not add any additional features, while working on the rest towards the final release - which i guess will be the case here, working on it.

so please merge the feature branch into next, and then we'll see about some changes in layout and style.

@icinga-migration
Copy link
Author

Updated by kepi on 2013-10-06 12:53:51 +00:00

ricardo, if there will be no other way, I can prepare those styles by the end of next week. I'll be on holiday but if this should stop including in next version I can find some time with computer there.

@icinga-migration
Copy link
Author

Updated by mfriedrich on 2013-10-07 11:04:37 +00:00

i've rebased the branch against current 'next' - please keep that in mind when you fetch the latest changes.

the rebased branch is now merged into next too.

@icinga-migration
Copy link
Author

Updated by ricardo on 2013-10-08 00:00:31 +00:00

you are on holidays as well?

just took some minutes to change the style. How do you like it now?

Also added url encoding to hosts/services/hostgroups/servicegroups names.

Used the rebased branch.

@icinga-migration
Copy link
Author

Updated by mfriedrich on 2013-10-14 22:31:31 +00:00

latest and greatest is in 'next'. what's missing now?

@icinga-migration
Copy link
Author

Updated by ricardo on 2013-10-15 20:00:28 +00:00

  • Status changed from Feedback to Resolved

Was testing it in a live environment with some proper data. Works quite good. But we should recommend a modern browser to use it. There is a bit of javascript processing power needed in big environments.

@icinga-migration
Copy link
Author

Updated by mfriedrich on 2014-12-08 09:32:34 +00:00

  • Project changed from 19 to Core, Classic UI, IDOUtils
  • Category changed from 52 to Classic UI

@icinga-migration icinga-migration added this to the 1.10 milestone Jan 17, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Classic UI enhancement
Projects
None yet
Milestone
1.10
Development

No branches or pull requests
1 participant
@icinga-migration