artemiscloud / activemq-artemis-self-provisioning-plugin Goto Github PK
View Code? Open in Web Editor NEWActiveMQ Artemis Self Provisioning Plugin
Home Page: https://main--633c221f1c3e24f3029a826f.chromatic.com/
License: Apache License 2.0
ActiveMQ Artemis Self Provisioning Plugin
Home Page: https://main--633c221f1c3e24f3029a826f.chromatic.com/
License: Apache License 2.0
Add the necessary steps to have an openshift cluster running:
Cluster bot
crc
toolsetSetup 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:
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.
Add dev contributing document.
Acceptance criteria:
Write unit test for below components and cover all the edge cases.
Build multi-arch self-provisioning-plugin images
Below PR is for reference
artemiscloud/activemq-artemis-broker-init-image#36
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.
Move some folder out side of broker folder at src
and use them as a modules.
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:
api-server
to be able to run the future unit tests in isolationI will work on a proposal PR for this so you can have a look at what it brings to the table;
Acceptance criteria:
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
Acceptance criteria:
Wireframe: https://www.ssorj.net/brokerage/brokers/build-infra/index.html
Acceptance criteria:
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
Integrate delete broker modal on broker details page
Acceptance criteria:
Write unit test for below components and cover all the edge cases.
Acceptance criteria:
Wireframe: https://www.ssorj.net/brokerage/brokers/build-infra/index.html
Acceptance criteria:
Acceptance criteria:
Setup test and enable test on ci
Acceptance criteria:
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
Leaving yaml editing for advanced users (like use resourceTemplate to path the resources)
Build cpu usage container component and metrics api integration
Build memory usage container component and metrics api integration.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.