hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

fix spelling in markdown, use en_GB as lang

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2020-12-01 15:38:01 -05:00
parent 111c518bf5
commit 7ebe700a3d
20 changed files with 169 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/clusters/settings.md
View File

@ -1,8 +1,8 @@
# Settings # Settings
It is easy to configure Lens Clusters to your liking through its various settings. It is easy to configure Lens Clusters to your liking through its various settings.
1. Right-click the name of the cluster in the left-side menu that you want to open the settings for. 1. Right-click the name of the cluster in the left-side menu that you want to open the settings for.
2. Click **Settings**. 2. Click **Settings**.
![Cluster settings](images/cluster-context-menu.png) ![Cluster settings](images/cluster-context-menu.png)
@ -23,7 +23,7 @@ General cluster settings
### Cluster Name ### Cluster Name
The cluster name is inheritated by default from the kubeconfig file. Change the cluster name to another value by updating it here. Note that doing so does not update your kubeconfig file. The cluster name is inherited by default from the kubeconfig file. Change the cluster name to another value by updating it here. Note that doing so does not update your kubeconfig file.
### Workspace ### Workspace
@ -60,7 +60,7 @@ Additional Lens features that can be installed by the user
### Metrics ### Metrics
Enable timeseries data visualization (Prometheus stack) for your cluster. Install this only if you don't have existing Prometheus stack installed. Enable time-series data visualization (Prometheus stack) for your cluster. Install this only if you don't have existing Prometheus stack installed.
### User Mode ### User Mode

2
docs/contributing/development.md
View File

@ -14,7 +14,7 @@ When contributing to this repository, please consider first discussing the chang
## Local Development Environment ## Local Development Environment
> Prerequisites: Nodejs v12, make, yarn > Prerequisites: NodeJS v12, make, yarn
* `make dev` - builds and starts the app * `make dev` - builds and starts the app
* `make clean` - cleanup local environment build artifacts * `make clean` - cleanup local environment build artifacts

4
docs/contributing/documentation.md
View File

