asyncapi / edavisualiser Goto Github PK

Why this issue?

https://sonarcloud.io/project/issues?resolved=false&types=BUG&id=asyncapi_EDAVisualiser&open=AYdwcYk6ZxfSDDTOFuLQ&tab=why

Where's the issue?

https://sonarcloud.io/project/issues?resolved=false&types=BUG&id=asyncapi_EDAVisualiser&open=AYdwcYk6ZxfSDDTOFuLQ&tab=code

Why this issue?

https://sonarcloud.io/project/issues?resolved=false&id=asyncapi_EDAVisualiser&open=AYdwcYmBZxfSDDTOFuLR&tab=why

Where's the issue?

https://sonarcloud.io/project/issues?resolved=false&id=asyncapi_EDAVisualiser&open=AYdwcYmBZxfSDDTOFuLR&tab=code

This issue defines a list of tasks that need to be performed in this repo to make sure it's ci/cd automation works long term without any issues.

It is up to maintainers to decide if it must be addressed in one or multiple PRs.

Below are 3 different sections describing 3 different important ci/cd changes.

IMPORTANT-START
For GitHub workflows that contain This workflow is centrally managed in https://github.com/asyncapi/.github/ you do not have to perform any work. These workflows were already updated through the update in .github. The only exception is the workflows related to nodejs release. More details in Upgrade Release pipeline - in case of nodejs projects section
IMPORTANT-END

Deprecation of way data is shared between steps

Every single GitHub Action workflow that has echo "::set-output name={name}::{value}" need to be updated to follow echo "{name}={value}" >> $GITHUB_OUTPUT

We do not yet know when set-output will stop working. Previous disable date was 31.05 but now then say community needs more time.

For more details read official article from GitHub

Deprecation of node12

2nd bullet point is still relevant for you even if your projects in not nodejs project

• Every single workflow that uses setup-node action needs an update to follow v3 version of this action, and make sure minimum node 14 is used
• Now this part is more complex. Problem with node12 is that node-based GitHub Actions were using it in majority as a runtime environment. Look for example at this action.yaml file for setup-node action v2. So the job that you have to do is go through all the workflows, and verify every single action that you use, make sure you are using the latest version that is not based on node12. I already did review a lot of actions as part of this PR so maybe you will find some actions there and can copy from me. For example action/checkout needs to be updated to v3.

Node12 end of support in action is probably September 27th.

For more details read official article from GitHub

Upgrade Release pipeline - in case of nodejs projects

ignore this section if your project is not nodejs project

You have 2 options. You can:

A. choose to switch to new release pipeline using instruction from asyncapi/.github#205

B. stay with old release pipeline, and manually update GitHub workflows and actions used in it, you can inspire a lot from this PR asyncapi/.github#226

I definitely recommend going with A

Workflows related to release:

• .github/workflows/if-nodejs-release.yml
• .github/workflows/if-nodejs-version-bump.yml
• .github/workflows/bump.yml

Why this issue?

https://sonarcloud.io/project/issues?resolved=false&id=asyncapi_EDAVisualiser&open=AYdwcYmRZxfSDDTOFuLU&tab=why

Where's the issue?

• https://sonarcloud.io/code?id=asyncapi_EDAVisualiser&selected=asyncapi_EDAVisualiser%3Alibrary%2Fsrc%2Fstyles%2Fdefault.css&line=12
• https://sonarcloud.io/code?id=asyncapi_EDAVisualiser&selected=asyncapi_EDAVisualiser%3Alibrary%2Fsrc%2Fstyles%2Fdefault.css&line=19
• https://sonarcloud.io/code?id=asyncapi_EDAVisualiser&selected=asyncapi_EDAVisualiser%3Alibrary%2Fsrc%2Fstyles%2Fdefault.css&line=60

Describe the bug

In the ApplicationFocusView, it always shows external applications, regardless of whether the application interacts with it or not, but I don't think that gives any value to the user because why would you care about other applications you don't interact with? If you want a larger picture you would use SystemView.

So I would suggest we filter out all external applications which do not interact with the primary application.

The external application nodes are created here:

This is also the location for filtering out applications if they have no correlating operations to the focused application.

I would suggest doing something along the lines of:

• Track all the channels that the primary application uses (in an array or map or similar)
• Dependant on how the external application is created (from AsyncAPI or core building blocks), we cross-reference against the above list to filter out any nodes that are irrelevant.

In case you have any questions or problems feel free to ping me here or on slack 🙂

Reason/Context

So far all the views have been revolving around applications and how they interact with the world through channels.

But sometimes you wish to focus on a single channel and who interacts with that.

Therefore I am proposing we add a new view, similar to the ApplicationFocusView as you can see here: https://asyncapi.github.io/EDAVisualiser/social-media/backend

But instead of having the application in the center, it will be a single channel with external applications around it, showing who receives from it and who sends to it.

Reason/Context

The new parser implementation is slowly being rolled out, and it's time to update the dependency here too.

Why this issue?

https://sonarcloud.io/project/issues?resolved=false&id=asyncapi_EDAVisualiser&open=AYdwcYkeZxfSDDTOFuLO&tab=why

Where's the issue?

https://sonarcloud.io/project/issues?resolved=false&id=asyncapi_EDAVisualiser&open=AYdwcYkeZxfSDDTOFuLO&tab=code

Why this issue?

https://sonarcloud.io/project/issues?resolved=false&types=BUG&id=asyncapi_EDAVisualiser&open=AYdwcYksZxfSDDTOFuLP&tab=why

Where's the issue?

https://sonarcloud.io/project/issues?resolved=false&types=BUG&id=asyncapi_EDAVisualiser&open=AYdwcYksZxfSDDTOFuLP&tab=code

Reason/Context

Right now we are limited to React 16 which is limiting integration options with for example Studio. There are two things that need to be upgraded, react + webpack and react-flow-renderer (renamed to reactflow dependency).

Breaking changes moving from v9 to v11:

v10 breaking changes:

• Split the elements array into nodes and edges arrays and implement onNodesChange and onEdgesChange handlers (detailed guide in the core concepts section)
• Memoize your custom nodeTypes and edgeTypes
• Rename onLoad to onInit
• Rename paneMoveable to panOnDrag
• Rename useZoomPanHelper to useReactFlow (and setTransform to setViewport)
• Rename node and edge option isHidden to hidden

v11 breaking changes:

• Changed name to reactflow instead of react-flow-renderer
• Importing CSS is mandatory
• defaultPosition and defaultZoom have been merged to defaultViewport
• Removal of getBezierEdgeCenter, getSimpleBezierEdgeCenter and getEdgeCenter
• Removal of onClickConnectStop and onConnectStop
• Pan over nodes

This probably also mean we have to upgrade webpack to the newest versions. Maybe we can follow something like https://medium.com/naukri-engineering/migrating-a-react-16-application-to-react-18-with-webpack-5-435d044b846