Next js prototype #3896

VakarisZ · 2023-11-28T11:25:03Z

What does this PR do?

Fixes #3793
Fixes #3794
Fixes #2898

PR adds next.js server and UI prototype using a feature flag.

PR Checklist

Have you added an explanation of what your changes do and why you'd like to include them?
Is the TravisCI build passing?
Was the CHANGELOG.md updated to reflect the changes?
Was the documentation framework updated to reflect the changes?
Have you checked that you haven't introduced any duplicate code?

Testing Checklist

Added relevant unit tests?
Do all unit tests pass?
Do all end-to-end tests pass?
Any other testing performed?

Tested by running with/without feature flag set
If applicable, add screenshots or log transcripts of the feature working

codecov · 2023-11-28T11:32:55Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (7aee5a4) 78.01% compared to head (db2e4d2) 77.57%.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #3896      +/-   ##
===========================================
- Coverage    78.01%   77.57%   -0.44%     
===========================================
  Files          464      467       +3     
  Lines        14672    14759      +87     
===========================================
+ Hits         11447    11450       +3     
- Misses        3225     3309      +84

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

build_scripts/common.sh

build_scripts/appimage/AppRun

docs/content/setup/aws.md

ilija-lazoroski · 2023-11-29T11:12:06Z

monkey/monkey_island/cc/next_ui/src/providers/theme/EmotionCache.tsx

+                        key={name}
+                        data-emotion={`${registry.cache.key}-global ${name}`}
+                        // eslint-disable-next-line react/no-danger
+                        dangerouslySetInnerHTML={{ __html: style }}


Is this temporary? We shouldn't use dangerouslySetInnerHTML because well, the name says it.

@ordabach do you know where the styles are coming from?

ilija-lazoroski · 2023-12-20T08:26:19Z

monkey/monkey_island/cc/next_ui/next.config.js

+        // !! WARN !!
+        // Dangerously allow production builds to successfully complete even if
+        // your project has type errors.
+        // !! WARN !!
+        ignoreBuildErrors: true


Why do we allow this?

ilija-lazoroski · 2023-12-20T08:44:02Z

monkey/monkey_island/cc/next_ui/src/app/api/auth/[...nextauth]/authOptions.ts

+                    return null; // clear the session if the refresh token gets an error
+
+                    // The error property will be used client-side to handle the refresh token error
+                    // return {
+                    //     ...token,
+                    //     error: 'RefreshAccessTokenError' as const
+                    // };


Are we going to do this later?

The whole authentication needs a lot of work

ilija-lazoroski · 2023-12-20T08:44:44Z

monkey/monkey_island/cc/next_ui/src/app/api/user/signout/route.ts

+            );
+
+            const logoutResponseBody = await logoutResponse.json();
+            console.log('logoutResponseBody', logoutResponseBody);


Do we need this?

we can keep it, I'll have to review the authentication anyway and log statements are ignored in production builds

ilija-lazoroski · 2023-12-20T08:45:08Z

monkey/monkey_island/cc/next_ui/src/app/api/user/signup/route.ts

+        );
+
+        const registerResponseBody = await registerResponse.json();
+        console.log('registerResponseBody', registerResponseBody);


Same as above.

ilija-lazoroski · 2023-12-20T08:46:31Z

monkey/monkey_island/cc/next_ui/src/app/consts.tsx

+    // TODO remove with the NEXT_JS_UI_FEATURE in monkey_island/cc/feature_flags.py:1
+    return process.env.NEXT_PUBLIC_JAVASCRIPT_RUNTIME_PORT || 5000;


Can we do this now?

Not yet, we'll do it once the old UI is removed

cakekoa

A few comments. I didn't review everything since I needed to learn about Redux and NextAuth

cakekoa · 2023-12-20T14:02:57Z

CHANGELOG.md

 ### Added
+- Configurable Island port through node proxy server. #3827


We'll need to devise a way to expose this port through docker. Either that or provide documentation on how to expose the configured port when running the container

AFAIK --network=host already exposes the port.

