Search on canvas #1429

davkal · 2016-05-04T10:30:14Z

Features:

adds a search field next to the topologies
highlight results on canvas as you type
non-matching nodes are grayed out
"prefix:" limits search to field label
apply query as filter on Enter
match metrics, e.g. cpu > 2 or memory > 4MB
store (pinned) searches in URL
sanitize search queries

Fixups:

check big topologies
tweak match overlays to be always at the top
sublables overlap labels in focus mode
removing all input fast brings previous input back

tomwilkie · 2016-05-06T09:42:55Z

if I type "python" and press enter, I get a blob/pill. I would like to be able to delete the blob/pill using backspace.

tomwilkie · 2016-05-06T11:08:35Z

Also I couldn't quite figure out how to do the metric search (less than, greater than etc). Perhaps making the hints clickable (to see next hint) would help with discoverability?

tomwilkie · 2016-05-06T11:10:34Z

Also switching between topologies seem to have some bugs. When I search for "python" (which is not in the label or sublabel) is highlights the command (good), but then I switch away from the containers view to the the processes view and back, and they are gone.

(But only briefly - they come back after a few seconds)

davkal · 2016-05-06T16:22:48Z

(But only briefly - they come back after a few seconds)

This is might be a backend issue. A lot of the time, the backend does not send the metadata field of nodes in the delta.

2opremio · 2016-05-08T20:13:13Z

Fixes #1299

foot · 2016-05-09T06:35:23Z

I have noticed that the BE doesn't send metadata initially (w/ addd nodes) too.

client/app/scripts/charts/node.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
-import classNames from 'classnames';
+import cx from 'classnames';


foot · 2016-05-09T07:54:46Z

2opremio · 2016-05-09T07:57:57Z

Extend Restructured Scope Docs #1416 with how to use search (e.g. labels and filters).

client/app/scripts/charts/nodes-chart.js

