Skip to content

Commit

Permalink
adjust to comments
Browse files Browse the repository at this point in the history
  • Loading branch information
chriskari committed Dec 11, 2024
1 parent d3a05e9 commit 152dc7d
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 25 deletions.
8 changes: 4 additions & 4 deletions docs/extensibility/custom-extensions.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
# 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.
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.

## 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.
To enable the custom extension feature, you must set the corresponding feature flag in your Busola config, which is disabled by default.

```yaml
EXTENSIBILITY_CUSTOM_COMPONENTS:
isEnabled: true
```
## Creating custom extensions
## Creating Custom Extensions
Creating a custom extension is as straightforward as setting up a ConfigMap with the following sections:
Expand All @@ -21,4 +21,4 @@ Creating a custom extension is as straightforward as setting up a ConfigMap with

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.
See this [example](./../../examples/custom-extension/README.md), to learn more.
2 changes: 1 addition & 1 deletion docs/features.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ 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).
- **EXTENSIBILITY_CUSTOM_COMPONENTS** - is used to indicate whether entirely custom extensions can be added to Busola. See [this example](../examples/custom-extension/README.md).
Default settings:
Expand Down
31 changes: 11 additions & 20 deletions examples/custom-extension/README.md
Original file line number Diff line number Diff line change
@@ -1,38 +1,31 @@
# Set Up Your Custom Busola Extension

This example contains a basic custom extension, that queries all deployments of a selected namespace of your cluster, and additionally retrieves the current weather data for Munich, Germany from an external weather API.
This example contains a basic custom extension that queries all deployments of a selected namespace of your cluster. Additionally, it retrieves the current weather data for Munich, Germany, from an external weather API.

To set up and deploy your own custom Busola extension, follow these steps.

### 1. Adjust Static HTML Content
1. Adjust the static HTML content.

Edit the `ui.html` file to define the static HTML content for your custom extension.

---

### 2. Configure Dynamic Components
2. Configure dynamic components.

Set up dynamic or behavioral components by modifying the custom element defined in the `script.js` file.

- **Accessing Kubernetes Resources**: Use the `fetchWrapper` function to interact with cluster resources through the Kubernetes API.

- **Making External API Requests**: Use the `proxyFetch` function to handle requests to external APIs that are subject to CORS regulations.
- **Accessing Kubernetes resources**: Use the `fetchWrapper` function to interact with cluster resources through the Kubernetes API.

---
- **Making external API requests**: Use the `proxyFetch` function to handle requests to external APIs that are subject to CORS regulations.

### 3. Define Extension Metadata
3. Define extension metadata

Update the `general.yaml` file to define metadata for your custom extension.

#### ⚠️ Important:

Ensure that the `general.customElement` property matches the name of the custom element defined in `script.js`. The script is loaded only once, and this property is used to determine whether the custom element is already defined.
> [! WARNING]
> Ensure that the `general.customElement` property matches the name of the custom element defined in `script.js`. The script is loaded only once, and this property is used to determine whether the custom element is already defined.
---
4. Deploy your extension

### 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:
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:

```bash
kubectl config current-context
Expand All @@ -46,8 +39,6 @@ Alternatively, you can use the following command:
kubectl kustomize . | kubectl apply -n kyma-system -f -
```

---

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

Run `npm start` to start the development server.

0 comments on commit 152dc7d

Please sign in to comment.