That may be correct. I tried to test out this feature in docker and couldn't access the UI. I realized that modifying the server port is only applicable to the old UI but I still couldn't get it to work. In fact, if I modify it, the UI is not available at the original port (5000) or the new one

cakekoa · 2023-12-20T14:13:19Z

deployment_scripts/deploy_linux.sh

@@ -235,7 +239,7 @@ pushd "$ISLAND_PATH/cc/ui" || handle_error
 npm ci

 log_message "Generating front end"
-npm run dev
+npm run build


Does the current UI support a build target? We used to run dev or dist

I'm not sure what value the dev build had, but on the new UI we can build production or run a dev server with hot reloads. This builds production in case the dev is not intending to work on UI.

Let me rephrase. This is generating the frontend for the old UI ("$ISLAND_PATH/cc/ui"). Does build work for it?

docs/content/_index.md

cakekoa · 2023-12-20T14:22:35Z

docs/content/setup/docker.md

+      ...
+    }
+    ```
+1. Run the Monkey Island again, it will be accessible on `https://localhost:8080`.


Do we also need to tell docker to expose the new port?

I don't think so, but I haven't tested it IIRC

cakekoa · 2023-12-20T14:23:40Z

docs/content/setup/linux.md

+{{% notice info %}}
+You need to have **root permissions** to run the Infection Monkey AppImage package.
+By default, the Infection Monkey server is configured to listen on **port 443**,
+which requires setting the `CAP_NET_BIND_SERVICE` capability on the AppImage package.


Is this TMI? Should we just say that serving on port 443 requires root permission?

What I was trying to say is that the process will not run as root, but root permissions are required. Feel free to rephrase or shorten

monkey/monkey_island/cc/next_ui/README.md

The script is not necessary, because production is started by island anyway

…icient

Moving prettier config to a separate file makes more readable and allows other tools to find it

Issue: #3964 PR: #3966

VakarisZ commented Nov 28, 2023

View reviewed changes

build_scripts/common.sh Outdated Show resolved Hide resolved

ilija-lazoroski reviewed Nov 29, 2023

View reviewed changes

build_scripts/appimage/AppRun Outdated Show resolved Hide resolved

ilija-lazoroski reviewed Nov 29, 2023

View reviewed changes

docs/content/setup/aws.md Outdated Show resolved Hide resolved

ilija-lazoroski reviewed Nov 29, 2023

View reviewed changes

VakarisZ marked this pull request as draft December 6, 2023 11:54

VakarisZ force-pushed the next-js-prototype branch from 63537b6 to 2aa2396 Compare December 11, 2023 15:16

VakarisZ mentioned this pull request Dec 18, 2023

Add feature flags to docker #3964

Closed

2 tasks

VakarisZ marked this pull request as ready for review December 18, 2023 13:44

VakarisZ force-pushed the next-js-prototype branch 2 times, most recently from 4fb8aa7 to f2a021b Compare December 19, 2023 15:30

ilija-lazoroski reviewed Dec 20, 2023

View reviewed changes

cakekoa reviewed Dec 20, 2023

View reviewed changes

VakarisZ and others added 13 commits December 22, 2023 16:05

UI: Next.js prototype core

2eab14d

UI: Implement redux

e970d16

TODO: Drop this commit, for testing polling only

4eaa65d

UI: Remove unnecessary server.tsx file

14b340c

UI: Implement redux example of machine fetching with pooling

0c0fa94

UI: Run production server with https and certificates

defe9b5

UI: Run next.js webserver on Island start

5f806c7

Deploy: Install node server

0ec39aa

Build: Install node server to the island

18e8b85

Deploy: Use nextjs generated UI

18fd79b

Build: Ensure nextjs build is copied over

adaac7d

UI: Build with required modules bundled

5b78f50

Build: Use standalone nextjs build

5f4627c

VakarisZ and others added 25 commits December 22, 2023 16:05

Build: Fix a bug with "remove_node_modules" for legacy UI

4e74ef2

UI: Remove npm start script

58cd5b3

