You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
tar xvzf my-first-plugin-0.1.0.tar.gz -C /headlamp/plugins
88
44
```
89
45
90
-
## Shipping and Deploying Plugins
46
+
If you prefer to export one or more plugins directly, use the `headlamp-plugin` tool. Run `npm run build` first. Then use the `extract` option on a folder with Headlamp plugins.
91
47
92
-
Once a plugin is ready to be shipped (built for production), it needs to
93
-
be placed in a "plugins directory" for Headlamp to load it.
94
-
95
-
For example, if we have built 3 plugins called MyPlugin1, MyPlugin2, and
96
-
MyPlugin3, they should be added to a directory in the following structure:
48
+
For a directory like this:
97
49
98
50
```
99
-
.plugins/
100
-
MyPlugin1/
101
-
main.js
102
-
MyPlugin2/
103
-
main.js
104
-
MyPlugin3/
105
-
main.js
51
+
# Directory structure
52
+
my-plugins/
53
+
├── MyPlugin1/
54
+
│ ├── dist/
55
+
│ │ └── main.js
56
+
│ └── package.json
57
+
└── MyPlugin2/
58
+
├── dist/
59
+
│ └── main.js
60
+
└── package.json
106
61
```
107
62
108
-
If our plugins are placed in `myplugins`, we can conveniently create that
109
-
folder with the following command:
63
+
You can extract the plugins into a target directory like this:
Headlamp Desktop has a Plugin Catalog to install plugins easily. It includes plugins from Headlamp developers and the community.
120
72
121
-
### In-cluster deployment with plugins
73
+
By default, only official plugins in the Plugin Catalog are allowed. The catalog confirms which plugin you want to install. It also shows where the plugin will be downloaded from.
122
74
123
-
For in-cluster Headlamp deployments, when running Headlamp's server,
124
-
the `-plugin-dir` option should point to the directory:
75
+
:::important
76
+
The Plugin Catalog allows users to change the default behavior and instead show all
77
+
plugins. It is however extremely important that you only run plugins that you
78
+
trust, as plugins run in the same JavaScript context as the main application.
79
+
:::
125
80
126
-
```bash
127
-
./headlamp-server -plugins-dir=.plugins
128
-
```
81
+
To learn how to publish your plugin to make it available in the Plugin Catalog for other users, see the [Publishing Plugins guide](./publishing.md).
129
82
130
-
### Using plugins on the desktop version
83
+
### Manual Installation
131
84
132
-
The Headlamp desktop app will look for the plugins directory (in the format
133
-
mentioned above). This will be either under the user's Headlamp configuration folder
134
-
or within the current folder as `.plugins` if the former doesn't exist.
135
-
136
-
### Bundling plugins with desktop version
137
-
138
-
To build a Headlamp app with a set of plugins, first extract some plugins
139
-
into the .plugins folder in the root of the "headlamp" repo.
85
+
First, build and package the plugin in the plugin folder:
guide in the storybook documentation for more information.
112
+
## Plugins in Headlamp Deployments
197
113
198
-
This is in addition to the benefit of making sure your components can be
199
-
manually tested and developed quickly in isolation.
114
+
### Using InitContainer with a Plugin Image
200
115
201
-
See the [storybook documentation](https://storybook.js.org/docs/) for full
202
-
details on storybook.
116
+
When deploying Headlamp with plugins, it is easier to use a container image with the plugins already installed. Then, use an init container to mount the plugins into the Headlamp container.
203
117
204
-
## Running tests on a github action
118
+
Some plugins already have a published container image. For Headlamp's official plugins, see this [list](https://github.com/orgs/headlamp-k8s/packages?tab=packages&q=headlamp-plugin).
205
119
206
-
A workflow for testing your plugin on github with actions.
207
-
208
-
Below is based on the [Building and testing Node.js](https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs) docs from GitHub.
209
-
210
-
Place this in a file named something like `.github/workflows/headlamp-plugin-github-workflow.yaml` in the root of your repo.
120
+
You can thus deploy Headlamp with an init container, such as the [Flux UI plugin image](ghcr.io/headlamp-k8s/headlamp-plugin-flux:v0.3.0):
211
121
212
122
```yaml
213
-
name: Headlamp plugin linting, type checking, and testing
214
-
215
-
on:
216
-
push:
217
-
branches: [main]
218
-
pull_request:
219
-
branches: [main]
220
-
221
-
jobs:
222
-
build:
223
-
runs-on: ubuntu-latest
224
-
225
-
defaults:
226
-
run:
227
-
working-directory: ./your-folder-of-plugins
228
-
229
-
strategy:
230
-
matrix:
231
-
node-version: [18.x]
232
-
233
-
steps:
234
-
- uses: actions/checkout@v4
235
-
- name: Use Node.js ${{ matrix.node-version }}
236
-
uses: actions/setup-node@v3
237
-
with:
238
-
node-version: ${{ matrix.node-version }}
239
-
- run: npx @kinvolk/headlamp-plugin lint .
240
-
- run: npx @kinvolk/headlamp-plugin format --check .
args: ["cp -r /plugins/* /headlamp/plugins/ && ls -l /headlamp/plugins"]
144
+
volumeMounts:
145
+
- name: plugins
146
+
mountPath: /headlamp/plugins
147
+
containers:
148
+
- name: headlamp
149
+
image: ghcr.io/headlamp-k8s/headlamp:latest
150
+
args: ["-plugins-dir=/headlamp/plugins"]
151
+
ports:
152
+
- containerPort: 4466
153
+
volumeMounts:
154
+
- name: plugins
155
+
mountPath: /headlamp/plugins
156
+
volumes:
157
+
- name: plugins
158
+
emptyDir: {}
159
+
```
160
+
161
+
## Creating a Plugin Image
162
+
163
+
The Headlamp official plugins repository has a [Dockerfile](https://github.com/headlamp-k8s/plugins/blob/main/Dockerfile) to generate an image for a plugin. Here is how to use it with the Kompose plugin:
245
164
246
-
Please see the GitHub documentation for further details on workflows and actions.
247
-
248
-
## Upgrading package
249
-
250
-
There's a command that handles much of the upgrading of plugins to the latest headlamp-plugin version. This upgrade command also audits packages, formats code, lints, and type checks.
251
-
252
-
Additionally, this handles some code changes needed for plugins. For example, it handles running the material-ui 4 to mui 5 'codemod' code changes and creates missing configuration added in different versions of headlamp-plugin.
After this step you will have a `kompose-plugin:latest` image that you can use in your deployments, with the actual kompose plugin in its /plugins/kompose directory.
0 commit comments