[Endpoint] Animate camera, add sidebar #55590

oatkiller · 2020-01-22T17:45:19Z

Summary

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.

Dev validation

Works in Safari. Note that Safari doesn't recognize the timestamp_utc provided by the sample data. It shows 'timestamp invalid' message instead. @FrankHassanabad thanks for finding this issue

ff works

ie11 doesn't work. can't even load the login screen.

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

Adding TODOs for myself

oatkiller · 2020-01-22T17:46:28Z

x-pack/plugins/endpoint/public/embeddables/resolver/view/use_camera.ts

+  const [time, setTime] = useState<Date>(new Date());
+  const rafRef = useRef<number>();
+  useEffect(() => {
+    const handleFrame = () => {


This should not loop rAF unless animation is in progress. TODO

oatkiller · 2020-01-22T17:47:02Z

x-pack/plugins/endpoint/public/embeddables/resolver/view/use_camera.ts

+  const [projectionMatrix, setProjectionMatrix] = useState<Matrix3>(
+    projectionMatrixAtTime(new Date())
+  );
+  const [time, setTime] = useState<Date>(new Date());


this 'time' concern could be a separate hook TODO

oatkiller · 2020-01-22T17:47:20Z

x-pack/plugins/endpoint/public/embeddables/resolver/view/use_camera.ts

+
+  useNonPassiveWheelHandler(handleWheel, ref);
+
+  const projectionMatrixAtTime = useSelector(selectors.projectionMatrix);


TODO add general comment about rAF, date, and why projection matrix is a function of time.

oatkiller · 2020-01-22T17:48:12Z

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

@@ -0,0 +1,132 @@
+/*


reconsider name of this module/component. TODO

oatkiller · 2020-01-22T17:49:16Z

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

+
+export const Event = memo(() => {
+  const { processNodePositions } = useSelector(selectors.processNodePositionsAndEdgeLineSegments);
+  interface ProcessTableView {


TODO justify data munging

oatkiller · 2020-01-22T18:06:24Z

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

+import { CameraAnimationState, Vector2 } from '../../../types';
+import * as vector2 from '../../../lib/vector2';
+
+export function active(animation: CameraAnimationState, time: Date): boolean {


TODO comment

oatkiller · 2020-01-22T18:06:26Z

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

+  return animation.startTime.getTime() + animationDuration >= time.getTime();
+}
+
+export function translation(animation: CameraAnimationState, time: Date): Vector2 {


TODO comment

oatkiller · 2020-01-22T18:06:34Z

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

+/**
+ * The amount of milliseconds animations will last.
+ */
+export const animationDuration = 400;


TODO shouldn't be a constant

oatkiller · 2020-01-22T18:07:20Z

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

+    /**
+     * Time when this action was dispatched.
+     */
+    time: Date;


TODO justify why we don't use middleware to add timestamps

Pros for metadata:
you don't have to type in new Date() when creating actions

Cons for metadata:
extra complexity.
you have to install middleware for the reducer to work, that includes tests
hidden complexity: not obvious that action's aren't pure (they aren't pure because their meaning is effected by the time, and conditions, under which they are dispatched.)

oatkiller · 2020-01-22T18:07:29Z

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

+  };
+}
+
+// TODO, Data is no longer a concern. its nested under camera and also nested under graph


TODO remove comment

oatkiller · 2020-01-28T16:44:08Z

x-pack/plugins/endpoint/public/embeddables/resolver/types.ts

@@ -186,4 +234,4 @@ export type ProcessWithWidthMetadata = {
 /**
 * String that represents the direction in which Resolver can be panned
 */
-export type PanDirection = 'north' | 'south' | 'east' | 'west';
+export type CardinalDirection = 'north' | 'south' | 'east' | 'west';


TODO is this used?

oatkiller · 2020-01-29T19:34:53Z

x-pack/plugins/endpoint/public/embeddables/resolver/lib/vector2.ts

@@ -26,6 +26,13 @@ export function divide(a: Vector2, b: Vector2): Vector2 {
  return [a[0] / b[0], a[1] / b[1]];
 }

+/**
+ * Multiply `a` against `b`, treating `b` like a 1x2 instead of a 2x1


TODO change comment

oatkiller · 2020-01-30T19:02:33Z

x-pack/plugins/endpoint/common/types.ts

@@ -31,7 +31,9 @@ export interface EndpointResultList {
  endpoints: EndpointMetadata[];
  // the total number of unique endpoints in the index
  total: number;
-  // the page size requested
+  /**


TODO remove change

oatkiller · 2020-01-30T19:14:33Z

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

+    /**
+     * Time when this action was dispatched.
+     */
+    readonly time: Date;


suggestion, union w/ a single type defining time

oatkiller · 2020-01-30T19:32:51Z

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

        ...state,
-        translationNotCountingCurrentPanning: translation(state),
+        /**


can we just pass time to userStoppedPanning and use the normal function? would simplify types

oatkiller · 2020-02-04T15:24:56Z

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

+ *
+ *   If the scale is low, the camera is zoomed out, objects look further away, and so they move
+ *   across the screen slower at a given camera speed. Therefore we can control the speed at
+ *   hich objects move across the screen without changing the camera speed. We do this by changing scale.


FrankHassanabad · 2020-02-12T20:05:11Z

x-pack/plugins/endpoint/package.json

@@ -6,7 +6,8 @@
  "license": "Elastic-License",
  "scripts": {},
  "dependencies": {
-    "react-redux": "^7.1.0"
+    "react-redux": "^7.1.0",
+    "redux-devtools-extension": "^2.13.8"


I think this should be in devDependencies as its a dev tool?

"redux-devtools-extension": "^2.13.8"

I'll try to get that workin.

…or useCamera

oatkiller · 2020-02-13T20:48:20Z

@elasticmachine merge upstream

oatkiller · 2020-02-13T22:13:03Z

@elasticmachine merge upstream

oatkiller · 2020-02-14T01:36:35Z

@elasticmachine merge upstream

kibanamachine · 2020-02-18T15:46:16Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: bac80ed

History

💚 Build #26722 succeeded bac80ed
💔 Build #26662 failed f8d1bb4
💔 Build #26614 failed bd98e7e
💔 Build #26586 failed e81d075e170cb2f952334ac631330ec5f77d25d2
💚 Build #26580 succeeded 0eebc1dfd0101c42cf95ad53230f16cbf873f502

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 <[email protected]> Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Larry Gregory <[email protected]> * [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 <[email protected]> * 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 <[email protected]> * [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 <[email protected]> * [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 <[email protected]> * 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 <[email protected]> * [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 <[email protected]> Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Larry Gregory <[email protected]> Co-authored-by: nnamdifrankie <[email protected]> Co-authored-by: Davis Plumlee <[email protected]> Co-authored-by: Paul Tavares <[email protected]> Co-authored-by: Pedro Jaramillo <[email protected]> Co-authored-by: Dan Panzarella <[email protected]> Co-authored-by: Madison Caldwell <[email protected]> Co-authored-by: Charlie Pichette <[email protected]> Co-authored-by: Candace Park <[email protected]> Co-authored-by: Pierre Gayvallet <[email protected]> Co-authored-by: Alexey Antonov <[email protected]>

oatkiller commented Jan 22, 2020

View reviewed changes

oatkiller force-pushed the card branch 3 times, most recently from d4eb59e to d0df20e Compare January 27, 2020 16:09

oatkiller commented Jan 28, 2020

View reviewed changes

oatkiller commented Jan 29, 2020

View reviewed changes

oatkiller force-pushed the card branch 2 times, most recently from f7f2c6a to e79b5c3 Compare January 30, 2020 17:41

oatkiller commented Jan 30, 2020

View reviewed changes

oatkiller added Feature:Endpoint Elastic Endpoint feature Team:Endpoint Data Visibility Team managing the endpoint resolver labels Feb 3, 2020

oatkiller force-pushed the card branch from 9a9d882 to f4c4c8a Compare February 3, 2020 16:20

oatkiller commented Feb 4, 2020

View reviewed changes

oatkiller force-pushed the card branch 6 times, most recently from cd173cd to 30e7638 Compare February 10, 2020 22:32

oatkiller force-pushed the card branch from 30e7638 to 78742e5 Compare February 11, 2020 15:46

oatkiller added Feature:Resolver Security Solution Resolver feature review labels Feb 11, 2020

oatkiller changed the title ~~WIP: refactor camera stuff (partial) and add sidebar~~ Animate camera, add sidebar Feb 11, 2020

oatkiller force-pushed the card branch 3 times, most recently from ce6dc98 to 751e108 Compare February 12, 2020 16:29

FrankHassanabad reviewed Feb 12, 2020

View reviewed changes

oatkiller force-pushed the card branch from 751e108 to 01bfcbb Compare February 13, 2020 16:34

oatkiller added 18 commits February 13, 2020 13:44

fix tests. use real lib for integration react dev tools. more tests f…

852dd3b

…or useCamera

too cool

fe6ab61

factorin

1fc862c

rename files

897da30

refactor view tests

de5b6b4

cleanup

2c78529

cleanup

eaf4b95

cleanup

d95ff44

animation tests

6a4e617

Delete substate_middleware_factory.ts

a2a2a27

Delete mock_resize_observer.ts

40a0c71

types

551853c

THATS IT

712c83c

fix i18n ids

86eb4b0

maybe fix build by moving redux dev tools to regular deps

527ccd2

try using redux-devtools-extension in development only

316b5ce

handle invalid dates in table

aee6769

Use a badge to show invalid date

bd98e7e

oatkiller force-pushed the card branch from e81d075 to bd98e7e Compare February 13, 2020 18:45

Merge branch 'master' into card

f8d1bb4

Merge branch 'master' into card

7aa451f

Merge branch 'master' into card

bac80ed

oatkiller merged commit a790f61 into elastic:master Feb 14, 2020

oatkiller deleted the card branch February 14, 2020 14:41

kevinlog changed the title ~~Animate camera, add sidebar~~ [Endpoint] Animate camera, add sidebar Feb 18, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Endpoint] Animate camera, add sidebar #55590

[Endpoint] Animate camera, add sidebar #55590

oatkiller commented Jan 22, 2020 •

edited

Loading

oatkiller left a comment

oatkiller Jan 22, 2020

oatkiller Jan 22, 2020

oatkiller Jan 22, 2020

oatkiller Jan 22, 2020

oatkiller Jan 22, 2020

oatkiller Jan 22, 2020

oatkiller Jan 22, 2020

oatkiller Jan 22, 2020

oatkiller Jan 22, 2020

oatkiller Jan 23, 2020

oatkiller Jan 22, 2020

oatkiller Jan 28, 2020

oatkiller Jan 29, 2020

oatkiller Jan 30, 2020

oatkiller Jan 30, 2020

oatkiller Jan 30, 2020

oatkiller Jan 30, 2020

oatkiller Feb 4, 2020

FrankHassanabad Feb 12, 2020 •

edited

Loading

oatkiller Feb 13, 2020

oatkiller commented Feb 13, 2020

oatkiller commented Feb 13, 2020

oatkiller commented Feb 14, 2020

kibanamachine commented Feb 18, 2020


		useNonPassiveWheelHandler(handleWheel, ref);

		const projectionMatrixAtTime = useSelector(selectors.projectionMatrix);

[Endpoint] Animate camera, add sidebar #55590

[Endpoint] Animate camera, add sidebar #55590

Conversation

oatkiller commented Jan 22, 2020 • edited Loading

Summary

Dev validation

Checklist

For maintainers

oatkiller left a 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

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

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

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

FrankHassanabad Feb 12, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oatkiller commented Feb 13, 2020

oatkiller commented Feb 13, 2020

oatkiller commented Feb 14, 2020

kibanamachine commented Feb 18, 2020

💚 Build Succeeded

History

oatkiller commented Jan 22, 2020 •

edited

Loading

FrankHassanabad Feb 12, 2020 •

edited

Loading