@@ -404,7 +401,7 @@ function mapStateToProps(state) {
  return {
    adjacentNodes: getAdjacentNodes(state),
    forceRelayout: state.get('forceRelayout'),
-    nodes: state.get('nodes'),
+    nodes: state.get('nodes').filter(node => !node.get('filtered')),


2opremio · 2016-05-09T13:03:32Z

The animations of the nodes are a bit strange. When hovering a node, it jumps and then the other nodes jump. Is that intentional?

(The small framerate makes it difficult to see in the gif above, but I hope it's enough to illustrate it)

Also, when clicking on a "searched" node, the surrounding nodes get grayed out, which I guess is consistent with the view, but maybe a bit unpleasant because you cannot see the edges properly (no strong opinions about this one though).

In that case I think there may be no need to gray out since the blue color boxes may be enough to distinguish which ones were filtered.

2opremio · 2016-05-09T13:13:10Z

In contrast mode the search box is not well defined since it has the same color as the background. Maybe it could be surrounded by an edge?

2opremio · 2016-05-09T13:16:45Z

SVG-generation misses the node tags (which may be intentional as well, I don't know):

normal:

svg:

client/app/scripts/utils/router-utils.js

-  return url.replace(new RegExp(SLASH, 'g'), SLASH_REPLACEMENT);
+  return url
+    .replace(new RegExp(PERCENT, 'g'), PERCENT_REPLACEMENT)
+    .replace(new RegExp(SLASH, 'g'), SLASH_REPLACEMENT);
 }


paulbellamy · 2016-05-09T15:00:32Z

This interacts strangely with filters.

If I select the Containers topology, then set Both for both filters, then select the Containers By Image topology, select System filter, and start doing a search for something which will only match application containers, it highlights the Containers topology link. But when I click back to the Containers view, it applies the filters and there are no nodes shown.

Edit: It's also when you change filters (which affect other topologies) with an active search query, the link highlight won't change.

paulbellamy · 2016-05-09T15:03:00Z

Also, getting some weird rendering glitches on the labels when hovering over non-matched nodes:

client/app/scripts/utils/search-utils.js

+  try {
+    return new RegExp(expression, options);
+  } catch (e) {
+    return new RegExp(_.escapeRegExp(expression), options);


foot · 2016-05-10T07:19:34Z

Code looking good. 👍

Some nice comments there.

2opremio · 2016-05-10T11:29:18Z

I have deployed this on the service, and as soon as I start playing with search the app gets overloaded and the probes drop reports. For instance.

<probe> ERRO: 2016/05/10 11:25:56.872675 Dropping report to 10.0.205.170:4040
<probe> ERRO: 2016/05/10 11:26:02.870855 Dropping report to 10.0.205.170:4040
<probe> ERRO: 2016/05/10 11:26:14.835464 Dropping report to 10.0.205.170:4040
<probe> ERRO: 2016/05/10 11:26:23.769282 Dropping report to 10.0.205.170:4040
<probe> ERRO: 2016/05/10 11:26:32.858937 Dropping report to 10.0.205.170:4040

This seems to be an exacerbation of #1457 but ~~probes don't seem to drop reports without search :(~~

EDIT: I do see reports being dropped but not as often

foot · 2016-05-11T15:40:10Z

More recent commits look fine too.

LGTMTM

* adds a search field next to the topologies * highlight results on canvas as you type * non-matching nodes are grayed out * "prefix:" limits search to field label

Examples: * cpu > 2 // means percent * memory > 4.5MB

Try regexp, escape if invalid

* Fix node-details-test for search * Label spacing and matched text truncation * Delete pinned search on backspace, add hint for metrics, escape % in URL * Fix text-bg on node highlight * Added tests for search-utils * Fix matching of other topologies, added comment re quick clear * s/cx/classnames/ * Ignore MoC keys when search in focus, blur on Esc * Fixes search term highlighting on-hover * Fix SVG exports * Fine-tuned search item rendering * Fixed search highlighting in the details panel * Dont throb node on hover * Hotkey for search: '/' * Keep focus on search when tabbing away from the browser * bring hovered node to top * background for search results on hover * fixed height for foreign object to prevent layout glitches * Dont blur focused nodes on search * More robust metric matchers * More meaningful search hints

Having the DOM nodes w/ display:none is still expensive. We only need them briefly for svg export.

Key was not being generated correctly.

Fixes #1471

2opremio · 2016-05-11T16:59:34Z

I find the hovering on not-highlighted nodes/edges surprising (It may be intentional but it feels buggy):

Also, I still see tags from different nodes overlapping

Performance-wise it seems to be tolerable

Report: report_search_review.json.gz

Other than that LGTM

davkal force-pushed the search branch 2 times, most recently from dcad43d to 85b7f62 Compare May 4, 2016 13:50

davkal changed the title ~~Search~~ [WIP] Search May 4, 2016

davkal added this to the 0.15.0 milestone May 4, 2016

davkal self-assigned this May 4, 2016

davkal added component/ui Predominantly a front-end issue; most/all of the work can be completed by a f/e developer dogfood Important for the developer's own use of the project labels May 4, 2016

tomwilkie removed this from the 0.15.0 milestone May 4, 2016

davkal changed the title ~~[WIP] Search~~ Search on canvas May 6, 2016

davkal assigned foot and unassigned davkal May 6, 2016

davkal mentioned this pull request May 6, 2016

Lingering edges when nodes or network connections go away #1420

Closed

foot mentioned this pull request May 9, 2016

Topology WS doesn't send metadata initially/with add events. #1449

Closed

foot reviewed May 9, 2016
View reviewed changes

davkal force-pushed the search branch from 95d9dbf to 55ce9aa Compare May 9, 2016 13:21

foot reviewed May 9, 2016
View reviewed changes

foot reviewed May 10, 2016
View reviewed changes

client/app/scripts/utils/search-utils.js

try {

return new RegExp(expression, options);

} catch (e) {

return new RegExp(_.escapeRegExp(expression), options);

This comment was marked as abuse.

Sign in to view

davkal force-pushed the search branch 2 times, most recently from 452020d to d0dc202 Compare May 10, 2016 11:05

davkal mentioned this pull request May 10, 2016

Overlapping node labels #1460

Closed

davkal and others added 17 commits May 11, 2016 18:08

Search on canvas

5a325e4

* adds a search field next to the topologies * highlight results on canvas as you type * non-matching nodes are grayed out * "prefix:" limits search to field label

Toggle debug toolbar via ctrl-D

8669266

Search all fields by default, gray out nodes if no match

3ee802a

Apply search as filter

d160965

Metric matching support for search

3e26ed7

Examples: * cpu > 2 // means percent * memory > 4.5MB

Fix tests by not mocking dependent utils

6ca729a

Sanitize inputs

d5eea25

Try regexp, escape if invalid

Store search state in URL

cfb5161

Fix auto-truncation for node labels

5ee0e08

Store table matches in table object

0573a20

Show connected nodes on hover, even when not matched

9984777

Fetch topologies sequentially on search

50935dd

Fix typo

14e06e0

Don't draw svg labels when we don't need them.

af3f18b

Having the DOM nodes w/ display:none is still expensive. We only need them briefly for svg export.

Fixes node-position layout caching.

0a46d61

Key was not being generated correctly.

Fix edge hiding

b51e7a9

Fixes #1471

davkal force-pushed the search branch from e36e123 to b51e7a9 Compare May 11, 2016 16:15

davkal merged commit b5a8b19 into master May 12, 2016

davkal deleted the search branch May 12, 2016 07:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Search on canvas #1429

Search on canvas #1429

davkal commented May 4, 2016 •

edited

Loading

tomwilkie commented May 6, 2016

tomwilkie commented May 6, 2016

tomwilkie commented May 6, 2016 •

edited

Loading

davkal commented May 6, 2016

2opremio commented May 8, 2016

foot commented May 9, 2016

This comment was marked as abuse.

This comment was marked as abuse.

foot commented May 9, 2016 •

edited by davkal

Loading

2opremio commented May 9, 2016

This comment was marked as abuse.

2opremio commented May 9, 2016 •

edited

Loading

2opremio commented May 9, 2016

2opremio commented May 9, 2016 •

edited

Loading

This comment was marked as abuse.

This comment was marked as abuse.

paulbellamy commented May 9, 2016 •

edited

Loading

paulbellamy commented May 9, 2016

This comment was marked as abuse.

foot commented May 10, 2016

2opremio commented May 10, 2016 •

edited

Loading

foot commented May 11, 2016

2opremio commented May 11, 2016

Search on canvas #1429

Search on canvas #1429

Conversation

davkal commented May 4, 2016 • edited Loading

tomwilkie commented May 6, 2016

tomwilkie commented May 6, 2016

tomwilkie commented May 6, 2016 • edited Loading

davkal commented May 6, 2016

2opremio commented May 8, 2016

foot commented May 9, 2016

This comment was marked as abuse.

This comment was marked as abuse.

foot commented May 9, 2016 • edited by davkal Loading

2opremio commented May 9, 2016

This comment was marked as abuse.

2opremio commented May 9, 2016 • edited Loading

2opremio commented May 9, 2016

2opremio commented May 9, 2016 • edited Loading

This comment was marked as abuse.

This comment was marked as abuse.

paulbellamy commented May 9, 2016 • edited Loading

paulbellamy commented May 9, 2016

This comment was marked as abuse.

foot commented May 10, 2016

2opremio commented May 10, 2016 • edited Loading

foot commented May 11, 2016

2opremio commented May 11, 2016

davkal commented May 4, 2016 •

edited

Loading

tomwilkie commented May 6, 2016 •

edited

Loading

foot commented May 9, 2016 •

edited by davkal

Loading

2opremio commented May 9, 2016 •

edited

Loading

2opremio commented May 9, 2016 •

edited

Loading

paulbellamy commented May 9, 2016 •

edited

Loading

2opremio commented May 10, 2016 •

edited

Loading