@ -18,7 +18,7 @@ When you create a new pull request, we expect some requirements to be met.
* When adding new documentation, add `New Documentation:` before the title. E.g. `New Documentation: Getting Started` * When adding new documentation, add `New Documentation:` before the title. E.g. `New Documentation: Getting Started`
* When fixing documentation, add `Fix Documentation:` before the title. E.g. `Fix Documentation: Getting Started` * When fixing documentation, add `Fix Documentation:` before the title. E.g. `Fix Documentation: Getting Started`
* When updating documentation, add `Update Documentation:` before the title. E.g. `Update Documentation: Getting Started` * When updating documentation, add `Update Documentation:` before the title. E.g. `Update Documentation: Getting Started`
* If your Pull Request closes an issue, you must write `Closes #ISSUE_NUMBER` where the ISSUE_NUMBER is the number in the end of the link url or the relevent issue. This will link your pull request to the issue, and when it is merged, the issue will close. * If your Pull Request closes an issue, you must write `Closes #ISSUE_NUMBER` where the ISSUE_NUMBER is the number in the end of the link url or the relevant issue. This will link your pull request to the issue, and when it is merged, the issue will close.
* For each pull request made, we run tests to check if there are any broken links, the markdown formatting is valid, and the linter is passing. * For each pull request made, we run tests to check if there are any broken links, the markdown formatting is valid, and the linter is passing.
@ -28,6 +28,6 @@ Run a local instance of `mkdocs` in a docker container for developing the Lens D
> Prerequisites: docker, yarn > Prerequisites: docker, yarn
* `make docs` - local build and serve of mkdocs with auto update enabled * `make docs` - local build and serve of `mkdocs` with auto update enabled
Go to [localhost:8000](http://127.0.0.1:8000). Go to [localhost:8000](http://127.0.0.1:8000).

2
docs/contributing/github_workflow.md
View File

@ -1,4 +1,4 @@
# Github Workflow # GitHub Workflow
<!-- TOC --> <!-- TOC -->
- [Fork The Project](#fork-the-project) - [Fork The Project](#fork-the-project)

2
docs/contributing/maintainers.md
View File

@ -6,7 +6,7 @@ The responsibilities of a community maintainer are listed below.
## Issues Triage ## Issues Triage
* **Labeling Issues:** Label issues accordingly. * **Labelling Issues:** Label issues accordingly.
* **Finding Duplicates:** Finding and closing duplicate issues. * **Finding Duplicates:** Finding and closing duplicate issues.
* **Doing First Level Contact:** Getting more information on the issues (like version number or asking for clarification) if needed. * **Doing First Level Contact:** Getting more information on the issues (like version number or asking for clarification) if needed.
* **Closing Irrelevant Issues:** Closing issues that are determined irrelevant, no longer needed, not relevant to the project and/or don't follow the issues guidelines. * **Closing Irrelevant Issues:** Closing issues that are determined irrelevant, no longer needed, not relevant to the project and/or don't follow the issues guidelines.

4
docs/contributing/promotion.md
View File

@ -2,9 +2,9 @@
Help promote Lens! If you are not a developer (or even if you are), you can still contribute to the project – a lot – by helping us to promote it. As we are a free and open source project, the community is our most important asset. Here are some ways that you can help the project continue to grow. Help promote Lens! If you are not a developer (or even if you are), you can still contribute to the project – a lot – by helping us to promote it. As we are a free and open source project, the community is our most important asset. Here are some ways that you can help the project continue to grow.
## Follow, Like, Recommend, Favorite, Vote and Star Us ## Follow, Like, Recommend, Favourite, Vote and Star Us
There are many sites where you can vote, recommend, favorite, and star us. There are many sites where you can vote, recommend, favourite, and star us.
* [Twitter](https://twitter.com/k8slens) - Like, comment and retweet our posts, and follow us on Twitter. * [Twitter](https://twitter.com/k8slens) - Like, comment and retweet our posts, and follow us on Twitter.
* [Medium](https://medium.com/k8slens) - Give claps to our articles and follow us on Medium. * [Medium](https://medium.com/k8slens) - Give claps to our articles and follow us on Medium.

4
docs/contributing/testing.md
View File

@ -1,6 +1,6 @@
## Testing Your Code ## Testing Your Code
Lens uses github actions to run automated tests on any PR, before merging. Lens uses Github actions to run automated tests on any PR, before merging.
However, a PR will not be reviewed before all tests are green, so to save time and prevent your PR from going stale, it is best to test it before submitting the PR. However, a PR will not be reviewed before all tests are green, so to save time and prevent your PR from going stale, it is best to test it before submitting the PR.
### Run Local Verifications ### Run Local Verifications
@ -22,7 +22,7 @@ In the repository root directory, make sure that:
* `make build` runs successfully. * `make build` runs successfully.
* `make test` runs successfully. * `make test` runs successfully.
* `make integration` runs successfully (some tests require minikube running). * `make integration` runs successfully (some tests require `minikube` running).
Please note that this last test is prone to "flakiness", so it might fail on occasion. If it fails constantly, take a deeper look at your code to find the source of the problem. Please note that this last test is prone to "flakiness", so it might fail on occasion. If it fails constantly, take a deeper look at your code to find the source of the problem.

2
docs/extensions/README.md
View File

@ -1,6 +1,6 @@
# Lens Extension API # Lens Extension API
Customize and enhance the Lens experience with the Lens Extension API. Use the extension API to create menus or page content. The same extension API was used to create many of Lens's core features. Customise and enhance the Lens experience with the Lens Extension API. Use the extension API to create menus or page content. The same extension API was used to create many of Lens's core features.
This documentation describes: This documentation describes:

226
docs/extensions/capabilities/color-reference.md
View File

@ -1,130 +1,130 @@
# Theme Color Reference # Theme Color Reference
You can use theme-based CSS Variables to style an extension according to the active theme. You can use theme-based CSS Variables to style an extension according to the active theme.
## Base Colors ## Base Colours
- `--blue`: blue color. - `--blue`: blue colour.
- `--magenta`: magenta color. - `--magenta`: magenta colour.
- `--golden`: gold/yellow color. - `--golden`: gold/yellow colour.
- `--halfGray`: gray with some apacity applied. - `--halfGray`: grey with some opacity applied.
- `--primary`: Lens brand (blue) color. - `--primary`: Lens brand (blue) colour.
- `--colorSuccess`: successfull operations color. - `--colorSuccess`: successful operations colour.
- `--colorOk`: successfull operations (bright version) color. - `--colorOk`: successful operations (bright version) colour.
- `--colorInfo`: informational, in-progress color. - `--colorInfo`: informational, in-progress colour.
- `--colorError`: critical error color. - `--colorError`: critical error colour.
- `--colorSoftError`: error color. - `--colorSoftError`: error colour.
- `--colorWarning`: warning color. - `--colorWarning`: warning colour.
- `--colorVague`: soft gray color for notices, hints etc. - `--colorVague`: soft grey colour for notices, hints etc.
- `--colorTerminated`: terminated, closed, stale color. - `--colorTerminated`: terminated, closed, stale colour.
- `--boxShadow`: semi-transparent box-shadow color. - `--boxShadow`: semi-transparent box-shadow colour.
## Text Colors ## Text Colours
- `--textColorPrimary`: foreground text color. - `--textColorPrimary`: foreground text colour.
- `--textColorSecondary`: foreground text color for different paragraps, parts of text. - `--textColorSecondary`: foreground text colour for different paragraphs, parts of text.
- `--textColorAccent`: foreground text color to highlight its parts. - `--textColorAccent`: foreground text colour to highlight its parts.
## Border Colors ## Border Colours
- `--borderColor`: border color. - `--borderColor`: border colour.
- `--borderFaintColor`: fainted (lighter or darker, which depends on the theme) border color. - `--borderFaintColor`: fainted (lighter or darker, which depends on the theme) border colour.
## Layout Colors ## Layout Colours
- `--mainBackground`: main background color for the app. - `--mainBackground`: main background colour for the app.
- `--contentColor`: background color for panels contains some data. - `--contentColor`: background colour for panels contains some data.
- `--layoutBackground`: background color for layout parts. - `--layoutBackground`: background colour for layout parts.
- `--layoutTabsBackground`: background color for general tabs. - `--layoutTabsBackground`: background colour for general tabs.
- `--layoutTabsActiveColor`: foreground color for general tabs. - `--layoutTabsActiveColor`: foreground colour for general tabs.
- `--layoutTabsLineColor`: background color for lines under general tabs. - `--layoutTabsLineColor`: background colour for lines under general tabs.
## Sidebar Colors ## Sidebar Colours
- `--sidebarLogoBackground`: background color behind logo in sidebar. - `--sidebarLogoBackground`: background colour behind logo in sidebar.
- `--sidebarActiveColor`: foreground color for active menu items in sidebar. - `--sidebarActiveColor`: foreground colour for active menu items in sidebar.
- `--sidebarSubmenuActiveColor`: foreground color for active submenu items in sidebar. - `--sidebarSubmenuActiveColor`: foreground colour for active submenu items in sidebar.
- `--sidebarBackground`: background color for sidebar. - `--sidebarBackground`: background colour for sidebar.
## Button Colors ## Button Colours
- `--buttonPrimaryBackground`: button background color for primary actions. - `--buttonPrimaryBackground`: button background colour for primary actions.
- `--buttonDefaultBackground`: default button background color. - `--buttonDefaultBackground`: default button background colour.
- `--buttonAccentBackground`: accent button background color. - `--buttonAccentBackground`: accent button background colour.
- `--buttonDisabledBackground`: disabled button background color. - `--buttonDisabledBackground`: disabled button background colour.
## Table Colors ## Table Colours
- `--tableBgcStripe`: background color for odd rows in table. - `--tableBgcStripe`: background colour for odd rows in table.
- `--tableBgcSelected`: background color for selected row in table. - `--tableBgcSelected`: background colour for selected row in table.
- `--tableHeaderBackground`: background color for table header. - `--tableHeaderBackground`: background colour for table header.
- `--tableHeaderBorderWidth`: border width under table header. - `--tableHeaderBorderWidth`: border width under table header.
- `--tableHeaderBorderColor`: border color for line under table header. - `--tableHeaderBorderColor`: border colour for line under table header.
- `--tableHeaderColor`: foreground color for table header. - `--tableHeaderColor`: foreground colour for table header.
- `--tableSelectedRowColor`: foreground color for selected row in table. - `--tableSelectedRowColor`: foreground colour for selected row in table.
## Dock Colors ## Dock Colours
- `--dockHeadBackground`: background color for dock's header. - `--dockHeadBackground`: background colour for dock's header.
- `--dockInfoBackground`: background color for dock's info panel. - `--dockInfoBackground`: background colour for dock's info panel.
- `--dockInfoBorderColor`: border color for dock's info panel. - `--dockInfoBorderColor`: border colour for dock's info panel.
## Helm Chart Colors ## Helm Chart Colours
- `--helmLogoBackground`: background color for chart logo. - `--helmLogoBackground`: background colour for chart logo.
- `--helmImgBackground`: background color for chart image. - `--helmImgBackground`: background colour for chart image.
- `--helmStableRepo`: background color for stable repo. - `--helmStableRepo`: background colour for stable repo.
- `--helmIncubatorRepo`: background color for incubator repo. - `--helmIncubatorRepo`: background colour for incubator repo.
- `--helmDescriptionHr`: Helm chart description separator line color. - `--helmDescriptionHr`: Helm chart description separator line colour.
- `--helmDescriptionBlockqouteColor`: Helm chart description blockquote color. - `--helmDescriptionBlockqouteColor`: Helm chart description block-quote colour.
- `--helmDescriptionBlockqouteBorder`: Helm chart description blockquote border color. - `--helmDescriptionBlockqouteBorder`: Helm chart description block-quote border colour.
- `--helmDescriptionBlockquoteBackground`: Helm chart description blockquote background color. - `--helmDescriptionBlockquoteBackground`: Helm chart description block-quote background colour.
- `--helmDescriptionHeaders`: Helm chart description headers color. - `--helmDescriptionHeaders`: Helm chart description headers colour.
- `--helmDescriptionH6`: Helm chart description header foreground color. - `--helmDescriptionH6`: Helm chart description header foreground colour.
- `--helmDescriptionTdBorder`: Helm chart description table cell border color. - `--helmDescriptionTdBorder`: Helm chart description table cell border colour.
- `--helmDescriptionTrBackground`: Helm chart description table row background color. - `--helmDescriptionTrBackground`: Helm chart description table row background colour.
- `--helmDescriptionCodeBackground`: Helm chart description code background color. - `--helmDescriptionCodeBackground`: Helm chart description code background colour.
- `--helmDescriptionPreBackground`: Helm chart description pre background color. - `--helmDescriptionPreBackground`: Helm chart description pre background colour.
- `--helmDescriptionPreColor`: Helm chart description pre foreground color. - `--helmDescriptionPreColor`: Helm chart description pre foreground colour.
## Terminal Colors ## Terminal Colours
- `--terminalBackground`: Terminal background color. - `--terminalBackground`: Terminal background colour.
- `--terminalForeground`: Terminal foreground color. - `--terminalForeground`: Terminal foreground colour.
- `--terminalCursor`: Terminal cursor color. - `--terminalCursor`: Terminal cursor colour.
- `--terminalCursorAccent`: Terminal cursor accent color. - `--terminalCursorAccent`: Terminal cursor accent colour.
- `--terminalSelection`: Terminal selection background color. - `--terminalSelection`: Terminal selection background colour.
- `--terminalBlack`: Terminal black color. - `--terminalBlack`: Terminal black colour.
- `--terminalRed`: Terminal red color. - `--terminalRed`: Terminal red colour.
- `--terminalGreen`: Terminal green color. - `--terminalGreen`: Terminal green colour.
- `--terminalYellow`: Terminal yellow color. - `--terminalYellow`: Terminal yellow colour.
- `--terminalBlue`: Terminal blue color. - `--terminalBlue`: Terminal blue colour.
- `--terminalMagenta`: Terminal magenta color. - `--terminalMagenta`: Terminal magenta colour.
- `--terminalCyan`: Terminal cyan color. - `--terminalCyan`: Terminal cyan colour.
- `--terminalWhite`: Terminal white color. - `--terminalWhite`: Terminal white colour.
- `--terminalBrightBlack`: Terminal bright black color. - `--terminalBrightBlack`: Terminal bright black colour.
- `--terminalBrightRed`: Terminal bright red color. - `--terminalBrightRed`: Terminal bright red colour.
- `--terminalBrightGreen`: Terminal bright green color. - `--terminalBrightGreen`: Terminal bright green colour.
- `--terminalBrightYellow`: Terminal bright yellow color. - `--terminalBrightYellow`: Terminal bright yellow colour.
- `--terminalBrightBlue`: Terminal bright blue color. - `--terminalBrightBlue`: Terminal bright blue colour.
- `--terminalBrightMagenta`: Terminal bright magenta color. - `--terminalBrightMagenta`: Terminal bright magenta colour.
- `--terminalBrightCyan`: Terminal bright cyan color. - `--terminalBrightCyan`: Terminal bright cyan colour.
- `--terminalBrightWhite`: Terminal bright white color. - `--terminalBrightWhite`: Terminal bright white colour.
## Dialog Colors ## Dialog Colours
- `--dialogHeaderBackground`: background color for dialog header. - `--dialogHeaderBackground`: background colour for dialog header.
- `--dialogFooterBackground`: background color for dialog footer. - `--dialogFooterBackground`: background colour for dialog footer.
## Detail Panel (Drawer) Colors ## Detail Panel (Drawer) Colours
- `--drawerTitleText`: drawer title foreground color. - `--drawerTitleText`: drawer title foreground colour.
- `--drawerSubtitleBackground`: drawer subtitle foreground color. - `--drawerSubtitleBackground`: drawer subtitle foreground colour.
- `--drawerItemNameColor`: foreground color for item name in drawer. - `--drawerItemNameColor`: foreground colour for item name in drawer.
- `--drawerItemValueColor`: foreground color for item value in drawer. - `--drawerItemValueColor`: foreground colour for item value in drawer.
## Misc Colors ## Misc Colours
- `--logsBackground`: background color for pod logs. - `--logsBackground`: background colour for pod logs.
- `--clusterMenuBackground`: background color for cluster menu. - `--clusterMenuBackground`: background colour for cluster menu.
- `--clusterMenuBorderColor`: border color for cluster menu. - `--clusterMenuBorderColor`: border colour for cluster menu.
- `--clusterSettingsBackground`: background color for cluster settings. - `--clusterSettingsBackground`: background colour for cluster settings.
- `--addClusterIconColor`: add cluster button background color. - `--addClusterIconColor`: add cluster button background colour.
- `--iconActiveColor`: active cluster icon foreground color. - `--iconActiveColor`: active cluster icon foreground colour.
- `--iconActiveBackground`: active cluster icon background color. - `--iconActiveBackground`: active cluster icon background colour.
- `--filterAreaBackground`: page filter area (where selected namespaces are lister) background color. - `--filterAreaBackground`: page filter area (where selected namespaces are lister) background colour.
- `--chartStripesColor`: bar chart zebra stripes background color. - `--chartStripesColor`: bar chart zebra stripes background colour.
- `--chartCapacityColor`: background color for capacity values in bar charts. - `--chartCapacityColor`: background colour for capacity values in bar charts.
- `--pieChartDefaultColor`: default background color for pie chart values. - `--pieChartDefaultColor`: default background colour for pie chart values.
- `--selectOptionHoveredColor`: foregrond color for selected element in dropdown list. - `--selectOptionHoveredColor`: foreground colour for selected element in dropdown list.
- `--lineProgressBackground`: background color for progress line. - `--lineProgressBackground`: background colour for progress line.
- `--radioActiveBackground`: background color for active radio buttons. - `--radioActiveBackground`: background colour for active radio buttons.
- `--menuActiveBackground`: background color for active menu items. - `--menuActiveBackground`: background colour for active menu items.
In most cases you would only need base, text and some of the layout colors. In most cases you would only need base, text and some of the layout colours.

4
docs/extensions/capabilities/styling.md
View File

@ -97,7 +97,7 @@ These variables can be used in the following form: `var(--magenta)`. For example
} }
``` ```
A complete list of themable colors can be found in the [Color Reference](../color-reference). A complete list of colours that themes can change are found in the [Color Reference](../color-reference).
### Theme Switching ### Theme Switching
@ -132,7 +132,7 @@ Working example provided in [Styling with Emotion](https://github.com/lensapp/le
Every extension is affected by the list of default global styles defined in [app.scss](https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss). These are basic browser resets and element styles, including: Every extension is affected by the list of default global styles defined in [app.scss](https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss). These are basic browser resets and element styles, including:
- setting the `box-sizing` property for every element - setting the `box-sizing` property for every element
- default text and background colors - default text and background colours
- default font sizes - default font sizes
- basic heading (h1, h2, etc) formatting - basic heading (h1, h2, etc) formatting
- custom scrollbar styling - custom scrollbar styling

4
docs/extensions/get-started/anatomy.md
View File

@ -30,7 +30,7 @@ The extension directory contains the extension's entry files and a few configura
### Extension Manifest ### Extension Manifest
Each Lens extension must have a `package.json` file. It contains a mix of Node.js fields, including scripts and dependencies, and Lens-specific fields such as `publisher` and `contributes`. Some of the most-important fields include: Each Lens extension must have a `package.json` file. It contains a mix of NodeJS fields, including scripts and dependencies, and Lens-specific fields such as `publisher` and `contributes`. Some of the most-important fields include:
- `name` and `publisher`: Lens uses `@<publisher>/<name>` as a unique ID for the extension. For example, the Hello World sample has the ID `@lensapp-samples/helloworld-sample`. Lens uses this ID to uniquely identify your extension. - `name` and `publisher`: Lens uses `@<publisher>/<name>` as a unique ID for the extension. For example, the Hello World sample has the ID `@lensapp-samples/helloworld-sample`. Lens uses this ID to uniquely identify your extension.
- `main`: the extension's entry point run in `main` process. - `main`: the extension's entry point run in `main` process.
@ -73,7 +73,7 @@ Each Lens extension must have a `package.json` file. It contains a mix of Node.j
Lens extensions can have two separate entry files. One file is used in the `main` process of the Lens application and the other is used in the `renderer` process. The `main` entry file exports the class that extends `LensMainExtension`, and the `renderer` entry file exports the class that extends `LensRendererExtension`. Lens extensions can have two separate entry files. One file is used in the `main` process of the Lens application and the other is used in the `renderer` process. The `main` entry file exports the class that extends `LensMainExtension`, and the `renderer` entry file exports the class that extends `LensRendererExtension`.
Both extension classes have `onActivate` and `onDeactivate` methods. The `onActivate` method is executed when your extension is activated. If you need to initialize something in your extension, this is where such an operation should occur. The `onDeactivate` method gives you a chance to clean up before your extension becomes deactivated. For extensions where explicit cleanup is not required, you don't need to override this method. However, if an extension needs to perform an operation when Lens is shutting down (or if the extension is disabled or uninstalled), this is the method where such an operation should occur. Both extension classes have `onActivate` and `onDeactivate` methods. The `onActivate` method is executed when your extension is activated. If you need to initialise something in your extension, this is where such an operation should occur. The `onDeactivate` method gives you a chance to clean up before your extension becomes deactivated. For extensions where explicit cleanup is not required, you don't need to override this method. However, if an extension needs to perform an operation when Lens is shutting down (or if the extension is disabled or uninstalled), this is the method where such an operation should occur.
The Hello World sample extension does not do anything on the `main` process, so we'll focus on the `renderer` process, instead. On the `renderer` entry point, the Hello World sample extension defines the `Cluster Page` object. The `Cluster Page` object registers the `/extension-example` path, and this path renders the `ExamplePage` React component. It also registers the `MenuItem` component that displays the `ExampleIcon` React component and the "Hello World" text in the left-side menu of the cluster dashboard. These React components are defined in the additional `./src/page.tsx` file. The Hello World sample extension does not do anything on the `main` process, so we'll focus on the `renderer` process, instead. On the `renderer` entry point, the Hello World sample extension defines the `Cluster Page` object. The `Cluster Page` object registers the `/extension-example` path, and this path renders the `ExamplePage` React component. It also registers the `MenuItem` component that displays the `ExampleIcon` React component and the "Hello World" text in the left-side menu of the cluster dashboard. These React components are defined in the additional `./src/page.tsx` file.

8
docs/extensions/get-started/overview.md
View File

@ -1,12 +1,12 @@
# Extension Development Overview # Extension Development Overview
This is a general overview to how the development of an extension will procede. For building extensions there will be a few things that you should have installed, and some other things that might be of help. This is a general overview to how the development of an extension will proceed. For building extensions there will be a few things that you should have installed, and some other things that might be of help.
### Required: ### Required:
- [Node.js](https://www.nodejs.org/en/) - [NodeJS](https://www.nodejs.org/en/)
- [Git](https://www.git-scm.com/) - [Git](https://www.git-scm.com/)
- Some sort of text editor – we recommend [VSCode](https://code.visualstudio.com/) - Some sort of text editor – we recommend [VSCode](https://code.visualstudio.com/)
- We use [Webpack](https://www.webpack.js.org/) for compilation. All extension need to be at least compatable with a webpack system. - We use [webpack](https://webpack.js.org/) for compilation. All extension need to be at least compatible with a webpack system.
### Recommended: ### Recommended:
@ -14,6 +14,6 @@ All Lens extensions are javascript packages. We recommend that you program in [T
Lens is a standard [Electron](https://www.electronjs.org/) application with both main and renderer processes. An extension is made up of two parts, one for each of Lens's core processes. When an extension is loaded, each part is first loaded and issues a notification that it has been loaded. From there, the extension can start doing is work. Lens is a standard [Electron](https://www.electronjs.org/) application with both main and renderer processes. An extension is made up of two parts, one for each of Lens's core processes. When an extension is loaded, each part is first loaded and issues a notification that it has been loaded. From there, the extension can start doing is work.
Lens uses [React](https://www.reactjs.org/) as its UI framework and provides some of Lens's own components for reuse with extensions. An extension is resonsible for the lifetime of any resources it spins up. If an extension's main part starts new processes they all must be stopped and cleaned up when the extension is deactivated or unloaded. Lens uses [React](https://www.reactjs.org/) as its UI framework and provides some of Lens's own components for reuse with extensions. An extension is responsible for the lifetime of any resources it spins up. If an extension's main part starts new processes they all must be stopped and cleaned up when the extension is deactivated or unloaded.
See [Your First Extension](your-first-extension.md) to get started. See [Your First Extension](your-first-extension.md) to get started.

2
docs/extensions/get-started/wrapping-up.md
View File

@ -4,7 +4,7 @@ In [Your First Extension](your-first-extension.md), you learned how to create an
## Extension Capabilities ## Extension Capabilities
In this section, you'll find information on common extension capabilities, styling information, and a color reference guide. Determine whether your idea for an extension is doable and get ideas for new extensions by reading through the [Common Capabilities](../capabilities/common-capabilities.md) page. In this section, you'll find information on common extension capabilities, styling information, and a colour reference guide. Determine whether your idea for an extension is doable and get ideas for new extensions by reading through the [Common Capabilities](../capabilities/common-capabilities.md) page.
## Guides and Samples ## Guides and Samples

2
docs/extensions/guides/README.md
View File

@ -26,7 +26,7 @@ Each guide or sample will include:
| Sample | APIs | | Sample | APIs |
| ----- | ----- | | ----- | ----- |
[helloworld](https://github.com/lensapp/lens-extension-samples/tree/master/helloworld-sample) | LensMainExtension <br> LensRendererExtension <br> Component.Icon <br> Component.IconProps | [Hello World](https://github.com/lensapp/lens-extension-samples/tree/master/helloworld-sample) | LensMainExtension <br> LensRendererExtension <br> Component.Icon <br> Component.IconProps |
[minikube](https://github.com/lensapp/lens-extension-samples/tree/master/minikube-sample) | LensMainExtension <br> Store.clusterStore <br> Store.workspaceStore | [minikube](https://github.com/lensapp/lens-extension-samples/tree/master/minikube-sample) | LensMainExtension <br> Store.clusterStore <br> Store.workspaceStore |
[styling-css-modules-sample](https://github.com/lensapp/lens-extension-samples/tree/master/styling-css-modules-sample) | LensMainExtension <br> LensRendererExtension <br> Component.Icon <br> Component.IconProps | [styling-css-modules-sample](https://github.com/lensapp/lens-extension-samples/tree/master/styling-css-modules-sample) | LensMainExtension <br> LensRendererExtension <br> Component.Icon <br> Component.IconProps |
[styling-emotion-sample](https://github.com/lensapp/lens-extension-samples/tree/master/styling-emotion-sample) | LensMainExtension <br> LensRendererExtension <br> Component.Icon <br> Component.IconProps | [styling-emotion-sample](https://github.com/lensapp/lens-extension-samples/tree/master/styling-emotion-sample) | LensMainExtension <br> LensRendererExtension <br> Component.Icon <br> Component.IconProps |

6
docs/extensions/guides/main-extension.md
View File

@ -1,6 +1,6 @@
# Main Extension # Main Extension
The main extension api is the interface to Lens' main process (Lens runs in main and renderer processes). It allows you to access, configure, and customize Lens data, add custom application menu items, and generally run custom code in Lens' main process. The main extension api is the interface to Lens' main process (Lens runs in main and renderer processes). It allows you to access, configure, and customise Lens data, add custom application menu items, and generally run custom code in Lens' main process.
## `LensMainExtension` Class ## `LensMainExtension` Class
@ -55,7 +55,7 @@ See the [Stores](../stores) guide for more details on accessing Lens state data.
### `appMenus` ### `appMenus`
The only UI feature customizable in the main extension api is the application menu. Custom menu items can be inserted and linked to custom functionality, such as navigating to a specific page. The following example demonstrates adding a menu item to the Help menu. The only UI feature customisable in the main extension api is the application menu. Custom menu items can be inserted and linked to custom functionality, such as navigating to a specific page. The following example demonstrates adding a menu item to the Help menu.
``` typescript ``` typescript
import { LensMainExtension } from "@k8slens/extensions"; import { LensMainExtension } from "@k8slens/extensions";
@ -73,4 +73,4 @@ export default class SamplePageMainExtension extends LensMainExtension {
} }
``` ```
`appMenus` is an array of objects satisfying the `MenuRegistration` interface. `MenuRegistration` extends React's `MenuItemConstructorOptions` interface. `parentId` is the id of the menu to put this menu item under (todo: is this case sensitive and how do we know what the available ids are?), `label` is the text to show on the menu item, and `click()` is called when the menu item is selected. In this example we simply log a message, but typically you would navigate to a specific page or perform some operation. Pages are associated with the [`LensRendererExtension`](renderer-extension.md) class and can be defined when you extend it. `appMenus` is an array of objects satisfying the `MenuRegistration` interface. `MenuRegistration` extends React's `MenuItemConstructorOptions` interface. `parentId` is the id of the menu to put this menu item under (todo: is this case sensitive and how do we know what the available ids are?), `label` is the text to show on the menu item, and `click()` is called when the menu item is selected. In this example we simply log a message, but typically you would navigate to a specific page or perform some operation. Pages are associated with the [`LensRendererExtension`](renderer-extension.md) class and can be defined when you extend it.

38
docs/extensions/guides/renderer-extension.md
View File

@ -1,6 +1,6 @@
# Renderer Extension # Renderer Extension
The renderer extension api is the interface to Lens' renderer process (Lens runs in main and renderer processes). It allows you to access, configure, and customize Lens data, add custom Lens UI elements, and generally run custom code in Lens' renderer process. The custom Lens UI elements that can be added include global pages, cluster pages, cluster page menus, cluster features, app preferences, status bar items, KubeObject menu items, and KubeObject details items. These UI elements are based on React components. The renderer extension api is the interface to Lens' renderer process (Lens runs in main and renderer processes). It allows you to access, configure, and customise Lens data, add custom Lens UI elements, and generally run custom code in Lens' renderer process. The custom Lens UI elements that can be added include global pages, cluster pages, cluster page menus, cluster features, app preferences, status bar items, KubeObject menu items, and KubeObject details items. These UI elements are based on React components.
## `LensRendererExtension` Class ## `LensRendererExtension` Class
@ -20,11 +20,11 @@ export default class ExampleExtensionMain extends LensRendererExtension {
} }
``` ```
There are two methods that you can implement to facilitate running your custom code. `onActivate()` is called when your extension has been successfully enabled. By implementing `onActivate()` you can initiate your custom code. `onDeactivate()` is called when the extension is disabled (typically from the [Lens Extensions Page]()) and when implemented gives you a chance to clean up after your extension, if necessary. The example above simply logs messages when the extension is enabled and disabled. There are two methods that you can implement to facilitate running your custom code. `onActivate()` is called when your extension has been successfully enabled. By implementing `onActivate()` you can initiate your custom code. `onDeactivate()` is called when the extension is disabled (typically from the [Lens Extensions Page]()) and when implemented gives you a chance to clean up after your extension, if necessary. The example above simply logs messages when the extension is enabled and disabled.
### `clusterPages` ### `clusterPages`
Cluster pages appear as part of the cluster dashboard. They are accessible from the side bar, and are shown in the menu list after *Custom Resources*. It is conventional to use a cluster page to show information or provide functionality pertaining to the active cluster, along with custom data and functionality your extension may have. However, it is not limited to the active cluster. Also, your extension can gain access to the Kubernetes resources in the active cluster in a straightforward manner using the [`clusterStore`](../stores#clusterstore). Cluster pages appear as part of the cluster dashboard. They are accessible from the side bar, and are shown in the menu list after *Custom Resources*. It is conventional to use a cluster page to show information or provide functionality pertaining to the active cluster, along with custom data and functionality your extension may have. However, it is not limited to the active cluster. Also, your extension can gain access to the Kubernetes resources in the active cluster in a straightforward manner using the [`clusterStore`](../stores#clusterstore).
The following example adds a cluster page definition to a `LensRendererExtension` subclass: The following example adds a cluster page definition to a `LensRendererExtension` subclass:
@ -45,7 +45,7 @@ export default class ExampleExtension extends LensRendererExtension {
} }
``` ```
Cluster pages are objects matching the `PageRegistration` interface. The `id` field identiifies the page, and at its simplest is just a string identifier, as shown in the example above. The 'id' field can also convey route path details, such as variable parameters provided to a page ([See example below]()). The `components` field matches the `PageComponents` interface for wich there is one field, `Page`. `Page` is of type ` React.ComponentType<any>`, which gives you great flexibility in defining the appearance and behaviour of your page. For the example above `ExamplePage` can be defined in `page.tsx`: Cluster pages are objects matching the `PageRegistration` interface. The `id` field identifies the page, and at its simplest is just a string identifier, as shown in the example above. The 'id' field can also convey route path details, such as variable parameters provided to a page ([See example below]()). The `components` field matches the `PageComponents` interface for which there is one field, `Page`. `Page` is of type ` React.ComponentType<any>`, which gives you great flexibility in defining the appearance and behaviour of your page. For the example above `ExamplePage` can be defined in `page.tsx`:
``` typescript ``` typescript
import { LensRendererExtension } from "@k8slens/extensions"; import { LensRendererExtension } from "@k8slens/extensions";
@ -134,7 +134,7 @@ export default class ExampleExtension extends LensRendererExtension {
} }
}, },
{ {
id: "bonjour", id: "bonjour",
components: { components: {
Page: () => <ExemplePage extension={this}/>, Page: () => <ExemplePage extension={this}/>,
} }
@ -169,11 +169,11 @@ export default class ExampleExtension extends LensRendererExtension {
} }
``` ```
The above defines two cluster pages and three cluster page menu objects. The cluster page definitons are straightforward. The first cluster page menu object defines the parent of a foldout submenu. Setting the `id` field in a cluster page menu definition implies that it is defining a foldout submenu. Also note that the `target` field is not specified (it is ignored if the `id` field is specified). This cluster page menu object specifies the `title` and `components` fields, which are used in displaying the menu item in the cluster dashboard sidebar. Initially the submenu is hidden. Activating this menu item toggles on and off the appearance of the submenu below it. The remaining two cluster page menu objects define the contents of the submenu. A cluster page menu object is defined to be a submenu item by setting the `parentId` field to the id of the parent of a foldout submenu, `"example"` in this case The above defines two cluster pages and three cluster page menu objects. The cluster page definitions are straightforward. The first cluster page menu object defines the parent of a foldout submenu. Setting the `id` field in a cluster page menu definition implies that it is defining a foldout submenu. Also note that the `target` field is not specified (it is ignored if the `id` field is specified). This cluster page menu object specifies the `title` and `components` fields, which are used in displaying the menu item in the cluster dashboard sidebar. Initially the submenu is hidden. Activating this menu item toggles on and off the appearance of the submenu below it. The remaining two cluster page menu objects define the contents of the submenu. A cluster page menu object is defined to be a submenu item by setting the `parentId` field to the id of the parent of a foldout submenu, `"example"` in this case
### `globalPages` ### `globalPages`
Global pages appear independently of the cluster dashboard and they fill the Lens UI space. A global page is typically triggered from the cluster menu using a [global page menu](#globalpagemenus). They can also be triggered by a [custom app menu selection](../main-extension#appmenus) from a Main Extension or a [custom status bar item](#statusbaritems). Global pages can appear even when there is no active cluster, unlike cluster pages. It is conventional to use a global page to show information and provide functionality relevant across clusters, along with custom data and functionality that your extension may have. Global pages appear independently of the cluster dashboard and they fill the Lens UI space. A global page is typically triggered from the cluster menu using a [global page menu](#globalpagemenus). They can also be triggered by a [custom app menu selection](../main-extension#appmenus) from a Main Extension or a [custom status bar item](#statusbaritems). Global pages can appear even when there is no active cluster, unlike cluster pages. It is conventional to use a global page to show information and provide functionality relevant across clusters, along with custom data and functionality that your extension may have.
The following example defines a `LensRendererExtension` subclass with a single global page definition: The following example defines a `LensRendererExtension` subclass with a single global page definition:
@ -194,7 +194,7 @@ export default class HelpExtension extends LensRendererExtension {
} }
``` ```
Global pages are objects matching the `PageRegistration` interface. The `id` field identiifies the page, and at its simplest is just a string identifier, as shown in the example above. The 'id' field can also convey route path details, such as variable parameters provided to a page ([See example below]()). The `components` field matches the `PageComponents` interface for which there is one field, `Page`. `Page` is of type ` React.ComponentType<any>`, which gives you great flexibility in defining the appearance and behaviour of your page. For the example above `HelpPage` can be defined in `page.tsx`: Global pages are objects matching the `PageRegistration` interface. The `id` field identifies the page, and at its simplest is just a string identifier, as shown in the example above. The 'id' field can also convey route path details, such as variable parameters provided to a page ([See example below]()). The `components` field matches the `PageComponents` interface for which there is one field, `Page`. `Page` is of type ` React.ComponentType<any>`, which gives you great flexibility in defining the appearance and behaviour of your page. For the example above `HelpPage` can be defined in `page.tsx`:
``` typescript ``` typescript
import { LensRendererExtension } from "@k8slens/extensions"; import { LensRendererExtension } from "@k8slens/extensions";
@ -211,7 +211,7 @@ export class HelpPage extends React.Component<{ extension: LensRendererExtension
} }
``` ```
Note that the `HelpPage` class defines a property named `extension`. This allows the `HelpExtension` object to be passed in React-style in the global page definition, so that `HelpPage` can access any `HelpExtension` subclass data. Note that the `HelpPage` class defines a property named `extension`. This allows the `HelpExtension` object to be passed in React-style in the global page definition, so that `HelpPage` can access any `HelpExtension` subclass data.
This example code shows how to create a global page but not how to make it available to the Lens user. Global pages are typically made available through a number of ways. Menu items can be added to the Lens app menu system and set to open a global page when activated (See [`appMenus` in the Main Extension guide](../main-extension#appmenus)). Interactive elements can be placed on the status bar (the blue strip along the bottom of the Lens UI) and can be configured to link to a global page when activated (See [`statusBarItems`](#statusbaritems)). As well, global pages can be made accessible from the cluster menu, which is the vertical strip along the left side of the Lens UI showing the available cluster icons, and the Add Cluster icon. Global page menu icons that are defined using [`globalPageMenus`](#globalpagemenus) appear below the Add Cluster icon. This example code shows how to create a global page but not how to make it available to the Lens user. Global pages are typically made available through a number of ways. Menu items can be added to the Lens app menu system and set to open a global page when activated (See [`appMenus` in the Main Extension guide](../main-extension#appmenus)). Interactive elements can be placed on the status bar (the blue strip along the bottom of the Lens UI) and can be configured to link to a global page when activated (See [`statusBarItems`](#statusbaritems)). As well, global pages can be made accessible from the cluster menu, which is the vertical strip along the left side of the Lens UI showing the available cluster icons, and the Add Cluster icon. Global page menu icons that are defined using [`globalPageMenus`](#globalpagemenus) appear below the Add Cluster icon.
@ -267,11 +267,11 @@ export class HelpPage extends React.Component<{ extension: LensRendererExtension
} }
``` ```
`HelpIcon` introduces one of Lens' built-in components available to extension developers, the `Component.Icon`. Built in are the [Material Design](https://material.io) [icons](https://material.io/resources/icons/). One can be selected by name via the `material` field. `HelpIcon` introduces one of Lens' built-in components available to extension developers, the `Component.Icon`. Built in are the [Material Design](https://material.io) [icons](https://material.io/resources/icons/). One can be selected by name via the `material` field.
### `clusterFeatures` ### `clusterFeatures`
Cluster features are Kubernetes resources that can be applied to and managed within the active cluster. They can be installed/uninstalled by the Lens user from the [cluster settings page](). Cluster features are Kubernetes resources that can be applied to and managed within the active cluster. They can be installed/uninstalled by the Lens user from the [cluster settings page]().
The following example shows how to add a cluster feature as part of a `LensRendererExtension`: The following example shows how to add a cluster feature as part of a `LensRendererExtension`:
``` typescript ``` typescript
@ -306,11 +306,11 @@ The `title` and `components.Description` fields provide content that appears on
abstract updateStatus(cluster: Cluster): Promise<ClusterFeatureStatus>; abstract updateStatus(cluster: Cluster): Promise<ClusterFeatureStatus>;
``` ```
The `install()` method is typically called by Lens when a user has indicated that this feature is to be installed (i.e. clicked **Install** for the feature on the cluster settings page). The implementation of this method should install kubernetes resources using the `applyResources()` method, or by directly accessing the kubernetes api ([`K8sApi`](tbd)). The `install()` method is typically called by Lens when a user has indicated that this feature is to be installed (i.e. clicked **Install** for the feature on the cluster settings page). The implementation of this method should install Kubernetes resources using the `applyResources()` method, or by directly accessing the Kubernetes api ([`K8sApi`](tbd)).
The `upgrade()` method is typically called by Lens when a user has indicated that this feature is to be upgraded (i.e. clicked **Upgrade** for the feature on the cluster settings page). The implementation of this method should upgrade the kubernetes resources already installed, if relevant to the feature. The `upgrade()` method is typically called by Lens when a user has indicated that this feature is to be upgraded (i.e. clicked **Upgrade** for the feature on the cluster settings page). The implementation of this method should upgrade the Kubernetes resources already installed, if relevant to the feature.
The `uninstall()` method is typically called by Lens when a user has indicated that this feature is to be uninstalled (i.e. clicked **Uninstall** for the feature on the cluster settings page). The implementation of this method should uninstall kubernetes resources using the kubernetes api (`K8sApi`) The `uninstall()` method is typically called by Lens when a user has indicated that this feature is to be uninstalled (i.e. clicked **Uninstall** for the feature on the cluster settings page). The implementation of this method should uninstall Kubernetes resources using the Kubernetes api (`K8sApi`)
The `updateStatus()` method is called periodically by Lens to determine details about the feature's current status. The implementation of this method should provide the current status information in the `status` field of the `ClusterFeature.Feature` parent class. The `status.currentVersion` and `status.latestVersion` fields may be displayed by Lens in describing the feature. The `status.installed` field should be set to true if the feature is currently installed, otherwise false. Also, Lens relies on the `status.canUpgrade` field to determine if the feature can be upgraded (i.e a new version could be available) so the implementation should set the `status.canUpgrade` field according to specific rules for the feature, if relevant. The `updateStatus()` method is called periodically by Lens to determine details about the feature's current status. The implementation of this method should provide the current status information in the `status` field of the `ClusterFeature.Feature` parent class. The `status.currentVersion` and `status.latestVersion` fields may be displayed by Lens in describing the feature. The `status.installed` field should be set to true if the feature is currently installed, otherwise false. Also, Lens relies on the `status.canUpgrade` field to determine if the feature can be upgraded (i.e a new version could be available) so the implementation should set the `status.canUpgrade` field according to specific rules for the feature, if relevant.
@ -338,7 +338,7 @@ export class ExampleFeature extends ClusterFeature.Feature {
if (examplePod?.kind) { if (examplePod?.kind) {
this.status.installed = true; this.status.installed = true;
this.status.currentVersion = examplePod.spec.containers[0].image.split(":")[1]; this.status.currentVersion = examplePod.spec.containers[0].image.split(":")[1];
this.status.canUpgrade = true; // a real implementation would perform a check here that is relevant to the specific feature this.status.canUpgrade = true; // a real implementation would perform a check here that is relevant to the specific feature
} else { } else {
this.status.installed = false; this.status.installed = false;
this.status.canUpgrade = false; this.status.canUpgrade = false;
@ -375,9 +375,9 @@ spec:
The `upgrade()` method in the example above is implemented by simply invoking the `install()` method. Depending on the feature to be supported by an extension, upgrading may require additional and/or different steps. The `upgrade()` method in the example above is implemented by simply invoking the `install()` method. Depending on the feature to be supported by an extension, upgrading may require additional and/or different steps.
The `uninstall()` method is implemented in the example above by utilizing the [`K8sApi`](tbd) provided by Lens to simply delete the `example-pod` pod applied by the `install()` method. The `uninstall()` method is implemented in the example above by utilising the [`K8sApi`](tbd) provided by Lens to simply delete the `example-pod` pod applied by the `install()` method.
The `updateStatus()` method is implemented above by using the [`K8sApi`](tbd) as well, this time to get information from the `example-pod` pod, in particular to determine if it is installed, what version is associated with it, and if it can be upgraded. How the status is updated for a specific cluster feature is up to the implementation. The `updateStatus()` method is implemented above by using the [`K8sApi`](tbd) as well, this time to get information from the `example-pod` pod, in particular to determine if it is installed, what version is associated with it, and if it can be upgraded. How the status is updated for a specific cluster feature is up to the implementation.
### `appPreferences` ### `appPreferences`
@ -444,7 +444,7 @@ export class ExamplePreferenceHint extends React.Component {
Note that the above example introduces decorators `observable` and `observer` from the [`mobx`](https://mobx.js.org/README.html) and [`mobx-react`](https://github.com/mobxjs/mobx-react#mobx-react) packages. `mobx` simplifies state management and without it this example would not visually update the checkbox properly when the user activates it. [Lens uses `mobx` extensively for state management](../working-with-mobx) of its own UI elements and it is recommended that extensions rely on it too. Alternatively, React's state management can be used instead, though `mobx` is typically simpler to use. Note that the above example introduces decorators `observable` and `observer` from the [`mobx`](https://mobx.js.org/README.html) and [`mobx-react`](https://github.com/mobxjs/mobx-react#mobx-react) packages. `mobx` simplifies state management and without it this example would not visually update the checkbox properly when the user activates it. [Lens uses `mobx` extensively for state management](../working-with-mobx) of its own UI elements and it is recommended that extensions rely on it too. Alternatively, React's state management can be used instead, though `mobx` is typically simpler to use.
Also note that an extension's state data can be managed using an `ExtensionStore` object, which conveniently handles persistence and synchronization. The example above defined an `ExamplePreference` type to hold the extension's state to simplify the code for this guide, but it is recommended to manage your extension's state data using [`ExtensionStore`](../stores#extensionstore) Also note that an extension's state data can be managed using an `ExtensionStore` object, which conveniently handles persistence and synchronisation. The example above defined an `ExamplePreference` type to hold the extension's state to simplify the code for this guide, but it is recommended to manage your extension's state data using [`ExtensionStore`](../stores#extensionstore)
@ -534,4 +534,4 @@ export default class ExampleExtension extends LensRendererExtension {
} }
]; ];
} }
``` ```

2
docs/extensions/guides/working-with-mobx.md
View File

@ -11,7 +11,7 @@ However, if you do not, here is a quick overview.
- `Props` should be considered read-only from the point of view of the component and is the mechanism for passing in "arguments" to a component. - `Props` should be considered read-only from the point of view of the component and is the mechanism for passing in "arguments" to a component.
- `State` is a component's internal state and can be read by accessing the parent field `state`. - `State` is a component's internal state and can be read by accessing the parent field `state`.
- `State` **must** be updated using the `setState` parent method which merges the new data with the old state. - `State` **must** be updated using the `setState` parent method which merges the new data with the old state.
- `React` does do some optimizations around re-rendering components after quick successions of `setState` calls. - `React` does do some optimisations around re-rendering components after quick successions of `setState` calls.
## How mobx works: ## How mobx works:

2
docs/getting-started/introductory-videos.md
View File

@ -1,6 +1,6 @@
# Introductory Videos # Introductory Videos
Continue your Lens journey with this set of introductory videos! These videos are meant to quickly familiarize you with Lens' various powerful features. Continue your Lens journey with this set of introductory videos! These videos are meant to quickly familiarise you with Lens' various powerful features.
<ul class="video-list"> <ul class="video-list">
<li class="video"> <li class="video">

11
docs/getting-started/preferences.md
View File

@ -3,16 +3,16 @@
## Color Themes ## Color Themes
The Color Themes option in Lens preferences lets you set the colors in the Lens user interface to suit your liking. The Color Themes option in Lens preferences lets you set the colours in the Lens user interface to suit your liking.
1. Go to **File** > **Preferences** (**Lens** > **Preferences** on Mac). 1. Go to **File** > **Preferences** (**Lens** > **Preferences** on Mac).
2. Select your preferred theme from the **Color Theme** dropdown. 2. Select your preferred theme from the **Color Theme** dropdown.
![Color Theme](images/color-theme.png) ![Color Theme](images/color-theme.png)
## Telemetry & Usage Tracking ## Telemetry & Usage Tracking
Lens collects telemetry data, which is used to help us understand how to improve the product. For example, this usage data helps us to debug issues and to prioritize new features. While we appreciate the insights this data provides, we also know that not everyone wants to send usage data. Please see our [privacy statement](https://www.mirantis.com/company/privacy-policy/) to learn more. Lens collects telemetry data, which is used to help us understand how to improve the product. For example, this usage data helps us to debug issues and to prioritise new features. While we appreciate the insights this data provides, we also know that not everyone wants to send usage data. Please see our [privacy statement](https://www.mirantis.com/company/privacy-policy/) to learn more.
### Disable Telemetry Reporting ### Disable Telemetry Reporting
@ -21,8 +21,7 @@ If you don't wish to send usage data to Mirantis, you can disable the "Telemetry
1. Go to **File** > **Preferences** (**Lens** > **Preferences** on Mac). 1. Go to **File** > **Preferences** (**Lens** > **Preferences** on Mac).
2. Scroll down to **Telemetry & Usage Tracking** 2. Scroll down to **Telemetry & Usage Tracking**
3. Uncheck **Allow Telemetry & Usage Tracking**. 3. Uncheck **Allow Telemetry & Usage Tracking**.
This will silence all telemetry events from Lens going forward. Telemetry information may have been collected and sent up until the point when you disable this setting. This will silence all telemetry events from Lens going forward. Telemetry information may have been collected and sent up until the point when you disable this setting.
![Disable Telemetry & Usage Tracking](images/disabled-telemetry-usage-tracking.png) ![Disable Telemetry & Usage Tracking](images/disabled-telemetry-usage-tracking.png)

6
docs/helm/README.md
View File

@ -4,18 +4,18 @@ Lens has integration to Helm making it easy to install and manage Helm charts an
![Helm Charts](images/helm-charts.png) ![Helm Charts](images/helm-charts.png)
## Managing Helm Reporistories ## Managing Helm Repositories
Used Helm repositories are possible to configure in the [Preferences](/getting-started/preferences). Lens app will fetch available Helm repositories from the [Artifact HUB](https://artifacthub.io/) and automatically add `bitnami` repository by default if no other repositories are already configured. If any other repositories are needed to add, those can be added manually via command line. **Note!** Configured Helm repositories are added globally to user's computer, so other processes can see those as well. Used Helm repositories are possible to configure in the [Preferences](/getting-started/preferences). Lens app will fetch available Helm repositories from the [Artifact HUB](https://artifacthub.io/) and automatically add `bitnami` repository by default if no other repositories are already configured. If any other repositories are needed to add, those can be added manually via command line. **Note!** Configured Helm repositories are added globally to user's computer, so other processes can see those as well.
## Installing a Helm Chart ## Installing a Helm Chart
Lens will list all charts from configured Helm repositries on Apps section. To install a chart, you need to select a chart and click "Install" button. Lens will open the chart in the editor where you can select a chart version, target namespace and give optionally a name for the release and configure values for the release. Finally, by clicking "Install" button Lens will deploy the chart into the cluster. Lens will list all charts from configured Helm repositories on Apps section. To install a chart, you need to select a chart and click "Install" button. Lens will open the chart in the editor where you can select a chart version, target namespace and give optionally a name for the release and configure values for the release. Finally, by clicking "Install" button Lens will deploy the chart into the cluster.
## Updating a Helm Release ## Updating a Helm Release
To update a Helm release, you can open the release details and modify the release values and click "Save" button. To upgrade or downgrade the release, click "Upgrade" button in the release details. In the release editor you can select a new chart version and edit the release values if needed and then click "Upgrade" or "Upgrade and Close" button. To update a Helm release, you can open the release details and modify the release values and click "Save" button. To upgrade or downgrade the release, click "Upgrade" button in the release details. In the release editor you can select a new chart version and edit the release values if needed and then click "Upgrade" or "Upgrade and Close" button.
## Deleting a Helm Release ## Deleting a Helm Release
To delete existing Helm release open the release details and click trash can icon on the top of the panel. Deletion removes all Kubernetes resources created by the Helm release. **Note!** If the release included any persistent volumes, those are required to remove manually! To delete existing Helm release open the release details and click trash can icon on the top of the panel. Deletion removes all Kubernetes resources created by the Helm release. **Note!** If the release included any persistent volumes, those are required to remove manually!