[Endpoint] add react router to endpoint app #53808

kevinlog · 2019-12-26T20:28:20Z

Summary

Add react router to the endpoint app. Add a new route for Endpoint Management.

Issue: https://github.com/elastic/endpoint-app-team/issues/64

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~~

kevinlog · 2019-12-26T20:43:26Z

x-pack/plugins/endpoint/public/applications/endpoint/index.tsx


 /**
 * This module will be loaded asynchronously to reduce the bundle size of your plugin's main bundle.
 */
 export function renderApp(coreStart: CoreStart, { element }: AppMountParameters) {
  coreStart.http.get('/api/endpoint/hello-world');

-  ReactDOM.render(<AppRoot />, element);
+  const history = createHashHistory()


Kibana testing utils all seem to use hash history (see test below), doesn't mean we have to

kibanamachine · 2019-12-26T21:52:47Z

💔 Build Failed

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

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

kibanamachine · 2019-12-26T22:57:32Z

💔 Build Failed

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

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

paul-tavares · 2019-12-27T14:01:02Z

x-pack/plugins/endpoint/public/applications/endpoint/index.tsx


 /**
 * This module will be loaded asynchronously to reduce the bundle size of your plugin's main bundle.
 */
 export function renderApp(coreStart: CoreStart, { element }: AppMountParameters) {
  coreStart.http.get('/api/endpoint/hello-world');

-  ReactDOM.render(<AppRoot />, element);
+  const history = createHashHistory();


See my comment further below - this might not be needed if we use React-router's HashRouter component

paul-tavares · 2019-12-27T14:01:49Z

x-pack/plugins/endpoint/public/applications/endpoint/index.tsx

-    <h1 data-test-subj="welcomeTitle">
-      <FormattedMessage id="xpack.endpoint.welcomeTitle" defaultMessage="Hello World" />
-    </h1>
+    <Router history={history}>


Consider using React Router's HashRouter instead --- until we can figure out how to use the Functional test framework with "real" URLs and then switch over to react-router's BrowserRotuer component.

I could also probably write a helper function to just navigate us to a real url. Other plugins in Kibana all seem to use hashes and I just wanna understand why.

I think the "old" platform client side framework was hash based so that might be the reason why all (most) current functional test use it. 🤷‍♂

Now that we figured out support for "real" URLs, consider using react-router's <BrowserRouter /> component instead, which avoid having to create/manage a history instance ourselves

kibanamachine · 2019-12-27T14:29:35Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 1349fd0

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

paul-tavares · 2019-12-27T17:32:13Z

x-pack/plugins/endpoint/public/applications/endpoint/index.tsx

+  history: History;
+}
+
+const AppRoot: React.FC<RouterProps> = React.memo(({ history }) => (


FYI - just noticed in the TS typing definition that React.FC is marked as @deprecated and we should use FunctionComponent instead (at least in the version of React that is being used in the feature-ingest branch 🙂 )

good catch, fixed 👍

kevinlog · 2020-01-02T13:15:38Z

@elasticmachine merge upstream

paul-tavares · 2020-01-02T16:48:15Z

x-pack/plugins/endpoint/public/applications/endpoint/index.tsx

@@ -8,24 +8,57 @@ import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { CoreStart, AppMountParameters } from 'kibana/public';
 import { I18nProvider, FormattedMessage } from '@kbn/i18n/react';
+import { History, createBrowserHistory } from 'history';


I don't think you need these if you use <BrowserRouter /> component from react-router-dom instead of <Router />

good call, changed out

paul-tavares · 2020-01-02T16:49:20Z

x-pack/plugins/endpoint/public/applications/endpoint/index.tsx

-    <h1 data-test-subj="welcomeTitle">
-      <FormattedMessage id="xpack.endpoint.welcomeTitle" defaultMessage="Hello World" />
-    </h1>
+    <Router history={history}>


Now that we figured out support for "real" URLs, consider using react-router's <BrowserRouter /> component instead, which avoid having to create/manage a history instance ourselves

oatkiller · 2020-01-02T18:06:16Z

@kevinlog could you add a brief explanation about the 'real' URL stuff, including the change in kibana's core testing framework? ty

…erHistory

kevinlog · 2020-01-02T18:22:41Z

@oatkiller added some comments and changed a function name in the test framework.

The reason for adding the function is that most other apps use a hashRouter. We could too, but it seems the preference is a browserRouter. I need a utility that would navigate us correctly assuming no hashes. Let me know if that makes sense. Would also like your opinions on that approach, etc

kibanamachine · 2020-01-02T19:39:24Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 88aeb48

History

💚 Build #17555 succeeded 3044cf2
💚 Build #17344 succeeded 1d5221e

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

oatkiller · 2020-01-02T20:53:29Z

@kevinlog thanks for the explanation

* master: Rename `/api/security/oidc` to `/api/security/oidc/callback`. (elastic#53886) Updating transitive dependencies to use [email protected] (elastic#53899) [Reporting/Tests] consolidate functional test configs (elastic#52671) [Reporting] Correct the docvalue_fields params in the search query Download CSV from Dashboard Panel (elastic#52833) [Test/Newsfeed] Re-enable test and add news item to be filtered (elastic#53905) cleanup server-log action (elastic#53326) [Uptime] Delete uptime eslint rule skip (elastic#50912) [skip-ci] Expression Lifecycle Docs (elastic#51494) [Endpoint] add react router to endpoint app (elastic#53808) [SIEM][Detection Engine] Silence 409 errors on signal creation (elastic#53859) [Maps] get max_result_window and max_inner_result_window from index settings (elastic#53500) [ML] New Platform server shim: update analytics routes to use new platform router (elastic#53521) fixes typo on engine detection page (elastic#53877)

* master: Rename `/api/security/oidc` to `/api/security/oidc/callback`. (elastic#53886) Updating transitive dependencies to use [email protected] (elastic#53899) [Reporting/Tests] consolidate functional test configs (elastic#52671) [Reporting] Correct the docvalue_fields params in the search query Download CSV from Dashboard Panel (elastic#52833) [Test/Newsfeed] Re-enable test and add news item to be filtered (elastic#53905) cleanup server-log action (elastic#53326) [Uptime] Delete uptime eslint rule skip (elastic#50912) [skip-ci] Expression Lifecycle Docs (elastic#51494) [Endpoint] add react router to endpoint app (elastic#53808) [SIEM][Detection Engine] Silence 409 errors on signal creation (elastic#53859) [Maps] get max_result_window and max_inner_result_window from index settings (elastic#53500) [ML] New Platform server shim: update analytics routes to use new platform router (elastic#53521) fixes typo on engine detection page (elastic#53877) [Maps] push mapbox value extraction from VectorStyle and into DynamicStyleProperty (elastic#53806) Fix suggested value for time_zone in range query (elastic#53841) Clean up generic hooks, use react-use instead (elastic#53822)

…ris/kibana into alerting/created_at-and-updated_at * 'alerting/created_at-and-updated_at' of github.com:gmmorris/kibana: Rename `/api/security/oidc` to `/api/security/oidc/callback`. (elastic#53886) Updating transitive dependencies to use [email protected] (elastic#53899) [Reporting/Tests] consolidate functional test configs (elastic#52671) [Reporting] Correct the docvalue_fields params in the search query Download CSV from Dashboard Panel (elastic#52833) [Test/Newsfeed] Re-enable test and add news item to be filtered (elastic#53905) cleanup server-log action (elastic#53326) [Uptime] Delete uptime eslint rule skip (elastic#50912) [skip-ci] Expression Lifecycle Docs (elastic#51494) [Endpoint] add react router to endpoint app (elastic#53808) [SIEM][Detection Engine] Silence 409 errors on signal creation (elastic#53859) [Maps] get max_result_window and max_inner_result_window from index settings (elastic#53500) [ML] New Platform server shim: update analytics routes to use new platform router (elastic#53521) fixes typo on engine detection page (elastic#53877) [Maps] push mapbox value extraction from VectorStyle and into DynamicStyleProperty (elastic#53806) Fix suggested value for time_zone in range query (elastic#53841) Clean up generic hooks, use react-use instead (elastic#53822)

…t-types * alerting/created_at-and-updated_at: updatedAt should equal createdAt on creation Move index patterns: src/legacy/core_plugins/data 👉 src/plugins/data (elastic#53794) moved Task Manager server code under "server" directory (elastic#53777) Rename `/api/security/oidc` to `/api/security/oidc/callback`. (elastic#53886) Updating transitive dependencies to use [email protected] (elastic#53899) [Reporting/Tests] consolidate functional test configs (elastic#52671) [Reporting] Correct the docvalue_fields params in the search query Download CSV from Dashboard Panel (elastic#52833) [Test/Newsfeed] Re-enable test and add news item to be filtered (elastic#53905) cleanup server-log action (elastic#53326) [Uptime] Delete uptime eslint rule skip (elastic#50912) [skip-ci] Expression Lifecycle Docs (elastic#51494) [Endpoint] add react router to endpoint app (elastic#53808) [SIEM][Detection Engine] Silence 409 errors on signal creation (elastic#53859) [Maps] get max_result_window and max_inner_result_window from index settings (elastic#53500) [ML] New Platform server shim: update analytics routes to use new platform router (elastic#53521) fixes typo on engine detection page (elastic#53877) [Maps] push mapbox value extraction from VectorStyle and into DynamicStyleProperty (elastic#53806) Fix suggested value for time_zone in range query (elastic#53841) Clean up generic hooks, use react-use instead (elastic#53822)

* 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]>

add react router to endpoint app

dad6c7e

kevinlog added Team:Endpoint Data Visibility Team managing the endpoint resolver Team:Endpoint Management Team:Endpoint Response Endpoint Response Team release_note:skip Skip the PR/issue when compiling release notes v7.6.0 v8.0.0 labels Dec 26, 2019

kevinlog changed the title ~~add react router to endpoint app~~ [WIP] [Endpoint] add react router to endpoint app Dec 26, 2019

kevinlog added 2 commits December 26, 2019 15:30

linting

3a43db7

linting

e76c7e0

kevinlog commented Dec 26, 2019

View reviewed changes

kevinlog requested review from oatkiller, paul-tavares, kqualters-elastic, bkimmel, parkiino, peluja1012 and dplumlee December 26, 2019 20:48

linting

9561018

correct tests

1349fd0

paul-tavares reviewed Dec 27, 2019

View reviewed changes

kevinlog added 3 commits December 27, 2019 13:22

change history from hash to browser, add new test util

7317dd0

remove default values in helper functions

eff2be6

fix type check, use FunctionComponent as oppsed to FC

1d5221e

Merge branch 'master' into add-router-to-endpoint-app

3044cf2

kevinlog changed the title ~~[WIP] [Endpoint] add react router to endpoint app~~ [Endpoint] add react router to endpoint app Jan 2, 2020

paul-tavares reviewed Jan 2, 2020

View reviewed changes

kevinlog added 2 commits January 2, 2020 13:04

use BrowserRouter component

83ca184

use BrowserRouter component lin

899b9cf

add comments to test framework, change function name to include brows…

88aeb48

…erHistory

paul-tavares approved these changes Jan 2, 2020

View reviewed changes

oatkiller approved these changes Jan 2, 2020

View reviewed changes

kevinlog merged commit fa6a801 into elastic:master Jan 2, 2020

kevinlog deleted the add-router-to-endpoint-app branch January 2, 2020 20:58

kevinlog added v7.7.0 Feature:Endpoint Elastic Endpoint feature and removed v7.6.0 labels Jan 28, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Endpoint] add react router to endpoint app #53808

[Endpoint] add react router to endpoint app #53808

kevinlog commented Dec 26, 2019 •

edited

Loading

kevinlog Dec 26, 2019

kibanamachine commented Dec 26, 2019

kibanamachine commented Dec 26, 2019

paul-tavares Dec 27, 2019

paul-tavares Dec 27, 2019 •

edited

Loading

kevinlog Dec 27, 2019

paul-tavares Dec 27, 2019

paul-tavares Jan 2, 2020

kibanamachine commented Dec 27, 2019

paul-tavares Dec 27, 2019

kevinlog Dec 27, 2019

kevinlog commented Jan 2, 2020

paul-tavares Jan 2, 2020

kevinlog Jan 2, 2020

paul-tavares Jan 2, 2020

oatkiller commented Jan 2, 2020

kevinlog commented Jan 2, 2020

kibanamachine commented Jan 2, 2020

oatkiller commented Jan 2, 2020

[Endpoint] add react router to endpoint app #53808

[Endpoint] add react router to endpoint app #53808

Conversation

kevinlog commented Dec 26, 2019 • edited Loading

Summary

Checklist

For maintainers

Choose a reason for hiding this comment

kibanamachine commented Dec 26, 2019

💔 Build Failed

kibanamachine commented Dec 26, 2019

💔 Build Failed

Choose a reason for hiding this comment

paul-tavares Dec 27, 2019 • edited Loading

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 Dec 27, 2019

💚 Build Succeeded

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kevinlog commented Jan 2, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oatkiller commented Jan 2, 2020

kevinlog commented Jan 2, 2020

kibanamachine commented Jan 2, 2020

💚 Build Succeeded

History

oatkiller commented Jan 2, 2020

kevinlog commented Dec 26, 2019 •

edited

Loading

paul-tavares Dec 27, 2019 •

edited

Loading