[Endpoint] Resolver zoom, pan, and center controls #55221

peluja1012 · 2020-01-17T19:42:53Z

Summary

Adds basic zooming, panning, and centering controls to Resolver.

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

~~[ ] This was checked for cross-browser compatibility, including a check against IE11~~
~~[ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support~~
~~[ ] Documentation was added for features that require explanation or tutorials~~
Unit or functional tests were updated or added to match the most common scenarios
~~[ ] This was checked for keyboard-only and screenreader accessibility~~

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

oatkiller · 2020-01-17T20:08:20Z

x-pack/plugins/endpoint/public/embeddables/resolver/view/graph_controls.tsx

+
+      const handlePanClick = useCallback(
+        (panDirection: PanDirection) => {
+          return () => {


This will defeat the purpose of useCallback, since it creates a new function reference each time it is called, and that function references is passed down. You could skip useCallback all together. Or you could use one useCallback per each button. or you could put data-direction="west" on each button and have one click handler for them all which does dispatch({ type: 'userClickedPanControl', payload: event.target.dataset.direction })

Changed. I went with skipping useCallback all together.

dplumlee · 2020-01-17T20:53:05Z

x-pack/plugins/endpoint/public/embeddables/resolver/store/camera/reducer.ts

+  } else if (action.type === 'userClickedPanControl') {
+    const panDirection = action.payload;
+    const deltaAmount = (1 + state.scalingFactor) * 20;
+    let delta: Vector;


Good catch, thanks. Typecheck threw an error also.

dplumlee · 2020-01-17T21:01:57Z

Based on that gif, do we want the panning buttons to be tied to the opposite direction (e.g. north button moves it south), or the direction the arrow itself is pointing? I feel like most panning things I've used have it the second way but I'm not really dead-set on anything. @oatkiller @peluja1012

peluja1012 · 2020-01-18T11:59:58Z

Based on that gif, do we want the panning buttons to be tied to the opposite direction (e.g. north button moves it south), or the direction the arrow itself is pointing? I feel like most panning things I've used have it the second way but I'm not really dead-set on anything. @oatkiller @peluja1012

I had it backwards. Changed.

oatkiller · 2020-01-21T14:54:32Z

x-pack/plugins/endpoint/public/embeddables/resolver/store/camera/panning.test.ts

+        expect(actual).toMatchInlineSnapshot(`
+          Array [
+            0,
+            -32.49906769231164,


`translation should be updated north':

can you explain why this number is negative? If 'north' means towards the top of the screen, and if we want to see more stuff north of the current viewport, wouldn't we want to move the camera towards the top of the screen?

it('moves the camera south so that objects appear closer to the bottom of the screen', () => {

oatkiller · 2020-01-21T15:17:36Z

x-pack/plugins/endpoint/public/embeddables/resolver/store/camera/panning.test.ts

+        const actual = translation(store.getState());
+        expect(actual).toMatchInlineSnapshot(`
+          Array [
+            32.49906769231164,


since north and south are inverted, so should east and west be

it('moves the camera west so that objects appear closer to the left of the screen', () => {

oatkiller · 2020-01-21T15:27:19Z

x-pack/plugins/endpoint/public/embeddables/resolver/store/camera/reducer.ts

@@ -100,6 +110,29 @@ export const cameraReducer: Reducer<CameraState, ResolverAction> = (
    } else {
      return state;
    }
+  } else if (action.type === 'userClickedPanControl') {
+    const panDirection = action.payload;
+    const deltaAmount = (1 + state.scalingFactor) * 20;


maybe

/** * Delta amount will be in the range of 20 -> 40 */

* master: (38 commits) [ML] Fix counters and percentages for array fields on the Data visualizer page (elastic#55209) [SIEM][Detection Engine] Tags being turned into null rules part deux (elastic#55507) [DOCS] Add tip for using elasticsearch-certutil http command (elastic#55357) [SIEM][Detection Engine] Critical blocker, fixes schema accepting values it should not (elastic#55488) [SIEM] Detections create prepackage rules (elastic#55403) [Reporting] Convert CSV Export libs to Typescript (elastic#55117) [Maps] show field type icons in data driven styling field select (elastic#55166) Adds event log for actions and alerting (elastic#45081) [SIEM][Detection Engine] Fixes critical blocker where signals on signals are not operating [SIEM][Detection Engine] Critical blocker, adds need REST prefix for cloud remove incorrect config (elastic#55427) Retain pinned filters when loading and clearing saved queries (elastic#54307) Resolver zoom, pan, and center controls (elastic#55221) Skip failing endpoint saga tests [skip-ci] Update migration guide to add rendering service example (elastic#54744) [DOCS] Updates to heat map page (elastic#55097) [Endpoint] Fix saga to start only after store is created and stopped on app unmount (elastic#55245) [Logs UI] Use the correct icons and labels in the feature cont… (elastic#55292) [Uptime] Handle locations with names but no geo data (elastic#55234) ...

kibanamachine · 2020-02-18T14:32:31Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 5ca3ff2

History

💚 Build #21685 succeeded 5ca3ff2
💔 Build #21526 failed 1e7cb57fc82876d52ef47f268c887f400dc492cc
💚 Build #21267 succeeded ad9d09f39afc60775ec646c82ad1cbe8e7dc38e1
💔 Build #21156 failed 255aa37dfe9e24629f25b7f74ac2a89931c06973

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

* Add Endpoint plugin and Resolver embeddable (#51994) * Add functional tests for plugins to x-pack (so we can do a functional test of the Resolver embeddable) * Add Endpoint plugin * Add Resolver embeddable * Test that Resolver embeddable can be rendered Conflicts: x-pack/.i18nrc.json x-pack/test/api_integration/apis/index.js * [Endpoint] Register endpoint app (#53527) * register app, create functional test * formatting * update tests * adjust test data for endpoint * add endpoint tests for testing spaces, app enabled, disabled, etc * linting * add read privileges to endpoint * rename variable since its used now * remove deprecated context * remove unused variable * fix type check * correct test suite message Co-Authored-By: Larry Gregory <lgregorydev@gmail.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Larry Gregory <lgregorydev@gmail.com> * [Endpoint] add react router to endpoint app (#53808) * add react router to endpoint app * linting * linting * linting * correct tests * change history from hash to browser, add new test util * remove default values in helper functions * fix type check, use FunctionComponent as oppsed to FC * use BrowserRouter component * use BrowserRouter component lin * add comments to test framework, change function name to include browserHistory Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> * EMT-issue-65: add endpoint list api (#53861) add endpoint list api * EMT-65:always return accurate endpoint count (#54423) EMT-65:always return accurate endpoint count, independent of paging properties * Resolver component w/ sample data (#53619) Resolver is a map. It shows processes that ran on a computer. The processes are drawn as nodes and lines connect processes with their parents. Resolver is not yet implemented in Kibana. This PR adds a 'map' type UX. The user can click and drag to pan the map and zoom using trackpad pinching (or ctrl and mousewheel.) There is no code providing actual data. Sample data is included. The sample data is used to draw a map. The fundamental info needed is: process names the parent of a process With this info we can topologically lay out the processes. The sample data isn't yet in a realistic format. We'll be fixing that soon. Related issue: elastic/endpoint-app-team#30 * Resolver test plugin not using mount context. (#54933) Mount context was deprecated. Use core.getStartServices() instead. * Resolver nonlinear zoom (#54936) * [Endpoint] add Redux saga Middleware and app Store (#53906) * Added saga library * Initialize endpoint app redux store * Resolver is overflow: hidden to prevent obscured elements from showing up (#55076) * [Endpoint] Fix saga to start only after store is created and stopped on app unmount (#55245) - added `stop()`/`start()` methods to the Saga Middleware creator factory - adjust tests based on changes - changed application `renderApp` to stop sagas when react app is unmounted * Resolver zoom, pan, and center controls (#55221) * Resolver zoom, pan, and center controls * add tests, fix north panning * fix type issue * update west and east panning to behave like google maps * [Endpoint] FIX: Increase tests `sleep` default duration back to 100ms (#55492) Revert `sleep()` default duration, in the saga tests, back to 100ms in order to prevent intermittent failures during CI runs. Fixes #55464 Fixes #55465 * [Endpoint] EMT-65: make endpoint data types common, restructure (#54772) [Endpoint] EMT-65: make endpoint data types common, use schema changes * Basic Functionality Alert List (#55800) * sets up initial grid and data type * data feeds in from backend but doesnt update * sample data feeding in correctly * Fix combineReducers issue by importing Redux type from 'redux' package * Add usePageId hook that fires action when user navigates to page * Strict typing for middleware * addresses comments and uses better types * move types to common/types.ts * Move types to endpoint/types.ts, address PR comments blah 2 Co-authored-by: Pedro Jaramillo <peluja1012@gmail.com> * [Endpoint] Add Endpoint Details route (#55746) * Add Endpoint Details route * add Endpoint Details tests * sacrifices to the Type gods * update to latest endpoint schema Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> * [Endpoint] EMT-67: add kql support for endpoint list (#56328) [Endpoint] EMT-67: add kql support for endpoint list * [Endpoint] ERT-82 ERT-83 ERT-84: Alert list API with pagination (#56538) * ERT-82 ERT-83 ERT-84 (partial): Add Alert List API with pagination * Better type safety for alert list API * Add Test to Verify Endpoint App Landing Page (#57129) Conflicts: x-pack/test/functional/page_objects/index.ts * fixes render bug in alert list (#57152) Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> * Resolver: Animate camera, add sidebar (#55590) This PR adds a sidebar navigation. clicking the icons in the nav will focus the camera on the different nodes. There is an animation effect when the camera moves. Conflicts: yarn.lock * [Endpoint] Task/basic endpoint list (#55623) * Adds host management list to endpoint security plugin Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> * [Endpoint] Policy List UI route and initial view (#56918) * Initial Policy List view * Add `endpoint/policy` route and displays Policy List * test cases (both unit and functional) Does not yet interact with API (Ingest). * Add ApplicationService app status management (#50223) This was already backported, but changes to endpoint app could not be backported, since endpoint app itself hadn't been backported. Now that the endpoint app is backported, reapply the endpoint specific changes from the original commit. * Implements `getStartServices` on server-side (#55156) This was already backported, but changes to endpoint app could not be backported, since endpoint app itself hadn't been backported. Now that the endpoint app is backported, reapply the endpoint specific changes from the original commit. * [ui/utils/query_string]: Remove unused methods & migrate apps to querystring lib (#56957) This was already backported, but changes to endpoint app could not be backported, since endpoint app itself hadn't been backported. Now that the endpoint app is backported, reapply the endpoint specific changes from the original commit. Co-authored-by: Kevin Logan <56395104+kevinlog@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Larry Gregory <lgregorydev@gmail.com> Co-authored-by: nnamdifrankie <56440728+nnamdifrankie@users.noreply.github.com> Co-authored-by: Davis Plumlee <56367316+dplumlee@users.noreply.github.com> Co-authored-by: Paul Tavares <56442535+paul-tavares@users.noreply.github.com> Co-authored-by: Pedro Jaramillo <peluja1012@gmail.com> Co-authored-by: Dan Panzarella <pzl@users.noreply.github.com> Co-authored-by: Madison Caldwell <madison.rey.caldwell@gmail.com> Co-authored-by: Charlie Pichette <56399229+charlie-pichette@users.noreply.github.com> Co-authored-by: Candace Park <56409205+parkiino@users.noreply.github.com> Co-authored-by: Pierre Gayvallet <pierre.gayvallet@gmail.com> Co-authored-by: Alexey Antonov <alexwizp@gmail.com>

peluja1012 added release_note:skip Skip the PR/issue when compiling release notes Team:Endpoint Data Visibility Team managing the endpoint resolver Feature:Resolver Security Solution Resolver feature labels Jan 17, 2020

peluja1012 requested review from oatkiller and dplumlee January 17, 2020 19:48

oatkiller reviewed Jan 17, 2020

View reviewed changes

dplumlee reviewed Jan 17, 2020

View reviewed changes

peluja1012 added v7.6.0 v8.0.0 labels Jan 18, 2020

peluja1012 force-pushed the feature/resolver-pan-and-zoom-controls branch 2 times, most recently from 1e7cb57 to 1a6bb90 Compare January 21, 2020 14:56

oatkiller reviewed Jan 21, 2020

View reviewed changes

oatkiller approved these changes Jan 21, 2020

View reviewed changes

dplumlee approved these changes Jan 21, 2020

View reviewed changes

peluja1012 added 4 commits January 21, 2020 14:08

Resolver zoom, pan, and center controls

f051006

add tests, fix north panning

e4973a1

fix type issue

bc5545f

update west and east panning to behave like google maps

5ca3ff2

peluja1012 force-pushed the feature/resolver-pan-and-zoom-controls branch from b97ff93 to 5ca3ff2 Compare January 21, 2020 19:09

peluja1012 merged commit 7eb934e into elastic:master Jan 21, 2020

kevinlog added the Feature:Endpoint Elastic Endpoint feature label Feb 18, 2020

kevinlog changed the title ~~Resolver zoom, pan, and center controls~~ [Endpoint] Resolver zoom, pan, and center controls Feb 18, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Endpoint] Resolver zoom, pan, and center controls #55221

[Endpoint] Resolver zoom, pan, and center controls #55221

peluja1012 commented Jan 17, 2020 •

edited

Loading

oatkiller Jan 17, 2020

peluja1012 Jan 18, 2020

dplumlee Jan 17, 2020

peluja1012 Jan 18, 2020

dplumlee commented Jan 17, 2020

peluja1012 commented Jan 18, 2020

oatkiller Jan 21, 2020

oatkiller Jan 21, 2020

oatkiller Jan 21, 2020

oatkiller Jan 21, 2020

oatkiller Jan 21, 2020

kibanamachine commented Feb 18, 2020

[Endpoint] Resolver zoom, pan, and center controls #55221

[Endpoint] Resolver zoom, pan, and center controls #55221

Conversation

peluja1012 commented Jan 17, 2020 • edited Loading

Summary

Checklist

For maintainers

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dplumlee commented Jan 17, 2020

peluja1012 commented Jan 18, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kibanamachine commented Feb 18, 2020

💔 Build Failed

History

peluja1012 commented Jan 17, 2020 •

edited

Loading