artemiscloud / activemq-artemis-self-provisioning-plugin Goto Github PK

Add the necessary steps to have an openshift cluster running:

• using the Cluster bot
• using the crc toolset

Setup Github CI jobs.

For reference: https://github.com/artemiscloud/activemq-artemis-operator

Build tooltip component and show all pods details together instead

While trying to do yarn build-storybook or yarn storybook it fails with the following error

ERR! Module not found: Error: Can't resolve '@console/dynamic-plugin-sdk/src/perspective/useActivePerspective' in '/Users/ajay/Work/KIE/activemq-artemis-self-provisioning-plugin/node_modules/@openshift-console/dynamic-plugin-sdk/lib/api'
63% building 14/14 entries 3311/3393 dependencies 732/848 modulesinfo => Manager built (9.16 s)
ERR! ModuleNotFoundError: Module not found: Error: Can't resolve '@console/dynamic-plugin-sdk/src/perspective/useActivePerspective' in '/Users/ajay/Work/KIE/activemq-artemis-self-provisioning-plugin/node_modules/@openshift-console/dynamic-plugin-sdk/lib/api'
ERR!     at /Users/ajay/Work/KIE/activemq-artemis-self-provisioning-plugin/node_modules/webpack/lib/Compilation.js:2016:28
ERR!     at /Users/ajay/Work/KIE/activemq-artemis-self-provisioning-plugin/node_modules/webpack/lib/NormalModuleFactory.js:798:13
ERR!     at eval (eval at create (/Users/ajay/Work/KIE/activemq-artemis-self-provisioning-plugin/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
ERR!     at /Users/ajay/Work/KIE/activemq-artemis-self-provisioning-plugin/node_modules/webpack/lib/NormalModuleFactory.js:270:22
ERR!     at eval (eval at create (/Users/ajay/Work/KIE/activemq-artemis-self-provisioning-plugin/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
ERR!     at /Users/ajay/Work/KIE/activemq-artemis-self-provisioning-plugin/node_modules/webpack/lib/NormalModuleFactory.js:434:22
ERR!     at /Users/ajay/Work/KIE/activemq-artemis-self-provisioning-plugin/node_modules/webpack/lib/NormalModuleFactory.js:116:11
ERR!     at /Users/ajay/Work/KIE/activemq-artemis-self-provisioning-plugin/node_modules/webpack/lib/NormalModuleFactory.js:670:25
ERR!     at /Users/ajay/Work/KIE/activemq-artemis-self-provisioning-plugin/node_modules/webpack/lib/NormalModuleFactory.js:855:8
ERR!     at /Users/ajay/Work/KIE/activemq-artemis-self-provisioning-plugin/node_modules/webpack/lib/NormalModuleFactory.js:975:5
ERR!     at /Users/ajay/Work/KIE/activemq-artemis-self-provisioning-plugin/node_modules/neo-async/async.js:6883:13
ERR!     at /Users/ajay/Work/KIE/activemq-artemis-self-provisioning-plugin/node_modules/webpack/lib/NormalModuleFactory.js:958:45```

Running yarn lint on the entire project produces various errors and warning messages related to ESLint and CSS. Addressing these issues is crucial for enhancing the code quality and ensuring a smoother development process.

[msarawan@fedora activemq-artemis-self-provisioning-plugin]$ yarn lint
yarn run v1.22.19
$ eslint ./src --fix && stylelint "src/**/*.css" --allow-empty-input --fix

/home/msarawan/activemq-artemis-self-provisioning/activemq-artemis-self-provisioning-plugin/src/brokers/add-broker/components/AddBrokerForm/YamlEditorView.tsx
  13:29  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/msarawan/activemq-artemis-self-provisioning/activemq-artemis-self-provisioning-plugin/src/brokers/broker-details/BrokerDetails.container.tsx
  77:6  warning  React Hook useEffect has a missing dependency: 'k8sGetBroker'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

/home/msarawan/activemq-artemis-self-provisioning/activemq-artemis-self-provisioning-plugin/src/brokers/broker-pods/PodsList.container.tsx
  51:6  warning  React Hook useEffect has a missing dependency: 'k8sGetBroker'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

/home/msarawan/activemq-artemis-self-provisioning/activemq-artemis-self-provisioning-plugin/src/brokers/broker-pods/components/PodList.tsx
  18:14  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  75:14  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/msarawan/activemq-artemis-self-provisioning/activemq-artemis-self-provisioning-plugin/src/brokers/broker-pods/components/PodRow.tsx

✖ 29 problems (0 errors, 29 warnings)


src/stories/button.css
 12:10  ✖  Unexpected named color "white"  color-named             
 13:21  ✖  Unexpected hex color "#1ea7fd"  color-no-hex            
 17:10  ✖  Unexpected hex color "#333"     color-no-hex            
 19:15  ✖  Unexpected function "rgb"       function-disallowed-list

src/stories/header.css
  3:28  ✖  Unexpected function "rgb"                   function-disallowed-list
 10:1   ✖  Expected "svg" to have no more than 0 type  selector-max-type       
           selectors                                                           
 15:1   ✖  Expected "h1" to have no more than 0 type   selector-max-type       
           selectors                                                           
 24:1   ✖  Expected "button + button" to have no more  selector-max-type       
           than 0 type selectors                                               
 29:10  ✖  Unexpected hex color "#333"                 color-no-hex            

src/stories/page.css
  1:1   ✖  Expected "section" to have no more than 0 type     selector-max-type
           selectors                                                           
  8:10  ✖  Unexpected hex color "#333"                        color-no-hex     
 11:1   ✖  Expected "section h2" to have no more than 0 type  selector-max-type
           selectors                                                           
 20:1   ✖  Expected "section p" to have no more than 0 type   selector-max-type
           selectors                                                           
 24:1   ✖  Expected "section a" to have no more than 0 type   selector-max-type
           selectors                                                           
 26:10  ✖  Unexpected hex color "#1ea7fd"                     color-no-hex     
 29:1   ✖  Expected "section ul" to have no more than 0 type  selector-max-type
           selectors                                                           
 34:1   ✖  Expected "section li" to have no more than 0 type  selector-max-type
           selectors                                                           
 38:1   ✖  Expected "section .tip" to have no more than 0     selector-max-type
           type selectors                                                      
 44:15  ✖  Unexpected hex color "#e7fdd8"                     color-no-hex     
 45:10  ✖  Unexpected hex color "#66bf3c"                     color-no-hex     
 51:1   ✖  Expected "section .tip-wrapper" to have no more    selector-max-type
           than 0 type selectors                                               
 58:1   ✖  Expected "section .tip-wrapper svg" to have no     selector-max-type
           more than 0 type selectors                                          
 67:1   ✖  Expected "section .tip-wrapper svg path" to have   selector-max-type
           no more than 0 type selectors                                       
 68:9   ✖  Unexpected hex color "#1ea7fd"                     color-no-hex

24 problems (24 errors, 0 warnings)

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Acceptance criteria:

• Pre-confirm dialog/modal should open when user click on delete option on kebab option
• User should able to see cancel and confirm button
• Dialog/modal close on click close button or press keyboard esc button
• Broker instance should delete on click confirm button and close dialog/modal

Below screenshot is for reference:

Title: Delete instance ?
Body: The 'instance name' instance will be deleted. Applications will no longer have access in this instance.
Buttons: Delete and Cancel

When developing it's possible to ask to yarn to enter a mode where it will recompile the bundle on the fly and make the web browser refresh whenever the contributor saves the files on their computer.

It's more of a quality of life improvement.

adding a user manual describing how to install and use the plugin would be nice.

Acceptance criteria:
Write unit test for below components and cover all the edge cases.

• BrokersList.tsx
• BrokerRow.tsx
• PreConfirmDeleteModal.tsx
• BrokersList.container.tsx

Add dev contributing document.

Acceptance criteria:
Write unit test for below components and cover all the edge cases.

• FormView.tsx
• YamlEditorView.tsx
• AddBroker.component.tsx
• AddBroker.container.tsx

• Build chart loading component
• Build chart title component
• Build empty state metrics component
• Build chart skeleton loader component
• Build chart popover component
• Build memory usage chart component

Build multi-arch self-provisioning-plugin images

Below PR is for reference
artemiscloud/activemq-artemis-broker-init-image#36

• Build dropdown for time span
• Add time span support for metrics api

Currently the api definitions for most apis uses BrokerRespons as the response type.
It is too general. It should use a more specific type schema for each api.

Create Radio buttons component for switching form view to yaml editor vice versa.

Move some folder out side of broker folder at src and use them as a modules.

• Metrics
• Clients
• Queues
• Topics
• Configuration

Make sure everything should work as expected after this structural change.

Build CPU Usage chart component

The requests made to the api server are hand written. Hand writting queries isn't necesserarily an issue, but often we tend to have to mix in several aspects together. Data fetching, error handling, state updating and data caching. The main drawback of having to write the logic of the queries manually is that this logic is error prone and hard to test.

There's a React library specialized in queries that we could use in our frontend: https://redux-toolkit.js.org

This library will help us to:

• automate the code for sending requests to the api-server.
• handle the errors more easily
• getting mocks of the api-server to be able to run the future unit tests in isolation

I will work on a proposal PR for this so you can have a look at what it brings to the table;

• Add remote source
• Make sure container image should run on specific port 8001

Acceptance criteria:

• Integrate API for clients data
• Data should be display on clients page successfully
• Implement error handling
• Loader/Spinner should be display while fetching data from backend api

Add breadcrumb and broker name on broker details page

https://www.ssorj.net/brokerage/old/brokers/build-infra/index.html

Optimise application bundle size

Acceptance criteria

• Replace docker buildx with buildah for CI and release workflow
• Make sure don't login quay.io on PR as we don't need to push images
• Make sure on PR only AMD64 image should be build and don't push
• Build and push AMD64 and ARM64 images on main branch on push event.
• Test open PR on your fork branch before merging PR to make sure build and push images workflows are working fine

Acceptance criteria:

• This component should be part of clients tab page
• Build react component
• Build react container and pass dummy data in component. Later we will integrate api for live data in separate task
• Write storybook component to see this components standalone
• Make sure component should be responsive and fit for all kind of view port

Wireframe: https://www.ssorj.net/brokerage/brokers/build-infra/index.html

• Add dropdown component and show different time span for polling and refresh off.
• Add support for refresh off and update polling time interval
  For reference:
  

The table alignment for clients, queues and topics page is crashing after changing the value from dropdown.

when i run the plugin getting the below issues in the console.

Acceptance criteria:

• This component should be part of topics tab page
• Build react component
• Build react container component and pass dummy data in component. Later we will integrate api for live data in separate task
• Write storybook component to see this components standalone
• Make sure component should be responsive and fit for all kind of view port

Wireframe: https://www.ssorj.net/brokerage/address-spaces/build-infra/index.html

Implement: artemiscloud/activemq-artemis-operator#927 on the provisioning plugin so that we can hook up a couple of external producers & consumers to the broker instance.

Add an api to read Address attributes

Add typescript rules and fix issues

Create a broker form component and integrate with create broker instance component.

Integrate delete broker modal on broker details page

Acceptance criteria:
Write unit test for below components and cover all the edge cases.

• BrokerDetails.container.tsx

Acceptance criteria:

• Add upload client certificate button on clients page
• Build a dialog/modal component for upload certificate
• Integrate Api and user should be to upload client certificate successfully

Wireframe: https://www.ssorj.net/brokerage/brokers/build-infra/index.html

Acceptance criteria:

• Integrate API for queues data
• Data should be display on queues page successfully
• Implement error handling
• Loader/Spinner should be display while fetching data from backend api

Acceptance criteria:

• Integrate API for topics data
• Data should be display on topics page successfully
• Implement error handling
• Loader/Spinner should be display while fetching data from backend api

Setup test and enable test on ci

Acceptance criteria:

• This component should be part of queues tab page
• Build react component
• Build react container component and pass dummy data in component. Later we will integrate api for live data in separate task
• Write storybook component to see this components standalone
• Make sure component should be responsive and fit for all kind of view port

Wireframe: https://www.ssorj.net/brokerage/brokers/build-infra/index.html

• Build new generic component QueryBrowser for Metrics
  Move existing component ChartMemoryUsage.tsx code in new component QueryBrowser and full fill all the requirement to cover all kind of charts data. Move out the logic from generic component which is not common and pass as a props so that it will work for all kind of charts.

• Build new card component CardQueryBrowser
  Move existing component CardBrokerMemoryUsageMetrics.tsx code in new component CardQueryBrowser and full fill all the requirement to cover all kind of charts data

• Fix skeleton issue on change span value from dropdown
  Skeleton should be display while fetching data from server.

• Fix unresponsive page issue on span select from dropdown.
  Check state and function and make sure not re-rendering infinite times. Add useCallback on function to avoid re-rendering.

Build metrics layout component

The eslint configuration would benefit from having the react-hooks plugin added to it.
That would prevent a contributor from making a mistake regarding hooks see https://legacy.reactjs.org/docs/hooks-rules.html

Also I propose to add eqeqeq: error as a rule for the linter. This is mainly to not forget that the triple equality is the one to use. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness

As @RoddieKieley asks in #120:

Should the user expect any CORS related issues connecting to jolokia with the current plugin/operator/broker container images available at quay.io/artemiscloud? I think the answer is no, right?

Hide namespaces/projects dropdown on Edit Broker Page and Details Page

Currently we provide a form view and 'yaml view` when creating a broker via the plugin.

The From view need to be implemented to help user

• doing configuration via a visual page rather than editing raw yamls
• focus on broker configuration components like acceptors without worrying use deprecated CR fields
• assist user on SSL/TLS setup

Leaving yaml editing for advanced users (like use resourceTemplate to path the resources)

Build cpu usage container component and metrics api integration

• Install supporting packages
• Add unit tests configuration

Build memory usage container component and metrics api integration.