feat: custom busola extensions #3523

chriskari · 2024-12-06T11:30:44Z

Description
Changes proposed in this pull request:

added proxyHandler to backend (for accessing external APIs without CORS issues)
adjusted busola code to load custom html content and script provided by extension
added feature flag
added example for a custom extension

Related issue(s)
#3497

Definition of done

The PR's title starts with one of the following prefixes:
- feat: A new feature
- fix: A bug fix
- docs: Documentation only changes
- refactor: A code change that neither fixes a bug nor adds a feature
- test: Adding tests
- chore: Maintainance changes to the build process or auxiliary tools, libraries, workflows, etc.
Related issues are linked. To link internal trackers, use the issue IDs like backlog#4567
Explain clearly why you created the PR and what changes it introduces
All necessary steps are delivered, for example, tests, documentation, merging

mrCherry97 · 2024-12-09T09:18:37Z

examples/custom-extension/README.md

+
+### 4. Deploy Your Extension
+
+Run `./deploy.sh` to create a ConfigMap and deploy it to your cluster


To run this command, I need to have exported Kubeconfig to my cluster, please add this information, and also I'll consider changing the name of the sh file to some deploy-custom-extensions or something more specific.

src/components/Extensibility/ExtensibilityList.js

mrCherry97 · 2024-12-09T09:22:08Z

src/state/navigation/extensionsAtom.ts

+        if (extCustomComponentsEnabled) {
+          extResourceWithMetadata.data.customHtml =
+            extResourceWithMetadata.data.customHtml || '';
+        }


You are copy-pasting the same value with only the || '' change, is it really necessary? Can't we handle this value somehow differently?

mrCherry97 · 2024-12-09T09:22:57Z

src/state/navigation/extensionsAtom.ts