The script is not necessary, because production is started by island anyway

Build: Remove unused node consts from common.sh

98bf825

Deploy: Change npm build command in deploy_linux.sh

af9c4b2

Deploy: Change npm build command in deploy_windows.ps1

7104b41

Build: Don't use environment variables where local variables are suff…

0e0fa9a

…icient

Island: Log port based on feature next_js feature flag

301a41e

Island: Fix a typo in island interface log

0280ea5

Build: Add port opening capabilities to node binary

7842782

Docs: Add a notice about required root permissions for AppImage

1823b50

Docs: Fix a typo in AWS documentation

1943efc

UI: Refactor and fix route enum and its usages

76de8a6

UI: Rename routes to paths for consistency

dfb5493

UI: Fix incorrect typescript types

fe361d7

UI: Fix prettier error in paths.constants.tsx

048dab2

UI: Add typescript to MonkeyDrawer

b878934

UI: Move prettier config to a separate file

49cbad4

Moving prettier config to a separate file makes more readable and allows other tools to find it

Build: Fix build_dir naming when build docker UI

9a56184

Issue: #3964 PR: #3966

Project: Add check for NextJS ui in Travis

50b26ea

UI: Rename useResponsive to useSmallScreenCheck

a2a1821

UI: Fix eslint warnings in provider.tsx

93f2fba

UI: Remove typescript configuration that ignores build errors

578fb53

Docs: Fix typo in docs

992fb83

UI: Remove the auto-generated README.md

9afb808

UI: Fix middleware registration in production

db2e4d2

VakarisZ force-pushed the next-js-prototype branch from b379f1b to db2e4d2 Compare December 22, 2023 14:10

VakarisZ merged commit 4fe4bed into develop Dec 22, 2023
2 of 3 checks passed

VakarisZ deleted the next-js-prototype branch January 2, 2024 12:55

This was referenced Jan 3, 2024

Extend barebones prototype #3877

Closed

UI State Manager - Redux Toolkit #3681

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next js prototype #3896

Next js prototype #3896

VakarisZ commented Nov 28, 2023 •

edited

Loading

codecov bot commented Nov 28, 2023 •

edited

Loading

ilija-lazoroski Nov 29, 2023

VakarisZ Dec 15, 2023 •

edited

Loading

ilija-lazoroski Dec 20, 2023

ilija-lazoroski Dec 20, 2023

VakarisZ Dec 20, 2023

ilija-lazoroski Dec 20, 2023

VakarisZ Dec 20, 2023

ilija-lazoroski Dec 20, 2023

ilija-lazoroski Dec 20, 2023

VakarisZ Dec 20, 2023

cakekoa left a comment

cakekoa Dec 20, 2023

VakarisZ Dec 21, 2023

cakekoa Dec 21, 2023 •

edited

Loading

cakekoa Dec 20, 2023

VakarisZ Dec 21, 2023

cakekoa Dec 22, 2023

cakekoa Dec 20, 2023

VakarisZ Dec 21, 2023

cakekoa Dec 20, 2023

VakarisZ Dec 21, 2023

		// TODO remove with the NEXT_JS_UI_FEATURE in monkey_island/cc/feature_flags.py:1
		return process.env.NEXT_PUBLIC_JAVASCRIPT_RUNTIME_PORT \|\| 5000;

		### Added
		- Configurable Island port through node proxy server. #3827

Next js prototype #3896

Next js prototype #3896

Conversation

VakarisZ commented Nov 28, 2023 • edited Loading

What does this PR do?

PR Checklist

Testing Checklist

codecov bot commented Nov 28, 2023 • edited Loading

Codecov Report

Choose a reason for hiding this comment

VakarisZ Dec 15, 2023 • 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

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

cakekoa left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cakekoa Dec 21, 2023 • 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

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

VakarisZ commented Nov 28, 2023 •

edited

Loading

codecov bot commented Nov 28, 2023 •

edited

Loading

VakarisZ Dec 15, 2023 •

edited

Loading

cakekoa Dec 21, 2023 •

edited

Loading