redhat-developer / app-services-ui

Application Services Federated UI

Application Services UI

User interface for Red Hat Managed Services (Kafka, Service Registry etc.) that is available as part of the https://console.redhat.com

Application Services UI is based on the https://github.com/RedHatInsights/insights-frontend-starter-app.git which is React.js starter app for Red Hat Insights products that includes Patternfly 4 and shared cloud.redhat.com services

Services

• Managed Kafka UI (https://github.com/bf2fc6cc711aee1a0c2a/kas-ui)
• Kafka instance UI (https://github.com/bf2fc6cc711aee1a0c2a/kafka-ui)
• Service Registry UI (https://github.com/bf2fc6cc711aee1a0c2a/srs-ui)
• API Designer UI (https://github.com/bf2fc6cc711aee1a0c2a/ads-ui)
• Guides (https://github.com/redhat-developer/app-services-guides)

Running Project

Project can be run in two modes:

• Using remote federated components from console.redhat.com (only for Red Hat Internal usage)
• Running federated modules locally (dev)

Running project with remote components

Run:

npm install
npm run start:dev

Go to https://prod.foo.redhat.com:1337/beta/application-services/streams/kafkas

Running project with compiled components

Setting up all repositories for development

First we need to download all external repositories by running a script.

./hack/checkout-repos.sh

After that we can run any of the federated UI component in ./modules folder and it will automatically be used by the app-services-ui

Running UI against custom backend

Developers running app-services-ui on their local machines can point it to custom backends and authentication providers. To point UI to different backend we need to modify config.json configuration file on your local machine.

For example for configuring UI to run against Kas-installer we can change
1kas.apiBasePath1 value to kafka url returned by kas-installer.

For more information please refer to kas-installer

Contributing Guide

CONTRIBUTING

Creating new Module Guide

New module guide

Testing changes to nav

1. Edit webpack.dev.js and add the following to proxyConfig:

    routes: {
      '/config': { host: 'http://127.0.0.1:8889' },
      '/beta/config': { host: 'http://127.0.0.1:8889' }
    },

2. Clone https://github.com/RedHatInsights/cloud-services-config and follow the instructions there to make your changes
3. run npx http-server -p 8889 in cloud-services-config to try the changes out

app-services-ui's Issues

We need to update module name to app-services-ui

also probably need to update module name to app-services-ui

Originally posted by @pmuir in #8 (comment)

Move ui-shared back to app services-ui

See: https://github.com/redhat-developer/app-services-ui-shared#readme

I think all shared components might need to go to some shared folder.

AMS integration as SDK

AMS seems to be pushed to various different repositories and it is in different versions.
AMS API is huge and we using less than 10% of it. Maybe we can push this to SDK

Proposed structure of repository

Disscussion

modules - all separate github projects downloaded by scripts
shared - shared codebase that is part of the repo

Replace insights proxy container with dockerless solution

Run in pararel on remote repositories

We have all remote repositories in modules folder right now. Those will have separate node_modules installed at the time of setup.

We can add:

1. workspaces configuration (it will affect how modules are fetched which we probably do not want)
2. Use parallel runner like https://www.npmjs.com/package/run-in-all

Second option seems more appropriate to run set of UI's together, however, to do that we need to unify how we run projects in the dev. kas-ui, kafka-ui have different scripts to start in dev mode thus it is not possible to issue same script on those etc.

WDYT?

Alternatively we can have script that allow us to define dev profiles in package.json (list of projects that will be started in dev mode etc.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update red hat cloud services packages (@redhat-cloud-services/frontend-components, @redhat-cloud-services/frontend-components-notifications, @redhat-cloud-services/frontend-components-utilities, @redhat-cloud-services/rbac-client)
• chore(deps): update dependency @redhat-cloud-services/frontend-components-config-utilities to v3
• chore(deps): update dependency eslint-plugin-deprecation to v2
• chore(deps): update dependency lint-staged to v15
• chore(deps): update dependency node to v20
• chore(deps): update red hat cloud services packages to v4 (major) (@redhat-cloud-services/frontend-components, @redhat-cloud-services/frontend-components-notifications, @redhat-cloud-services/frontend-components-utilities)
• chore(deps): update shared components packages to v4 (major) (actions/checkout, actions/setup-node, jwt-decode)
• chore(deps): update shared components packages to v9 (major) (eslint-config-prettier, react-redux)
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• fix(deps): update shared components packages (@patternfly/react-charts, @patternfly/react-core, @patternfly/react-icons, @patternfly/react-table, @rhoas/app-services-ui-components, @testing-library/jest-dom, @types/jest, @types/js-cookie, @types/react-dom, @types/redux-logger, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, axios, classnames, css-loader, eslint, eslint-config-prettier, eslint-plugin-cypress, eslint-plugin-deprecation, eslint-plugin-jest, eslint-plugin-react, html-webpack-plugin, i18next, jest, lint-staged, node, react-error-boundary, react-redux, redux-promise-middleware, regenerator-runtime, rimraf, terser-webpack-plugin, ts-jest, ts-loader, tsconfig-paths-webpack-plugin, tslib, typescript, url, webpack, webpack-bundle-analyzer, webpack-merge)
• chore(deps): update dependency @redhat-cloud-services/frontend-components-config-utilities to v2
• chore(deps): update dependency react-i18next to v12
• chore(deps): update shared components packages to v13 (major) (@testing-library/react, react-i18next)
• chore(deps): update shared components packages to v14 (major) (@testing-library/react, lint-staged, react-i18next)
• chore(deps): update shared components packages to v3 (major) (date-fns, prettier)
• chore(deps): update shared components packages to v5 (major) (@patternfly/patternfly, @patternfly/react-core, @patternfly/react-icons, @patternfly/react-table, redux)
• chore(deps): update shared components packages to v6 (major) (@testing-library/jest-dom, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, https-proxy-agent)
• fix(deps): update dependency query-string to v8
• fix(deps): update shared components packages to v7 (major) (@patternfly/react-charts, https-proxy-agent)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

dockerfile

build/Dockerfile

github-actions

.github/workflows/node.js.yml

• actions/checkout v3
• actions/setup-node v3
• actions/checkout v3
• actions/setup-node v3

npm

package.json

• @patternfly/react-charts 6.94.19
• @redhat-cloud-services/rbac-client 1.2.5
• @rhoas/account-management-sdk 1.0.3
• @rhoas/app-services-ui-components 2.31.0
• @rhoas/app-services-ui-shared 0.16.6
• @rhoas/kafka-instance-sdk 1.0.3
• @rhoas/kafka-management-sdk 1.0.2
• @rhoas/registry-management-sdk 1.0.2
• classnames 2.3.2
• js-base64 3.7.5
• js-cookie 3.0.5
• jwt-decode 3.1.2
• query-string 7.1.3
• react-error-boundary 4.0.10
• react-redux 8.1.1
• redux 4.2.1
• redux-logger 3.0.6
• @patternfly/patternfly 5.0.2
• @patternfly/react-core 4.276.8
• @patternfly/react-icons 4.93.6
• @patternfly/react-table 4.113.0
• @redhat-cloud-services/frontend-components 3.11.2
• @redhat-cloud-services/frontend-components-config-utilities 1.5.31
• @redhat-cloud-services/frontend-components-notifications 3.2.14
• @redhat-cloud-services/frontend-components-utilities 3.7.4
• @testing-library/jest-dom 5.16.5
• @testing-library/react 12.1.5
• @types/jest 29.5.2
• @types/js-cookie 3.0.3
• @types/react-dom 18.2.6
• @types/react-router-dom 5.3.3
• @types/redux-logger 3.0.9
• @typescript-eslint/eslint-plugin 5.60.1
• @typescript-eslint/parser 5.60.1
• @xstate/inspect 0.8.0
• axios 1.4.0
• copy-webpack-plugin 11.0.0
• css-loader 6.8.1
• css-minimizer-webpack-plugin 5.0.1
• date-fns 2.30.0
• dotenv-webpack 8.0.1
• eslint 8.43.0
• eslint-config-prettier 8.8.0
• eslint-plugin-cypress 2.13.3
• eslint-plugin-deprecation 1.4.1
• eslint-plugin-i18next 6.0.3
• eslint-plugin-jest 27.2.2
• eslint-plugin-react 7.32.2
• eslint-plugin-react-hooks 4.6.0
• html-replace-webpack-plugin 2.6.0
• html-webpack-plugin 5.5.3
• https-proxy-agent 5.0.1
• husky 8.0.3
• i18next 23.2.5
• jest 29.5.0
• jws 4.0.0
• lint-staged 13.2.3
• lodash.merge 4.6.2
• mini-css-extract-plugin 2.7.6
• npm-run-all 4.1.5
• null-loader 4.0.1
• prettier 2.8.8
• prop-types 15.8.1
• react 17.0.2
• react-dom 17.0.2
• react-i18next 11.18.6
• react-router-dom 5.2.1
• redux-promise-middleware 6.1.3
• regenerator-runtime 0.13.11
• rimraf 5.0.1
• terser-webpack-plugin 5.3.9
• ts-jest 29.1.0
• ts-loader 9.4.4
• tsconfig-paths-webpack-plugin 4.0.1
• tslib 2.6.0
• typescript 5.1.6
• url 0.11.1
• webpack 5.88.1
• webpack-bundle-analyzer 4.9.0
• webpack-cli 5.1.4
• webpack-dev-server 4.15.1
• webpack-merge 5.9.0
• @patternfly/patternfly 5.0.2
• @patternfly/react-core 4.276.8
• @patternfly/react-icons 4.93.6
• @patternfly/react-table 4.113.0
• @redhat-cloud-services/frontend-components 3.11.2
• @redhat-cloud-services/frontend-components-notifications 3.2.14
• @redhat-cloud-services/frontend-components-utilities 3.7.4
• axios 1.4.0
• react 17.0.2
• react-dom 17.0.2
• react-router-dom 5.2.1
• redux-promise-middleware 6.1.3

nvm

.nvmrc

• node 18.16.1

---

• Check this box to trigger a request for Renovate to run again on this repository

Deprecated fields should fail linting when used

Context: bf2fc6cc711aee1a0c2a/kafka-admin-api#155

We have been silently using deprecated fields in UI but they were removed from backend, breaking our UI.

Using https://github.com/gund/eslint-plugin-deprecation should solve that in future as any deprecated field should be tracked and migrated as fast as we get that into SDK

CC @riccardo-forina

Improve development workflow to download local modules

Improve develoment workflow by enabling auto donwloading of all modules

Synchronize app-services-ui with midstream repository

Synchronization should happen between main => mk-release repositories