+        if (extCustomComponentsEnabled) {
+          extResourceWithMetadata.data.customHtml =
+            currentConfigMap.data.customHtml;


Maybe just add here this, and remove the previous copy-paste?

Suggested change

if (extCustomComponentsEnabled) {

extResourceWithMetadata.data.customHtml =

currentConfigMap.data.customHtml;

if (extCustomComponentsEnabled) {

extResourceWithMetadata.data.customHtml =

currentConfigMap.data.customHtml || '';

mrCherry97 · 2024-12-09T09:23:40Z

src/state/navigation/extensionsAtom.ts

+    if (isExtensibilityCustomComponentsEnabled) {
+      // Wrap busola fetch function to be able to use it in the extensions as regular fetch.
+      // It reduces the learning curve for the extension developers and introduces loose coupling between Busola and the extensions.
+      function asRegularFetch(busolaFetch: any, url: string, options: any) {


Can you provide more specific types?

OliwiaGowor · 2024-12-11T09:15:23Z

LGTM

grego952 · 2024-12-11T08:33:34Z

docs/extensibility/custom-extensions.md

@@ -0,0 +1,24 @@
+# Custom Extensions
+
+Busola's custom extension feature allows you to design fully custom user interfaces that go beyond the built-in extensibility functionality. This feature is ideal for creating unique and specialized displays that are not covered by the built-in components.


Suggested change

Busola's custom extension feature allows you to design fully custom user interfaces that go beyond the built-in extensibility functionality. This feature is ideal for creating unique and specialized displays that are not covered by the built-in components.

Busola's custom extension feature allows you to design fully custom user interfaces beyond the built-in extensibility functionality. This feature is ideal for creating unique and specialized displays not covered by the built-in components.

grego952 · 2024-12-11T08:34:34Z

docs/extensibility/custom-extensions.md

+
+## Getting Started
+
+First, to enable the custom extension feature you need to set the corresponding feature flag in your busola config, which is disabled by default.


Suggested change

First, to enable the custom extension feature you need to set the corresponding feature flag in your busola config, which is disabled by default.

To enable the custom extension feature, you must set the corresponding feature flag in your Busola config, which is disabled by default.

grego952 · 2024-12-11T08:34:52Z

docs/extensibility/custom-extensions.md

+  isEnabled: true
+```
+
+## Creating custom extensions


Suggested change

## Creating custom extensions

## Creating Custom Extensions

grego952 · 2024-12-11T09:14:42Z

docs/extensibility/custom-extensions.md

+
+Once your ConfigMap is ready, add it to your cluster, and Busola will load and display your custom UI.
+
+The best way to get familiar with this mechanism is to have a look at our [example](./../../examples/custom-extension/README.md), where everything is explained in detail.


Suggested change

The best way to get familiar with this mechanism is to have a look at our [example](./../../examples/custom-extension/README.md), where everything is explained in detail.

See this [example](./../../examples/custom-extension/README.md), to learn more.

grego952 · 2024-12-11T09:15:33Z

docs/features.md

@@ -56,6 +56,15 @@ EXTENSIBILITY:
  isEnabled: true
 ```

+- **EXTENSIBILITY_CUSTOM_COMPONENTS** - is used to indicate whether entirely custom extensions can be added to Busola. An example for a custom extension can be found [here](../examples/custom-extension/README.md).


Suggested change

- **EXTENSIBILITY_CUSTOM_COMPONENTS** - is used to indicate whether entirely custom extensions can be added to Busola. An example for a custom extension can be found [here](../examples/custom-extension/README.md).

- **EXTENSIBILITY_CUSTOM_COMPONENTS** - is used to indicate whether entirely custom extensions can be added to Busola. See [this example](../examples/custom-extension/README.md).

grego952 · 2024-12-11T09:30:38Z

examples/custom-extension/README.md

+
+---
+
+### 4. Deploy Your Extension


Suggested change

### 4. Deploy Your Extension

4. Deploy your extension.

grego952 · 2024-12-11T09:32:39Z

examples/custom-extension/README.md

+
+### 4. Deploy Your Extension
+
+Before running the deployment command, ensure that your **Kubeconfig** is correctly exported and points to the desired cluster. You can check the current context by running:


Suggested change

Before running the deployment command, ensure that your **Kubeconfig** is correctly exported and points to the desired cluster. You can check the current context by running:

Before running the deployment command, ensure that your `kubeconfig` is correctly exported and points to the desired cluster. You can check the current context by running:

examples/custom-extension/README.md

grego952 · 2024-12-11T09:32:59Z

examples/custom-extension/README.md

+kubectl kustomize . | kubectl apply -n kyma-system -f -
+```
+
+---


Suggested change

---

grego952 · 2024-12-11T09:33:19Z

examples/custom-extension/README.md

+
+---
+
+### 5. Test Your Changes Locally


Suggested change

### 5. Test Your Changes Locally

5. Test your changes locally.

mrCherry97 · 2024-12-12T10:32:33Z

/override tide

kyma-bot · 2024-12-12T10:32:38Z

@mrCherry97: Overrode contexts on behalf of mrCherry97: tide

In response to this:

/override tide

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

* feat: add proxyhandler to backend * feat: adjust busola code to handle custom extensions * feat: added example custom extension * feat: rename folder * feat: add docs * feat: update docs * feat: update docs * feat: add more specific types * feat: adjust to review comments * adjust to comments

chriskari added 3 commits December 6, 2024 12:01

feat: add proxyhandler to backend

20f3c84

feat: adjust busola code to handle custom extensions

7b42988

feat: added example custom extension

881b959

chriskari requested review from a team, akucharska, mrCherry97, dbadura and OliwiaGowor as code owners December 6, 2024 11:30

kyma-bot added the cla: yes Indicates the PR's author has signed the CLA. label Dec 6, 2024

chriskari linked an issue Dec 6, 2024 that may be closed by this pull request

Custom busola extensions #3497

Closed

6 tasks

kyma-bot added the size/L Denotes a PR that changes 100-499 lines, ignoring generated files. label Dec 6, 2024

chriskari added 4 commits December 6, 2024 12:37

feat: rename folder

1c12253

feat: add docs

ce0d50b

feat: update docs

c73668f

feat: update docs

ee5d4eb

mrCherry97 requested changes Dec 9, 2024

View reviewed changes

kyma-bot assigned mrCherry97 Dec 9, 2024

feat: add more specific types

7a52a13

kyma-bot added size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. and removed size/L Denotes a PR that changes 100-499 lines, ignoring generated files. labels Dec 9, 2024

feat: adjust to review comments

d3a05e9

mrCherry97 assigned pbochynski, akucharska and OliwiaGowor Dec 10, 2024

pbochynski previously approved these changes Dec 10, 2024

View reviewed changes

kyma-bot added the lgtm Looks good to me! label Dec 10, 2024

grego952 reviewed Dec 11, 2024

View reviewed changes

adjust to comments

152dc7d

chriskari dismissed pbochynski’s stale review via 152dc7d December 11, 2024 12:31

kyma-bot added size/L Denotes a PR that changes 100-499 lines, ignoring generated files. and removed lgtm Looks good to me! size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. labels Dec 11, 2024

grego952 approved these changes Dec 11, 2024

View reviewed changes

kyma-bot assigned grego952 Dec 11, 2024

kyma-bot added the lgtm Looks good to me! label Dec 11, 2024

akucharska approved these changes Dec 12, 2024

View reviewed changes

mrCherry97 approved these changes Dec 12, 2024

View reviewed changes

mrCherry97 merged commit 463d5a9 into kyma-project:main Dec 12, 2024
16 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: custom busola extensions #3523

feat: custom busola extensions #3523

chriskari commented Dec 6, 2024 •

edited

Loading

mrCherry97 Dec 9, 2024

mrCherry97 Dec 9, 2024

mrCherry97 Dec 9, 2024

mrCherry97 Dec 9, 2024

OliwiaGowor commented Dec 11, 2024

grego952 Dec 11, 2024

grego952 Dec 11, 2024

grego952 Dec 11, 2024

grego952 Dec 11, 2024

grego952 Dec 11, 2024

grego952 Dec 11, 2024

grego952 Dec 11, 2024

grego952 Dec 11, 2024

grego952 Dec 11, 2024

mrCherry97 commented Dec 12, 2024

kyma-bot commented Dec 12, 2024


		### 4. Deploy Your Extension

		Run `./deploy.sh` to create a ConfigMap and deploy it to your cluster

		@@ -0,0 +1,24 @@
		# Custom Extensions

		Busola's custom extension feature allows you to design fully custom user interfaces that go beyond the built-in extensibility functionality. This feature is ideal for creating unique and specialized displays that are not covered by the built-in components.


		## Getting Started

		First, to enable the custom extension feature you need to set the corresponding feature flag in your busola config, which is disabled by default.

	First, to enable the custom extension feature you need to set the corresponding feature flag in your busola config, which is disabled by default.
	To enable the custom extension feature, you must set the corresponding feature flag in your Busola config, which is disabled by default.


		Once your ConfigMap is ready, add it to your cluster, and Busola will load and display your custom UI.

		The best way to get familiar with this mechanism is to have a look at our [example](./../../examples/custom-extension/README.md), where everything is explained in detail.

	The best way to get familiar with this mechanism is to have a look at our [example](./../../examples/custom-extension/README.md), where everything is explained in detail.
	See this [example](./../../examples/custom-extension/README.md), to learn more.

	- EXTENSIBILITY_CUSTOM_COMPONENTS - is used to indicate whether entirely custom extensions can be added to Busola. An example for a custom extension can be found [here](../examples/custom-extension/README.md).
	- EXTENSIBILITY_CUSTOM_COMPONENTS - is used to indicate whether entirely custom extensions can be added to Busola. See [this example](../examples/custom-extension/README.md).


		### 4. Deploy Your Extension

		Before running the deployment command, ensure that your Kubeconfig is correctly exported and points to the desired cluster. You can check the current context by running:

	### 5. Test Your Changes Locally
	5. Test your changes locally.

feat: custom busola extensions #3523

feat: custom busola extensions #3523

Conversation

chriskari commented Dec 6, 2024 • 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

OliwiaGowor commented Dec 11, 2024

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

mrCherry97 commented Dec 12, 2024

kyma-bot commented Dec 12, 2024

chriskari commented Dec 6, 2024 •

edited

Loading